From 23670debd113401d2cecd5d5fc27a8073bbb0828 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 12 Mar 2025 15:34:30 +0100
Subject: [PATCH] feat: add VnInputDateTime component and enhance date handling
 functions

---
 src/boot/vnDate.js                            | 24 ++++++
 src/components/common/VnInputDateTime.vue     | 83 +++++++++++++++++++
 .../Ticket/Negative/TicketLackFilter.vue      | 33 ++------
 src/pages/Ticket/Negative/TicketLackList.vue  | 19 +++--
 src/pages/Ticket/locale/en.yml                |  1 +
 src/pages/Ticket/locale/es.yml                |  6 +-
 6 files changed, 130 insertions(+), 36 deletions(-)
 create mode 100644 src/components/common/VnInputDateTime.vue

diff --git a/src/boot/vnDate.js b/src/boot/vnDate.js
index 33d5ac27f..0c6417fe2 100644
--- a/src/boot/vnDate.js
+++ b/src/boot/vnDate.js
@@ -1,4 +1,6 @@
 import { boot } from 'quasar/wrappers';
+import { date as quasarDate } from 'quasar';
+const { formatDate } = quasarDate;
 
 export default boot(() => {
     Date.vnUTC = () => {
@@ -25,4 +27,26 @@ export default boot(() => {
         const date = new Date(Date.vnUTC());
         return new Date(date.getFullYear(), date.getMonth() + 1, 0);
     };
+    Date.getCurrentDateTimeFormatted = (
+        endOfDay = true,
+        options = { iso: true, mask: 'DD-MM-YYYY HH:mm' },
+    ) => {
+        const date = Date.vnUTC();
+        if (endOfDay) {
+            date.setHours(23, 59, 0);
+        }
+        if (options.iso) {
+            return date.toISOString();
+        }
+        return formatDate(date, options.mask);
+    };
+    Date.convertToISODateTime = (dateTimeStr) => {
+        // Convertir de formato "DD-MM-YYYY HH:mm" a ISO
+        const [datePart, timePart] = dateTimeStr.split(' ');
+        const [day, month, year] = datePart.split('-');
+        const [hours, minutes] = timePart.split(':');
+
+        const isoDate = new Date(year, month - 1, day, hours, minutes);
+        return isoDate.toISOString();
+    };
 });
diff --git a/src/components/common/VnInputDateTime.vue b/src/components/common/VnInputDateTime.vue
new file mode 100644
index 000000000..dea70a160
--- /dev/null
+++ b/src/components/common/VnInputDateTime.vue
@@ -0,0 +1,83 @@
+<script setup>
+import { onMounted, watch, computed, ref, useAttrs } from 'vue';
+import { date } from 'quasar';
+import VnDate from './VnDate.vue';
+import { useRequired } from 'src/composables/useRequired';
+import VnTime from './VnTime.vue';
+
+const $attrs = useAttrs();
+const model = defineModel({ type: [Date] });
+
+const $props = defineProps({
+    isOutlined: {
+        type: Boolean,
+        default: false,
+    },
+    showEvent: {
+        type: Boolean,
+        default: true,
+    },
+});
+const styleAttrs = computed(() => {
+    return $props.isOutlined
+        ? {
+              dense: true,
+              outlined: true,
+              rounded: true,
+          }
+        : {};
+});
+const mask = 'DD-MM-YYYY HH:mm';
+const selectedDate = computed({
+    get() {
+        if (!model.value) return new Date(model.value);
+        return date.formatDate(new Date(model.value), mask);
+    },
+    set(value) {
+        model.value = Date.convertToISODateTime(value);
+    },
+});
+</script>
+
+<template>
+    <div @mouseover="hover = true" @mouseleave="hover = false">
+        <QInput
+            ref="vnInputDateRef"
+            v-model="selectedDate"
+            class="vn-input-date"
+            placeholder="dd/mm/aaaa HH:mm"
+            v-bind="{ ...$attrs, ...styleAttrs }"
+            :class="{ required: isRequired }"
+            :rules="mixinRules"
+            :clearable="false"
+            @click="isPopupOpen = !isPopupOpen"
+            @keydown="isPopupOpen = false"
+            hide-bottom-space
+            :data-cy="$attrs.dataCy ?? $attrs.label + '_inputDate'"
+        >
+            <template #prepend>
+                <QIcon name="today" size="xs">
+                    <QPopupProxy cover transition-show="scale" transition-hide="scale">
+                        <VnDate
+                            :mask="mask"
+                            v-model="selectedDate"
+                        ></VnDate> </QPopupProxy
+                ></QIcon>
+            </template>
+            <template #append>
+                <QIcon name="access_time" size="xs">
+                    <QPopupProxy cover transition-show="scale" transition-hide="scale">
+                        <VnTime
+                            format24h
+                            :mask="mask"
+                            v-model="selectedDate"
+                        ></VnTime> </QPopupProxy
+                ></QIcon>
+            </template>
+        </QInput>
+    </div>
+</template>
+<i18n>
+    es:
+        Open date: Abrir fecha
+</i18n>
diff --git a/src/pages/Ticket/Negative/TicketLackFilter.vue b/src/pages/Ticket/Negative/TicketLackFilter.vue
index 3762f453d..d064a94d5 100644
--- a/src/pages/Ticket/Negative/TicketLackFilter.vue
+++ b/src/pages/Ticket/Negative/TicketLackFilter.vue
@@ -6,6 +6,7 @@ import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInputDateTime from 'src/components/common/VnInputDateTime.vue';
 const { t } = useI18n();
 const props = defineProps({
     dataKey: {
@@ -66,6 +67,7 @@ const setUserParams = (params) => {
         :data-key="props.dataKey"
         :search-button="true"
         @set-user-params="setUserParams"
+        :unremovable-params="['warehouseFk']"
     >
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
@@ -77,17 +79,11 @@ const setUserParams = (params) => {
             <QList dense class="q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <VnInput
-                            v-model="params.days"
-                            :label="t('negative.days')"
+                        <VnInputDateTime
+                            v-model="params.availabled"
+                            :label="t('negative.availabled')"
                             dense
                             is-outlined
-                            type="number"
-                            @update:model-value="
-                                (value) => {
-                                    setUserParams(params);
-                                }
-                            "
                         />
                     </QItemSection>
                 </QItem>
@@ -102,25 +98,6 @@ const setUserParams = (params) => {
                     </QItemSection>
                 </QItem>
                 <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.producer"
-                            :label="t('negative.producer')"
-                            dense
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.origen"
-                            :label="t('negative.origen')"
-                            dense
-                            is-outlined
-                        />
-                    </QItemSection> </QItem
-                ><QItem>
                     <QItemSection v-if="categoriesOptions">
                         <VnSelect
                             :label="t('negative.categoryFk')"
diff --git a/src/pages/Ticket/Negative/TicketLackList.vue b/src/pages/Ticket/Negative/TicketLackList.vue
index d1e8b823a..1e11515f9 100644
--- a/src/pages/Ticket/Negative/TicketLackList.vue
+++ b/src/pages/Ticket/Negative/TicketLackList.vue
@@ -21,14 +21,13 @@ const selectedRows = ref([]);
 const tableRef = ref();
 const filterParams = ref({});
 const negativeParams = reactive({
-    days: useRole().likeAny('buyer') ? 2 : 0,
     warehouseFk: useState().getUser().value.warehouseFk,
+    availabled: Date.getCurrentDateTimeFormatted(),
 });
 const redirectToCreateView = ({ itemFk }) => {
     router.push({
         name: 'NegativeDetail',
         params: { id: itemFk },
-        query: { days: filterParams.value.days ?? negativeParams.days },
     });
 };
 const columns = computed(() => [
@@ -65,15 +64,19 @@ const columns = computed(() => [
         columnFilter: {
             component: 'input',
             type: 'number',
-            columnClass: 'shrink',
+            inWhere: false,
         },
     },
     {
         name: 'longName',
-        align: 'center',
+        align: 'left',
         label: t('negative.longName'),
         field: ({ longName }) => longName,
-
+        columnFilter: {
+            component: 'input',
+            inWhere: false,
+            useLike: true,
+        },
         sortable: true,
         headerStyle: 'width: 350px',
         cardVisible: true,
@@ -94,6 +97,11 @@ const columns = computed(() => [
         field: ({ inkFk }) => inkFk,
         sortable: true,
         cardVisible: true,
+        columnFilter: {
+            component: 'input',
+            columnClass: 'shrink',
+            inWhere: false,
+        },
     },
     {
         name: 'size',
@@ -155,7 +163,6 @@ const setUserParams = (params) => {
             <TicketLackFilter data-key="NegativeList" @set-user-params="setUserParams" />
         </template>
     </RightMenu>
-    {{ filterRef }}
     <VnTable
         ref="tableRef"
         data-key="NegativeList"
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index cdbb22d9b..be45bbd89 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -237,6 +237,7 @@ negative:
     minTimed: minTimed
     negativeAction: Negative
     totalNegative: Total negatives
+    availabled: Availabled
     days: Days
     buttonsUpdate:
         item: Item
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 75d3c6a2b..ee809eae1 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -218,7 +218,8 @@ ticketList:
 negative:
     hour: Hora
     id: Id Articulo
-    longName: Articulo
+    longName: Artículo
+    itemFk: Artículo
     supplier: Productor
     colour: Color
     size: Medida
@@ -234,6 +235,7 @@ negative:
     inkFk: Color
     timed: Hora
     date: Fecha
+    availabled: Disponible
     minTimed: Hora
     type: Tipo
     negativeAction: Negativo
@@ -286,7 +288,7 @@ negative:
                 title: Gestionar tickets spliteados
                 subTitle: Confir fecha y agencia
     split:
-        ticket: Ticket viejo
+        ticket: Ticket origen
         newTicket: Ticket nuevo
         status: Estado
         message: Mensaje