Autocomplete postcodes

src/components/CreateNewPostcodeForm.vue

@@ -28,8 +28,8 @@ const countriesOptions = ref([]);
 const provincesOptions = ref([]);
 const townsLocationOptions = ref([]);
 
-const onDataSaved = () => {
+const onDataSaved = (dataSaved) => {
-    emit('onDataSaved');
+    emit('onDataSaved', dataSaved);
 };
 
 const onCityCreated = async () => {

src/components/FormModelPopup.vue

@@ -42,8 +42,8 @@ const { t } = useI18n();
 const closeButton = ref(null);
 const isLoading = ref(false);
 
-const onDataSaved = () => {
+const onDataSaved = (dataSaved) => {
-    emit('onDataSaved');
+    emit('onDataSaved', dataSaved);
     closeForm();
 };
 
@@ -59,7 +59,7 @@ const closeForm = () => {
         :default-actions="false"
         :url-create="urlCreate"
         :model="model"
-        @on-data-saved="onDataSaved()"
+        @on-data-saved="onDataSaved($event)"
     >
         <template #form="{ data, validate }">
             <span ref="closeButton" class="close-icon" v-close-popup>

src/pages/Customer/Card/CustomerFiscalData.vue

@@ -22,8 +22,12 @@ const provincesLocationOptions = ref([]);
 const countriesOptions = ref([]);
 const postcodesOptions = ref([]);
 
-const onPostcodeCreated = async () => {
+const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formData) => {
     postcodeFetchDataRef.value.fetch();
+    formData.postcode = code;
+    formData.provinceFk = provinceFk;
+    formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
+    formData.countryFk = countryFk;
 };
 </script>
 
@@ -49,7 +53,12 @@ const onPostcodeCreated = async () => {
         auto-load
         url="Countries"
     />
-
+    <FetchData
+        ref="postcodeFetchDataRef"
+        url="Postcodes/location"
+        @on-fetch="(data) => (postcodesOptions = data)"
+        auto-load
+    />
     <FormModel
         :url-update="`Clients/${route.params.id}/updateFiscalData`"
         :url="`Clients/${route.params.id}/getCard`"
@@ -114,7 +123,7 @@ const onPostcodeCreated = async () => {
                     >
                         <template #form>
                             <CustomerCreateNewPostcode
-                                @on-data-saved="onPostcodeCreated($event)"
+                                @on-data-saved="onPostcodeCreated($event, data)"
                             />
                         </template>
                         <template #option="scope">
@@ -136,7 +145,6 @@ const onPostcodeCreated = async () => {
                     </VnSelectCreate>
                 </div>
                 <div class="col">
-                    <!-- ciudades -->
                     <VnSelectFilter
                         :label="t('City')"
                         :options="citiesLocationOptions"
@@ -169,7 +177,7 @@ const onPostcodeCreated = async () => {
                         hide-selected
                         option-label="name"
                         option-value="id"
-                        v-model="data.province"
+                        v-model="data.provinceFk"
                     >
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">
@@ -189,7 +197,7 @@ const onPostcodeCreated = async () => {
                         hide-selected
                         option-label="country"
                         option-value="id"
-                        v-model="data.country"
+                        v-model="data.countryFk"
                     />
                 </div>
             </VnRow>

src/pages/Customer/CustomerCreate.vue

@@ -36,8 +36,12 @@ const provincesLocationOptions = ref([]);
 const countriesOptions = ref([]);
 const postcodesOptions = ref([]);
 
-const onPostcodeCreated = async () => {
+const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formData) => {
     postcodeFetchDataRef.value.fetch();
+    formData.postcode = code;
+    formData.provinceFk = provinceFk;
+    formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
+    formData.countryFk = countryFk;
 };
 </script>
 
@@ -81,7 +85,6 @@ const onPostcodeCreated = async () => {
         </QToolbar>
         <FormModel
             :form-initial-data="newClientForm"
-            :observe-form-changes="false"
             model="client"
             url-create="Clients/createWithUser"
         >
@@ -148,7 +151,7 @@ const onPostcodeCreated = async () => {
                         >
                             <template #form>
                                 <CustomerCreateNewPostcode
-                                    @on-data-saved="onPostcodeCreated($event)"
+                                    @on-data-saved="onPostcodeCreated($event, data)"
                                 />
                             </template>
                             <template #option="scope">

src/pages/Supplier/Card/SupplierFiscalData.vue

@@ -24,8 +24,12 @@ const provincesLocationOptions = ref([]);
 const townsLocationOptions = ref([]);
 const countriesOptions = ref([]);
 
-const onPostcodeCreated = async () => {
+const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formData) => {
     postcodeFetchDataRef.value.fetch();
+    formData.postcode = code;
+    formData.provinceFk = provinceFk;
+    formData.city = townsLocationOptions.value.find((town) => town.id === townFk).name;
+    formData.countryFk = countryFk;
 };
 </script>
 <template>
@@ -179,7 +183,7 @@ const onPostcodeCreated = async () => {
                     >
                         <template #form>
                             <CustomerCreateNewPostcode
-                                @on-data-saved="onPostcodeCreated($event)"
+                                @on-data-saved="onPostcodeCreated($event, data)"
                             />
                         </template>
                         <template #option="scope">

src/pages/Worker/WorkerCreate.vue

@@ -65,8 +65,11 @@ const onBankEntityCreated = (data) => {
     bankEntitiesOptions.value.push(data);
 };
 
-const onPostcodeCreated = async () => {
+const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
     postcodeFetchDataRef.value.fetch();
+    formData.postcode = code;
+    formData.provinceFk = provinceFk;
+    formData.city = townsOptions.value.find((town) => town.id === townFk).name;
 };
 
 onMounted(async () => {
@@ -193,7 +196,7 @@ onMounted(async () => {
                         >
                             <template #form>
                                 <CustomerCreateNewPostcode
-                                    @on-data-saved="onPostcodeCreated($event)"
+                                    @on-data-saved="onPostcodeCreated($event, data)"
                                 />
                             </template>
                             <template #option="scope">
@@ -360,6 +363,7 @@ onMounted(async () => {
                         </template>
                     </VnSelectCreate>
                 </VnRow>
+                <pre>{{ data }}</pre>
             </template>
         </FormModel>
     </QPage>