src/i18n/locale/en.yml

@@ -21,6 +21,7 @@ globals:
     search: Search
     changes: Changes
     dataCreated: Data created
+    split: Split
     add: Add
     create: Create
     edit: Edit

src/i18n/locale/es.yml

@@ -43,6 +43,7 @@ globals:
     rowRemoved: Fila eliminada
     pleaseWait: Por favor espera...
     noPinnedModules: No has fijado ningún módulo
+    split: Split
     summary:
         basicData: Datos básicos
     today: Hoy

src/pages/Ticket/Negative/HandleSplited.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import { useDialogPluginComponent } from 'quasar';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+
+const editableStates = ref([]);
+const { t } = useI18n();
+const showChangeStateDialog = ref(false);
+const newState = ref(null);
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+const $props = defineProps({
+    tickets: {
+        type: Array,
+        default: () => [],
+    },
+});
+const updateState = async () => {
+    try {
+        showChangeStateDialog.value = true;
+        const rowsToUpdate = $props.tickets.map(({ ticketFk }) =>
+            axios.post(`Tickets/state`, {
+                ticketFk,
+                code: newState.value,
+            })
+        );
+        await Promise.all(rowsToUpdate);
+    } catch (err) {
+        return err;
+    } finally {
+        dialogRef.value.hide({ type: 'refresh', refresh: true });
+    }
+};
+</script>
+
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showChangeStateDialog">
+        <FetchData
+            url="States/editableStates"
+            @on-fetch="(data) => (editableStates = data)"
+            auto-load
+        />
+        <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('negative.detail.modal.changeState.title')
+                }}</span>
+                <QSpace />
+                <QBtn icon="close" flat round dense v-close-popup />
+            </QCardSection>
+            <QCardSection class="row items-center justify-center column items-stretch">
+                <span>{{ t('negative.detail.modal.changeState.title') }}</span>
+                <VnSelect
+                    :label="t('negative.detail.modal.changeState.placeholder')"
+                    v-model="newState"
+                    :options="editableStates"
+                    option-label="name"
+                    option-value="code"
+                />
+            </QCardSection>
+            <QCardActions align="right">
+                <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
+                <QBtn
+                    :label="t('globals.confirm')"
+                    color="primary"
+                    :disable="!newState"
+                    @click="updateState"
+                    unelevated
+                    autofocus
+                /> </QCardActions
+        ></QCard>
+    </QDialog>
+</template>
+
+<style lang="scss" scoped>
+.list {
+    max-height: 100%;
+    padding: 15px;
+    width: 100%;
+}
+
+.grid-style-transition {
+    transition: transform 0.28s, background-color 0.28s;
+}
+
+#true {
+    background-color: $positive;
+}
+
+#false {
+    background-color: $negative;
+}
+
+div.q-dialog__inner > div {
+    max-width: fit-content !important;
+}
+</style>

src/pages/Ticket/Negative/TicketLackDetail.vue

