feat: substitution icons

src/pages/Ticket/Negative/TicketLackDetail.vue

@@ -1,17 +1,14 @@
 <script setup>
-import { computed, nextTick, onMounted, onUnmounted, ref, toRefs } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { QBtn, QCheckbox, useQuasar } from 'quasar';
+import { QBtn, QCheckbox } from 'quasar';
 import axios from 'axios';
-import HandleSplited from 'pages/Ticket/Negative/components/HandleSplited.vue';
 import ChangeQuantityDialog from 'pages/Ticket/Negative/components/ChangeQuantityDialog.vue';
 import ChangeStateDialog from 'pages/Ticket/Negative/components/ChangeStateDialog.vue';
 import ItemProposal from 'pages/Item/components/ItemProposal.vue';
-import { useVnConfirm } from 'composables/useVnConfirm';
 import VnLv from 'src/components/ui/VnLv.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import TickerSplit from '../Card/TicketSplit.vue';
 import TicketTransfer from '../Card/TicketTransfer.vue';
 import TicketMassiveUpdate from '../Card/TicketMassiveUpdate.vue';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
@@ -26,46 +23,26 @@ import { useDialogPluginComponent } from 'quasar';
 import { useSession } from 'src/composables/useSession';
 import ZoneDescriptorProxy from 'pages/Zone/Card/ZoneDescriptorProxy.vue';
 
-const { openConfirmationModal } = useVnConfirm();
 const { t } = useI18n();
 const URL_KEY = 'Tickets/ItemLack';
 const editableStates = ref([]);
 const { notify } = useNotify();
 const stateStore = useStateStore();
 const proposalDialogRef = ref();
-const splitDialogRef = ref();
 const changeStateDialogRef = ref();
 const changeQuantityDialogRef = ref();
-const showSplitDialog = ref(false);
 const showProposalDialog = ref(false);
 const showChangeQuantityDialog = ref(false);
-const showChangeStateDialog = ref(false);
 const componentIsRendered = ref(false);
 const showFree = ref(true);
-const resultSplit = ref([]);
 const selectedRows = ref([]);
 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);
 const originalRowDataCopy = ref(null);
