feat: improve Merge branch 'test' into dev

src/components/CreateNewPostcodeForm.vue

@@ -22,13 +22,12 @@ const postcodeFormData = reactive({
     townFk: null,
 });
 
-const townsFetchDataRef = ref(false);
 const countriesRef = ref(false);
 const townsRef = ref(false);
 const provincesFetchDataRef = ref(false);
 const provincesOptions = ref([]);
+const townsOptions = ref([]);
 const town = ref({});
-const townFilter = ref({});
 const countryFilter = ref({});
 
 function onDataSaved(formData) {
@@ -50,13 +49,13 @@ function onDataSaved(formData) {
 
 async function onCityCreated(newTown, formData) {
     await provincesFetchDataRef.value.fetch();
-    newTown.province = provincesOptions.value.find(
-        (province) => province.id === newTown.provinceFk
-    );
+    newTown.province = findProvince(newTown.provinceFk);
     formData.townFk = newTown;
     setTown(newTown, formData);
 }
-
+function findProvince(provinceId) {
+    return provincesOptions.value.find(({ id }) => id === provinceId);
+}
 function setTown(newTown, data) {
     town.value = newTown;
     data.provinceFk = newTown?.provinceFk ?? newTown;
@@ -71,12 +70,22 @@ async function setCountry(countryFk, data) {
 
 async function handleProvinces(data) {
     provincesOptions.value = data;
+    // handleTowns(data);
+}
+async function handleTowns(data) {
+    townsOptions.value = data;
+    // whereTowns.value.provinceFk.inq = mapData(data);
+    // townsRef.value.opts = [];
 }
 
 async function setProvince(id, data) {
-    const newProvince = provincesOptions.value.find((province) => province.id == id);
-    if (!newProvince) return;
-
+    const newProvince = findProvince(id);
+    if (!newProvince) {
+        data.townFk = null;
+        return;
+    }
+    whereTowns.value.provinceFk.inq = [id];
+    // handleTowns([newProvince]);
     data.countryFk = newProvince.countryFk;
 }
 
@@ -87,13 +96,26 @@ async function onProvinceCreated(data) {
     postcodeFormData.provinceFk = data.id;
 }
 
-const whereTowns = computed(() => {
-    return {
-        provinceFk: {
-            inq: provincesOptions.value.map(({ id }) => id),
-        },
-    };
-});
+const whereTowns = ref({});
+// const whereTowns = ref(() => {
+//     if (!postcodeFormData.provinceFk) return { provinceFk: { inq: null } };
+//     if (postcodeFormData.provinceFk)
+//         return {
+//             provinceFk: {
+//                 inq: [postcodeFormData.provinceFk], //provincesOptions.value.map(({ id }) => id),
+//             },
+//         };
+
+//     return {
+//         provinceFk: {
+//             inq: mapData(provincesOptions.value),
+//         },
+//     };
+// });
+function mapData(data) {
+    if (data.length === 0) return data;
+    return data.map(({ id }) => id);
+}
 </script>
 
 <template>
@@ -101,10 +123,19 @@ const whereTowns = computed(() => {
         ref="provincesFetchDataRef"
         @on-fetch="handleProvinces"
         :sort-by="['name ASC']"
-        :limit="30"
+        :limit="2"
         auto-load
         url="Provinces/location"
     />
+    <FetchData
+        ref="townsRef"
+        @on-fetch="handleTowns"
+        :sort-by="['name ASC']"
+        :limit="2"
+        auto-load
+        :where="whereTowns"
+        url="Towns/location"
+    />
 
     <FormModelPopup
         url-create="postcodes"
@@ -116,6 +147,7 @@ const whereTowns = computed(() => {
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data, validate }">
+            {{ whereTowns }}
             <VnRow>
                 <VnInput
                     :label="t('Postcode')"
@@ -125,18 +157,14 @@ const whereTowns = computed(() => {
                     required
                 />
                 <VnSelectDialog
-                    ref="townsRef"
-                    :sort-by="['name ASC']"
-                    :limit="30"
-                    auto-load
-                    url="Towns/location"
-                    :where="whereTowns"
                     :label="t('City')"
                     @update:model-value="(value) => setTown(value, data)"
                     :tooltip="t('Create city')"
                     v-model="data.townFk"
                     option-label="name"
+                    :options="townsOptions"
                     option-value="id"
+                    @input-value="(evt) => (whereTowns.name = { like: `%${evt}%` })"
                     :rules="validate('postcode.city')"
                     :acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
                     :emit-value="false"
@@ -178,7 +206,7 @@ const whereTowns = computed(() => {
                 />
                 <VnSelect
                     ref="countriesRef"
-                    :limit="30"
+                    :limit="2"
                     :filter="countryFilter"
                     :sort-by="['name ASC']"
                     auto-load