From fd4ff94f4c7d68ce27ab3bbbbbff337439eba8c7 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 4 Jun 2024 14:14:16 +0200
Subject: [PATCH] feat: #6321 Update handleSplitted form

---
 .../InvoiceIn/Card/InvoiceInIntrastat.vue     |  22 +--
 src/pages/Ticket/Negative/HandleSplited.vue   | 155 +++++++++++-------
 .../Ticket/Negative/TicketLackDetail.vue      |   4 +-
 src/pages/Ticket/locale/en.yml                |   4 +-
 src/pages/Ticket/locale/es.yml                |  17 +-
 5 files changed, 120 insertions(+), 82 deletions(-)

diff --git a/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue b/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue
index 1d1205d9e..d2851d2e7 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue
@@ -72,8 +72,7 @@ const columns = computed(() => [
     },
 ]);
 
-const getTotal = (data, key) =>
-    data.reduce((acc, cur) => acc + +String(cur[key]).replace(',', '.'), 0);
+const getTotal = (data, key) => data.reduce((acc, cur) => acc + cur[key], 0);
 </script>
 <template>
     <FetchData
@@ -111,7 +110,7 @@ const getTotal = (data, key) =>
                     <template #body-cell="{ row, col }">
                         <QTd>
                             <QInput
-                                v-model="row[col.name]"
+                                v-model.number="row[col.name]"
                                 clearable
                                 clear-icon="close"
                             />
@@ -187,22 +186,7 @@ const getTotal = (data, key) =>
                                             </template>
                                         </VnSelect>
                                     </QItem>
-                                    <QItem
-                                        v-for="(value, index) of [
-                                            'amount',
-                                            'net',
-                                            'stems',
-                                        ]"
-                                        :key="index"
-                                    >
-                                        <QInput
-                                            :label="t(value)"
-                                            class="full-width"
-                                            v-model="props.row[value]"
-                                            clearable
-                                            clear-icon="close"
-                                        />
-                                    </QItem>
+
                                     <QItem>
                                         <VnSelect
                                             :label="t('country')"
diff --git a/src/pages/Ticket/Negative/HandleSplited.vue b/src/pages/Ticket/Negative/HandleSplited.vue
index be547c0e7..b2bf94f26 100644
--- a/src/pages/Ticket/Negative/HandleSplited.vue
+++ b/src/pages/Ticket/Negative/HandleSplited.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import { useDialogPluginComponent } from 'quasar';
@@ -20,9 +20,22 @@ const $props = defineProps({
         default: () => [],
     },
 });
