Merge pull request 'fix_city_from_province' (!1032) from fix_city_from_province into dev

Reviewed-on: #1032
Reviewed-by: Jon Elias <jon@verdnatura.es>

src/components/CreateNewCityForm.vue

@@ -40,6 +40,7 @@ const onDataSaved = (...args) => {
         url-create="towns"
         model="city"
         @on-data-saved="onDataSaved"
+        data-cy="newCityForm"
     >
         <template #form-inputs="{ data, validate }">
             <VnRow>
@@ -48,12 +49,14 @@ const onDataSaved = (...args) => {
                     v-model="data.name"
                     :rules="validate('city.name')"
                     required
+                    data-cy="cityName"
                 />
                 <VnSelectProvince
                     :province-selected="$props.provinceSelected"
                     :country-fk="$props.countryFk"
                     v-model="data.provinceFk"
                     required
+                    data-cy="provinceCity"
                 />
             </VnRow>
         </template>

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,14 +21,14 @@ 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([]);
 const town = ref({});
-const townFilter = ref({});
 const countryFilter = ref({});
 
 function onDataSaved(formData) {
@@ -48,6 +48,49 @@ function onDataSaved(formData) {
     emit('onDataSaved', newPostcode);
 }
 
+async function setCountry(countryFk, data) {
+    data.townFk = null;
+    data.provinceFk = null;
+    data.countryFk = countryFk;
+    await fetchTowns();
+}
+
+// Province
+
+async function handleProvinces(data) {
+    provincesOptions.value = data;
+    if (postcodeFormData.countryFk) {
+        await fetchTowns();
+    }
+}
+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);
+}
+
+// Town
+async function handleTowns(data) {
+    townsOptions.value = data;
+}
+function setTown(newTown, data) {
+    town.value = newTown;
+    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(
@@ -56,44 +99,29 @@ async function onCityCreated(newTown, formData) {
     formData.townFk = newTown;
     setTown(newTown, formData);
 }
-
+async function fetchTowns(countryFk = postcodeFormData.countryFk) {
-function setTown(newTown, data) {
+    if (!countryFk) return;
-    town.value = newTown;
+    const provinces = postcodeFormData.provinceFk
-    data.provinceFk = newTown?.provinceFk ?? newTown;
+        ? [postcodeFormData.provinceFk]
-    data.countryFk = newTown?.province?.countryFk ?? newTown;
+        : provinceByCountry();
-}
+    townFilter.value.where = {
-
-async function setCountry(countryFk, data) {
-    data.townFk = null;
-    data.provinceFk = null;
-    data.countryFk = countryFk;
-}
-
-async function handleProvinces(data) {
-    provincesOptions.value = data;
-}
-
-async function setProvince(id, data) {
-    const newProvince = provincesOptions.value.find((province) => province.id == id);
-    if (!newProvince) return;
-
-    data.countryFk = newProvince.countryFk;
-}
-
-async function onProvinceCreated(data) {
-    await provincesFetchDataRef.value.fetch({
-        where: { countryFk: postcodeFormData.countryFk },
-    });
-    postcodeFormData.provinceFk = data.id;
-}
-
-const whereTowns = computed(() => {
-    return {
         provinceFk: {
-            inq: provincesOptions.value.map(({ id }) => id),
+            inq: provinces,
         },
     };
-});
+    await townsFetchDataRef.value?.fetch();
+}
+
+async function filterTowns(name) {
+    if (name !== '') {
+        townFilter.value.where = {
+            name: {
+                like: `%${name}%`,
+            },
+        };
+        await townsFetchDataRef.value?.fetch();
+    }
+}
 </script>
 
 <template>
@@ -105,6 +133,15 @@ const whereTowns = computed(() => {
         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"
@@ -123,25 +160,22 @@ const whereTowns = computed(() => {
                     :rules="validate('postcode.code')"
                     clearable
                     required
+                    data-cy="locationPostcode"
                 />
                 <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')"
                     :acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
                     :emit-value="false"
-                    :clearable="true"
                     required
+                    data-cy="locationTown"
                 >
                     <template #option="{ itemProps, opt }">
                         <QItem v-bind="itemProps">
@@ -172,7 +206,6 @@ const whereTowns = computed(() => {
                     :province-selected="data.provinceFk"
                     @update:model-value="(value) => setProvince(value, data)"
                     v-model="data.provinceFk"
-                    @on-province-fetched="handleProvinces"
                     @on-province-created="onProvinceCreated"
                     required
                 />
@@ -191,6 +224,7 @@ const whereTowns = computed(() => {
                     v-model="data.countryFk"
                     :rules="validate('postcode.countryFk')"
                     @update:model-value="(value) => setCountry(value, data)"
+                    data-cy="locationCountry"
                 />
             </VnRow>
         </template>

src/components/CreateNewProvinceForm.vue

@@ -53,8 +53,10 @@ const where = computed(() => {
                     v-model="data.name"
                     :rules="validate('province.name')"
                     required
+                    data-cy="provinceName"
                 />
                 <VnSelect
+                    data-cy="autonomyProvince"
                     required
                     ref="autonomiesRef"
                     auto-load

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"

src/components/common/VnSelectDialog.vue

@@ -43,6 +43,7 @@ const isAllowedToCreate = computed(() => {
     >
         <template v-if="isAllowedToCreate" #append>
             <QIcon
+                :data-cy="$attrs.dataCy ?? $attrs.label + '_icon'"
                 @click.stop.prevent="$refs.dialog.show()"
                 :name="actionIcon"
                 :size="actionIcon === 'add' ? 'xs' : 'sm'"

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', () => {
@@ -123,32 +121,16 @@ describe('VnLocation', () => {
             const province = randomString({ length: 4 });
             cy.get(createLocationButton).click();
             cy.get(dialogInputs).eq(0).type(postCode);
-            cy.get(
+            cy.dataCy('City_icon').click();
-                `${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix} > :nth-child(2) > .q-icon`
+            cy.selectOption('[data-cy="locationProvince"]:last', 'Province one');
-            ).click();
+            cy.dataCy('cityName').type(province);
-            cy.selectOption('#q-portal--dialog--3 .q-select', 'one');
+            cy.dataCy('FormModelPopup_save').eq(1).click();
-            cy.get('#q-portal--dialog--3 .q-input').type(province);
+            cy.dataCy('FormModelPopup_save').eq(0).click();
-            cy.get('#q-portal--dialog--3 .q-btn--standard').click();
+
-            cy.get('#q-portal--dialog--1 .q-btn--standard').click();
             cy.waitForElement('.q-form');
             checkVnLocation(postCode, province);
         });
 
-        it('Create province without country', () => {
-            const provinceName = 'Saskatchew'.concat(Math.random(1 * 100));
-            cy.get(createLocationButton).click();
-            cy.get(
-                `${createForm.prefix} > :nth-child(5) > .q-select > ${createForm.sufix} > :nth-child(2) `
-            )
-                .eq(0)
-                .click();
-            cy.selectOption('#q-portal--dialog--3 .q-select', 'one');
-            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();
-        });
-
         it('Create city with country', () => {
             const cityName = 'Saskatchew'.concat(Math.random(1 * 100));
             cy.get(createLocationButton).click();
@@ -156,14 +138,23 @@ describe('VnLocation', () => {
                 `${createForm.prefix} > :nth-child(5) > :nth-child(3) `,
                 'Italia'
             );
-            cy.get(
+            cy.dataCy('City_icon').click();
-                `${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix} > :nth-child(2) > .q-icon`
+            cy.selectOption('[data-cy="locationProvince"]:last', 'Province four');
-            ).click();
+            cy.countSelectOptions('[data-cy="locationProvince"]:last', 1);
-            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.dataCy('cityName').type(cityName);
-            cy.get('#q-portal--dialog--4 .q-btn--standard').click();
+            cy.dataCy('FormModelPopup_save').eq(1).click();
+        });
+
+        it('Create province without country', () => {
+            const provinceName = 'Saskatchew'.concat(Math.random(1 * 100));
+            cy.get(createLocationButton).click();
+            cy.dataCy('Province_icon').click();
+            cy.selectOption('[data-cy="autonomyProvince"] ', 'Autonomy one');
+            cy.countSelectOptions('[data-cy="autonomyProvince"]', 4);
+            cy.dataCy('provinceName').type(provinceName);
+
+            cy.dataCy('FormModelPopup_save').eq(1).click();
         });
 
         it('Create province with country', () => {
@@ -173,17 +164,13 @@ describe('VnLocation', () => {
                 `${createForm.prefix} > :nth-child(5) > :nth-child(3) `,
                 'España'
             );
-            cy.get(
+            cy.dataCy('Province_icon').click();
-                `${createForm.prefix} > :nth-child(5) > .q-select > ${createForm.sufix} > :nth-child(2) `
-            )
-                .eq(0)
-                .click();
 
-            cy.selectOption('#q-portal--dialog--4 .q-select', 'one');
+            cy.selectOption('[data-cy="autonomyProvince"] ', 'Autonomy one');
-            cy.countSelectOptions('#q-portal--dialog--4 .q-select', 2);
+            cy.countSelectOptions('[data-cy="autonomyProvince"]', 2);
 
-            cy.get('#q-portal--dialog--4 .q-input').type(provinceName);
+            cy.dataCy('provinceName').type(provinceName);
-            cy.get('#q-portal--dialog--4 .q-btn--standard').click();
+            cy.dataCy('FormModelPopup_save').eq(1).click();
         });
 
         function checkVnLocation(postCode, province) {