diff --git a/src/components/CreateNewCityForm.vue b/src/components/CreateNewCityForm.vue index e51a18ef8..bf3830522 100644 --- a/src/components/CreateNewCityForm.vue +++ b/src/components/CreateNewCityForm.vue @@ -40,6 +40,7 @@ const onDataSaved = (...args) => { url-create="towns" model="city" @on-data-saved="onDataSaved" + data-cy="newCityForm" > diff --git a/src/components/CreateNewPostcodeForm.vue b/src/components/CreateNewPostcodeForm.vue index 907e49499..d3d6708f0 100644 --- a/src/components/CreateNewPostcodeForm.vue +++ b/src/components/CreateNewPostcodeForm.vue @@ -21,15 +21,14 @@ const postcodeFormData = reactive({ provinceFk: null, townFk: null, }); - const townsFetchDataRef = ref(false); -const countriesFetchDataRef = ref(false); +const townFilter = ref({}); + +const countriesRef = ref(false); const provincesFetchDataRef = ref(false); -const countriesOptions = ref([]); const provincesOptions = ref([]); const townsOptions = ref([]); const town = ref({}); -const townFilter = ref({}); const countryFilter = ref({}); function onDataSaved(formData) { @@ -42,13 +41,56 @@ function onDataSaved(formData) { ({ id }) => id === formData.provinceFk ); newPostcode.province = provinceObject?.name; - const countryObject = countriesOptions.value.find( + const countryObject = countriesRef.value.opts.find( ({ id }) => id === formData.countryFk ); newPostcode.country = countryObject?.name; emit('onDataSaved', newPostcode); } +async function setCountry(countryFk, data) { + data.townFk = null; + data.provinceFk = null; + data.countryFk = countryFk; + await fetchTowns(); +} + +// Province + +async function handleProvinces(data) { + provincesOptions.value = data; + if (postcodeFormData.countryFk) { + await fetchTowns(); + } +} +async function setProvince(id, data) { + if (data.provinceFk === id) return; + const newProvince = provincesOptions.value.find((province) => province.id == id); + if (newProvince) data.countryFk = newProvince.countryFk; + postcodeFormData.provinceFk = id; + await fetchTowns(); +} +async function onProvinceCreated(data) { + await provincesFetchDataRef.value.fetch({ + where: { countryFk: postcodeFormData.countryFk }, + }); + postcodeFormData.provinceFk = data.id; +} +function provinceByCountry(countryFk = postcodeFormData.countryFk) { + return provincesOptions.value + .filter((province) => province.countryFk === countryFk) + .map(({ id }) => id); +} + +// Town +async function handleTowns(data) { + townsOptions.value = data; +} +function setTown(newTown, data) { + town.value = newTown; + data.provinceFk = newTown?.provinceFk ?? newTown; + data.countryFk = newTown?.province?.countryFk ?? newTown; +} async function onCityCreated(newTown, formData) { await provincesFetchDataRef.value.fetch(); newTown.province = provincesOptions.value.find( @@ -57,17 +99,17 @@ async function onCityCreated(newTown, formData) { formData.townFk = newTown; setTown(newTown, formData); } - -function setTown(newTown, data) { - town.value = newTown; - data.provinceFk = newTown?.provinceFk ?? newTown; - data.countryFk = newTown?.province?.countryFk ?? newTown; -} - -async function setCountry(countryFk, data) { - data.townFk = null; - data.provinceFk = null; - data.countryFk = countryFk; +async function fetchTowns(countryFk = postcodeFormData.countryFk) { + if (!countryFk) return; + const provinces = postcodeFormData.provinceFk + ? [postcodeFormData.provinceFk] + : provinceByCountry(); + townFilter.value.where = { + provinceFk: { + inq: provinces, + }, + }; + await townsFetchDataRef.value?.fetch(); } async function filterTowns(name) { @@ -80,54 +122,6 @@ async function filterTowns(name) { await townsFetchDataRef.value?.fetch(); } } -async function filterCountries(name) { - if (name !== '') { - countryFilter.value.where = { - name: { - like: `%${name}%`, - }, - }; - await countriesFetchDataRef.value?.fetch(); - } -} - -async function fetchTowns(countryFk) { - if (!countryFk) return; - townFilter.value.where = { - provinceFk: { - inq: provincesOptions.value.map(({ id }) => id), - }, - }; - await townsFetchDataRef.value?.fetch(); -} - -async function handleProvinces(data) { - provincesOptions.value = data; - if (postcodeFormData.countryFk) { - await fetchTowns(postcodeFormData.countryFk); - } -} -async function handleTowns(data) { - townsOptions.value = data; -} - -async function handleCountries(data) { - countriesOptions.value = data; -} - -async function setProvince(id, data) { - 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 = data.id; -}