From 4226c52fc502241f7e1e5ce82859a565e3dfdf9e Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 12 Jun 2024 22:23:58 +0200
Subject: [PATCH] perf: ItemProposal

---
 src/components/ui/VnPaginate.vue              |   3 -
 src/pages/Item/components/ItemProposal.vue    | 174 +++++++-----------
 src/pages/Item/locale/es.yml                  |   2 +-
 .../Ticket/Negative/TicketLackDetail.vue      |  25 +--
 4 files changed, 82 insertions(+), 122 deletions(-)

diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index fdd977552..6619c68f6 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -160,13 +160,10 @@ defineExpose({ fetch, addFilter });
 
 <template>
     <div v-if="append" class="full-width">
-        {{ !props.autoLoad && !store.data && !isLoading }}
-        {{ props.skeleton && props.autoLoad && !store.data }}
         <div
             v-if="!props.autoLoad && !store.data && !isLoading"
             class="info-row q-pa-md text-center"
         >
-            asd
             <h5>
                 {{ t('No data to display') }}
             </h5>
diff --git a/src/pages/Item/components/ItemProposal.vue b/src/pages/Item/components/ItemProposal.vue
index a5cfc0317..efff28830 100644
--- a/src/pages/Item/components/ItemProposal.vue
+++ b/src/pages/Item/components/ItemProposal.vue
@@ -14,11 +14,17 @@ const $props = defineProps({
         required: true,
         default: () => {},
     },
+    tickets: {
+        type: Array,
+        required: false,
+        default: () => [],
+    },
 });
 const proposalSelected = ref([]);
 const quantity = ref(-1);
 const token = session.getTokenMultimedia();
