From 677e71d1a752dad74982f40dbb3ad55a303e9d95 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Wed, 26 Jun 2024 08:26:04 +0200
Subject: [PATCH 01/15] refactor: refs #7543 standarized descriptors

---
 src/pages/Agency/Card/AgencyDescriptor.vue    | 21 ++++++++++++
 src/pages/Claim/Card/ClaimDescriptor.vue      | 17 ++++++++++
 .../Customer/Card/CustomerDescriptor.vue      | 14 --------
 src/pages/Entry/Card/EntryDescriptor.vue      |  8 ++++-
 src/pages/Entry/Card/EntryDescriptorProxy.vue |  3 +-
 .../InvoiceIn/Card/InvoiceInDescriptor.vue    | 17 +++++++++-
 .../Card/InvoiceInDescriptorProxy.vue         |  9 +++--
 src/pages/Order/Card/OrderDescriptor.vue      | 21 ++++++++++++
 src/pages/Route/Card/RouteDescriptor.vue      |  7 +++-
 src/pages/Route/Card/RouteDescriptorProxy.vue |  3 +-
 src/pages/Route/Roadmap/RoadmapDescriptor.vue | 17 ++++++++++
 .../Shelving/Card/ShelvingDescriptor.vue      | 26 +++++++++++++++
 .../Shelving/Card/ShelvingDescriptorProxy.vue |  5 +--
 src/pages/Ticket/Card/TicketDescriptor.vue    |  6 ++++
 .../Ticket/Card/TicketDescriptorProxy.vue     |  3 +-
 src/pages/Travel/Card/TravelDescriptor.vue    | 33 ++++++++-----------
 .../Travel/Card/TravelDescriptorProxy.vue     |  3 +-
 src/pages/Worker/Card/WorkerDescriptor.vue    |  1 +
 src/pages/Zone/Card/ZoneDescriptor.vue        | 27 ++++++---------
 src/pages/Zone/Card/ZoneDescriptorProxy.vue   |  3 +-
 20 files changed, 182 insertions(+), 62 deletions(-)

diff --git a/src/pages/Agency/Card/AgencyDescriptor.vue b/src/pages/Agency/Card/AgencyDescriptor.vue
index b9772037c..8b6a6603e 100644
--- a/src/pages/Agency/Card/AgencyDescriptor.vue
+++ b/src/pages/Agency/Card/AgencyDescriptor.vue
@@ -28,8 +28,29 @@ const card = computed(() => store.data);
         :title="card?.name"
         :subtitle="props.id"
     >
+        <template #header-extra-action>
+            <QBtn
+                round
+                flat
+                dense
+                size="md"
+                icon="garage_home"
+                color="white"
+                class="link"
+                :to="{ name: 'RouteList' }"
+            >
+                <QTooltip>
+                    {{ t('Go to module index') }}
+                </QTooltip>
+            </QBtn>
+        </template>
         <template #body="{ entity: agency }">
             <VnLv :label="t('globals.name')" :value="agency.name" />
         </template>
     </CardDescriptor>
 </template>
