From d2067c633d911516c05ac652b2445f133070d69f Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 26 Sep 2024 23:38:22 +0200
Subject: [PATCH 1/4] feat: refs #7679 #7679 use country or province to
 retrieve cities

---
 src/components/CreateNewPostcodeForm.vue | 56 +++++++++++++++++++++---
 src/components/VnSelectProvince.vue      | 26 +++++++++--
 2 files changed, 74 insertions(+), 8 deletions(-)

diff --git a/src/components/CreateNewPostcodeForm.vue b/src/components/CreateNewPostcodeForm.vue
index 4c44d29e2..664016325 100644
--- a/src/components/CreateNewPostcodeForm.vue
+++ b/src/components/CreateNewPostcodeForm.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, ref } from 'vue';
+import { reactive, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
@@ -22,9 +22,11 @@ const postcodeFormData = reactive({
     townFk: null,
 });
 
+const townsFetchDataRef = ref(null);
 const provincesFetchDataRef = ref(null);
 const countriesOptions = ref([]);
 const provincesOptions = ref([]);
+const townsOptions = ref([]);
 const town = ref({});
 
 function onDataSaved(formData) {
@@ -67,20 +69,63 @@ async function setProvince(id, data) {
 
     data.countryFk = newProvince.countryFk;
 }
+
+// Watchers to update filters based on country and province changes
+watch(
+    () => [postcodeFormData.countryFk],
+    async (newCountryFk) => {
+        if (newCountryFk) {
+            await provincesFetchDataRef.value.fetch({
+                where: {
+                    countryFk: newCountryFk[0],
+                },
+            });
+            await townsFetchDataRef.value.fetch({
+                where: {
+                    provinceFk: {
+                        inq: provincesOptions.value.map(({ id }) => id),
+                    },
+                },
+            });
+        }
+    }
+);
+
+watch(
+    () => postcodeFormData.provinceFk,
+    async (newProvinceFk) => {
+        if (newProvinceFk) {
+            await townsFetchDataRef.value.fetch({
+                where: { provinceFk: newProvinceFk[0] },
+            });
+        }
+    }
+);
+async function handleProvinces(data) {
+    provincesOptions.value = data;
+}
+async function handleTowns(data) {
+    townsOptions.value = data;
+}
+async function handleCountries(data) {
+    countriesOptions.value = data;
+}
 </script>
 
 <template>
     <FetchData
         ref="provincesFetchDataRef"
-        @on-fetch="(data) => (provincesOptions = data)"
+        @on-fetch="handleProvinces"
         auto-load
         url="Provinces/location"
     />
     <FetchData
-        @on-fetch="(data) => (countriesOptions = data)"
+        ref="townsFetchDataRef"
+        @on-fetch="handleTowns"
         auto-load
-        url="Countries"
+        url="Towns/location"
     />
+    <FetchData @on-fetch="handleCountries" auto-load url="Countries" />
     <FormModelPopup
         url-create="postcodes"
         model="postcode"
@@ -99,9 +144,9 @@ async function setProvince(id, data) {
                 />
                 <VnSelectDialog
                     :label="t('City')"
-                    url="Towns/location"
                     @update:model-value="(value) => setTown(value, data)"
                     v-model="data.townFk"
+                    :options="townsOptions"
                     option-label="name"
                     option-value="id"
                     :rules="validate('postcode.city')"
@@ -132,6 +177,7 @@ async function setProvince(id, data) {
             </VnRow>
             <VnRow>
                 <VnSelectProvince
+                    :country-fk="postcodeFormData.countryFk"
                     @update:model-value="(value) => setProvince(value, data)"
                     v-model="data.provinceFk"
                 />
diff --git a/src/components/VnSelectProvince.vue b/src/components/VnSelectProvince.vue
index 2f08db611..3f8388c69 100644
--- a/src/components/VnSelectProvince.vue
+++ b/src/components/VnSelectProvince.vue
@@ -10,7 +10,13 @@ import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
 const emit = defineEmits(['onProvinceCreated']);
 const provinceFk = defineModel({ type: Number });
 watch(provinceFk, async () => await provincesFetchDataRef.value.fetch());
-
+const $props = defineProps({
+    countryFk: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
 const { validate } = useValidator();
 const { t } = useI18n();
 
@@ -18,17 +24,31 @@ const provincesOptions = ref();
 const provincesFetchDataRef = ref();
 
 async function onProvinceCreated(_, data) {
-    await provincesFetchDataRef.value.fetch();
+    await provincesFetchDataRef.value.fetch({ where: { countryFk: $props.countryFk } });
     provinceFk.value = data.id;
     emit('onProvinceCreated', data);
 }
+watch(
+    () => $props.countryFk,
+    async (newProvinceFk) => {
+        if (newProvinceFk) {
+            // Assuming there's a townsFetchDataRef similar to provincesFetchDataRef
+            await provincesFetchDataRef.value.fetch({
+                where: { countryFk: newProvinceFk },
+            });
+        }
+    }
+);
+async function handleProvinces(data) {
+    provincesOptions.value = data;
+}
 </script>
 
 <template>
     <FetchData
         ref="provincesFetchDataRef"
         :filter="{ include: { relation: 'country' } }"
-        @on-fetch="(data) => (provincesOptions = data)"
+        @on-fetch="handleProvinces"
         auto-load
         url="Provinces"
     />

From 6b2e0df9c2b5a8fbbc77728eca630737ce62fdfb Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 26 Sep 2024 23:39:14 +0200
Subject: [PATCH 2/4] test: refs #7679 #7679 improve test

---
 .../vnComponent/vnLocation.spec.js            | 64 +++++++++++++++----
 1 file changed, 53 insertions(+), 11 deletions(-)

diff --git a/test/cypress/integration/vnComponent/vnLocation.spec.js b/test/cypress/integration/vnComponent/vnLocation.spec.js
index 1872d3591..88919e41c 100644
--- a/test/cypress/integration/vnComponent/vnLocation.spec.js
+++ b/test/cypress/integration/vnComponent/vnLocation.spec.js
@@ -3,25 +3,71 @@ describe('VnLocation', () => {
     const dialogInputs = '.q-dialog label input';
     const createLocationButton = '.q-form > .q-card > .vn-row:nth-child(6) .--add-icon';
     const inputLocation = '.q-form input[aria-label="Location"]';
+    const createForm = {
+        prefix: '.q-dialog__inner > .column > #formModel > .q-card',
+        sufix: ' .q-field__inner > .q-field__control',
+    };
+    describe('CreateFormDialog ', () => {
+        beforeEach(() => {
+            cy.viewport(1280, 720);
+            cy.login('developer');
+            cy.visit('/#/supplier/567/fiscal-data', { timeout: 7000 });
+            cy.waitForElement('.q-card');
+            cy.get(createLocationButton).click();
+        });
+        it('should filter provinces based on selected country', () => {
+            // Select a country
+            cy.selectOption(
+                `${createForm.prefix} > :nth-child(5) > .q-field:nth-child(5)> ${createForm.sufix}`,
+                'Ecuador'
+            );
+            // Verify that provinces are filtered
+            cy.get(
+                `${createForm.prefix} > :nth-child(5) > .q-field:nth-child(3)> ${createForm.sufix}`
+            ).should('have.length', 1);
+
+            // Verify that towns are filtered
+            cy.get(
+                `${createForm.prefix} > :nth-child(4) > .q-field:nth-child(3)> ${createForm.sufix}`
+            ).should('have.length', 1);
+        });
+
+        it('should filter towns based on selected province', () => {
+            // Select a country
+            cy.selectOption(
+                `${createForm.prefix} > :nth-child(5) > .q-field:nth-child(3)> ${createForm.sufix}`,
+                'Ecuador'
+            );
+            // Verify that provinces are filtered
+            cy.get(
+                `${createForm.prefix} > :nth-child(5) > .q-field:nth-child(3)> ${createForm.sufix}`
+            ).should('have.length', 1);
+
+            // Verify that towns are filtered
+            cy.get(
+                `${createForm.prefix} > :nth-child(4) > .q-field:nth-child(3)> ${createForm.sufix}`
+            ).should('have.length', 1);
+        });
+    });
     describe('Worker Create', () => {
         beforeEach(() => {
             cy.viewport(1280, 720);
             cy.login('developer');
             cy.visit('/#/worker/create', { timeout: 5000 });
             cy.waitForElement('.q-card');
+            cy.get(inputLocation).click();
         });
         it('Show all options', function () {
-            cy.get(inputLocation).click();
             cy.get(locationOptions).should('have.length.at.least', 5);
         });
         it('input filter location as "al"', function () {
-            cy.get(inputLocation).click();
+            // cy.get(inputLocation).click();
             cy.get(inputLocation).clear();
             cy.get(inputLocation).type('al');
             cy.get(locationOptions).should('have.length.at.least', 4);
         });
         it('input filter location as "ecuador"', function () {
-            cy.get(inputLocation).click();
+            // cy.get(inputLocation).click();
             cy.get(inputLocation).clear();
             cy.get(inputLocation).type('ecuador');
             cy.get(locationOptions).should('have.length.at.least', 1);
@@ -63,13 +109,11 @@ describe('VnLocation', () => {
             cy.get(dialogInputs).eq(0).clear();
             cy.get(dialogInputs).eq(0).type(postCode);
             cy.selectOption(
-                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(4) > .q-select > .q-field__inner > .q-field__control ',
+                `${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix}`,
                 province
             );
             cy.get('.q-mt-lg > .q-btn--standard').click();
-            cy.get('.q-dialog__inner > .column > #formModel > .q-card').should(
-                'not.exist'
-            );
+            cy.get(`${createForm.prefix}`).should('not.exist');
             checkVnLocation(postCode, province);
         });
         it('Create city', () => {
@@ -79,7 +123,7 @@ describe('VnLocation', () => {
             cy.get(dialogInputs).eq(0).type(postCode);
             // city create button
             cy.get(
-                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(4) > .q-select > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon'
+                `${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix} > :nth-child(2) > .q-icon`
             ).click();
             cy.selectOption('#q-portal--dialog--2 .q-select', 'one');
             cy.get('#q-portal--dialog--2 .q-input').type(province);
@@ -89,9 +133,7 @@ describe('VnLocation', () => {
         });
 
         function checkVnLocation(postCode, province) {
-            cy.get('.q-dialog__inner > .column > #formModel > .q-card').should(
-                'not.exist'
-            );
+            cy.get(`${createForm.prefix}`).should('not.exist');
             cy.get('.q-form > .q-card > .vn-row:nth-child(6)')
                 .find('input')
                 .invoke('val')

From e06d567e3c94f313490c740b90fb0c93ebe7fe7c Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 27 Sep 2024 10:35:39 +0200
Subject: [PATCH 3/4] test: refs #7679 #7679 remove comment

---
 src/components/VnSelectProvince.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/VnSelectProvince.vue b/src/components/VnSelectProvince.vue
index 3f8388c69..e6666330a 100644
--- a/src/components/VnSelectProvince.vue
+++ b/src/components/VnSelectProvince.vue
@@ -32,7 +32,6 @@ watch(
     () => $props.countryFk,
     async (newProvinceFk) => {
         if (newProvinceFk) {
-            // Assuming there's a townsFetchDataRef similar to provincesFetchDataRef
             await provincesFetchDataRef.value.fetch({
                 where: { countryFk: newProvinceFk },
             });

From bec50d6eeda160de375cd1e1e10f21dc4b4fdff2 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 27 Sep 2024 19:54:01 +0200
Subject: [PATCH 4/4] perf: refs #7679 #7679 comments

---
 src/components/CreateNewPostcodeForm.vue | 1 -
 src/components/VnSelectProvince.vue      | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/CreateNewPostcodeForm.vue b/src/components/CreateNewPostcodeForm.vue
index 664016325..dc8027989 100644
--- a/src/components/CreateNewPostcodeForm.vue
+++ b/src/components/CreateNewPostcodeForm.vue
@@ -70,7 +70,6 @@ async function setProvince(id, data) {
     data.countryFk = newProvince.countryFk;
 }
 
-// Watchers to update filters based on country and province changes
 watch(
     () => [postcodeFormData.countryFk],
     async (newCountryFk) => {
diff --git a/src/components/VnSelectProvince.vue b/src/components/VnSelectProvince.vue
index e6666330a..d89827821 100644
--- a/src/components/VnSelectProvince.vue
+++ b/src/components/VnSelectProvince.vue
@@ -13,7 +13,6 @@ watch(provinceFk, async () => await provincesFetchDataRef.value.fetch());
 const $props = defineProps({
     countryFk: {
         type: Number,
-        required: false,
         default: null,
     },
 });