refs #6321 feat: negativeOrigin modal

src/i18n/es/index.js

@@ -462,6 +462,10 @@ export default {
             inkFk: 'Color',
             timed: 'timed',
             minTimed: 'Hora',
+            modalOrigin:{
+                title: 'Actualizar negativos',
+                question: 'Seleccione un estado para guardar'
+            },
             detail:{
                 itemFk:'Articulo',
                 ticketFk:'Id_Ticket',

src/pages/Ticket/Negative/TicketLackList.vue

@@ -5,9 +5,16 @@ import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import { useSession } from 'src/composables/useSession';
 import TicketLackFilter from 'pages/Ticket/Negative/TicketLackFilter.vue';
-import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 import TicketDescriptorDialog from 'pages/Ticket/Negative/TicketLackDescriptorDialog.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import axios from 'axios';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+import VnInput from 'components/common/VnInput.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelectDialog from 'components/common/VnSelectDialog.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import { useDialogPluginComponent } from 'quasar';
 
 const session = useSession();
 
@@ -15,9 +22,12 @@ const token = session.getToken();
 
 const stateStore = useStateStore();
 const { t } = useI18n();
-const selected = ref([]);
+const selectedRows = ref([]);
 const showTicketDialog = ref(false);
+const showNegativeOriginDialog = ref(false);
+const reasonegativeOriginDialog = ref(null);
 const currentRow = ref(null);
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
 
 const viewSummary = (value) => {
     showTicketDialog.value = true;
@@ -29,6 +39,8 @@ const viewSummary = (value) => {
     //     },
     // });
 };
+const originDialogRef = ref();
+
 const columns = computed(() => [
     {
         name: 'minTimed',
@@ -113,10 +125,39 @@ const columns = computed(() => [
         field: (row) => row,
     },
 ]);
+const updateNegativeOrigin = async () => {
+    showNegativeOriginDialog.value = true;
+    const negativeOrigins = selectedRows.value.map(({ itemFk, lack }) => ({
+        itemFk,
+        negativeType: reasonegativeOriginDialog.value,
+        lack,
+    }));
+
+    try {
+        await axios.post(`Tickets/itemLack`, negativeOrigins);
+        originDialogRef.value.hide();
+    } catch (err) {
+        return err;
+    }
+};
 </script>
 
 <template>
-    <div class="column items-center">
+    <QPage class="column items-center">
+        <VnSubToolbar class="bg-vn-dark justify-end">
+            <template #st-actions>
+                <div class="flex items-center q-ml-lg">
+                    <QBtn
+                        color="primary"
+                        icon="save"
+                        :disable="!selectedRows?.length"
+                        @click="showNegativeOriginDialog = true"
+                    >
+                        <QTooltip>{{ t('globals.save') }}</QTooltip>
+                    </QBtn>
+                </div>
+            </template>
+        </VnSubToolbar>
         <div class="list">
             <VnPaginate data-key="NegativeList" :url="`Tickets/itemLack`" auto-load>
                 <template #body="{ rows }">
@@ -124,13 +165,16 @@ const columns = computed(() => [
                         :columns="columns"
                         :rows="rows"
                         :dense="$q.screen.lt.md"
-                        :pagination="{ rowsPerPage: null }"
+                        flat
-                        hide-pagination
+                        row-key="itemFk"
-                        row-key="cmrFk"
                         selection="multiple"
-                        v-model:selected="selected"
+                        v-model:selected="selectedRows"
                         :grid="$q.screen.lt.md"
                         auto-load
+                        :rows-per-page-options="[0]"
+                        hide-pagination
+                        :pagination="{ rowsPerPage: null }"
+                        :no-data-label="t('globals.noResults')"
                     >
                         <template #top>
                             <div style="width: 100%; display: table">
@@ -160,28 +204,14 @@ const columns = computed(() => [
                             </QTd>
                         </template>
 
-                        <template #body-cell-producer="{ row, value }">
+                        <template #body-cell-producer="{ value }">
                             <QTd align="right" class="text-primary">
                                 <QBtn flat color="blue" dense>{{ value }}</QBtn>
-                                <CustomerDescriptorProxy :id="row.producerFk" />
                             </QTd>
                         </template>
 
-                        <template #body-cell-icons="{ row, value }">
+                        <template #body-cell-icons="{ value }">
                             <QTd align="center">
-                                <QIcon
-                                    @click.stop="updateNegativeOrigin(row)"
-                                    class="q-ml-md"
-                                    color="primary"
-                                    name="outgoing_email"
-                                    size="sm"
-                                >
-                                    <QTooltip>
-                                        {{ t('Preview') }}
-                                    </QTooltip>
-
-                                    <!-- <TicketDescriptorProxy :id="value" /> -->
-                                </QIcon>
                                 <QIcon
                                     @click.stop="viewSummary(value)"
                                     class="q-ml-md"
@@ -224,21 +254,74 @@ const columns = computed(() => [
                 </QCardSection>
             </QCard>
         </QDialog>
-        <!-- <VnConfirm  :title="t('confirmGreuges')">
-            <template #customHTML>
 
-            </template>
+        <QDialog
-        </VnConfirm> -->
+            ref="originDialogRef"
+            @hide="onDialogHide"
+            v-model="showNegativeOriginDialog"
+        >
+            <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('ticket.negative.modalOrigin.title')
+                    }}</span>
+                    <QSpace />
+                    <QBtn
+                        icon="close"
+                        :disable="isLoading"
+                        flat
+                        round
+                        dense
+                        v-close-popup
+                    />
+                </QCardSection>
+                <QCardSection
+                    class="row items-center justify-center column items-stretch"
+                >
+                    <span>{{ t('ticket.negative.modalOrigin.question') }}</span>
+                    <QSelect
+                        :label="t('globals.reason')"
+                        v-model="reasonegativeOriginDialog"
+                        :options="['FALTAS', 'CONTENEDOR', 'ENTRADAS', 'OVERBOOKING']"
+                    />
+                </QCardSection>
+                <QCardActions align="right">
+                    <QBtn
+                        :label="t('globals.cancel')"
+                        color="primary"
+                        :disable="isLoading"
+                        flat
+                        v-close-popup
+                    />
+                    <QBtn
+                        :label="t('globals.confirm')"
+                        color="primary"
+                        :disable="!reasonegativeOriginDialog"
+                        @click="updateNegativeOrigin()"
+                        unelevated
+                        autofocus
+                    /> </QCardActions
+            ></QCard>
+        </QDialog>
+
         <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
             <QScrollArea class="fit text-grey-8">
                 <TicketLackFilter data-key="NegativeList" />
             </QScrollArea>
         </QDrawer>
-    </div>
+    </QPage>
 </template>
 
 <style lang="scss" scoped>
 .list {
+    max-height: 100%;
     padding: 15px;
     width: 100%;
 }