From 317746b1f5ed078064be819ef0c71d9b59c60ee6 Mon Sep 17 00:00:00 2001
From: guillermo <guillermo@verdnatura.es>
Date: Fri, 5 Jul 2024 07:10:41 +0200
Subject: [PATCH 01/13] hotfix: refs #6769 Changes

---
 src/pages/Item/Card/ItemDiary.vue             | 71 +++++++++++++++----
 src/pages/Item/locale/en.yml                  |  4 +-
 src/pages/Item/locale/es.yml                  |  4 +-
 src/pages/Order/Card/OrderDescriptorProxy.vue | 17 +++++
 4 files changed, 77 insertions(+), 19 deletions(-)
 create mode 100644 src/pages/Order/Card/OrderDescriptorProxy.vue

diff --git a/src/pages/Item/Card/ItemDiary.vue b/src/pages/Item/Card/ItemDiary.vue
index c2687e0fd..9e2deef1c 100644
--- a/src/pages/Item/Card/ItemDiary.vue
+++ b/src/pages/Item/Card/ItemDiary.vue
@@ -5,7 +5,9 @@ import { useRoute } from 'vue-router';
 
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
+import OrderDescriptorProxy from 'src/pages/Order/Card/OrderDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
 import FetchData from 'components/FetchData.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
