refactor: refs #7248 remove unused state management and simplify body structure in ClaimNotes component

src/components/FormModel.vue

@@ -287,7 +287,7 @@ function updateAndEmit(evt, { val, res, old } = { val: null, res: null, old: nul
     state.set(modelValue, val);
     if (!$props.url) arrayData.store.data = val;
 
-    emit(evt, state.get(modelValue), res, old, formData);
+    emit(evt, state.get(modelValue), res, old);
 }
 
 function trimData(data) {

src/components/common/VnCard.vue

@@ -33,7 +33,7 @@ onBeforeRouteLeave(() => {
 });
 
 onBeforeMount(async () => {
-    if (props.visual) stateStore.cardDescriptorChangeValue(markRaw(props.descriptor));
+    stateStore.cardDescriptorChangeValue(markRaw(props.descriptor));
 
     const route = router.currentRoute.value;
     try {

src/components/common/VnDmsList.vue

@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { useQuasar, QCheckbox, QBtn, QInput } from 'quasar';
 import axios from 'axios';
-import { usePrintService } from 'composables/usePrintService';
 
 import VnUserLink from '../ui/VnUserLink.vue';
 import { downloadFile } from 'src/composables/downloadFile';
@@ -24,7 +23,6 @@ const rows = ref([]);
 const dmsRef = ref();
 const formDialog = ref({});
 const token = useSession().getTokenMultimedia();
-const { openReport } = usePrintService();
 
 const $props = defineProps({
     model: {
@@ -201,7 +199,12 @@ const columns = computed(() => [
                     color: 'primary',
                 }),
                 click: (prop) =>
-                    openReport(`dms/${prop.row.id}/downloadFile`, {}, '_blank'),
+                    downloadFile(
+                        prop.row.id,
+                        $props.downloadModel,
+                        undefined,
+                        prop.row.download,
+                    ),
             },
             {
                 component: QBtn,

src/components/common/VnLog.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted, computed } from 'vue';
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import axios from 'axios';

src/components/ui/EntityDescriptor.vue

@@ -1,6 +1,8 @@
 <script setup>
-import { watch, ref, onMounted } from 'vue';
+import { onBeforeMount, watch, computed, ref } from 'vue';
 import { useArrayData } from 'composables/useArrayData';
+import { useState } from 'src/composables/useState';
+import { useRoute } from 'vue-router';
 import VnDescriptor from './VnDescriptor.vue';
 
 const $props = defineProps({
@@ -18,50 +20,39 @@ const $props = defineProps({
     },
 });
 
+const state = useState();
+const route = useRoute();
 let arrayData;
 let store;
-const entity = ref();
+let entity;
 const isLoading = ref(false);
-const containerRef = ref(null);
+const isSameDataKey = computed(() => $props.dataKey === route.meta.moduleName);
+defineExpose({ getData });
 
-onMounted(async () => {
-    let isPopup;
-    let el = containerRef.value.$el;
-    while (el) {
-        if (el.classList?.contains('q-menu')) {
-            isPopup = true;
-            break;
-        }
-        el = el.parentElement;
-    }
-
-    arrayData = useArrayData($props.dataKey + (isPopup ? 'Proxy' : ''), {
+onBeforeMount(async () => {
+    arrayData = useArrayData($props.dataKey, {
         url: $props.url,
         userFilter: $props.filter,
         skip: 0,
         oneRecord: true,
     });
     store = arrayData.store;
+    entity = computed(() => {
+        const data = store.data ?? {};
+        if (data) emit('onFetch', data);
+        return data;
+    });
 
+    // It enables to load data only once if the module is the same as the dataKey
+    if (!isSameDataKey.value || !route.params.id) await getData();
     watch(
         () => [$props.url, $props.filter],
         async () => {
-            await getData();
-        },
-        { immediate: true },
-    );
-
-    watch(
-        () => arrayData.store.data,
-        (newValue) => {
-            entity.value = newValue;
+            if (!isSameDataKey.value) await getData();
         },
     );
 });
 
-defineExpose({ getData });
-const emit = defineEmits(['onFetch']);
-
 async function getData() {
     store.url = $props.url;
     store.filter = $props.filter ?? {};
@@ -69,15 +60,18 @@ async function getData() {
     try {
         await arrayData.fetch({ append: false, updateRouter: false });
         const { data } = store;
+        state.set($props.dataKey, data);
         emit('onFetch', data);
     } finally {
         isLoading.value = false;
     }
 }
+
+const emit = defineEmits(['onFetch']);
 </script>
 
 <template>
-    <VnDescriptor v-model="entity" v-bind="$attrs" :module="dataKey" ref="containerRef">
+    <VnDescriptor v-model="entity" v-bind="$attrs" :module="dataKey">
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
             <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
         </template>

src/components/ui/VnNotes.vue

@@ -219,15 +219,15 @@ const handleObservationTypes = (data) => {
                     <QCardSection horizontal>
                         <VnAvatar
                             :descriptor="false"
-                            :worker-id="note.workerFk"
+                            :worker-id="note.user?.id"
                             size="md"
-                            :title="note.worker?.user.nickname"
+                            :title="note.user?.nickname"
                         />
                         <div class="full-width row justify-between q-pa-xs">
                             <div>
                                 <VnUserLink
-                                    :name="`${note.worker.user.name}`"
-                                    :worker-id="note.worker.id"
+                                    :name="`${note.user?.name}`"
+                                    :worker-id="note.user?.id"
                                 />
                                 <QBadge
                                     class="q-ml-xs"

src/components/ui/VnPaginate.vue

@@ -146,14 +146,14 @@ const addFilter = async (filter, params) => {
 };
 
 async function fetch(params) {
-    arrayData.setOptions(params);
+    useArrayData(props.dataKey, params);
     arrayData.resetPagination();
     await arrayData.fetch({ append: false });
     return emitStoreData();
 }
 
 async function update(params) {
-    arrayData.setOptions(params);
+    useArrayData(props.dataKey, params);
     const { limit, skip } = store;
     store.limit = limit + skip;
     store.skip = 0;

src/composables/useArrayData.js

@@ -41,7 +41,7 @@ export function useArrayData(key, userOptions) {
 
     if (key && userOptions) setOptions();
 
-    function setOptions(params = userOptions) {
+    function setOptions() {
         const allowedOptions = [
             'url',
             'filter',
@@ -57,14 +57,14 @@ export function useArrayData(key, userOptions) {
             'mapKey',
             'oneRecord',
         ];
-        if (typeof params === 'object') {
-            for (const option in params) {
-                const isEmpty = params[option] == null || params[option] === '';
+        if (typeof userOptions === 'object') {
+            for (const option in userOptions) {
+                const isEmpty = userOptions[option] == null || userOptions[option] === '';
                 if (isEmpty || !allowedOptions.includes(option)) continue;
 
                 if (Object.hasOwn(store, option)) {
-                    const defaultOpts = params[option];
-                    store[option] = params.keepOpts?.includes(option)
+                    const defaultOpts = userOptions[option];
+                    store[option] = userOptions.keepOpts?.includes(option)
                         ? Object.assign(defaultOpts, store[option])
                         : defaultOpts;
                     if (option === 'userParams') store.defaultParams = store[option];
@@ -367,6 +367,5 @@ export function useArrayData(key, userOptions) {
         deleteOption,
         reset,
         resetPagination,
-        setOptions,
     };
 }

src/pages/Account/Card/AccountDescriptorProxy.vue

@@ -4,6 +4,11 @@ import AccountSummary from './AccountSummary.vue';
 </script>
 <template>
     <QPopupProxy style="max-width: 10px">
-        <AccountDescriptor v-if="$attrs.id" v-bind="$attrs" :summary="AccountSummary" />
+        <AccountDescriptor
+            v-if="$attrs.id"
+            v-bind="$attrs"
+            :summary="AccountSummary"
+            :proxy-render="true"
+        />
     </QPopupProxy>
 </template>

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDateHourMinSec, toPercentage } from 'src/filters';
@@ -9,6 +9,7 @@ import DepartmentDescriptorProxy from 'src/pages/Worker/Department/Card/Departme
 import EntityDescriptor from 'components/ui/EntityDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import { getUrl } from 'src/composables/getUrl';
 import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
 import filter from './ClaimFilter.js';
 
@@ -22,6 +23,7 @@ const $props = defineProps({
 
 const route = useRoute();
 const { t } = useI18n();
+const salixUrl = ref();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
@@ -29,6 +31,10 @@ const entityId = computed(() => {
 function stateColor(entity) {
     return entity?.claimState?.classColor;
 }
+
+onMounted(async () => {
+    salixUrl.value = await getUrl('');
+});
 </script>
 
 <template>
@@ -120,7 +126,7 @@ function stateColor(entity) {
                     size="md"
                     icon="assignment"
                     color="primary"
-                    :to="{ name: 'TicketSaleTracking', params: { id: entity.ticketFk } }"
+                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/sale-tracking'"
                 >
                     <QTooltip>{{ t('claim.saleTracking') }}</QTooltip>
                 </QBtn>
@@ -128,7 +134,7 @@ function stateColor(entity) {
                     size="md"
                     icon="visibility"
                     color="primary"
-                    :to="{ name: 'TicketTracking', params: { id: entity.ticketFk } }"
+                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'"
                 >
                     <QTooltip>{{ t('claim.ticketTracking') }}</QTooltip>
                 </QBtn>

src/pages/Claim/Card/ClaimDescriptorProxy.vue

@@ -4,6 +4,11 @@ import ClaimSummary from './ClaimSummary.vue';
 </script>
 <template>
     <QPopupProxy style="max-width: 10px">
-        <ClaimDescriptor v-if="$attrs.id" v-bind="$attrs" :summary="ClaimSummary" />
+        <ClaimDescriptor
+            v-if="$attrs.id"
+            v-bind="$attrs.id"
+            :summary="ClaimSummary"
+            :proxy-render="true"
+        />
     </QPopupProxy>
 </template>

src/pages/Claim/Card/ClaimNotes.vue

@@ -1,12 +1,9 @@
 <script setup>
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { useState } from 'src/composables/useState';
 import VnNotes from 'src/components/ui/VnNotes.vue';
 
 const route = useRoute();
-const state = useState();
-const user = state.getUser();
 
 const $props = defineProps({
     id: { type: [Number, String], default: null },
@@ -15,25 +12,14 @@ const $props = defineProps({
 const claimId = computed(() => $props.id || route.params.id);
 
 const claimFilter = {
-    fields: ['id', 'created', 'workerFk', 'text'],
+    fields: ['id', 'created', 'userFk', 'text'],
     include: {
-        relation: 'worker',
+        relation: 'user',
         scope: {
-            fields: ['id', 'firstName', 'lastName'],
-            include: {
-                relation: 'user',
-                scope: {
-                    fields: ['id', 'nickname', 'name'],
-                },
-            },
+            fields: ['id', 'nickname', 'name'],
         },
     },
 };
-
-const body = {
-    claimFk: claimId.value,
-    workerFk: user.value.id,
-};
 </script>
 <template>
     <VnNotes
@@ -41,7 +27,9 @@ const body = {
         :add-note="$props.addNote"
         :user-filter="claimFilter"
         :filter="{ where: { claimFk: claimId } }"
-        :body="body"
+        :body="{
+            claimFk: claimId,
+        }"
         v-bind="$attrs"
         style="overflow-y: auto"
     />

src/pages/Customer/Card/CustomerNotes.vue

@@ -1,12 +1,15 @@
 <script setup>
 import VnNotes from 'src/components/ui/VnNotes.vue';
+import { useState } from 'src/composables/useState';
+const state = useState();
+const user = state.getUser();
 </script>
 <template>
     <VnNotes
         url="clientObservations"
         :add-note="true"
         :filter="{ where: { clientFk: $route.params.id } }"
-        :body="{ clientFk: $route.params.id }"
+        :body="{ clientFk: $route.params.id, userFk: user.id }"
         style="overflow-y: auto"
         :select-type="true"
         required

src/pages/Shelving/Parking/Card/ParkingDescriptorProxy.vue

@@ -4,6 +4,11 @@ import ParkingSummary from './ParkingSummary.vue';
 </script>
 <template>
     <QPopupProxy style="max-width: 10px">
-        <ParkingDescriptor v-if="$attrs.id" v-bind="$attrs" :summary="ParkingSummary" />
+        <ParkingDescriptor
+            v-if="$attrs.id"
+            v-bind="$attrs.id"
+            :summary="ParkingSummary"
+            :proxy-render="true"
+        />
     </QPopupProxy>
 </template>

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

@@ -70,6 +70,8 @@ async function getDate(query, params) {
     for (const param in params) {
         if (!params[param]) return;
     }
+
+    formData.value.zoneFk = null;
     zonesOptions.value = [];
     const { data } = await axios.get(query, { params });
     if (!data) return notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
@@ -77,7 +79,7 @@ async function getDate(query, params) {
     formData.value.zoneFk = data.zoneFk;
     formData.value.landed = data.landed;
     const shippedDate = new Date(params.shipped);
-    const landedDate = new Date(data.hour);
+    const landedDate = new Date(data.landed);
     shippedDate.setHours(
         landedDate.getHours(),
         landedDate.getMinutes(),
@@ -425,14 +427,6 @@ async function getZone(options) {
                 :rules="validate('ticketList.shipped')"
                 @update:model-value="setShipped"
             />
-            <VnInputTime
-                :label="t('basicData.shippedHour')"
-                v-model="formData.shipped"
-                :required="true"
-                :rules="validate('basicData.shippedHour')"
-                disabled
-                @update:model-value="setShipped"
-            />
             <VnInputDate
                 :label="t('basicData.landed')"
                 v-model="formData.landed"

src/pages/Ticket/Card/ExpeditionNewTicket.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -29,29 +30,31 @@ const { t } = useI18n();
 const router = useRouter();
 const { notify } = useNotify();
 
+const newTicketFormData = reactive({});
 const date = new Date();
 
-async function createTicket(formData) {
+const createTicket = async () => {
     const expeditionIds = $props.selectedExpeditions.map((expedition) => expedition.id);
     const params = {
         clientId: $props.ticket.clientFk,
-        landed: formData.landed,
+        landed: newTicketFormData.landed,
         warehouseId: $props.ticket.warehouseFk,
         addressId: $props.ticket.addressFk,
         agencyModeId: $props.ticket.agencyModeFk,
-        routeId: formData.routeFk,
+        routeId: newTicketFormData.routeFk,
         expeditionIds: expeditionIds,
     };
+
     const { data } = await axios.post('Expeditions/moveExpeditions', params);
     notify(t('globals.dataSaved'), 'positive');
     router.push({ name: 'TicketSummary', params: { id: data.id } });
-}
+};
 </script>
 
 <template>
     <FormModelPopup
         model="expeditionNewTicket"
-        :form-initial-data="{}"
+        :form-initial-data="newTicketFormData"
         :save-fn="createTicket"
     >
         <template #form-inputs="{ data }">

src/pages/Worker/Card/WorkerBasicData.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { ref, nextTick } from 'vue';
+import { ref, nextTick, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import FetchData from 'components/FetchData.vue';
@@ -8,23 +9,21 @@ import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import { useAdvancedSummary } from 'src/composables/useAdvancedSummary';
-import { useRoute } from 'vue-router';
 
 const { t } = useI18n();
 const form = ref();
 const educationLevels = ref([]);
 const countries = ref([]);
-const model = 'Worker';
 const maritalStatus = [
     { code: 'M', name: t('Married') },
     { code: 'S', name: t('Single') },
 ];
-const route = useRoute();
-async function addAdvancedData(data) {
-    const advanced = await useAdvancedSummary('Workers', route.params.id);
-    data.value = { ...data.value, ...advanced };
+
+onMounted(async () => {
+    const advanced = await useAdvancedSummary('Workers', useRoute().params.id);
+    Object.assign(form.value.formData, advanced);
     nextTick(() => (form.value.hasChanges = false));
-}
+});
 </script>
 <template>
     <FetchData
@@ -43,8 +42,7 @@ async function addAdvancedData(data) {
         ref="form"
         :url-update="`Workers/${$route.params.id}`"
         auto-load
-        :model
-        @on-fetch="(data, res, old, formData) => addAdvancedData(formData)"
+        model="Worker"
     >
         <template #form="{ data }">
             <VnRow>

src/pages/Worker/Card/WorkerCard.vue

@@ -4,11 +4,9 @@ import VnCard from 'src/components/common/VnCard.vue';
 </script>
 <template>
     <VnCard
-        :data-key="$attrs['data-key'] ?? 'Worker'"
+        data-key="Worker"
         url="Workers/summary"
         :id-in-where="true"
         :descriptor="WorkerDescriptor"
-        v-bind="$attrs"
-        v-on="$attrs"
     />
 </template>

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import EntityDescriptor from 'src/components/ui/EntityDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import VnChangePassword from 'src/components/common/VnChangePassword.vue';
@@ -10,8 +11,6 @@ import VnImg from 'src/components/ui/VnImg.vue';
 import EditPictureForm from 'components/EditPictureForm.vue';
 import WorkerDescriptorMenu from './WorkerDescriptorMenu.vue';
 import DepartmentDescriptorProxy from 'src/pages/Worker/Department/Card/DepartmentDescriptorProxy.vue';
-import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
-import WorkerCard from './WorkerCard.vue';
 
 const $props = defineProps({
     id: {
@@ -53,17 +52,14 @@ const handlePhotoUpdated = (evt = false) => {
 };
 </script>
 <template>
-    <CardDescriptor
-        v-bind="$attrs"
+    <EntityDescriptor
         ref="cardDescriptorRef"
         :data-key="dataKey"
         :summary="$props.summary"
-        :card="WorkerCard"
-        :id="entityId"
+        url="Workers/summary"
         :filter="{ where: { id: entityId } }"
         title="user.nickname"
         @on-fetch="getIsExcluded"
-        module="Worker"
     >
         <template #menu="{ entity }">
             <WorkerDescriptorMenu
@@ -169,7 +165,7 @@ const handlePhotoUpdated = (evt = false) => {
                 </QBtn>
             </QCardActions>
         </template>
-    </CardDescriptor>
+    </EntityDescriptor>
     <VnChangePassword
         ref="changePassRef"
         :submit-fn="

src/pages/Worker/Card/WorkerNotes.vue

@@ -1,28 +1,26 @@
 <script setup>
 import { useRoute } from 'vue-router';
-
+import { useState } from 'src/composables/useState';
 import VnNotes from 'src/components/ui/VnNotes.vue';
 
 const route = useRoute();
+const state = useState();
+const user = state.getUser();
 
 const userFilter = {
     order: 'created DESC',
-
     include: {
-        relation: 'worker',
+        relation: 'user',
         scope: {
-            fields: ['id', 'firstName', 'lastName'],
-            include: {
-                relation: 'user',
-                scope: {
-                    fields: ['id', 'nickname', 'name'],
-                },
-            },
+            fields: ['id', 'nickname', 'name'],
         },
     },
 };
 
-const body = { workerFk: route.params.id };
+const body = {
+    workerFk: route.params.id,
+    userFk: user.value.id,
+};
 </script>
 
 <template>

src/pages/Worker/Card/WorkerTimeControl.vue

@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { onMounted, ref, computed, onBeforeMount, nextTick, reactive } from 'vue';
+import { axiosNoError } from 'src/boot/axios';
 
 import FetchData from 'components/FetchData.vue';
 import WorkerTimeHourChip from 'pages/Worker/Card/WorkerTimeHourChip.vue';
@@ -280,11 +281,11 @@ const fetchWeekData = async () => {
         week: selectedWeekNumber.value,
     };
     try {
-        const [{ data: mailData }, { data: countData }] = await Promise.allS([
-            axios.get(`Workers/${route.params.id}/mail`, {
+        const [{ data: mailData }, { data: countData }] = await Promise.all([
+            axiosNoError.get(`Workers/${route.params.id}/mail`, {
                 params: { filter: { where } },
             }),
-            axios.get('WorkerTimeControlMails/count', { params: { where } }),
+            axiosNoError.get('WorkerTimeControlMails/count', { params: { where } }),
         ]);
 
         const mail = mailData[0];