diff --git a/src/components/CreateNewCityForm.vue b/src/components/CreateNewCityForm.vue index 85d13beb1..4b1e12fb0 100644 --- a/src/components/CreateNewCityForm.vue +++ b/src/components/CreateNewCityForm.vue @@ -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" /> diff --git a/src/components/CreateNewPostcodeForm.vue b/src/components/CreateNewPostcodeForm.vue index 03cba8ac7..44338f186 100644 --- a/src/components/CreateNewPostcodeForm.vue +++ b/src/components/CreateNewPostcodeForm.vue @@ -56,10 +56,10 @@ async function onCityCreated(newTown, formData) { } function setTown(newTown, data) { - if (!newTown) return; - town.value = newTown; data.provinceFk = newTown.provinceFk; data.countryFk = newTown.province.countryFk; + if (!newTown) return; + town.value = newTown; } async function setProvince(id, data) { @@ -73,7 +73,7 @@ async function onProvinceCreated(data) { await provincesFetchDataRef.value.fetch({ where: { countryFk: postcodeFormData.countryFk }, }); - postcodeFormData.provinceFk.value = data.id; + postcodeFormData.provinceFk = data.id; } watch( @@ -90,22 +90,33 @@ watch( postcodeFormData.townFk = null; } if (oldValueFk !== newCountryFk) { - await provincesFetchDataRef.value.fetch({ - where: { - countryFk: newCountryFk, - }, - }); - await townsFetchDataRef.value.fetch({ - where: { - provinceFk: { - inq: provincesOptions.value.map(({ id }) => id), - }, - }, - }); + 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) => { @@ -147,6 +158,13 @@ async function handleCountries(data) { auto-load url="Towns/location" /> + setProvince(value, data)" v-model="data.provinceFk" :clearable="true" - :provinces="provincesOptions" @on-province-created="onProvinceCreated" /> -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 }; +});