0
0
Fork 0

feat: refs #8061 #8061 updates

This commit is contained in:
Javier Segarra 2024-11-15 10:28:42 +01:00
parent 7626c777ed
commit 703aaa1f38
4 changed files with 60 additions and 39 deletions

View File

@ -17,10 +17,6 @@ const $props = defineProps({
type: Number,
default: null,
},
provinces: {
type: Array,
default: () => [],
},
});
const { t } = useI18n();
@ -56,7 +52,6 @@ const onDataSaved = (...args) => {
:province-selected="$props.provinceSelected"
:country-fk="$props.countryFk"
v-model="data.provinceFk"
:provinces="$props.provinces"
/>
</VnRow>
</template>

View File

@ -90,22 +90,33 @@ watch(
postcodeFormData.townFk = null;
}
if (oldValueFk !== newCountryFk) {
await provincesFetchDataRef.value.fetch({
where: {
countryFk: newCountryFk,
},
});
await townsFetchDataRef.value.fetch({
await fetchProvinces(newCountryFk);
await fetchTowns(newCountryFk);
}
}
);
async function fetchTowns(countryFk) {
const townsFilter = countryFk
? {
where: {
provinceFk: {
inq: provincesOptions.value.map(({ id }) => id),
},
},
});
}
: {};
await townsFetchDataRef.value.fetch(townsFilter);
}
async function fetchProvinces(countryFk) {
const provincesFilter = countryFk
? {
where: {
countryFk: countryFk,
},
}
: {};
await provincesFetchDataRef.value.fetch(provincesFilter);
}
);
watch(
() => postcodeFormData.provinceFk,
async (newProvinceFk, oldValueFk) => {
@ -193,7 +204,6 @@ async function handleCountries(data) {
<CreateNewCityForm
:country-fk="data.countryFk"
:province-selected="data.provinceFk"
:provinces="provincesOptions"
@on-data-saved="
(_, requestResponse) =>
onCityCreated(requestResponse, data)
@ -209,7 +219,6 @@ async function handleCountries(data) {
@update:model-value="(value) => setProvince(value, data)"
v-model="data.provinceFk"
:clearable="true"
:provinces="provincesOptions"
@on-province-created="onProvinceCreated"
/>
<VnSelect

View File

@ -1,5 +1,5 @@
<script setup>
import { reactive, ref } from 'vue';
import { computed, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
@ -34,6 +34,12 @@ const onDataSaved = (dataSaved, requestResponse) => {
);
emit('onDataSaved', dataSaved, requestResponse);
};
const where = computed(() => {
if (!$props.countryFk) {
return {};
}
return { countryFk: $props.countryFk };
});
</script>
<template>
@ -41,9 +47,7 @@ const onDataSaved = (dataSaved, requestResponse) => {
@on-fetch="(data) => (autonomiesOptions = data)"
auto-load
:filter="{
where: {
countryFk: $props.countryFk,
},
where,
}"
url="Autonomies/location"
:sort-by="['name ASC']"

View File

@ -1,5 +1,5 @@
<script setup>
import { ref } from 'vue';
import { ref, watch } from 'vue';
import { useValidator } from 'src/composables/useValidator';
import { useI18n } from 'vue-i18n';
@ -17,47 +17,60 @@ const $props = defineProps({
type: Number,
default: null,
},
provinces: {
type: Array,
default: () => [],
},
});
const provinceFk = defineModel({ type: Number, default: null });
const { validate } = useValidator();
const { t } = useI18n();
const filter = ref({
include: { relation: 'country' },
where: {
countryFk: $props.countryFk,
},
});
const provincesOptions = ref($props.provinces);
provinceFk.value = $props.provinceSelected;
const provincesFetchDataRef = ref();
provinceFk.value = $props.provinceSelected;
if (!$props.countryFk) {
filter.value.where = {};
}
async function onProvinceCreated(_, data) {
await provincesFetchDataRef.value.fetch({ where: { countryFk: $props.countryFk } });
provinceFk.value = data.id;
emit('onProvinceCreated', data);
}
async function handleProvinces(data) {
console.error($props.countryFk);
provincesOptions.value = data;
}
watch(
() => $props.countryFk,
async () => {
if ($props.countryFk) {
filter.value.where.countryFk = $props.countryFk;
} else filter.value.where = {};
await provincesFetchDataRef.value.fetch({});
}
);
</script>
<template>
<FetchData
ref="provincesFetchDataRef"
:filter="{
include: { relation: 'country' },
where: {
countryFk: $props.countryFk,
},
}"
:filter="filter"
@on-fetch="handleProvinces"
url="Provinces"
auto-load
/>
{{ $props.countryFk }}
<VnSelectDialog
:label="t('Province')"
:options="$props.provinces"
:options="provincesOptions"
:tooltip="t('Create province')"
hide-selected
:limit="3"
v-model="provinceFk"
:rules="validate && validate('postcode.provinceFk')"
:acls="[{ model: 'Province', props: '*', accessType: 'WRITE' }]"