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..6f7d8a24e 100644 --- a/src/components/CreateNewPostcodeForm.vue +++ b/src/components/CreateNewPostcodeForm.vue @@ -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) => { @@ -193,7 +204,6 @@ async function handleCountries(data) { 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 }; +});