From a46e5b07f91d817fa8068cc90305a3eae233afa2 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 28 Jan 2025 14:04:56 +0100
Subject: [PATCH] feat: refs #6321 updates

---
 src/components/VnTable/VnTable.vue            |   1 +
 src/pages/Customer/CustomerFilter.vue         |   7 +-
 .../Item/components/ItemProposalProxy.vue     |  32 ++++-
 .../Ticket/Negative/TicketLackDetail.vue      | 116 ++++++++++--------
 src/pages/Ticket/Negative/TicketLackTable.vue |   3 +
 5 files changed, 99 insertions(+), 60 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 17fabf10d..d0e10aae3 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -368,6 +368,7 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
                     <slot name="top-left"></slot>
                 </template>
                 <template #top-right v-if="!$props.withoutHeader">
+                    <slot name="top-right"></slot>
                     <VnVisibleColumn
                         v-if="isTableMode"
                         v-model="splittedColumns.columns"
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index eae97d1be..21de8fa9b 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -1,4 +1,3 @@
-
 <script setup>
 import { useI18n } from 'vue-i18n';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
@@ -52,11 +51,7 @@ const exprBuilder = (param, value) => {
             </QItem>
             <QItem class="q-mb-sm">
                 <QItemSection>
-                    <VnInput
-                        :label="t('globals.name')"
-                        v-model="params.name"
-                        is-outlined
-                    />
+                    <VnInput :label="t('Name')" v-model="params.name" is-outlined />
                 </QItemSection>
             </QItem>
             <QItem class="q-mb-sm">
diff --git a/src/pages/Item/components/ItemProposalProxy.vue b/src/pages/Item/components/ItemProposalProxy.vue
index 56a889e13..1e202b6f1 100644
--- a/src/pages/Item/components/ItemProposalProxy.vue
+++ b/src/pages/Item/components/ItemProposalProxy.vue
@@ -1,9 +1,19 @@
 <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,
@@ -23,19 +33,33 @@ const $props = defineProps({
 });
 </script>
 <template>
-    <QPopupProxy ref="popupProxyRef" data-cy="itemProposalProxy">
+    <QDialog ref="dialogRef" full-width transition-show="scale" transition-hide="scale">
         <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.hide();
+                            popupProxyRef.value.hide();
                         }
                     "
                 ></ItemProposal
             ></QCardSection>
         </QCard>
-    </QPopupProxy>
+    </QDialog>
 </template>
diff --git a/src/pages/Ticket/Negative/TicketLackDetail.vue b/src/pages/Ticket/Negative/TicketLackDetail.vue
index fdd6df92b..83c0c639d 100644
--- a/src/pages/Ticket/Negative/TicketLackDetail.vue
+++ b/src/pages/Ticket/Negative/TicketLackDetail.vue
@@ -18,6 +18,8 @@ import FetchedTags from 'components/ui/FetchedTags.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
 
+import { useQuasar } from 'quasar';
+const quasar = useQuasar();
 const { t } = useI18n();
 const editableStates = ref([]);
 const stateStore = useStateStore();
@@ -104,6 +106,18 @@ const closeDialogs = (refs, evt) => {
     changeStateDialogRef.value.hide();
 };
 
+const showItemProposal = () => {
+    quasar
+        .dialog({
+            component: ItemProposalProxy,
+            componentProps: {
+                itemLack: itemLack.value,
+                replaceAction: true,
+                sales: selectedRows.value,
+            },
+        })
+        .onOk(itemProposalEvt);
+};
 const filterTable = { stateFk: 0, warehouseFk: useState().getUser().value.warehouseFk };
 </script>
 
