From dea3535ad4610e88242d362298dd431d26f10f80 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sun, 26 Jan 2025 02:35:59 +0100
Subject: [PATCH] feat: refs #6321 itemProposal tags

---
 src/pages/Item/components/ItemProposal.vue    | 307 +++++++++---------
 .../Item/components/ItemProposalProxy.vue     |  38 +--
 2 files changed, 149 insertions(+), 196 deletions(-)

diff --git a/src/pages/Item/components/ItemProposal.vue b/src/pages/Item/components/ItemProposal.vue
index 67d5fcab6..285799616 100644
--- a/src/pages/Item/components/ItemProposal.vue
+++ b/src/pages/Item/components/ItemProposal.vue
@@ -166,7 +166,14 @@ const columns = computed(() => [
     //     ],
     // },
 ]);
-
+const isSelected = (row) => proposalSelected.value.some((item) => row.id === item.id);
+function change(row) {
+    if (isSelected(row)) {
+        confirm(row);
+        proposalSelected.value = [];
+    }
+    proposalSelected.value = [row];
+}
 async function confirm(row) {
     try {
         // const params = {
@@ -223,141 +230,132 @@ const isSelectionAvailable = (itemProposal) => {
 // watch(proposalSelected, ({ available }) => (quantity.value = available));
 </script>
 <template>
-    <div style="min-width: 65vw">
-        <VnTable
-            ref="proposalTableRef"
-            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="true"
-            :disable-option="{ card: true, table: true }"
-            :table="{
-                'row-key': 'id',
-            }"
-        >
-            <template #body-selection="props">
-                <!-- {{ isSelectionAvailable(props) }} -->
-                <QCheckbox
-                    class="q-ma-xs"
+    <VnTable
+        data-cy="proposalTable"
+        ref="proposalTableRef"
+        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"
+        row-key="id"
+        :is-editable="false"
+        :right-search="false"
+        :without-header="true"
+        :disable-option="{ card: true, table: true }"
+        :table="{
+            'row-key': 'id',
+        }"
+    >
+        <template #body-selection="props">
+            <!-- {{ isSelectionAvailable(props) }} -->
+            <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
+                class="flex"
+                style="
+                    max-width: 100%;
+                    /* align-items: center; */
+                    /* justify-content: flex-start; */
+                    /* flex: 1 1 100px; */
+                    flex-shrink: 50px;
+                    flex-wrap: nowrap;
+                "
+            >
+                <QTooltip>
+                    {{ row.id }}
+                </QTooltip>
+                <!-- <QBtn flat color="blue" dense>{{ }}</QBtn> -->
+                <QBtn
+                    data-cy="replaceBtn"
+                    icon="change_circle"
+                    color="primary"
                     flat
-                    :disable="isSelectionAvailable(props.row)"
-                    v-model="props.selected"
-                    @update:model-value="(evt, _) => handleSelection(props.row, null)"
+                    dense
+                    :class="{
+                        'fill-icon': isSelected(row),
+                    }"
+                    @click="change(row)"
+                    :disable="!isSelectionAvailable(row)"
                 >
-                    <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
+                    <QTooltip> {{ t('Open_details') }}</QTooltip>
+                </QBtn>
+                <div
+                    id="middle"
                     style="
-                        max-width: 100%;
-                        display: flex;
-                        max-width: 100%;
-                        /* align-items: center; */
-                        /* justify-content: flex-start; */
-                        /* flex: 1 1 100px; */
-                        flex-shrink: 50px;
-                        flex-wrap: nowrap;
+                        /* position: absolute; */
+                        float: left;
+                        margin-right: 2px;
+                        flex: 2 0 5px;
                     "
+                    :style="{
+                        background: gradientStyle(statusConditionalValue(row)),
+                    }"
+                    class="compatibility"
                 >
                     <QTooltip>
-                        {{ row.id }}
+                        {{ compatibilityItem(statusConditionalValue(row)) }}
                     </QTooltip>
-                    <!-- <QBtn flat color="blue" dense>{{ }}</QBtn> -->
-                    <QBtn
-                        icon="change_circle"
-                        color="primary"
-                        flat
-                        dense
-                        @click="confirm(row)"
-                        :disable="!isSelectionAvailable(row)"
-                    >
-                        <QTooltip> {{ t('Open_details') }}</QTooltip>
-                    </QBtn>
-                    <div
-                        id="middle"
-                        style="
-                            /* position: absolute; */
-                            float: left;
-                            margin-right: 2px;
-                            flex: 2 0 5px;
-                        "
-                        :style="{
-                            background: gradientStyle(statusConditionalValue(row)),
-                        }"
-                        class="compatibility"
-                    >
-                        <QTooltip>
-                            {{ compatibilityItem(statusConditionalValue(row)) }}
-                        </QTooltip>
-                        <!-- </div> -->
-                    </div>
-                    <div style="flex: 2 0 100%">
-                        <div>
-                            <span style="font-size: x-small">({{ row.id }})</span
-                            ><span class="link">{{ row.longName }}</span>
-                            <!-- :style="{
+                    <!-- </div> -->
+                </div>
+                <div style="flex: 2 0 100%">
+                    <div>
+                        <span style="font-size: x-small">({{ row.id }})</span
+                        ><span class="link">{{ row.longName }}</span>
+                        <!-- :style="{
                                     color: gradientStyle(statusConditionalValue(row)),
                                 }" -->
