wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

fix: #8016 fetching data

This commit is contained in:
Javier Segarra 2024-12-01 23:52:41 +01:00
parent b83c640760
commit 444f68e937
4 changed files with 79 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
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,9 +21,10 @@ 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([]);
@ -47,74 +48,79 @@ function onDataSaved(formData) {
emit('onDataSaved', newPostcode);
}
async function onCityCreated(newTown, formData) {
await provincesFetchDataRef.value.fetch();
newTown.province = findProvince(newTown.provinceFk);
formData.townFk = newTown;
setTown(newTown, formData);
}
function findProvince(provinceId) {
return provincesOptions.value.find(({ id }) => id === provinceId);
}
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;
await fetchTowns();
}
// Province
async function handleProvinces(data) {
provincesOptions.value = data;
// handleTowns(data);
}
async function handleTowns(data) {
townsOptions.value = data;
// whereTowns.value.provinceFk.inq = mapData(data);
// townsRef.value.opts = [];
}
async function setProvince(id, data) {
const newProvince = findProvince(id);
if (!newProvince) {
data.townFk = null;
return;
if (postcodeFormData.countryFk) {
await fetchTowns();
}
whereTowns.value.provinceFk.inq = [id];
// handleTowns([newProvince]);
data.countryFk = newProvince.countryFk;
}
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);
}
const whereTowns = ref({});
// const whereTowns = ref(() => {
// if (!postcodeFormData.provinceFk) return { provinceFk: { inq: null } };
// if (postcodeFormData.provinceFk)
// return {
// provinceFk: {
// inq: [postcodeFormData.provinceFk], //provincesOptions.value.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(
(province) => province.id === newTown.provinceFk
);
formData.townFk = newTown;
setTown(newTown, formData);
}
async function fetchTowns(countryFk = postcodeFormData.countryFk) {
if (!countryFk) return;
const provinces = postcodeFormData.provinceFk
? [postcodeFormData.provinceFk]
: provinceByCountry();
townFilter.value.where = {
provinceFk: {
inq: provinces,
},
};
await townsFetchDataRef.value?.fetch();
}
// return {
// provinceFk: {
// inq: mapData(provincesOptions.value),
// },
// };
// });
function mapData(data) {
if (data.length === 0) return data;
return data.map(({ id }) => id);
async function filterTowns(name) {
if (name !== '') {
townFilter.value.where = {
name: {
like: `%${name}%`,
},
};
await townsFetchDataRef.value?.fetch();
}
}
</script>
@ -128,12 +134,12 @@ function mapData(data) {
url="Provinces/location"
/>
<FetchData
ref="townsRef"
@on-fetch="handleTowns"
ref="townsFetchDataRef"
:sort-by="['name ASC']"
:limit="2"
:limit="30"
:filter="townFilter"
@on-fetch="handleTowns"
auto-load
:where="whereTowns"
url="Towns/location"
/>
@ -155,21 +161,23 @@ function mapData(data) {
:rules="validate('postcode.code')"
clearable
required
data-cy="locationPostcode"
/>
<VnSelectDialog
:label="t('City')"
@update:model-value="(value) => setTown(value, data)"
@filter="filterTowns"
:tooltip="t('Create city')"
v-model="data.townFk"
option-label="name"
:options="townsOptions"
option-label="name"
option-value="id"
@input-value="(evt) => (whereTowns.name = { like: `%${evt}%` })"
: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">
@ -200,7 +208,6 @@ function mapData(data) {
:province-selected="data.provinceFk"
@update:model-value="(value) => setProvince(value, data)"
v-model="data.provinceFk"
@on-province-fetched="handleProvinces"
@on-province-created="onProvinceCreated"
required
/>
@ -219,6 +226,7 @@ function mapData(data) {
v-model="data.countryFk"
:rules="validate('postcode.countryFk')"
@update:model-value="(value) => setCountry(value, data)"
data-cy="locationCountry"
/>
</VnRow>
</template>

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"

23
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', () => {
@ -124,17 +122,18 @@ describe('VnLocation', () => {
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`
`${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix} > :nth-child(2) `
).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('FormModelPopup_save').eq(1).click();
cy.dataCy('FormModelPopup_save').eq(0).click();
cy.waitForElement('.q-form');
checkVnLocation(postCode, province);
});
it('Create province without country', () => {
it.only('Create province without country', () => {
const provinceName = 'Saskatchew'.concat(Math.random(1 * 100));
cy.get(createLocationButton).click();
cy.get(
@ -146,7 +145,7 @@ describe('VnLocation', () => {
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();
cy.dataCy('FormModelPopup_save').eq(1).click();
});
it('Create city with country', () => {
@ -157,13 +156,13 @@ describe('VnLocation', () => {
'Italia'
);
cy.get(
`${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix} > :nth-child(2) > .q-icon`
`${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix} > :nth-child(2) `
).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();
cy.dataCy('FormModelPopup_save').eq(1).click();
});
it('Create province with country', () => {
@ -183,7 +182,7 @@ describe('VnLocation', () => {
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();
cy.dataCy('FormModelPopup_save').eq(1).click();
});
function checkVnLocation(postCode, province) {