Improve autocompletion

src/components/CreateNewCityForm.vue

@@ -19,8 +19,8 @@ const cityFormData = reactive({
 
 const provincesOptions = ref([]);
 
-const onDataSaved = () => {
-    emit('onDataSaved');
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
 };
 </script>
 

src/components/CreateNewPostcodeForm.vue

@@ -32,12 +32,20 @@ const onDataSaved = (dataSaved) => {
     emit('onDataSaved', dataSaved);
 };
 
-const onCityCreated = async () => {
+const onCityCreated = async ({ name, provinceFk }, formData) => {
     await townsFetchDataRef.value.fetch();
+    formData.townFk = townsLocationOptions.value.find((town) => town.name === name).id;
+    formData.provinceFk = provinceFk;
+    formData.countryFk = provincesOptions.value.find(
+        (province) => province.id === provinceFk
+    ).countryFk;
 };
 
-const onProvinceCreated = async () => {
+const onProvinceCreated = async ({ name }, formData) => {
     await provincesFetchDataRef.value.fetch();
+    formData.provinceFk = provincesOptions.value.find(
+        (province) => province.name === name
+    ).id;
 };
 </script>
 
@@ -88,7 +96,9 @@ const onProvinceCreated = async () => {
                         :roles-allowed-to-create="['deliveryAssistant']"
                     >
                         <template #form>
-                            <CreateNewCityForm @on-data-saved="onCityCreated($event)" />
+                            <CreateNewCityForm
+                                @on-data-saved="onCityCreated($event, data)"
+                            />
                         </template>
                     </VnSelectCreate>
                 </div>
@@ -107,7 +117,7 @@ const onProvinceCreated = async () => {
                     >
                         <template #form>
                             <CreateNewProvinceForm
-                                @on-data-saved="onProvinceCreated($event)"
+                                @on-data-saved="onProvinceCreated($event, data)"
                             />
                         </template>
                     </VnSelectCreate>

src/components/CreateNewProvinceForm.vue

@@ -19,8 +19,8 @@ const provinceFormData = reactive({
 
 const autonomiesOptions = ref([]);
 
-const onDataSaved = () => {
-    emit('onDataSaved');
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
 };
 </script>
 

src/pages/Customer/Card/CustomerFiscalData.vue

@@ -14,16 +14,18 @@ import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
 const { t } = useI18n();
 const route = useRoute();
 
+const townsFetchDataRef = ref(null);
+const postcodeFetchDataRef = ref(null);
 const typesTaxes = ref([]);
 const typesTransactions = ref([]);
-const postcodeFetchDataRef = ref(null);
 const citiesLocationOptions = ref([]);
 const provincesLocationOptions = ref([]);
 const countriesOptions = ref([]);
 const postcodesOptions = ref([]);
 
 const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formData) => {
-    postcodeFetchDataRef.value.fetch();
+    await postcodeFetchDataRef.value.fetch();
+    await townsFetchDataRef.value.fetch();
     formData.postcode = code;
     formData.provinceFk = provinceFk;
     formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
@@ -39,6 +41,7 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
         url="SageTransactionTypes"
     />
     <FetchData
+        ref="townsFetchDataRef"
         @on-fetch="(data) => (citiesLocationOptions = data)"
         auto-load
         url="Towns/location"

src/pages/Customer/CustomerCreate.vue

@@ -30,6 +30,7 @@ const newClientForm = reactive({
 });
 
 const postcodeFetchDataRef = ref(null);
+const townsFetchDataRef = ref(null);
 const workersOptions = ref([]);
 const businessTypesOptions = ref([]);
 const citiesLocationOptions = ref([]);
@@ -38,7 +39,8 @@ const countriesOptions = ref([]);
 const postcodesOptions = ref([]);
 
 const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formData) => {
-    postcodeFetchDataRef.value.fetch();
+    await postcodeFetchDataRef.value.fetch();
+    await townsFetchDataRef.value.fetch();
     formData.postcode = code;
     formData.provinceFk = provinceFk;
     formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
@@ -64,6 +66,7 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
         url="BusinessTypes"
     />
     <FetchData
+        ref="townsFetchDataRef"
         @on-fetch="(data) => (citiesLocationOptions = data)"
         auto-load
         url="Towns/location"

src/pages/Supplier/Card/SupplierFiscalData.vue

@@ -15,6 +15,7 @@ const route = useRoute();
 const { t } = useI18n();
 
 const postcodeFetchDataRef = ref(null);
+const townsFetchDataRef = ref(null);
 const sageTaxTypesOptions = ref([]);
 const sageWithholdingsOptions = ref([]);
 const sageTransactionTypesOptions = ref([]);
@@ -25,8 +26,9 @@ const townsLocationOptions = ref([]);
 const countriesOptions = ref([]);
 
 const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formData) => {
-    postcodeFetchDataRef.value.fetch();
-    formData.postcode = code;
+    await postcodeFetchDataRef.value.fetch();
+    await townsFetchDataRef.value.fetch();
+    formData.postCode = code;
     formData.provinceFk = provinceFk;
     formData.city = townsLocationOptions.value.find((town) => town.id === townFk).name;
     formData.countryFk = countryFk;
@@ -60,6 +62,7 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
         auto-load
     />
     <FetchData
+        ref="townsFetchDataRef"
         @on-fetch="(data) => (townsLocationOptions = data)"
         auto-load
         url="Towns/location"
@@ -171,14 +174,13 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
                 </div>
                 <div class="col">
                     <VnSelectCreate
-                        v-model="data.postCode"
                         :label="t('supplier.fiscalData.postcode')"
+                        v-model="data.postCode"
+                        :options="postcodesOptions"
                         :rules="validate('supplier.postCode')"
                         :roles-allowed-to-create="['deliveryAssistant']"
-                        :options="postcodesOptions"
                         option-label="code"
                         option-value="code"
-                        map-options
                         hide-selected
                     >
                         <template #form>
@@ -286,6 +288,7 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
                     </div>
                 </div>
             </VnRow>
+            <pre> {{ data }}</pre>
         </template>
     </FormModel>
 </template>

src/pages/Worker/WorkerCreate.vue

@@ -50,6 +50,7 @@ const newWorkerForm = ref({
 });
 
 const postcodeFetchDataRef = ref(null);
+const townsFetchDataRef = ref(null);
 const provincesOptions = ref([]);
 const townsOptions = ref([]);
 const companiesOptions = ref([]);
@@ -67,7 +68,8 @@ const onBankEntityCreated = (data) => {
 };
 
 const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
-    postcodeFetchDataRef.value.fetch();
+    await postcodeFetchDataRef.value.fetch();
+    await townsFetchDataRef.value.fetch();
     formData.postcode = code;
     formData.provinceFk = provinceFk;
     formData.city = townsOptions.value.find((town) => town.id === townFk).name;
@@ -99,6 +101,7 @@ onMounted(async () => {
         auto-load
     />
     <FetchData
+        ref="townsFetchDataRef"
         url="Towns/location"
         @on-fetch="(data) => (townsOptions = data)"
         :filter="townsFilter"