From 85a0e328e39559021a45c0d790fb1f7ca766ad4d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sat, 25 Jan 2025 13:27:29 +0100
Subject: [PATCH] feat: refs #6321 lackDetail actions

---
 .../common/VnPopupProxy.vue}                  | 13 +--
 .../Ticket/Negative/TicketLackDetail.vue      | 95 +++++++++----------
 src/pages/Ticket/Negative/TicketLackTable.vue | 59 +++++++-----
 .../Negative/components/ChangeItemDialog.vue  | 29 +++---
 .../components/ChangeQuantityDialog.vue       | 23 +++--
 .../Negative/components/ChangeStateDialog.vue | 11 ++-
 src/pages/Ticket/locale/en.yml                |  8 +-
 src/pages/Ticket/locale/es.yml                |  7 +-
 8 files changed, 131 insertions(+), 114 deletions(-)
 rename src/{pages/Ticket/Card/TicketMassiveUpdate.vue => components/common/VnPopupProxy.vue} (77%)

diff --git a/src/pages/Ticket/Card/TicketMassiveUpdate.vue b/src/components/common/VnPopupProxy.vue
similarity index 77%
rename from src/pages/Ticket/Card/TicketMassiveUpdate.vue
rename to src/components/common/VnPopupProxy.vue
index 43e6993bc..7f3361b7a 100644
--- a/src/pages/Ticket/Card/TicketMassiveUpdate.vue
+++ b/src/components/common/VnPopupProxy.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-const { t } = useI18n();
-const $props = defineProps({
+import { ref } from 'vue';
+
+defineProps({
     icon: {
         type: String,
         default: 'refresh',
@@ -19,16 +19,17 @@ const $props = defineProps({
         default: 'primary',
     },
 });
+const popupProxyRef = ref(null);
 </script>
 
 <template>
-    <QBtn :color="$props.color" :icon="$props.icon" :label="t($props.label)">
+    <QBtn :color="$props.color" :icon="$props.icon" :label="$t($props.label)">
         <QPopupProxy ref="popupProxyRef" style="max-width: none">
             <QCard>
-                <slot></slot>
+                <slot :popup="popupProxyRef"></slot>
             </QCard>
         </QPopupProxy>
-        <QTooltip>{{ t($props.tooltip) }}</QTooltip>
+        <QTooltip>{{ $t($props.tooltip) }}</QTooltip>
     </QBtn>
 </template>
 
diff --git a/src/pages/Ticket/Negative/TicketLackDetail.vue b/src/pages/Ticket/Negative/TicketLackDetail.vue
index 70d89af97..1fbc056e7 100644
--- a/src/pages/Ticket/Negative/TicketLackDetail.vue
+++ b/src/pages/Ticket/Negative/TicketLackDetail.vue
@@ -1,23 +1,21 @@
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import ChangeQuantityDialog from 'pages/Ticket/Negative/components/ChangeQuantityDialog.vue';
-import ChangeStateDialog from 'pages/Ticket/Negative/components/ChangeStateDialog.vue';
-import ChangeItemDialog from 'pages/Ticket/Negative/components/ChangeItemDialog.vue';
+import ChangeQuantityDialog from './components/ChangeQuantityDialog.vue';
+import ChangeStateDialog from './components/ChangeStateDialog.vue';
+import ChangeItemDialog from './components/ChangeItemDialog.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import TicketTransfer from '../Card/TicketTransfer.vue';
-import TicketMassiveUpdate from '../Card/TicketMassiveUpdate.vue';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import FetchData from 'src/components/FetchData.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { useRoute } from 'vue-router';
-// import { useArrayData } from 'src/composables/useArrayData';
 import VnImg from 'src/components/ui/VnImg.vue';
 import TicketLackTable from './TicketLackTable.vue';
 import ItemProposalProxy from 'src/pages/Item/components/ItemProposalProxy.vue';
-import { toCurrency } from 'filters/index';
+import VnPopupProxy from 'src/components/common/VnPopupProxy.vue';
 
 const { t } = useI18n();
 const URL_KEY = 'Tickets/ItemLack';
@@ -25,9 +23,9 @@ const editableStates = ref([]);
 const stateStore = useStateStore();
 const proposalDialogRef = ref();
 const tableRef = ref();
-const changeItemDialogRef = ref();
-const changeStateDialogRef = ref();
-const changeQuantityDialogRef = ref();
+const changeItemDialogRef = ref(null);
+const changeStateDialogRef = ref(null);
+const changeQuantityDialogRef = ref(null);
 const showProposalDialog = ref(false);
 const showChangeQuantityDialog = ref(false);
 const showFree = ref(true);
@@ -109,6 +107,11 @@ function onBuysFetched(data) {
 function onTicketLackFetched(data) {
     itemLack.value = data[0];
 }
+const closeDialogs = (refs, evt) => {
+    changeItemDialogRef.value.hide();
+    changeQuantityDialogRef.value.hide();
+    changeStateDialogRef.value.hide();
+};
 </script>
 
 <template>
@@ -139,42 +142,43 @@ function onTicketLackFetched(data) {
     <VnSubToolbar>
         <template #st-data>
             <QBtnGroup push style="column-gap: 1px">
-                {{ selectedRows.length }}
-                <TicketMassiveUpdate
+                <VnPopupProxy
                     :disable="selectedRows.length < 1"
                     :label="t('negative.buttonsUpdate.item')"
                     :tooltip="t('negative.detail.modal.changeItem.title')"
                 >
-                    <ChangeItemDialog
-                        ref="changeItemDialogRef"
-                        @update-item="changeItemDialogRef.hide()"
-                        :selected-rows="selectedRows"
-                    ></ChangeItemDialog>
-                </TicketMassiveUpdate>
-                <TicketMassiveUpdate
+                    <template v-slot="{ popup }">
+                        <ChangeItemDialog
+                            ref="changeItemDialogRef"
+                            @update-item="popup.hide()"
+                            :selected-rows="selectedRows"
+                    /></template>
+                </VnPopupProxy>
+                <VnPopupProxy
                     :disable="selectedRows.length < 1"
                     :label="t('negative.buttonsUpdate.state')"
                     :tooltip="t('negative.detail.modal.changeState.title')"
                 >
-                    <ChangeStateDialog
-                        ref="changeStateDialogRef"
-                        @update-state="changeStateDialogRef.hide()"
-                        :selected-rows="selectedRows"
-                    ></ChangeStateDialog>
-                </TicketMassiveUpdate>
-                <TicketMassiveUpdate
+                    <template v-slot="{ popup }">
+                        <ChangeStateDialog
+                            ref="changeStateDialogRef"
+                            @update-state="popup.hide()"
+                            :selected-rows="selectedRows"
+                    /></template>
+                </VnPopupProxy>
+                <VnPopupProxy
                     :disable="selectedRows.length < 1"
                     :label="t('negative.buttonsUpdate.quantity')"
                     :tooltip="t('negative.detail.modal.changeQuantity.title')"
                     @click="showChangeQuantityDialog = true"
                 >
-                    <ChangeQuantityDialog
-                        ref="changeQuantityDialogRef"
-                        @update-quantity="changeQuantityDialogRef.hide()"
-                        :selected-rows="selectedRows"
-                    >
-                    </ChangeQuantityDialog>
-                </TicketMassiveUpdate>
+                    <template v-slot="{ popup }">
+                        <ChangeQuantityDialog
+                            ref="changeQuantityDialogRef"
+                            @update-quantity="popup.hide()"
+                            :selected-rows="selectedRows"
+                    /></template>
+                </VnPopupProxy>
                 <QBtn
                     color="primary"
                     icon="vn:splitline"
@@ -223,13 +227,7 @@ function onTicketLackFetched(data) {
                 <template #body>
                     <div style="display: flex; align-items: center">
                         <VnImg :id="item.id" class="rounded image-wrapper"></VnImg>
-                        <div
-                            style="
-                                display: flex;
-                                align-items: center;
-                                flex-direction: column;
-                            "
-                        >
+                        <div class="flex column" style="align-items: center">
                             <QBadge
                                 ref="badgeLackRef"
                                 class="q-ml-xs"
@@ -238,19 +236,14 @@ function onTicketLackFetched(data) {
                                 :color="itemLack.lack === 0 ? 'green' : 'red'"
                                 :label="itemLack.lack"
                             />
-                            <!-- <QBadge
-                                color="secondary"
-                                class="q-ml-xs q-mt-xs"
-                                v-if="itemLack"
-                                :label="toCurrency(itemLack.quantity * itemLack.price)"
-                                outline
-                            /> -->
                         </div>
-                        <QBtn flat class="link text-blue">
-                            {{ item.longName }}
-                            <ItemDescriptorProxy :id="entityId" />
-                        </QBtn>
-                        <FetchedTags class="q-ml-md" :item="item" :columns="3" />
+                        <div class="flex column left" style="align-items: flex-start">
+                            <QBtn flat class="link text-blue">
+                                {{ item?.longName ?? item.name }}
+                                <ItemDescriptorProxy :id="entityId" />
+                            </QBtn>
+                            <FetchedTags class="q-ml-md" :item="item" :columns="7" />
+                        </div>
                     </div>
                 </template>
             </VnPaginate>
diff --git a/src/pages/Ticket/Negative/TicketLackTable.vue b/src/pages/Ticket/Negative/TicketLackTable.vue
index 4d34c8636..4cc3283ce 100644
--- a/src/pages/Ticket/Negative/TicketLackTable.vue
+++ b/src/pages/Ticket/Negative/TicketLackTable.vue
@@ -23,7 +23,7 @@ watch(
     (v) => {
         filterLack.value.where = v;
         tableRef.value.reload(filterLack);
-    }
+    },
 );
 
 const filterLack = ref({
@@ -78,8 +78,38 @@ const saveChange = async (field, { rowIndex, row }) => {
 };
 const entityId = computed(() => route.params.id);
 const item = ref({});
-
+const rowColor = (row) => {
+    if (!row.hasToIgnore) return 'negative';
+    return 'transparent';
+};
+// const textRowColor = (row) => {
+//     if (row.hasToIgnore) return 'black';
+//     return 'white';
+// };
 const columns = computed(() => [
+    {
+        align: 'left',
+        label: t('negative.detail.isBasket'),
+        name: 'isBasket',
+        cardVisible: true,
+        create: true,
+        component: 'checkbox',
+        attrs: ({ row }) => {
+            return {
+                'toggle-indeterminate': true,
+            };
+        },
+        columnClass: 'shrink',
+    },
+    {
+        align: 'left',
+        label: t('negative.detail.hasSubstitution'),
+        name: 'hasSubstitution',
+        cardVisible: true,
+        create: true,
+        component: 'checkbox',
+        columnClass: 'shrink',
+    },
     {
         name: 'status',
         align: 'left',
@@ -139,19 +169,6 @@ const columns = computed(() => [
 
         align: 'left',
         sortable: true,
-
-        // columnFilter: {
-        // columnField: {
-        //     component: 'select',
-        //     event: getInputEvents,
-        //     attrs: {
-        //         event: (v) => console.error(v),
-        //         options: editableStates.value,
-        //         'option-value': 'id',
-        //         'option-label': 'name',
-        //         // },
-        //     },
-        // },
     },
     {
         name: 'zoneName',
@@ -177,13 +194,7 @@ const columns = computed(() => [
         type: 'number',
     },
 ]);
-const itemLackForm = ref();
 
-const reload = async (data) => {
-    // window.location.reload();
-    console.error(data);
-};
-defineExpose({ reload });
 const emit = defineEmits(['update:selection']);
 
 const tableRef = ref(null);
@@ -291,8 +302,10 @@ function onTicketLackFetched(data) {
                 </QIcon></QTd
             >
         </template>
-        <template #column-ticketFk="{ row }"
-            ><span class="link">{{ row.ticketFk }}</span>
+        <template #column-ticketFk="{ row }">
+            <QBadge class="q-pa-sm" :color="rowColor(row)">
+                {{ row.ticketFk }}
+            </QBadge>
             <TicketDescriptorProxy :id="row.ticketFk"
         /></template>
         <template #column-zoneName="{ row }">
diff --git a/src/pages/Ticket/Negative/components/ChangeItemDialog.vue b/src/pages/Ticket/Negative/components/ChangeItemDialog.vue
index 8414e5fdc..cc3c7352c 100644
--- a/src/pages/Ticket/Negative/components/ChangeItemDialog.vue
+++ b/src/pages/Ticket/Negative/components/ChangeItemDialog.vue
@@ -3,10 +3,8 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import VnSelect from 'src/components/common/VnSelect.vue';
-import FetchData from 'components/FetchData.vue';
 const emit = defineEmits(['update-item']);
 
-const editableItems = ref([]);
 const { t } = useI18n();
 const showChangeItemDialog = ref(false);
 const newItem = ref(null);
@@ -16,31 +14,29 @@ const $props = defineProps({
         default: () => [],
     },
 });
+
 const updateItem = async () => {
     try {
         showChangeItemDialog.value = true;
-        const rowsToUpdate = $props.selectedRows.map(({ ticketFk }) =>
-            axios.post(`Tickets/state`, {
-                ticketFk,
-                code: newItem.value,
-            })
+        const rowsToUpdate = $props.selectedRows.map(({ saleFk }) =>
+            axios.post(`Sales/${saleFk}/updateConcept`, {
+                newConcept: newItem.value,
+            }),
         );
-        await Promise.all(rowsToUpdate);
-        emit('update-item');
+        await Promise.allSettled(rowsToUpdate);
+
+        emit('update-item', newItem.value);
     } catch (err) {
+        console.error('Error updating item:', err);
         return err;
     }
 };
 </script>
 
 <template>
-    <FetchData
-        url="State/editableStates"
-        @on-fetch="(data) => (editableItems = data)"
-        auto-load
-    />
     <QCard class="q-pa-sm">
         <QCardSection class="row items-center justify-center column items-stretch">
+            {{ showChangeItemDialog }}
             <span>{{ t('negative.detail.modal.changeItem.title') }}</span>
             <VnSelect
                 url="Items/WithName"
@@ -50,7 +46,6 @@ const updateItem = async () => {
                 option-label="name"
                 option-value="id"
                 v-model="newItem"
-                @update:model-value="updateItem(row)"
             >
             </VnSelect>
         </QCardSection>
@@ -75,7 +70,9 @@ const updateItem = async () => {
 }
 
 .grid-style-transition {
-    transition: transform 0.28s, background-color 0.28s;
+    transition:
+        transform 0.28s,
+        background-color 0.28s;
 }
 
 #true {
diff --git a/src/pages/Ticket/Negative/components/ChangeQuantityDialog.vue b/src/pages/Ticket/Negative/components/ChangeQuantityDialog.vue
index 5432039fc..f97c83e2e 100644
--- a/src/pages/Ticket/Negative/components/ChangeQuantityDialog.vue
+++ b/src/pages/Ticket/Negative/components/ChangeQuantityDialog.vue
@@ -15,16 +15,17 @@ const $props = defineProps({
 });
 const emit = defineEmits(['update-quantity']);
 const updateQuantity = async () => {
-    showChangeQuantityDialog.value = true;
-    const rowsToUpdate = $props.selectedRows.map(({ saleFk }) =>
-        axios.post(`Sales/${saleFk}/updateQuantity`, {
-            quantity: +newQuantity.value,
-        })
-    );
-
     try {
-        await Promise.all(rowsToUpdate);
-        emit('update-quantity');
+        showChangeQuantityDialog.value = true;
+        const rowsToUpdate = $props.selectedRows.map(({ saleFk }) =>
+            axios.post(`Sales/${saleFk}/updateQuantity`, {
+                quantity: +newQuantity.value,
+            }),
+        );
+
+        const results = await Promise.allSettled(rowsToUpdate);
+        console.log(results);
+        emit('update-quantity', newQuantity.value);
     } catch (err) {
         return err;
     }
@@ -63,7 +64,9 @@ const updateQuantity = async () => {
 }
 
 .grid-style-transition {
-    transition: transform 0.28s, background-color 0.28s;
+    transition:
+        transform 0.28s,
+        background-color 0.28s;
 }
 
 #true {
diff --git a/src/pages/Ticket/Negative/components/ChangeStateDialog.vue b/src/pages/Ticket/Negative/components/ChangeStateDialog.vue
index 51370238b..b56aa7276 100644
--- a/src/pages/Ticket/Negative/components/ChangeStateDialog.vue
+++ b/src/pages/Ticket/Negative/components/ChangeStateDialog.vue
@@ -23,10 +23,11 @@ const updateState = async () => {
             axios.post(`Tickets/state`, {
                 ticketFk,
                 code: newState.value,
-            })
+            }),
         );
-        await Promise.all(rowsToUpdate);
-        emit('update-state');
+        const results = await Promise.allSettled(rowsToUpdate);
+        console.log(results);
+        emit('update-state', newState.value);
     } catch (err) {
         return err;
     }
@@ -71,7 +72,9 @@ const updateState = async () => {
 }
 
 .grid-style-transition {
-    transition: transform 0.28s, background-color 0.28s;
+    transition:
+        transform 0.28s,
+        background-color 0.28s;
 }
 
 #true {
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index cf0dca04c..95870ab95 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -238,16 +238,18 @@ negative:
         isRookie: 'Is rookie'
         turno: 'Turn line'
         showFree: Show Free lines
+        isBasket: 'Basket'
+        hasSubstitution: 'Has substitution'
         modal:
+            changeItem:
+                title: Update item reference
+                placeholder: New item
             changeState:
                 title: Update tickets state
                 placeholder: New state
             changeQuantity:
                 title: Update tickets quantity
                 placeholder: New quantity
-            changeItem:
-                title: Update tickets item
-                placeholder: New item
             split:
                 title: Are you sure you want to split selected tickets?
                 subTitle: Confirm split action
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 493c6c6cb..cb18a4c57 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -239,7 +239,7 @@ negative:
     totalNegative: 'Total negativos'
     days: Rango de dias
     buttonsUpdate:
-        itemProposal: artículo
+        item: artículo
         state: Estado
         quantity: Cantidad
     modalOrigin:
@@ -266,7 +266,12 @@ negative:
         isRookie: 'Cliente nuevo'
         turno: 'Linea turno'
         showFree: Solo estado libre
+        isBasket: 'Cesta'
+        hasSubstitution: 'Tiene sustitución'
         modal:
+            changeItem:
+                title: Actualizar referencia artículo
+                placeholder: Nuevo articulo
             changeState:
                 title: Actualizar estado
                 placeholder: Nuevo estado