From f1a57ceba1fe150b3ac730a5e21b1a8e0657ad0a Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 19 Feb 2025 14:09:00 +0100
Subject: [PATCH] feat: refs #6321 init

---
 src/composables/showResultsTable.js           |  30 ++
 .../Negative/components/ChangeItemDialog.vue  |  29 +-
 .../Negative/components/HandleSplitDialog.vue | 281 ++++++++++++++++++
 .../Negative/components/HandleSplited.vue     | 281 ++++++++++++++++++
 4 files changed, 612 insertions(+), 9 deletions(-)
 create mode 100644 src/composables/showResultsTable.js
 create mode 100644 src/pages/Ticket/Negative/components/HandleSplitDialog.vue
 create mode 100644 src/pages/Ticket/Negative/components/HandleSplited.vue

diff --git a/src/composables/showResultsTable.js b/src/composables/showResultsTable.js
new file mode 100644
index 000000000..c7e43ef7c
--- /dev/null
+++ b/src/composables/showResultsTable.js
@@ -0,0 +1,30 @@
+import { useI18n } from 'vue-i18n';
+
+import { useQuasar } from 'quasar';
+
+export function showResultsAsTable(dialog, results, key) {
+    const quasar = useQuasar();
+    const { t } = useI18n();
+    function openTable() {
+        quasar.notify({
+            message: t('negative.detail.modal.changeItem.success'),
+            color: 'positive',
+            actions: [
+                {
+                    label: t('globals.ok'),
+                    color: 'white',
+                    handler: () => {
+                        quasar.dialog({
+                            component: dialog,
+                            componentProps: {
+                                results,
+                                key,
+                            },
+                        });
+                    },
+                },
+            ],
+        });
+    }
+    return { openTable };
+}
diff --git a/src/pages/Ticket/Negative/components/ChangeItemDialog.vue b/src/pages/Ticket/Negative/components/ChangeItemDialog.vue
index e419b85c0..b0a670080 100644
--- a/src/pages/Ticket/Negative/components/ChangeItemDialog.vue
+++ b/src/pages/Ticket/Negative/components/ChangeItemDialog.vue
@@ -1,9 +1,18 @@
 <script setup>
 import { ref } from 'vue';
 import axios from 'axios';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+
 import VnSelect from 'src/components/common/VnSelect.vue';
 import notifyResults from 'src/utils/notifyResults';
+import { showResultsAsTable } from 'src/composables/showResultsTable';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import HandleSplitDialog from './HandleSplitDialog.vue';
+const { openTable } = showResultsAsTable();
 const emit = defineEmits(['update-item']);
+const quasar = useQuasar();
+const { t } = useI18n();
 
 const showChangeItemDialog = ref(false);
 const newItem = ref(null);
