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 1/6] 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 52d6eeb9762753ea4249b91f6b67c314c077781a Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 28 Jun 2024 16:22:37 +0200
Subject: [PATCH 2/6] 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 3/6] 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 cb5c33dcc9187ea8a275d3e27c17cdb0c93af397 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 2 Jul 2024 08:06:31 +0200
Subject: [PATCH 4/6] 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 5/6] 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 6/6] 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>