Merge pull request 'fix: #8061 Handle new CP' (!948) from 8061_newCP into dev

Reviewed-on: #948
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

src/components/CreateNewCityForm.vue

@@ -17,10 +17,6 @@ const $props = defineProps({
         type: Number,
         default: null,
     },
-    provinces: {
-        type: Array,
-        default: () => [],
-    },
 });
 const { t } = useI18n();
 
@@ -56,7 +52,6 @@ const onDataSaved = (...args) => {
                     :province-selected="$props.provinceSelected"
                     :country-fk="$props.countryFk"
                     v-model="data.provinceFk"
-                    :provinces="$props.provinces"
                 />
             </VnRow>
         </template>

src/components/CreateNewPostcodeForm.vue

@@ -56,10 +56,10 @@ async function onCityCreated(newTown, formData) {
 }
 
 function setTown(newTown, data) {
-    if (!newTown) return;
-    town.value = newTown;
     data.provinceFk = newTown.provinceFk;
     data.countryFk = newTown.province.countryFk;
+    if (!newTown) return;
+    town.value = newTown;
 }
 
 async function setProvince(id, data) {
@@ -73,7 +73,7 @@ async function onProvinceCreated(data) {
     await provincesFetchDataRef.value.fetch({
         where: { countryFk: postcodeFormData.countryFk },
     });
-    postcodeFormData.provinceFk.value = data.id;
+    postcodeFormData.provinceFk = data.id;
 }
 
 watch(
@@ -90,22 +90,33 @@ watch(
             postcodeFormData.townFk = null;
         }
         if (oldValueFk !== newCountryFk) {
-            await provincesFetchDataRef.value.fetch({
-                where: {
-                    countryFk: newCountryFk,
-                },
-            });
-            await townsFetchDataRef.value.fetch({
-                where: {
-                    provinceFk: {
-                        inq: provincesOptions.value.map(({ id }) => id),
-                    },
-                },
-            });
+            await fetchProvinces(newCountryFk);
+            await fetchTowns(newCountryFk);
         }
     }
 );
-
+async function fetchTowns(countryFk) {
+    const townsFilter = countryFk
+        ? {
+              where: {
+                  provinceFk: {
+                      inq: provincesOptions.value.map(({ id }) => id),
+                  },
+              },
+          }
+        : {};
+    await townsFetchDataRef.value.fetch(townsFilter);
+}
+async function fetchProvinces(countryFk) {
+    const provincesFilter = countryFk
+        ? {
+              where: {
+                  countryFk: countryFk,
+              },
+          }
+        : {};
+    await provincesFetchDataRef.value.fetch(provincesFilter);
+}
 watch(
     () => postcodeFormData.provinceFk,
     async (newProvinceFk, oldValueFk) => {
@@ -147,6 +158,13 @@ async function handleCountries(data) {
         auto-load
         url="Towns/location"
     />
+    <FetchData
+        ref="CountriesFetchDataRef"
+        :sort-by="['name ASC']"
+        @on-fetch="handleCountries"
+        auto-load
+        url="Countries"
+    />
 
     <FormModelPopup
         url-create="postcodes"
@@ -193,7 +211,6 @@ async function handleCountries(data) {
                         <CreateNewCityForm
                             :country-fk="data.countryFk"
                             :province-selected="data.provinceFk"
-                            :provinces="provincesOptions"
                             @on-data-saved="
                                 (_, requestResponse) =>
                                     onCityCreated(requestResponse, data)
@@ -209,14 +226,12 @@ async function handleCountries(data) {
                     @update:model-value="(value) => setProvince(value, data)"
                     v-model="data.provinceFk"
                     :clearable="true"
-                    :provinces="provincesOptions"
                     @on-province-created="onProvinceCreated"
                 />
                 <VnSelect
-                    url="Countries"
-                    :sort-by="['name ASC']"
                     :label="t('Country')"
                     @update:options="handleCountries"
+                    :options="countriesOptions"
                     hide-selected
                     option-label="name"
                     option-value="id"

src/components/CreateNewProvinceForm.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';
@@ -34,6 +34,12 @@ const onDataSaved = (dataSaved, requestResponse) => {
     );
     emit('onDataSaved', dataSaved, requestResponse);
 };
+const where = computed(() => {
+    if (!$props.countryFk) {
+        return {};
+    }
+    return { countryFk: $props.countryFk };
+});
 </script>
 
 <template>
@@ -41,9 +47,7 @@ const onDataSaved = (dataSaved, requestResponse) => {
         @on-fetch="(data) => (autonomiesOptions = data)"
         auto-load
         :filter="{
-            where: {
-                countryFk: $props.countryFk,
-            },
+            where,
         }"
         url="Autonomies/location"
         :sort-by="['name ASC']"

src/components/VnSelectProvince.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { useValidator } from 'src/composables/useValidator';
 import { useI18n } from 'vue-i18n';
 
@@ -17,20 +17,23 @@ const $props = defineProps({
         type: Number,
         default: null,
     },
-    provinces: {
-        type: Array,
-        default: () => [],
-    },
 });
 const provinceFk = defineModel({ type: Number, default: null });
 
 const { validate } = useValidator();
 const { t } = useI18n();
-
+const filter = ref({
+    include: { relation: 'country' },
+    where: {
+        countryFk: $props.countryFk,
+    },
+});
 const provincesOptions = ref($props.provinces);
-provinceFk.value = $props.provinceSelected;
 const provincesFetchDataRef = ref();
-
+provinceFk.value = $props.provinceSelected;
+if (!$props.countryFk) {
+    filter.value.where = {};
+}
 async function onProvinceCreated(_, data) {
     await provincesFetchDataRef.value.fetch({ where: { countryFk: $props.countryFk } });
     provinceFk.value = data.id;
@@ -39,23 +42,29 @@ async function onProvinceCreated(_, data) {
 async function handleProvinces(data) {
     provincesOptions.value = data;
 }
+
+watch(
+    () => $props.countryFk,
+    async () => {
+        if ($props.countryFk) {
+            filter.value.where.countryFk = $props.countryFk;
+        } else filter.value.where = {};
+        await provincesFetchDataRef.value.fetch({});
+    }
+);
 </script>
 
 <template>
     <FetchData
         ref="provincesFetchDataRef"
-        :filter="{
-            include: { relation: 'country' },
-            where: {
-                countryFk: $props.countryFk,
-            },
-        }"
+        :filter="filter"
         @on-fetch="handleProvinces"
         url="Provinces"
+        auto-load
     />
     <VnSelectDialog
         :label="t('Province')"
-        :options="$props.provinces"
+        :options="provincesOptions"
         :tooltip="t('Create province')"
         hide-selected
         v-model="provinceFk"

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

@@ -99,7 +99,7 @@ describe('VnLocation', () => {
         });
 
         it('Create postCode', () => {
-            const postCode = '1234475';
+            const postCode = Math.floor(100000 + Math.random() * 900000);
             const province = 'Valencia';
             cy.get(createLocationButton).click();
             cy.get('.q-card > h1').should('have.text', 'New postcode');
@@ -115,20 +115,68 @@ describe('VnLocation', () => {
 
             checkVnLocation(postCode, province);
         });
-        it('Create city', () => {
-            const postCode = '9011';
-            const province = 'Saskatchew';
+
+        it('Create city without country', () => {
+            const cityName = 'Saskatchew'.concat(Math.random(1 * 100));
             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`
             ).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-input').type(cityName);
             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();
+            cy.selectOption(
+                `${createForm.prefix} > :nth-child(5) > :nth-child(3) `,
+                'Italia'
+            );
+            cy.get(
+                `${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix} > :nth-child(2) > .q-icon`
+            ).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();
+        });
+
+        it('Create province with country', () => {
+            const provinceName = 'Saskatchew'.concat(Math.random(1 * 100));
+            cy.get(createLocationButton).click();
+            cy.selectOption(
+                `${createForm.prefix} > :nth-child(5) > :nth-child(3) `,
+                'España'
+            );
+            cy.get(
+                `${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.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();
         });
 
         function checkVnLocation(postCode, province) {

test/cypress/support/commands.js

@@ -91,6 +91,11 @@ Cypress.Commands.add('selectOption', (selector, option) => {
     cy.get(selector).click();
     cy.get('.q-menu .q-item').contains(option).click();
 });
+Cypress.Commands.add('countSelectOptions', (selector, option) => {
+    cy.waitForElement(selector);
+    cy.get(selector).click();
+    cy.get('.q-menu .q-item').should('have.length', option);
+});
 
 Cypress.Commands.add('fillInForm', (obj, form = '.q-form > .q-card') => {
     cy.waitForElement('.q-form > .q-card');