@@ -132,47 +146,56 @@ const filterTable = { stateFk: 0, warehouseFk: useState().getUser().value.wareho
         @on-fetch="(data) => (itemLack = data[0])"
         auto-load
     />
-    <VnSubToolbar>
-        <template #st-data>
-            <QBtn
-                data-cy="transferLines"
-                color="primary"
-                icon="vn:splitline"
-                :disable="!(selectedRows.length === 1)"
-            >
-                <QTooltip>{{ t('ticketSale.transferLines') }} </QTooltip>
-                <TicketTransfer
-                    ref="transferFormRef"
-                    split="true"
-                    class="full-width"
-                    :ticket="selectedRows"
-                    :transfer="{
-                        sales: selectedRows,
-                        lastActiveTickets: selectedRows.map((row) => row.id),
-                    }"
-                ></TicketTransfer>
-            </QBtn>
-            <QBtn
-                data-cy="itemProposal"
-                color="primary"
-                @click="showProposalDialog = true"
-                :disable="selectedRows.length < 1"
-            >
-                <QIcon name="import_export" class="rotate-90"></QIcon>
-                <ItemProposalProxy
-                    ref="proposalDialogRef"
-                    :item-lack="itemLack"
-                    :replace-action="true"
-                    :sales="selectedRows"
-                    @item-replaced="itemProposalEvt"
-                ></ItemProposalProxy>
-                <QTooltip bottom anchor="bottom right">
-                    {{ t('itemProposal') }}
-                </QTooltip>
-            </QBtn>
-        </template>
-        <template #st-actions>
-            <QBtnGroup push style="column-gap: 1px">
+    <!-- <VnSubToolbar>
+        <template #st-data> </template>
+        <template #st-actions> </template>
+    </VnSubToolbar> -->
+    <TicketLackTable
+        ref="tableRef"
+        :filter="filterTable"
+        @update:selection="({ value }, _) => (selectedRows = value)"
+    >
+        <template #top-right>
+            <QBtnGroup push class="q-mr-lg" style="column-gap: 1px">
+                <QBtn
+                    data-cy="transferLines"
+                    color="primary"
+                    icon="vn:splitline"
+                    :disable="!(selectedRows.length === 1)"
+                >
+                    <QTooltip>{{ t('ticketSale.transferLines') }} </QTooltip>
+                    <TicketTransfer
+                        ref="transferFormRef"
+                        split="true"
+                        class="full-width"
+                        :ticket="selectedRows"
+                        :transfer="{
+                            sales: selectedRows,
+                            lastActiveTickets: selectedRows.map((row) => row.id),
+                        }"
+                    ></TicketTransfer>
+                </QBtn>
+                <QBtn
+                    color="primary"
+                    @click="showProposalDialog = true"
+                    :disable="selectedRows.length < 1"
+                >
+                    <QIcon
+                        name="import_export"
+                        class="rotate-90"
+                        @click="showItemProposal"
+                    ></QIcon>
+                    <!-- <ItemProposalProxy
+                        ref="proposalDialogRef"
+                        :item-lack="itemLack"
+                        :replace-action="true"
+                        :sales="selectedRows"
+                        @item-replaced="itemProposalEvt"
+                    ></ItemProposalProxy> -->
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('itemProposal') }}
+                    </QTooltip>
+                </QBtn>
                 <VnPopupProxy
                     data-cy="changeItem"
                     icon="refresh"
@@ -215,15 +238,8 @@ const filterTable = { stateFk: 0, warehouseFk: useState().getUser().value.wareho
                             @update-quantity="popup.hide()"
                             :selected-rows="selectedRows"
                     /></template>
-                </VnPopupProxy>
-            </QBtnGroup>
-        </template>
-    </VnSubToolbar>
-    <TicketLackTable
-        ref="tableRef"
-        :filter="filterTable"
-        @update:selection="({ value }, _) => (selectedRows = value)"
-    >
+                </VnPopupProxy> </QBtnGroup
+        ></template>
         <template #top-left>
             <div style="display: flex; align-items: center" v-if="itemLack">
                 <VnImg :id="itemLack.itemFk" class="rounded image-wrapper"></VnImg>
diff --git a/src/pages/Ticket/Negative/TicketLackTable.vue b/src/pages/Ticket/Negative/TicketLackTable.vue
index f51a097e3..4b250a271 100644
--- a/src/pages/Ticket/Negative/TicketLackTable.vue
+++ b/src/pages/Ticket/Negative/TicketLackTable.vue
@@ -255,6 +255,9 @@ function onBuysFetched(data) {
         <template #top-left>
             <slot name="top-left" />
         </template>
+        <template #top-right>
+            <slot name="top-right" />
+        </template>
 
         <template #column-status="{ row }">
             <QTd style="width: 150px">