feat: handle default values

src/pages/Customer/composables/getAddresses.js

@@ -4,7 +4,15 @@ export async function getAddresses(clientId, _filter = {}) {
     if (!clientId) return;
     const filter = {
         ..._filter,
-        fields: ['nickname', 'street', 'city', 'id', 'isActive'],
+        include: [
+            {
+                relation: 'client',
+                scope: {
+                    fields: ['defaultAddressFk'],
+                },
+            },
+        ],
+        fields: ['nickname', 'street', 'city', 'id', 'isActive', 'clientFk'],
         where: { isActive: true },
         order: ['isDefaultAddress DESC', 'isActive DESC', 'nickname ASC'],
     };

src/pages/Order/OrderList.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref, onMounted, watch } from 'vue';
 import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
 import { toDateTimeFormat } from 'src/filters/date';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
@@ -16,6 +16,7 @@ import VnTable from 'src/components/VnTable/VnTable.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnSection from 'src/components/common/VnSection.vue';
+import { getAddresses } from '../Customer/composables/getAddresses';
 
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
@@ -24,6 +25,11 @@ const agencyList = ref([]);
 const route = useRoute();
 const addressOptions = ref([]);
 const dataKey = 'OrderList';
+const formInitialData = ref({
+    active: true,
+    addressId: null,
+    clientFk: null,
+});
 
 const columns = computed(() => [
     {
@@ -147,33 +153,40 @@ const columns = computed(() => [
         ],
     },
 ]);
-onMounted(() => {
-    if (!route.query.createForm) return;
-    const clientId = route.query.createForm;
-    const id = JSON.parse(clientId);
-    fetchClientAddress(id.clientFk);
+onMounted(async () => {
+    if (!route.query) return;
+    if (route.query?.createForm) {
+        const query = JSON.parse(route.query?.createForm);
+        formInitialData.value = query;
+        await onClientSelected({ ...formInitialData.value, clientId: query?.clientFk });
+    } else {
+        const query = JSON.parse(route.query?.table);
+        await onClientSelected({ clientId: query?.clientFk });
+    }
+    if (tableRef.value) tableRef.value.create.formInitialData = formInitialData.value;
 });
 
-async function fetchClientAddress(id, formData = {}) {
-    const { data } = await axios.get(`Clients/${id}/addresses`, {
-        params: {
-            filter: JSON.stringify({
-                include: [
-                    {
-                        relation: 'client',
-                        scope: {
-                            fields: ['defaultAddressFk'],
+watch(
+    () => route.query.table,
+    async (newValue) => {
+        if (newValue) {
+            const clientId = +JSON.parse(newValue)?.clientFk;
+            await onClientSelected({ clientId });
+            if (tableRef.value)
+                tableRef.value.create.formInitialData = formInitialData.value;
+        }
     },
-                    },
-                ],
-                order: ['isActive DESC'],
-            }),
-        },
-    });
+    { immediate: true },
+);
+
+async function onClientSelected({ clientId: id }, formData = {}) {
+    const { data } = await getAddresses(id);
     addressOptions.value = data;
     formData.defaultAddressFk = data[0].client.defaultAddressFk;
     formData.addressId = formData.defaultAddressFk;
-    fetchAgencies(formData);
+
+    formInitialData.value = { addressId: formData.addressId, clientFk: id };
+    await fetchAgencies(formData);
 }
 
 async function fetchAgencies({ landed, addressId }) {
@@ -225,11 +238,7 @@ const getDateColor = (date) => {
                     onDataSaved: (url) => {
                         tableRef.redirect(`${url}/catalog`);
                     },
-                    formInitialData: {
-                        active: true,
-                        addressId: null,
-                        clientFk: null,
-                    },
+                    formInitialData,
                 }"
                 :user-params="{ showEmpty: false }"
                 :columns="columns"
@@ -261,7 +270,7 @@ const getDateColor = (date) => {
                         :include="{ relation: 'addresses' }"
                         v-model="data.clientFk"
                         :label="t('module.customer')"
-                        @update:model-value="(id) => fetchClientAddress(id, data)"
+                        @update:model-value="(id) => onClientSelected(id, data)"
                     >
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">

src/pages/Ticket/TicketList.vue

@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { computed, ref, onBeforeMount, watch } from 'vue';
+import { computed, ref, onBeforeMount, watch, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
@@ -51,8 +51,18 @@ const userParams = {
 onBeforeMount(() => {
     initializeFromQuery();
     stateStore.rightDrawer = true;
-    if (!route.query.createForm) return;
-    onClientSelected(JSON.parse(route.query.createForm));
+});
+onMounted(async () => {
+    if (!route.query) return;
+    if (route.query?.createForm) {
+        formInitialData.value = JSON.parse(route.query?.createForm);
+        await onClientSelected(formInitialData.value);
+    } else {
+        const query = route.query?.table;
+        const clientId = +JSON.parse(query)?.clientFk;
+        await onClientSelected({ clientId });
+    }
+    if (tableRef.value) tableRef.value.create.formInitialData = formInitialData.value;
 });
 const initializeFromQuery = () => {
     const query = route.query.table ? JSON.parse(route.query.table) : {};
@@ -69,7 +79,6 @@ const companiesOptions = ref([]);
 const accountingOptions = ref([]);
 const amountToReturn = ref();
 const dataKey = 'TicketList';
-const filterPanelRef = ref(null);
 const formInitialData = ref({});
 
 const columns = computed(() => [
@@ -251,7 +260,39 @@ const columns = computed(() => [
         ],
     },
 ]);
+const onClientSelected = async (formData) => {
+    resetAgenciesSelector(formData);
+    // await fetchClient(formData);
+    await fetchAddresses(formData);
+};
+const fetchClient = async (formData) => {
+    const response = await getClient(formData.clientId);
+    if (!response) return;
+    const [client] = response.data;
+    selectedClient.value = client;
+};
 
+const fetchAddresses = async (formData) => {
+    const { data } = await getAddresses(formData.clientId);
+    formInitialData.value = { clientId: formData.clientId };
+    if (!data) return;
+    addressesOptions.value = data;
+    selectedClient.value = data[0].client;
+    formData.addressId = selectedClient.value.defaultAddressFk;
+    formInitialData.value.addressId = formData.addressId;
+};
+watch(
+    () => route.query.table,
+    async (newValue) => {
+        if (newValue) {
+            const clientId = +JSON.parse(newValue)?.clientFk;
+            await onClientSelected({ clientId });
+            if (tableRef.value)
+                tableRef.value.create.formInitialData = formInitialData.value;
+        }
+    },
+    { immediate: true },
+);
 function resetAgenciesSelector(formData) {
     agenciesOptions.value = [];
     if (formData) formData.agencyModeId = null;
@@ -262,12 +303,6 @@ function redirectToLines(id) {
     window.open(url, '_blank');
 }
 
-const onClientSelected = async (formData) => {
-    resetAgenciesSelector(formData);
-    await fetchClient(formData);
-    await fetchAddresses(formData);
-};
-
 const fetchAvailableAgencies = async (formData) => {
     resetAgenciesSelector(formData);
     const response = await getAgencies(formData, selectedClient.value);
@@ -278,24 +313,6 @@ const fetchAvailableAgencies = async (formData) => {
     if (agency) formData.agencyModeId = agency.agencyModeFk;
 };
 
-const fetchClient = async (formData) => {
-    const response = await getClient(formData.clientId);
-    if (!response) return;
-    const [client] = response.data;
-    selectedClient.value = client;
-};
-
-const fetchAddresses = async (formData) => {
-    const response = await getAddresses(formData.clientId);
-    formInitialData.value = { clientId: formData.clientId };
-    if (!response) return;
-    addressesOptions.value = response.data;
-
-    const { defaultAddress } = selectedClient.value;
-    formData.addressId = defaultAddress.id;
-    formInitialData.value.addressId = formData.addressId;
-};
-
 const getColor = (row) => {
     if (row.alertLevelCode === 'OK') return 'bg-success';
     else if (row.alertLevelCode === 'FREE') return 'bg-notice';
@@ -447,19 +464,6 @@ function setReference(data) {
 
     dialogData.value.value.description = newDescription;
 }
-
-watch(
-    () => route.query.table,
-    async (newValue) => {
-        if (newValue) {
-            const clientId = +JSON.parse(newValue)?.clientFk;
-            await onClientSelected({ clientId });
-            if (tableRef.value)
-                tableRef.value.create.formInitialData = formInitialData.value;
-        }
-    },
-    { immediate: true },
-);
 </script>
 
 <template>