refactor: refs #7354 refactor deliveryPanel

src/pages/Zone/ZoneDeliveryPanel.vue

@@ -3,45 +3,22 @@ import { onMounted, ref, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import VnSelect from 'src/components/common/VnSelect.vue';
-
 import { useArrayData } from 'src/composables/useArrayData';
-import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
-import { watch } from 'vue';
+import FetchData from 'src/components/FetchData.vue';
 
 const { t } = useI18n();
 const { notify } = useNotify();
 
-const deliveryMethodFk = ref(null);
-const deliveryMethods = ref([]);
+const deliveryMethodFk = ref('delivery');
+const deliveryMethods = ref({});
 const formData = reactive({});
 
 const arrayData = useArrayData('ZoneDeliveryDays', {
     url: 'Zones/getEvents',
 });
 
-const fetchDeliveryMethods = async (filter) => {
-    try {
-        const params = { filter: JSON.stringify(filter) };
-        const { data } = await axios.get('DeliveryMethods', { params });
-        return data.map((deliveryMethod) => deliveryMethod.id);
-    } catch (err) {
-        console.error('Error fetching delivery methods: ', err);
-    }
-};
-
-watch(
-    () => deliveryMethodFk.value,
-    async (val) => {
-        let filter;
-        if (val === 'pickUp') filter = { where: { code: 'PICKUP' } };
-        else filter = { where: { code: { inq: ['DELIVERY', 'AGENCY'] } } };
-
-        deliveryMethods.value = await fetchDeliveryMethods(filter);
-    },
-    { immediate: true }
-);
-
+const deliveryMethodsConfig = { pickUp: ['PICKUP'], delivery: ['AGENCY', 'DELIVERY'] };
 const fetchData = async (params) => {
     try {
         const { data } = params
@@ -70,6 +47,22 @@ onMounted(async () => {
 </script>
 
 <template>
+    <FetchData
+        url="DeliveryMethods"
+        :fields="['id', 'name', 'deliveryMethodFk']"
+        @on-fetch="
+            (data) => {
+                console.log('data: ', data);
+                console.log('deliveryMethodsConfig: ', deliveryMethodsConfig);
+                Object.entries(deliveryMethodsConfig).forEach(([key, value]) => {
+                    deliveryMethods[key] = data
+                        .filter((code) => value.includes(code.code))
+                        .map((method) => method.id);
+                });
+            }
+        "
+        auto-load
+    />
     <QForm @submit="onSubmit()" class="q-pa-md">
         <div class="column q-gutter-y-sm">
             <QRadio
@@ -113,18 +106,31 @@ onMounted(async () => {
                 </template>
             </VnSelect>
             <VnSelect
-                :label="
-                    t(
-                        deliveryMethodFk === 'delivery'
-                            ? 'deliveryPanel.agency'
-                            : 'deliveryPanel.warehouse'
-                    )
-                "
+                data-key="delivery"
+                v-if="deliveryMethodFk == 'delivery'"
+                :label="t('deliveryPanel.agency')"
                 v-model="formData.agencyModeFk"
                 url="AgencyModes/isActive"
                 :fields="['id', 'name']"
                 :where="{
-                    deliveryMethodFk: { inq: deliveryMethods },
+                    deliveryMethodFk: { inq: deliveryMethods[deliveryMethodFk] },
+                }"
+                sort-by="name ASC"
+                option-value="id"
+                option-label="name"
+                hide-selected
+                dense
+                outlined
+                rounded
+            />
+            <VnSelect
+                v-else
+                :label="t('deliveryPanel.warehouse')"
+                v-model="formData.agencyModeFk"
+                url="AgencyModes/isActive"
+                :fields="['id', 'name']"
+                :where="{
+                    deliveryMethodFk: { inq: deliveryMethods[deliveryMethodFk] },
                 }"
                 sort-by="name ASC"
                 option-value="id"