src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { ref, onBeforeMount } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 
 import TicketBasicData from './TicketBasicData.vue';
 import TicketBasicDataForm from './TicketBasicDataForm.vue';
@@ -9,104 +9,69 @@ import { useVnConfirm } from 'composables/useVnConfirm';
 
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
+import { useArrayData } from 'src/composables/useArrayData';
 
 const { notify } = useNotify();
-const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
 const stepperRef = ref(null);
 const { openConfirmationModal } = useVnConfirm();
 
 const step = ref(1);
-const formData = ref({});
-const initialDataLoaded = ref(false);
 const haveNegatives = ref(false);
 
-const ticketFilter = {
-    include: [
-        { relation: 'address' },
-        {
-            relation: 'client',
-            scope: {
-                fields: [
-                    'salesPersonFk',
-                    'name',
-                    'isActive',
-                    'isFreezed',
-                    'isTaxDataChecked',
-                    'credit',
-                    'email',
-                    'phone',
-                    'mobile',
-                    'hasElectronicInvoice',
-                ],
-                include: {
-                    relation: 'salesPersonUser',
-                    scope: { fields: ['id', 'name'] },
-                },
-            },
-        },
-        { relation: 'invoiceOut' },
-    ],
-};
-
-const getTicketData = async () => {
-    const params = { filter: JSON.stringify(ticketFilter) };
-    const { data } = await axios.get(`tickets/${route.params.id}`, { params });
-    formData.value = data;
-    initialDataLoaded.value = true;
-};
+const ticket = computed(() => useArrayData('Ticket').store?.data);
 
 const isFormInvalid = () => {
     return (
-        !formData.value.clientFk ||
-        !formData.value.addressFk ||
-        !formData.value.agencyModeFk ||
-        !formData.value.companyFk ||
-        !formData.value.shipped ||
-        !formData.value.landed ||
-        !formData.value.zoneFk
+        !ticket.value.clientFk ||
+        !ticket.value.addressFk ||
+        !ticket.value.agencyModeFk ||
+        !ticket.value.companyFk ||
+        !ticket.value.shipped ||
+        !ticket.value.landed ||
+        !ticket.value.zoneFk
     );
 };
 
 const getPriceDifference = async () => {
     const params = {
-        landed: formData.value.landed,
-        addressId: formData.value.addressFk,
-        agencyModeId: formData.value.agencyModeFk,
-        zoneId: formData.value.zoneFk,
-        warehouseId: formData.value.warehouseFk,
-        shipped: formData.value.shipped,
+        landed: ticket.value.landed,
+        addressId: ticket.value.addressFk,
+        agencyModeId: ticket.value.agencyModeFk,
+        zoneId: ticket.value.zoneFk,
+        warehouseId: ticket.value.warehouseFk,
+        shipped: ticket.value.shipped,
     };
     const { data } = await axios.post(
-        `tickets/${formData.value.id}/priceDifference`,
+        `tickets/${ticket.value.id}/priceDifference`,
         params
     );
-    formData.value.sale = data;
+    ticket.value.sale = data;
 };
 
 const submit = async () => {
-    if (!formData.value.option) return notify(t('basicData.chooseAnOption'), 'negative');
+    if (!ticket.value.option) return notify(t('basicData.chooseAnOption'), 'negative');
 
     const params = {
-        clientFk: formData.value.clientFk,
-        nickname: formData.value.nickname,
-        agencyModeFk: formData.value.agencyModeFk,
-        addressFk: formData.value.addressFk,
-        zoneFk: formData.value.zoneFk,
-        warehouseFk: formData.value.warehouseFk,
-        companyFk: formData.value.companyFk,
-        shipped: formData.value.shipped,
-        landed: formData.value.landed,
-        isDeleted: formData.value.isDeleted,
-        option: formData.value.option,
-        isWithoutNegatives: formData.value.withoutNegatives,
-        withWarningAccept: formData.value.withWarningAccept,
+        clientFk: ticket.value.clientFk,
+        nickname: ticket.value.nickname,
+        agencyModeFk: ticket.value.agencyModeFk,
+        addressFk: ticket.value.addressFk,
+        zoneFk: ticket.value.zoneFk,
+        warehouseFk: ticket.value.warehouseFk,
+        companyFk: ticket.value.companyFk,
+        shipped: ticket.value.shipped,
+        landed: ticket.value.landed,
+        isDeleted: ticket.value.isDeleted,
+        option: ticket.value.option,
+        isWithoutNegatives: ticket.value.withoutNegatives,
+        withWarningAccept: ticket.value.withWarningAccept,
         keepPrice: false,
     };
 
     const { data } = await axios.post(
-        `tickets/${formData.value.id}/componentUpdate`,
+        `tickets/${ticket.value.id}/componentUpdate`,
         params
     );
 
@@ -118,7 +83,7 @@ const submit = async () => {
 };
 
 const submitWithNegatives = async () => {
-    formData.value.withWarningAccept = true;
+    ticket.value.withWarningAccept = true;
     submit();
 };
 
@@ -130,7 +95,7 @@ const onNextStep = async () => {
         await getPriceDifference();
         stepperRef.value.next();
     } else if (step.value === 2) {
-        if (haveNegatives.value && !formData.value.withoutNegatives)
+        if (haveNegatives.value && !ticket.value.withoutNegatives)
             openConfirmationModal(
                 t('basicData.negativesConfirmTitle'),
                 t('basicData.negativesConfirmMessage'),
@@ -139,10 +104,8 @@ const onNextStep = async () => {
         else submit();
     }
 };
-
-onBeforeMount(async () => await getTicketData());
 </script>
-<template>
+<template v-if="ticket">
     <QStepper
         v-model="step"
         ref="stepperRef"
@@ -155,18 +118,10 @@ onBeforeMount(async () => await getTicketData());
         }"
     >
         <QStep :name="1" :title="t('globals.pageTitles.basicData')" :done="step > 1">
-            <TicketBasicDataForm
-                v-if="initialDataLoaded"
-                @update-form="($event) => (formData = $event)"
-                v-model="formData"
-            />
+            <TicketBasicDataForm v-if="ticket" v-model="ticket" />
         </QStep>
         <QStep :name="2" :title="t('basicData.priceDifference')">
-            <TicketBasicData
-                :form-data="formData"
-                v-model:haveNegatives="haveNegatives"
-                @update-form="($event) => (formData = $event)"
-            />
+            <TicketBasicData :form-data="ticket" v-model:haveNegatives="haveNegatives" />
         </QStep>
         <template #navigation>
             <QStepperNavigation class="flex justify-between">

src/pages/Ticket/Card/TicketCard.vue

@@ -1,23 +1,21 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-
 import VnCard from 'components/common/VnCard.vue';
 import TicketDescriptor from './TicketDescriptor.vue';
 import TicketFilter from '../TicketFilter.vue';
-
-const { t } = useI18n();
+import filter from './TicketFilter.js';
 </script>
 <template>
     <VnCard
         data-key="Ticket"
         url="Tickets"
+        :filter="filter"
         :filter-panel="TicketFilter"
         :descriptor="TicketDescriptor"
         search-data-key="TicketList"
         :searchbar-props="{
             url: 'Tickets/filter',
-            label: t('card.search'),
-            info: t('card.searchInfo'),
+            label: $t('card.search'),
+            info: $t('card.searchInfo'),
         }"
     />
 </template>

