From 185160aeba6da4b019174c0895a3e42c2606b141 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 18 Jun 2024 22:49:55 +0200
Subject: [PATCH] feat: use Popover instead dialog

---
 src/pages/Item/components/ItemProposal.vue    | 67 +++++++------
 src/pages/Ticket/Card/TicketMassiveUpdate.vue | 50 ++++++++++
 .../Ticket/Negative/TicketLackDetail.vue      | 94 +++++++++----------
 .../components/ChangeQuantityDialog.vue       | 74 +++++++--------
 .../Negative/components/ChangeStateDialog.vue | 86 ++++++++---------
 5 files changed, 213 insertions(+), 158 deletions(-)
 create mode 100644 src/pages/Ticket/Card/TicketMassiveUpdate.vue

diff --git a/src/pages/Item/components/ItemProposal.vue b/src/pages/Item/components/ItemProposal.vue
index 8206c0fa9..1f5c1114e 100644
--- a/src/pages/Item/components/ItemProposal.vue
+++ b/src/pages/Item/components/ItemProposal.vue
@@ -185,9 +185,9 @@ function onDialogClose() {
 }
 </script>
 <template>
-    <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showProposalDialog" full-width>
+    <QPopupProxy ref="popupProxyRef">
         <QCard class="q-pa-lg">
-            <QCardSection class="row items-center q-pb-none">
+            <QCardSection v-if="false" class="row items-center q-pb-none">
                 <VnLv class="image">
                     <template #label>
                         <QImg
