feat: #6321 remove row

src/pages/Item/components/ItemProposal.vue

@@ -14,7 +14,7 @@ const MATCH_VALUES = [5, 6, 7, 8];
 const { t } = useI18n();
 const session = useSession();
 
-const primaryColor = 'red';
+const primaryColor = '#f5b351';
 const colorSpacer = '#ecf0f1';
 const compatibilityItem = (value) => `${100 * (value / MATCH_VALUES.length)}%`;
 const gradientStyle = (value) =>
@@ -156,6 +156,7 @@ const columns = computed(() => [
         field: 'located',
     },
 ]);
+
 async function confirm() {
     // console.log('');
     // const response = { address: address.value };
@@ -171,12 +172,12 @@ async function confirm() {
     //     }
     // }
     // onDialogOK({ data: true });
-    dialogRef.value.hide({ type: 'refresh', itemProposal: proposalSelected.value[0] });
+    emit('refreshData', { type: 'refresh', itemProposal: proposalSelected.value[0] });
 }
 const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();
 
 // Definir el emisor de eventos
-const emit = defineEmits(['dialogClosed']);
+const emit = defineEmits(['dialogClosed', 'refreshData']);
 
 function onDialogClose() {
     console.log('Dialog has been closed');

src/pages/Ticket/Negative/TicketLackDetail.vue

@@ -47,6 +47,7 @@ const session = useSession();
 import { useRoute } from 'vue-router';
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import VnRow from 'src/components/ui/VnRow.vue';
+import { useArrayData } from 'src/composables/useArrayData';
 const route = useRoute();
 const token = session.getTokenMultimedia();
 const itemLack = ref(null);
@@ -308,6 +309,7 @@ function freeFirst({ alertLevel: a }, { alertLevel: b }) {
     // En cualquier otro caso, no se cambia el orden
     return 0;
 }
+const { store } = useArrayData(URL_KEY);
 const handleRows = (rows) => {
     if (showFree.value) return rows.filter(({ alertLevel }) => alertLevel === 0);
     return rows.sort(freeFirst);
@@ -335,16 +337,23 @@ const itemProposalEvt = ({ itemProposal }) => {
     itemProposalSelected.value = itemProposal;
     replaceItem();
 };
+const tableRef = ref(null);
 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;
+        originalRowDataCopy.value.splice(originalRowDataCopy.value.indexOf(ticket));
         ticket.itemFk = itemProposalSelected.value.id;
         ticket.quantity *= 2;
         selectedRows.value.push({ ticketFk: ticket.ticketFk });
         itemProposalSelected.value.available -= ticket.quantity;
         itemLack.value.lack += ticket.quantity;
+        // tableRef.value.rows.pop();
+        console.log(store.data);
+        const index = store.data.findIndex((t) => t.ticketFk === ticket.ticketFk);
+        store.data.splice(index, 1);
+        console.log(ticket);
     }
 };
 </script>
@@ -442,6 +451,7 @@ const replaceItem = () => {
                         ref="proposalDialogRef"
                         :item="item"
                         :tickets="selectedRows"
+                        @refresh-data="itemProposalEvt"
                     ></ItemProposal>
                     <QTooltip bottom anchor="bottom right">
                         {{ t('itemProposal') }}
@@ -459,7 +469,7 @@ const replaceItem = () => {
                 :data-key="URL_KEY"
                 :url="`${URL_KEY}/${entityId}`"
                 ref="itemLackForm"
-                @on-fetch="copyOriginalRowsData($event)"
+                @on-fetch="copyOriginalRowsData"
                 auto-load
             >
                 <!-- :rows="rows" -->
@@ -501,6 +511,7 @@ const replaceItem = () => {
                         <QIcon name="arrow_right" size="lg" />
                         <VnSelectDialog action-icon="call_split"></VnSelectDialog
                     ></VnRow> -->
+                    <TransitionGroup name="list" tag="div">
                         <QTable
                             ref="tableRef"
                             :columns="columns"
@@ -527,13 +538,18 @@ const replaceItem = () => {
                                     </QTd>
                                     <QTd v-for="col in props.cols" :key="col.name">
                                         <template
-                                        v-if="tableColumnComponents[col.name]?.component"
+                                            v-if="
+                                                tableColumnComponents[col.name]?.component
+                                            "
                                         >
                                             <component
                                                 :is="
-                                                tableColumnComponents[col.name].component
+                                                    tableColumnComponents[col.name]
+                                                        .component
+                                                "
+                                                v-bind="
+                                                    tableColumnComponents[col.name].props
                                                 "
-                                            v-bind="tableColumnComponents[col.name].props"
                                                 v-model="props.row[col.field]"
                                                 v-on="
                                                     tableColumnComponents[col.name].event(
@@ -541,7 +557,9 @@ const replaceItem = () => {
                                                         props
                                                     )
                                                 "
-                                            :style="tableColumnComponents[col.name].style"
+                                                :style="
+                                                    tableColumnComponents[col.name].style
+                                                "
                                             >
                                                 <template v-if="isComponentVn(col)">{{
                                                     col.value
@@ -600,6 +618,7 @@ const replaceItem = () => {
                                 </QTr>
                             </template>
                         </QTable>
+                    </TransitionGroup>
                 </template>
             </VnPaginate></div
     ></QPage>
@@ -611,3 +630,14 @@ const replaceItem = () => {
         :tickets="resultSplit"
     ></HandleSplited>-->
 </template>
+<style lang="scss" scoped>
+.list-enter-active,
+.list-leave-active {
+    transition: all 1s ease;
+}
+.list-enter-from,
+.list-leave-to {
+    opacity: 0;
+    background-color: $primary;
+}
+</style>