-// const $props = defineProps({
-//     item: {
-//         type: Number,
-//         required: true,
-//     },
-//     filter: {
-//         type: Object,
-//         required: false,
-//         default: () => {
-//             true;
-//         },
-//     },
-// });
 onMounted(() => {
     stateStore.rightDrawer = false;
     nextTick(() => {
@@ -86,11 +63,6 @@ const getInputEvents = (colField, props) => ({
 const saveChange = async (field, { rowIndex, row }) => {
     try {
         switch (field) {
-            // case 'split':
-            // showSplitDialog.value =true
-            //     // await split({ simple: true }, [row]);
-
-            //     break;
             case 'code':
                 await axios.post(`Tickets/state`, {
                     ticketFk: row.ticketFk,
@@ -119,10 +91,6 @@ function isComponentVn(col) {
     return tableColumnComponents?.value[col.name]?.component === 'span' ?? false;
 }
 
-// const onDetailDialogHide = (evt) => {
-//     if (evt?.type === 'refresh') ticketDetailRef.value.reload();
-// };
-
 const tableColumnComponents = computed(() => ({
     status: {
         component: 'span',
@@ -195,7 +163,7 @@ const tableColumnComponents = computed(() => ({
 const columns = computed(() => [
     {
         name: 'status',
-        align: 'center',
+        align: 'left',
         sortable: false,
     },
     {
@@ -251,46 +219,13 @@ const columns = computed(() => [
         style: 'width: 100px',
     },
 ]);
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-// const { filter } = toRefs($props);
 const emit = defineEmits([...useDialogPluginComponent.emits, 'selection', 'close']);
 function rowsHasSelected(selection) {
-    emit(
+    emit('selection', selection);
-        'selection',
-        selection
-        //.map(({ ticketFk }) => ticketFk)
-    );
 }
 
 const itemLackForm = ref();
-// 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;
-//             // });
-//         }
-//     );
-// };
 
-// const split = async ({ simple }, data = []) => {
-//     openConfirmationModal(
-//         t('negative.modalSplit.title'),
-//         t('splitQuestion'),
-//         () => {
-//             const body = simple ? data : selectedRows.value;
-//             axios.post(`Tickets/split`, body).then((data) => {
-//                 resultSplit.value = data;
-//             });
-//         }
-//     );
-// };
 const reload = async () => {
     itemLackForm.value.fetch();
 };
@@ -315,25 +250,7 @@ const handleRows = (rows) => {
     if (showFree.value) return rows.filter(({ alertLevel }) => alertLevel === 0);
     return rows.sort(freeFirst);
 };
-const quasar = useQuasar();
 
-const split = async () => {
-    const body = selectedRows.value;
-
-    // const {data} = await axios.post(`Tickets/split`, body);
-    // resultSplit.value = data;
-    resultSplit.value = [
-        { ticket: 32, newTicket: 1000005, status: 'split' },
-        { ticket: 32, newTicket: 1000006, status: 'noSplit' },
-        { ticket: 32, newTicket: 1000007, status: 'error' },
-    ];
-    quasar.dialog({
-        component: HandleSplited,
-        componentProps: {
-            tickets: resultSplit.value,
-        },
-    });
-};
 const itemProposalEvt = ({ itemProposal }) => {
     itemProposalSelected.value = itemProposal;
     replaceItem();
@@ -391,18 +308,6 @@ const replaceItem = () => {
         "
         auto-load
     />
-    <!-- <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
-        <QBtnGroup push style="column-gap: 1px"
-            ><QBtn
-                :label="t('proposal.replace')"
-                @click="emit('close')"
-                color="primary"
-                icon="save"
-            >
-                <QTooltip>{{ t('globals.cancel') }}</QTooltip>
-            </QBtn></QBtnGroup
-        >
-    </Teleport> -->
     <VnSubToolbar>
         <template #st-data>
             <QBtnGroup push style="column-gap: 1px">
@@ -494,7 +399,6 @@ const replaceItem = () => {
                 @on-fetch="copyOriginalRowsData"
                 auto-load
             >
-                <!-- :rows="rows" -->
                 <template #body="{ rows }">
                     <VnLv class="q-mb-lg image">
                         <template #label>
@@ -523,17 +427,6 @@ const replaceItem = () => {
                             <FetchedTags class="q-ml-md" :item="item" :max-length="5" />
                         </template>
                     </VnLv>
-                    <!-- <ItemDescriptorProxy :id="entityId" />
-                    <span class="text-h6">{{ item.longName }}</span>
-                    <span class="text-h6"
-                    ><sub>{{ item.longName }}</sub></span
-                    > -->
-                    <!-- <VnRow style="align-items: center">
-                        <div>
-                        </div>
-                        <QIcon name="arrow_right" size="lg" />
-                        <VnSelectDialog action-icon="call_split"></VnSelectDialog
-                    ></VnRow> -->
                     <TransitionGroup name="list" tag="div">
                         <QTable
                             ref="tableRef"
@@ -549,15 +442,30 @@ const replaceItem = () => {
                             <template #body="props">
                                 <QTr>
                                     <QTd>
-                                        <!-- <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" />
+                                        <QIcon
+                                            v-if="props.row.substitutionAllowed === 1"
+                                            name="help"
+                                            size="xs"
+                                            color="primary"
+                                        >
+                                            <QTooltip>{{
+                                                t('Disabled substitution')
+                                            }}</QTooltip>
+                                        </QIcon>
+                                        <QIcon
+                                            v-if="
+                                                props.row.obserbationTypeCode ===
+                                                'substitution'
+                                            "
+                                            name="help"
+                                            size="xs"
+                                            color="primary"
+                                        >
+                                            <QTooltip>{{
+                                                t('Substitution Observation')
+                                            }}</QTooltip>
+                                        </QIcon>
                                     </QTd>
                                     <QTd v-for="col in props.cols" :key="col.name">
                                         <template

src/pages/Ticket/Negative/TicketLackList.vue

@@ -50,6 +50,7 @@ const originDialogRef = ref();
 const columns = computed(() => [
     {
         name: 'date',
+        align: 'left',
         label: t('negative.date'),
         field: 'timed',
         format: ({ timed }) => toDate(timed),
@@ -59,6 +60,7 @@ const columns = computed(() => [
     },
     {
         name: 'timed',
+        align: 'left',
         label: t('negative.timed'),
         field: 'timed',
         format: ({ timed }) => toHour(timed),
@@ -67,12 +69,14 @@ const columns = computed(() => [
     },
     {
         name: 'itemFk',
+        align: 'left',
         label: t('negative.id'),
         field: ({ itemFk }) => itemFk,
         sortable: true,
     },
     {
         name: 'longName',
+        align: 'left',
         label: t('negative.longName'),
         field: ({ longName }) => longName,
         columnField: {
@@ -85,20 +89,20 @@ const columns = computed(() => [
                 },
             },
         },
-
         sortable: true,
         headerStyle: 'width: 350px',
         cardVisible: true,
     },
     {
         name: 'producer',
+        align: 'left',
         label: t('negative.supplier'),
         field: ({ producer }) => dashIfEmpty(producer),
-
         sortable: true,
     },
     {
         name: 'inkFk',
+        align: 'left',
         label: t('negative.colour'),
         field: ({ inkFk }) => inkFk,
         sortable: true,
@@ -106,6 +110,7 @@ const columns = computed(() => [
     },
     {
         name: 'size',
+        align: 'left',
         label: t('negative.size'),
         field: ({ size }) => size,
         sortable: true,
@@ -113,6 +118,7 @@ const columns = computed(() => [
     },
     {
         name: 'category',
+        align: 'left',
         label: t('negative.origen'),
         field: ({ category }) => dashIfEmpty(category),
         sortable: true,
@@ -120,6 +126,7 @@ const columns = computed(() => [
     },
     {
         name: 'lack',
+        align: 'left',
         label: t('negative.lack'),
         field: ({ lack }) => lack,
 
@@ -128,8 +135,8 @@ const columns = computed(() => [
         cardVisible: true,
     },
     {
-        align: 'right',
         name: 'tableActions',
+        align: 'left',
         actions: [
             {
                 title: t('Client ticket list'),

src/pages/Ticket/Negative/components/NegativeOriginDialog.vue

@@ -58,7 +58,13 @@ const update = async () => {
                 <QSelect
                     :label="t('globals.reason')"
                     v-model="reason"
-                    :options="['FALTAS', 'CONTENEDOR', 'ENTRADAS', 'OVERBOOKING']"
+                    :options="[
+                        'FALTAS',
+                        'CONTENEDOR',
+                        'ENTRADAS',
+                        'OVERBOOKING',
+                        'SUSTITUCION',
+                    ]"
                 />
             </QCardSection>
             <QCardActions align="right">