From b370fe673bb359f6695d3bcc240207ea148707ac Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 10 Jun 2024 17:06:20 +0200
Subject: [PATCH] updates

---
 src/components/ui/VnPaginate.vue              |   9 +-
 src/pages/Item/components/ItemProposal.vue    | 223 +++++++++++++-----
 src/pages/Ticket/Negative/HandleSplited.vue   |   2 +-
 .../Ticket/Negative/TicketLackDetail.vue      |  33 ++-
 4 files changed, 197 insertions(+), 70 deletions(-)

diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index ed0afc5d2..fdd977552 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -6,6 +6,10 @@ import { useArrayData } from 'composables/useArrayData';
 const { t } = useI18n();
 
 const props = defineProps({
+    append: {
+        type: Boolean,
+        default: true,
+    },
     dataKey: {
         type: String,
         required: true,
@@ -155,11 +159,14 @@ defineExpose({ fetch, addFilter });
 </script>
 
 <template>
-    <div class="full-width">
+    <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 64ee170fe..a5cfc0317 100644
--- a/src/pages/Item/components/ItemProposal.vue
+++ b/src/pages/Item/components/ItemProposal.vue
@@ -120,7 +120,20 @@ 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 };
@@ -160,70 +173,152 @@ async function confirm() {
                 <span class="text-h6 text-grey">{{ t('proposal.title') }}</span>
             </QCardSection>
             <QCardSection class="row items-center justify-center column items-stretch">
-                <VnPaginate
-                    data-key="ItemsGetSimilar"
-                    url="Items/getSimilar"
-                    :filter="{
-                        where: {
-                            itemFk: $props.item.itemFk,
-                            warehouseFk: $props.item.warehouseFk,
-                        },
-                    }"
-                    auto-load
-                >
-                    <template #body="{ rows }">
-                        <QTable
-                            :rows="rows"
-                            :columns="columns"
-                            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
-                                        />
+                <VnRow style="display: flex">
+                    <VnPaginate
+                        :append="false"
+                        style="width: 70vw !important"
+                        data-key="ItemsGetSimilar"
+                        url="Items/getSimilar"
+                        :filter="{
+                            where: {
+                                itemFk: $props.item.itemFk,
+                                warehouseFk: $props.item.warehouseFk,
+                            },
+                        }"
+                        auto-load
+                    >
+                        <template #body="{ rows }">
+                            <QTable
+                                :rows="rows"
+                                :columns="columns"
+                                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>
-                                </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>
-                                </QTd>
-                            </template>
-                        </QTable>
-                    </template>
-                </VnPaginate>
+                                </template>
+                                <template #body-cell-status="{ value }">
+                                    <QTd class="col" align="center">
+                                        <div
+                                            :style="{ 'background-color': value }"
+                                            style="height: 10px"
+                                        ></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>
+                                    </QTd>
+                                </template>
+                            </QTable>
+                        </template>
+                    </VnPaginate>
+                </VnRow>
             </QCardSection>
             <QCardActions align="right">
                 <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
diff --git a/src/pages/Ticket/Negative/HandleSplited.vue b/src/pages/Ticket/Negative/HandleSplited.vue
index b2bf94f26..381e72c68 100644
--- a/src/pages/Ticket/Negative/HandleSplited.vue
+++ b/src/pages/Ticket/Negative/HandleSplited.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref, toRefs } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import { useDialogPluginComponent } from 'quasar';
diff --git a/src/pages/Ticket/Negative/TicketLackDetail.vue b/src/pages/Ticket/Negative/TicketLackDetail.vue
index c80808017..9322e8029 100644
--- a/src/pages/Ticket/Negative/TicketLackDetail.vue
+++ b/src/pages/Ticket/Negative/TicketLackDetail.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { computed, nextTick, onMounted, onUnmounted, ref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { QBtn, QCheckbox } from 'quasar';
+import { QBtn, QCheckbox, useQuasar } from 'quasar';
 import axios from 'axios';
 import HandleSplited from 'pages/Ticket/Negative/HandleSplited.vue';
 import ChangeQuantityDialog from 'pages/Ticket/Negative/ChangeQuantityDialog.vue';
@@ -18,6 +18,7 @@ import { toDate, toHour } from 'src/filters';
 import useNotify from 'src/composables/useNotify.js';
 import { useStateStore } from 'stores/useStateStore';
 import { useDialogPluginComponent } from 'quasar';
+import { useSession } from 'src/composables/useSession';
 
 const { openConfirmationModal } = useVnConfirm();
 const { t } = useI18n();
@@ -37,6 +38,9 @@ const componentIsRendered = ref(false);
 const showFree = ref(true);
 const resultSplit = ref([]);
 const selectedRows = ref([]);
+const session = useSession();
+
+const token = session.getTokenMultimedia();
 
 const originalRowDataCopy = ref(null);
 const $props = defineProps({
@@ -298,8 +302,11 @@ const handleRows = (rows) => {
     if (showFree.value) return rows.filter(({ alertLevel }) => alertLevel === 0);
     return rows.sort(freeFirst);
 };
+const quasar = useQuasar();
+
 const split = async () => {
     const body = selectedRows.value;
+
     // const {data} = await axios.post(`Tickets/split`, body);
     // resultSplit.value = data;
     resultSplit.value = [
@@ -307,6 +314,12 @@ const split = async () => {
         { ticket: 32, newTicket: 1000006, status: 'noSplit' },
         { ticket: 32, newTicket: 1000007, status: 'error' },
     ];
+    quasar.dialog({
+        component: HandleSplited,
+        componentProps: {
+            tickets: resultSplit.value,
+        },
+    });
 };
 </script>
 
@@ -330,6 +343,19 @@ 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
                 color="primary"
@@ -381,7 +407,6 @@ const split = async () => {
         </QBtnGroup>
         <QCheckbox v-model="showFree" :label="t('negative.detail.showFree')" />
     </Teleport>
-
     <VnPaginate
         :data-key="URL_KEY"
         :url="`${URL_KEY}/${entityId}/detail`"
@@ -497,12 +522,12 @@ const split = async () => {
         :selected-rows="selectedRows"
     >
     </ChangeQuantityDialog>
-    <HandleSplited
+    <!--<HandleSplited
         ref="splitDialogRef"
         @hide="onDialogHide"
         v-model="showSplitDialog"
         :tickets="resultSplit"
-    ></HandleSplited>
+    ></HandleSplited>-->
     <ItemProposal
         ref="proposalDialogRef"
         @hide="onDialogHide"