feat: refs #6321 updates

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"

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
+                    <VnInput :label="t('Name')" v-model="params.name" is-outlined />
-                        :label="t('globals.name')"
-                        v-model="params.name"
-                        is-outlined
-                    />
                 </QItemSection>
             </QItem>
             <QItem class="q-mb-sm">

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>

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,8 +146,17 @@ const filterTable = { stateFk: 0, warehouseFk: useState().getUser().value.wareho
         @on-fetch="(data) => (itemLack = data[0])"
         auto-load
     />
-    <VnSubToolbar>
+    <!-- <VnSubToolbar>
-        <template #st-data>
+        <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"
@@ -153,26 +176,26 @@ const filterTable = { stateFk: 0, warehouseFk: useState().getUser().value.wareho
                     ></TicketTransfer>
                 </QBtn>
                 <QBtn
-                data-cy="itemProposal"
                     color="primary"
                     @click="showProposalDialog = true"
                     :disable="selectedRows.length < 1"
                 >
-                <QIcon name="import_export" class="rotate-90"></QIcon>
+                    <QIcon
-                <ItemProposalProxy
+                        name="import_export"
+                        class="rotate-90"
+                        @click="showItemProposal"
+                    ></QIcon>
+                    <!-- <ItemProposalProxy
                         ref="proposalDialogRef"
                         :item-lack="itemLack"
                         :replace-action="true"
                         :sales="selectedRows"
                         @item-replaced="itemProposalEvt"
-                ></ItemProposalProxy>
+                    ></ItemProposalProxy> -->
                     <QTooltip bottom anchor="bottom right">
                         {{ t('itemProposal') }}
                     </QTooltip>
                 </QBtn>
-        </template>
-        <template #st-actions>
-            <QBtnGroup push style="column-gap: 1px">
                 <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>
+                </VnPopupProxy> </QBtnGroup
-            </QBtnGroup>
+        ></template>
-        </template>
-    </VnSubToolbar>
-    <TicketLackTable
-        ref="tableRef"
-        :filter="filterTable"
-        @update:selection="({ value }, _) => (selectedRows = value)"
-    >
         <template #top-left>
             <div style="display: flex; align-items: center" v-if="itemLack">
                 <VnImg :id="itemLack.itemFk" class="rounded image-wrapper"></VnImg>

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">