From 4b720d9b674497c112dd64dd3e357b76eece5451 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 9 Jul 2024 19:33:02 +0000
Subject: [PATCH 1/5] warmfix: ticketList add imports

---
 src/pages/Ticket/TicketList.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index ae635fb4e..bf78177da 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -3,6 +3,8 @@ import { onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
+import { toDate, toCurrency } from 'src/filters/index';
+
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import TicketSummary from './Card/TicketSummary.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';

From 93076f459c65783bc3283b78b81fb414fc16b4b4 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 9 Jul 2024 19:33:48 +0000
Subject: [PATCH 2/5] Actualizar src/pages/Ticket/TicketList.vue

---
 src/pages/Ticket/TicketList.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index bf78177da..6090bdbef 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate, toCurrency } from 'src/filters/index';
-
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import TicketSummary from './Card/TicketSummary.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';

From 5232df259548f8c9a69811f079c91d91326f1d72 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 11 Jul 2024 15:03:39 +0200
Subject: [PATCH 3/5] feat: claimList better support vnTable, claimSummary
 redesign. BREAKING CHANGE: VnTable default-mode table

---
 src/components/VnTable/VnOrder.vue            |  5 ++-
 src/components/VnTable/VnTable.vue            | 12 ++++--
 src/components/VnTable/VnVisibleColumn.vue    |  8 ++++
 src/composables/useArrayData.js               | 10 ++---
 src/pages/Claim/Card/ClaimSummary.vue         | 23 +++++++----
 src/pages/Claim/Card/ClaimSummaryAction.vue   |  1 -
 src/pages/Claim/ClaimFilter.vue               |  2 +
 src/pages/Claim/ClaimList.vue                 | 41 ++++++++++++++++++-
 src/pages/Customer/CustomerList.vue           |  1 -
 src/pages/Entry/EntryLatestBuys.vue           |  1 -
 src/pages/Entry/EntryList.vue                 |  1 -
 src/pages/InvoiceOut/InvoiceOutList.vue       |  1 -
 .../InvoiceOut/InvoiceOutNegativeBases.vue    |  1 -
 src/pages/Order/OrderLines.vue                |  1 -
 src/pages/Order/OrderList.vue                 |  1 -
 src/pages/Route/Agency/AgencyList.vue         |  3 +-
 src/pages/Route/Cmr/CmrList.vue               |  1 +
 src/pages/Route/RouteList.vue                 |  1 -
 src/pages/Supplier/SupplierList.vue           |  1 -
 src/pages/Travel/TravelList.vue               |  1 -
 src/pages/Worker/Card/WorkerBalance.vue       |  1 -
 src/pages/Worker/Card/WorkerFormation.vue     |  1 -
 22 files changed, 84 insertions(+), 34 deletions(-)

