7658-devToTest_2428 #508

Merged
alexm merged 392 commits from 7658-devToTest_2428 into test 2024-07-02 10:38:20 +00:00
7 changed files with 57 additions and 417 deletions
Showing only changes of commit ac77fea3d7 - Show all commits

View File

@ -18,12 +18,12 @@ function stopEventPropagation(event) {
<template>
<span
v-for="col of columns"
:key="col.field"
:key="col.name"
@click="stopEventPropagation($event)"
class="cursor-text"
>
<QChip
v-if="col.chip.condition(row[col.field], row)"
v-if="col.chip.condition(row[col.name], row)"
:title="col.label"
:class="
col.chip.color
@ -33,7 +33,7 @@ function stopEventPropagation(event) {
dense
square
>
<span v-if="!col.chip.icon">{{ row[col.field] }}</span>
<span v-if="!col.chip.icon">{{ row[col.name] }}</span>
<QIcon v-else :name="col.chip.icon" color="primary-light" />
</QChip>
</span>

View File

@ -85,7 +85,7 @@ const defaultComponents = {
const value = computed(() => {
return $props.column.format
? $props.column.format($props.row, dashIfEmpty)
: dashIfEmpty($props.row[$props.column.field]);
: dashIfEmpty($props.row[$props.column.name]);
});
const col = computed(() => {

View File

@ -67,6 +67,7 @@ const components = {
attrs: {
dense: true,
class: 'q-pa-sm q-mt-md',
'toggle-indeterminate': true,
},
forceAttrs: {
label: $props.showTitle ? '' : $props.column.label,
@ -89,7 +90,7 @@ const components = {
async function addFilter(value) {
if (value && typeof value === 'object') value = model.value;
value = value == '' ? null : value;
let field = columnFilter.value?.field ?? $props.column.field;
let field = columnFilter.value?.name ?? $props.column.name;
const toFilter = { [field]: value };
await arrayData.addFilter({ params: toFilter });
@ -110,7 +111,7 @@ function alignRow() {
{{ column.label }}
</div>
<div
v-if="columnFilter !== false && column.field != 'tableActions'"
v-if="columnFilter !== false && column.name != 'tableActions'"
class="row no-wrap"
:class="alignRow()"
>

View File

@ -89,7 +89,7 @@ function splitColumns(columns) {
};
for (const col of columns) {
if (col.field == 'tableActions') splittedColumns.value.actions = col;
if (col.name == 'tableActions') splittedColumns.value.actions = col;
if (col.chip) splittedColumns.value.chips.push(col);
if (col.isTitle) splittedColumns.value.title = col;
if (col.create) splittedColumns.value.create.push(col);
@ -104,9 +104,8 @@ function splitColumns(columns) {
if (splittedColumns.value.columnChips.length)
splittedColumns.value.columns.unshift({
align: 'left',
field: 'status',
label: t('status'),
name: 'status',
name: 'tableStatus',
columnFilter: false,
});
}
@ -156,7 +155,7 @@ defineExpose({
:data-key="$attrs['data-key']"
v-for="col of splittedColumns.columns"
:key="col.id"
v-model="params[col.columnFilter?.field ?? col.field]"
v-model="params[col.columnFilter?.name ?? col.name]"
/>
</template>
<slot
@ -197,13 +196,13 @@ defineExpose({
<slot name="top-left"></slot>
</template>
<template #top-right>
<QBtn
<!-- <QBtn
icon="visibility"
title="asd"
class="bg-vn-section-color q-mr-md"
dense
v-if="mode == 'table'"
/>
/> -->
<QBtnToggle
v-model="mode"
toggle-color="primary"
@ -225,11 +224,11 @@ defineExpose({
:column="col"
:show-title="true"
:data-key="$attrs['data-key']"
v-model="params[col.columnFilter?.field ?? col.field]"
v-model="params[col.columnFilter?.name ?? col.name]"
/>
</QTh>
</template>
<template #body-cell-status="{ col, row }">
<template #body-cell-tableStatus="{ col, row }">
<QTd auto-width :class="`text-${col.align ?? 'left'}`">
<VnTableChip :columns="splittedColumns.columnChips" :row="row">
<template #afterChip>
@ -248,11 +247,27 @@ defineExpose({
:column="col"
:row="row"
:is-editable="false"
v-model="row[col.field]"
v-model="row[col.name]"
component-prop="columnField"
/>
</QTd>
</template>
<template #body-cell-tableActions="{ col, row }">
<QTd auto-width :class="`text-${col.align ?? 'left'} `">
<QBtn
v-for="(btn, index) of col.actions"
:key="index"
:title="btn.title"
:icon="btn.icon"
class="q-px-sm"
flat
:class="
btn.isPrimary ? 'text-primary-light' : 'color-vn-text '
"
@click="btn.action(row)"
/>
</QTd>
</template>
<template #item="{ row, colsMap }">
<component
:is="$props.redirect ? 'router-link' : 'span'"
@ -289,17 +304,17 @@ defineExpose({
class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
>
<span
:title="row[splittedColumns.title.field]"
:title="row[splittedColumns.title.name]"
@click="stopEventPropagation($event)"
class="cursor-text"
>{{ row[splittedColumns.title.field] }}</span
>{{ row[splittedColumns.title.name] }}</span
>
</QCardSection>
<!-- Fields -->
<QCardSection class="q-pl-sm q-pr-lg q-py-xs flex-one">
<div
v-for="col of splittedColumns.visible"
:key="col.field"
:key="col.name"
class="fields"
>
<VnLv :label="`${col.label}:`">
@ -321,7 +336,8 @@ defineExpose({
@click="stopEventPropagation($event)"
>
<QBtn
v-for="(btn, index) of colsMap.tableActions.actions"
v-for="(btn, index) of splittedColumns.actions
.actions"
:key="index"
:title="btn.title"
:icon="btn.icon"
@ -357,11 +373,11 @@ defineExpose({
<div class="grid-create">
<VnTableColumn
v-for="column of splittedColumns.create"
:key="column.field"
:key="column.name"
:column="column"
:row="{}"
default="input"
v-model="data[column.field]"
v-model="data[column.name]"
/>
<slot name="more-create-dialog" :data="data" />
</div>
@ -478,6 +494,10 @@ defineExpose({
}
}
}
.sticky {
position: sticky;
z-index: 1;
}
}
.vn-label-value {

View File

@ -1,5 +1,5 @@
<template>
<span v-for="toComponent of componentArray" :key="toComponent.field">
<span v-for="toComponent of componentArray" :key="toComponent.name">
<component
v-if="toComponent?.component"
:is="mix(toComponent).component"

View File

@ -89,7 +89,6 @@ const isLoading = ref(false);
async function search() {
store.filter.where = {};
isLoading.value = true;
console.log('params.value: ', params.value);
const filter = { ...userParams.value, ...params.value };
store.userParamsChanged = true;
store.filter.skip = 0;

View File

@ -7,281 +7,28 @@ import VnLocation from 'src/components/common/VnLocation.vue';
import CustomerSummary from '../Card/CustomerSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { QBtn, QIcon } from 'quasar';
import CustomerExtendedListActions from './CustomerExtendedListActions.vue';
import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
import { useStateStore } from 'stores/useStateStore';
import { toDate } from 'src/filters';
const { t } = useI18n();
const router = useRouter();
const stateStore = useStateStore();
onMounted(() => {
const filteredColumns = columns.value.filter(
(col) => col.name !== 'actions' && col.name !== 'customerStatus'
);
allColumnNames.value = filteredColumns.map((col) => col.name);
});
const selectedCustomerId = ref(0);
const selectedSalesPersonId = ref(0);
const allColumnNames = ref([]);
const visibleColumns = ref([]);
const postcodesOptions = ref([]);
const tableRef = ref();
const tableColumnComponents = {
customerStatus: {
component: QIcon,
props: (prop) => ({
name: !prop.row.isActive
? 'vn:disabled'
: prop.row.isActive && prop.row.isFreezed
? 'vn:frozen'
: '',
color: 'primary',
size: 'sm',
}),
event: () => {},
},
id: {
component: QBtn,
props: () => ({ flat: true, color: 'blue' }),
event: (prop) => {
selectCustomerId(prop.row.id);
},
},
name: {
component: 'span',
props: () => {},
event: () => {},
},
socialName: {
component: 'span',
props: () => {},
event: () => {},
},
fi: {
component: 'span',
props: () => {},
event: () => {},
},
salesPersonFk: {
component: QBtn,
props: () => ({ flat: true, color: 'blue' }),
event: (prop) => selectSalesPersonId(prop.row.salesPersonFk),
},
credit: {
component: 'span',
props: () => {},
event: () => {},
},
creditInsurance: {
component: 'span',
props: () => {},
event: () => {},
},
phone: {
component: 'span',
props: () => {},
event: () => {},
},
mobile: {
component: 'span',
props: () => {},
event: () => {},
},
street: {
component: 'span',
props: () => {},
event: () => {},
},
countryFk: {
component: 'span',
props: () => {},
event: () => {},
},
provinceFk: {
component: 'span',
props: () => {},
event: () => {},
},
city: {
component: 'span',
props: () => {},
event: () => {},
},
postcode: {
component: 'span',
props: () => {},
event: () => {},
},
email: {
component: 'span',
props: () => {},
event: () => {},
},
created: {
component: 'span',
props: () => {},
event: () => {},
},
businessTypeFk: {
component: 'span',
props: () => {},
event: () => {},
},
payMethodFk: {
component: 'span',
props: () => {},
event: () => {},
},
sageTaxTypeFk: {
component: 'span',
props: () => {},
event: () => {},
},
sageTransactionTypeFk: {
component: 'span',
props: () => {},
event: () => {},
},
isActive: {
component: QIcon,
props: (prop) => ({
name: prop.row.isActive ? 'check' : 'close',
color: prop.row.isActive ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
isVies: {
component: QIcon,
props: (prop) => ({
name: prop.row.isVies ? 'check' : 'close',
color: prop.row.isVies ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
isTaxDataChecked: {
component: QIcon,
props: (prop) => ({
name: prop.row.isTaxDataChecked ? 'check' : 'close',
color: prop.row.isTaxDataChecked ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
isEqualizated: {
component: QIcon,
props: (prop) => ({
name: prop.row.isEqualizated ? 'check' : 'close',
color: prop.row.isEqualizated ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
isFreezed: {
component: QIcon,
props: (prop) => ({
name: prop.row.isFreezed ? 'check' : 'close',
color: prop.row.isFreezed ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
hasToInvoice: {
component: QIcon,
props: (prop) => ({
name: prop.row.hasToInvoice ? 'check' : 'close',
color: prop.row.hasToInvoice ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
hasToInvoiceByAddress: {
component: QIcon,
props: (prop) => ({
name: prop.row.hasToInvoiceByAddress ? 'check' : 'close',
color: prop.row.hasToInvoiceByAddress ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
isToBeMailed: {
component: QIcon,
props: (prop) => ({
name: prop.row.isToBeMailed ? 'check' : 'close',
color: prop.row.isToBeMailed ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
hasLcr: {
component: QIcon,
props: (prop) => ({
name: prop.row.hasLcr ? 'check' : 'close',
color: prop.row.hasLcr ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
hasCoreVnl: {
component: QIcon,
props: (prop) => ({
name: prop.row.hasCoreVnl ? 'check' : 'close',
color: prop.row.hasCoreVnl ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
hasSepaVnl: {
component: QIcon,
props: (prop) => ({
name: prop.row.hasSepaVnl ? 'check' : 'close',
color: prop.row.hasSepaVnl ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
actions: {
component: CustomerExtendedListActions,
props: (prop) => ({
id: prop.row.id,
}),
event: () => {},
},
};
const { viewSummary } = useSummaryDialog();
const redirectToCreateView = (row) => {
router.push({
name: 'TicketList',
query: {
params: JSON.stringify({
clientFk: row.id,
}),
},
});
};
const columns = computed(() => [
{
align: 'left',
field: 'id',
label: t('customer.extendedList.tableVisibleColumns.id'),
name: 'id',
label: t('customer.extendedList.tableVisibleColumns.id'),
chip: {
condition: () => true,
},
isId: true,
columnFilter: {
component: 'select',
field: 'search',
name: 'search',
attrs: {
url: 'Clients',
fields: ['id', 'name'],
@ -290,7 +37,6 @@ const columns = computed(() => [
},
{
align: 'left',
field: 'name',
label: t('customer.extendedList.tableVisibleColumns.name'),
name: 'name',
isTitle: true,
@ -298,21 +44,19 @@ const columns = computed(() => [
},
{
align: 'left',
field: 'socialName',
name: 'socialName',
label: t('customer.extendedList.tableVisibleColumns.socialName'),
isTitle: true,
create: true,
},
{
align: 'left',
field: 'fi',
label: t('customer.extendedList.tableVisibleColumns.fi'),
name: 'fi',
create: true,
},
{
align: 'left',
field: 'salesPersonFk',
label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
name: 'salesPersonFk',
component: 'select',
@ -329,19 +73,16 @@ const columns = computed(() => [
},
{
align: 'left',
field: 'credit',
label: t('customer.extendedList.tableVisibleColumns.credit'),
name: 'credit',
},
{
align: 'left',
field: 'creditInsurance',
label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
name: 'creditInsurance',
},
{
align: 'left',
field: 'phone',
label: t('customer.extendedList.tableVisibleColumns.phone'),
name: 'phone',
cardVisible: true,
@ -354,59 +95,50 @@ const columns = computed(() => [
},
{
align: 'left',
field: 'mobile',
label: t('customer.extendedList.tableVisibleColumns.mobile'),
name: 'mobile',
cardVisible: true,
},
{
align: 'left',
field: 'street',
label: t('customer.extendedList.tableVisibleColumns.street'),
name: 'street',
create: true,
},
{
align: 'left',
field: 'country',
label: t('customer.extendedList.tableVisibleColumns.countryFk'),
name: 'countryFk',
name: 'country',
},
{
align: 'left',
field: 'province',
label: t('customer.extendedList.tableVisibleColumns.provinceFk'),
name: 'provinceFk',
},
{
align: 'left',
field: 'city',
label: t('customer.extendedList.tableVisibleColumns.city'),
name: 'city',
},
{
align: 'left',
field: 'postcode',
label: t('customer.extendedList.tableVisibleColumns.postcode'),
name: 'postcode',
},
{
align: 'left',
field: 'email',
label: t('customer.extendedList.tableVisibleColumns.email'),
name: 'email',
cardVisible: true,
},
{
align: 'left',
field: 'created',
label: t('customer.extendedList.tableVisibleColumns.created'),
name: 'created',
format: ({ created }) => toDate(created),
},
{
align: 'left',
field: 'businessTypeFk',
label: t('customer.extendedList.tableVisibleColumns.businessTypeFk'),
name: 'businessTypeFk',
create: true,
@ -423,25 +155,21 @@ const columns = computed(() => [
},
{
align: 'left',
field: 'payMethod',
label: t('customer.extendedList.tableVisibleColumns.payMethodFk'),
name: 'payMethodFk',
},
{
align: 'left',
field: 'sageTaxType',
label: t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk'),
name: 'sageTaxTypeFk',
},
{
align: 'left',
field: 'sageTransactionType',
label: t('customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'),
name: 'sageTransactionTypeFk',
},
{
align: 'left',
field: 'isActive',
label: t('customer.extendedList.tableVisibleColumns.isActive'),
name: 'isActive',
chip: {
@ -453,21 +181,18 @@ const columns = computed(() => [
},
{
align: 'left',
field: 'isVies',
label: t('customer.extendedList.tableVisibleColumns.isVies'),
name: 'isVies',
component: 'checkbox',
},
{
align: 'left',
field: 'isTaxDataChecked',
label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
name: 'isTaxDataChecked',
component: 'checkbox',
},
{
align: 'left',
field: 'isEqualizated',
label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
name: 'isEqualizated',
component: 'checkbox',
@ -475,7 +200,6 @@ const columns = computed(() => [
},
{
align: 'left',
field: 'isFreezed',
label: t('customer.extendedList.tableVisibleColumns.isFreezed'),
name: 'isFreezed',
chip: {
@ -487,49 +211,42 @@ const columns = computed(() => [
},
{
align: 'left',
field: 'hasToInvoice',
label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
name: 'hasToInvoice',
component: 'checkbox',
},
{
align: 'left',
field: 'hasToInvoiceByAddress',
label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
name: 'hasToInvoiceByAddress',
component: 'checkbox',
},
{
align: 'left',
field: 'isToBeMailed',
label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
name: 'isToBeMailed',
component: 'checkbox',
},
{
align: 'left',
field: 'hasLcr',
label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
name: 'hasLcr',
component: 'checkbox',
},
{
align: 'left',
field: 'hasCoreVnl',
label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
name: 'hasCoreVnl',
component: 'checkbox',
},
{
align: 'left',
field: 'hasSepaVnl',
label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
name: 'hasSepaVnl',
component: 'checkbox',
},
{
align: 'right',
field: 'tableActions',
label: '',
name: 'tableActions',
actions: [
@ -548,18 +265,18 @@ const columns = computed(() => [
},
]);
const stopEventPropagation = (event, col) => {
if (!['id', 'salesPersonFk'].includes(col.name)) return;
event.preventDefault();
event.stopPropagation();
const { viewSummary } = useSummaryDialog();
const redirectToCreateView = (row) => {
router.push({
name: 'TicketList',
query: {
params: JSON.stringify({
clientFk: row.id,
}),
},
});
};
const navigateToTravelId = (id) => router.push({ path: `/customer/${id}` });
const selectCustomerId = (id) => (selectedCustomerId.value = id);
const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
function handleLocation(data, location) {
const { town, code, provinceFk, countryFk } = location ?? {};
data.postcode = code;
@ -570,45 +287,6 @@ function handleLocation(data, location) {
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport></template
>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<CustomerExtendedListFilter
v-if="visibleColumns.length !== 0"
data-key="CustomerExtendedList"
:visible-columns="visibleColumns"
/>
</QScrollArea>
</QDrawer>
<!-- <VnSubToolbar>
<template #st-actions>
<TableVisibleColumns
:all-columns="allColumnNames"
table-code="clientsDetail"
labels-traductions-path="customer.extendedList.tableVisibleColumns"
@on-config-saved="
visibleColumns = ['customerStatus', ...$event, 'actions']
"
/>
</template>
</VnSubToolbar> -->
<VnTable
ref="tableRef"
data-key="CustomerExtendedList"
@ -621,18 +299,6 @@ function handleLocation(data, location) {
formInitialData: {
active: true,
isEqualizated: false,
name: 'FFFF',
socialName: 'FFFFFF',
fi: '58233369H',
salesPersonFk: 15,
street: 'FASD',
businessTypeFk: 'individual',
email: 'adddssssd@asd.es',
userName: 'asdasdax',
postcode: '46680',
city: 'Algemesi',
provinceFk: 1,
countryFk: 1,
},
}"
order="id DESC"
@ -660,52 +326,6 @@ function handleLocation(data, location) {
>
</VnLocation>
</template>
<!-- redirect="customer" -->
<!--
default-mode="table"
<template #body-cell="{ col, value }">
<QTd @click="stopEventPropagation($event, col)">
{{ value }}
</QTd>
</template>
<template #body-cell-id="props">
<QTd @click="stopEventPropagation($event, props.col)">
<component
:is="tableColumnComponents[props.col.name].component"
class="col-content"
v-bind="tableColumnComponents[props.col.name].props(props)"
@click="tableColumnComponents[props.col.name].event(props)"
>
<CustomerDescriptorProxy :id="props.row.id" />
{{ props.row.id }}
</component>
</QTd>
</template>
<template #body-cell-salesPersonFk="props">
<QTd @click="stopEventPropagation($event, props.col)">
<component
v-if="props.row.salesPerson"
class="col-content"
:is="tableColumnComponents[props.col.name].component"
v-bind="tableColumnComponents[props.col.name].props(props)"
@click="tableColumnComponents[props.col.name].event(props)"
>
<WorkerDescriptorProxy :id="props.row.salesPersonFk" />
{{ props.row.salesPerson }}
</component>
<span class="col-content" v-else>-</span>
</QTd>
</template>
<template #body-cell-actions="props">
<QTd @click="stopEventPropagation($event, props.col)">
<component
:is="tableColumnComponents[props.col.name].component"
class="col-content"
v-bind="tableColumnComponents[props.col.name].props(props)"
@click="tableColumnComponents[props.col.name].event(props)"
/>
</QTd>
</template> -->
</VnTable>
</template>