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 01/11] 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 02/11] 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 52d6eeb9762753ea4249b91f6b67c314c077781a Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 28 Jun 2024 16:22:37 +0200
Subject: [PATCH 03/11] 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 04/11] 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 05/11] 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 06/11] 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 07/11] 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 08/11] 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 09/11] 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 10/11] 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 11/11] 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>