From d7f37eff32446ec49823edff23005542bed508ee Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 24 Sep 2024 22:11:41 +0200
Subject: [PATCH] feat: refs #6321 updates

---
 src/pages/Item/components/ItemProposal.vue    | 226 ++++++++++++------
 .../Item/components/ItemProposalProxy.vue     |   2 +-
 src/pages/Item/locale/en.yml                  |   2 +-
 src/pages/Item/locale/es.yml                  |   3 +
 .../Ticket/Negative/TicketLackDetail.vue      |  16 +-
 src/pages/Ticket/Negative/TicketLackTable.vue |   3 +-
 src/pages/Ticket/locale/en.yml                |   6 +-
 7 files changed, 172 insertions(+), 86 deletions(-)

diff --git a/src/pages/Item/components/ItemProposal.vue b/src/pages/Item/components/ItemProposal.vue
index 1a818d47d..8babc731b 100644
--- a/src/pages/Item/components/ItemProposal.vue
+++ b/src/pages/Item/components/ItemProposal.vue
@@ -1,15 +1,14 @@
 <script setup>
 import { ref, computed, onUnmounted } from 'vue';
-import axios from 'axios';
+// import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
 import { toCurrency } from 'filters/index';
 import VnStockValueDisplay from 'src/components/ui/VnStockValueDisplay.vue';
-// import { useDialogPluginComponent } from 'quasar';
 import VnTable from 'src/components/VnTable/VnTable.vue';
-import VnInputNumber from 'src/components/common/VnInputNumber.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const MATCH_VALUES = [5, 6, 7, 8];
 const { t } = useI18n();
@@ -43,10 +42,10 @@ const proposalSelected = ref([]);
 const quantity = ref(-1);
 const defaultColumnAttrs = {
     align: 'center',
-    sortable: true,
+    sortable: false,
 };