@@ -302,14 +302,14 @@ const handleRows = (rows) => {
                 <template #body="props">
                     <QTr>
                         <QTd>
-                            <QIcon
+                            <!-- <QIcon
                                 v-if="resultSplit.length > 0"
                                 :name="getIcon(props.key, 'name')"
                                 :color="getIcon(props.key, 'color')"
                                 class="fill-icon q-mr-sm"
                                 size="xs"
                                 style="font-weight: bold"
-                            />
+                            /> -->
                             <QCheckbox v-model="props.selected" />
                         </QTd>
                         <QTd v-for="col in props.cols" :key="col.name">
@@ -381,12 +381,3 @@ const handleRows = (rows) => {
         </template>
     </VnPaginate>
 </template>
-
-<i18n>
-    en:
-        splitQuestion: Are you sure you want to split all tickets?
-        Confirm split selected: Confirm split selected
-    es:
-        splitQuestion: ¿Estás seguro de separar los tickets seleccionados?
-        Confirm split selected: Confirmar separar tickets seleccionados
-</i18n>

src/pages/Ticket/Negative/TicketLackDialogProxy.vue

@@ -49,7 +49,7 @@ async function splitSelected() {
             >
                 <QIcon name="call_split"></QIcon>
                 <QTooltip>
-                    {{ t('globals.split') }}
+                    {{ t('global.split') }}
                 </QTooltip>
             </QBtn>
             <QBtn icon="close" flat round dense v-close-popup />

src/pages/Ticket/Negative/TicketLackList.vue

@@ -5,24 +5,30 @@ import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import TicketLackFilter from 'pages/Ticket/Negative/TicketLackFilter.vue';
 import TicketLackDetail from 'pages/Ticket/Negative/TicketLackDetail.vue';
+import HandleSplited from 'pages/Ticket/Negative/HandleSplited.vue';
 import ChangeQuantityDialog from 'pages/Ticket/Negative/ChangeQuantityDialog.vue';
 import ChangeStateDialog from 'pages/Ticket/Negative/ChangeStateDialog.vue';
 import ItemProposal from 'src/pages/Item/components/ItemProposal.vue';
 import FetchData from 'components/FetchData.vue';
+import { useVnConfirm } from 'composables/useVnConfirm';
 
 import NegativeOriginDialog from 'pages/Ticket/Negative/NegativeOriginDialog.vue';
 import TotalNegativeOriginDialog from 'pages/Ticket/Negative/TotalNegativeOriginDialog.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import axios from 'axios';
+import { onBeforeMount } from 'vue';
 const DEFAULT_WAREHOUSE = 'Algemesi';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
 const selectedRows = ref([]);
 const selectedRowsDetail = ref([]);
+const resultSplit = ref([]);
 const showNegativeOriginDialog = ref(false);
 const showTotalNegativeOriginDialog = ref(false);
 const showProposalDialog = ref(false);
+const showSplitDialog = ref(false);
 const showChangeQuantityDialog = ref(false);
 const showChangeStateDialog = ref(false);
 const showFree = ref(true);
@@ -37,6 +43,7 @@ const viewSummary = (row) => {
 const originDialogRef = ref();
 const totalNegativeDialogRef = ref();
 const proposalDialogRef = ref();
+const splitDialogRef = ref();
 const changeStateDialogRef = ref();
 const changeQuantityDialogRef = ref();
 const columns = computed(() => [
@@ -102,6 +109,10 @@ const columns = computed(() => [
 const vnPaginateRef = ref();
 const ticketDetailRef = ref();
 
+onBeforeMount(() => {
+    stateStore.rightDrawer = true;
+});
+
 const handleWarehouses = async (data) => {
     negativeParams.warehouse = data.find((w) => w.name === DEFAULT_WAREHOUSE).id;
     await vnPaginateRef.value.fetch();
@@ -110,6 +121,23 @@ const handleWarehouses = async (data) => {
 const onDetailDialogHide = (evt) => {
     if (evt?.type === 'refresh') ticketDetailRef.value.reload();
 };
+const { openConfirmationModal } = useVnConfirm();
+
+const split = async ({ simple }, data = []) => {
+    openConfirmationModal(
+        t('negative.detail.split.confirmSplitSelected'),
+        t('negative.detail.split.splitQuestion'),
+        null,
+        () => {
+            showSplitDialog.value = true;
+            resultSplit.value = [{}];
+            // const body = simple ? data : selectedRows.value;
+            // axios.post(`Tickets/split`, body).then((data) => {
+            //     resultSplit.value = data;
+            // });
+        }
+    );
+};
 </script>
 
 <template>
@@ -188,10 +216,20 @@ const onDetailDialogHide = (evt) => {
                             </QTooltip>
                         </QBtn>
                         <QBtn
+                            color="primary"
+                            @click="split"
+                            :disable="selectedRowsDetail.length < 1"
+                            icon="call_split"
+                        >
+                            <QTooltip bottom anchor="bottom right">
+                                {{ t('globals.split') }}
+                            </QTooltip>
+                        </QBtn>
+                        <QBtn
+                            icon="vn:splitline"
                             color="primary"
                             @click="showProposalDialog = true"
                             :disable="selectedRowsDetail.length < 1"
-                            icon="vn:splitline"
                         >
                             <QTooltip bottom anchor="bottom right">
                                 {{ t('Item proposal') }}
@@ -301,6 +339,12 @@ const onDetailDialogHide = (evt) => {
             :selected-rows="selectedRowsDetail"
         >
         </ChangeQuantityDialog>
+        <HandleSplited
+            ref="splitDialogRef"
+            @hide="onDialogHide"
+            v-model="showSplitDialog"
+            :tickets="resultSplit"
+        ></HandleSplited>
         <ItemProposal
             ref="proposalDialogRef"
             @hide="onDialogHide"

src/pages/Ticket/locale/en.yml

@@ -48,3 +48,6 @@ negative:
             changeQuantity:
                 title: Update tickets quantity
                 placeholder: New quantity
+        split:
+            splitQuestion: Are you sure you want to split all tickets?
+            confirmSplitSelected: Confirm split selected

src/pages/Ticket/locale/es.yml

@@ -50,3 +50,6 @@ negative:
             changeQuantity:
                 title: Actualizar cantidad de los tickets
                 placeholder: Nueva cantidad
+        split:
+            splitQuestion: ¿Estás seguro de separar los tickets seleccionados?
+            confirmSplitSelected: Confirmar separar tickets seleccionados