fix: refs #8061 improve code dependencies

src/components/CreateNewPostcodeForm.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, ref } from 'vue';
+import { computed, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
@@ -24,9 +24,9 @@ const postcodeFormData = reactive({
 
 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({});
@@ -69,35 +69,8 @@ async function setCountry(countryFk, data) {
     data.countryFk = 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 handleProvinces(data) {
     provincesOptions.value = data;
-    if (postcodeFormData.countryFk) {
-        await fetchTowns(postcodeFormData.countryFk);
-    }
-}
-async function handleTowns(data) {
-    townsOptions.value = data;
 }
 
 async function setProvince(id, data) {
@@ -113,6 +86,14 @@ async function onProvinceCreated(data) {
     });
     postcodeFormData.provinceFk = data.id;
 }
+
+const whereTowns = computed(() => {
+    return {
+        provinceFk: {
+            inq: provincesOptions.value.map(({ id }) => id),
+        },
+    };
+});
 </script>
 
 <template>
@@ -124,15 +105,6 @@ async function onProvinceCreated(data) {
         auto-load
         url="Provinces/location"
     />
-    <FetchData
-        ref="townsFetchDataRef"
-        :sort-by="['name ASC']"
-        :limit="30"
-        :filter="townFilter"
-        @on-fetch="handleTowns"
-        auto-load
-        url="Towns/location"
-    />
 
     <FormModelPopup
         url-create="postcodes"
@@ -153,12 +125,16 @@ async function onProvinceCreated(data) {
                     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)"
-                    @filter="filterTowns"
                     :tooltip="t('Create city')"
                     v-model="data.townFk"
-                    :options="townsOptions"
                     option-label="name"
                     option-value="id"
                     :rules="validate('postcode.city')"

test/cypress/support/commands.js

@@ -86,9 +86,10 @@ Cypress.Commands.add('getValue', (selector) => {
 });
 
 // Fill Inputs
-Cypress.Commands.add('selectOption', (selector, option) => {
+Cypress.Commands.add('selectOption', (selector, option, timeout) => {
     cy.waitForElement(selector);
     cy.get(selector).click();
+    cy.wait(timeout || 1000);
     cy.get('.q-menu .q-item').contains(option).click();
 });
 Cypress.Commands.add('countSelectOptions', (selector, option) => {