@@ -17,15 +26,17 @@ const $props = defineProps({
 const updateItem = async () => {
     try {
         showChangeItemDialog.value = true;
-        const rowsToUpdate = $props.selectedRows.map(({ saleFk, quantity }) =>
-            axios.post(`Sales/replaceItem`, {
-                saleFk,
-                substitutionFk: newItem.value,
-                quantity,
-            }),
-        );
-        const result = await Promise.allSettled(rowsToUpdate);
-        notifyResults(result, 'saleFk');
+        // const rowsToUpdate = $props.selectedRows.map(({ saleFk, quantity }) =>
+        //     axios.post(`Sales/replaceItem`, {
+        //         saleFk,
+        //         substitutionFk: newItem.value,
+        //         quantity,
+        //     }),
+        // );
+        // const result = await Promise.allSettled(rowsToUpdate);
+
+        openTable(HandleSplitDialog, [], 'saleFk');
+        // notifyResults(result, 'saleFk');
         emit('update-item', newItem.value);
     } catch (err) {
         console.error('Error updating item:', err);
diff --git a/src/pages/Ticket/Negative/components/HandleSplitDialog.vue b/src/pages/Ticket/Negative/components/HandleSplitDialog.vue
new file mode 100644
index 000000000..b2bf94f26
--- /dev/null
+++ b/src/pages/Ticket/Negative/components/HandleSplitDialog.vue
@@ -0,0 +1,281 @@
+<script setup>
+import { computed, onMounted, ref, toRefs } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import { useDialogPluginComponent } from 'quasar';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+const { t } = useI18n();
+const showSplitDialog = ref(false);
+const newState = ref(null);
+const resultSplit = ref([]);
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+const $props = defineProps({
+    tickets: {
+        type: Array,
+        default: () => [],
+    },
+});
+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'),
+        field: ({ ticket }) => ticket,
+        sortable: true,
+    },
+    {
+        name: 'newTicket',
+        label: t('negative.split.newTicket'),
+        field: ({ newTicket }) => newTicket,
+        sortable: true,
+    },
+    {
+        name: 'message',
+        label: t('negative.split.message'),
+        field: ({ message }) => message,
+        sortable: true,
+    },
+    // {
+    //     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))];
+});
+
+const updateState = async () => {
+    try {
+        showSplitDialog.value = true;
+        const rowsToUpdate = $props.tickets.map(({ ticketFk }) =>
+            axios.post(`Tickets/state`, {
+                ticketFk,
+                code: newState.value,
+            })
+        );
+        await Promise.all(rowsToUpdate);
+    } catch (err) {
+        return err;
+    } finally {
+        dialogRef.value.hide({ type: 'refresh', refresh: true });
+    }
+};
+
+function getIcon(value) {
+    const icons = {
+        split: {
+            name: 'check_circle',
+            color: 'secondary',
+        },
+        noSplit: {
+            name: 'warning',
+            color: 'primary',
+        },
+        error: {
+            name: 'close',
+            color: 'negative',
+        },
+    };
+    return icons[value];
+}
+
+const updateNewTickets = async () => {
+    tickets.value = $props.tickets.filter((ticket) => ticket.newTicket !== 1000005);
+    console.log('updateNewTickets');
+    rowsSelected.value = [];
+};
+</script>
+
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showSplitDialog">
+        <QCard class="q-pa-sm">
+            <QCardSection class="row items-center q-pb-none">
+                <QAvatar
+                    :icon="icon"
+                    color="primary"
+                    text-color="white"
+                    size="xl"
+                    v-if="icon"
+                />
+                <span class="text-h6 text-grey">{{
+                    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"
+                            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"
+                                        :props="props"
+                                    >
+                                        {{ t(col.label) }}
+                                    </QTh>
+                                </QTr>
+                            </template>
+                            <template #body="props">
+                                <QTr :props="props">
+                                    <Qtd>
+                                        <QCheckbox v-model="props.selected" />
+                                    </Qtd>
+                                    <QTd
+                                        v-for="col in props.cols"
+                                        :key="col.name"
+                                        :props="props"
+                                    >
+                                        <span
+                                            v-if="
+                                                ![
+                                                    'status',
+                                                    'message',
+                                                    'actions',
+                                                ].includes(col.name)
+                                            "
+                                        >
+                                            {{ col.value }}
+                                        </span>
+                                        <span v-if="'status' === col.name">
+                                            <QIcon
+                                                :name="`${getIcon(col.value).name}`"
+                                                size="xs"
+                                                class="cursor-pointer"
+                                                :color="getIcon(col.value).color"
+                                            >
+                                            </QIcon>
+                                        </span>
+                                        <span v-if="'message' === col.name">message</span>
+                                    </QTd></QTr
+                                ></template
+                            >
+                        </QTable></template
+                    >
+                </VnPaginate>
+            </QCardSection>
+            <QCardActions align="right">
+                <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
+                <QBtn
+                    :label="t('globals.confirm')"
+                    color="primary"
+                    :disable="!newState"
+                    @click="updateState"
+                    unelevated
+                    autofocus
+                /> </QCardActions
+        ></QCard>
+    </QDialog>
+</template>
+
+<style lang="scss" scoped>
+.splitRow {
+    border: 1px solid #ec8916;
+    border-width: 1px 0 1px 0;
+}
+.list {
+    max-height: 100%;
+    padding: 15px;
+    width: 100%;
+}
+
+.grid-style-transition {
+    transition: transform 0.28s, background-color 0.28s;
+}
+
+#true {
+    background-color: $positive;
+}
+
+#false {
+    background-color: $negative;
+}
+
+div.q-dialog__inner > div {
+    max-width: fit-content !important;
+}
+</style>
diff --git a/src/pages/Ticket/Negative/components/HandleSplited.vue b/src/pages/Ticket/Negative/components/HandleSplited.vue
new file mode 100644
index 000000000..b2bf94f26
--- /dev/null
+++ b/src/pages/Ticket/Negative/components/HandleSplited.vue
@@ -0,0 +1,281 @@
+<script setup>
+import { computed, onMounted, ref, toRefs } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import { useDialogPluginComponent } from 'quasar';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+const { t } = useI18n();
+const showSplitDialog = ref(false);
+const newState = ref(null);
+const resultSplit = ref([]);
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+const $props = defineProps({
+    tickets: {
+        type: Array,
+        default: () => [],
+    },
+});
+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'),
+        field: ({ ticket }) => ticket,
+        sortable: true,
+    },
+    {
+        name: 'newTicket',
+        label: t('negative.split.newTicket'),
+        field: ({ newTicket }) => newTicket,
+        sortable: true,
+    },
+    {
+        name: 'message',
+        label: t('negative.split.message'),
+        field: ({ message }) => message,
+        sortable: true,
+    },
+    // {
+    //     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))];
+});
+
+const updateState = async () => {
+    try {
+        showSplitDialog.value = true;
+        const rowsToUpdate = $props.tickets.map(({ ticketFk }) =>
+            axios.post(`Tickets/state`, {
+                ticketFk,
+                code: newState.value,
+            })
+        );
+        await Promise.all(rowsToUpdate);
+    } catch (err) {
+        return err;
+    } finally {
+        dialogRef.value.hide({ type: 'refresh', refresh: true });
+    }
+};
+
+function getIcon(value) {
+    const icons = {
+        split: {
+            name: 'check_circle',
+            color: 'secondary',
+        },
+        noSplit: {
+            name: 'warning',
+            color: 'primary',
+        },
+        error: {
+            name: 'close',
+            color: 'negative',
+        },
+    };
+    return icons[value];
+}
+
+const updateNewTickets = async () => {
+    tickets.value = $props.tickets.filter((ticket) => ticket.newTicket !== 1000005);
+    console.log('updateNewTickets');
+    rowsSelected.value = [];
+};
+</script>
+
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showSplitDialog">
+        <QCard class="q-pa-sm">
+            <QCardSection class="row items-center q-pb-none">
+                <QAvatar
+                    :icon="icon"
+                    color="primary"
+                    text-color="white"
+                    size="xl"
+                    v-if="icon"
+                />
+                <span class="text-h6 text-grey">{{
+                    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"
+                            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"
+                                        :props="props"
+                                    >
+                                        {{ t(col.label) }}
+                                    </QTh>
+                                </QTr>
+                            </template>
+                            <template #body="props">
+                                <QTr :props="props">
+                                    <Qtd>
+                                        <QCheckbox v-model="props.selected" />
+                                    </Qtd>
+                                    <QTd
+                                        v-for="col in props.cols"
+                                        :key="col.name"
+                                        :props="props"
+                                    >
+                                        <span
+                                            v-if="
+                                                ![
+                                                    'status',
+                                                    'message',
+                                                    'actions',
+                                                ].includes(col.name)
+                                            "
+                                        >
+                                            {{ col.value }}
+                                        </span>
+                                        <span v-if="'status' === col.name">
+                                            <QIcon
+                                                :name="`${getIcon(col.value).name}`"
+                                                size="xs"
+                                                class="cursor-pointer"
+                                                :color="getIcon(col.value).color"
+                                            >
+                                            </QIcon>
+                                        </span>
+                                        <span v-if="'message' === col.name">message</span>
+                                    </QTd></QTr
+                                ></template
+                            >
+                        </QTable></template
+                    >
+                </VnPaginate>
+            </QCardSection>
+            <QCardActions align="right">
+                <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
+                <QBtn
+                    :label="t('globals.confirm')"
+                    color="primary"
+                    :disable="!newState"
+                    @click="updateState"
+                    unelevated
+                    autofocus
+                /> </QCardActions
+        ></QCard>
+    </QDialog>
+</template>
+
+<style lang="scss" scoped>
+.splitRow {
+    border: 1px solid #ec8916;
+    border-width: 1px 0 1px 0;
+}
+.list {
+    max-height: 100%;
+    padding: 15px;
+    width: 100%;
+}
+
+.grid-style-transition {
+    transition: transform 0.28s, background-color 0.28s;
+}
+
+#true {
+    background-color: $positive;
+}
+
+#false {
+    background-color: $negative;
+}
+
+div.q-dialog__inner > div {
+    max-width: fit-content !important;
+}
+</style>