From 5233c1455ae5a0009de80d96212384fef1dd1cda Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 31 Jul 2024 14:57:25 +0200
Subject: [PATCH 1/2] refactor: refs #7679 better way to update model

---
 src/components/CreateNewCityForm.vue     |  6 +--
 src/components/CreateNewPostcodeForm.vue | 53 +++++++++++-------------
 src/components/CreateNewProvinceForm.vue | 16 ++++++-
 src/components/VnSelectProvince.vue      |  6 ++-
 src/components/common/VnLocation.vue     |  2 +-
 src/components/common/VnSelect.vue       | 16 +++----
 6 files changed, 52 insertions(+), 47 deletions(-)

diff --git a/src/components/CreateNewCityForm.vue b/src/components/CreateNewCityForm.vue
index 3861e3253..50dc41b5f 100644
--- a/src/components/CreateNewCityForm.vue
+++ b/src/components/CreateNewCityForm.vue
@@ -19,8 +19,8 @@ const cityFormData = reactive({
 
 const provincesOptions = ref([]);
 
-const onDataSaved = (dataSaved) => {
-    emit('onDataSaved', dataSaved);
+const onDataSaved = (...args) => {
+    emit('onDataSaved', ...args);
 };
 </script>
 
@@ -36,7 +36,7 @@ const onDataSaved = (dataSaved) => {
         :form-initial-data="cityFormData"
         url-create="towns"
         model="city"
-        @on-data-saved="onDataSaved($event)"
+        @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
diff --git a/src/components/CreateNewPostcodeForm.vue b/src/components/CreateNewPostcodeForm.vue
index b1b8852d3..e6247226e 100644
--- a/src/components/CreateNewPostcodeForm.vue
+++ b/src/components/CreateNewPostcodeForm.vue
@@ -22,20 +22,17 @@ const postcodeFormData = reactive({
     townFk: null,
 });
 
-const townsFetchDataRef = ref(null);
 const provincesFetchDataRef = ref(null);
 const countriesOptions = ref([]);
 const provincesOptions = ref([]);
-const townsLocationOptions = ref([]);
+const town = ref({});
 
 function onDataSaved(formData) {
     const newPostcode = {
         ...formData,
     };
-    const townObject = townsLocationOptions.value.find(
-        ({ id }) => id === formData.townFk
-    );
-    newPostcode.town = townObject?.name;
+    newPostcode.town = town.value.name;
+    newPostcode.townFk = town.value.id;
     const provinceObject = provincesOptions.value.find(
         ({ id }) => id === formData.provinceFk
     );
@@ -47,25 +44,23 @@ function onDataSaved(formData) {
     emit('onDataSaved', newPostcode);
 }
 
-async function onCityCreated({ name, provinceFk }, formData) {
-    await townsFetchDataRef.value.fetch();
-    await provincesFetchDataRef.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;
+async function onCityCreated(newTown, formData) {
+    newTown.province = provincesOptions.value.find(
+        (province) => province.id === newTown.provinceFk
+    );
+    formData.townFk = newTown;
+    setTown(newTown, formData);
 }
 
-function setTown(id, data) {
-    const newTown = townsLocationOptions.value.find((town) => town.id == id);
+function setTown(newTown, data) {
     if (!newTown) return;
-
+    town.value = newTown;
     data.provinceFk = newTown.provinceFk;
     data.countryFk = newTown.province.countryFk;
 }
 
-function setProvince(id, data) {
+async function setProvince(id, data) {
+    await provincesFetchDataRef.value.fetch();
     const newProvince = provincesOptions.value.find((province) => province.id == id);
     if (!newProvince) return;
 
@@ -74,18 +69,11 @@ function setProvince(id, data) {
 </script>
 
 <template>
-    <FetchData
-        ref="townsFetchDataRef"
-        @on-fetch="(data) => (townsLocationOptions = data)"
-        auto-load
-        url="Towns/location"
-    />
     <FetchData
         ref="provincesFetchDataRef"
-        :filter="{ include: { relation: 'country' } }"
         @on-fetch="(data) => (provincesOptions = data)"
         auto-load
-        url="Provinces"
+        url="Provinces/location"
     />
     <FetchData
         @on-fetch="(data) => (countriesOptions = data)"
@@ -98,6 +86,7 @@ function setProvince(id, data) {
         :title="t('New postcode')"
         :subtitle="t('Please, ensure you put the correct data!')"
         :form-initial-data="postcodeFormData"
+        :mapper="(data) => (data.townFk = data.townFk.id) && data"
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data, validate }">
@@ -109,14 +98,15 @@ function setProvince(id, data) {
                 />
                 <VnSelectDialog
                     :label="t('City')"
-                    :options="townsLocationOptions"
+                    url="Towns/location"
                     @update:model-value="(value) => setTown(value, data)"
                     v-model="data.townFk"
-                    hide-selected
                     option-label="name"
                     option-value="id"
                     :rules="validate('postcode.city')"
                     :roles-allowed-to-create="['deliveryAssistant']"
+                    :emit-value="false"
+                    clearable
                 >
                     <template #option="{ itemProps, opt }">
                         <QItem v-bind="itemProps">
@@ -130,7 +120,12 @@ function setProvince(id, data) {
                         </QItem>
                     </template>
                     <template #form>
-                        <CreateNewCityForm @on-data-saved="onCityCreated($event, data)" />
+                        <CreateNewCityForm
+                            @on-data-saved="
+                                (_, requestResponse) =>
+                                    onCityCreated(requestResponse, data)
+                            "
+                        />
                     </template>
                 </VnSelectDialog>
             </VnRow>
diff --git a/src/components/CreateNewProvinceForm.vue b/src/components/CreateNewProvinceForm.vue
index c403ccb6b..b8314d079 100644
--- a/src/components/CreateNewProvinceForm.vue
+++ b/src/components/CreateNewProvinceForm.vue
@@ -20,6 +20,9 @@ const provinceFormData = reactive({
 const autonomiesOptions = ref([]);
 
 const onDataSaved = (dataSaved, requestResponse) => {
+    requestResponse.autonomy = autonomiesOptions.value.find(
+        (autonomy) => autonomy.id == requestResponse.autonomyFk
+    );
     emit('onDataSaved', dataSaved, requestResponse);
 };
 </script>
@@ -28,7 +31,7 @@ const onDataSaved = (dataSaved, requestResponse) => {
     <FetchData
         @on-fetch="(data) => (autonomiesOptions = data)"
         auto-load
-        url="Autonomies"
+        url="Autonomies/location"
     />
     <FormModelPopup
         :title="t('New province')"
@@ -53,7 +56,16 @@ const onDataSaved = (dataSaved, requestResponse) => {
                     option-value="id"
                     v-model="data.autonomyFk"
                     :rules="validate('province.autonomyFk')"
-                />
+                >
+                    <template #option="{ itemProps, opt }">
+                        <QItem v-bind="itemProps">
+                            <QItemSection>
+                                <QItemLabel>{{ opt.name }}</QItemLabel>
+                                <QItemLabel caption> {{ opt.country.name }} </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelect>
             </VnRow>
         </template>
     </FormModelPopup>
diff --git a/src/components/VnSelectProvince.vue b/src/components/VnSelectProvince.vue
index 88d372038..ea10ace19 100644
--- a/src/components/VnSelectProvince.vue
+++ b/src/components/VnSelectProvince.vue
@@ -7,6 +7,7 @@ import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import FetchData from 'components/FetchData.vue';
 import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
 
+const emit = defineEmits(['onProvinceCreated']);
 const provinceFk = defineModel({ type: Number });
 watch(provinceFk, async () => await provincesFetchDataRef.value.fetch());
 
@@ -16,9 +17,10 @@ const { t } = useI18n();
 const provincesOptions = ref();
 const provincesFetchDataRef = ref();
 
-async function onProvinceCreated(_, { id }) {
+async function onProvinceCreated(_, data) {
     await provincesFetchDataRef.value.fetch();
-    provinceFk.value = id;
+    provinceFk.value = data.id;
+    emit('onProvinceCreated', data);
 }
 </script>
 
diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 00bda48cc..8256ec5b0 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -23,8 +23,8 @@ function showLabel(data) {
         :input-debounce="300"
         :class="{ required: $attrs.required }"
         v-bind="$attrs"
-        @update:model-value="(_, object) => (value = object)"
         clearable
+        :emit-value="false"
     >
         <template #form>
             <CreateNewPostcode @on-data-saved="(newValue) => (value = newValue)" />
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 9a1a3602f..675d69f30 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -88,11 +88,7 @@ const value = computed({
     },
     set(value) {
         setOptions(myOptionsOriginal.value);
-        emit(
-            'update:modelValue',
-            value,
-            value && myOptions.value.find((o) => o[optionValue.value] == value)
-        );
+        emit('update:modelValue', value);
     },
 });
 
@@ -205,12 +201,12 @@ async function filterHandler(val, update) {
         :option-label="optionLabel"
         :option-value="optionValue"
         v-bind="$attrs"
-        emit-value
-        map-options
-        use-input
         @filter="filterHandler"
-        hide-selected
-        fill-input
+        :emit-value="$attrs['emit-value'] ?? true"
+        :map-options="$attrs['map-options'] ?? true"
+        :use-input="$attrs['use-input'] ?? true"
+        :hide-selected="$attrs['hide-selected'] ?? true"
+        :fill-input="$attrs['fill-input'] ?? true"
         ref="vnSelectRef"
         lazy-rules
         :class="{ required: $attrs.required }"

From d9fb0d9186ad77fb393e6d692a1aa0a8b990722c Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 1 Aug 2024 09:47:38 +0200
Subject: [PATCH 2/2] nullishToTrue fn

---
 src/components/common/VnSelect.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 675d69f30..f13a6501a 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -183,6 +183,10 @@ async function filterHandler(val, update) {
         }
     );
 }
+
+function nullishToTrue(value) {
+    return value ?? true;
+}
 </script>
 
 <template>
@@ -202,11 +206,11 @@ async function filterHandler(val, update) {
         :option-value="optionValue"
         v-bind="$attrs"
         @filter="filterHandler"
-        :emit-value="$attrs['emit-value'] ?? true"
-        :map-options="$attrs['map-options'] ?? true"
-        :use-input="$attrs['use-input'] ?? true"
-        :hide-selected="$attrs['hide-selected'] ?? true"
-        :fill-input="$attrs['fill-input'] ?? true"
+        :emit-value="nullishToTrue($attrs['emit-value'])"
+        :map-options="nullishToTrue($attrs['map-options'])"
+        :use-input="nullishToTrue($attrs['use-input'])"
+        :hide-selected="nullishToTrue($attrs['hide-selected'])"
+        :fill-input="nullishToTrue($attrs['fill-input'])"
         ref="vnSelectRef"
         lazy-rules
         :class="{ required: $attrs.required }"