From 0a3703532ea734415b44fc22128d95677dfaa499 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 16 Sep 2024 10:47:41 +0200
Subject: [PATCH] feat: itemProposalProxy

---
 src/pages/Item/components/ItemProposal.vue    | 262 +++++++++---------
 .../Item/components/ItemProposalProxy.vue     |  30 ++
 .../Ticket/Negative/TicketLackDetail.vue      |   5 +-
 3 files changed, 161 insertions(+), 136 deletions(-)
 create mode 100644 src/pages/Item/components/ItemProposalProxy.vue

diff --git a/src/pages/Item/components/ItemProposal.vue b/src/pages/Item/components/ItemProposal.vue
index e4ece8043..32b7b6dce 100644
--- a/src/pages/Item/components/ItemProposal.vue
+++ b/src/pages/Item/components/ItemProposal.vue
@@ -94,7 +94,7 @@ const columns = computed(() => [
         ...defaultColumnAttrs,
         label: t('proposal.difference'),
         name: 'difference',
-        format: (item) => (item.id % 2 === 0 ? 10 : -10),
+        format: ({ id }) => (id % 2 === 0 ? 10 : -10),
         columnFilter: {
             component: 'input',
             type: 'number',
@@ -226,85 +226,79 @@ function onDialogClose() {
 onUnmounted(() => {});
 </script>
 <template>
-    <QPopupProxy ref="popupProxyRef">
-        <QCard style="min-width: 500px">
-            <QCardSection class="row items-center justify-center column items-stretch">
-                <!-- <VnRow style="display: flex"> -->
-                <div style="width: 62vw">
-                    <!-- {{ proposalSelected }} -->
-                    {{ $props.itemLack.itemFk }}
-                    {{ $props.itemLack.warehouseFk }}
-                    <!-- {{ rows[1].available }} -->
-                    <VnTable
-                        data-key="ItemsGetSimilar"
-                        url="Items/getSimilar"
-                        :filter="{
-                            where: {
-                                itemFk: $props.itemLack.itemFk,
-                                warehouseFk: $props.itemLack.warehouseFk,
-                            },
-                        }"
-                        auto-load
-                        :columns="columns"
-                        class="full-width q-mt-md"
-                        v-model:selected="proposalSelected"
-                        row-key="id"
-                        :is-editable="false"
-                        :right-search="false"
-                        :without-header="false"
-                        :disable-option="{ card: true, table: true }"
-                        :table="{
-                            'row-key': 'id',
-                            selection: 'multiple',
-                        }"
+    <!-- <QPopupProxy ref="popupProxyRef"> -->
+    <!-- <QCard style="min-width: 500px">
+        <QCardSection class="row items-center justify-center column items-stretch"> -->
+    <!-- <VnRow style="display: flex"> -->
+    <div style="min-width: 65vw">
+        <!-- {{ proposalSelected }} -->
+        <!-- {{ $props.itemLack.itemFk }}
+        {{ $props.itemLack.warehouseFk }} -->
+        <!-- {{ rows[1].available }} -->
+        <VnTable
+            data-key="ItemsGetSimilar"
+            url="Items/getSimilar"
+            :filter="{
+                where: {
+                    itemFk: $props.itemLack.itemFk,
+                    warehouseFk: $props.itemLack.warehouseFk,
+                },
+            }"
+            auto-load
+            :columns="columns"
+            class="full-width q-mt-md"
+            v-model:selected="proposalSelected"
+            row-key="id"
+            :is-editable="false"
+            :right-search="false"
+            :without-header="false"
+            :disable-option="{ card: true, table: true }"
+            :table="{
+                'row-key': 'id',
+                selection: 'multiple',
+            }"
+        >
+            <template #top-left>
+                <div v-if="$props.replaceAction" style="display: flex">
+                    <QBtn
+                        :label="t('globals.replace')"
+                        class="q-py-xs"
+                        color="primary"
+                        :loading="isLoading"
+                        @click="confirm"
+                        style="padding-block: 8px"
+                        :disable="proposalSelected.length < 1 || quantity === 0"
+                    />
+                    <VnInputNumber
+                        v-model.number="quantity"
+                        v-if="proposalSelected.length > 0"
+                        @update:model-value="(val) => (quantity = val)"
+                        type="number"
+                        min="0"
+                        :label="t('proposal.quantityToReplace')"
+                        dense
+                        class="q-ml-xs"
+                    /></div
+            ></template>
+            <!-- <template #body="scope">{{ scope }}</template> -->
+            <template #body-selection="scope">
+                <QTd align="center" v-if="$props.replaceAction"
+                    ><QCheckbox
+                        v-model="scope.selected"
+                        :disable="!(scope.row.available >= itemLack.lack * -1)"
                     >
