From 9aeba371409b830e6b581cb4ab50be7367e8ce5e Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 10 Jan 2024 12:11:49 -0300
Subject: [PATCH 1/2] Autocomplete postcodes

---
 src/components/CreateNewPostcodeForm.vue      |  4 ++--
 src/components/FormModelPopup.vue             |  6 +++---
 .../Customer/Card/CustomerFiscalData.vue      | 20 +++++++++++++------
 src/pages/Customer/CustomerCreate.vue         |  9 ++++++---
 .../Supplier/Card/SupplierFiscalData.vue      |  8 ++++++--
 src/pages/Worker/WorkerCreate.vue             |  8 ++++++--
 6 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/src/components/CreateNewPostcodeForm.vue b/src/components/CreateNewPostcodeForm.vue
index 3504445f8..a9efcf8f4 100644
--- a/src/components/CreateNewPostcodeForm.vue
+++ b/src/components/CreateNewPostcodeForm.vue
@@ -28,8 +28,8 @@ const countriesOptions = ref([]);
 const provincesOptions = ref([]);
 const townsLocationOptions = ref([]);
 
-const onDataSaved = () => {
-    emit('onDataSaved');
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
 };
 
 const onCityCreated = async () => {
diff --git a/src/components/FormModelPopup.vue b/src/components/FormModelPopup.vue
index c314f6897..04322a3c8 100644
--- a/src/components/FormModelPopup.vue
+++ b/src/components/FormModelPopup.vue
@@ -42,8 +42,8 @@ const { t } = useI18n();
 const closeButton = ref(null);
 const isLoading = ref(false);
 
-const onDataSaved = () => {
-    emit('onDataSaved');
+const onDataSaved = (dataSaved) => {
+    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>
diff --git a/src/pages/Customer/Card/CustomerFiscalData.vue b/src/pages/Customer/Card/CustomerFiscalData.vue
index ab778670a..e7e626a99 100644
--- a/src/pages/Customer/Card/CustomerFiscalData.vue
+++ b/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>
diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
index 7b7aae11c..791135f1f 100644
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/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">
diff --git a/src/pages/Supplier/Card/SupplierFiscalData.vue b/src/pages/Supplier/Card/SupplierFiscalData.vue
index ebf1b96b6..806c25c09 100644
--- a/src/pages/Supplier/Card/SupplierFiscalData.vue
+++ b/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">
diff --git a/src/pages/Worker/WorkerCreate.vue b/src/pages/Worker/WorkerCreate.vue
index 66b6e4cd8..ce623e6c1 100644
--- a/src/pages/Worker/WorkerCreate.vue
+++ b/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>

From 4bf16da814579840108b688cd0c22b6ab904b15d Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 12 Jan 2024 09:49:34 -0300
Subject: [PATCH 2/2] Improve autocompletion

---
 src/components/CreateNewCityForm.vue           |  4 ++--
 src/components/CreateNewPostcodeForm.vue       | 18 ++++++++++++++----
 src/components/CreateNewProvinceForm.vue       |  4 ++--
 src/pages/Customer/Card/CustomerFiscalData.vue |  7 +++++--
 src/pages/Customer/CustomerCreate.vue          |  5 ++++-
 src/pages/Supplier/Card/SupplierFiscalData.vue | 13 ++++++++-----
 src/pages/Worker/WorkerCreate.vue              |  5 ++++-
 7 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/src/components/CreateNewCityForm.vue b/src/components/CreateNewCityForm.vue
index ee842e86f..7326ea7a5 100644
--- a/src/components/CreateNewCityForm.vue
+++ b/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>
 
diff --git a/src/components/CreateNewPostcodeForm.vue b/src/components/CreateNewPostcodeForm.vue
index 40efa0789..ccffb2ec2 100644
--- a/src/components/CreateNewPostcodeForm.vue
+++ b/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>
diff --git a/src/components/CreateNewProvinceForm.vue b/src/components/CreateNewProvinceForm.vue
index 0f88952ea..b972db2c9 100644
--- a/src/components/CreateNewProvinceForm.vue
+++ b/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>
 
diff --git a/src/pages/Customer/Card/CustomerFiscalData.vue b/src/pages/Customer/Card/CustomerFiscalData.vue
index e7e626a99..0edcc3c07 100644
--- a/src/pages/Customer/Card/CustomerFiscalData.vue
+++ b/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"
diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
index 767fdd0de..310deb71a 100644
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/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"
diff --git a/src/pages/Supplier/Card/SupplierFiscalData.vue b/src/pages/Supplier/Card/SupplierFiscalData.vue
index 806c25c09..28ad26961 100644
--- a/src/pages/Supplier/Card/SupplierFiscalData.vue
+++ b/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>
diff --git a/src/pages/Worker/WorkerCreate.vue b/src/pages/Worker/WorkerCreate.vue
index eb9dc70f6..91d4d454b 100644
--- a/src/pages/Worker/WorkerCreate.vue
+++ b/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"