diff --git a/src/components/VnTable/VnOrder.vue b/src/components/VnTable/VnOrder.vue
index ac77c8ac6..63e5eecb4 100644
--- a/src/components/VnTable/VnOrder.vue
+++ b/src/components/VnTable/VnOrder.vue
@@ -5,7 +5,7 @@ const model = defineModel({ type: Object, required: true });
 const $props = defineProps({
     name: {
         type: String,
-        required: true,
+        default: '',
     },
     label: {
         type: String,
@@ -28,6 +28,7 @@ const hover = ref();
 const arrayData = useArrayData($props.dataKey, { searchUrl: $props.searchUrl });
 
 async function orderBy(name, direction) {
+    if (!name) return;
     switch (direction) {
         case 'DESC':
             direction = undefined;
@@ -54,7 +55,7 @@ defineExpose({ orderBy });
     >
         <span>{{ label }}</span>
         <QChip
-            v-if="name != 'tableStatus'"
+            v-if="name"
             :label="!vertical && model?.index"
             :icon="
                 (model?.index || hover) && !vertical
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 554117a1a..d48151228 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -23,7 +23,7 @@ const $props = defineProps({
     },
     defaultMode: {
         type: String,
-        default: 'card', // 'table', 'card'
+        default: 'table', // 'table', 'card'
     },
     columnSearch: {
         type: Boolean,
@@ -137,6 +137,10 @@ const rowClickFunction = computed(() => {
 });
 
 const isTableMode = computed(() => mode.value == TABLE_MODE);
+const columnsVisibilitySkiped = computed(() => [
+    ...splittedColumns.value.columns.filter((c) => c.visible == false).map((c) => c.name),
+    ...['tableActions'],
+]);
 
 function setUserParams(watchedParams) {
     if (!watchedParams) return;
@@ -182,6 +186,7 @@ function splitColumns(columns) {
                 label: t('status'),
                 name: 'tableStatus',
                 columnFilter: false,
+                orderBy: false,
             });
     }
 }
@@ -259,7 +264,7 @@ defineExpose({
                         />
                         <VnTableOrder
                             v-model="orders[col.name]"
-                            :name="col.name"
+                            :name="col.orderBy ?? col.name"
                             :data-key="$attrs['data-key']"
                             :search-url="searchUrl"
                             :vertical="true"
@@ -321,6 +326,7 @@ defineExpose({
                             v-if="isTableMode"
                             v-model="splittedColumns.columns"
                             :table-code="tableCode ?? route.name"
+                            :skip="columnsVisibilitySkiped"
                         />
                         <QBtnToggle
                             v-model="mode"
@@ -355,7 +361,7 @@ defineExpose({
                                 >
                                     <VnTableOrder
                                         v-model="orders[col.name]"
-                                        :name="col.name"
+                                        :name="col.orderBy ?? col.name"
                                         :label="col?.label"
                                         :data-key="$attrs['data-key']"
                                         :search-url="searchUrl"
diff --git a/src/components/VnTable/VnVisibleColumn.vue b/src/components/VnTable/VnVisibleColumn.vue
index 75cde2b99..e3bb52637 100644
--- a/src/components/VnTable/VnVisibleColumn.vue
+++ b/src/components/VnTable/VnVisibleColumn.vue
@@ -12,6 +12,10 @@ const $props = defineProps({
         type: String,
         default: '',
     },
+    skip: {
+        type: Array,
+        default: () => [],
+    },
 });
 
 const { notify } = useNotify();
@@ -30,8 +34,12 @@ function setUserConfigViewData(data, isLocal) {
     if (!data) return;
     // Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
     if (!isLocal) localColumns.value = [];
+    // Array to Object
+    const skippeds = $props.skip.reduce((a, v) => ({ ...a, [v]: v }), {});
+
     for (let column of columns.value) {
         const { label, name } = column;
+        if (skippeds[name]) continue;
         column.visible = data[name] ?? true;
         if (!isLocal) localColumns.value.push({ name, label, visible: column.visible });
     }
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 1185db05a..3563e0dbd 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -149,7 +149,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         store.filter = {};
         if (params) store.userParams = { ...params };
 
-        const response = await fetch({ append: false });
+        const response = await fetch({});
         return response;
     }
 
@@ -162,7 +162,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         store.userParams = userParams;
         arrayDataStore.reset(['skip', 'filter.skip', 'page']);
 
-        await fetch({ append: false });
+        await fetch({});
         return { filter, params };
     }
 
@@ -187,7 +187,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         }
 
         store.order = order;
-        fetch({ append: false, updateRouter: true });
+        fetch({});
         index++;
 
         return { index, order };
@@ -201,7 +201,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         if (index > -1) order.splice(index, 1);
 
         store.order = order;
-        fetch({ append: false, updateRouter: true });
+        fetch({});
     }
 
     function sanitizerParams(params, exprBuilder) {
@@ -231,7 +231,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
     }
 
     async function refresh() {
-        if (Object.values(store.userParams).length) await fetch({ append: false });
+        if (Object.values(store.userParams).length) await fetch({});
     }
 
     function updateStateParams() {
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index 88ca48081..a34830631 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -211,7 +211,7 @@ async function changeState(value) {
             >
                 <QList>
                     <QVirtualScroll
-                        style="max-height: 300px"
+                        class="max-container-height"
                         :items="ClaimStates"
                         separator
                         v-slot="{ item, index }"
@@ -279,13 +279,13 @@ async function changeState(value) {
                 <ClaimNotes
                     :id="entityId"
                     :add-note="false"
-                    style="max-height: 300px"
+                    class="max-container-height"
                     order="created ASC"
                 />
             </QCard>
-            <QCard class="vn-two" v-if="claimDms.length > 0">
+            <QCard class="vn-two" v-if="claimDms?.length">
                 <VnTitle :url="`#/claim/${entityId}/photos`" :text="t('claim.photos')" />
-                <div class="container">
+                <div class="container max-container-height" style="overflow: auto">
                     <div
                         class="multimedia-container"
                         v-for="(media, index) of claimDms"
@@ -302,7 +302,10 @@ async function changeState(value) {
                             >
                                 <QTooltip>Video</QTooltip>
                             </QIcon>
-                            <QCard class="multimedia relative-position">
+                            <QCard
+                                class="multimedia relative-position"
+                                style="max-height: 128px"
+                            >
                                 <QImg
                                     :src="media.url"
                                     class="rounded-borders cursor-pointer fit"
@@ -322,7 +325,7 @@ async function changeState(value) {
                     </div>
                 </div>
             </QCard>
-            <QCard class="vn-two" v-if="salesClaimed.length > 0">
+            <QCard class="vn-max" v-if="salesClaimed.length > 0">
                 <VnTitle :url="`#/claim/${entityId}/lines`" :text="t('claim.details')" />
                 <QTable
                     :columns="detailsColumns"
@@ -361,7 +364,7 @@ async function changeState(value) {
                     </template>
                 </QTable>
             </QCard>
-            <QCard class="vn-two" v-if="developments.length > 0">
+            <QCard class="vn-max" v-if="developments.length > 0">
                 <VnTitle :url="claimUrl + 'development'" :text="t('claim.development')" />
                 <QTable
                     :columns="developmentColumns"
@@ -458,7 +461,7 @@ async function changeState(value) {
     gap: 15px;
 }
 .multimedia-container {
-    flex: 1 0 21%;
+    flex: 0 0 128px;
 }
 .multimedia {
     transition: all 0.5s;
@@ -491,4 +494,8 @@ async function changeState(value) {
 .change-state {
     width: 10%;
 }
+
+.max-container-height {
+    max-height: 300px;
+}
 </style>
diff --git a/src/pages/Claim/Card/ClaimSummaryAction.vue b/src/pages/Claim/Card/ClaimSummaryAction.vue
index b08504768..d875126cb 100644
--- a/src/pages/Claim/Card/ClaimSummaryAction.vue
+++ b/src/pages/Claim/Card/ClaimSummaryAction.vue
@@ -71,7 +71,6 @@ const columns = [
     <VnTable
         data-key="ClaimEndsTable"
         url="ClaimEnds/filter"
-        default-mode="table"
         :right-search="false"
         :column-search="false"
         :disable-option="{ card: true, table: true }"
diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
index 9ff5847c2..8878040f6 100644
--- a/src/pages/Claim/ClaimFilter.vue
+++ b/src/pages/Claim/ClaimFilter.vue
@@ -17,6 +17,8 @@ const props = defineProps({
 });
 
 const states = ref([]);
+
+defineExpose({ states });
 </script>
 
 <template>
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index e98964fc5..2a445f14a 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { toDate } from 'filters/index';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
@@ -14,6 +14,7 @@ import VnTable from 'src/components/VnTable/VnTable.vue';
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 
+const claimFilterRef = ref();
 const columns = computed(() => [
     {
         align: 'left',
@@ -29,18 +30,38 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.name'),
         name: 'clientName',
         isTitle: true,
+        visible: false,
     },
     {
         align: 'left',
         label: t('claim.customer'),
         name: 'clientFk',
         cardVisible: true,
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Clients',
+                fields: ['id', 'name'],
+            },
+        },
     },
     {
         align: 'left',
         label: t('claim.attendedBy'),
         name: 'attendedBy',
         cardVisible: true,
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Workers/activeWithInheritedRole',
+                fields: ['id', 'name'],
+                where: { role: 'salesPerson' },
+                useLike: false,
+                optionValue: 'id',
+                optionLabel: 'name',
+                optionFilter: 'firstName',
+            },
+        },
     },
     {
         align: 'left',
@@ -48,6 +69,9 @@ const columns = computed(() => [
         name: 'created',
         format: ({ created }) => toDate(created),
         cardVisible: true,
+        columnFilter: {
+            component: 'date',
+        },
     },
     {
         align: 'left',
@@ -57,6 +81,14 @@ const columns = computed(() => [
             condition: () => true,
             color: ({ stateCode }) => STATE_COLOR[stateCode] ?? 'bg-grey',
         },
+        columnFilter: {
+            name: 'claimStateFk',
+            component: 'select',
+            attrs: {
+                options: claimFilterRef.value?.states,
+                optionLabel: 'description',
+            },
+        },
     },
     {
         align: 'right',
@@ -86,7 +118,7 @@ const STATE_COLOR = {
     />
     <RightMenu>
         <template #right-panel>
-            <ClaimFilter data-key="ClaimList" />
+            <ClaimFilter data-key="ClaimList" ref="claimFilterRef" />
         </template>
     </RightMenu>
     <VnTable
@@ -116,4 +148,9 @@ const STATE_COLOR = {
 es:
     Search claim: Buscar reclamación
     You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
+    params:
+        stateCode: Estado
+en:
+    params:
+        stateCode: State
 </i18n>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 394c472c2..78904b473 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -405,7 +405,6 @@ function handleLocation(data, location) {
         }"
         order="id DESC"
         :columns="columns"
-        default-mode="table"
         redirect="customer"
         auto-load
     >
diff --git a/src/pages/Entry/EntryLatestBuys.vue b/src/pages/Entry/EntryLatestBuys.vue
index 176820668..3f199314d 100644
--- a/src/pages/Entry/EntryLatestBuys.vue
+++ b/src/pages/Entry/EntryLatestBuys.vue
@@ -191,7 +191,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         order="id DESC"
         :columns="columns"
         redirect="entry"
-        default-mode="table"
         auto-load
         :right-search="false"
     />
diff --git a/src/pages/Entry/EntryList.vue b/src/pages/Entry/EntryList.vue
index 1d00b5af5..4272ce10e 100644
--- a/src/pages/Entry/EntryList.vue
+++ b/src/pages/Entry/EntryList.vue
@@ -199,7 +199,6 @@ onMounted(async () => {
         order="id DESC"
         :columns="columns"
         redirect="entry"
-        default-mode="table"
         auto-load
         :right-search="false"
     />
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index 0f7bb5032..5a611d388 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -207,7 +207,6 @@ watchEffect(selectedRows);
         v-model:selected="selectedRows"
         order="id DESC"
         :columns="columns"
-        default-mode="table"
         redirect="invoice-out"
         auto-load
         :table="{
diff --git a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
index 0b9dd7ad7..dfc051563 100644
--- a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
+++ b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
@@ -164,7 +164,6 @@ const downloadCSV = async () => {
         "
         :limit="0"
         :columns="columns"
-        default-mode="table"
         auto-load
         :is-editable="false"
         :use-model="true"
diff --git a/src/pages/Order/OrderLines.vue b/src/pages/Order/OrderLines.vue
index aebc2ed85..21b4efb9d 100644
--- a/src/pages/Order/OrderLines.vue
+++ b/src/pages/Order/OrderLines.vue
@@ -249,7 +249,6 @@ async function confirmOrder() {
                 data-key="OrderLines"
                 url="OrderRows"
                 :columns="columns"
-                default-mode="table"
                 :right-search="false"
                 :use-model="true"
                 auto-load
diff --git a/src/pages/Order/OrderList.vue b/src/pages/Order/OrderList.vue
index 0598fc6b5..68c4e57a7 100644
--- a/src/pages/Order/OrderList.vue
+++ b/src/pages/Order/OrderList.vue
@@ -154,7 +154,6 @@ async function fetchClientAddress(id, data) {
             },
         }"
         :columns="columns"
-        default-mode="table"
         redirect="order"
         auto-load
     >
diff --git a/src/pages/Route/Agency/AgencyList.vue b/src/pages/Route/Agency/AgencyList.vue
index eb301c9ba..32e538172 100644
--- a/src/pages/Route/Agency/AgencyList.vue
+++ b/src/pages/Route/Agency/AgencyList.vue
@@ -78,10 +78,11 @@ const columns = computed(() => [
         :columns="columns"
         :right-search="false"
         :use-model="true"
+        default-mode="card"
     />
 </template>
 <i18n>
-    es: 
+    es:
         isOwn: Tiene propietario
         isAnyVolumeAllowed: Permite cualquier volumen
         Search agency: Buscar agencia
diff --git a/src/pages/Route/Cmr/CmrList.vue b/src/pages/Route/Cmr/CmrList.vue
index 74a070cbf..dd9e2a75a 100644
--- a/src/pages/Route/Cmr/CmrList.vue
+++ b/src/pages/Route/Cmr/CmrList.vue
@@ -117,6 +117,7 @@ function downloadPdfs() {
         :columns="columns"
         :right-search="true"
         :use-model="true"
+        default-mode="card"
     />
 </template>
 <style lang="scss" scoped>
diff --git a/src/pages/Route/RouteList.vue b/src/pages/Route/RouteList.vue
index e116fd823..61fd79384 100644
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@@ -237,7 +237,6 @@ const openTicketsDialog = (id) => {
         url="Routes/filter"
         :columns="columns"
         :right-search="true"
-        default-mode="table"
         :is-editable="true"
         :create="{
             urlCreate: 'Routes',
diff --git a/src/pages/Supplier/SupplierList.vue b/src/pages/Supplier/SupplierList.vue
index ce7d234c8..763fab812 100644
--- a/src/pages/Supplier/SupplierList.vue
+++ b/src/pages/Supplier/SupplierList.vue
@@ -99,7 +99,6 @@ const columns = computed(() => [
         }"
         order="id ASC"
         :columns="columns"
-        default-mode="table"
         auto-load
         :right-search="false"
         :use-model="true"
diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
index 200ef817b..dbb8949a7 100644
--- a/src/pages/Travel/TravelList.vue
+++ b/src/pages/Travel/TravelList.vue
@@ -198,7 +198,6 @@ const columns = computed(() => [
         }"
         order="landed DESC"
         :columns="columns"
-        default-mode="table"
         auto-load
         redirect="travel"
         :is-editable="false"
diff --git a/src/pages/Worker/Card/WorkerBalance.vue b/src/pages/Worker/Card/WorkerBalance.vue
index ad18d61e0..037a65eaf 100644
--- a/src/pages/Worker/Card/WorkerBalance.vue
+++ b/src/pages/Worker/Card/WorkerBalance.vue
@@ -77,7 +77,6 @@ const columns = computed(() => [
         }"
         order="paymentDate DESC"
         :columns="columns"
-        default-mode="table"
         auto-load
         :right-search="false"
         :is-editable="true"
diff --git a/src/pages/Worker/Card/WorkerFormation.vue b/src/pages/Worker/Card/WorkerFormation.vue
index 0ac97d9ef..829326898 100644
--- a/src/pages/Worker/Card/WorkerFormation.vue
+++ b/src/pages/Worker/Card/WorkerFormation.vue
@@ -116,7 +116,6 @@ const columns = computed(() => [
         }"
         order="id DESC"
         :columns="columns"
-        default-mode="table"
         auto-load
         :right-search="false"
         :is-editable="true"

From fdb8f92a10e7f2e9a6b8f007fafbbe380b6cf2b8 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 11 Jul 2024 15:05:21 +0200
Subject: [PATCH 4/5] typo

---
 src/components/VnTable/VnOrder.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VnTable/VnOrder.vue b/src/components/VnTable/VnOrder.vue
index 63e5eecb4..375def792 100644
--- a/src/components/VnTable/VnOrder.vue
+++ b/src/components/VnTable/VnOrder.vue
@@ -41,7 +41,7 @@ async function orderBy(name, direction) {
             break;
     }
     if (!direction) return await arrayData.deleteOrder(name);
-    await arrayData.addOrder($props.name, direction);
+    await arrayData.addOrder(name, direction);
 }
 
 defineExpose({ orderBy });

From b41dc28fdee0dd8a6d3465ec92c5788b1febd7e3 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 12 Jul 2024 09:08:37 +0200
Subject: [PATCH 5/5] fix(VnTable): check column skipped only onMounted

---
 src/components/VnTable/VnTable.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index d48151228..954da29fd 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -98,6 +98,7 @@ const orders = ref(parseOrder(routeQuery.filter?.order));
 const CrudModelRef = ref({});
 const showForm = ref(false);
 const splittedColumns = ref({ columns: [] });
+const columnsVisibilitySkiped = ref();
 const tableModes = [
     {
         icon: 'view_column',
@@ -117,6 +118,12 @@ onMounted(() => {
     mode.value = quasar.platform.is.mobile ? DEFAULT_MODE : $props.defaultMode;
     stateStore.rightDrawer = true;
     setUserParams(route.query[$props.searchUrl]);
+    columnsVisibilitySkiped.value = [
+        ...splittedColumns.value.columns
+            .filter((c) => c.visible == false)
+            .map((c) => c.name),
+        ...['tableActions'],
+    ];
 });
 
 watch(
@@ -137,10 +144,6 @@ const rowClickFunction = computed(() => {
 });
 
 const isTableMode = computed(() => mode.value == TABLE_MODE);
-const columnsVisibilitySkiped = computed(() => [
-    ...splittedColumns.value.columns.filter((c) => c.visible == false).map((c) => c.name),
-    ...['tableActions'],
-]);
 
 function setUserParams(watchedParams) {
     if (!watchedParams) return;