perf: refs #8163 #8061 createNewPostCodeForm

src/components/CreateNewPostcodeForm.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, ref, watch } from 'vue';
+import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
@@ -10,7 +10,6 @@ import VnInput from 'src/components/common/VnInput.vue';
 import CreateNewCityForm from './CreateNewCityForm.vue';
 import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import FormModelPopup from './FormModelPopup.vue';
-import ClaimFilter from 'src/pages/Claim/Card/ClaimFilter';
 
 const emit = defineEmits(['onDataSaved']);
 
@@ -24,12 +23,15 @@ const postcodeFormData = reactive({
 });
 
 const townsFetchDataRef = ref(false);
+const countriesFetchDataRef = ref(false);
 const provincesFetchDataRef = ref(false);
 const countriesOptions = ref([]);
 const provincesOptions = ref([]);
 const townsOptions = ref([]);
 const town = ref({});
 const townFilter = ref({});
+const countryFilter = ref({});
+
 function onDataSaved(formData) {
     const newPostcode = {
         ...formData,
@@ -61,14 +63,13 @@ function setTown(newTown, data) {
     data.provinceFk = newTown?.provinceFk ?? newTown;
     data.countryFk = newTown?.province?.countryFk ?? newTown;
 }
+
 async function setCountry(countryFk, data) {
-    // town.value = newTown;
-    // data.provinceFk = newTown?.provinceFk ?? newTown;
+    data.townFk = null;
+    data.provinceFk = null;
     data.countryFk = countryFk;
-    // if (countryFk) {
-    //     await fetchTowns(countryFk);
-    // }
 }
+
 async function filterTowns(name) {
     if (name !== '') {
         townFilter.value.where = {
@@ -79,6 +80,17 @@ async function filterTowns(name) {
         await townsFetchDataRef.value?.fetch();
     }
 }
+async function filterCountries(name) {
+    if (name !== '') {
+        countryFilter.value.where = {
+            name: {
+                like: `%${name}%`,
+            },
+        };
+        await countriesFetchDataRef.value?.fetch();
+    }
+}
+
 async function fetchTowns(countryFk) {
     if (!countryFk) return;
     townFilter.value.where = {
@@ -88,6 +100,21 @@ async function fetchTowns(countryFk) {
     };
     await townsFetchDataRef.value?.fetch();
 }
+
+async function handleProvinces(data) {
+    provincesOptions.value = data;
+    if (postcodeFormData.countryFk) {
+        await fetchTowns(postcodeFormData.countryFk);
+    }
+}
+async function handleTowns(data) {
+    townsOptions.value = data;
+}
+
+async function handleCountries(data) {
+    countriesOptions.value = data;
+}
+
 async function setProvince(id, data) {
     const newProvince = provincesOptions.value.find((province) => province.id == id);
     if (!newProvince) return;
@@ -101,55 +128,6 @@ async function onProvinceCreated(data) {
     });
     postcodeFormData.provinceFk = data.id;
 }
-
-// watch(
-//     () => [postcodeFormData.countryFk],
-//     async (newCountryFk, oldValueFk) => {
-//         if (Array.isArray(newCountryFk)) {
-//             newCountryFk = newCountryFk[0];
-//         }
-//         if (Array.isArray(oldValueFk)) {
-//             oldValueFk = oldValueFk[0];
-//         }
-//         if (!!oldValueFk && newCountryFk !== oldValueFk) {
-//             postcodeFormData.provinceFk = null;
-//             postcodeFormData.townFk = null;
-//         }
-//         if (oldValueFk !== newCountryFk) {
-//             await fetchProvinces(newCountryFk);
-//         }
-//     }
-// );
-// async function fetchProvinces(countryFk) {
-//     const provincesFilter = countryFk
-//         ? {
-//               where: {
-//                   countryFk: countryFk,
-//               },
-//           }
-//         : {};
-//     await provincesFetchDataRef.value.fetch(provincesFilter);
-// }
-// watch(
-//     () => postcodeFormData.provinceFk,
-//     async (newProvinceFk, oldValueFk) => {
-//         if (Array.isArray(newProvinceFk)) {
-//             newProvinceFk = newProvinceFk[0];
-//         }
-//     }
-// );
-async function handleProvinces(data) {
-    provincesOptions.value = data;
-    if (postcodeFormData.countryFk) {
-        await fetchTowns(postcodeFormData.countryFk);
-    }
-}
-async function handleTowns(data) {
-    townsOptions.value = data;
-}
-async function handleCountries(data) {
-    countriesOptions.value = data;
-}
 </script>
 
 <template>
@@ -157,7 +135,7 @@ async function handleCountries(data) {
         ref="provincesFetchDataRef"
         @on-fetch="handleProvinces"
         :sort-by="['name ASC']"
-        :limit="30"
+        :limit="3"
         auto-load
         url="Provinces/location"
     />
@@ -170,6 +148,15 @@ async function handleCountries(data) {
         auto-load
         url="Towns/location"
     />
+    <FetchData
+        ref="countriesFetchDataRef"
+        :limit="3"
+        :filter="countryFilter"
+        :sort-by="['name ASC']"
+        @on-fetch="handleCountries"
+        auto-load
+        url="Countries"
+    />
 
     <FormModelPopup
         url-create="postcodes"
@@ -235,13 +222,11 @@ async function handleCountries(data) {
                     @on-province-created="onProvinceCreated"
                 />
                 <VnSelect
-                    :sort-by="['name ASC']"
-                    @on-fetch="handleCountries"
-                    auto-load
-                    url="Countries"
-                    :limit="3"
                     :label="t('Country')"
+                    @update:options="handleCountries"
+                    :options="countriesOptions"
                     hide-selected
+                    @filter="filterCountries"
                     option-label="name"
                     option-value="id"
                     v-model="data.countryFk"