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

#7679 Filter data from others filters #769

Merged
jsegarra merged 4 commits from 7679_improve_filters into dev 2024-09-30 07:19:31 +00:00
Conversation 0 Commits 4 Files Changed 3 +124 -19
3 changed files with 124 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/CreateNewPostcodeForm.vue
View File

@ -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,62 @@ async function setProvince(id, data) {
data.countryFk = newProvince.countryFk;
}
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 +143,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 +176,7 @@ async function setProvince(id, data) {
</VnRow>
<VnRow>
<VnSelectProvince
:country-fk="postcodeFormData.countryFk"
@update:model-value="(value) => setProvince(value, data)"
v-model="data.provinceFk"
/>

24
src/components/VnSelectProvince.vue
View File

@ -10,7 +10,12 @@ 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,
default: null,
jsegarra marked this conversation as resolved
jgallego commented 2024-09-27 06:36:09 +00:00
Review
Copy Link

esta linea es necesaria?

esta linea es necesaria?
jsegarra commented 2024-09-27 08:36:07 +00:00
Review
Copy Link

Esta prop es necesaria para que cuando se modifique el pais se actualicen las provincias

Esta prop es necesaria para que cuando se modifique el pais se actualicen las provincias
},
});
const { validate } = useValidator();
const { t } = useI18n();
@ -18,17 +23,30 @@ 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) {
await provincesFetchDataRef.value.fetch({
where: { countryFk: newProvinceFk },
jsegarra marked this conversation as resolved
jgallego commented 2024-09-27 06:36:22 +00:00
Review
Copy Link

es necesario el comentario?

es necesario el comentario?
jsegarra commented 2024-09-27 08:08:46 +00:00
Review
Copy Link

No, no es necesario

No, no es necesario
});
}
}
);
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"
/>

64
test/cypress/integration/vnComponent/vnLocation.spec.js
View File

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