diff --git a/src/components/CreateNewCityForm.vue b/src/components/CreateNewCityForm.vue
index 9a7d8666c..85d13beb1 100644
--- a/src/components/CreateNewCityForm.vue
+++ b/src/components/CreateNewCityForm.vue
@@ -1,35 +1,42 @@
- (provincesOptions = data)"
- auto-load
- url="Provinces"
- />
{
-
+
diff --git a/src/components/CreateNewPostcodeForm.vue b/src/components/CreateNewPostcodeForm.vue
index dc8027989..396a7ebc8 100644
--- a/src/components/CreateNewPostcodeForm.vue
+++ b/src/components/CreateNewPostcodeForm.vue
@@ -63,17 +63,27 @@ function setTown(newTown, data) {
}
async function setProvince(id, data) {
- await provincesFetchDataRef.value.fetch();
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.value = data.id;
+}
+
watch(
() => [postcodeFormData.countryFk],
- async (newCountryFk) => {
- if (newCountryFk) {
+ async (newCountryFk, oldValueFk) => {
+ if (!!oldValueFk[0] && newCountryFk[0] !== oldValueFk[0]) {
+ postcodeFormData.provinceFk = null;
+ postcodeFormData.townFk = null;
+ }
+ if ((newCountryFk, newCountryFk !== postcodeFormData.countryFk)) {
await provincesFetchDataRef.value.fetch({
where: {
countryFk: newCountryFk[0],
@@ -93,7 +103,7 @@ watch(
watch(
() => postcodeFormData.provinceFk,
async (newProvinceFk) => {
- if (newProvinceFk) {
+ if (newProvinceFk[0] && newProvinceFk[0] !== postcodeFormData.provinceFk) {
await townsFetchDataRef.value.fetch({
where: { provinceFk: newProvinceFk[0] },
});
@@ -121,6 +131,7 @@ async function handleCountries(data) {
@@ -140,6 +151,7 @@ async function handleCountries(data) {
:label="t('Postcode')"
v-model="data.code"
:rules="validate('postcode.code')"
+ clearable
/>
@@ -166,6 +178,9 @@ async function handleCountries(data) {
onCityCreated(requestResponse, data)
@@ -176,9 +191,13 @@ async function handleCountries(data) {
setProvince(value, data)"
v-model="data.provinceFk"
+ :clearable="true"
+ :provinces="provincesOptions"
+ @on-province-created="onProvinceCreated"
/>
[],
+ },
+});
const autonomiesOptions = ref([]);
const onDataSaved = (dataSaved, requestResponse) => {
@@ -31,6 +40,11 @@ const onDataSaved = (dataSaved, requestResponse) => {
(autonomiesOptions = data)"
auto-load
+ :filter="{
+ where: {
+ countryFk: $props.countryFk,
+ },
+ }"
url="Autonomies/location"
/>
await provincesFetchDataRef.value.fetch());
const $props = defineProps({
countryFk: {
type: Number,
default: null,
},
+ provinceSelected: {
+ type: Number,
+ default: null,
+ },
+ provinces: {
+ type: Array,
+ default: () => [],
+ },
});
+const provinceFk = defineModel({ type: Number, default: null });
+
const { validate } = useValidator();
const { t } = useI18n();
-const provincesOptions = ref();
+const provincesOptions = ref($props.provinces);
+provinceFk.value = $props.provinceSelected;
const provincesFetchDataRef = ref();
async function onProvinceCreated(_, data) {
@@ -27,16 +36,6 @@ async function onProvinceCreated(_, data) {
provinceFk.value = data.id;
emit('onProvinceCreated', data);
}
-watch(
- () => $props.countryFk,
- async (newProvinceFk) => {
- if (newProvinceFk) {
- await provincesFetchDataRef.value.fetch({
- where: { countryFk: newProvinceFk },
- });
- }
- }
-);
async function handleProvinces(data) {
provincesOptions.value = data;
}
@@ -45,14 +44,18 @@ async function handleProvinces(data) {
-
+
diff --git a/test/cypress/integration/vnComponent/vnLocation.spec.js b/test/cypress/integration/vnComponent/vnLocation.spec.js
index 88919e41c..78dc38899 100644
--- a/test/cypress/integration/vnComponent/vnLocation.spec.js
+++ b/test/cypress/integration/vnComponent/vnLocation.spec.js
@@ -48,6 +48,25 @@ describe('VnLocation', () => {
`${createForm.prefix} > :nth-child(4) > .q-field:nth-child(3)> ${createForm.sufix}`
).should('have.length', 1);
});
+ it('should pass selected country', () => {
+ // Select a country
+ const country = 'Ecuador';
+ const province = 'Province five';
+ cy.selectOption(
+ `${createForm.prefix} > :nth-child(5) > .q-field:nth-child(5)> ${createForm.sufix}`,
+ country
+ );
+ cy.selectOption(
+ `${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix}`,
+ province
+ );
+ cy.get(
+ `${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix} > :nth-child(3) > .q-icon`
+ ).click();
+ cy.get(
+ `#q-portal--dialog--4 > .q-dialog > ${createForm.prefix} > .vn-row > .q-select > ${createForm.sufix} > :nth-child(1) input`
+ ).should('have.value', province);
+ });
});
describe('Worker Create', () => {
beforeEach(() => {