-
+const index = ref(0);
+const currentTicket = computed(() => $props.tickets[index.value]);
 const showProposalDialog = ref(false);
 const defaultColumnAttrs = {
     align: 'left',
@@ -32,8 +38,16 @@ const statusConditionalValue = (row) => {
     return status;
 };
 const conditionalValue = (tag) => (tag === 1 ? 'match' : 'not-match');
-const conditionalValuePrice = ({ price2, priceOld }) =>
-    price2 > priceOld * 1.3 ? 'match' : 'not-match';
+const conditionalValuePrice = (price) =>
+    price > currentTicket.value.price * 1.3 ? 'match' : 'not-match';
+const changeTicket = (type, _index = 0) => {
+    const value = type ? 1 : -1;
+    const nextIndex = index.value + value + _index;
+    const ticket = $props.tickets[nextIndex];
+    if (ticket.ticketFk === currentTicket.value.ticketFk)
+        return changeTicket(true, nextIndex - 1);
+    index.value = nextIndex;
+};
 const columns = computed(() => [
     {
         ...defaultColumnAttrs,
@@ -111,7 +125,6 @@ const columns = computed(() => [
         label: t('proposal.price2'),
         name: 'price2',
         field: 'price2',
-        classes: ({ match8 }) => conditionalValuePrice(match8),
     },
     {
         ...defaultColumnAttrs,
@@ -120,20 +133,6 @@ const columns = computed(() => [
         field: 'located',
     },
 ]);
-const columnPrices = computed(() => [
-    {
-        ...defaultColumnAttrs,
-        label: t('proposal.ticket'),
-        name: 'ticketFk',
-        field: 'counter',
-    },
-    {
-        ...defaultColumnAttrs,
-        label: t('proposal.Diff'),
-        name: 'Diff',
-        field: 'counter',
-    },
-]);
 async function confirm() {
     quantity.value = 0;
     // const response = { address: address.value };
@@ -170,13 +169,38 @@ async function confirm() {
                 <QBtn icon="close" flat round dense v-close-popup />
             </QCardSection>
             <QCardSection class="row items-center justify-center column items-stretch">
-                <span class="text-h6 text-grey">{{ t('proposal.title') }}</span>
+                <span class="text-h6 text-grey">
+                    {{ currentTicket }}
+                    {{
+                        t('proposal.title', {
+                            ticketFk: currentTicket.ticketFk,
+                            saleFk: currentTicket.saleFk,
+                        })
+                    }}**
+                </span>
             </QCardSection>
             <QCardSection class="row items-center justify-center column items-stretch">
-                <VnRow style="display: flex">
+                <!-- <VnRow style="display: flex"> -->
+                <div class="calendars-header" v-if="$props.tickets.length > 0">
+                    <QBtn
+                        icon="arrow_left"
+                        flat
+                        class="full-height"
+                        @click="changeTicket(false)"
+                        :disable="index === 0"
+                    />
+                    <!-- <span>{{ currentTicket.ticketFk }}</span> -->
+                    <QBtn
+                        icon="arrow_right"
+                        flat
+                        class="full-height"
+                        @click="changeTicket(true)"
+                        :disable="index === $props.tickets.length - 1"
+                    />
+                </div>
+                <div>
                     <VnPaginate
                         :append="false"
-                        style="width: 70vw !important"
                         data-key="ItemsGetSimilar"
                         url="Items/getSimilar"
                         :filter="{
@@ -204,8 +228,8 @@ async function confirm() {
                                 :rows-per-page-options="[0]"
                                 hide-pagination
                             >
-                                <template #top-row="{ cols }">
-                                    <QTr>
+                                <template #top-row>
+                                    <!-- <QTr>
                                         <QTd />
                                         <QTd
                                             v-for="(col, index) in cols"
@@ -221,7 +245,7 @@ async function confirm() {
                                                 dense
                                             />
                                         </QTd>
-                                    </QTr>
+                                    </QTr> -->
                                 </template>
                                 <template #body-cell-longName="{ row, value }">
                                     <QTd align="right" class="text-primary">
@@ -237,88 +261,22 @@ async function confirm() {
                                         ></div>
                                     </QTd>
                                 </template>
-                            </QTable>
-                        </template>
-                    </VnPaginate>
-                    <VnPaginate
-                        class="q-ml-sm"
-                        :append="false"
-                        style="width: 20vw !important; margin-left: 40px !important"
-                        data-key="ItemsGetSimilar"
-                        url="Items/getSimilar"
-                        :filter="{
-                            where: {
-                                itemFk: $props.item.itemFk,
-                                warehouseFk: $props.item.warehouseFk,
-                            },
-                        }"
-                        auto-load
-                    >
-                        <template #body>
-                            <QTable
-                                :rows="[
-                                    {
-                                        name: 'Frozen Yogurt',
-                                        calories: 159,
-                                        fat: 6.0,
-                                        carbs: 24,
-                                        protein: 4.0,
-                                        sodium: 87,
-                                        calcium: '14%',
-                                        iron: '1%',
-                                    },
-                                ]"
-                                :columns="columnPrices"
-                                row-key="id"
-                                selection="single"
-                                :pagination="{ rowsPerPage: 0 }"
-                                class="full-width q-mt-md"
-                                :no-data-label="t('globals.noResults')"
-                                v-model:selected="proposalSelected"
-                                :dense="$q.screen.lt.md"
-                                flat
-                                :grid="$q.screen.lt.md"
-                                auto-load
-                                :rows-per-page-options="[0]"
-                                hide-pagination
-                            >
-                                <template #top-row="{ cols }">
-                                    <QTr>
-                                        <QTd />
-                                        <QTd
-                                            v-for="(col, index) in cols"
-                                            :key="index"
-                                            style="max-width: 100px"
-                                        >
-                                            <component
-                                                :is="col.columnFilter.component"
-                                                v-if="col.columnFilter"
-                                                v-model="col.columnFilter.filterValue"
-                                                v-bind="col.columnFilter.attrs"
-                                                v-on="col.columnFilter.event(col)"
-                                                dense
-                                            />
-                                        </QTd>
-                                    </QTr>
-                                </template>
-                                <template #body-cell-longName="{ row, value }">
-                                    <QTd align="right" class="text-primary">
-                                        <QBtn flat color="blue" dense>{{ value }}</QBtn>
-                                        <ItemDescriptorProxy :id="row.id" />
-                                    </QTd>
-                                </template>
-                                <template #body-cell-status="{ value }">
-                                    <QTd class="col" align="center">
-                                        <div
-                                            :style="{ 'background-color': value }"
-                                            style="height: 10px"
-                                        ></div>
+                                <template #body-cell-price2="{ row, value }">
+                                    <QTd
+                                        class="col"
+                                        align="center"
+                                        :class="[conditionalValuePrice(value)]"
+                                    >
+                                        <QTooltip>
+                                            {{ row.price2 }}/{{ currentTicket.price }}
+                                        </QTooltip>
+                                        {{ value }}
                                     </QTd>
                                 </template>
                             </QTable>
                         </template>
                     </VnPaginate>
-                </VnRow>
+                </div>
             </QCardSection>
             <QCardActions align="right">
                 <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
@@ -350,9 +308,13 @@ async function confirm() {
 .not-match {
     color: inherit;
 }
+.calendars-header {
+    height: 45px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: $primary;
+    font-weight: bold;
+    font-size: 16px;
+}
 </style>
-
-<i18n>
-        es:
-            xx: xx
-    </i18n>
diff --git a/src/pages/Item/locale/es.yml b/src/pages/Item/locale/es.yml
index 14d643644..e4b08c5d2 100644
--- a/src/pages/Item/locale/es.yml
+++ b/src/pages/Item/locale/es.yml
@@ -89,7 +89,7 @@ itemType:
         category: Reino
         temperature: Temperatura
 proposal:
-    title: Items de sustitución
+    title: Items de sustitución para el ticket {ticketFk}:{saleFk}
     itemFk: Item
     longName: Nombre
     subName: Productor
diff --git a/src/pages/Ticket/Negative/TicketLackDetail.vue b/src/pages/Ticket/Negative/TicketLackDetail.vue
index 9322e8029..52f3b1c74 100644
--- a/src/pages/Ticket/Negative/TicketLackDetail.vue
+++ b/src/pages/Ticket/Negative/TicketLackDetail.vue
@@ -343,18 +343,6 @@ const split = async () => {
         >
     </Teleport>
     <Teleport to="#st-data" v-if="stateStore?.isSubToolbarShown()">
-        <QImg
-            :src="`/api/Images/catalog/50x50/${item.itemFk}/download?access_token=${token}`"
-            spinner-color="primary"
-            :ratio="1"
-            height="50px"
-            width="50px"
-            class="image remove-bg"
-            :alt="'asdads'"
-        />
-
-        <span class="text-h6">{{ item.longName }}</span>
-        <span>{{ item }}</span>
         <QSpace />
         <QBtnGroup push style="column-gap: 1px">
             <QBtn
@@ -416,6 +404,18 @@ const split = async () => {
     >
         <!-- :rows="rows" -->
         <template #body="{ rows }">
+            <QImg
+                :src="`/api/Images/catalog/50x50/${item.itemFk}/download?access_token=${token}`"
+                spinner-color="primary"
+                :ratio="1"
+                height="50px"
+                width="50px"
+                class="image remove-bg"
+                :alt="'asdads'"
+            />
+
+            <span class="text-h6">{{ item.longName }}</span>
+
             <QTable
                 ref="tableRef"
                 :columns="columns"
@@ -533,5 +533,6 @@ const split = async () => {
         @hide="onDialogHide"
         v-model="showProposalDialog"
         :item="item"
+        :tickets="selectedRows"
     ></ItemProposal>
 </template>