#7202 added new field in InvoiceOut #773
|
@ -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"
|
||||
/>
|
||||
|
|
|
@ -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"
|
||||
/>
|
||||
|
|
|
@ -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')
|
||||
|
|
Loading…
Reference in New Issue