Merge pull request 'feature/ms-95-postcode-autocomplete' (#67) from feature/ms-95-postcode-autocomplete into dev

Reviewed-on: hyervoni/salix-front-mindshore#67

src/components/CreateNewCityForm.vue

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

src/pages/Customer/Card/CustomerFiscalData.vue

@@ -14,16 +14,22 @@ 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 () => {
+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;
+    formData.countryFk = countryFk;
 };
 </script>
 
@@ -35,6 +41,7 @@ const onPostcodeCreated = async () => {
         url="SageTransactionTypes"
     />
     <FetchData
+        ref="townsFetchDataRef"
         @on-fetch="(data) => (citiesLocationOptions = data)"
         auto-load
         url="Towns/location"
@@ -49,7 +56,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 +126,7 @@ const onPostcodeCreated = async () => {
                     >
                         <template #form>
                             <CustomerCreateNewPostcode
-                                @on-data-saved="onPostcodeCreated($event)"
+                                @on-data-saved="onPostcodeCreated($event, data)"
                             />
                         </template>
                         <template #option="scope">
@@ -136,7 +148,6 @@ const onPostcodeCreated = async () => {
                     </VnSelectCreate>
                 </div>
                 <div class="col">
-                    <!-- ciudades -->
                     <VnSelectFilter
                         :label="t('City')"
                         :options="citiesLocationOptions"
@@ -169,7 +180,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 +200,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

@@ -30,6 +30,7 @@ const newClientForm = reactive({
 });
 
 const postcodeFetchDataRef = ref(null);
+const townsFetchDataRef = ref(null);
 const workersOptions = ref([]);
 const businessTypesOptions = ref([]);
 const citiesLocationOptions = ref([]);
@@ -37,8 +38,13 @@ const provincesLocationOptions = ref([]);
 const countriesOptions = ref([]);
 const postcodesOptions = ref([]);
 
-const onPostcodeCreated = async () => {
+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;
+    formData.countryFk = countryFk;
 };
 </script>
 
@@ -60,6 +66,7 @@ const onPostcodeCreated = async () => {
         url="BusinessTypes"
     />
     <FetchData
+        ref="townsFetchDataRef"
         @on-fetch="(data) => (citiesLocationOptions = data)"
         auto-load
         url="Towns/location"
@@ -78,7 +85,6 @@ const onPostcodeCreated = async () => {
         <VnSubToolbar />
         <FormModel
             :form-initial-data="newClientForm"
-            :observe-form-changes="false"
             model="client"
             url-create="Clients/createWithUser"
         >
@@ -145,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

@@ -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([]);
@@ -24,8 +25,13 @@ const provincesLocationOptions = ref([]);
 const townsLocationOptions = ref([]);
 const countriesOptions = ref([]);
 
-const onPostcodeCreated = async () => {
+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 = townsLocationOptions.value.find((town) => town.id === townFk).name;
+    formData.countryFk = countryFk;
 };
 </script>
 <template>
@@ -56,6 +62,7 @@ const onPostcodeCreated = async () => {
         auto-load
     />
     <FetchData
+        ref="townsFetchDataRef"
         @on-fetch="(data) => (townsLocationOptions = data)"
         auto-load
         url="Towns/location"
@@ -167,19 +174,18 @@ const onPostcodeCreated = async () => {
                 </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>
                             <CustomerCreateNewPostcode
-                                @on-data-saved="onPostcodeCreated($event)"
+                                @on-data-saved="onPostcodeCreated($event, data)"
                             />
                         </template>
                         <template #option="scope">
@@ -282,6 +288,7 @@ const onPostcodeCreated = async () => {
                     </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([]);
@@ -66,8 +67,12 @@ const onBankEntityCreated = (data) => {
     bankEntitiesOptions.value.push(data);
 };
 
-const onPostcodeCreated = async () => {
+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;
 };
 
 onMounted(async () => {
@@ -96,6 +101,7 @@ onMounted(async () => {
         auto-load
     />
     <FetchData
+        ref="townsFetchDataRef"
         url="Towns/location"
         @on-fetch="(data) => (townsOptions = data)"
         :filter="townsFilter"
@@ -190,7 +196,7 @@ onMounted(async () => {
                         >
                             <template #form>
                                 <CustomerCreateNewPostcode
-                                    @on-data-saved="onPostcodeCreated($event)"
+                                    @on-data-saved="onPostcodeCreated($event, data)"
                                 />
                             </template>
                             <template #option="scope">
@@ -357,6 +363,7 @@ onMounted(async () => {
                         </template>
                     </VnSelectCreate>
                 </VnRow>
+                <pre>{{ data }}</pre>
             </template>
         </FormModel>
     </QPage>