src/components/CreateNewPostcodeForm.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, reactive, ref } from 'vue';
+import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
@@ -21,9 +21,10 @@ const postcodeFormData = reactive({
     provinceFk: null,
     townFk: null,
 });
+const townsFetchDataRef = ref(false);
+const townFilter = ref({});
 
 const countriesRef = ref(false);
-const townsRef = ref(false);
 const provincesFetchDataRef = ref(false);
 const provincesOptions = ref([]);
 const townsOptions = ref([]);
@@ -47,74 +48,79 @@ function onDataSaved(formData) {
     emit('onDataSaved', newPostcode);
 }
 
-async function onCityCreated(newTown, formData) {
-    await provincesFetchDataRef.value.fetch();
-    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;
-    data.countryFk = newTown?.province?.countryFk ?? newTown;
-}
-
 async function setCountry(countryFk, data) {
     data.townFk = null;
     data.provinceFk = null;
     data.countryFk = countryFk;
+    await fetchTowns();
 }
 
+// Province
+
 async function handleProvinces(data) {
     provincesOptions.value = data;
-    // handleTowns(data);
+    if (postcodeFormData.countryFk) {
-}
+        await fetchTowns();
-async function handleTowns(data) {
-    townsOptions.value = data;
-    // whereTowns.value.provinceFk.inq = mapData(data);
-    // townsRef.value.opts = [];
-}
-
-async function setProvince(id, data) {
-    const newProvince = findProvince(id);
-    if (!newProvince) {
-        data.townFk = null;
-        return;
     }
-    whereTowns.value.provinceFk.inq = [id];
-    // handleTowns([newProvince]);
-    data.countryFk = newProvince.countryFk;
 }
-
+async function setProvince(id, data) {
+    if (data.provinceFk === id) return;
+    const newProvince = provincesOptions.value.find((province) => province.id == id);
+    if (newProvince) data.countryFk = newProvince.countryFk;
+    postcodeFormData.provinceFk = id;
+    await fetchTowns();
+}
 async function onProvinceCreated(data) {
     await provincesFetchDataRef.value.fetch({
         where: { countryFk: postcodeFormData.countryFk },
     });
     postcodeFormData.provinceFk = data.id;
 }
+function provinceByCountry(countryFk = postcodeFormData.countryFk) {
+    return provincesOptions.value
+        .filter((province) => province.countryFk === countryFk)
+        .map(({ id }) => id);
+}
 
-const whereTowns = ref({});
+// Town
-// const whereTowns = ref(() => {
+async function handleTowns(data) {
-//     if (!postcodeFormData.provinceFk) return { provinceFk: { inq: null } };
+    townsOptions.value = data;
-//     if (postcodeFormData.provinceFk)
+}
-//         return {
+function setTown(newTown, data) {
-//             provinceFk: {
+    town.value = newTown;
-//                 inq: [postcodeFormData.provinceFk], //provincesOptions.value.map(({ id }) => id),
+    data.provinceFk = newTown?.provinceFk ?? newTown;
-//             },
+    data.countryFk = newTown?.province?.countryFk ?? newTown;
-//         };
+}
+async function onCityCreated(newTown, formData) {
+    await provincesFetchDataRef.value.fetch();
+    newTown.province = provincesOptions.value.find(
+        (province) => province.id === newTown.provinceFk
+    );
+    formData.townFk = newTown;
+    setTown(newTown, formData);
+}
+async function fetchTowns(countryFk = postcodeFormData.countryFk) {
+    if (!countryFk) return;
+    const provinces = postcodeFormData.provinceFk
+        ? [postcodeFormData.provinceFk]
+        : provinceByCountry();
+    townFilter.value.where = {
+        provinceFk: {
+            inq: provinces,
+        },
+    };
+    await townsFetchDataRef.value?.fetch();
+}
 
-//     return {
+async function filterTowns(name) {
-//         provinceFk: {
+    if (name !== '') {
-//             inq: mapData(provincesOptions.value),
+        townFilter.value.where = {
-//         },
+            name: {
-//     };
+                like: `%${name}%`,
-// });
+            },
-function mapData(data) {
+        };
-    if (data.length === 0) return data;
+        await townsFetchDataRef.value?.fetch();
-    return data.map(({ id }) => id);
+    }
 }
 </script>
 
@@ -128,12 +134,12 @@ function mapData(data) {
         url="Provinces/location"
     />
     <FetchData
-        ref="townsRef"
+        ref="townsFetchDataRef"
-        @on-fetch="handleTowns"
         :sort-by="['name ASC']"
-        :limit="2"
+        :limit="30"
+        :filter="townFilter"
+        @on-fetch="handleTowns"
         auto-load
-        :where="whereTowns"
         url="Towns/location"
     />
 
@@ -155,21 +161,23 @@ function mapData(data) {
                     :rules="validate('postcode.code')"
                     clearable
                     required
+                    data-cy="locationPostcode"
                 />
                 <VnSelectDialog
                     :label="t('City')"
                     @update:model-value="(value) => setTown(value, data)"
+                    @filter="filterTowns"
                     :tooltip="t('Create city')"
                     v-model="data.townFk"
-                    option-label="name"
                     :options="townsOptions"
+                    option-label="name"
                     option-value="id"
                     @input-value="(evt) => (whereTowns.name = { like: `%${evt}%` })"
                     :rules="validate('postcode.city')"
                     :acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
                     :emit-value="false"
-                    :clearable="true"
                     required
+                    data-cy="locationTown"
                 >
                     <template #option="{ itemProps, opt }">
                         <QItem v-bind="itemProps">
@@ -200,7 +208,6 @@ function mapData(data) {
                     :province-selected="data.provinceFk"
                     @update:model-value="(value) => setProvince(value, data)"
                     v-model="data.provinceFk"
-                    @on-province-fetched="handleProvinces"
                     @on-province-created="onProvinceCreated"
                     required
                 />
@@ -219,6 +226,7 @@ function mapData(data) {
                     v-model="data.countryFk"
                     :rules="validate('postcode.countryFk')"
                     @update:model-value="(value) => setCountry(value, data)"
+                    data-cy="locationCountry"
                 />
             </VnRow>
         </template>

src/components/VnSelectProvince.vue

@@ -64,11 +64,11 @@ watch(
         auto-load
     />
     <VnSelectDialog
+        data-cy="locationProvince"
         :label="t('Province')"
         :options="provincesOptions"
         :tooltip="t('Create province')"
         hide-selected
-        :clearable="true"
         v-model="provinceFk"
         :rules="validate && validate('postcode.provinceFk')"
         :acls="[{ model: 'Province', props: '*', accessType: 'WRITE' }]"

src/components/common/VnLocation.vue

@@ -75,7 +75,6 @@ const handleModelValue = (data) => {
         :input-debounce="300"
         :class="{ required: isRequired }"
         v-bind="$attrs"
-        clearable
         :emit-value="false"
         :tooltip="t('Create new location')"
         :rules="mixinRules"

test/cypress/integration/vnComponent/VnLocation.spec.js

@@ -43,11 +43,9 @@ describe('VnLocation', () => {
                 province
             );
             cy.get(
-                `${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix} > :nth-child(3) > .q-icon`
+                `${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix} > :nth-child(3) `
             ).click();
-            cy.get(
+            cy.dataCy('locationProvince').should('have.value', province);
-                `#q-portal--dialog--5 > .q-dialog > ${createForm.prefix} > .vn-row > .q-select > ${createForm.sufix} > :nth-child(1) input`
-            ).should('have.value', province);
         });
     });
     describe('Worker Create', () => {
@@ -124,17 +122,18 @@ describe('VnLocation', () => {
             cy.get(createLocationButton).click();
             cy.get(dialogInputs).eq(0).type(postCode);
             cy.get(
-                `${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix} > :nth-child(2) > .q-icon`
+                `${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix} > :nth-child(2) `
             ).click();
             cy.selectOption('#q-portal--dialog--3 .q-select', 'one');
             cy.get('#q-portal--dialog--3 .q-input').type(province);
-            cy.get('#q-portal--dialog--3 .q-btn--standard').click();
+            cy.dataCy('FormModelPopup_save').eq(1).click();
-            cy.get('#q-portal--dialog--1 .q-btn--standard').click();
+            cy.dataCy('FormModelPopup_save').eq(0).click();
+
             cy.waitForElement('.q-form');
             checkVnLocation(postCode, province);
         });
 
-        it('Create province without country', () => {
+        it.only('Create province without country', () => {
             const provinceName = 'Saskatchew'.concat(Math.random(1 * 100));
             cy.get(createLocationButton).click();
             cy.get(
@@ -146,7 +145,7 @@ describe('VnLocation', () => {
             cy.countSelectOptions('#q-portal--dialog--3 .q-select', 4);
             cy.get('#q-portal--dialog--3 .q-input').type(provinceName);
 
-            cy.get('#q-portal--dialog--3 .q-btn--standard').click();
+            cy.dataCy('FormModelPopup_save').eq(1).click();
         });
 
         it('Create city with country', () => {
@@ -157,13 +156,13 @@ describe('VnLocation', () => {
                 'Italia'
             );
             cy.get(
-                `${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix} > :nth-child(2) > .q-icon`
+                `${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix} > :nth-child(2)  `
             ).click();
             cy.selectOption('#q-portal--dialog--4 .q-select', 'Province four');
             cy.countSelectOptions('#q-portal--dialog--4 .q-select', 1);
 
             cy.get('#q-portal--dialog--4 .q-input').type(cityName);
-            cy.get('#q-portal--dialog--4 .q-btn--standard').click();
+            cy.dataCy('FormModelPopup_save').eq(1).click();
         });
 
         it('Create province with country', () => {
@@ -183,7 +182,7 @@ describe('VnLocation', () => {
             cy.countSelectOptions('#q-portal--dialog--4 .q-select', 2);
 
             cy.get('#q-portal--dialog--4 .q-input').type(provinceName);
-            cy.get('#q-portal--dialog--4 .q-btn--standard').click();
+            cy.dataCy('FormModelPopup_save').eq(1).click();
         });
 
         function checkVnLocation(postCode, province) {