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"
                 />
             </VnRow>
         </template>

src/components/CreateNewPostcodeForm.vue

@@ -90,22 +90,33 @@ watch(
             postcodeFormData.townFk = null;
         }
         if (oldValueFk !== newCountryFk) {
-            await provincesFetchDataRef.value.fetch({
+            await fetchProvinces(newCountryFk);
-                where: {
+            await fetchTowns(newCountryFk);
-                    countryFk: newCountryFk,
+        }
-                },
+    }
-            });
+);
-            await townsFetchDataRef.value.fetch({
+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

src/components/CreateNewProvinceForm.vue

@@ -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: {
+            where,
-                countryFk: $props.countryFk,
-            },
         }"
         url="Autonomies/location"
         :sort-by="['name ASC']"

src/components/VnSelectProvince.vue

@@ -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="{
+        :filter="filter"
-            include: { relation: 'country' },
-            where: {
-                countryFk: $props.countryFk,
-            },
-        }"
         @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' }]"