src/pages/Ticket/Card/TicketDescriptor.vue

@@ -9,7 +9,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import { toDateTimeFormat } from 'src/filters/date';
-
+import filter from './TicketFilter.js';
 const $props = defineProps({
     id: {
         type: Number,
@@ -25,78 +25,6 @@ const entityId = computed(() => {
     return $props.id || route.params.id;
 });
 
-const filter = {
-    include: [
-        {
-            relation: 'address',
-            scope: {
-                fields: ['id', 'name', 'mobile', 'phone', 'incotermsFk'],
-            },
-        },
-        {
-            relation: 'client',
-            scope: {
-                fields: [
-                    'id',
-                    'name',
-                    'salesPersonFk',
-                    'phone',
-                    'mobile',
-                    'email',
-                    'isActive',
-                    'isFreezed',
-                    'isTaxDataChecked',
-                    'hasElectronicInvoice',
-                ],
-                include: [
-                    {
-                        relation: 'user',
-                        scope: {
-                            fields: ['id', 'lang'],
-                        },
-                    },
-                    { relation: 'salesPersonUser' },
-                ],
-            },
-        },
-        {
-            relation: 'ticketState',
-            scope: {
-                include: { relation: 'state' },
-            },
-        },
-        {
-            relation: 'warehouse',
-            scope: {
-                fields: ['id', 'name'],
-            },
-        },
-        {
-            relation: 'agencyMode',
-            scope: {
-                fields: ['id', 'name'],
-            },
-        },
-        {
-            relation: 'zone',
-            scope: {
-                fields: [
-                    'agencyModeFk',
-                    'bonus',
-                    'hour',
-                    'id',
-                    'isVolumetric',
-                    'itemMaxSize',
-                    'm3Max',
-                    'name',
-                    'price',
-                    'travelingDays',
-                ],
-            },
-        },
-    ],
-};
-
 const data = ref(useCardDescription());
 
 function ticketFilter(ticket) {
@@ -111,7 +39,7 @@ function ticketFilter(ticket) {
         :filter="filter"
         :title="data.title"
         :subtitle="data.subtitle"
-        data-key="ticketData"
+        data-key="Ticket"
     >
         <template #menu="{ entity }">
             <TicketDescriptorMenu :ticket="entity" />
@@ -158,7 +86,7 @@ function ticketFilter(ticket) {
         <template #icons="{ entity }">
             <QCardActions class="q-gutter-x-xs">
                 <QIcon
-                    v-if="entity.client.isActive == false"
+                    v-if="entity.client?.isActive == false"
                     name="vn:disabled"
                     size="xs"
                     color="primary"
@@ -166,7 +94,7 @@ function ticketFilter(ticket) {
                     <QTooltip>{{ t('Client inactive') }}</QTooltip>
                 </QIcon>
                 <QIcon
-                    v-if="entity.client.isFreezed == true"
+                    v-if="entity.client?.isFreezed == true"
                     name="vn:frozen"
                     size="xs"
                     color="primary"
@@ -174,7 +102,7 @@ function ticketFilter(ticket) {
                     <QTooltip>{{ t('Client Frozen') }}</QTooltip>
                 </QIcon>
                 <QIcon
-                    v-if="entity.problem.includes('hasRisk')"
+                    v-if="entity.problem?.includes('hasRisk')"
                     name="vn:risk"
                     size="xs"
                     color="primary"
@@ -182,7 +110,7 @@ function ticketFilter(ticket) {
                     <QTooltip>{{ t('Client has debt') }}</QTooltip>
                 </QIcon>
                 <QIcon
-                    v-if="entity.client.isTaxDataChecked == false"
+                    v-if="entity.client?.isTaxDataChecked == false"
                     name="vn:no036"
                     size="xs"
                     color="primary"

src/pages/Ticket/Card/TicketFilter.js

@@ -0,0 +1,72 @@
+export default {
+    include: [
+        {
+            relation: 'address',
+            scope: {
+                fields: ['id', 'name', 'mobile', 'phone', 'incotermsFk'],
+            },
+        },
+        {
+            relation: 'client',
+            scope: {
+                fields: [
+                    'id',
+                    'name',
+                    'salesPersonFk',
+                    'phone',
+                    'mobile',
+                    'email',
+                    'isActive',
+                    'isFreezed',
+                    'isTaxDataChecked',
+                    'hasElectronicInvoice',
+                    'credit',
+                ],
+                include: [
+                    {
+                        relation: 'user',
+                        scope: {
+                            fields: ['id', 'lang'],
+                        },
+                    },
+                    { relation: 'salesPersonUser' },
+                ],
+            },
+        },
+        {
+            relation: 'ticketState',
+            scope: {
+                include: { relation: 'state' },
+            },
+        },
+        {
+            relation: 'warehouse',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+        {
+            relation: 'agencyMode',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+        {
+            relation: 'zone',
+            scope: {
+                fields: [
+                    'agencyModeFk',
+                    'bonus',
+                    'hour',
+                    'id',
+                    'isVolumetric',
+                    'itemMaxSize',
+                    'm3Max',
+                    'name',
+                    'price',
+                    'travelingDays',
+                ],
+            },
+        },
+    ],
+};