From ac77fea3d75b2614b96d92300629180de5b2be94 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 23 May 2024 10:09:17 +0200
Subject: [PATCH] feat(VnTable): refs #6825 remove field prop. Add actions in
 table

---
 src/components/VnTable/VnChip.vue             |   6 +-
 src/components/VnTable/VnColumn.vue           |   2 +-
 src/components/VnTable/VnFilter.vue           |   5 +-
 src/components/VnTable/VnTable.vue            |  50 ++-
 src/components/common/VnComponent.vue         |   2 +-
 src/components/ui/VnFilterPanel.vue           |   1 -
 .../ExtendedList/CustomerExtendedList.vue     | 408 +-----------------
 7 files changed, 57 insertions(+), 417 deletions(-)

diff --git a/src/components/VnTable/VnChip.vue b/src/components/VnTable/VnChip.vue
index c4a5a602ae..626c16c459 100644
--- a/src/components/VnTable/VnChip.vue
+++ b/src/components/VnTable/VnChip.vue
@@ -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>
diff --git a/src/components/VnTable/VnColumn.vue b/src/components/VnTable/VnColumn.vue
index 6e3323a62a..416748ae83 100644
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@@ -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(() => {
diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index c527a0e599..871a823186 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -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()"
     >
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 590748523f..b7ac122371 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -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 {
diff --git a/src/components/common/VnComponent.vue b/src/components/common/VnComponent.vue
index cf6ceba320..52cee86bbf 100644
--- a/src/components/common/VnComponent.vue
+++ b/src/components/common/VnComponent.vue
@@ -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"
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 78f8c3833a..cd5e96cee6 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -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;
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index ee8fdc395d..81da2b407d 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -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>