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);
-        }
+        },
     );
 }
 

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,

src/components/common/VnInputDate.vue

@@ -1,84 +1,31 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { onMounted, watch, 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,
-    },
-    readonly: {
-        type: Boolean,
-        default: false,
-    },
+const model = defineModel({ type: String });
+const $props = defineProps({
     isOutlined: {
         type: Boolean,
         default: false,
     },
-    emitDateFormat: {
-        type: Boolean,
-        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 dateFormat = 'DD/MM/YYYY';
+const isPopupOpen = ref();
+const hover = ref();
+const mask = ref();
 
-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)
-        );
-    },
+onMounted(() => {
+    // fix quasar bug
+    mask.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 styleAttrs = computed(() => {
-    return props.isOutlined
+    return $props.isOutlined
         ? {
               dense: true,
               outlined: true,
@@ -86,52 +33,101 @@ const styleAttrs = computed(() => {
           }
         : {};
 });
+
+const formattedDate = computed({
+    get() {
+        if (!model.value) return model.value;
+        return date.formatDate(new Date(model.value), dateFormat);
+    },
+    set(value) {
+        if (value == model.value) return;
+        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
+);
+
+watch(
+    () => model.value,
+    (val) => (formattedDate.value = val),
+    { immediate: true }
+);
 </script>
 
 <template>
     <div @mouseover="hover = true" @mouseleave="hover = false">
         <QInput
+            v-model="formattedDate"
             class="vn-input-date"
-            readonly
-            :model-value="displayDate(value)"
+            :mask="mask"
+            placeholder="dd/mm/aaaa"
             v-bind="{ ...$attrs, ...styleAttrs }"
             :class="{ required: $attrs.required }"
             :rules="$attrs.required ? [requiredFieldRule] : null"
-            @click="isPopupOpen = true"
+            :clearable="false"
         >
             <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="
+                        ($attrs.clearable == undefined || $attrs.clearable) &&
+                        hover &&
+                        model &&
+                        !$attrs.disable
+                    "
+                    @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>
-
-<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>

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,43 +14,12 @@ const props = defineProps({
         default: false,
     },
 });
-const emit = defineEmits(['update:modelValue']);
 const { t } = useI18n();
 const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
 
-const value = computed({
-    get() {
-        return props.modelValue;
-    },
-    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);
-    },
-});
-
-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 dateFormat = 'HH:mm';
+const isPopupOpen = ref();
+const hover = ref();
 
 const styleAttrs = computed(() => {
     return props.isOutlined
@@ -64,65 +30,84 @@ const styleAttrs = computed(() => {
           }
         : {};
 });
+
+const formattedTime = computed({
+    get() {
+        if (!model.value || model.value?.length <= 5) return model.value;
+        return dateToTime(model.value);
+    },
+    set(value) {
+        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;
+    },
+});
+
+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
-</i18n>

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>

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>

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"
                         />

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>

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) {

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">