fix: refs #8163 #8061 createNewPostCodeForm

src/components/CreateNewPostcodeForm.vue

@@ -10,6 +10,7 @@ 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']);
 
@@ -22,13 +23,13 @@ const postcodeFormData = reactive({
     townFk: null,
 });
 
-const townsFetchDataRef = ref(null);
+const townsFetchDataRef = ref(false);
-const provincesFetchDataRef = ref(null);
+const provincesFetchDataRef = ref(false);
 const countriesOptions = ref([]);
 const provincesOptions = ref([]);
 const townsOptions = ref([]);
 const town = ref({});
-
+const townFilter = ref({});
 function onDataSaved(formData) {
     const newPostcode = {
         ...formData,
@@ -56,12 +57,37 @@ async function onCityCreated(newTown, formData) {
 }
 
 function setTown(newTown, data) {
-    data.provinceFk = newTown.provinceFk;
-    data.countryFk = newTown.province.countryFk;
-    if (!newTown) return;
     town.value = newTown;
+    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.countryFk = countryFk;
+    // if (countryFk) {
+    //     await fetchTowns(countryFk);
+    // }
+}
+async function filterTowns(name) {
+    if (name !== '') {
+        townFilter.value.where = {
+            name: {
+                like: `%${name}%`,
+            },
+        };
+        await townsFetchDataRef.value?.fetch();
+    }
+}
+async function fetchTowns(countryFk) {
+    if (!countryFk) return;
+    townFilter.value.where = {
+        provinceFk: {
+            inq: provincesOptions.value.map(({ id }) => id),
+        },
+    };
+    await townsFetchDataRef.value?.fetch();
 }
-
 async function setProvince(id, data) {
     const newProvince = provincesOptions.value.find((province) => province.id == id);
     if (!newProvince) return;
@@ -76,62 +102,47 @@ async function onProvinceCreated(data) {
     postcodeFormData.provinceFk = data.id;
 }
 
-watch(
+// watch(
-    () => [postcodeFormData.countryFk],
+//     () => [postcodeFormData.countryFk],
-    async (newCountryFk, oldValueFk) => {
+//     async (newCountryFk, oldValueFk) => {
-        if (Array.isArray(newCountryFk)) {
+//         if (Array.isArray(newCountryFk)) {
-            newCountryFk = newCountryFk[0];
+//             newCountryFk = newCountryFk[0];
-        }
+//         }
-        if (Array.isArray(oldValueFk)) {
+//         if (Array.isArray(oldValueFk)) {
-            oldValueFk = oldValueFk[0];
+//             oldValueFk = oldValueFk[0];
-        }
+//         }
-        if (!!oldValueFk && newCountryFk !== oldValueFk) {
+//         if (!!oldValueFk && newCountryFk !== oldValueFk) {
-            postcodeFormData.provinceFk = null;
+//             postcodeFormData.provinceFk = null;
-            postcodeFormData.townFk = null;
+//             postcodeFormData.townFk = null;
-        }
+//         }
-        if (oldValueFk !== newCountryFk) {
+//         if (oldValueFk !== newCountryFk) {
-            await fetchProvinces(newCountryFk);
+//             await fetchProvinces(newCountryFk);
-            await fetchTowns(newCountryFk);
+//         }
-        }
+//     }
-    }
+// );
-);
+// async function fetchProvinces(countryFk) {
-async function fetchTowns(countryFk) {
+//     const provincesFilter = countryFk
-    const townsFilter = countryFk
+//         ? {
-        ? {
+//               where: {
-              where: {
+//                   countryFk: countryFk,
-                  provinceFk: {
+//               },
-                      inq: provincesOptions.value.map(({ id }) => id),
+//           }
-                  },
+//         : {};
-              },
+//     await provincesFetchDataRef.value.fetch(provincesFilter);
-          }
+// }
-        : {};
+// watch(
-    await townsFetchDataRef.value.fetch(townsFilter);
+//     () => postcodeFormData.provinceFk,
-}
+//     async (newProvinceFk, oldValueFk) => {
-async function fetchProvinces(countryFk) {
+//         if (Array.isArray(newProvinceFk)) {
-    const provincesFilter = countryFk
+//             newProvinceFk = newProvinceFk[0];
-        ? {
+//         }
-              where: {
+//     }
-                  countryFk: countryFk,
+// );
-              },
-          }
-        : {};
-    await provincesFetchDataRef.value.fetch(provincesFilter);
-}
-watch(
-    () => postcodeFormData.provinceFk,
-    async (newProvinceFk, oldValueFk) => {
-        if (Array.isArray(newProvinceFk)) {
-            newProvinceFk = newProvinceFk[0];
-        }
-        if (newProvinceFk !== oldValueFk) {
-            await townsFetchDataRef.value.fetch({
-                where: { provinceFk: newProvinceFk },
-            });
-        }
-    }
-);
 async function handleProvinces(data) {
     provincesOptions.value = data;
+    if (postcodeFormData.countryFk) {
+        await fetchTowns(postcodeFormData.countryFk);
+    }
 }
 async function handleTowns(data) {
     townsOptions.value = data;
@@ -153,18 +164,12 @@ async function handleCountries(data) {
     <FetchData
         ref="townsFetchDataRef"
         :sort-by="['name ASC']"
-        :limit="30"
+        :limit="3"
+        :filter="townFilter"
         @on-fetch="handleTowns"
         auto-load
         url="Towns/location"
     />
-    <FetchData
-        ref="CountriesFetchDataRef"
-        :sort-by="['name ASC']"
-        @on-fetch="handleCountries"
-        auto-load
-        url="Countries"
-    />
 
     <FormModelPopup
         url-create="postcodes"
@@ -186,6 +191,7 @@ async function handleCountries(data) {
                 <VnSelectDialog
                     :label="t('City')"
                     @update:model-value="(value) => setTown(value, data)"
+                    @filter="filterTowns"
                     :tooltip="t('Create city')"
                     v-model="data.townFk"
                     :options="townsOptions"
@@ -225,18 +231,22 @@ async function handleCountries(data) {
                     :province-selected="data.provinceFk"
                     @update:model-value="(value) => setProvince(value, data)"
                     v-model="data.provinceFk"
-                    :clearable="true"
+                    @on-province-fetched="handleProvinces"
                     @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
                     option-label="name"
                     option-value="id"
                     v-model="data.countryFk"
                     :rules="validate('postcode.countryFk')"
+                    @update:model-value="(value) => setCountry(value, data)"
                 />
             </VnRow>
         </template>

src/components/VnSelectProvince.vue

@@ -7,7 +7,7 @@ import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import FetchData from 'components/FetchData.vue';
 import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
 
-const emit = defineEmits(['onProvinceCreated']);
+const emit = defineEmits(['onProvinceCreated', 'onProvinceFetched']);
 const $props = defineProps({
     countryFk: {
         type: Number,
@@ -50,6 +50,7 @@ watch(
             filter.value.where.countryFk = $props.countryFk;
         } else filter.value.where = {};
         await provincesFetchDataRef.value.fetch({});
+        emit('onProvinceFetched', provincesOptions.value);
     }
 );
 </script>
@@ -67,6 +68,7 @@ watch(
         :options="provincesOptions"
         :tooltip="t('Create province')"
         hide-selected
+        :clearable="true"
         v-model="provinceFk"
         :rules="validate && validate('postcode.provinceFk')"
         :acls="[{ model: 'Province', props: '*', accessType: 'WRITE' }]"