-                        <template #top-left>
-                            <div v-if="$props.replaceAction" style="display: flex">
-                                <QBtn
-                                    :label="t('globals.replace')"
-                                    color="primary"
-                                    :loading="isLoading"
-                                    @click="confirm"
-                                    :disable="
-                                        proposalSelected.length < 1 || quantity === 0
-                                    "
-                                    unelevated
-                                />
-                                <VnInputNumber
-                                    v-model.number="quantity"
-                                    v-if="quantity > -1"
-                                    @update:model-value="(val) => (quantity = val)"
-                                    type="number"
-                                    min="0"
-                                    :label="t('proposal.quantityToReplace')"
-                                    class="q-ml-lg"
-                                /></div
-                        ></template>
-                        <!-- <template #body="scope">{{ scope }}</template> -->
-                        <template #body-selection="scope">
-                            <QTd align="center" v-if="$props.replaceAction"
-                                ><QCheckbox
-                                    v-model="scope.selected"
-                                    :disable="
-                                        !(scope.row.available >= itemLack.lack * -1)
-                                    "
-                                >
-                                    <QTooltip
-                                        v-if="
-                                            !(scope.row.available >= itemLack.lack * -1)
-                                        "
-                                    >
-                                        Nop</QTooltip
-                                    >
-                                </QCheckbox>
-                                <!-- <div v-else class="q-ml-sm">
+                        <QTooltip v-if="!(scope.row.available >= itemLack.lack * -1)">
+                            Nop</QTooltip
+                        >
+                    </QCheckbox>
+                    <!-- <div v-else class="q-ml-sm">
                                             <QIcon name="info" size="sm"></QIcon>
                                             </div
                                     >--></QTd
-                            >
-                        </template>
-                        <template #top-row>
-                            <!-- <QTr>
+                >
+            </template>
+            <template #top-row>
+                <!-- <QTr>
                                         <QTd />
                                         <QTd
                                             v-for="(col, index) in cols"
@@ -321,67 +315,67 @@ onUnmounted(() => {});
                                             />
                                         </QTd>
                                     </QTr> -->
-                        </template>
-                        <template #column-longName="{ row }">
-                            <!-- <QTd align="left" class="text-primary"> -->
-                            <QTooltip>
-                                {{ row.id }}
-                            </QTooltip>
-                            <!-- <QBtn flat color="blue" dense>{{ }}</QBtn> -->
-                            <p class="link">{{ row.longName }}</p>
-                            <ItemDescriptorProxy :id="row.id" />
-                            <div style="display: flex">
-                                <VnImg
-                                    :id="row.id"
-                                    spinner-color="primary"
-                                    :ratio="1"
-                                    height="50px"
-                                    width="50px"
-                                    class="image remove-bg"
-                                />
-                                <FetchedTags :item="row" />
-                            </div>
-                            <!-- </QTd> -->
-                        </template>
-                        <template #column-status="{ value }">
-                            <!-- <QTd class="col" align="center"> -->
-                            <div
-                                :style="{ background: gradientStyle(value) }"
-                                class="compatibility"
-                            >
-                                <QTooltip>
-                                    {{ compatibilityItem(value) }}
-                                </QTooltip>
-                            </div>
-                            <!-- </QTd> -->
-                        </template>
-                        <!-- <template #column-tags="{ row }">
+            </template>
+            <template #column-longName="{ row }">
+                <!-- <QTd align="left" class="text-primary"> -->
+                <QTooltip>
+                    {{ row.id }}
+                </QTooltip>
+                <!-- <QBtn flat color="blue" dense>{{ }}</QBtn> -->
+                <p class="link">{{ row.longName }}</p>
+                <ItemDescriptorProxy :id="row.id" />
+                <div style="display: flex">
+                    <VnImg
+                        :id="row.id"
+                        spinner-color="primary"
+                        :ratio="1"
+                        height="50px"
+                        width="50px"
+                        class="image remove-bg"
+                    />
+                    <FetchedTags :item="row" />
+                </div>
+                <!-- </QTd> -->
+            </template>
+            <template #column-status="{ row }">
+                <!-- <QTd class="col" align="center"> -->
+                <div
+                    :style="{ background: gradientStyle(statusConditionalValue(row)) }"
+                    class="compatibility"
+                >
+                    <QTooltip>
+                        {{ compatibilityItem(statusConditionalValue(row)) }}
+                    </QTooltip>
+                </div>
+                <!-- </QTd> -->
+            </template>
+            <!-- <template #column-tags="{ row }">
                                     <QTd class="col" align="center"> </QTd>
                                 </template> -->
 