-                            <ItemDescriptorProxy :id="row.id" />
-
-                            <!-- <section id="portraitGrid"> -->
-                            <!-- -->
-                            <!-- <div id="left">
-                            <VnImg
-                                :id="row.id"
-                                spinner-color="primary"
-                                :ratio="1"
-                                width="50px"
-                                class="image remove-bg"
-                            />
-                        </div> -->
-
-                            <!-- <FetchedTags :item="row" class="q-mb-xs" columns="4" /> -->
-                        </div>
-                        <div :key="key" class="inline-tag" v-for="(tag, key) in [5]">
-                            <span
-                                class="text"
-                                :style="{
-                                    color: row[`match${tag}`]
-                                        ? 'green'
-                                        : 'var(--vn-label-color)',
-                                }"
-                            >
-                                {{ row[`value${tag}`] }}
-                            </span>
-                        </div>
+                        <ItemDescriptorProxy :id="row.id" />
                     </div>
-                    <!-- </section> -->
-                </QTd>
-            </template>
-            <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 class="inline-tag">
+                        {{ tag }}
+                        <span
+                            :key="key"
+                            v-for="(tag, key) in [5, 6, 7]"
+                            class="text"
+                            :style="{
+                                color: row[`match${tag}`]
+                                    ? 'green'
+                                    : 'var(--vn-label-color)',
+                            }"
+                        >
+                            {{ row[`value${tag}`] }}
+                        </span>
+                    </div>
+                </div>
+                <!-- </section> -->
+            </QTd>
+        </template>
+        <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"
@@ -367,28 +365,20 @@ const isSelectionAvailable = (itemProposal) => {
                     </QTooltip>
                 </div>
             </template> -->
-            <template #column-price2="{ row }">
-                <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 }">
+        <template #column-price2="{ row }">
+            <div class="flex column items-center content-center">
                 <VnStockValueDisplay :value="sales[0].price - row.price2" />
-            </template>
-        </VnTable>
-    </div>
+                <span :class="[conditionalValuePrice(row.price2)]">{{
+                    toCurrency(row.price2)
+                }}</span>
+            </div>
+        </template>
+        <template #column-difference="{ row }">
+            <VnStockValueDisplay :value="sales[0].price - row.price2" />
+        </template>
+    </VnTable>
 </template>
-<style lang="scss">
+<style lang="scss" scoped>
 .compatibility {
     width: 100%;
 }
@@ -399,21 +389,14 @@ const isSelectionAvailable = (itemProposal) => {
 .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;
-}
-#portraitGrid {
-    display: grid;
-    grid-template-columns: repeat(3, 0.5fr);
+
+.text {
+    margin: 0.05rem;
+    padding: 1px;
+    border: 1px solid var(--vn-label-color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: smaller;
 }
 </style>
-
-<i18n>
-    en:
-</i18n>
diff --git a/src/pages/Item/components/ItemProposalProxy.vue b/src/pages/Item/components/ItemProposalProxy.vue
index 30de8c45f..56a889e13 100644
--- a/src/pages/Item/components/ItemProposalProxy.vue
+++ b/src/pages/Item/components/ItemProposalProxy.vue
@@ -1,19 +1,9 @@
 <script setup>
 import ItemProposal from './ItemProposal.vue';
 import { ref } from 'vue';
+const emit = defineEmits(['onDialogClosed', 'itemReplaced']);
 const popupProxyRef = ref(null);
-import { useDialogPluginComponent } from 'quasar';
-const emit = defineEmits([
-    'onDialogClosed',
-    'itemReplaced',
-    'confirm',
-    'cancel',
-    ...useDialogPluginComponent.emits,
-]);
-defineExpose({ show: () => dialogRef.value.show(), hide: () => dialogRef.value.hide() });
 
-const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
-    useDialogPluginComponent();
 const $props = defineProps({
     itemLack: {
         type: Object,
@@ -33,39 +23,19 @@ const $props = defineProps({
 });
 </script>
 <template>
-    <QDialog
-        ref="dialogRef"
-        full-width
-        transition-show="scale"
-        transition-hide="scale"
-        persistent
-    >
+    <QPopupProxy ref="popupProxyRef" data-cy="itemProposalProxy">
         <QCard>
-            <QCardSection class="row items-center q-pb-none">
-                <span class="text-h6 text-grey">{{ $t('Item proposal') }}</span>
-                <QSpace />
-                <QBtn icon="close" flat round dense v-close-popup />
-            </QCardSection>
             <QCardSection>
-                <!-- <VnImg :id="itemLack.id" class="rounded image-wrapper"></VnImg>
-                <QBtn flat class="link text-blue">
-                    {{ itemLack.longName }}
-                    <ItemDescriptorProxy :id="itemLack.id" />
-                </QBtn>
-                <FetchedTags :item="itemLack" />
-
-            </QCardSection>
-            <QCardSection class="q-pt-none"> -->
                 <ItemProposal
                     v-bind="$props"
                     @item-replaced="
                         (data) => {
                             emit('itemReplaced', data);
-                            popupProxyRef.value.hide();
+                            popupProxyRef.hide();
                         }
                     "
                 ></ItemProposal
             ></QCardSection>
         </QCard>
-    </QDialog>
+    </QPopupProxy>
 </template>