+
+<i18n>
+es:
+    Go to module index: Ir al índice del modulo
+</i18n>
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index 5336c4427..e4b96b5b6 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -61,6 +61,22 @@ onMounted(async () => {
         @on-fetch="setData"
         data-key="Claim"
     >
+        <template #header-extra-action>
+            <QBtn
+                round
+                flat
+                dense
+                size="md"
+                icon="vn:claims"
+                color="white"
+                class="link"
+                :to="{ name: 'ClaimList' }"
+            >
+                <QTooltip>
+                    {{ t('Go to module index') }}
+                </QTooltip>
+            </QBtn>
+        </template>
         <template #menu="{ entity }">
             <ClaimDescriptorMenu :claim="entity" />
         </template>
@@ -171,4 +187,5 @@ onMounted(async () => {
         claimRate: Claming rate
     es:
         claimRate: Ratio de reclamación
+        Go to module index: Ir al índice del módulo
 </i18n>
diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
index 2d3b17bc9..5e688076a 100644
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -45,20 +45,6 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
         :summary="$props.summary"
         data-key="customerData"
     >
-        <template #header-extra-action>
-            <QBtn
-                round
-                flat
-                size="sm"
-                icon="vn:Person"
-                color="white"
-                :to="{ name: 'CustomerList' }"
-            >
-                <QTooltip>
-                    {{ t('Go to module index') }}
-                </QTooltip>
-            </QBtn>
-        </template>
         <template #menu="{ entity }">
             <CustomerDescriptorMenu :customer="entity" />
         </template>
diff --git a/src/pages/Entry/Card/EntryDescriptor.vue b/src/pages/Entry/Card/EntryDescriptor.vue
index 3c925ead6..317400181 100644
--- a/src/pages/Entry/Card/EntryDescriptor.vue
+++ b/src/pages/Entry/Card/EntryDescriptor.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -10,6 +10,7 @@ import useCardDescription from 'src/composables/useCardDescription';
 import { useState } from 'src/composables/useState';
 import { toDate } from 'src/filters';
 import { usePrintService } from 'composables/usePrintService';
+import { getUrl } from 'src/composables/getUrl';
 
 const $props = defineProps({
     id: {
@@ -28,6 +29,7 @@ const { t } = useI18n();
 const { openReport } = usePrintService();
 const state = useState();
 const entryDescriptorRef = ref(null);
+const url = ref();
 
 const entryFilter = {
     include: [
@@ -69,6 +71,9 @@ const entryFilter = {
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
+onMounted(async () => {
+    url.value = await getUrl('');
+});
 
 const data = ref(useCardDescription());
 const setData = (entity) =>
@@ -114,6 +119,7 @@ watch;
         :subtitle="data.subtitle"
         @on-fetch="setData"
         data-key="entry"
+        :summary="$props.summary"
     >
         <template #menu="{ entity }">
             <QItem v-ripple clickable @click="showEntryReport(entity)">
diff --git a/src/pages/Entry/Card/EntryDescriptorProxy.vue b/src/pages/Entry/Card/EntryDescriptorProxy.vue
index e1c05f1ac..17b542ec1 100644
--- a/src/pages/Entry/Card/EntryDescriptorProxy.vue
+++ b/src/pages/Entry/Card/EntryDescriptorProxy.vue
@@ -1,5 +1,6 @@
 <script setup>
 import EntryDescriptor from './EntryDescriptor.vue';
+import EntrySummary from './EntrySummary.vue';
 
 const $props = defineProps({
     id: {
@@ -11,6 +12,6 @@ const $props = defineProps({
 
 <template>
     <QPopupProxy>
-        <EntryDescriptor v-if="$props.id" :id="$props.id" />
+        <EntryDescriptor v-if="$props.id" :id="$props.id" :summary="EntrySummary" />
     </QPopupProxy>
 </template>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
index 68dc5be4b..1381bdc73 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
@@ -9,6 +9,7 @@ import { useRole } from 'src/composables/useRole';
 import { downloadFile } from 'src/composables/downloadFile';
 import { useArrayData } from 'src/composables/useArrayData';
 import { usePrintService } from 'composables/usePrintService';
+import useCardDescription from 'src/composables/useCardDescription';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import FetchData from 'src/components/FetchData.vue';
@@ -19,7 +20,16 @@ import { useCapitalize } from 'src/composables/useCapitalize';
 import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
 import InvoiceInToBook from '../InvoiceInToBook.vue';
 
-const $props = defineProps({ id: { type: Number, default: null } });
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: null,
+    },
+    summary: {
+        type: Object,
+        default: null,
+    },
+});
 
 const { push, currentRoute } = useRouter();
 
@@ -252,6 +262,9 @@ const createInvoiceInCorrection = async () => {
     );
     push({ path: `/invoice-in/${correctingId}/summary` });
 };
+
+const data = ref(useCardDescription());
+const setData = (entity) => (data.value = useCardDescription(entity.name, entity.id));
 </script>
 <template>
     <FetchData
@@ -283,6 +296,8 @@ const createInvoiceInCorrection = async () => {
         :url="`InvoiceIns/${entityId}`"
         :filter="filter"
         title="supplierRef"
+        @on-fetch="setData"
+        :summary="$props.summary"
     >
         <template #menu="{ entity }">
             <InvoiceInToBook>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInDescriptorProxy.vue b/src/pages/InvoiceIn/Card/InvoiceInDescriptorProxy.vue
index a36656c1d..e9ca762ed 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInDescriptorProxy.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDescriptorProxy.vue
@@ -1,5 +1,6 @@
 <script setup>
-import InvoiceInDescriptor from "pages/InvoiceIn/Card/InvoiceInDescriptor.vue";
+import InvoiceInDescriptor from 'pages/InvoiceIn/Card/InvoiceInDescriptor.vue';
+import InvoiceInSummary from './InvoiceInSummary.vue';
 
 const $props = defineProps({
     id: {
@@ -10,6 +11,10 @@ const $props = defineProps({
 </script>
 <template>
     <QPopupProxy>
-        <InvoiceInDescriptor v-if="$props.id" :id="$props.id" />
+        <InvoiceInDescriptor
+            v-if="$props.id"
+            :id="$props.id"
+            :summary="InvoiceInSummary"
+        />
     </QPopupProxy>
 </template>
diff --git a/src/pages/Order/Card/OrderDescriptor.vue b/src/pages/Order/Card/OrderDescriptor.vue
index 60e86d04e..92bc5ad66 100644
--- a/src/pages/Order/Card/OrderDescriptor.vue
+++ b/src/pages/Order/Card/OrderDescriptor.vue
@@ -87,6 +87,22 @@ const total = ref(null);
         @on-fetch="setData"
         data-key="orderData"
     >
+        <template #header-extra-action>
+            <QBtn
+                round
+                flat
+                dense
+                size="md"
+                icon="vn:basket"
+                color="white"
+                class="link"
+                :to="{ name: 'OrderList' }"
+            >
+                <QTooltip>
+                    {{ t('Go to module index') }}
+                </QTooltip>
+            </QBtn>
+        </template>
         <template #menu="{ entity }">
             <OrderDescriptorMenu :order="entity" />
         </template>
@@ -137,3 +153,8 @@ const total = ref(null);
         </template>
     </CardDescriptor>
 </template>
+
+<i18n>
+es:
+    Go to module index: Ir al índice del módulo
+</i18n>
diff --git a/src/pages/Route/Card/RouteDescriptor.vue b/src/pages/Route/Card/RouteDescriptor.vue
index 218764277..a0e0aaf3a 100644
--- a/src/pages/Route/Card/RouteDescriptor.vue
+++ b/src/pages/Route/Card/RouteDescriptor.vue
@@ -14,6 +14,10 @@ const $props = defineProps({
         required: false,
         default: null,
     },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });
 
 const route = useRoute();
@@ -74,8 +78,9 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
         :filter="filter"
         :title="data.title"
         :subtitle="data.subtitle"
-        data-key="Routes"
+        data-key="routeData"
         @on-fetch="setData"
+        :summary="$props.summary"
     >
         <template #body="{ entity }">
             <VnLv :label="t('Date')" :value="toDate(entity?.created)" />
diff --git a/src/pages/Route/Card/RouteDescriptorProxy.vue b/src/pages/Route/Card/RouteDescriptorProxy.vue
index 541f9716a..1ff39a51e 100644
--- a/src/pages/Route/Card/RouteDescriptorProxy.vue
+++ b/src/pages/Route/Card/RouteDescriptorProxy.vue
@@ -1,5 +1,6 @@
 <script setup>
 import RouteDescriptor from 'pages/Route/Card/RouteDescriptor.vue';
+import RouteSummary from './RouteSummary.vue';
 
 const $props = defineProps({
     id: {
@@ -10,6 +11,6 @@ const $props = defineProps({
 </script>
 <template>
     <QPopupProxy>
-        <RouteDescriptor v-if="$props.id" :id="$props.id" />
+        <RouteDescriptor v-if="$props.id" :id="$props.id" :summary="RouteSummary" />
     </QPopupProxy>
 </template>
diff --git a/src/pages/Route/Roadmap/RoadmapDescriptor.vue b/src/pages/Route/Roadmap/RoadmapDescriptor.vue
index 788173688..78851ef5f 100644
--- a/src/pages/Route/Roadmap/RoadmapDescriptor.vue
+++ b/src/pages/Route/Roadmap/RoadmapDescriptor.vue
@@ -39,6 +39,22 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
         data-key="Roadmap"
         @on-fetch="setData"
     >
+        <template #header-extra-action>
+            <QBtn
+                round
+                flat
+                dense
+                size="md"
+                icon="vn:troncales"
+                color="white"
+                class="link"
+                :to="{ name: 'RouteList' }"
+            >
+                <QTooltip>
+                    {{ t('Go to module index') }}
+                </QTooltip>
+            </QBtn>
+        </template>
         <template #body="{ entity }">
             <VnLv :label="t('Roadmap')" :value="entity?.name" />
             <VnLv :label="t('ETD')" :value="toDateHourMin(entity?.etd)" />
@@ -60,4 +76,5 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
 es:
     Roadmap: Troncal
     Carrier: Transportista
+    Go to module index: Ir al índice del módulo
 </i18n>
diff --git a/src/pages/Shelving/Card/ShelvingDescriptor.vue b/src/pages/Shelving/Card/ShelvingDescriptor.vue
index 6beca6d88..0fac92f65 100644
--- a/src/pages/Shelving/Card/ShelvingDescriptor.vue
+++ b/src/pages/Shelving/Card/ShelvingDescriptor.vue
@@ -14,6 +14,10 @@ const $props = defineProps({
         required: false,
         default: null,
     },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });
 
 const route = useRoute();
@@ -51,7 +55,24 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
         :subtitle="data.subtitle"
         data-key="Shelvings"
         @on-fetch="setData"
+        :summary="$props.summary"
     >
+        <template #header-extra-action>
+            <QBtn
+                round
+                flat
+                dense
+                size="md"
+                icon="vn:inventory"
+                color="white"
+                class="link"
+                :to="{ name: 'ShelvingList' }"
+            >
+                <QTooltip>
+                    {{ t('Go to module index') }}
+                </QTooltip>
+            </QBtn>
+        </template>
         <template #body="{ entity }">
             <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
             <VnLv :label="t('shelving.summary.parking')" :value="entity.parking?.code" />
@@ -69,3 +90,8 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
         </template>
     </CardDescriptor>
 </template>
+
+<i18n>
+es:
+    Go to module index: Ir al indice del modulo
+</i18n>
diff --git a/src/pages/Shelving/Card/ShelvingDescriptorProxy.vue b/src/pages/Shelving/Card/ShelvingDescriptorProxy.vue
index 8023271b0..9561b77db 100644
--- a/src/pages/Shelving/Card/ShelvingDescriptorProxy.vue
+++ b/src/pages/Shelving/Card/ShelvingDescriptorProxy.vue
@@ -1,5 +1,6 @@
 <script setup>
-import ShelvingDescriptor from "pages/Shelving/Card/ShelvingDescriptor.vue";
+import ShelvingDescriptor from 'pages/Shelving/Card/ShelvingDescriptor.vue';
+import ShelvingSummary from './ShelvingSummary.vue';
 
 const $props = defineProps({
     id: {
@@ -10,6 +11,6 @@ const $props = defineProps({
 </script>
 <template>
     <QPopupProxy>
-        <ShelvingDescriptor v-if="$props.id" :id="$props.id" />
+        <ShelvingDescriptor v-if="$props.id" :id="$props.id" :summary="ShelvingSummary" />
     </QPopupProxy>
 </template>
diff --git a/src/pages/Ticket/Card/TicketDescriptor.vue b/src/pages/Ticket/Card/TicketDescriptor.vue
index dfbcfc106..3c5e6c80d 100644
--- a/src/pages/Ticket/Card/TicketDescriptor.vue
+++ b/src/pages/Ticket/Card/TicketDescriptor.vue
@@ -16,6 +16,10 @@ const $props = defineProps({
         required: false,
         default: null,
     },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });
 
 const route = useRoute();
@@ -83,6 +87,7 @@ const setData = (entity) =>
         :subtitle="data.subtitle"
         data-key="ticketData"
         @on-fetch="setData"
+        :summary="$props.summary"
     >
         <template #menu="{ entity }">
             <TicketDescriptorMenu :ticket="entity" />
@@ -153,4 +158,5 @@ const setData = (entity) =>
 <i18n>
 es:
     This ticket is deleted: Este ticket está eliminado
+    Go to module index: Ir al índice del modulo
 </i18n>
diff --git a/src/pages/Ticket/Card/TicketDescriptorProxy.vue b/src/pages/Ticket/Card/TicketDescriptorProxy.vue
index 7799b9ee6..583ba35e7 100644
--- a/src/pages/Ticket/Card/TicketDescriptorProxy.vue
+++ b/src/pages/Ticket/Card/TicketDescriptorProxy.vue
@@ -1,5 +1,6 @@
 <script setup>
 import TicketDescriptor from './TicketDescriptor.vue';
+import TicketSummary from './TicketSummary.vue';
 
 const $props = defineProps({
     id: {
@@ -10,6 +11,6 @@ const $props = defineProps({
 </script>
 <template>
     <QPopupProxy>
-        <TicketDescriptor v-if="$props.id" :id="$props.id" />
+        <TicketDescriptor v-if="$props.id" :id="$props.id" :summary="TicketSummary" />
     </QPopupProxy>
 </template>
diff --git a/src/pages/Travel/Card/TravelDescriptor.vue b/src/pages/Travel/Card/TravelDescriptor.vue
index 6d3707828..0b768ef22 100644
--- a/src/pages/Travel/Card/TravelDescriptor.vue
+++ b/src/pages/Travel/Card/TravelDescriptor.vue
@@ -1,10 +1,11 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import useCardDescription from 'src/composables/useCardDescription';
 import TravelDescriptorMenuItems from './TravelDescriptorMenuItems.vue';
 
 import { toDate } from 'src/filters';
@@ -15,6 +16,10 @@ const $props = defineProps({
         required: false,
         default: null,
     },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });
 
 const route = useRoute();
@@ -51,32 +56,22 @@ const filter = {
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
+
+const data = ref(useCardDescription());
+const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.id));
 </script>
 
 <template>
     <CardDescriptor
         module="Travel"
         :url="`Travels/${entityId}`"
-        title="ref"
+        :title="data.title"
+        :subtitle="data.subtitle"
         :filter="filter"
-        data-key="Travel"
+        data-key="travelData"
+        :summary="$props.summary"
+        @on-fetch="setData"
     >
-        <template #header-extra-action>
-            <QBtn
-                round
-                flat
-                dense
-                size="md"
-                icon="local_airport"
-                color="white"
-                class="link"
-                :to="{ name: 'TravelList' }"
-            >
-                <QTooltip>
-                    {{ t('Go to module index') }}
-                </QTooltip>
-            </QBtn>
-        </template>
         <template #menu="{ entity }">
             <TravelDescriptorMenuItems :travel="entity" />
         </template>
diff --git a/src/pages/Travel/Card/TravelDescriptorProxy.vue b/src/pages/Travel/Card/TravelDescriptorProxy.vue
index ab5c42d7e..eddadb382 100644
--- a/src/pages/Travel/Card/TravelDescriptorProxy.vue
+++ b/src/pages/Travel/Card/TravelDescriptorProxy.vue
@@ -1,5 +1,6 @@
 <script setup>
 import TravelDescriptor from './TravelDescriptor.vue';
+import TravelSummary from './TravelSummary.vue';
 
 const $props = defineProps({
     id: {
@@ -11,6 +12,6 @@ const $props = defineProps({
 
 <template>
     <QPopupProxy>
-        <TravelDescriptor v-if="$props.id" :id="$props.id" />
+        <TravelDescriptor v-if="$props.id" :id="$props.id" :summary="TravelSummary" />
     </QPopupProxy>
 </template>
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index 6739b3356..3ad14cf3f 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -200,4 +200,5 @@ es:
     Click to allow the user to be disabled: Marcar para deshabilitar
     Click to exclude the user from getting disabled: Marcar para no deshabilitar
     Change password: Cambiar contraseña
+    Go to module index: Ir al índice del modulo
 </i18n>
diff --git a/src/pages/Zone/Card/ZoneDescriptor.vue b/src/pages/Zone/Card/ZoneDescriptor.vue
index b3a55bbe0..548ab3427 100644
--- a/src/pages/Zone/Card/ZoneDescriptor.vue
+++ b/src/pages/Zone/Card/ZoneDescriptor.vue
@@ -17,6 +17,10 @@ const $props = defineProps({
         required: false,
         default: null,
     },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });
 
 const route = useRoute();
@@ -38,7 +42,6 @@ const entityId = computed(() => {
 });
 
 const data = ref(useCardDescription());
-
 const setData = (entity) => {
     data.value = useCardDescription(entity.ref, entity.id);
 };
@@ -53,23 +56,8 @@ const setData = (entity) => {
         :filter="filter"
         @on-fetch="setData"
         data-key="zoneData"
+        :summary="$props.summary"
     >
-        <template #header-extra-action>
-            <QBtn
-                round
-                flat
-                dense
-                size="md"
-                icon="vn:zone"
-                color="white"
-                class="link"
-                :to="{ name: 'ZoneList' }"
-            >
-                <QTooltip>
-                    {{ t('Summary') }}
-                </QTooltip>
-            </QBtn>
-        </template>
         <template #menu="{ entity }">
             <ZoneDescriptorMenuItems :zone="entity" />
         </template>
@@ -82,3 +70,8 @@ const setData = (entity) => {
         </template>
     </CardDescriptor>
 </template>
+
+<i18n>
+es:
+    Go to module index: Ir al índice del módulo
+</i18n>
diff --git a/src/pages/Zone/Card/ZoneDescriptorProxy.vue b/src/pages/Zone/Card/ZoneDescriptorProxy.vue
index 15c5fb0e5..27102ac07 100644
--- a/src/pages/Zone/Card/ZoneDescriptorProxy.vue
+++ b/src/pages/Zone/Card/ZoneDescriptorProxy.vue
@@ -1,5 +1,6 @@
 <script setup>
 import ZoneDescriptor from './ZoneDescriptor.vue';
+import ZoneSummary from './ZoneSummary.vue';
 
 const $props = defineProps({
     id: {
@@ -11,6 +12,6 @@ const $props = defineProps({
 
 <template>
     <QPopupProxy>
-        <ZoneDescriptor v-if="$props.id" :id="$props.id" />
+        <ZoneDescriptor v-if="$props.id" :id="$props.id" :summary="ZoneSummary" />
     </QPopupProxy>
 </template>

From 452d1000bc6d37118b32d08392e4ba172222d2c5 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Wed, 26 Jun 2024 14:28:21 +0200
Subject: [PATCH 02/15] refactor: refs #7543 requested changes

---
 src/i18n/locale/en.yml                           |  1 +
 src/i18n/locale/es.yml                           |  1 +
 src/pages/Agency/Card/AgencyDescriptor.vue       |  7 +------
 src/pages/Claim/Card/ClaimDescriptor.vue         |  3 +--
 src/pages/Entry/Card/EntryDescriptor.vue         |  6 +-----
 src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue |  6 +-----
 src/pages/Order/Card/OrderDescriptor.vue         |  7 +------
 src/pages/Route/Card/RouteDescriptor.vue         |  6 +-----
 src/pages/Route/Roadmap/RoadmapDescriptor.vue    |  3 +--
 src/pages/Shelving/Card/ShelvingDescriptor.vue   | 13 ++-----------
 src/pages/Ticket/Card/TicketDescriptor.vue       |  6 +-----
 src/pages/Travel/Card/TravelDescriptor.vue       |  6 +-----
 src/pages/Worker/Card/WorkerDescriptor.vue       |  7 +------
 src/pages/Zone/Card/ZoneDescriptor.vue           |  6 +-----
 14 files changed, 15 insertions(+), 63 deletions(-)

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index f8850d396..b18c396c0 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -114,6 +114,7 @@ globals:
     new: New
     comment: Comment
     observations: Observations
+    goToModuleIndex: Go to module index
 errors:
     statusUnauthorized: Access denied
     statusInternalServerError: An internal server error has ocurred
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index e5924f93b..e0c563f07 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -115,6 +115,7 @@ globals:
     new: Nuevo
     comment: Comentario
     observations: Observaciones
+    goToModuleIndex: Ir al índice del módulo
 errors:
     statusUnauthorized: Acceso denegado
     statusInternalServerError: Ha ocurrido un error interno del servidor
diff --git a/src/pages/Agency/Card/AgencyDescriptor.vue b/src/pages/Agency/Card/AgencyDescriptor.vue
index 8b6a6603e..46b225ff2 100644
--- a/src/pages/Agency/Card/AgencyDescriptor.vue
+++ b/src/pages/Agency/Card/AgencyDescriptor.vue
@@ -40,7 +40,7 @@ const card = computed(() => store.data);
                 :to="{ name: 'RouteList' }"
             >
                 <QTooltip>
-                    {{ t('Go to module index') }}
+                    {{ t('globals.goToModuleIndex') }}
                 </QTooltip>
             </QBtn>
         </template>
@@ -49,8 +49,3 @@ const card = computed(() => store.data);
         </template>
     </CardDescriptor>
 </template>
-
-<i18n>
-es:
-    Go to module index: Ir al índice del modulo
-</i18n>
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index e4b96b5b6..9b25aa2d9 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -73,7 +73,7 @@ onMounted(async () => {
                 :to="{ name: 'ClaimList' }"
             >
                 <QTooltip>
-                    {{ t('Go to module index') }}
+                    {{ t('globals.goToModuleIndex') }}
                 </QTooltip>
             </QBtn>
         </template>
@@ -187,5 +187,4 @@ onMounted(async () => {
         claimRate: Claming rate
     es:
         claimRate: Ratio de reclamación
-        Go to module index: Ir al índice del módulo
 </i18n>
diff --git a/src/pages/Entry/Card/EntryDescriptor.vue b/src/pages/Entry/Card/EntryDescriptor.vue
index 317400181..a55ad67cd 100644
--- a/src/pages/Entry/Card/EntryDescriptor.vue
+++ b/src/pages/Entry/Card/EntryDescriptor.vue
@@ -18,10 +18,6 @@ const $props = defineProps({
         required: false,
         default: null,
     },
-    summary: {
-        type: Object,
-        default: null,
-    },
 });
 
 const route = useRoute();
@@ -119,7 +115,7 @@ watch;
         :subtitle="data.subtitle"
         @on-fetch="setData"
         data-key="entry"
-        :summary="$props.summary"
+        :summary="$attrs"
     >
         <template #menu="{ entity }">
             <QItem v-ripple clickable @click="showEntryReport(entity)">
diff --git a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
index 1381bdc73..e8428dca1 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
@@ -25,10 +25,6 @@ const $props = defineProps({
         type: Number,
         default: null,
     },
-    summary: {
-        type: Object,
-        default: null,
-    },
 });
 
 const { push, currentRoute } = useRouter();
@@ -297,7 +293,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
         :filter="filter"
         title="supplierRef"
         @on-fetch="setData"
-        :summary="$props.summary"
+        :summary="$attrs"
     >
         <template #menu="{ entity }">
             <InvoiceInToBook>
diff --git a/src/pages/Order/Card/OrderDescriptor.vue b/src/pages/Order/Card/OrderDescriptor.vue
index 92bc5ad66..82d7e0d05 100644
--- a/src/pages/Order/Card/OrderDescriptor.vue
+++ b/src/pages/Order/Card/OrderDescriptor.vue
@@ -99,7 +99,7 @@ const total = ref(null);
                 :to="{ name: 'OrderList' }"
             >
                 <QTooltip>
-                    {{ t('Go to module index') }}
+                    {{ t('globals.goToModuleIndex') }}
                 </QTooltip>
             </QBtn>
         </template>
@@ -153,8 +153,3 @@ const total = ref(null);
         </template>
     </CardDescriptor>
 </template>
-
-<i18n>
-es:
-    Go to module index: Ir al índice del módulo
-</i18n>
diff --git a/src/pages/Route/Card/RouteDescriptor.vue b/src/pages/Route/Card/RouteDescriptor.vue
index a0e0aaf3a..2fa0e77e0 100644
--- a/src/pages/Route/Card/RouteDescriptor.vue
+++ b/src/pages/Route/Card/RouteDescriptor.vue
@@ -14,10 +14,6 @@ const $props = defineProps({
         required: false,
         default: null,
     },
-    summary: {
-        type: Object,
-        default: null,
-    },
 });
 
 const route = useRoute();
@@ -80,7 +76,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
         :subtitle="data.subtitle"
         data-key="routeData"
         @on-fetch="setData"
-        :summary="$props.summary"
+        :summary="$attrs"
     >
         <template #body="{ entity }">
             <VnLv :label="t('Date')" :value="toDate(entity?.created)" />
diff --git a/src/pages/Route/Roadmap/RoadmapDescriptor.vue b/src/pages/Route/Roadmap/RoadmapDescriptor.vue
index 78851ef5f..0f52f087f 100644
--- a/src/pages/Route/Roadmap/RoadmapDescriptor.vue
+++ b/src/pages/Route/Roadmap/RoadmapDescriptor.vue
@@ -51,7 +51,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
                 :to="{ name: 'RouteList' }"
             >
                 <QTooltip>
-                    {{ t('Go to module index') }}
+                    {{ t('globals.goToModuleIndex') }}
                 </QTooltip>
             </QBtn>
         </template>
@@ -76,5 +76,4 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
 es:
     Roadmap: Troncal
     Carrier: Transportista
-    Go to module index: Ir al índice del módulo
 </i18n>
diff --git a/src/pages/Shelving/Card/ShelvingDescriptor.vue b/src/pages/Shelving/Card/ShelvingDescriptor.vue
index 0fac92f65..9322faaa0 100644
--- a/src/pages/Shelving/Card/ShelvingDescriptor.vue
+++ b/src/pages/Shelving/Card/ShelvingDescriptor.vue
@@ -14,10 +14,6 @@ const $props = defineProps({
         required: false,
         default: null,
     },
-    summary: {
-        type: Object,
-        default: null,
-    },
 });
 
 const route = useRoute();
@@ -55,7 +51,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
         :subtitle="data.subtitle"
         data-key="Shelvings"
         @on-fetch="setData"
-        :summary="$props.summary"
+        :summary="$attrs"
     >
         <template #header-extra-action>
             <QBtn
@@ -69,7 +65,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
                 :to="{ name: 'ShelvingList' }"
             >
                 <QTooltip>
-                    {{ t('Go to module index') }}
+                    {{ t('globals.goToModuleIndex') }}
                 </QTooltip>
             </QBtn>
         </template>
@@ -90,8 +86,3 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
         </template>
     </CardDescriptor>
 </template>
-
-<i18n>
-es:
-    Go to module index: Ir al indice del modulo
-</i18n>
diff --git a/src/pages/Ticket/Card/TicketDescriptor.vue b/src/pages/Ticket/Card/TicketDescriptor.vue
index 3c5e6c80d..ab95ee643 100644
--- a/src/pages/Ticket/Card/TicketDescriptor.vue
+++ b/src/pages/Ticket/Card/TicketDescriptor.vue
@@ -16,10 +16,6 @@ const $props = defineProps({
         required: false,
         default: null,
     },
-    summary: {
-        type: Object,
-        default: null,
-    },
 });
 
 const route = useRoute();
@@ -87,7 +83,7 @@ const setData = (entity) =>
         :subtitle="data.subtitle"
         data-key="ticketData"
         @on-fetch="setData"
-        :summary="$props.summary"
+        :summary="$attrs"
     >
         <template #menu="{ entity }">
             <TicketDescriptorMenu :ticket="entity" />
diff --git a/src/pages/Travel/Card/TravelDescriptor.vue b/src/pages/Travel/Card/TravelDescriptor.vue
index 0b768ef22..b74761b37 100644
--- a/src/pages/Travel/Card/TravelDescriptor.vue
+++ b/src/pages/Travel/Card/TravelDescriptor.vue
@@ -16,10 +16,6 @@ const $props = defineProps({
         required: false,
         default: null,
     },
-    summary: {
-        type: Object,
-        default: null,
-    },
 });
 
 const route = useRoute();
@@ -69,7 +65,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.
         :subtitle="data.subtitle"
         :filter="filter"
         data-key="travelData"
-        :summary="$props.summary"
+        :summary="$attrs"
         @on-fetch="setData"
     >
         <template #menu="{ entity }">
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index 3ad14cf3f..82a698878 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -17,10 +17,6 @@ const $props = defineProps({
         required: false,
         default: null,
     },
-    summary: {
-        type: Object,
-        default: null,
-    },
 });
 
 const route = useRoute();
@@ -115,7 +111,7 @@ const refetch = async () => await cardDescriptorRef.value.getData();
         :filter="filter"
         :title="data.title"
         :subtitle="data.subtitle"
-        :summary="$props.summary"
+        :summary="$attrs"
         @on-fetch="
             (data) => {
                 worker = data;
@@ -200,5 +196,4 @@ es:
     Click to allow the user to be disabled: Marcar para deshabilitar
     Click to exclude the user from getting disabled: Marcar para no deshabilitar
     Change password: Cambiar contraseña
-    Go to module index: Ir al índice del modulo
 </i18n>
diff --git a/src/pages/Zone/Card/ZoneDescriptor.vue b/src/pages/Zone/Card/ZoneDescriptor.vue
index 548ab3427..602fefde3 100644
--- a/src/pages/Zone/Card/ZoneDescriptor.vue
+++ b/src/pages/Zone/Card/ZoneDescriptor.vue
@@ -17,10 +17,6 @@ const $props = defineProps({
         required: false,
         default: null,
     },
-    summary: {
-        type: Object,
-        default: null,
-    },
 });
 
 const route = useRoute();
@@ -56,7 +52,7 @@ const setData = (entity) => {
         :filter="filter"
         @on-fetch="setData"
         data-key="zoneData"
-        :summary="$props.summary"
+        :summary="$attrs"
     >
         <template #menu="{ entity }">
             <ZoneDescriptorMenuItems :zone="entity" />

From 381a9c6d1d82d3d0c82e88ab674fc53ac5eeaabb Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 27 Jun 2024 13:56:20 +0200
Subject: [PATCH 03/15] feat: remake vnInputDate and fix: FormModel has changes
 when error

---
 src/components/FormModel.vue          |  10 +-
 src/components/common/VnInputDate.vue | 150 +++++++++++++-------------
 2 files changed, 78 insertions(+), 82 deletions(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index f10dee61a..ab9fa921a 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -90,7 +90,7 @@ const $props = defineProps({
 });
 const emit = defineEmits(['onFetch', 'onDataSaved']);
 const modelValue = computed(
-    () => $props.model ?? `formModel_${route?.meta?.title ?? route.name}`
+    () => $props.model ?? `formModel_${route?.meta?.title ?? route.name}`,
 ).value;
 const componentIsRendered = ref(false);
 const arrayData = useArrayData(modelValue);
@@ -137,7 +137,7 @@ onMounted(async () => {
                     JSON.stringify(newVal) !== JSON.stringify(originalData.value);
                 isResetting.value = false;
             },
-            { deep: true }
+            { deep: true },
         );
     }
 });
@@ -145,7 +145,7 @@ onMounted(async () => {
 if (!$props.url)
     watch(
         () => arrayData.store.data,
-        (val) => updateAndEmit('onFetch', val)
+        (val) => updateAndEmit('onFetch', val),
     );
 
 watch(formUrl, async () => {
@@ -206,11 +206,11 @@ async function save() {
 
         updateAndEmit('onDataSaved', formData.value, response?.data);
         if ($props.reload) await arrayData.fetch({});
+        hasChanges.value = false;
     } catch (err) {
         console.error(err);
         notify('errors.writeRequest', 'negative');
     } finally {
-        hasChanges.value = false;
         isLoading.value = false;
     }
 }
@@ -239,7 +239,7 @@ function filter(value, update, filterOptions) {
         (ref) => {
             ref.setOptionIndex(-1);
             ref.moveOptionSelection(1, true);
-        }
+        },
     );
 }
 
diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index 77ab2692d..f2c6cbe60 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -1,13 +1,10 @@
 <script setup>
 import { computed, ref } from 'vue';
+import { date } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import isValidDate from 'filters/isValidDate';
 
-const props = defineProps({
-    modelValue: {
-        type: String,
-        default: null,
-    },
+const model = defineModel({ type: String });
+const $props = defineProps({
     readonly: {
         type: Boolean,
         default: false,
@@ -21,64 +18,16 @@ const props = defineProps({
         default: false,
     },
 });
-const hover = ref(false);
 
 const emit = defineEmits(['update:modelValue']);
-
 const { t } = useI18n();
 const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
 
-const joinDateAndTime = (date, time) => {
-    if (!date) {
-        return null;
-    }
-    if (!time) {
-        return new Date(date).toISOString();
-    }
-    const [year, month, day] = date.split('/');
-    return new Date(`${year}-${month}-${day}T${time}`).toISOString();
-};
-
-const time = computed(() => (props.modelValue ? props.modelValue.split('T')?.[1] : null));
-const value = computed({
-    get() {
-        return props.modelValue;
-    },
-    set(value) {
-        emit(
-            'update:modelValue',
-            props.emitDateFormat ? new Date(value) : joinDateAndTime(value, time.value)
-        );
-    },
-});
-
 const isPopupOpen = ref(false);
-
-const onDateUpdate = (date) => {
-    value.value = date;
-    isPopupOpen.value = false;
-};
-
-const padDate = (value) => value.toString().padStart(2, '0');
-const formatDate = (dateString) => {
-    const date = new Date(dateString || '');
-    return `${date.getFullYear()}/${padDate(date.getMonth() + 1)}/${padDate(
-        date.getDate()
-    )}`;
-};
-const displayDate = (dateString) => {
-    if (!dateString || !isValidDate(dateString)) {
-        return '';
-    }
-    return new Date(dateString).toLocaleDateString([], {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit',
-    });
-};
+const hover = ref(false);
 
 const styleAttrs = computed(() => {
-    return props.isOutlined
+    return $props.isOutlined
         ? {
               dense: true,
               outlined: true,
@@ -86,42 +35,89 @@ const styleAttrs = computed(() => {
           }
         : {};
 });
+
+const dateFormat = 'DD/MM/YYYY';
+const formattedDate = computed({
+    get() {
+        if (!model.value) return model.value;
+        return date.formatDate(new Date(model.value), dateFormat);
+    },
+    set(value) {
+        let newDate;
+        if (value) {
+            // parse input
+            if (value.includes('/') && value.length >= 10) {
+                if (value.at(2) == '/') value = value.split('/').reverse().join('/');
+                value = date.formatDate(
+                    new Date(value).toISOString(),
+                    'YYYY-MM-DDTHH:mm:ss.SSSZ',
+                );
+            }
+            let ymd = value.split('-').map((e) => parseInt(e));
+            newDate = new Date(ymd[0], ymd[1] - 1, ymd[2]);
+            if (model.value) {
+                const orgDate =
+                    model.value instanceof Date ? model.value : new Date(model.value);
+
+                newDate.setHours(
+                    orgDate.getHours(),
+                    orgDate.getMinutes(),
+                    orgDate.getSeconds(),
+                    orgDate.getMilliseconds(),
+                );
+            }
+        }
+        if (!isNaN(newDate)) model.value = newDate.toISOString();
+    },
+});
+
+const popupDate = computed(() =>
+    model.value ? date.formatDate(new Date(model.value), 'YYYY/MM/DD') : model.value,
+);
 </script>
 
 <template>
     <div @mouseover="hover = true" @mouseleave="hover = false">
         <QInput
+            v-model="formattedDate"
             class="vn-input-date"
-            readonly
-            :model-value="displayDate(value)"
+            mask="##/##/####"
+            placeholder="dd/mm/aaaa"
             v-bind="{ ...$attrs, ...styleAttrs }"
             :class="{ required: $attrs.required }"
             :rules="$attrs.required ? [requiredFieldRule] : null"
-            @click="isPopupOpen = true"
         >
             <template #append>
                 <QIcon
                     name="close"
                     size="xs"
-                    v-if="hover && value && !readonly"
-                    @click="onDateUpdate(null)"
-                ></QIcon>
-                <QIcon name="event" class="cursor-pointer">
-                    <QPopupProxy
-                        v-model="isPopupOpen"
-                        cover
-                        transition-show="scale"
-                        transition-hide="scale"
-                        :no-parent-event="props.readonly"
-                    >
-                        <QDate
-                            :today-btn="true"
-                            :model-value="formatDate(value)"
-                            @update:model-value="onDateUpdate"
-                        />
-                    </QPopupProxy>
-                </QIcon>
+                    v-if="hover && model && !readonly"
+                    @click="
+                        model = null;
+                        isPopupOpen = false;
+                    "
+                />
+                <QIcon name="event" class="cursor-pointer" />
             </template>
+            <QMenu
+                transition-show="scale"
+                transition-hide="scale"
+                v-model="isPopupOpen"
+                anchor="bottom left"
+                self="top start"
+                :no-focus="true"
+            >
+                <QDate
+                    v-model="popupDate"
+                    :today-btn="true"
+                    @update:model-value="
+                        (date) => {
+                            formattedDate = date;
+                            isPopupOpen = false;
+                        }
+                    "
+                />
+            </QMenu>
         </QInput>
     </div>
 </template>

From ec5eeaa30831e09f261e8d61b44665599cb1c497 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 28 Jun 2024 10:14:24 +0200
Subject: [PATCH 04/15] fix: refs #6151 fixed filters and styles

---
 src/pages/Order/Card/OrderCard.vue          |  9 ++----
 src/pages/Order/Card/OrderCatalogFilter.vue | 35 ++++++---------------
 src/pages/Order/Card/OrderCatalogItem.vue   |  2 +-
 src/pages/Order/Card/OrderSummary.vue       | 24 +++++++++-----
 src/pages/Order/OrderCatalog.vue            |  1 +
 src/pages/Order/OrderList.vue               |  8 +++--
 6 files changed, 38 insertions(+), 41 deletions(-)

diff --git a/src/pages/Order/Card/OrderCard.vue b/src/pages/Order/Card/OrderCard.vue
index 5b6896656..12b61e913 100644
--- a/src/pages/Order/Card/OrderCard.vue
+++ b/src/pages/Order/Card/OrderCard.vue
@@ -2,7 +2,6 @@
 import VnCard from 'components/common/VnCard.vue';
 import OrderDescriptor from 'pages/Order/Card/OrderDescriptor.vue';
 import OrderFilter from './OrderFilter.vue';
-import OrderSearchbar from './OrderSearchbar.vue';
 </script>
 <template>
     <VnCard
@@ -11,9 +10,7 @@ import OrderSearchbar from './OrderSearchbar.vue';
         :descriptor="OrderDescriptor"
         :filter-panel="OrderFilter"
         search-data-key="OrderList"
-    >
-        <template #searchbar>
-            <OrderSearchbar />
-        </template>
-    </VnCard>
+        searchbar-label="Search order"
+        searchbar-info="ypu can search by order id or name"
+    />
 </template>
diff --git a/src/pages/Order/Card/OrderCatalogFilter.vue b/src/pages/Order/Card/OrderCatalogFilter.vue
index fd5300122..c354ec94b 100644
--- a/src/pages/Order/Card/OrderCatalogFilter.vue
+++ b/src/pages/Order/Card/OrderCatalogFilter.vue
@@ -37,6 +37,10 @@ const selectedOrder = ref(null);
 const selectedOrderField = ref(null);
 const moreFields = ref([]);
 const moreFieldsOrder = ref([]);
+const selectedTag = ref(null);
+const tagValues = ref([{}]);
+const tagOptions = ref([]);
+
 const createValue = (val, done) => {
     if (val.length > 2) {
         if (!tagOptions.value.includes(val)) {
@@ -95,10 +99,6 @@ function exprBuilder(param, value) {
     }
 }
 
-const selectedTag = ref(null);
-const tagValues = ref([{}]);
-const tagOptions = ref([]);
-
 const applyTagFilter = (params, search) => {
     if (!tagValues.value?.length) {
         params.tagGroups = null;
@@ -139,39 +139,23 @@ const onOrderChange = (value, params) => {
 };
 
 const onOrderFieldChange = (value, params) => {
-    const tagObj = JSON.parse(params.orderBy); // esto donde va
-    const fields = {
-        Relevancy: (value) => value + ' DESC, name',
-        ColorAndPrice: 'showOrder, price',
-        Name: 'name',
-        Price: 'price',
-    };
-    let tagField = fields[value];
-    if (!tagField) return;
-
-    if (typeof tagField === 'function') tagField = tagField(value);
-    tagObj.field = tagField;
-    params.orderBy = JSON.stringify(tagObj);
+    const tagObj = JSON.parse(params.orderBy);
     switch (value) {
         case 'Relevancy':
-            tagObj.field = value + ' DESC, name';
+            tagObj.name = value + ' DESC, name';
             params.orderBy = JSON.stringify(tagObj);
-            console.log('params: ', params);
             break;
         case 'ColorAndPrice':
-            tagObj.field = 'showOrder, price';
+            tagObj.name = 'showOrder, price';
             params.orderBy = JSON.stringify(tagObj);
-            console.log('params: ', params);
             break;
         case 'Name':
-            tagObj.field = 'name';
+            tagObj.name = 'name';
             params.orderBy = JSON.stringify(tagObj);
-            console.log('params: ', params);
             break;
         case 'Price':
-            tagObj.field = 'price';
+            tagObj.name = 'price';
             params.orderBy = JSON.stringify(tagObj);
-            console.log('params: ', params);
             break;
     }
 };
@@ -312,6 +296,7 @@ const useLang = (values) => {
                         v-model="selectedOrder"
                         :options="moreFields"
                         option-label="label"
+                        option-value="way"
                         dense
                         outlined
                         rounded
diff --git a/src/pages/Order/Card/OrderCatalogItem.vue b/src/pages/Order/Card/OrderCatalogItem.vue
index 34e22915d..8fa0bb5b9 100644
--- a/src/pages/Order/Card/OrderCatalogItem.vue
+++ b/src/pages/Order/Card/OrderCatalogItem.vue
@@ -27,7 +27,7 @@ const dialog = ref(null);
     <div class="container order-catalog-item overflow-hidden">
         <QCard class="card shadow-6">
             <div class="img-wrapper">
-                <VnImg :id="item.id" class="image" />
+                <VnImg :id="item.id" zoom-size="lg" class="image" />
                 <div v-if="item.hex" class="item-color-container">
                     <div
                         class="item-color"
diff --git a/src/pages/Order/Card/OrderSummary.vue b/src/pages/Order/Card/OrderSummary.vue
index d82dbaa17..7961b250e 100644
--- a/src/pages/Order/Card/OrderSummary.vue
+++ b/src/pages/Order/Card/OrderSummary.vue
@@ -7,6 +7,8 @@ import VnLv from 'components/ui/VnLv.vue';
 import CardSummary from 'components/ui/CardSummary.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -62,6 +64,10 @@ const detailsColumns = ref([
             </template>
             <template #body="{ entity }">
                 <QCard class="vn-one">
+                    <VnTitle
+                        :url="`#/order/${entity.id}/basic-data`"
+                        :text="t('globals.pageTitles.basicData')"
+                    />
                     <VnLv label="ID" :value="entity.id" />
                     <VnLv :label="t('order.summary.nickname')" dash>
                         <template #value>
@@ -81,6 +87,10 @@ const detailsColumns = ref([
                     />
                 </QCard>
                 <QCard class="vn-one">
+                    <VnTitle
+                        :url="`#/order/${entity.id}/basic-data`"
+                        :text="t('globals.pageTitles.basicData')"
+                    />
                     <VnLv
                         :label="t('order.summary.created')"
                         :value="toDateHourMinSec(entity?.created)"
@@ -116,14 +126,13 @@ const detailsColumns = ref([
                     />
                 </QCard>
                 <QCard class="vn-one">
-                    <p class="header">
-                        {{ t('order.summary.notes') }}
-                    </p>
+                    <VnTitle :text="t('globals.pageTitles.notes')" />
                     <p v-if="entity?.note" class="no-margin">
                         {{ entity?.note }}
                     </p>
                 </QCard>
                 <QCard class="vn-one">
+                    <VnTitle :text="t('order.summary.total')" />
                     <VnLv>
                         <template #label>
                             <span class="text-h6">{{ t('order.summary.subtotal') }}</span>
@@ -152,9 +161,7 @@ const detailsColumns = ref([
                     </VnLv>
                 </QCard>
                 <QCard>
-                    <p class="header">
-                        {{ t('order.summary.details') }}
-                    </p>
+                    <VnTitle :text="t('order.summary.details')" />
                     <QTable :columns="detailsColumns" :rows="entity?.rows" flat>
                         <template #header="props">
                             <QTr :props="props">
@@ -168,7 +175,10 @@ const detailsColumns = ref([
                         <template #body="props">
                             <QTr :props="props">
                                 <QTd key="item" :props="props" class="item">
-                                    {{ props.row.item?.id }}
+                                    <span class="link">
+                                        {{ props.row.item?.id }}
+                                        <ItemDescriptorProxy :id="props.row.item?.id" />
+                                    </span>
                                 </QTd>
                                 <QTd key="description" :props="props" class="description">
                                     <div class="name">
diff --git a/src/pages/Order/OrderCatalog.vue b/src/pages/Order/OrderCatalog.vue
index 1d97663d0..081a2cd2f 100644
--- a/src/pages/Order/OrderCatalog.vue
+++ b/src/pages/Order/OrderCatalog.vue
@@ -70,6 +70,7 @@ function extractValueTags(items) {
                 :user-params="catalogParams"
                 auto-load
                 @on-fetch="extractTags"
+                :update-router="false"
             >
                 <template #body="{ rows }">
                     <div class="catalog-list">
diff --git a/src/pages/Order/OrderList.vue b/src/pages/Order/OrderList.vue
index 247a8e3b2..0e6e11482 100644
--- a/src/pages/Order/OrderList.vue
+++ b/src/pages/Order/OrderList.vue
@@ -9,7 +9,7 @@ import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnLv from 'components/ui/VnLv.vue';
-import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import OrderFilter from 'pages/Order/Card/OrderFilter.vue';
 import OrderSummary from 'pages/Order/Card/OrderSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
@@ -28,7 +28,11 @@ function navigate(id) {
 }
 </script>
 <template>
-    <OrderSearchbar />
+    <VnSearchbar
+        data-key="OrderList"
+        :label="t('Search order')"
+        :info="t('You can search orders by reference')"
+    />
     <RightMenu>
         <template #right-panel>
             <OrderFilter data-key="OrderList" />

From 68552b8da9bdb61237ed7c356671e3c34d4f4de4 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 28 Jun 2024 11:07:32 +0200
Subject: [PATCH 05/15] perf: add QBtn in CardDescriptor instead each
 ModuleDescriptor

---
 src/components/ui/CardDescriptor.vue          | 25 ++++++++++++++++++-
 src/pages/Account/Card/AccountDescriptor.vue  | 14 -----------
 src/pages/Agency/Card/AgencyDescriptor.vue    | 16 ------------
 src/pages/Claim/Card/ClaimDescriptor.vue      | 16 ------------
 .../ItemType/Card/ItemTypeDescriptor.vue      | 14 -----------
 src/pages/Order/Card/OrderDescriptor.vue      | 16 ------------
 src/pages/Route/Roadmap/RoadmapDescriptor.vue | 16 ------------
 .../Shelving/Card/ShelvingDescriptor.vue      | 16 ------------
 .../Supplier/Card/SupplierDescriptor.vue      | 16 ------------
 9 files changed, 24 insertions(+), 125 deletions(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 8bb2a603e..481e2ec12 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -78,13 +78,36 @@ async function getData() {
     }
 }
 const emit = defineEmits(['onFetch']);
+
+const iconModule = computed(() => route.matched[1].meta.icon);
+const toModule = computed(() =>
+    route.matched[1].path.split('/').length > 2
+        ? route.matched[1].redirect
+        : route.matched[1].children[0].redirect
+);
 </script>
 
 <template>
     <div class="descriptor">
         <template v-if="entity && !isLoading">
             <div class="header bg-primary q-pa-sm justify-between">
-                <slot name="header-extra-action" />
+                <slot name="header-extra-action"
+                    ><QBtn
+                        round
+                        flat
+                        dense
+                        size="md"
+                        :icon="iconModule"
+                        color="white"
+                        class="link"
+                        :to="toModule"
+                    >
+                        <QTooltip>
+                            {{ t('globals.goToModuleIndex') }}
+                        </QTooltip>
+                    </QBtn></slot
+                >
+
                 <QBtn
                     @click.stop="viewSummary(entity.id, $props.summary)"
                     round
diff --git a/src/pages/Account/Card/AccountDescriptor.vue b/src/pages/Account/Card/AccountDescriptor.vue
index ddc7c077f..d43266172 100644
--- a/src/pages/Account/Card/AccountDescriptor.vue
+++ b/src/pages/Account/Card/AccountDescriptor.vue
@@ -49,20 +49,6 @@ const hasAccount = ref(false);
         :title="data.title"
         :subtitle="data.subtitle"
     >
-        <template #header-extra-action>
-            <QBtn
-                round
-                flat
-                size="md"
-                color="white"
-                icon="face"
-                :to="{ name: 'AccountList' }"
-            >
-                <QTooltip>
-                    {{ t('Go to module index') }}
-                </QTooltip>
-            </QBtn>
-        </template>
         <template #menu>
             <AccountDescriptorMenu :has-account="hasAccount" />
         </template>
diff --git a/src/pages/Agency/Card/AgencyDescriptor.vue b/src/pages/Agency/Card/AgencyDescriptor.vue
index 46b225ff2..b9772037c 100644
--- a/src/pages/Agency/Card/AgencyDescriptor.vue
+++ b/src/pages/Agency/Card/AgencyDescriptor.vue
@@ -28,22 +28,6 @@ const card = computed(() => store.data);
         :title="card?.name"
         :subtitle="props.id"
     >
-        <template #header-extra-action>
-            <QBtn
-                round
-                flat
-                dense
-                size="md"
-                icon="garage_home"
-                color="white"
-                class="link"
-                :to="{ name: 'RouteList' }"
-            >
-                <QTooltip>
-                    {{ t('globals.goToModuleIndex') }}
-                </QTooltip>
-            </QBtn>
-        </template>
         <template #body="{ entity: agency }">
             <VnLv :label="t('globals.name')" :value="agency.name" />
         </template>
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index 9b25aa2d9..5336c4427 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -61,22 +61,6 @@ onMounted(async () => {
         @on-fetch="setData"
         data-key="Claim"
     >
-        <template #header-extra-action>
-            <QBtn
-                round
-                flat
-                dense
-                size="md"
-                icon="vn:claims"
-                color="white"
-                class="link"
-                :to="{ name: 'ClaimList' }"
-            >
-                <QTooltip>
-                    {{ t('globals.goToModuleIndex') }}
-                </QTooltip>
-            </QBtn>
-        </template>
         <template #menu="{ entity }">
             <ClaimDescriptorMenu :claim="entity" />
         </template>
diff --git a/src/pages/ItemType/Card/ItemTypeDescriptor.vue b/src/pages/ItemType/Card/ItemTypeDescriptor.vue
index e565a791b..cd12fc238 100644
--- a/src/pages/ItemType/Card/ItemTypeDescriptor.vue
+++ b/src/pages/ItemType/Card/ItemTypeDescriptor.vue
@@ -51,20 +51,6 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
         @on-fetch="setData"
         data-key="entry"
     >
-        <template #header-extra-action>
-            <QBtn
-                round
-                flat
-                size="sm"
-                icon="vn:item"
-                color="white"
-                :to="{ name: 'ItemTypeList' }"
-            >
-                <QTooltip>
-                    {{ t('Go to module index') }}
-                </QTooltip>
-            </QBtn>
-        </template>
         <template #body="{ entity }">
             <VnLv :label="t('shared.code')" :value="entity.code" />
             <VnLv :label="t('shared.name')" :value="entity.name" />
diff --git a/src/pages/Order/Card/OrderDescriptor.vue b/src/pages/Order/Card/OrderDescriptor.vue
index 82d7e0d05..60e86d04e 100644
--- a/src/pages/Order/Card/OrderDescriptor.vue
+++ b/src/pages/Order/Card/OrderDescriptor.vue
@@ -87,22 +87,6 @@ const total = ref(null);
         @on-fetch="setData"
         data-key="orderData"
     >
-        <template #header-extra-action>
-            <QBtn
-                round
-                flat
-                dense
-                size="md"
-                icon="vn:basket"
-                color="white"
-                class="link"
-                :to="{ name: 'OrderList' }"
-            >
-                <QTooltip>
-                    {{ t('globals.goToModuleIndex') }}
-                </QTooltip>
-            </QBtn>
-        </template>
         <template #menu="{ entity }">
             <OrderDescriptorMenu :order="entity" />
         </template>
diff --git a/src/pages/Route/Roadmap/RoadmapDescriptor.vue b/src/pages/Route/Roadmap/RoadmapDescriptor.vue
index 0f52f087f..788173688 100644
--- a/src/pages/Route/Roadmap/RoadmapDescriptor.vue
+++ b/src/pages/Route/Roadmap/RoadmapDescriptor.vue
@@ -39,22 +39,6 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
         data-key="Roadmap"
         @on-fetch="setData"
     >
-        <template #header-extra-action>
-            <QBtn
-                round
-                flat
-                dense
-                size="md"
-                icon="vn:troncales"
-                color="white"
-                class="link"
-                :to="{ name: 'RouteList' }"
-            >
-                <QTooltip>
-                    {{ t('globals.goToModuleIndex') }}
-                </QTooltip>
-            </QBtn>
-        </template>
         <template #body="{ entity }">
             <VnLv :label="t('Roadmap')" :value="entity?.name" />
             <VnLv :label="t('ETD')" :value="toDateHourMin(entity?.etd)" />
diff --git a/src/pages/Shelving/Card/ShelvingDescriptor.vue b/src/pages/Shelving/Card/ShelvingDescriptor.vue
index 9322faaa0..52b4896ad 100644
--- a/src/pages/Shelving/Card/ShelvingDescriptor.vue
+++ b/src/pages/Shelving/Card/ShelvingDescriptor.vue
@@ -53,22 +53,6 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
         @on-fetch="setData"
         :summary="$attrs"
     >
-        <template #header-extra-action>
-            <QBtn
-                round
-                flat
-                dense
-                size="md"
-                icon="vn:inventory"
-                color="white"
-                class="link"
-                :to="{ name: 'ShelvingList' }"
-            >
-                <QTooltip>
-                    {{ t('globals.goToModuleIndex') }}
-                </QTooltip>
-            </QBtn>
-        </template>
         <template #body="{ entity }">
             <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
             <VnLv :label="t('shelving.summary.parking')" :value="entity.parking?.code" />
diff --git a/src/pages/Supplier/Card/SupplierDescriptor.vue b/src/pages/Supplier/Card/SupplierDescriptor.vue
index 4ef76c2f8..a31a3bc8d 100644
--- a/src/pages/Supplier/Card/SupplierDescriptor.vue
+++ b/src/pages/Supplier/Card/SupplierDescriptor.vue
@@ -112,22 +112,6 @@ const getEntryQueryParams = (supplier) => {
         data-key="supplier"
         :summary="$props.summary"
     >
-        <template #header-extra-action>
-            <QBtn
-                round
-                flat
-                dense
-                size="md"
-                icon="vn:supplier"
-                color="white"
-                class="link"
-                :to="{ name: 'SupplierList' }"
-            >
-                <QTooltip>
-                    {{ t('Go to module index') }}
-                </QTooltip>
-            </QBtn>
-        </template>
         <template #body="{ entity }">
             <VnLv :label="t('supplier.summary.taxNumber')" :value="entity.nif" />
             <VnLv label="Alias" :value="entity.nickname" />

From 52d6eeb9762753ea4249b91f6b67c314c077781a Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 28 Jun 2024 16:22:37 +0200
Subject: [PATCH 06/15] fix: vnSearchBar e2e

---
 test/cypress/integration/vnSearchBar.spec.js | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/test/cypress/integration/vnSearchBar.spec.js b/test/cypress/integration/vnSearchBar.spec.js
index f1f3a9e82..75c08825c 100644
--- a/test/cypress/integration/vnSearchBar.spec.js
+++ b/test/cypress/integration/vnSearchBar.spec.js
@@ -3,13 +3,10 @@ describe('VnSearchBar', () => {
     const employeeId = ' #1';
     const salesPersonId = ' #18';
     const idGap = '.q-item > .q-item__label';
-    const cardList = '.vn-card-list';
-
-    let url;
+    const vnTableRow = '.q-virtual-scroll__content';
     beforeEach(() => {
         cy.login('developer');
         cy.visit('#/customer/list');
-        cy.url().then((currentUrl) => (url = currentUrl));
     });
 
     it('should redirect to customer summary page', () => {
@@ -19,12 +16,12 @@ describe('VnSearchBar', () => {
 
     it('should stay on the list page if there are several results or none', () => {
         cy.writeSearchbar('salesA{enter}');
-        checkCardListAndUrl(2);
+        checkTableLength(2);
 
         cy.clearSearchbar();
 
         cy.writeSearchbar('0{enter}');
-        checkCardListAndUrl(0);
+        checkTableLength(0);
     });
 
     const searchAndCheck = (searchTerm, expectedText) => {
@@ -33,10 +30,7 @@ describe('VnSearchBar', () => {
         cy.get(idGap).should('have.text', expectedText);
     };
 
-    const checkCardListAndUrl = (expectedLength) => {
-        cy.get(cardList).then(($cardList) => {
-            expect($cardList.find('.q-card').length).to.equal(expectedLength);
-            cy.url().then((currentUrl) => expect(currentUrl).to.contain(url));
-        });
+    const checkTableLength = (expectedLength) => {
+        cy.get(vnTableRow).find('tr').should('have.length', expectedLength)
     };
 });

From f4975d1f157d908edf2b73aa6fe8cde972c28212 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 1 Jul 2024 09:00:45 +0200
Subject: [PATCH 07/15] fix: ticketFilter adapt VnInputDate

---
 src/components/common/VnInputDate.vue | 25 ++++++++++++++++++-------
 src/pages/Ticket/TicketFilter.vue     | 15 +--------------
 src/pages/Ticket/TicketList.vue       |  4 ++--
 3 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index f2c6cbe60..60fd67c0f 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { onMounted, watch, computed, ref } from 'vue';
 import { date } from 'quasar';
 import { useI18n } from 'vue-i18n';
 
@@ -19,12 +19,18 @@ const $props = defineProps({
     },
 });
 
-const emit = defineEmits(['update:modelValue']);
 const { t } = useI18n();
 const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
 
+const dateFormat = 'DD/MM/YYYY';
 const isPopupOpen = ref(false);
 const hover = ref(false);
+const mask = ref();
+
+onMounted(() => {
+    // fix quasar bug
+    mask.value = '##/##/####';
+});
 
 const styleAttrs = computed(() => {
     return $props.isOutlined
@@ -36,7 +42,6 @@ const styleAttrs = computed(() => {
         : {};
 });
 
-const dateFormat = 'DD/MM/YYYY';
 const formattedDate = computed({
     get() {
         if (!model.value) return model.value;
@@ -50,7 +55,7 @@ const formattedDate = computed({
                 if (value.at(2) == '/') value = value.split('/').reverse().join('/');
                 value = date.formatDate(
                     new Date(value).toISOString(),
-                    'YYYY-MM-DDTHH:mm:ss.SSSZ',
+                    'YYYY-MM-DDTHH:mm:ss.SSSZ'
                 );
             }
             let ymd = value.split('-').map((e) => parseInt(e));
@@ -63,7 +68,7 @@ const formattedDate = computed({
                     orgDate.getHours(),
                     orgDate.getMinutes(),
                     orgDate.getSeconds(),
-                    orgDate.getMilliseconds(),
+                    orgDate.getMilliseconds()
                 );
             }
         }
@@ -72,7 +77,13 @@ const formattedDate = computed({
 });
 
 const popupDate = computed(() =>
-    model.value ? date.formatDate(new Date(model.value), 'YYYY/MM/DD') : model.value,
+    model.value ? date.formatDate(new Date(model.value), 'YYYY/MM/DD') : model.value
+);
+
+watch(
+    () => model.value,
+    (val) => (formattedDate.value = val),
+    { immediate: true }
 );
 </script>
 
@@ -81,7 +92,7 @@ const popupDate = computed(() =>
         <QInput
             v-model="formattedDate"
             class="vn-input-date"
-            mask="##/##/####"
+            :mask="mask"
             placeholder="dd/mm/aaaa"
             v-bind="{ ...$attrs, ...styleAttrs }"
             :class="{ required: $attrs.required }"
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index 7b74117bb..63ac48393 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -17,15 +17,6 @@ const props = defineProps({
     },
 });
 
-const from = Date.vnNew();
-const to = Date.vnNew();
-to.setDate(to.getDate() + 1);
-
-const defaultParams = {
-    from: toDateString(from),
-    to: toDateString(to),
-};
-
 const workers = ref();
 const provinces = ref();
 const states = ref();
@@ -44,11 +35,7 @@ const warehouses = ref();
         @on-fetch="(data) => (workers = data)"
         auto-load
     />
-    <VnFilterPanel
-        :data-key="props.dataKey"
-        :params="defaultParams"
-        :search-button="true"
-    >
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index c065cf6bf..16d7aac5d 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -26,8 +26,8 @@ const to = Date.vnNew();
 to.setDate(to.getDate() + 1);
 
 const userParams = {
-    from: toDateString(from),
-    to: toDateString(to),
+    from: from.toISOString(),
+    to: to.toISOString(),
 };
 
 function navigate(id) {

From 9b7ffbf3d2d4998c3e7a6ad5deaf23ae7e6cdf13 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 1 Jul 2024 11:48:27 +0200
Subject: [PATCH 08/15] fix: fix pagination issue & skip url query param

---
 src/components/ui/VnFilterPanel.vue | 11 +++++++----
 src/components/ui/VnSearchbar.vue   |  1 +
 src/composables/useArrayData.js     | 20 +++++++++-----------
 src/stores/useArrayDataStore.js     |  1 +
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 9eff3d322..adfff37e7 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -10,7 +10,7 @@ const { t } = useI18n();
 const $props = defineProps({
     modelValue: {
         type: Object,
-        default: () => {}
+        default: () => {},
     },
     dataKey: {
         type: String,
@@ -67,9 +67,9 @@ const arrayData = useArrayData($props.dataKey, {
 });
 const route = useRoute();
 const store = arrayData.store;
-const userParams = ref({})
+const userParams = ref({});
 onMounted(() => {
-    userParams.value = $props.modelValue ?? {}
+    userParams.value = $props.modelValue ?? {};
     emit('init', { params: userParams.value });
 });
 
@@ -102,6 +102,7 @@ async function search(evt) {
     store.userParamsChanged = true;
     store.filter.skip = 0;
     store.skip = 0;
+    store.page = 1;
     const { params: newParams } = await arrayData.addFilter({ params: userParams.value });
     userParams.value = newParams;
 
@@ -114,7 +115,8 @@ async function search(evt) {
 async function reload() {
     isLoading.value = true;
     const params = Object.values(userParams.value).filter((param) => param);
-
+    store.skip = 0;
+    store.page = 1;
     await arrayData.fetch({ append: false });
     if (!$props.showAll && !params.length) store.data = [];
     isLoading.value = false;
@@ -126,6 +128,7 @@ async function clearFilters() {
     store.userParamsChanged = true;
     store.filter.skip = 0;
     store.skip = 0;
+    store.page = 1;
     // Filtrar los params no removibles
     const removableFilters = Object.keys(userParams.value).filter((param) =>
         $props.unremovableParams.includes(param)
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 4e048e238..eab04f04c 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -104,6 +104,7 @@ async function search() {
         ([key, value]) => value && (props.staticParams || []).includes(key)
     );
     store.skip = 0;
+    store.page = 1;
 
     if (props.makeFetch)
         await arrayData.applyFilter({
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index f6f476f87..b40699bbb 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -1,4 +1,4 @@
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, computed } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import axios from 'axios';
 import { useArrayDataStore } from 'stores/useArrayDataStore';
@@ -16,8 +16,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
     const router = useRouter();
     let canceller = null;
 
-    const page = ref(1);
-
     onMounted(() => {
         setOptions();
         store.skip = 0;
@@ -87,13 +85,13 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         }
 
         Object.assign(filter, store.userFilter, exprFilter);
-        Object.assign(store.filter, { ...filter, skip: store.skip });
-        const params = {
-            filter: JSON.stringify(store.filter),
-        };
+        Object.assign(store.filter, filter);
+        const params = { filter: store.filter };
 
         Object.assign(params, userParams);
+        params.filter.skip = store.skip;
 
+        params.filter = JSON.stringify(params.filter);
         store.currentFilter = params;
         store.isLoading = true;
         const response = await axios.get(store.url, {
@@ -154,8 +152,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         store.userParams = userParams;
         store.skip = 0;
         store.filter.skip = 0;
-        page.value = 1;
-
+        store.page = 1;
         await fetch({ append: false });
         return { filter, params };
     }
@@ -187,10 +184,11 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
     async function loadMore() {
         if (!store.hasMoreData) return;
 
-        store.skip = store.limit * page.value;
-        page.value += 1;
+        store.skip = store.limit * store.page;
+        store.page += 1;
 
         await fetch({ append: true });
+        updateStateParams();
     }
 
     async function refresh() {
diff --git a/src/stores/useArrayDataStore.js b/src/stores/useArrayDataStore.js
index ebe32f8d0..2debdad7f 100644
--- a/src/stores/useArrayDataStore.js
+++ b/src/stores/useArrayDataStore.js
@@ -23,6 +23,7 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
             exprBuilder: null,
             searchUrl: 'params',
             navigate: null,
+            page: 1,
         };
     }
 

From 150c446d706383ea9f3e5df91a3592c011e0b4b8 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 1 Jul 2024 14:46:28 +0200
Subject: [PATCH 09/15] fix: refs #7652 update url

---
 src/components/common/VnCard.vue     | 11 ++++++++++-
 src/components/ui/CardDescriptor.vue | 27 +++++++++++++++++++++------
 src/composables/useArrayData.js      | 16 ++++++++--------
 3 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index 8517525df..8be7b9221 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { onBeforeMount, computed } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, onBeforeRouteUpdate } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
 import useCardSize from 'src/composables/useCardSize';
@@ -41,6 +41,15 @@ onBeforeMount(async () => {
     if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
     await arrayData.fetch({ append: false });
 });
+
+if (props.baseUrl) {
+    onBeforeRouteUpdate(async (to, from) => {
+        if (to.params.id !== from.params.id) {
+            arrayData.store.url = `${props.baseUrl}/${to.params.id}`;
+            await arrayData.fetch({ append: false });
+        }
+    });
+}
 </script>
 <template>
     <QDrawer
diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 8bb2a603e..f3860ea46 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -46,7 +46,7 @@ let arrayData;
 let store;
 let entity;
 const isLoading = ref(false);
-
+const isSameDataKey = computed(() => $props.dataKey === route.meta.moduleName);
 defineExpose({ getData });
 
 onBeforeMount(async () => {
@@ -58,10 +58,12 @@ onBeforeMount(async () => {
     store = arrayData.store;
     entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
     // It enables to load data only once if the module is the same as the dataKey
-    if ($props.dataKey !== route.meta.moduleName || !route.params.id) await getData();
+    if (!isSameDataKey.value || !route.params.id) await getData();
     watch(
         () => [$props.url, $props.filter],
-        async () => await getData()
+        async () => {
+            if (!isSameDataKey.value) await getData();
+        }
     );
 });
 
@@ -77,6 +79,19 @@ async function getData() {
         isLoading.value = false;
     }
 }
+
+function getValueFromPath(path) {
+    if (!path) return;
+    const keys = path.split('.');
+    let current = entity.value;
+
+    for (let i = 0; i < keys.length; i++) {
+        if (current[keys[i]] === undefined) return undefined;
+        else current = current[keys[i]];
+    }
+    return current;
+}
+
 const emit = defineEmits(['onFetch']);
 </script>
 
@@ -139,8 +154,8 @@ const emit = defineEmits(['onFetch']);
                 <QList dense>
                     <QItemLabel header class="ellipsis text-h5" :lines="1">
                         <div class="title">
-                            <span v-if="$props.title" :title="$props.title">
-                                {{ entity[title] ?? $props.title }}
+                            <span v-if="$props.title" :title="getValueFromPath(title)">
+                                {{ getValueFromPath(title) ?? $props.title }}
                             </span>
                             <slot v-else name="description" :entity="entity">
                                 <span :title="entity.name">
@@ -151,7 +166,7 @@ const emit = defineEmits(['onFetch']);
                     </QItemLabel>
                     <QItem dense>
                         <QItemLabel class="subtitle" caption>
-                            #{{ $props.subtitle ?? entity.id }}
+                            #{{ getValueFromPath(subtitle) ?? entity.id }}
                         </QItemLabel>
                     </QItem>
                 </QList>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index b40699bbb..f8412f33a 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -198,6 +198,13 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
     function updateStateParams() {
         const newUrl = { path: route.path, query: { ...(route.query ?? {}) } };
         newUrl.query[store.searchUrl] = JSON.stringify(store.currentFilter);
+        const { matched: matches } = router.currentRoute.value;
+        const { path } = matches.at(-1);
+
+        const to =
+            store?.data?.length === 1
+                ? path.replace(/\/(list|:id)|-list/, `/${store.data[0].id}`)
+                : path.replace(/:id.*/, '');
 
         if (store.navigate) {
             const { customRouteRedirectName, searchText } = store.navigate;
@@ -206,13 +213,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
                     name: customRouteRedirectName,
                     params: { id: searchText },
                 });
-            const { matched: matches } = router.currentRoute.value;
-            const { path } = matches.at(-1);
-
-            const to =
-                store?.data?.length === 1
-                    ? path.replace(/\/(list|:id)|-list/, `/${store.data[0].id}`)
-                    : path.replace(/:id.*/, '');
 
             if (route.path != to) {
                 const pushUrl = { path: to };
@@ -223,7 +223,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
             }
         }
 
-        router.replace(newUrl);
+        if (store.currentFilter?.search) router.replace({ ...newUrl, path: to });
     }
 
     const totalRows = computed(() => (store.data && store.data.length) || 0);

From 269fe18a9a8b94955b386fd2e42bf9d3fed1b546 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 1 Jul 2024 14:47:04 +0200
Subject: [PATCH 10/15] refactor: refs #7652 Update ClaimDescriptor and
 ParkingDescriptor

---
 src/pages/Claim/Card/ClaimDescriptor.vue     |  3 +--
 src/pages/Parking/Card/ParkingDescriptor.vue | 16 +++++-------
 src/pages/Parking/Card/ParkingSummary.vue    | 26 +++++++-------------
 3 files changed, 16 insertions(+), 29 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index 5336c4427..ecf16f4c6 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -56,8 +56,7 @@ onMounted(async () => {
         :url="`Claims/${entityId}`"
         :filter="filter"
         module="Claim"
-        :title="data.title"
-        :subtitle="data.subtitle"
+        title="client.name"
         @on-fetch="setData"
         data-key="Claim"
     >
diff --git a/src/pages/Parking/Card/ParkingDescriptor.vue b/src/pages/Parking/Card/ParkingDescriptor.vue
index b5c8820ed..b57bfb0cc 100644
--- a/src/pages/Parking/Card/ParkingDescriptor.vue
+++ b/src/pages/Parking/Card/ParkingDescriptor.vue
@@ -2,7 +2,6 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import { useArrayData } from 'src/composables/useArrayData';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'components/ui/VnLv.vue';
 
@@ -17,8 +16,7 @@ const props = defineProps({
 const { t } = useI18n();
 const route = useRoute();
 const entityId = computed(() => props.id || route.params.id);
-const { store } = useArrayData('Parking');
-const parking = computed(() => store.data);
+
 const filter = {
     fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
     include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
@@ -29,15 +27,13 @@ const filter = {
         module="Parking"
         data-key="Parking"
         :url="`Parkings/${entityId}`"
-        :title="parking?.code"
-        :subtitle="parking?.id"
+        title="code"
         :filter="filter"
-        @on-fetch="(data) => (parking = data)"
     >
-        <template #body>
-            <VnLv :label="t('globals.code')" :value="parking.code" />
-            <VnLv :label="t('parking.pickingOrder')" :value="parking.pickingOrder" />
-            <VnLv :label="t('parking.sector')" :value="parking.sector?.description" />
+        <template #body="{ entity }">
+            <VnLv :label="t('globals.code')" :value="entity.code" />
+            <VnLv :label="t('parking.pickingOrder')" :value="entity.pickingOrder" />
+            <VnLv :label="t('parking.sector')" :value="entity.sector?.description" />
         </template>
     </CardDescriptor>
 </template>
diff --git a/src/pages/Parking/Card/ParkingSummary.vue b/src/pages/Parking/Card/ParkingSummary.vue
index 7406856b9..95620ebfd 100644
--- a/src/pages/Parking/Card/ParkingSummary.vue
+++ b/src/pages/Parking/Card/ParkingSummary.vue
@@ -1,10 +1,9 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'components/ui/VnLv.vue';
-import { useArrayData } from 'src/composables/useArrayData';
 
 const $props = defineProps({
     id: {
@@ -15,9 +14,7 @@ const $props = defineProps({
 const router = useRoute();
 const { t } = useI18n();
 const entityId = computed(() => $props.id || router.params.id);
-const { store } = useArrayData('Parking');
 
-const parking = ref(store.data);
 const filter = {
     fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
     include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
@@ -26,14 +23,9 @@ const filter = {
 
 <template>
     <div class="q-pa-md">
-        <CardSummary
-            :url="`Parkings/${entityId}`"
-            :filter="filter"
-            @on-fetch="(data) => (parking = data)"
-            data-key="Parking"
-        >
-            <template #header>{{ parking.code }}</template>
-            <template #body>
+        <CardSummary :url="`Parkings/${entityId}`" data-key="Parking" :filter="filter">
+            <template #header="{ entity }">{{ entity.code }}</template>
+            <template #body="{ entity }">
                 <QCard class="vn-one">
                     <QCardSection class="q-pa-none">
                         <a
@@ -44,17 +36,17 @@ const filter = {
                             <QIcon name="open_in_new" />
                         </a>
                     </QCardSection>
-                    <VnLv :label="t('globals.code')" :value="parking.code" />
+                    <VnLv :label="t('globals.code')" :value="entity.code" />
                     <VnLv
                         :label="t('parking.pickingOrder')"
-                        :value="parking.pickingOrder"
+                        :value="entity.pickingOrder"
                     />
                     <VnLv
                         :label="t('parking.sector')"
-                        :value="parking.sector?.description"
+                        :value="entity.sector?.description"
                     />
-                    <VnLv :label="t('parking.row')" :value="parking.row" />
-                    <VnLv :label="t('parking.column')" :value="parking.column" />
+                    <VnLv :label="t('parking.row')" :value="entity.row" />
+                    <VnLv :label="t('parking.column')" :value="entity.column" />
                 </QCard>
             </template>
         </CardSummary>

From 93d7aee127873d7e43e4ee13234ee7b24a1c3f40 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 1 Jul 2024 17:25:20 +0200
Subject: [PATCH 11/15] chore: refs #7652 fix redirection

---
 src/components/common/VnCard.vue     |  2 +-
 src/components/ui/CardDescriptor.vue |  2 +-
 src/composables/useArrayData.js      | 16 ++++++++--------
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index 8be7b9221..c81bcd8e2 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -46,7 +46,7 @@ if (props.baseUrl) {
     onBeforeRouteUpdate(async (to, from) => {
         if (to.params.id !== from.params.id) {
             arrayData.store.url = `${props.baseUrl}/${to.params.id}`;
-            await arrayData.fetch({ append: false });
+            await arrayData.fetch({ append: false, updateRouter: false });
         }
     });
 }
diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index f3860ea46..3f1f0a00c 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -82,7 +82,7 @@ async function getData() {
 
 function getValueFromPath(path) {
     if (!path) return;
-    const keys = path.split('.');
+    const keys = path.toString().split('.');
     let current = entity.value;
 
     for (let i = 0; i < keys.length; i++) {
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index f8412f33a..b40699bbb 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -198,13 +198,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
     function updateStateParams() {
         const newUrl = { path: route.path, query: { ...(route.query ?? {}) } };
         newUrl.query[store.searchUrl] = JSON.stringify(store.currentFilter);
-        const { matched: matches } = router.currentRoute.value;
-        const { path } = matches.at(-1);
-
-        const to =
-            store?.data?.length === 1
-                ? path.replace(/\/(list|:id)|-list/, `/${store.data[0].id}`)
-                : path.replace(/:id.*/, '');
 
         if (store.navigate) {
             const { customRouteRedirectName, searchText } = store.navigate;
@@ -213,6 +206,13 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
                     name: customRouteRedirectName,
                     params: { id: searchText },
                 });
+            const { matched: matches } = router.currentRoute.value;
+            const { path } = matches.at(-1);
+
+            const to =
+                store?.data?.length === 1
+                    ? path.replace(/\/(list|:id)|-list/, `/${store.data[0].id}`)
+                    : path.replace(/:id.*/, '');
 
             if (route.path != to) {
                 const pushUrl = { path: to };
@@ -223,7 +223,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
             }
         }
 
-        if (store.currentFilter?.search) router.replace({ ...newUrl, path: to });
+        router.replace(newUrl);
     }
 
     const totalRows = computed(() => (store.data && store.data.length) || 0);

From cb5c33dcc9187ea8a275d3e27c17cdb0c93af397 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 2 Jul 2024 08:06:31 +0200
Subject: [PATCH 12/15] feat: rework VnInputTime and fix VnInputDate bugs

---
 src/components/VnTable/VnFilter.vue   |  12 ++
 src/components/common/VnInputDate.vue |  23 ++--
 src/components/common/VnInputTime.vue | 168 ++++++++++++--------------
 src/pages/Zone/Card/ZoneBasicData.vue |   2 +-
 4 files changed, 99 insertions(+), 106 deletions(-)

diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index 3d489cf73..9ce050fe9 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -7,6 +7,7 @@ import { useArrayData } from 'composables/useArrayData';
 import VnSelect from 'components/common/VnSelect.vue';
 import VnInput from 'components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
+import VnInputTime from 'components/common/VnInputTime.vue';
 import VnTableColumn from 'components/VnTable/VnColumn.vue';
 
 const $props = defineProps({
@@ -75,6 +76,17 @@ const components = {
         },
         forceAttrs,
     },
+    time: {
+        component: markRaw(VnInputTime),
+        event: updateEvent,
+        attrs: {
+            ...defaultAttrs,
+            disable: !$props.isEditable,
+        },
+        forceAttrs: {
+            label: $props.showLabel && $props.column.label,
+        },
+    },
     checkbox: {
         component: markRaw(QCheckbox),
         event: updateEvent,
diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index 60fd67c0f..26df2e3ba 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -5,10 +5,6 @@ import { useI18n } from 'vue-i18n';
 
 const model = defineModel({ type: String });
 const $props = defineProps({
-    readonly: {
-        type: Boolean,
-        default: false,
-    },
     isOutlined: {
         type: Boolean,
         default: false,
@@ -48,6 +44,7 @@ const formattedDate = computed({
         return date.formatDate(new Date(model.value), dateFormat);
     },
     set(value) {
+        if (value == model.value) return;
         let newDate;
         if (value) {
             // parse input
@@ -97,12 +94,18 @@ watch(
             v-bind="{ ...$attrs, ...styleAttrs }"
             :class="{ required: $attrs.required }"
             :rules="$attrs.required ? [requiredFieldRule] : null"
+            :clearable="false"
         >
             <template #append>
                 <QIcon
                     name="close"
                     size="xs"
-                    v-if="hover && model && !readonly"
+                    v-if="
+                        ($attrs.clearable != undefined || $attrs.clearable) &&
+                        hover &&
+                        model &&
+                        !$attrs.disable
+                    "
                     @click="
                         model = null;
                         isPopupOpen = false;
@@ -132,13 +135,3 @@ watch(
         </QInput>
     </div>
 </template>
-
-<style lang="scss">
-.vn-input-date.q-field--standard.q-field--readonly .q-field__control:before {
-    border-bottom-style: solid;
-}
-
-.vn-input-date.q-field--outlined.q-field--readonly .q-field__control:before {
-    border-style: solid;
-}
-</style>
diff --git a/src/components/common/VnInputTime.vue b/src/components/common/VnInputTime.vue
index 5c84951cb..29d10cac2 100644
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@@ -1,14 +1,11 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { watch, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import isValidDate from 'filters/isValidDate';
+import { date } from 'quasar';
 
+const model = defineModel({ type: String });
 const props = defineProps({
-    modelValue: {
-        type: String,
-        default: null,
-    },
-    readonly: {
+    timeOnly: {
         type: Boolean,
         default: false,
     },
@@ -17,44 +14,33 @@ const props = defineProps({
         default: false,
     },
 });
-const emit = defineEmits(['update:modelValue']);
 const { t } = useI18n();
 const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
 
-const value = computed({
+const dateFormat = 'HH:mm';
+const isPopupOpen = ref();
+const hover = ref();
+const formattedTime = computed({
     get() {
-        return props.modelValue;
+        if (!model.value || model.value?.length <= 5) return model.value;
+        return dateToTime(model.value);
     },
     set(value) {
-        const [hours, minutes] = value.split(':');
-        const date = new Date(props.modelValue);
-        date.setHours(Number.parseInt(hours) || 0, Number.parseInt(minutes) || 0, 0, 0);
-        emit('update:modelValue', value ? date.toISOString() : null);
+        if (value == model.value) return;
+        let time = value;
+        if (time) {
+            if (time?.length > 5) time = dateToTime(time);
+            if (!props.timeOnly) {
+                const hours = time.split(':');
+                const date = new Date();
+                date.setHours(hours[0], hours[1], 0);
+                time = date.toISOString();
+            }
+        }
+        model.value = time;
     },
 });
 
-const isPopupOpen = ref(false);
-const onDateUpdate = (date) => {
-    internalValue.value = date;
-};
-
-const save = () => {
-    value.value = internalValue.value;
-};
-const formatTime = (dateString) => {
-    if (!dateString || !isValidDate(dateString)) {
-        return '';
-    }
-
-    const date = new Date(dateString || '');
-    return date.toLocaleTimeString([], {
-        hour: '2-digit',
-        minute: '2-digit',
-    });
-};
-
-const internalValue = ref(formatTime(value));
-
 const styleAttrs = computed(() => {
     return props.isOutlined
         ? {
@@ -64,64 +50,66 @@ const styleAttrs = computed(() => {
           }
         : {};
 });
+
+function dateToTime(newDate) {
+    return date.formatDate(new Date(newDate), dateFormat);
+}
+
+watch(
+    () => model.value,
+    (val) => (formattedTime.value = val),
+    { immediate: true }
+);
 </script>
 
 <template>
-    <QInput
-        class="vn-input-time"
-        readonly
-        :model-value="formatTime(value)"
-        v-bind="{ ...$attrs, ...styleAttrs }"
-        :class="{ required: $attrs.required }"
-        :rules="$attrs.required ? [requiredFieldRule] : null"
-        @click="isPopupOpen = true"
-    >
-        <template #append>
-            <QIcon name="Schedule" class="cursor-pointer">
-                <QPopupProxy
-                    v-model="isPopupOpen"
-                    cover
-                    transition-show="scale"
-                    transition-hide="scale"
-                    :no-parent-event="props.readonly"
-                >
-                    <QTime
-                        :format24h="false"
-                        :model-value="formatTime(value)"
-                        @update:model-value="onDateUpdate"
-                    >
-                        <div class="row items-center justify-end q-gutter-sm">
-                            <QBtn
-                                :label="t('Cancel')"
-                                color="primary"
-                                flat
-                                v-close-popup
-                            />
-                            <QBtn
-                                label="Ok"
-                                color="primary"
-                                flat
-                                @click="save"
-                                v-close-popup
-                            />
-                        </div>
-                    </QTime>
-                </QPopupProxy>
-            </QIcon>
-        </template>
-    </QInput>
+    <div @mouseover="hover = true" @mouseleave="hover = false">
+        <QInput
+            class="vn-input-time"
+            mask="##:##"
+            placeholder="--:--"
+            v-model="formattedTime"
+            v-bind="{ ...$attrs, ...styleAttrs }"
+            :class="{ required: $attrs.required }"
+            style="min-width: 100px"
+            :rules="$attrs.required ? [requiredFieldRule] : null"
+        >
+            <template #append>
+                <QIcon
+                    name="close"
+                    size="xs"
+                    v-if="
+                        ($attrs.clearable != undefined || $attrs.clearable) &&
+                        hover &&
+                        model &&
+                        !$attrs.disable
+                    "
+                    @click="
+                        model = null;
+                        isPopupOpen = false;
+                    "
+                />
+                <QIcon name="Schedule" class="cursor-pointer" />
+            </template>
+            <QMenu
+                transition-show="scale"
+                transition-hide="scale"
+                v-model="isPopupOpen"
+                anchor="bottom left"
+                self="top start"
+                :no-focus="true"
+            >
+                <QTime
+                    :format24h="false"
+                    v-model="formattedTime"
+                    mask="HH:mm"
+                    landscape
+                    now-btn
+                />
+            </QMenu>
+        </QInput>
+    </div>
 </template>
-
-<style lang="scss">
-.vn-input-time.q-field--standard.q-field--readonly .q-field__control:before {
-    border-bottom-style: solid;
-}
-
-.vn-input-time.q-field--outlined.q-field--readonly .q-field__control:before {
-    border-style: solid;
-}
-</style>
-
 <i18n>
 es:
     Cancel: Cancelar
diff --git a/src/pages/Zone/Card/ZoneBasicData.vue b/src/pages/Zone/Card/ZoneBasicData.vue
index 7a2c505fa..9f2195766 100644
--- a/src/pages/Zone/Card/ZoneBasicData.vue
+++ b/src/pages/Zone/Card/ZoneBasicData.vue
@@ -74,7 +74,7 @@ const agencyOptions = ref([]);
                     type="number"
                     min="0"
                 />
-                <VnInputTime v-model="data.hour" :label="t('Closing')" clearable />
+                <VnInputTime v-model="data.hour" :label="t('Closing')" />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">

From 739be5fe7c1379c6be3a1138353242160d94baec Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 2 Jul 2024 13:49:29 +0200
Subject: [PATCH 13/15] fix(VnInputDate & VnInputTime): fix clearable

---
 src/components/common/VnInputDate.vue   | 10 +++-------
 src/components/common/VnInputTime.vue   | 23 ++++++++++++-----------
 src/pages/Item/Card/ItemLastEntries.vue |  8 +-------
 src/pages/Item/ItemRequestFilter.vue    |  2 --
 src/pages/Monitor/SalesClientsTable.vue |  2 --
 5 files changed, 16 insertions(+), 29 deletions(-)

diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index 26df2e3ba..a88540ebf 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -9,18 +9,14 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
-    emitDateFormat: {
-        type: Boolean,
-        default: false,
-    },
 });
 
 const { t } = useI18n();
 const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
 
 const dateFormat = 'DD/MM/YYYY';
-const isPopupOpen = ref(false);
-const hover = ref(false);
+const isPopupOpen = ref();
+const hover = ref();
 const mask = ref();
 
 onMounted(() => {
@@ -101,7 +97,7 @@ watch(
                     name="close"
                     size="xs"
                     v-if="
-                        ($attrs.clearable != undefined || $attrs.clearable) &&
+                        ($attrs.clearable == undefined || $attrs.clearable) &&
                         hover &&
                         model &&
                         !$attrs.disable
diff --git a/src/components/common/VnInputTime.vue b/src/components/common/VnInputTime.vue
index 29d10cac2..08a99ec56 100644
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@@ -20,6 +20,17 @@ const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
 const dateFormat = 'HH:mm';
 const isPopupOpen = ref();
 const hover = ref();
+
+const styleAttrs = computed(() => {
+    return props.isOutlined
+        ? {
+              dense: true,
+              outlined: true,
+              rounded: true,
+          }
+        : {};
+});
+
 const formattedTime = computed({
     get() {
         if (!model.value || model.value?.length <= 5) return model.value;
@@ -41,16 +52,6 @@ const formattedTime = computed({
     },
 });
 
-const styleAttrs = computed(() => {
-    return props.isOutlined
-        ? {
-              dense: true,
-              outlined: true,
-              rounded: true,
-          }
-        : {};
-});
-
 function dateToTime(newDate) {
     return date.formatDate(new Date(newDate), dateFormat);
 }
@@ -79,7 +80,7 @@ watch(
                     name="close"
                     size="xs"
                     v-if="
-                        ($attrs.clearable != undefined || $attrs.clearable) &&
+                        ($attrs.clearable == undefined || $attrs.clearable) &&
                         hover &&
                         model &&
                         !$attrs.disable
diff --git a/src/pages/Item/Card/ItemLastEntries.vue b/src/pages/Item/Card/ItemLastEntries.vue
index 9071cc6eb..a3ae99da6 100644
--- a/src/pages/Item/Card/ItemLastEntries.vue
+++ b/src/pages/Item/Card/ItemLastEntries.vue
@@ -200,16 +200,10 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             <VnInputDate
                 :label="t('lastEntries.since')"
                 dense
-                emit-date-format
                 v-model="from"
                 class="q-mr-lg"
             />
-            <VnInputDate
-                :label="t('lastEntries.to')"
-                dense
-                emit-date-format
-                v-model="to"
-            />
+            <VnInputDate :label="t('lastEntries.to')" dense v-model="to" />
         </div>
         <QSpace />
         <div id="st-actions"></div>
diff --git a/src/pages/Item/ItemRequestFilter.vue b/src/pages/Item/ItemRequestFilter.vue
index 2c056acc6..2fbe849d1 100644
--- a/src/pages/Item/ItemRequestFilter.vue
+++ b/src/pages/Item/ItemRequestFilter.vue
@@ -192,7 +192,6 @@ const decrement = (paramsObj, key) => {
                             v-model="params.from"
                             @update:model-value="searchFn()"
                             is-outlined
-                            emit-date-format
                         />
                     </QItemSection>
                 </QItem>
@@ -203,7 +202,6 @@ const decrement = (paramsObj, key) => {
                             v-model="params.to"
                             @update:model-value="searchFn()"
                             is-outlined
-                            emit-date-format
                         />
                     </QItemSection>
                 </QItem>
diff --git a/src/pages/Monitor/SalesClientsTable.vue b/src/pages/Monitor/SalesClientsTable.vue
index 3f2389471..8008b1fda 100644
--- a/src/pages/Monitor/SalesClientsTable.vue
+++ b/src/pages/Monitor/SalesClientsTable.vue
@@ -169,7 +169,6 @@ const columns = computed(() => [
                         <VnInputDate
                             :label="t('salesClientsTable.from')"
                             dense
-                            emit-date-format
                             v-model="from"
                             class="q-mr-lg"
                             style="width: 150px"
@@ -177,7 +176,6 @@ const columns = computed(() => [
                         <VnInputDate
                             :label="t('salesClientsTable.to')"
                             dense
-                            emit-date-format
                             v-model="to"
                             style="width: 150px"
                         />

From 249aedeaf54e07d6b5f9d6154a78b286da4ae860 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 2 Jul 2024 13:51:33 +0200
Subject: [PATCH 14/15] remove unnecessary translation

---
 src/components/common/VnInputTime.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/common/VnInputTime.vue b/src/components/common/VnInputTime.vue
index 08a99ec56..3d482933a 100644
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@@ -111,7 +111,3 @@ watch(
         </QInput>
     </div>
 </template>
-<i18n>
-es:
-    Cancel: Cancelar
-</i18n>

From 363abb899f955465724d457567350a572456157c Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Wed, 3 Jul 2024 08:20:16 +0200
Subject: [PATCH 15/15] fix: refs #7543 fix changed descriptors

---
 src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue | 13 +------------
 src/pages/Ticket/Card/TicketDescriptor.vue       |  4 ----
 2 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
index e8428dca1..68dc5be4b 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
@@ -9,7 +9,6 @@ import { useRole } from 'src/composables/useRole';
 import { downloadFile } from 'src/composables/downloadFile';
 import { useArrayData } from 'src/composables/useArrayData';
 import { usePrintService } from 'composables/usePrintService';
-import useCardDescription from 'src/composables/useCardDescription';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import FetchData from 'src/components/FetchData.vue';
@@ -20,12 +19,7 @@ import { useCapitalize } from 'src/composables/useCapitalize';
 import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
 import InvoiceInToBook from '../InvoiceInToBook.vue';
 
-const $props = defineProps({
-    id: {
-        type: Number,
-        default: null,
-    },
-});
+const $props = defineProps({ id: { type: Number, default: null } });
 
 const { push, currentRoute } = useRouter();
 
@@ -258,9 +252,6 @@ const createInvoiceInCorrection = async () => {
     );
     push({ path: `/invoice-in/${correctingId}/summary` });
 };
-
-const data = ref(useCardDescription());
-const setData = (entity) => (data.value = useCardDescription(entity.name, entity.id));
 </script>
 <template>
     <FetchData
@@ -292,8 +283,6 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
         :url="`InvoiceIns/${entityId}`"
         :filter="filter"
         title="supplierRef"
-        @on-fetch="setData"
-        :summary="$attrs"
     >
         <template #menu="{ entity }">
             <InvoiceInToBook>
diff --git a/src/pages/Ticket/Card/TicketDescriptor.vue b/src/pages/Ticket/Card/TicketDescriptor.vue
index 46dbf04f9..b753d0b4c 100644
--- a/src/pages/Ticket/Card/TicketDescriptor.vue
+++ b/src/pages/Ticket/Card/TicketDescriptor.vue
@@ -70,8 +70,6 @@ const filter = {
 };
 
 const data = ref(useCardDescription());
-const setData = (entity) =>
-    (data.value = useCardDescription(entity.client?.name, entity.id));
 </script>
 
 <template>
@@ -82,8 +80,6 @@ const setData = (entity) =>
         :title="data.title"
         :subtitle="data.subtitle"
         data-key="ticketData"
-        @on-fetch="setData"
-        :summary="$attrs"
     >
         <template #menu="{ entity }">
             <TicketDescriptorMenu :ticket="entity" />