-const rowBtnDisable = (row) => !(row?.name && row?.date);
+const tickets = ref($props.tickets ?? []);
+const rowBtnDisable = () =>
+    !(
+        formData.value?.agencyModeFk &&
+        formData.value?.date &&
+        rowsSelected.value.length > 0
+    );
+const rowsSelected = ref([]);
 
 const columns = computed(() => [
+    {
+        name: 'status',
+        label: t('negative.split.status'),
+        field: ({ status }) => status,
+        sortable: true,
+    },
     {
         name: 'ticket',
         label: t('negative.split.ticket'),
@@ -35,26 +48,40 @@ const columns = computed(() => [
         field: ({ newTicket }) => newTicket,
         sortable: true,
     },
-    {
-        name: 'status',
-        label: t('negative.split.status'),
-        field: ({ status }) => status,
-        sortable: true,
-    },
     {
         name: 'message',
         label: t('negative.split.message'),
         field: ({ message }) => message,
         sortable: true,
     },
-    {
-        name: 'actions',
-        label: t('negative.split.actions'),
-        style: 'padding-left: 100px',
-        headerStyle: 'padding-left: 100px',
-    },
+    // {
+    //     name: 'actions',
+    //     align: 'center',
+    //     label: t('negative.split.actions'),
+    //     // style: 'padding-left: 100px',
+    //     // headerStyle: 'padding-left: 100px',
+    // },
 ]);
 
+const formData = ref({ agencies: [] });
+const handleDateChanged = async () => {
+    const { data: agencyData } = await axios.get('Agencies/getLanded', {
+        params: {
+            addressFk: 123,
+            agencyModeFk: 8,
+            warehouseFk: 1,
+            shipped: '2001-02-08T23:00:00.000Z',
+        },
+    });
+    if (!agencyData) formData.value.agencies = [];
+    const { zoneFk } = agencyData;
+    const { data: zoneData } = await axios.get('Zones/Includingexpired', {
+        params: { filter: { fields: ['id', 'name'], where: { id: zoneFk } } },
+    });
+    formData.value.agencies = zoneData;
+    if (zoneData.length === 1) formData.value.agencyModeFk = zoneData[0];
+    // formData.value.dateChanged = false;
+};
 const ticketsSelected = ref([]);
 onMounted(() => {
     ticketsSelected.value = [...new Set($props.tickets.map(({ ticketFk }) => ticketFk))];
@@ -94,6 +121,12 @@ function getIcon(value) {
     };
     return icons[value];
 }
+
+const updateNewTickets = async () => {
+    tickets.value = $props.tickets.filter((ticket) => ticket.newTicket !== 1000005);
+    console.log('updateNewTickets');
+    rowsSelected.value = [];
+};
 </script>
 
 <template>
@@ -108,17 +141,56 @@ function getIcon(value) {
                     v-if="icon"
                 />
                 <span class="text-h6 text-grey">{{
-                    t('negative.detail.modal.split.title')
+                    t('negative.detail.modal.handleSplited.title')
                 }}</span>
                 <QSpace />
                 <QBtn icon="close" flat round dense v-close-popup />
             </QCardSection>
             <QCardSection class="row items-center justify-center column items-stretch">
+                <Qform>
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <VnInputDate
+                            :label="t('Max date')"
+                            v-model="formData.date"
+                            @update:model-value="(evt) => handleDateChanged()" />
+
+                        <VnSelect
+                            :disable="formData.agencies.length < 1"
+                            :label="t('Agency')"
+                            v-model="formData.agencyModeFk"
+                            :options="formData.agencies"
+                            option-label="name"
+                            option-value="id" />
+
+                        <QBtn
+                            icon="save"
+                            :disable="rowBtnDisable()"
+                            color="primary"
+                            flat
+                            rounded
+                            @click="updateNewTickets"
+                    /></VnRow>
+                </Qform>
                 <VnPaginate data-key="splitLack" :data="tickets">
                     <template #body="{ rows }">
-                        <QTable :rows="rows" :columns="columns" flat dense hide-bottom>
+                        <QTable
+                            :rows="rows"
+                            :columns="columns"
+                            selection="multiple"
+                            row-key="newTicket"
+                            v-model:selected="rowsSelected"
+                            :no-data-label="t('globals.noResults')"
+                            flat
+                            dense
+                            hide-bottom
+                            auto-load
+                            :rows-per-page-options="[0]"
+                            hide-pagination
+                            :pagination="{ rowsPerPage: null }"
+                        >
                             <template #header="props">
                                 <QTr :props="props">
+                                    <QTh></QTh>
                                     <QTh
                                         v-for="col in props.cols"
                                         :key="col.name"
@@ -130,11 +202,13 @@ function getIcon(value) {
                             </template>
                             <template #body="props">
                                 <QTr :props="props">
-                                    <QTh
+                                    <Qtd>
+                                        <QCheckbox v-model="props.selected" />
+                                    </Qtd>
+                                    <QTd
                                         v-for="col in props.cols"
                                         :key="col.name"
                                         :props="props"
-                                        :class="{ splitRow: props.row.status == 'split' }"
                                     >
                                         <span
                                             v-if="
@@ -150,54 +224,21 @@ function getIcon(value) {
                                         <span v-if="'status' === col.name">
                                             <QIcon
                                                 :name="`${getIcon(col.value).name}`"
-                                                size="md"
+                                                size="xs"
                                                 class="cursor-pointer"
                                                 :color="getIcon(col.value).color"
                                             >
                                             </QIcon>
                                         </span>
                                         <span v-if="'message' === col.name">message</span>
-                                        <div
-                                            v-if="
-                                                'actions' === col.name &&
-                                                props.row.status == 'split'
-                                            "
-                                            style="
-                                                display: flex;
-                                                flex-direction: row;
-                                                justify-content: center;
-                                                flex-wrap: wrap;
-                                                column-gap: 20px;
-                                                align-items: center;
-                                            "
-                                        >
-                                            <div>
-                                                <VnInputDate
-                                                    :label="t('Max date')"
-                                                    v-model="props.row.date"
-                                                />
-                                                <VnInput
-                                                    :label="t('Name')"
-                                                    v-model="props.row.name"
-                                                />
-                                            </div>
-                                            <div>
-                                                <QBtn
-                                                    icon="save"
-                                                    class="q-mt-sm"
-                                                    size="md"
-                                                    color="primary"
-                                                    flat
-                                                    :disable="rowBtnDisable(props.row)"
-                                                />
-                                            </div>
-                                        </div> </QTh></QTr
-                            ></template> </QTable
-                    ></template>
+                                    </QTd></QTr
+                                ></template
+                            >
+                        </QTable></template
+                    >
                 </VnPaginate>
             </QCardSection>
             <QCardActions align="right">
-                <QBtn :label="t('globals.next')" color="primary" flat v-close-popup />
                 <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
                 <QBtn
                     :label="t('globals.confirm')"
diff --git a/src/pages/Ticket/Negative/TicketLackDetail.vue b/src/pages/Ticket/Negative/TicketLackDetail.vue
index ae8df1591..c80808017 100644
--- a/src/pages/Ticket/Negative/TicketLackDetail.vue
+++ b/src/pages/Ticket/Negative/TicketLackDetail.vue
@@ -304,8 +304,8 @@ const split = async () => {
     // resultSplit.value = data;
     resultSplit.value = [
         { ticket: 32, newTicket: 1000005, status: 'split' },
-        { ticket: 32, newTicket: 1000005, status: 'noSplit' },
-        { ticket: 32, newTicket: 1000005, status: 'error' },
+        { ticket: 32, newTicket: 1000006, status: 'noSplit' },
+        { ticket: 32, newTicket: 1000007, status: 'error' },
     ];
 };
 </script>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index dbdfccb8b..79a01a6e7 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -55,9 +55,11 @@ negative:
             split:
                 title: Are you sure you want to split selected tickets?
                 subTitle: Confirm split action
+            handleSplited:
+                title: Handle splited  tickets
+                subTitle: Confirm date and agency
     split:
         ticket: Old ticket
         newTicket: New ticket
         status: Result
         message: Message
-        actions: Actions
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 3e08f9bc9..df9d06139 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -27,6 +27,9 @@ negative:
         title: 'Actualizar negativos'
         question: 'Seleccione un estado para guardar'
 
+    modalSplit:
+        title: Confirmar acción de split
+        question: 'Select a state to update'
     detail:
         itemFk: 'Articulo'
         ticketFk: 'Id_Ticket'
@@ -51,6 +54,14 @@ negative:
             changeQuantity:
                 title: Actualizar cantidad de los tickets
                 placeholder: Nueva cantidad
-        split:
-            splitQuestion: ¿Estás seguro de separar los tickets seleccionados?
-            confirmSplitSelected: Confirmar separar tickets seleccionados
+            split:
+                title: ¿Seguro de separar los tickets seleccionados?
+                subTitle: Confirma separar tickets seleccionados
+            handleSplited:
+                title: Gestionar tickets spliteados
+                subTitle: Confir fecha y agencia
+    split:
+        ticket: Ticket viejo
+        newTicket: Ticket nuevo
+        status: Estado
+        message: Mensaje