@@ -45,8 +47,8 @@ const columns = computed(() => [
         align: 'left',
     },
     {
-        label: t('itemDiary.id'),
-        name: 'id',
+        label: t('itemDiary.origin'),
+        name: 'origin',
         align: 'left',
     },
     {
@@ -65,8 +67,8 @@ const columns = computed(() => [
     },
 
     {
-        label: t('itemDiary.client'),
-        name: 'client',
+        label: t('itemDiary.entity'),
+        name: 'entity',
         align: 'left',
         format: (val) => dashIfEmpty(val),
     },
@@ -111,10 +113,30 @@ const getBadgeAttrs = (_date) => {
     return attrs;
 };
 
-const getIdDescriptor = (row) => {
-    let descriptor = EntryDescriptorProxy;
-    if (row.isTicket) descriptor = TicketDescriptorProxy;
-    return descriptor;
+const originTypeMap = {
+    entry: {
+        descriptor: EntryDescriptorProxy,
+        icon: 'vn:entry',
+    },
+    ticket: {
+        descriptor: TicketDescriptorProxy,
+        icon: 'vn:ticket',
+    },
+    order: {
+        descriptor: OrderDescriptorProxy,
+        icon: 'vn:basket',
+    },
+};
+
+const entityTypeMap = {
+    client: {
+        descriptor: CustomerDescriptorProxy,
+        icon: 'vn:client',
+    },
+    supplier: {
+        descriptor: SupplierDescriptorProxy,
+        icon: 'vn:supplier',
+    },
 };
 
 onMounted(async () => {
@@ -206,10 +228,10 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     </QBadge>
                 </QTd>
             </template>
-            <template #body-cell-id="{ row }">
+            <template #body-cell-origin="{ row }">
                 <QTd @click.stop>
                     <component
-                        :is="getIdDescriptor(row)"
+                        :is="originTypeMap[row.originType]?.descriptor"
                         :id="row.origin"
                         class="q-ma-none"
                         dense
@@ -217,10 +239,17 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     >
                         {{ row.origin }}
                     </component>
-                    <span class="link">{{ row.origin }}</span>
+                    <span class="link">
+                        <QIcon
+                            :name="originTypeMap[row.originType]?.icon"
+                            class="fill-icon q-mr-sm"
+                            size="xs"
+                        />
+                        {{ row.origin }}
+                    </span>
                 </QTd>
             </template>
-            <template #body-cell-client="{ row }">
+            <template #body-cell-entity="{ row }">
                 <QTd @click.stop>
                     <QBadge
                         :color="row.highlighted ? 'warning' : 'transparent'"
@@ -228,11 +257,23 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         dense
                         style="font-size: 14px"
                     >
-                        <span v-if="row.isTicket" class="link">
+                        <component
+                            :is="entityTypeMap[row.entityType]?.descriptor"
+                            :id="row.entity"
+                            class="q-ma-none"
+                            dense
+                            style="font-size: 14px"
+                        >
+                            {{ row.entity }}
+                        </component>
+                        <span class="link">
+                            <QIcon
+                                :name="entityTypeMap[row.entityType]?.icon"
+                                class="fill-icon q-mr-sm"
+                                size="xs"
+                            />
                             {{ dashIfEmpty(row.name) }}
-                            <CustomerDescriptorProxy :id="row.clientFk" />
                         </span>
-                        <span v-else>{{ dashIfEmpty(row.name) }}</span>
                     </QBadge>
                 </QTd>
             </template>
diff --git a/src/pages/Item/locale/en.yml b/src/pages/Item/locale/en.yml
index 363e9fcbe..cf8127108 100644
--- a/src/pages/Item/locale/en.yml
+++ b/src/pages/Item/locale/en.yml
@@ -14,10 +14,10 @@ shelvings:
     removeConfirmSubtitle: Are you sure you want to continue?
 itemDiary:
     date: Date
-    id: Id
+    origin: Otigin
     state: State
     reference: Reference
-    client: Client
+    entity: Entity
     in: In
     out: Out
     balance: Balance
diff --git a/src/pages/Item/locale/es.yml b/src/pages/Item/locale/es.yml
index 3ef040098..451b75698 100644
--- a/src/pages/Item/locale/es.yml
+++ b/src/pages/Item/locale/es.yml
@@ -14,10 +14,10 @@ shelvings:
     removeConfirmSubtitle: ¿Seguro que quieres continuar?
 itemDiary:
     date: Fecha
-    id: Id
+    origin: Origen
     state: Estado
     reference: Referencia
-    client: Cliente
+    entity: Entidad
     in: Entrada
     out: Salida
     balance: Balance
diff --git a/src/pages/Order/Card/OrderDescriptorProxy.vue b/src/pages/Order/Card/OrderDescriptorProxy.vue
new file mode 100644
index 000000000..04ebb054a
--- /dev/null
+++ b/src/pages/Order/Card/OrderDescriptorProxy.vue
@@ -0,0 +1,17 @@
+<script setup>
+import OrderDescriptor from './OrderDescriptor.vue';
+import OrderSummary from './OrderSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <QPopupProxy>
+        <OrderDescriptor v-if="$props.id" :id="$props.id" :summary="OrderSummary" />
+    </QPopupProxy>
+</template>

From a616498d1a82472c5fcd2e415d83a04ed0335e38 Mon Sep 17 00:00:00 2001
From: guillermo <guillermo@verdnatura.es>
Date: Fri, 5 Jul 2024 08:42:13 +0200
Subject: [PATCH 02/13] hotfix: refs #6769 Fix

---
 src/components/ui/VnSubToolbar.vue          | 2 +-
 src/pages/Entry/Card/EntrySummary.vue       | 2 +-
 src/pages/Supplier/Card/SupplierSummary.vue | 2 +-
 src/pages/Ticket/TicketFilter.vue           | 2 --
 src/pages/Travel/Card/TravelSummary.vue     | 2 +-
 5 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/VnSubToolbar.vue b/src/components/ui/VnSubToolbar.vue
index df6fcbcb7..cfefe98a7 100644
--- a/src/components/ui/VnSubToolbar.vue
+++ b/src/components/ui/VnSubToolbar.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, onBeforeUnmount, ref, nextTick } from 'vue';
+import { onMounted, onBeforeUnmount, ref } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
 
 const stateStore = useStateStore();
diff --git a/src/pages/Entry/Card/EntrySummary.vue b/src/pages/Entry/Card/EntrySummary.vue
index 7b92b29d4..fe530795c 100644
--- a/src/pages/Entry/Card/EntrySummary.vue
+++ b/src/pages/Entry/Card/EntrySummary.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, computed, onUpdated } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
diff --git a/src/pages/Supplier/Card/SupplierSummary.vue b/src/pages/Supplier/Card/SupplierSummary.vue
index 9337724b0..43b8964ff 100644
--- a/src/pages/Supplier/Card/SupplierSummary.vue
+++ b/src/pages/Supplier/Card/SupplierSummary.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onUpdated } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import CardSummary from 'components/ui/CardSummary.vue';
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index 63ac48393..3570cfc03 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -5,8 +5,6 @@ import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-
-import toDateString from 'filters/toDateString';
 import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
index af9aa5f7f..d7dce911b 100644
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onUpdated } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 

From 7fae6b92a1b2d31ce39d1c48c14212716a5da9b6 Mon Sep 17 00:00:00 2001
From: guillermo <guillermo@verdnatura.es>
Date: Fri, 5 Jul 2024 09:45:13 +0200
Subject: [PATCH 03/13] hotfix: refs #6769 Minor changes

---
 src/pages/Item/Card/ItemDiary.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/pages/Item/Card/ItemDiary.vue b/src/pages/Item/Card/ItemDiary.vue
index 9e2deef1c..b48512dd2 100644
--- a/src/pages/Item/Card/ItemDiary.vue
+++ b/src/pages/Item/Card/ItemDiary.vue
@@ -48,7 +48,7 @@ const columns = computed(() => [
     },
     {
         label: t('itemDiary.origin'),
-        name: 'origin',
+        name: 'originId',
         align: 'left',
     },
     {
@@ -68,7 +68,7 @@ const columns = computed(() => [
 
     {
         label: t('itemDiary.entity'),
-        name: 'entity',
+        name: 'entityId',
         align: 'left',
         format: (val) => dashIfEmpty(val),
     },
@@ -228,16 +228,16 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     </QBadge>
                 </QTd>
             </template>
-            <template #body-cell-origin="{ row }">
+            <template #body-cell-originId="{ row }">
                 <QTd @click.stop>
                     <component
                         :is="originTypeMap[row.originType]?.descriptor"
-                        :id="row.origin"
+                        :id="row.originId"
                         class="q-ma-none"
                         dense
                         style="font-size: 14px"
                     >
-                        {{ row.origin }}
+                        {{ row.originId }}
                     </component>
                     <span class="link">
                         <QIcon
@@ -245,11 +245,11 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                             class="fill-icon q-mr-sm"
                             size="xs"
                         />
-                        {{ row.origin }}
+                        {{ row.originId }}
                     </span>
                 </QTd>
             </template>
-            <template #body-cell-entity="{ row }">
+            <template #body-cell-entityId="{ row }">
                 <QTd @click.stop>
                     <QBadge
                         :color="row.highlighted ? 'warning' : 'transparent'"
@@ -259,12 +259,12 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     >
                         <component
                             :is="entityTypeMap[row.entityType]?.descriptor"
-                            :id="row.entity"
+                            :id="row.entityId"
                             class="q-ma-none"
                             dense
                             style="font-size: 14px"
                         >
-                            {{ row.entity }}
+                            {{ row.entityId }}
                         </component>
                         <span class="link">
                             <QIcon
@@ -272,7 +272,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                                 class="fill-icon q-mr-sm"
                                 size="xs"
                             />
-                            {{ dashIfEmpty(row.name) }}
+                            {{ dashIfEmpty(row.entityName) }}
                         </span>
                     </QBadge>
                 </QTd>

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 04/13] 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 05/13] 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 3b43505c3e7104d3b540573b439a102c8c26efe2 Mon Sep 17 00:00:00 2001
From: guillermo <guillermo@verdnatura.es>
Date: Wed, 10 Jul 2024 12:07:01 +0200
Subject: [PATCH 06/13] feat: refs #6769 Requested changes

---
 src/pages/Item/Card/ItemDiary.vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/pages/Item/Card/ItemDiary.vue b/src/pages/Item/Card/ItemDiary.vue
index b48512dd2..4c0959153 100644
--- a/src/pages/Item/Card/ItemDiary.vue
+++ b/src/pages/Item/Card/ItemDiary.vue
@@ -131,11 +131,9 @@ const originTypeMap = {
 const entityTypeMap = {
     client: {
         descriptor: CustomerDescriptorProxy,
-        icon: 'vn:client',
     },
     supplier: {
         descriptor: SupplierDescriptorProxy,
-        icon: 'vn:supplier',
     },
 };
 
@@ -267,11 +265,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                             {{ row.entityId }}
                         </component>
                         <span class="link">
-                            <QIcon
-                                :name="entityTypeMap[row.entityType]?.icon"
-                                class="fill-icon q-mr-sm"
-                                size="xs"
-                            />
                             {{ dashIfEmpty(row.entityName) }}
                         </span>
                     </QBadge>

From 5a4be3de4a6891845be803b64c7429130bc95711 Mon Sep 17 00:00:00 2001
From: guillermo <guillermo@verdnatura.es>
Date: Wed, 10 Jul 2024 13:09:35 +0200
Subject: [PATCH 07/13] feat: refs #6769 Requested changes

---
 src/pages/Item/locale/en.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Item/locale/en.yml b/src/pages/Item/locale/en.yml
index cf8127108..0e855523c 100644
--- a/src/pages/Item/locale/en.yml
+++ b/src/pages/Item/locale/en.yml
@@ -14,7 +14,7 @@ shelvings:
     removeConfirmSubtitle: Are you sure you want to continue?
 itemDiary:
     date: Date
-    origin: Otigin
+    origin: Origin
     state: State
     reference: Reference
     entity: Entity

From b1e6e725cf1cb43922cb563e5255dff5185a9571 Mon Sep 17 00:00:00 2001
From: guillermo <guillermo@verdnatura.es>
Date: Thu, 11 Jul 2024 08:50:10 +0200
Subject: [PATCH 08/13] feat: refs #7704 Deleted minQuantity label

---
 src/pages/Item/Card/ItemSummary.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/pages/Item/Card/ItemSummary.vue b/src/pages/Item/Card/ItemSummary.vue
index 103b3af59..7af3e0fa0 100644
--- a/src/pages/Item/Card/ItemSummary.vue
+++ b/src/pages/Item/Card/ItemSummary.vue
@@ -135,10 +135,6 @@ const isAdministrative = computed(() => {
                     :label="t('item.summary.nonRecycledPlastic')"
                     :value="item.nonRecycledPlastic"
                 />
-                <VnLv
-                    :label="t('item.summary.minSalesQuantity')"
-                    :value="item.minQuantity"
-                />
             </QCard>
             <QCard class="vn-one">
                 <component

From fd6b395f347f8c73b9bc9c39f35280132d45abcc Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 11 Jul 2024 10:22:02 +0200
Subject: [PATCH 09/13] feat(VnTable): order column

---
 src/components/VnTable/VnFilter.vue           |  7 +-
 src/components/VnTable/VnOrder.vue            | 93 +++++++++++++++++++
 src/components/VnTable/VnTable.vue            | 87 ++++++++++++-----
 src/components/VnTable/VnVisibleColumn.vue    |  2 +-
 src/composables/useArrayData.js               | 41 +++++++-
 .../composables/useArrayData.spec.js          |  2 +-
 6 files changed, 202 insertions(+), 30 deletions(-)
 create mode 100644 src/components/VnTable/VnOrder.vue

diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index b0b7c4756..15e1cc947 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -138,7 +138,12 @@ const showFilter = computed(
 );
 </script>
 <template>
-    <div v-if="showFilter" class="full-width" :class="alignRow()">
+    <div
+        v-if="showFilter"
+        class="full-width"
+        :class="alignRow()"
+        style="max-height: 45px; overflow: hidden"
+    >
         <VnTableColumn
             :column="$props.column"
             default="input"
diff --git a/src/components/VnTable/VnOrder.vue b/src/components/VnTable/VnOrder.vue
new file mode 100644
index 000000000..ac77c8ac6
--- /dev/null
+++ b/src/components/VnTable/VnOrder.vue
@@ -0,0 +1,93 @@
+<script setup>
+import { ref } from 'vue';
+import { useArrayData } from 'composables/useArrayData';
+const model = defineModel({ type: Object, required: true });
+const $props = defineProps({
+    name: {
+        type: String,
+        required: true,
+    },
+    label: {
+        type: String,
+        default: undefined,
+    },
+    dataKey: {
+        type: String,
+        required: true,
+    },
+    searchUrl: {
+        type: String,
+        default: 'params',
+    },
+    vertical: {
+        type: Boolean,
+        default: false,
+    },
+});
+const hover = ref();
+const arrayData = useArrayData($props.dataKey, { searchUrl: $props.searchUrl });
+
+async function orderBy(name, direction) {
+    switch (direction) {
+        case 'DESC':
+            direction = undefined;
+            break;
+        case undefined:
+            direction = 'ASC';
+            break;
+        case 'ASC':
+            direction = 'DESC';
+            break;
+    }
+    if (!direction) return await arrayData.deleteOrder(name);
+    await arrayData.addOrder($props.name, direction);
+}
+
+defineExpose({ orderBy });
+</script>
+<template>
+    <div
+        @mouseenter="hover = true"
+        @mouseleave="hover = false"
+        @click="orderBy(name, model?.direction)"
+        class="row items-center no-wrap cursor-pointer"
+    >
+        <span>{{ label }}</span>
+        <QChip
+            v-if="name != 'tableStatus'"
+            :label="!vertical && model?.index"
+            :icon="
+                (model?.index || hover) && !vertical
+                    ? model?.direction == 'DESC'
+                        ? 'arrow_downward'
+                        : 'arrow_upward'
+                    : undefined
+            "
+            :size="vertical ? '' : 'sm'"
+            :class="[
+                model?.index ? 'color-vn-text' : 'bg-transparent',
+                vertical ? 'q-px-none' : '',
+            ]"
+            class="no-box-shadow q-mr-lg"
+            :clickable="true"
+        >
+            <div
+                class="column flex-center"
+                v-if="vertical"
+                :style="!model?.index && 'color: #5d5d5d'"
+            >
+                {{ model?.index }}
+                <QIcon
+                    :name="
+                        model?.index
+                            ? model?.direction == 'DESC'
+                                ? 'arrow_downward'
+                                : 'arrow_upward'
+                            : 'swap_vert'
+                    "
+                    size="xs"
+                />
+            </div>
+        </QChip>
+    </div>
+</template>
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 31486091b..853bb6d9b 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -13,7 +13,8 @@ import VnLv from 'components/ui/VnLv.vue';
 import VnTableColumn from 'components/VnTable/VnColumn.vue';
 import VnTableFilter from 'components/VnTable/VnFilter.vue';
 import VnTableChip from 'components/VnTable/VnChip.vue';
-import TableVisibleColumns from 'src/components/VnTable/VnVisibleColumn.vue';
+import VnVisibleColumn from 'src/components/VnTable/VnVisibleColumn.vue';
+import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
 
 const $props = defineProps({
     columns: {
@@ -93,6 +94,7 @@ const mode = ref(DEFAULT_MODE);
 const selected = ref([]);
 const routeQuery = JSON.parse(route?.query[$props.searchUrl] ?? '{}');
 const params = ref({ ...routeQuery, ...routeQuery.filter?.where });
+const orders = ref(parseOrder(routeQuery.filter?.order));
 const CrudModelRef = ref({});
 const showForm = ref(false);
 const splittedColumns = ref({ columns: [] });
@@ -140,11 +142,15 @@ function setUserParams(watchedParams) {
     if (!watchedParams) return;
 
     if (typeof watchedParams == 'string') watchedParams = JSON.parse(watchedParams);
-    const where = JSON.parse(watchedParams?.filter)?.where;
+    const filter = JSON.parse(watchedParams?.filter);
+    const where = filter?.where;
+    const order = filter?.order;
+
     watchedParams = { ...watchedParams, ...where };
     delete watchedParams.filter;
     delete params.value?.filter;
     params.value = { ...params.value, ...watchedParams };
+    orders.value = parseOrder(order);
 }
 
 function splitColumns(columns) {
@@ -204,6 +210,17 @@ function getColAlign(col) {
     return 'text-' + (col.align ?? 'left');
 }
 
+function parseOrder(urlOrders) {
+    const orderObject = {};
+    if (!urlOrders) return orderObject;
+    if (typeof urlOrders == 'string') urlOrders = [urlOrders];
+    for (const [index, orders] of urlOrders.entries()) {
+        const [name, direction] = orders.split(' ');
+        orderObject[name] = { direction, index: index + 1 };
+    }
+    return orderObject;
+}
+
 const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
 defineExpose({
     reload,
@@ -229,14 +246,25 @@ defineExpose({
                 :redirect="!!redirect"
             >
                 <template #body>
-                    <VnTableFilter
-                        :column="col"
-                        :data-key="$attrs['data-key']"
+                    <div
+                        class="row no-wrap flex-center"
                         v-for="col of splittedColumns.columns"
                         :key="col.id"
-                        v-model="params[columnName(col)]"
-                        :search-url="searchUrl"
-                    />
+                    >
+                        <VnTableFilter
+                            :column="col"
+                            :data-key="$attrs['data-key']"
+                            v-model="params[columnName(col)]"
+                            :search-url="searchUrl"
+                        />
+                        <VnTableOrder
+                            v-model="orders[col.name]"
+                            :name="col.name"
+                            :data-key="$attrs['data-key']"
+                            :search-url="searchUrl"
+                            :vertical="true"
+                        />
+                    </div>
                 </template>
                 <slot
                     name="moreFilterPanel"
@@ -289,7 +317,7 @@ defineExpose({
                         <slot name="top-left"></slot>
                     </template>
                     <template #top-right>
-                        <TableVisibleColumns
+                        <VnVisibleColumn
                             v-if="isTableMode"
                             v-model="splittedColumns.columns"
                             :table-code="tableCode ?? route.name"
@@ -317,24 +345,31 @@ defineExpose({
                             style="min-width: 100px"
                         >
                             <div
-                                class="q-pt-sm q-px-sm ellipsis"
+                                class="column self-start q-ml-xs ellipsis"
                                 :class="`text-${col?.align ?? 'left'}`"
-                                :style="
-                                    $props.columnSearch && col.columnFilter == false
-                                        ? { 'min-height': 72 + 'px' }
-                                        : ''
-                                "
+                                style="height: 75px"
                             >
-                                {{ col?.label }}
+                                <div
+                                    class="row items-center no-wrap"
+                                    style="height: 30px"
+                                >
+                                    <VnTableOrder
+                                        v-model="orders[col.name]"
+                                        :name="col.name"
+                                        :label="col?.label"
+                                        :data-key="$attrs['data-key']"
+                                        :search-url="searchUrl"
+                                    />
+                                </div>
+                                <VnTableFilter
+                                    v-if="$props.columnSearch"
+                                    :column="col"
+                                    :show-title="true"
+                                    :data-key="$attrs['data-key']"
+                                    v-model="params[columnName(col)]"
+                                    :search-url="searchUrl"
+                                />
                             </div>
-                            <VnTableFilter
-                                v-if="$props.columnSearch"
-                                :column="col"
-                                :show-title="true"
-                                :data-key="$attrs['data-key']"
-                                v-model="params[columnName(col)]"
-                                :search-url="searchUrl"
-                            />
                         </QTh>
                     </template>
                     <template #header-cell-tableActions>
@@ -561,6 +596,10 @@ es:
     color: var(--vn-text-color);
 }
 
+.color-vn-text {
+    color: var(--vn-text-color);
+}
+
 .q-table--dark .q-table__bottom,
 .q-table--dark thead,
 .q-table--dark tr,
diff --git a/src/components/VnTable/VnVisibleColumn.vue b/src/components/VnTable/VnVisibleColumn.vue
index 0f979acd3..75cde2b99 100644
--- a/src/components/VnTable/VnVisibleColumn.vue
+++ b/src/components/VnTable/VnVisibleColumn.vue
@@ -127,7 +127,7 @@ onMounted(async () => {
 });
 </script>
 <template>
-    <QBtn icon="vn:visible_columns" class="bg-vn-section-color q-mr-md" dense>
+    <QBtn icon="vn:visible_columns" class="bg-vn-section-color q-mr-md q-px-sm" dense>
         <QPopupProxy ref="popupProxyRef">
             <QCard class="column q-pa-md">
                 <QIcon name="info" size="sm" class="info-icon">
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 0fcbbbb48..1185db05a 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -24,10 +24,11 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         const searchUrl = store.searchUrl;
         if (query[searchUrl]) {
             const params = JSON.parse(query[searchUrl]);
-            const filter = params?.filter;
+            const filter = params?.filter && JSON.parse(params?.filter ?? '{}');
             delete params.filter;
             store.userParams = { ...params, ...store.userParams };
-            store.userFilter = { ...JSON.parse(filter ?? '{}'), ...store.userFilter };
+            store.userFilter = { ...filter, ...store.userFilter };
+            if (filter.order) store.order = filter.order;
         }
     });
 
@@ -69,7 +70,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         canceller = new AbortController();
 
         const filter = {
-            order: store.order,
             limit: store.limit,
         };
 
@@ -94,6 +94,8 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
 
         Object.assign(params, userParams);
         params.filter.skip = store.skip;
+        if (store.order && store.order.length) params.filter.order = store.order;
+        else delete params.filter.order;
 
         params.filter = JSON.stringify(params.filter);
         store.currentFilter = params;
@@ -171,6 +173,37 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         await addFilter({ filter: { where } });
     }
 
+    async function addOrder(field, direction = 'ASC') {
+        const newOrder = field + ' ' + direction;
+        let order = store.order ?? [];
+        if (typeof order == 'string') order = [order];
+
+        let index = order.findIndex((o) => o.split(' ')[0] === field);
+        if (index > -1) {
+            order[index] = newOrder;
+        } else {
+            index = order.length;
+            order.push(newOrder);
+        }
+
+        store.order = order;
+        fetch({ append: false, updateRouter: true });
+        index++;
+
+        return { index, order };
+    }
+
+    async function deleteOrder(field) {
+        let order = store.order ?? [];
+        if (typeof order == 'string') order = [order];
+
+        const index = order.findIndex((o) => o.split(' ')[0] === field);
+        if (index > -1) order.splice(index, 1);
+
+        store.order = order;
+        fetch({ append: false, updateRouter: true });
+    }
+
     function sanitizerParams(params, exprBuilder) {
         for (const param in params) {
             if (params[param] === '' || params[param] === null) {
@@ -240,6 +273,8 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         applyFilter,
         addFilter,
         addFilterWhere,
+        addOrder,
+        deleteOrder,
         refresh,
         destroy,
         loadMore,
diff --git a/test/vitest/__tests__/composables/useArrayData.spec.js b/test/vitest/__tests__/composables/useArrayData.spec.js
index 5e4d12560..21323395b 100644
--- a/test/vitest/__tests__/composables/useArrayData.spec.js
+++ b/test/vitest/__tests__/composables/useArrayData.spec.js
@@ -5,7 +5,7 @@ import { useRouter } from 'vue-router';
 import * as vueRouter from 'vue-router';
 
 describe('useArrayData', () => {
-    const filter = '{"order":"","limit":10,"skip":0}';
+    const filter = '{"limit":10,"skip":0}';
     const params = { supplierFk: 2 };
     beforeEach(() => {
         vi.spyOn(useRouter(), 'replace');

From b3570878bff3cc9d73565ff63350950c3200d153 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 11 Jul 2024 10:30:54 +0200
Subject: [PATCH 10/13] fix(VnTable): moreFilterPanel slot

---
 src/components/VnTable/VnTable.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 31486091b..8cad7e02b 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -237,12 +237,12 @@ defineExpose({
                         v-model="params[columnName(col)]"
                         :search-url="searchUrl"
                     />
+                    <slot
+                        name="moreFilterPanel"
+                        :params="params"
+                        :columns="splittedColumns.columns"
+                    />
                 </template>
-                <slot
-                    name="moreFilterPanel"
-                    :params="params"
-                    :columns="splittedColumns.columns"
-                />
             </VnFilterPanel>
         </QScrollArea>
     </QDrawer>

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 11/13] 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 12/13] 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 13/13] 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;