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

feat: #7679 show country provinces
gitea/salix-front/pipeline/pr-dev This commit looks good Details

This commit is contained in:
Javier Segarra 2024-10-01 00:24:34 +02:00
parent e7a2d3aa85
commit 41acf0e1e2
5 changed files with 108 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/CreateNewCityForm.vue
View File

@ -1,35 +1,42 @@
<script setup>
import { reactive, ref } from 'vue';
import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelectProvince from 'components/VnSelectProvince.vue';
import VnInput from 'components/common/VnInput.vue';
import FormModelPopup from './FormModelPopup.vue';
const emit = defineEmits(['onDataSaved']);
const $props = defineProps({
countryFk: {
type: Number,
default: null,
},
provinceSelected: {
type: Number,
default: null,
},
provinces: {
type: Array,
default: () => [],
},
});
const { t } = useI18n();
const cityFormData = reactive({
const cityFormData = ref({
name: null,
provinceFk: null,
});
const provincesOptions = ref([]);
onMounted(() => {
cityFormData.value.provinceFk = $props.provinceSelected;
});
const onDataSaved = (...args) => {
emit('onDataSaved', ...args);
};
</script>
<template>
<FetchData
@on-fetch="(data) => (provincesOptions = data)"
auto-load
url="Provinces"
/>
<FormModelPopup
:title="t('New city')"
:subtitle="t('Please, ensure you put the correct data!')"
@ -41,11 +48,16 @@ const onDataSaved = (...args) => {
<template #form-inputs="{ data, validate }">
<VnRow>
<VnInput
:label="t('Name')"
:label="t('Names')"
v-model="data.name"
:rules="validate('city.name')"
/>
<VnSelectProvince v-model="data.provinceFk" />
<VnSelectProvince
:province-selected="$props.provinceSelected"
:country-fk="$props.countryFk"
v-model="data.provinceFk"
:provinces="$props.provinces"
/>
</VnRow>
</template>
</FormModelPopup>

31
src/components/CreateNewPostcodeForm.vue
View File

@ -63,17 +63,27 @@ function setTown(newTown, data) {
}
async function setProvince(id, data) {
await provincesFetchDataRef.value.fetch();
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.value = data.id;
}
watch(
() => [postcodeFormData.countryFk],
async (newCountryFk) => {
if (newCountryFk) {
async (newCountryFk, oldValueFk) => {
if (!!oldValueFk[0] && newCountryFk[0] !== oldValueFk[0]) {
postcodeFormData.provinceFk = null;
postcodeFormData.townFk = null;
}
if ((newCountryFk, newCountryFk !== postcodeFormData.countryFk)) {
await provincesFetchDataRef.value.fetch({
where: {
countryFk: newCountryFk[0],
@ -93,7 +103,7 @@ watch(
watch(
() => postcodeFormData.provinceFk,
async (newProvinceFk) => {
if (newProvinceFk) {
if (newProvinceFk[0] && newProvinceFk[0] !== postcodeFormData.provinceFk) {
await townsFetchDataRef.value.fetch({
where: { provinceFk: newProvinceFk[0] },
});
@ -121,6 +131,7 @@ async function handleCountries(data) {
<FetchData
ref="townsFetchDataRef"
@on-fetch="handleTowns"
:limit="30"
auto-load
url="Towns/location"
/>
@ -140,6 +151,7 @@ async function handleCountries(data) {
:label="t('Postcode')"
v-model="data.code"
:rules="validate('postcode.code')"
clearable
/>
<VnSelectDialog
:label="t('City')"
@ -151,7 +163,7 @@ async function handleCountries(data) {
:rules="validate('postcode.city')"
:acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
:emit-value="false"
clearable
:clearable="true"
>
<template #option="{ itemProps, opt }">
<QItem v-bind="itemProps">
@ -166,6 +178,9 @@ async function handleCountries(data) {
</template>
<template #form>
<CreateNewCityForm
:country-fk="data.countryFk"
:province-selected="data.provinceFk"
:provinces="provincesOptions"
@on-data-saved="
(_, requestResponse) =>
onCityCreated(requestResponse, data)
@ -176,9 +191,13 @@ async function handleCountries(data) {
</VnRow>
<VnRow>
<VnSelectProvince
:country-fk="postcodeFormData.countryFk"
:country-fk="data.countryFk"
:province-selected="data.provinceFk"
@update:model-value="(value) => setProvince(value, data)"
v-model="data.provinceFk"
:clearable="true"
:provinces="provincesOptions"
@on-province-created="onProvinceCreated"
/>
<VnSelect
:label="t('Country')"

16
src/components/CreateNewProvinceForm.vue
View File

@ -16,7 +16,16 @@ const provinceFormData = reactive({
name: null,
autonomyFk: null,
});
const $props = defineProps({
countryFk: {
type: Number,
default: null,
},
provinces: {
type: Array,
default: () => [],
},
});
const autonomiesOptions = ref([]);
const onDataSaved = (dataSaved, requestResponse) => {
@ -31,6 +40,11 @@ const onDataSaved = (dataSaved, requestResponse) => {
<FetchData
@on-fetch="(data) => (autonomiesOptions = data)"
auto-load
:filter="{
where: {
countryFk: $props.countryFk,
},
}"
url="Autonomies/location"
/>
<FormModelPopup

40
src/components/VnSelectProvince.vue
View File

@ -8,18 +8,27 @@ import FetchData from 'components/FetchData.vue';
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,
},
provinceSelected: {
type: Number,
default: null,
},
provinces: {
type: Array,
default: () => [],
},
});
const provinceFk = defineModel({ type: Number, default: null });
const { validate } = useValidator();
const { t } = useI18n();
const provincesOptions = ref();
const provincesOptions = ref($props.provinces);
provinceFk.value = $props.provinceSelected;
const provincesFetchDataRef = ref();
async function onProvinceCreated(_, data) {
@ -27,16 +36,6 @@ async function onProvinceCreated(_, data) {
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;
}
@ -45,14 +44,18 @@ async function handleProvinces(data) {
<template>
<FetchData
ref="provincesFetchDataRef"
:filter="{ include: { relation: 'country' } }"
:filter="{
include: { relation: 'country' },
where: {
countryFk: $props.countryFk,
},
}"
@on-fetch="handleProvinces"
auto-load
url="Provinces"
/>
<VnSelectDialog
:label="t('Province')"
:options="provincesOptions"
:options="$props.provinces"
hide-selected
v-model="provinceFk"
:rules="validate && validate('postcode.provinceFk')"
@ -67,7 +70,10 @@ async function handleProvinces(data) {
</QItem>
</template>
<template #form>
<CreateNewProvinceForm @on-data-saved="onProvinceCreated" />
<CreateNewProvinceForm
:country-fk="$props.countryFk"
@on-data-saved="onProvinceCreated"
/>
</template>
</VnSelectDialog>
</template>

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

@ -48,6 +48,25 @@ describe('VnLocation', () => {
`${createForm.prefix} > :nth-child(4) > .q-field:nth-child(3)> ${createForm.sufix}`
).should('have.length', 1);
});
it('should pass selected country', () => {
// Select a country
const country = 'Ecuador';
const province = 'Province five';
cy.selectOption(
`${createForm.prefix} > :nth-child(5) > .q-field:nth-child(5)> ${createForm.sufix}`,
country
);
cy.selectOption(
`${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix}`,
province
);
cy.get(
`${createForm.prefix} > :nth-child(4) > .q-select > ${createForm.sufix} > :nth-child(3) > .q-icon`
).click();
cy.get(
`#q-portal--dialog--4 > .q-dialog > ${createForm.prefix} > .vn-row > .q-select > ${createForm.sufix} > :nth-child(1) input`
).should('have.value', province);
});
});
describe('Worker Create', () => {
beforeEach(() => {