@@ -211,7 +211,10 @@ function onDialogClose() {
                 <QSpace />
                 <QBtn icon="close" flat round dense v-close-popup />
             </QCardSection>
-            <QCardSection class="row items-center justify-center column items-stretch">
+            <QCardSection
+                v-if="false"
+                class="row items-center justify-center column items-stretch"
+            >
                 <span class="text-h6 text-grey">
                     <!-- {{ currentTicket }} -->
                     <!-- {{
@@ -222,9 +225,38 @@ function onDialogClose() {
                     }} -->
                 </span>
             </QCardSection>
+            <QCardActions>
+                <QBtn
+                    :label="t('globals.removeSelection')"
+                    color="primary"
+                    flat
+                    :disable="proposalSelected.length < 1 || quantity === 0"
+                    @click="proposalSelected = []"
+                />
+
+                <QBtn
+                    :label="t('globals.replace')"
+                    color="primary"
+                    :loading="isLoading"
+                    @click="confirm"
+                    :disable="proposalSelected.length < 1 || quantity === 0"
+                    unelevated
+                />
+                <QInput
+                    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"
+                />
+            </QCardActions>
+
             <QCardSection class="row items-center justify-center column items-stretch">
                 <!-- <VnRow style="display: flex"> -->
                 <div>
+                    {{ proposalSelected }}
                     <VnPaginate
                         :append="false"
                         data-key="ItemsGetSimilar"
@@ -331,35 +363,8 @@ function onDialogClose() {
                     </VnPaginate>
                 </div>
             </QCardSection>
-            <QCardActions align="right">
-                <QBtn
-                    :label="t('globals.removeSelection')"
-                    color="primary"
-                    flat
-                    :disable="proposalSelected.length < 1 || quantity === 0"
-                    @click="proposalSelected = []"
-                />
-
-                <QBtn
-                    :label="t('globals.replace')"
-                    color="primary"
-                    :loading="isLoading"
-                    @click="confirm"
-                    :disable="proposalSelected.length < 1 || quantity === 0"
-                    unelevated
-                />
-                <QInput
-                    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"
-                />
-            </QCardActions>
         </QCard>
-    </QDialog>
+    </QPopupProxy>
 </template>
 <style lang="scss">
 .compatibility {
diff --git a/src/pages/Ticket/Card/TicketMassiveUpdate.vue b/src/pages/Ticket/Card/TicketMassiveUpdate.vue
new file mode 100644
index 000000000..43e6993bc
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketMassiveUpdate.vue
@@ -0,0 +1,50 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+const $props = defineProps({
+    icon: {
+        type: String,
+        default: 'refresh',
+    },
+    color: {
+        type: String,
+        default: 'primary',
+    },
+    label: {
+        type: String,
+        default: 'refresh',
+    },
+    tooltip: {
+        type: String,
+        default: 'primary',
+    },
+});
+</script>
+
+<template>
+    <QBtn :color="$props.color" :icon="$props.icon" :label="t($props.label)">
+        <QPopupProxy ref="popupProxyRef" style="max-width: none">
+            <QCard>
+                <slot></slot>
+            </QCard>
+        </QPopupProxy>
+        <QTooltip>{{ t($props.tooltip) }}</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 f209e94d9..5161a9953 100644
--- a/src/pages/Ticket/Negative/TicketLackDetail.vue
+++ b/src/pages/Ticket/Negative/TicketLackDetail.vue
@@ -12,6 +12,7 @@ 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 TicketMassiveUpdate from '../Card/TicketMassiveUpdate.vue';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VnSelect from 'components/common/VnSelect.vue';
@@ -340,8 +341,10 @@ const replaceItem = () => {
     for (const ticket of rows) {
         if (ticket.quantity > itemProposalSelected.value.available) continue;
         ticket.itemFk = itemProposalSelected.value.id;
-        selectedRows.value.push(ticket.ticketFk);
+        ticket.quantity *= 2;
+        selectedRows.value.push({ ticketFk: ticket.ticketFk });
         itemProposalSelected.value.available -= ticket.quantity;
+        itemLack.value.lack += ticket.quantity;
     }
 };
 </script>
@@ -361,7 +364,7 @@ const replaceItem = () => {
     <FetchData
         :url="`Tickets/itemLack`"
         :filter="{ id: entityId }"
-        @on-fetch="(data) => (itemLack = data)"
+        @on-fetch="(data) => (itemLack = data[0])"
         auto-load
     />
     <!-- <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
@@ -379,41 +382,42 @@ const replaceItem = () => {
     <VnSubToolbar>
         <template #st-data>
             <QBtnGroup push style="column-gap: 1px">
-                <QBtn
-                    icon="refresh"
-                    color="primary"
-                    :label="t('negative.buttonsUpdate.state')"
+                <TicketMassiveUpdate
                     :disable="selectedRows.length < 2"
-                    @click="showChangeStateDialog = true"
+                    label="negative.buttonsUpdate.state"
+                    tooltip="negative.detail.modal.changeState.title"
                 >
+                    <ChangeStateDialog
+                        ref="changeStateDialogRef"
+                        :selected-rows="selectedRows"
+                    ></ChangeStateDialog>
+                </TicketMassiveUpdate>
+                <!-- <QBtn >
                     <QTooltip bottom anchor="bottom right">
-                        {{ t('negative.detail.modal.changeState.title') }}
+                        {{ t() }}
                     </QTooltip>
-                </QBtn>
-                <QBtn
-                    icon="refresh"
-                    color="primary"
-                    :label="t('negative.buttonsUpdate.quantity')"
+                </QBtn> -->
+                <TicketMassiveUpdate
+                    label="negative.buttonsUpdate.quantity"
                     @click="showChangeQuantityDialog = true"
                     :disable="selectedRows.length < 2"
+                    tooltip="negative.detail.modal.changeQuantity.title"
                 >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('negative.detail.modal.changeQuantity.title') }}
-                    </QTooltip>
-                </QBtn>
-                <QBtn
+                    <ChangeQuantityDialog
+                        ref="changeQuantityDialogRef"
+                        :selected-rows="selectedRows"
+                    >
+                    </ChangeQuantityDialog>
+                </TicketMassiveUpdate>
+                <!-- <TicketMassiveUpdate
                     icon="refresh"
                     color="primary"
-                    :label="t('negative.buttonsUpdate.itemProposal')"
+                    label="negative.buttonsUpdate.itemProposal"
                     @click="showChangeQuantityDialog = true"
                     :disable="selectedRows.length < 2"
+                    tooltip="negative.buttonsUpdate.itemProposal"
                 >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.refresh') }}
-                        {{ t('negative.buttonsUpdate.itemProposal') }}
-                    </QTooltip>
-                </QBtn>
-                <TickerSplit></TickerSplit>
+                </TicketMassiveUpdate> -->
                 <QBtn
                     color="primary"
                     @click="
@@ -431,7 +435,14 @@ const replaceItem = () => {
                         {{ t('globals.split') }}
                     </QTooltip>
                 </QBtn>
-                <QBtn icon="vn:item" color="primary" @click="showProposalDialog = true">
+
+                <QBtn color="primary" @click="showProposalDialog = true">
+                    <QIcon name="import_export" class="rotate-90"></QIcon>
+                    <ItemProposal
+                        ref="proposalDialogRef"
+                        :item="item"
+                        :tickets="selectedRows"
+                    ></ItemProposal>
                     <QTooltip bottom anchor="bottom right">
                         {{ t('itemProposal') }}
                     </QTooltip>
@@ -442,6 +453,8 @@ const replaceItem = () => {
     </VnSubToolbar>
     <QPage>
         <div class="full-width q-pa-md">
+            {{ itemLack }}
+            {{ selectedRows }}
             <VnPaginate
                 :data-key="URL_KEY"
                 :url="`${URL_KEY}/${entityId}`"
@@ -451,7 +464,7 @@ const replaceItem = () => {
             >
                 <!-- :rows="rows" -->
                 <template #body="{ rows }">
-                    <VnLv class="image">
+                    <VnLv class="q-mb-lg image">
                         <template #label>
                             <QImg
                                 :src="`/api/Images/catalog/50x50/${entityId}/download?access_token=${token}`"
@@ -468,6 +481,12 @@ const replaceItem = () => {
                                 {{ item.longName }}
                                 <ItemDescriptorProxy :id="entityId" />
                             </QBtn>
+                            <QBadge
+                                text-color="white"
+                                color="red"
+                                :label="itemLack.lack"
+                            />
+
                             <FetchedTags class="q-ml-md" :item="item" :max-length="5" />
                         </template>
                     </VnLv>
@@ -584,30 +603,11 @@ const replaceItem = () => {
                 </template>
             </VnPaginate></div
     ></QPage>
-    <ChangeStateDialog
-        ref="changeStateDialogRef"
-        @hide="onDialogHide"
-        v-model="showChangeStateDialog"
-        :selected-rows="selectedRows"
-    ></ChangeStateDialog>
-    <ChangeQuantityDialog
-        ref="changeQuantityDialogRef"
-        @hide="onDialogHide"
-        v-model="showChangeQuantityDialog"
-        :selected-rows="selectedRows"
-    >
-    </ChangeQuantityDialog>
+
     <!--<HandleSplited
         ref="splitDialogRef"
         @hide="onDialogHide"
         v-model="showSplitDialog"
         :tickets="resultSplit"
     ></HandleSplited>-->
-    <ItemProposal
-        ref="proposalDialogRef"
-        @hide="itemProposalEvt"
-        v-model="showProposalDialog"
-        :item="item"
-        :tickets="selectedRows"
-    ></ItemProposal>
 </template>
diff --git a/src/pages/Ticket/Negative/components/ChangeQuantityDialog.vue b/src/pages/Ticket/Negative/components/ChangeQuantityDialog.vue
index 116659bad..3d345f821 100644
--- a/src/pages/Ticket/Negative/components/ChangeQuantityDialog.vue
+++ b/src/pages/Ticket/Negative/components/ChangeQuantityDialog.vue
@@ -34,43 +34,43 @@ const updateQuantity = async () => {
 </script>
 
 <template>
-    <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showChangeQuantityDialog">
-        <QCard class="q-pa-sm">
-            <QCardSection class="row items-center q-pb-none">
-                <QAvatar
-                    :icon="icon"
-                    color="primary"
-                    text-color="white"
-                    size="xl"
-                    v-if="icon"
-                />
-                <span class="text-h6 text-grey">{{
-                    t('negative.detail.modal.changeQuantity.title')
-                }}</span>
-                <QSpace />
-                <QBtn icon="close" flat round dense v-close-popup />
-            </QCardSection>
-            <QCardSection class="row items-center justify-center column items-stretch">
-                <span>{{ t('negative.detail.modal.changeQuantity.title') }}</span>
-                <VnInput
-                    type="number"
-                    :min="0"
-                    :label="t('negative.detail.modal.changeQuantity.placeholder')"
-                    v-model="newQuantity"
-                />
-            </QCardSection>
-            <QCardActions align="right">
-                <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
-                <QBtn
-                    :label="t('globals.confirm')"
-                    color="primary"
-                    :disable="!newQuantity || newQuantity < 0"
-                    @click="updateQuantity"
-                    unelevated
-                    autofocus
-                /> </QCardActions
-        ></QCard>
-    </QDialog>
+    <!-- <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showChangeQuantityDialog"> -->
+    <QCard class="q-pa-sm">
+        <!-- <QCardSection class="row items-center q-pb-none">
+            <QAvatar
+                :icon="icon"
+                color="primary"
+                text-color="white"
+                size="xl"
+                v-if="icon"
+            />
+            <span class="text-h6 text-grey">{{
+                t('negative.detail.modal.changeQuantity.title')
+            }}</span>
+            <QSpace />
+            <QBtn icon="close" flat round dense v-close-popup />
+        </QCardSection> -->
+        <QCardSection class="row items-center justify-center column items-stretch">
+            <span>{{ t('negative.detail.modal.changeQuantity.title') }}</span>
+            <VnInput
+                type="number"
+                :min="0"
+                :label="t('negative.detail.modal.changeQuantity.placeholder')"
+                v-model="newQuantity"
+            />
+        </QCardSection>
+        <QCardActions align="right">
+            <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
+            <QBtn
+                :label="t('globals.confirm')"
+                color="primary"
+                :disable="!newQuantity || newQuantity < 0"
+                @click="updateQuantity"
+                unelevated
+                autofocus
+            /> </QCardActions
+    ></QCard>
+    <!-- </QDialog> -->
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Ticket/Negative/components/ChangeStateDialog.vue b/src/pages/Ticket/Negative/components/ChangeStateDialog.vue
index 2102ddf1c..486f6b9aa 100644
--- a/src/pages/Ticket/Negative/components/ChangeStateDialog.vue
+++ b/src/pages/Ticket/Negative/components/ChangeStateDialog.vue
@@ -36,49 +36,49 @@ const updateState = async () => {
 </script>
 
 <template>
-    <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showChangeStateDialog">
-        <FetchData
-            url="States/editableStates"
-            @on-fetch="(data) => (editableStates = data)"
-            auto-load
-        />
-        <QCard class="q-pa-sm">
-            <QCardSection class="row items-center q-pb-none">
-                <QAvatar
-                    :icon="icon"
-                    color="primary"
-                    text-color="white"
-                    size="xl"
-                    v-if="icon"
-                />
-                <span class="text-h6 text-grey">{{
-                    t('negative.detail.modal.changeState.title')
-                }}</span>
-                <QSpace />
-                <QBtn icon="close" flat round dense v-close-popup />
-            </QCardSection>
-            <QCardSection class="row items-center justify-center column items-stretch">
-                <span>{{ t('negative.detail.modal.changeState.title') }}</span>
-                <VnSelect
-                    :label="t('negative.detail.modal.changeState.placeholder')"
-                    v-model="newState"
-                    :options="editableStates"
-                    option-label="name"
-                    option-value="code"
-                />
-            </QCardSection>
-            <QCardActions align="right">
-                <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
-                <QBtn
-                    :label="t('globals.confirm')"
-                    color="primary"
-                    :disable="!newState"
-                    @click="updateState"
-                    unelevated
-                    autofocus
-                /> </QCardActions
-        ></QCard>
-    </QDialog>
+    <!-- <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showChangeStateDialog"> -->
+    <FetchData
+        url="States/editableStates"
+        @on-fetch="(data) => (editableStates = data)"
+        auto-load
+    />
+    <QCard class="q-pa-sm">
+        <!-- <QCardSection class="row items-center q-pb-none">
+            <QAvatar
+                :icon="icon"
+                color="primary"
+                text-color="white"
+                size="xl"
+                v-if="icon"
+            />
+            <span class="text-h6 text-grey">{{
+                t('negative.detail.modal.changeState.title')
+            }}</span>
+            <QSpace />
+            <QBtn icon="close" flat round dense v-close-popup />
+        </QCardSection> -->
+        <QCardSection class="row items-center justify-center column items-stretch">
+            <span>{{ t('negative.detail.modal.changeState.title') }}</span>
+            <VnSelect
+                :label="t('negative.detail.modal.changeState.placeholder')"
+                v-model="newState"
+                :options="editableStates"
+                option-label="name"
+                option-value="code"
+            />
+        </QCardSection>
+        <QCardActions align="right">
+            <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
+            <QBtn
+                :label="t('globals.confirm')"
+                color="primary"
+                :disable="!newState"
+                @click="updateState"
+                unelevated
+                autofocus
+            /> </QCardActions
+    ></QCard>
+    <!-- </QDialog> -->
 </template>
 
 <style lang="scss" scoped>