-                        <template #column-price2="{ row }">
-                            <!-- <QTd
-                                class="col"
-                                align="center"
-                                :class="[conditionalValuePrice(value)]"
-                            > -->
-                            <QTooltip>
-                                {{ toCurrency(row.price2) }}
-                            </QTooltip>
-                            {{ toCurrency(row.price2) }}
-                            <!-- </QTd> -->
-                        </template>
-                        <template #column-difference="{ row }">
-                            <pre>{{ row.difference }}</pre>
-                            <!-- <QTd class="col" align="left"> -->
-                            <!-- <VnStockValueDisplay :value="value" /> -->
-                            <!-- </QTd> -->
-                        </template>
-                    </VnTable>
-                </div>
-            </QCardSection>
-        </QCard>
-    </QPopupProxy>
+            <template #column-price2="{ row }">
+                <QTd
+                    class="col"
+                    align="center"
+                    :class="[conditionalValuePrice(row.price2)]"
+                >
+                    <QTooltip>
+                        {{ toCurrency(row.price2) }}
+                    </QTooltip>
+                    {{ toCurrency(row.price2) }}
+                </QTd>
+            </template>
+            <template #column-difference="{ row }">
+                <!-- <pre>asdad{{ row }}</pre> -->
+                <!-- <QTd class="col" align="left"> -->
+                <VnStockValueDisplay :value="row.id % 2 === 0 ? 10 : -10" />
+                <!-- </QTd> -->
+            </template>
+        </VnTable>
+    </div>
+    <!-- </QCardSection>
+    </QCard> -->
+    <!-- </QPopupProxy> -->
 </template>
 <style lang="scss">
 .compatibility {
diff --git a/src/pages/Item/components/ItemProposalProxy.vue b/src/pages/Item/components/ItemProposalProxy.vue
new file mode 100644
index 000000000..b8609d87a
--- /dev/null
+++ b/src/pages/Item/components/ItemProposalProxy.vue
@@ -0,0 +1,30 @@
+<script setup>
+import ItemProposal from './ItemProposal.vue';
+const $props = defineProps({
+    item: {
+        type: Object,
+        required: true,
+        default: () => {},
+    },
+    itemLack: {
+        type: Object,
+        required: true,
+        default: () => {},
+    },
+    replaceAction: {
+        type: Boolean,
+        required: false,
+        default: false,
+    },
+    tickets: {
+        type: Array,
+        required: false,
+        default: () => [],
+    },
+});
+</script>
+<template>
+    <QPopupProxy>
+        <ItemProposal v-bind="$props"></ItemProposal>
+    </QPopupProxy>
+</template>
diff --git a/src/pages/Ticket/Negative/TicketLackDetail.vue b/src/pages/Ticket/Negative/TicketLackDetail.vue
index 87f9fcdd3..1579480c7 100644
--- a/src/pages/Ticket/Negative/TicketLackDetail.vue
+++ b/src/pages/Ticket/Negative/TicketLackDetail.vue
@@ -18,6 +18,7 @@ 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';
 const { t } = useI18n();
 const URL_KEY = 'Tickets/ItemLack';
 const editableStates = ref([]);
@@ -199,14 +200,14 @@ const replaceItem = () => {
                 </QBtn>
                 <QBtn color="primary" @click="showProposalDialog = true">
                     <QIcon name="import_export" class="rotate-90"></QIcon>
-                    <ItemProposal
+                    <ItemProposalProxy
                         ref="proposalDialogRef"
                         :item="item"
                         :item-lack="itemLack"
                         :replace-action="true"
                         :tickets="selectedRows"
                         @refresh-data="itemProposalEvt"
-                    ></ItemProposal>
+                    ></ItemProposalProxy>
                     <QTooltip bottom anchor="bottom right">
                         {{ t('itemProposal') }}
                     </QTooltip>