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

Merge branch 'dev' into 8018_location_label
gitea/salix-front/pipeline/pr-dev This commit looks good Details

This commit is contained in:
Javier Segarra 2024-09-30 10:53:33 +00:00
parent fd202f30d2 9d7db2020b
commit cf509d608a
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,
},
});
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 },
});
}
}
);
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')