From 6ef53e790acc829e60f20f2be55baa8590a8894d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 17 Jun 2024 12:19:57 +0200
Subject: [PATCH] feat: itemProposal and LackDetail

---
 src/components/ui/VnLv.vue                    |  11 ++
 src/i18n/locale/es.yml                        |   1 +
 src/pages/Item/components/ItemProposal.vue    | 103 ++++++-----
 src/pages/Item/locale/es.yml                  |   1 +
 src/pages/Ticket/Card/TicketSplit.vue         | 113 ++++++++++++
 .../Ticket/Negative/TicketLackDetail.vue      | 165 ++++++++++--------
 6 files changed, 271 insertions(+), 123 deletions(-)
 create mode 100644 src/pages/Ticket/Card/TicketSplit.vue

diff --git a/src/components/ui/VnLv.vue b/src/components/ui/VnLv.vue
index 3220bce6a..9cf31c8f0 100644
--- a/src/components/ui/VnLv.vue
+++ b/src/components/ui/VnLv.vue
@@ -72,4 +72,15 @@ function copyValueText() {
 .info {
     margin-left: 5px;
 }
+
+.image {
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    align-items: center;
+    justify-content: flex-start;
+    & > .q-btn .value {
+        text-transform: uppercase;
+    }
+}
 </style>
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index c12f87050..d8c6c6b50 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -29,6 +29,7 @@ globals:
     saveAndContinue: Guardar y continuar
     remove: Eliminar
     reset: Restaurar
+    refresh: Actualizar
     close: Cerrar
     cancel: Cancelar
     clone: Clonar
diff --git a/src/pages/Item/components/ItemProposal.vue b/src/pages/Item/components/ItemProposal.vue
index 153d825ad..b220dc5d7 100644
--- a/src/pages/Item/components/ItemProposal.vue
+++ b/src/pages/Item/components/ItemProposal.vue
@@ -5,15 +5,19 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import { useSession } from 'src/composables/useSession';
-
+import VnLv from 'src/components/ui/VnLv.vue';
+const MATCH_VALUES = [5, 6, 7, 8];
 const { t } = useI18n();
 const session = useSession();
 
 const primaryColor = 'red';
 const colorSpacer = '#ecf0f1';
-const gradientStyle = computed(() => {
-    return `linear-gradient(to right, ${primaryColor} ${compatibility.value}, ${colorSpacer} 10%)`;
-});
+const compatibilityItem = (value) => `${100 * (value / MATCH_VALUES.length)}%`;
+const gradientStyle = (value) =>
+    `linear-gradient(to right, ${primaryColor} ${compatibilityItem(
+        value
+    )}, ${colorSpacer} 10%)`;
+
 const $props = defineProps({
     item: {
         type: Object,
@@ -29,26 +33,24 @@ const $props = defineProps({
 const proposalSelected = ref([]);
 const quantity = ref(-1);
 const token = session.getTokenMultimedia();
-const index = ref(0);
-const currentTicket = computed(() => $props.tickets[index.value]);
+// const index = ref(0);
+// const currentTicket = computed(() => $props.tickets[index.value]);
 const showProposalDialog = ref(false);
 const defaultColumnAttrs = {
     align: 'left',
     sortable: true,
 };
-const compatibility = ref(null);
+// const compatibility = ref(null);
 // const compatibility = computed(() => `linear-gradient(to right,red 10%, white 10%);`);
 const statusConditionalValue = (row) => {
-    const values = [5, 6, 7, 8];
-    const total = values.reduce((acc, i) => acc + row[`match${i}`], 0);
-    const STATUS_VALUES = { 1: 'white', 2: '$secondary', 3: 'positive', 4: 'warning' };
-    const status = STATUS_VALUES[total];
-    compatibility.value = `${100 * (total / values.length)}%`;
-    return { status, total, compatibility };
+    const total = MATCH_VALUES.reduce((acc, i) => acc + row[`match${i}`], 0);
+    // const STATUS_VALUES = { 1: 'white', 2: '$secondary', 3: 'positive', 4: 'warning' };
+    // const status = STATUS_VALUES[total];
+    // const compatibility = `${100 * (total / values.length)}%`;
+    return total;
 };
 // const conditionalValue = (tag) => (tag === 1 ? 'match' : 'not-match');
-const conditionalValuePrice = (price) =>
-    price > currentTicket.value.price * 1.3 ? 'match' : 'not-match';
+const conditionalValuePrice = (price) => (price > 1.3 ? 'match' : 'not-match');
 // const changeTicket = (type, _index = 0) => {
 //     const value = type ? 1 : -1;
 //     const nextIndex = index.value + value + _index;
@@ -75,6 +77,7 @@ const columns = computed(() => [
         label: t('Compatibildiad'),
         name: 'status',
         field: statusConditionalValue,
+        sortable: true,
     },
     {
         ...defaultColumnAttrs,
@@ -84,7 +87,7 @@ const columns = computed(() => [
     },
 
     {
-        align: 'center',
+        align: 'left',
         sortable: true,
         label: t('proposal.longName'),
         name: 'longName',
@@ -124,11 +127,11 @@ const columns = computed(() => [
         field: 'value8',
         classes: ({ match8 }) => conditionalValue(match8),
     },*/
-    {
-        ...defaultColumnAttrs,
-        label: t('proposal.tags'),
-        name: 'tags',
-    },
+    // {
+    //     ...defaultColumnAttrs,
+    //     label: t('proposal.tags'),
+    //     name: 'tags',
+    // },
 
     {
         ...defaultColumnAttrs,
@@ -171,32 +174,38 @@ async function confirm() {
     <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showProposalDialog" full-width>
         <QCard class="q-pa-lg">
             <QCardSection class="row items-center q-pb-none">
-                <QImg
-                    :src="`/api/Images/catalog/50x50/${item.id}/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 class="text"
-                    ><sub>{{ item.longName }}</sub></span
-                >
+                <VnLv class="image">
+                    <template #label>
+                        <QImg
+                            :src="`/api/Images/catalog/50x50/${item.id}/download?access_token=${token}`"
+                            spinner-color="primary"
+                            :ratio="1"
+                            height="50px"
+                            width="50px"
+                            class="image remove-bg"
+                            :alt="'asdads'"
+                        />
+                    </template>
+                    <template #value>
+                        <QBtn flat class="link text-blue">
+                            {{ item.longName }}
+                            <ItemDescriptorProxy :id="item.id" />
+                        </QBtn>
+                        <FetchedTags class="q-ml-md" :item="item" :max-length="5" />
+                    </template>
+                </VnLv>
                 <QSpace />
                 <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">
                     <!-- {{ currentTicket }} -->
-                    {{
+                    <!-- {{
                         t('proposal.title', {
                             ticketFk: currentTicket.ticketFk,
                             saleFk: currentTicket.saleFk,
                         })
-                    }}
+                    }} -->
                 </span>
             </QCardSection>
             <QCardSection class="row items-center justify-center column items-stretch">
@@ -251,7 +260,7 @@ async function confirm() {
                                     </QTr> -->
                                 </template>
                                 <template #body-cell-longName="{ row, value }">
-                                    <QTd align="right" class="text-primary">
+                                    <QTd align="left" class="text-primary">
                                         <QTooltip>
                                             {{ row.id }}
                                         </QTooltip>
@@ -262,30 +271,28 @@ async function confirm() {
                                             height="50px"
                                             width="50px"
                                             class="image remove-bg"
-                                            :alt="'asdads'"
-                                        />
+                                            :alt="'asdads'" />
                                         <QBtn flat color="blue" dense>{{ value }}</QBtn>
 
                                         <ItemDescriptorProxy :id="row.id" />
-                                    </QTd>
+                                        <FetchedTags :item="row" :max-length="5"
+                                    /></QTd>
                                 </template>
                                 <template #body-cell-status="{ value }">
                                     <QTd class="col" align="center">
                                         <div
-                                            :style="{ background: gradientStyle }"
+                                            :style="{ background: gradientStyle(value) }"
                                             class="compatibility"
                                         >
                                             <QTooltip>
-                                                {{ value }}
+                                                {{ compatibilityItem(value) }}
                                             </QTooltip>
                                         </div>
                                     </QTd>
                                 </template>
-                                <template #body-cell-tags="{ row }">
-                                    <QTd class="col" align="center"
-                                        ><FetchedTags :item="row" :max-length="5"
-                                    /></QTd>
-                                </template>
+                                <!-- <template #body-cell-tags="{ row }">
+                                    <QTd class="col" align="center"> </QTd>
+                                </template> -->
 
                                 <template #body-cell-price2="{ row, value }">
                                     <QTd
diff --git a/src/pages/Item/locale/es.yml b/src/pages/Item/locale/es.yml
index 2132f9cd3..aa09966a5 100644
--- a/src/pages/Item/locale/es.yml
+++ b/src/pages/Item/locale/es.yml
@@ -88,6 +88,7 @@ itemType:
         worker: Trabajador
         category: Reino
         temperature: Temperatura
+itemProposal: Artículos similares
 proposal:
     title: Items de sustitución para los tickets seleccionados
     itemFk: Item
diff --git a/src/pages/Ticket/Card/TicketSplit.vue b/src/pages/Ticket/Card/TicketSplit.vue
new file mode 100644
index 000000000..79e2e4f4f
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketSplit.vue
@@ -0,0 +1,113 @@
+<script setup>
+import { ref, toRefs } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify';
+import { useValidator } from 'src/composables/useValidator';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelect from 'components/common/VnSelect.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+import FetchData from 'src/components/FetchData.vue';
+import { watch } from 'vue';
+import { onMounted } from 'vue';
+const { t } = useI18n();
+const columns = [
+    {
+        name: 'name',
+        required: true,
+        label: 'Dessert (100g serving)',
+        align: 'left',
+        field: (row) => row.name,
+        format: (val) => `${val}`,
+        sortable: true,
+    },
+];
+
+const rows = [
+    {
+        name: 'Frozen Yogurt',
+        calories: 159,
+        fat: 6.0,
+        carbs: 24,
+        protein: 4.0,
+        sodium: 87,
+        calcium: '14%',
+        iron: '1%',
+    },
+];
+</script>
+
+<template>
+    <QBtn color="primary" icon="show_chart">
+        <QPopupProxy ref="popupProxyRef" style="max-width: none">
+            <QCard class="column q-pa-md">
+                <span class="text-body1 q-mb-sm">{{ t('Campaign consumption') }}</span>
+                <VnRow class="q-gutter-md q-mb-md" style="min-width: 70vw">
+                    <QCard class="column q-pa-md vn-one">
+                        <VnRow class="row q-gutter-md q-mb-md">
+                            <span class="text-body1 q-mb-sm"
+                                >Lineas a transferir</span
+                            ></VnRow
+                        >
+                        <QTable
+                            flat
+                            bordered
+                            title="Treats"
+                            :rows="rows"
+                            :columns="columns"
+                            row-key="name"
+                        />
+                    </QCard>
+                    <QCard class="column q-pa-md vn-one">
+                        <VnRow class="row q-gutter-md q-mb-md">
+                            <span class="text-body1 q-mb-sm"
+                                >Ticket destinatario</span
+                            ></VnRow
+                        >
+                        <QTable
+                            flat
+                            bordered
+                            title="Treats"
+                            :rows="rows"
+                            :columns="columns"
+                            row-key="name"
+                        />
+                    </QCard>
+                </VnRow>
+                <!-- <div class="q-mt-lg row justify-end">
+                    <QBtn
+                        :label="t('globals.cancel')"
+                        color="primary"
+                        flat
+                        class="q-mr-md"
+                        v-close-popup
+                    />
+                    <QBtn
+                        :label="t('globals.save')"
+                        type="submit"
+                        color="primary"
+                        @click="onSubmit()"
+                    />
+                </div> -->
+            </QCard>
+        </QPopupProxy>
+        <QTooltip>{{ t('Campaign consumption') }}</QTooltip>
+    </QBtn>
+</template>
+
+<i18n>
+    en:
+        params:
+            valentinesDay: Valentine's Day
+            mothersDay: Mother's Day
+            allSaints: All Saints' Day
+    es:
+        params:
+            valentinesDay: Día de San Valentín
+            mothersDay: Día de la Madre
+            allSaints: Día de Todos los Santos
+        Campaign consumption: Consumo campaña
+        Campaign: Campaña
+        From: Desde
+        To: Hasta
+</i18n>
diff --git a/src/pages/Ticket/Negative/TicketLackDetail.vue b/src/pages/Ticket/Negative/TicketLackDetail.vue
index 49ee82695..54be78967 100644
--- a/src/pages/Ticket/Negative/TicketLackDetail.vue
+++ b/src/pages/Ticket/Negative/TicketLackDetail.vue
@@ -8,7 +8,10 @@ import ChangeQuantityDialog from 'pages/Ticket/Negative/components/ChangeQuantit
 import ChangeStateDialog from 'pages/Ticket/Negative/components/ChangeStateDialog.vue';
 import ItemProposal from 'pages/Item/components/ItemProposal.vue';
 import { useVnConfirm } from 'composables/useVnConfirm';
-
+import VnLv from 'src/components/ui/VnLv.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import TickerSplit from '../Card/TicketSplit.vue';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VnSelect from 'components/common/VnSelect.vue';
@@ -20,7 +23,6 @@ import { useStateStore } from 'stores/useStateStore';
 import { useDialogPluginComponent } from 'quasar';
 import { useSession } from 'src/composables/useSession';
 import ZoneDescriptorProxy from 'pages/Zone/Card/ZoneDescriptorProxy.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 onMounted(() => {
     stateStore.rightDrawer = false;
     nextTick(() => {
@@ -353,74 +355,71 @@ const split = async () => {
             </QBtn></QBtnGroup
         >
     </Teleport> -->
-    <Teleport to="#st-data" v-if="stateStore?.isSubToolbarShown()">
-        <QSpace />
-        <QBtnGroup push style="column-gap: 1px">
-            <QBtn
-                icon="refresh"
-                color="primary"
-                :label="t('negative.buttonsUpdate.state')"
-                :disable="selectedRows.length < 2"
-                @click="showChangeStateDialog = true"
-            >
-                <QTooltip bottom anchor="bottom right">
-                    {{ t('negative.detail.modal.changeState.title') }}
-                </QTooltip>
-            </QBtn>
-            <QBtn
-                icon="refresh"
-                color="primary"
-                :label="t('negative.buttonsUpdate.quantity')"
-                @click="showChangeQuantityDialog = true"
-                :disable="selectedRows.length < 2"
-            >
-                <QTooltip bottom anchor="bottom right">
-                    {{ t('negative.detail.modal.changeQuantity.title') }}
-                </QTooltip>
-            </QBtn>
-            <QBtn
-                icon="refresh"
-                color="primary"
-                :label="t('negative.buttonsUpdate.itemProposal')"
-                @click="showChangeQuantityDialog = true"
-                :disable="selectedRows.length < 2"
-            >
-                <QTooltip bottom anchor="bottom right">
-                    {{ t('negative.itemProposal') }}
-                </QTooltip>
-            </QBtn>
-            <QBtn
-                color="primary"
-                @click="
-                    openConfirmationModal(
-                        t('negative.detail.modal.split.title'),
-                        t('negative.detail.modal.split.subTitle'),
-                        split,
-                        () => (showSplitDialog = true)
-                    )
-                "
-                :disable="selectedRows.length < 1"
-                icon="call_split"
-            >
-                <QTooltip bottom anchor="bottom right">
-                    {{ t('globals.split') }}
-                </QTooltip>
-            </QBtn>
-            <QBtn
-                icon="vn:item"
-                color="primary"
-                :disable="selectedRows.length < 1"
-                @click="showProposalDialog = true"
-            >
-                <QTooltip bottom anchor="bottom right">
-                    {{ t('Item proposal') }}
-                </QTooltip>
-            </QBtn>
-        </QBtnGroup>
-        <QCheckbox v-model="showFree" :label="t('negative.detail.showFree')" />
-    </Teleport>
+    <VnSubToolbar>
+        <template #st-data>
+            <QBtnGroup push style="column-gap: 1px">
+                <QBtn
+                    icon="refresh"
+                    color="primary"
+                    :label="t('negative.buttonsUpdate.state')"
+                    :disable="selectedRows.length < 2"
+                    @click="showChangeStateDialog = true"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('negative.detail.modal.changeState.title') }}
+                    </QTooltip>
+                </QBtn>
+                <QBtn
+                    icon="refresh"
+                    color="primary"
+                    :label="t('negative.buttonsUpdate.quantity')"
+                    @click="showChangeQuantityDialog = true"
+                    :disable="selectedRows.length < 2"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('negative.detail.modal.changeQuantity.title') }}
+                    </QTooltip>
+                </QBtn>
+                <QBtn
+                    icon="refresh"
+                    color="primary"
+                    :label="t('negative.buttonsUpdate.itemProposal')"
+                    @click="showChangeQuantityDialog = true"
+                    :disable="selectedRows.length < 2"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.refresh') }}
+                        {{ t('negative.buttonsUpdate.itemProposal') }}
+                    </QTooltip>
+                </QBtn>
+                <TickerSplit></TickerSplit>
+                <QBtn
+                    color="primary"
+                    @click="
+                        openConfirmationModal(
+                            t('negative.detail.modal.split.title'),
+                            t('negative.detail.modal.split.subTitle'),
+                            split,
+                            () => (showSplitDialog = true)
+                        )
+                    "
+                    :disable="selectedRows.length < 1"
+                    icon="call_split"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.split') }}
+                    </QTooltip>
+                </QBtn>
+                <QBtn icon="vn:item" color="primary" @click="showProposalDialog = true">
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('itemProposal') }}
+                    </QTooltip>
+                </QBtn>
+            </QBtnGroup>
+            <QCheckbox v-model="showFree" :label="t('negative.detail.showFree')" />
+        </template>
+    </VnSubToolbar>
     <QPage>
-        <VnSubToolbar />
         <div class="full-width q-pa-md">
             <VnPaginate
                 :data-key="URL_KEY"
@@ -431,8 +430,10 @@ const split = async () => {
             >
                 <!-- :rows="rows" -->
                 <template #body="{ rows }">
-                    <!-- <VnRow style="align-items: center">
-                        <div>
+                    {{ item }}
+
+                    <VnLv class="image">
+                        <template #label>
                             <QImg
                                 :src="`/api/Images/catalog/50x50/${entityId}/download?access_token=${token}`"
                                 spinner-color="primary"
@@ -442,8 +443,22 @@ const split = async () => {
                                 class="image remove-bg"
                                 :alt="'asdads'"
                             />
-
-                            <span class="text-h6">{{ item.longName }}</span>
+                        </template>
+                        <template #value>
+                            <QBtn flat class="link text-blue">
+                                {{ item.longName }}
+                                <ItemDescriptorProxy :id="entityId" />
+                            </QBtn>
+                            <FetchedTags class="q-ml-md" :item="item" :max-length="5" />
+                        </template>
+                    </VnLv>
+                    <!-- <ItemDescriptorProxy :id="entityId" />
+                    <span class="text-h6">{{ item.longName }}</span>
+                    <span class="text-h6"
+                    ><sub>{{ item.longName }}</sub></span
+                    > -->
+                    <!-- <VnRow style="align-items: center">
+                        <div>
                         </div>
                         <QIcon name="arrow_right" size="lg" />
                         <VnSelectDialog action-icon="call_split"></VnSelectDialog
@@ -552,13 +567,13 @@ const split = async () => {
     ></QPage>
     <ChangeStateDialog
         ref="changeStateDialogRef"
-        @hide="onDetailDialogHide"
+        @hide="onDialogHide"
         v-model="showChangeStateDialog"
         :selected-rows="selectedRows"
     ></ChangeStateDialog>
     <ChangeQuantityDialog
         ref="changeQuantityDialogRef"
-        @hide="onDetailDialogHide"
+        @hide="onDialogHide"
         v-model="showChangeQuantityDialog"
         :selected-rows="selectedRows"
     >