fat: #6321 handle events through components

src/pages/Item/components/ItemProposal.vue

@@ -8,6 +8,7 @@ import { useSession } from 'src/composables/useSession';
 import VnLv from 'src/components/ui/VnLv.vue';
 import { toCurrency } from 'filters/index';
 import VnStockValueDisplay from 'src/components/ui/VnStockValueDisplay.vue';
+import { useDialogPluginComponent } from 'quasar';
 
 const MATCH_VALUES = [5, 6, 7, 8];
 const { t } = useI18n();
@@ -156,8 +157,7 @@ const columns = computed(() => [
     },
 ]);
 async function confirm() {
-    console.log('');
-    quantity.value = 0;
+    // console.log('');
     // const response = { address: address.value };
     // if (props.promise) {
     //     isLoading.value = true;
@@ -170,7 +170,18 @@ async function confirm() {
     //         isLoading.value = false;
     //     }
     // }
-    // onDialogOK(response);
+    // onDialogOK({ data: true });
+    dialogRef.value.hide({ type: 'refresh', itemProposal: proposalSelected.value[0] });
+}
+const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();
+
+// Definir el emisor de eventos
+const emit = defineEmits(['dialogClosed']);
+
+function onDialogClose() {
+    console.log('Dialog has been closed');
+    // Emitir el evento personalizado
+    emit('dialogClosed', { data: true });
 }
 </script>
 <template>
@@ -242,6 +253,7 @@ async function confirm() {
                                 auto-load
                                 :rows-per-page-options="[0]"
                                 hide-pagination
+                                hide-bottom
                             >
                                 <template #top-row>
                                     <!-- <QTr>

src/pages/Ticket/Negative/TicketLackDetail.vue

@@ -23,12 +23,7 @@ import { useStateStore } from 'stores/useStateStore';
 import { useDialogPluginComponent } from 'quasar';
 import { useSession } from 'src/composables/useSession';
 import ZoneDescriptorProxy from 'pages/Zone/Card/ZoneDescriptorProxy.vue';
-onMounted(() => {
-    stateStore.rightDrawer = false;
-    nextTick(() => {
-        componentIsRendered.value = true;
-    });
-});
+
 const { openConfirmationModal } = useVnConfirm();
 const { t } = useI18n();
 const URL_KEY = 'Tickets/ItemLack';
@@ -53,7 +48,7 @@ import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import VnRow from 'src/components/ui/VnRow.vue';
 const route = useRoute();
 const token = session.getTokenMultimedia();
-
+const itemLack = ref(null);
 const originalRowDataCopy = ref(null);
 // const $props = defineProps({
 //     item: {
@@ -68,13 +63,19 @@ const originalRowDataCopy = ref(null);
 //         },
 //     },
 // });
-
-onUnmounted(() => (stateStore.rightDrawer = true));
+onMounted(() => {
+    stateStore.rightDrawer = false;
+    nextTick(() => {
+        componentIsRendered.value = true;
+    });
+});
+onUnmounted(() => {
+    stateStore.rightDrawer = true;
+});
 
 const copyOriginalRowsData = (rows) => {
     originalRowDataCopy.value = JSON.parse(JSON.stringify(rows));
 };
-
 const getInputEvents = (colField, props) => ({
     'update:modelValue': () => saveChange(colField, props),
     'keyup.enter': () => saveChange(colField, props),
@@ -329,6 +330,20 @@ const split = async () => {
         },
     });
 };
+const itemProposalEvt = ({ itemProposal }) => {
+    itemProposalSelected.value = itemProposal;
+    replaceItem();
+};
+const itemProposalSelected = ref(null);
+const replaceItem = () => {
+    const rows = handleRows(originalRowDataCopy.value).sort((row) => row.quantity);
+    for (const ticket of rows) {
+        if (ticket.quantity > itemProposalSelected.value.available) continue;
+        ticket.itemFk = itemProposalSelected.value.id;
+        selectedRows.value.push(ticket.ticketFk);
+        itemProposalSelected.value.available -= ticket.quantity;
+    }
+};
 </script>
 
 <template>
@@ -343,6 +358,12 @@ const split = async () => {
         @on-fetch="(data) => (item = data)"
         auto-load
     />
+    <FetchData
+        :url="`Tickets/itemLack`"
+        :filter="{ id: entityId }"
+        @on-fetch="(data) => (itemLack = data)"
+        auto-load
+    />
     <!-- <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
         <QBtnGroup push style="column-gap: 1px"
             ><QBtn
@@ -423,15 +444,13 @@ const split = async () => {
         <div class="full-width q-pa-md">
             <VnPaginate
                 :data-key="URL_KEY"
-                :url="`${URL_KEY}/${entityId}/detail`"
+                :url="`${URL_KEY}/${entityId}`"
                 ref="itemLackForm"
                 @on-fetch="copyOriginalRowsData($event)"
                 auto-load
             >
                 <!-- :rows="rows" -->
                 <template #body="{ rows }">
-                    {{ item }}
-
                     <VnLv class="image">
                         <template #label>
                             <QImg
@@ -586,7 +605,7 @@ const split = async () => {
     ></HandleSplited>-->
     <ItemProposal
         ref="proposalDialogRef"
-        @hide="onDialogHide"
+        @hide="itemProposalEvt"
         v-model="showProposalDialog"
         :item="item"
         :tickets="selectedRows"