verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 69 Releases Wiki Activity

Merge pull request 'fix_city_from_province' (!1032) from fix_city_from_province into dev
gitea/salix-front/pipeline/head This commit looks good Details 

Reviewed-on: #1032
Reviewed-by: Jon Elias <jon@verdnatura.es>
This commit is contained in:
Javier Segarra 2024-12-02 08:50:08 +00:00
parent 4480b58551 ff344c24d8
commit bd95f8877f
7 changed files with 117 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/CreateNewCityForm.vue
View File

@ -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>

128
src/components/CreateNewPostcodeForm.vue
View File

@ -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);
}
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;
}
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 {
async function fetchTowns(countryFk = postcodeFormData.countryFk) {
if (!countryFk) return;
const provinces = postcodeFormData.provinceFk
? [postcodeFormData.provinceFk]
: provinceByCountry();
townFilter.value.where = {
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>

2
src/components/CreateNewProvinceForm.vue
View File

@ -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

2
src/components/VnSelectProvince.vue
View File

@ -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' }]"

1
src/components/common/VnLocation.vue
View File

@ -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"

1
src/components/common/VnSelectDialog.vue
View File

@ -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'"

71
test/cypress/integration/vnComponent/VnLocation.spec.js
View File

@ -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(
`#q-portal--dialog--5 > .q-dialog > ${createForm.prefix} > .vn-row > .q-select > ${createForm.sufix} > :nth-child(1) input`
).should('have.value', province);
cy.dataCy('locationProvince').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(
`${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-btn--standard').click();
cy.get('#q-portal--dialog--1 .q-btn--standard').click();
cy.dataCy('City_icon').click();
cy.selectOption('[data-cy="locationProvince"]:last', 'Province one');
cy.dataCy('cityName').type(province);
cy.dataCy('FormModelPopup_save').eq(1).click();
cy.dataCy('FormModelPopup_save').eq(0).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(
`${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.dataCy('City_icon').click();
cy.selectOption('[data-cy="locationProvince"]:last', 'Province four');
cy.countSelectOptions('[data-cy="locationProvince"]:last', 1);
cy.get('#q-portal--dialog--4 .q-input').type(cityName);
cy.get('#q-portal--dialog--4 .q-btn--standard').click();
cy.dataCy('cityName').type(cityName);
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(
`${createForm.prefix} > :nth-child(5) > .q-select > ${createForm.sufix} > :nth-child(2) `
)
.eq(0)
.click();
cy.dataCy('Province_icon').click();
cy.selectOption('#q-portal--dialog--4 .q-select', 'one');
cy.countSelectOptions('#q-portal--dialog--4 .q-select', 2);
cy.selectOption('[data-cy="autonomyProvince"] ', 'Autonomy one');
cy.countSelectOptions('[data-cy="autonomyProvince"]', 2);
cy.get('#q-portal--dialog--4 .q-input').type(provinceName);
cy.get('#q-portal--dialog--4 .q-btn--standard').click();
cy.dataCy('provinceName').type(provinceName);
cy.dataCy('FormModelPopup_save').eq(1).click();
});
function checkVnLocation(postCode, province) {