-const ticket = computed(() => $props.sales[0]);
-const saleFk = computed(() => ticket.value.saleFk);
+const sale = computed(() => $props.sales[0]);
+const saleFk = computed(() => sale.value.saleFk);
 const statusConditionalValue = (row) => {
     const total = MATCH_VALUES.reduce((acc, i) => acc + row[`match${i}`], 0);
     return total;
@@ -62,26 +61,39 @@ const columns = computed(() => [
         label: t('proposal.available'),
         name: 'available',
         field: 'available',
-        type: 'number',
-    },
-    {
-        ...defaultColumnAttrs,
-        label: t('proposal.difference'),
-        name: 'difference',
+        columnClass: 'shrink',
         style: 'max-width: 75px',
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            columnClass: 'shrink',
+        },
     },
-    {
-        ...defaultColumnAttrs,
-        label: t('proposal.compatibility'),
-        name: 'status',
-        field: statusConditionalValue,
-        sortable: true,
-    },
+    // {
+    //     ...defaultColumnAttrs,
+    //     label: t('proposal.difference'),
+    //     name: 'difference',
+    //     style: 'max-width: 75px',
+    // },
+    // {
+    //     ...defaultColumnAttrs,
+    //     label: t('proposal.compatibility'),
+    //     name: 'status',
+    //     field: statusConditionalValue,
+    //     sortable: true,
+    // },
     {
         ...defaultColumnAttrs,
         label: t('proposal.counter'),
         name: 'counter',
         field: 'counter',
+        columnClass: 'shrink',
+        style: 'max-width: 75px',
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            columnClass: 'shrink',
+        },
     },
 
     {
@@ -91,23 +103,30 @@ const columns = computed(() => [
         name: 'longName',
         field: 'longName',
         columnClass: 'expand',
-        columnFilter: { class: 'expand' },
     },
 
     {
         ...defaultColumnAttrs,
         label: t('proposal.price2'),
         name: 'price2',
-        class: 'shrink',
+        style: 'max-width: 75px',
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            columnClass: 'shrink',
+        },
     },
     {
         ...defaultColumnAttrs,
         label: t('proposal.minQuantity'),
         name: 'minQuantity',
         field: 'minQuantity',
-        component: 'input',
-        type: 'number',
-        class: 'shrink',
+        style: 'max-width: 75px',
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            columnClass: 'shrink',
+        },
     },
     {
         ...defaultColumnAttrs,
@@ -126,13 +145,14 @@ async function confirm() {
         // };
         // const { data } = await axios.post('Sales/replaceItem', params);
         const params = [saleFk.value, proposalSelected.value[0].id, quantity.value];
-        const { data } = await axios.post('Applications/sale_replaceItem/execute-proc', {
-            schema: 'vn',
-            params,
-        });
+        // const { data } = await axios.post('Applications/sale_replaceItem/execute-proc', {
+        //     schema: 'vn',
+        //     params,
+        // });
         proposalTableRef.value.reload();
         emit('itemReplaced', {
             type: 'refresh',
+            quantity: quantity.value,
             itemProposal: proposalSelected.value[0],
             ...params,
         });
@@ -153,18 +173,23 @@ onUnmounted(() => {});
 function handleSelection(value, _) {
     quantity.value = value.available;
 }
-// const isSelectionAvailable = (data) => {
-//     if (!data?.row) return false;
-//     const { row } = data;
-//     return $props.replaceAction && row.available >= Math.abs($props.itemLack.lack);
-// };
+const isSelectionAvailable = (itemProposal) => {
+    const { price2 } = itemProposal;
+    const salePrice = sale.value.price;
+    // debugger;
+    const byPrice = (100 * price2) / salePrice > 30;
+    if (byPrice) {
+        return byPrice;
+    }
+    const byQuantity =
+        (100 * itemProposal.available) / Math.abs($props.itemLack.lack) < 30;
+    return byQuantity;
+    // return $props.replaceAction && row.available >= Math.abs($props.itemLack.lack);
+};
 // watch(proposalSelected, ({ available }) => (quantity.value = available));
 </script>
 <template>
     <div style="min-width: 65vw">
-        {{ sales }}
-        <br />
-        {{ itemLack }}
         <VnTable
             ref="proposalTableRef"
             data-key="ItemsGetSimilar"
@@ -197,16 +222,21 @@ function handleSelection(value, _) {
                         :loading="isLoading"
                         @click="confirm"
                         style="padding-block: 8px"
-                        :disable="proposalSelected.length < 1 || quantity === 0"
+                        :disable="
+                            proposalSelected.length < 1 ||
+                            quantity === 0 ||
+                            quantity > Math.abs(itemLack.lack)
+                        "
                     />
-                    <VnInputNumber
-                        v-model.number="quantity"
+                    <VnInput
+                        v-model="quantity"
                         v-if="proposalSelected.length > 0"
                         @update:model-value="(val) => (quantity = val)"
-                        type="number"
                         min="0"
+                        :max="Math.abs(itemLack.lack)"
                         :label="t('proposal.quantityToReplace')"
                         dense
+                        autofocus
                         class="q-ml-xs"
                     /></div
             ></template>
@@ -215,39 +245,77 @@ function handleSelection(value, _) {
                 <QCheckbox
                     class="q-ma-xs"
                     flat
+                    :disable="isSelectionAvailable(props.row)"
                     v-model="props.selected"
                     @update:model-value="(evt, _) => handleSelection(props.row, null)"
                 >
+                    <QTooltip>
+                        <span v-if="isSelectionAvailable(props.row)">{{
+                            t('proposal.available')
+                        }}</span>
+                        <span v-else>{{ t('proposal.available') }}</span>
+                    </QTooltip>
                 </QCheckbox>
             </template>
             <template #column-longName="{ row }">
-                <!-- <QTd align="left" class="text-primary"> -->
-                <QTooltip>
-                    {{ row.id }}
-                </QTooltip>
-                <!-- <QBtn flat color="blue" dense>{{ }}</QBtn> -->
-                <span class="link">{{ row.longName }}</span>
-                <ItemDescriptorProxy :id="row.id" />
-                <div style="display: flex; flex-direction: row">
-                    <div style="display: flex; flex-direction: column">
-                        <span style="font-size: xx-small">{{ row.price2 }}</span>
-                        <VnImg
-                            :id="row.id"
-                            spinner-color="primary"
-                            :ratio="1"
-                            height="50px"
-                            width="50px"
-                            class="image remove-bg"
-                        />
-                        <span style="font-size: xx-small">ID: {{ row.id }}</span>
+                <QTd style="max-width: 800px">
+                    <QTooltip>
+                        {{ row.id }}
+                    </QTooltip>
+                    <!-- <QBtn flat color="blue" dense>{{ }}</QBtn> -->
+                    <span style="font-size: x-small">({{ row.id }})</span
+                    ><span class="link">{{ row.longName }}</span>
+                    <ItemDescriptorProxy :id="row.id" />
+
+                    <div style="display: flex; flex-direction: row">
+                        <div style="display: flex; flex-direction: column">
+                            <!-- -->
+
+                            <VnImg
+                                :id="row.id"
+                                spinner-color="primary"
+                                :ratio="1"
+                                height="50px"
+                                width="50px"
+                                class="image remove-bg"
+                            />
+                            <!-- <span style="font-size: xx-small">ID:</span> -->
+                        </div>
+                        <div
+                            style="
+                                display: flex;
+                                align-items: center;
+                                flex-direction: column;
+                                justify-content: center;
+                            "
+                        >
+                            <FetchedTags :item="row" class="q-mb-xs" />
+                            <div
+                                :style="{
+                                    background: gradientStyle(
+                                        statusConditionalValue(row)
+                                    ),
+                                }"
+                                class="compatibility"
+                            >
+                                <QTooltip>
+                                    {{ compatibilityItem(statusConditionalValue(row)) }}
+                                </QTooltip>
+                            </div>
+                        </div>
                     </div>
-                    <div style="display: flex; align-items: center">
-                        <FetchedTags :item="row" />
-                    </div>
-                </div>
-                <!-- </QTd> -->
+                </QTd>
             </template>
-            <template #column-status="{ row }">
+            <template #column-available="{ row }">
+                {{ row.available }}
+            </template>
+            <template #column-counter="{ row }">
+                {{ row.counter }}
+            </template>
+            <template #column-minQuantity="{ row }">
+                {{ row.minQuantity }}
+            </template>
+            <!-- <template #column-status="{ row }">
                 <div
                     :style="{ background: gradientStyle(statusConditionalValue(row)) }"
                     class="compatibility"
@@ -256,14 +324,21 @@ function handleSelection(value, _) {
                         {{ compatibilityItem(statusConditionalValue(row)) }}
                     </QTooltip>
                 </div>
-            </template>
+            </template> -->
             <template #column-price2="{ row }">
-                <QTooltip>
-                    {{ toCurrency(row.price2) }}
-                </QTooltip>
-                <span :class="[conditionalValuePrice(row.price2)]">{{
-                    toCurrency(row.price2)
-                }}</span>
+                <div
+                    style="
+                        display: flex;
+                        align-items: center;
+                        flex-direction: column;
+                        justify-content: center;
+                    "
+                >
+                    <VnStockValueDisplay :value="sales[0].price - row.price2" />
+                    <span :class="[conditionalValuePrice(row.price2)]">{{
+                        toCurrency(row.price2)
+                    }}</span>
+                </div>
             </template>
             <template #column-difference="{ row }">
                 <VnStockValueDisplay :value="sales[0].price - row.price2" />
@@ -273,7 +348,8 @@ function handleSelection(value, _) {
 </template>
 <style lang="scss">
 .compatibility {
-    height: 10px;
+    height: 1vh;
+    width: 100%;
 }
 
 .match {
@@ -292,3 +368,7 @@ function handleSelection(value, _) {
     font-size: 16px;
 }
 </style>
+
+<i18n>
+    en:
+</i18n>
diff --git a/src/pages/Item/components/ItemProposalProxy.vue b/src/pages/Item/components/ItemProposalProxy.vue
index 48ce1e4d4..84c614840 100644
--- a/src/pages/Item/components/ItemProposalProxy.vue
+++ b/src/pages/Item/components/ItemProposalProxy.vue
@@ -25,7 +25,7 @@ const $props = defineProps({
 </script>
 <template>
     <QPopupProxy>
-        <QCard class="q-pa-sm">
+        <QCard>
             <QCardSection class="row items-center q-pb-none">
                 <span class="text-h6 text-grey">{{ $t('Item proposal') }}</span>
                 <QSpace />
diff --git a/src/pages/Item/locale/en.yml b/src/pages/Item/locale/en.yml
index fa18b499c..047d3d2e5 100644
--- a/src/pages/Item/locale/en.yml
+++ b/src/pages/Item/locale/en.yml
@@ -100,7 +100,7 @@ proposal:
     value8: value8
     available: Available
     minQuantity: minQuantity
-    price2: price2
+    price2: Price
     located: Located
     counter: Counter
     groupingPrice: Grouping Price
diff --git a/src/pages/Item/locale/es.yml b/src/pages/Item/locale/es.yml
index 7f694fa6d..d9076f47b 100644
--- a/src/pages/Item/locale/es.yml
+++ b/src/pages/Item/locale/es.yml
@@ -90,6 +90,9 @@ itemType:
         temperature: Temperatura
 itemProposal: Artículos similares
 proposal:
+    substitutionAvailable: Sustitución disponible
+    notSubstitutionAvailableByPrice: Sustitución no disponible, 30% de diferencia por precio o cantidad
+    compatibility: Compatibilidad
     title: Items de sustitución para los tickets seleccionados
     itemFk: Item
     longName: Nombre
diff --git a/src/pages/Ticket/Negative/TicketLackDetail.vue b/src/pages/Ticket/Negative/TicketLackDetail.vue
index 925c393f4..0dd099dad 100644
--- a/src/pages/Ticket/Negative/TicketLackDetail.vue
+++ b/src/pages/Ticket/Negative/TicketLackDetail.vue
@@ -30,7 +30,7 @@ const showProposalDialog = ref(false);
 const showChangeQuantityDialog = ref(false);
 const showFree = ref(true);
 const selectedRows = ref([]);
-
+const badgeLackRef = ref();
 const route = useRoute();
 const itemLack = ref(null);
 const originalRowDataCopy = ref(null);
@@ -76,8 +76,11 @@ defineExpose({ reload });
 //     return rows;
 // };
 
-const itemProposalEvt = ({ itemProposal }) => {
+const itemProposalEvt = (data) => {
+    const { itemProposal, quantity } = data;
     itemProposalSelected.value = itemProposal;
+    // badgeLackRef.value.reload();
+    itemLack.value.lack += +quantity;
     tableRef.value.reload();
     // replaceItem();
 };
@@ -134,8 +137,8 @@ const itemProposalSelected = ref(null);
             <QBtnGroup push style="column-gap: 1px">
                 <TicketMassiveUpdate
                     :disable="selectedRows.length < 2"
-                    label="negative.buttonsUpdate.state"
-                    tooltip="negative.detail.modal.changeState.title"
+                    :label="t('negative.buttonsUpdate.state')"
+                    :tooltip="t('negative.detail.modal.changeState.title')"
                 >
                     <ChangeStateDialog
                         ref="changeStateDialogRef"
@@ -143,10 +146,10 @@ const itemProposalSelected = ref(null);
                     ></ChangeStateDialog>
                 </TicketMassiveUpdate>
                 <TicketMassiveUpdate
-                    label="negative.buttonsUpdate.quantity"
+                    :label="t('negative.buttonsUpdate.quantity')"
+                    :tooltip="t('negative.detail.modal.changeQuantity.title')"
                     @click="showChangeQuantityDialog = true"
                     :disable="selectedRows.length < 2"
-                    tooltip="negative.detail.modal.changeQuantity.title"
                 >
                     <ChangeQuantityDialog
                         ref="changeQuantityDialogRef"
@@ -210,6 +213,7 @@ const itemProposalSelected = ref(null);
                             "
                         >
                             <QBadge
+                                ref="badgeLackRef"
                                 class="q-ml-xs"
                                 v-if="itemLack"
                                 text-color="white"
diff --git a/src/pages/Ticket/Negative/TicketLackTable.vue b/src/pages/Ticket/Negative/TicketLackTable.vue
index e06493fd1..f6d7f9f13 100644
--- a/src/pages/Ticket/Negative/TicketLackTable.vue
+++ b/src/pages/Ticket/Negative/TicketLackTable.vue
@@ -177,7 +177,7 @@ const itemLackForm = ref();
 
 const reload = async (data) => {
     // window.location.reload();
-    console.err(data);
+    console.error(data);
 };
 defineExpose({ reload });
 const emit = defineEmits(['update:selection']);
@@ -187,7 +187,6 @@ watch(selectedRows, () => emit('update:selection', selectedRows));
 </script>
 
 <template>
-    {{ selectedRows }}
     <FetchData
         url="States/editableStates"
         @on-fetch="(data) => (editableStates = data)"
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index f676f7628..5db64da6f 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -268,9 +268,9 @@ negative:
     totalNegative: 'Total negatives'
     days: Days
     buttonsUpdate:
-        itemProposal: artículo
-        state: Estado
-        quantity: Cantidad
+        itemProposal: Item
+        state: State
+        quantity: Quantity
     modalOrigin:
         title: 'Update negatives'
         question: 'Select a state to update'