From 3a0204d27bde863207db6d8a621611cd7085dc18 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 24 Jul 2024 14:58:51 +0200
Subject: [PATCH 1/7] feat: vnLocation changes

---
 src/components/common/VnLocation.vue          | 149 +++++++++++-------
 .../Customer/Card/CustomerFiscalData.vue      |   6 +-
 .../Supplier/Card/SupplierFiscalData.vue      |  10 +-
 .../vnComponent/vnLocation.spec.js            |   2 +-
 4 files changed, 98 insertions(+), 69 deletions(-)

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 9ed48ca15..fc19e509f 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -1,18 +1,23 @@
 <script setup>
-import { ref, toRefs, computed, watch, onMounted } from 'vue';
+import { ref, toRefs, onMounted, nextTick } from 'vue';
 import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import VnSelectDialog from 'components/common/VnSelectDialog.vue';
-import FetchData from 'components/FetchData.vue';
-const emit = defineEmits(['update:modelValue', 'update:options']);
+const emit = defineEmits(['update:selected', 'update:options']);
 import { useI18n } from 'vue-i18n';
+import { useArrayData } from 'src/composables/useArrayData';
 
 const { t } = useI18n();
 const postcodesOptions = ref([]);
-const postcodesRef = ref(null);
+const postcodesOptionsOriginal = ref([]);
+// const postcodesRef = ref(null);
 
 const $props = defineProps({
-    modelValue: {
-        type: [String, Number, Object],
+    postalCodeKey: {
+        type: String,
+        default: 'postalCode',
+    },
+    location: {
+        type: Object,
         default: null,
     },
     options: {
@@ -41,89 +46,115 @@ const $props = defineProps({
     },
 });
 
-const { options } = toRefs($props);
-const myOptions = ref([]);
-const myOptionsOriginal = ref([]);
-
-const value = computed({
-    get() {
-        return $props.modelValue;
-    },
-    set(value) {
-        emit(
-            'update:modelValue',
-            postcodesOptions.value.find((p) => p.code === value)
-        );
-    },
+const selectedId = ref(null);
+const mySelect = ref();
+const modelValue = ref($props.location[$props.postalCodeKey]);
+const arrayData = useArrayData('postcodes', {
+    url: 'Postcodes/filter',
+    limit: 1,
 });
 
-onMounted(() => {
-    locationFilter($props.modelValue);
-});
+function sanitizePostcode(data) {
+    return data.map((postcode) => ({
+        ...postcode,
+        original: postcode,
+        id: sanitizeId(postcode),
+        label: sanitizeLabel(postcode),
+    }));
+}
 
+function sanitizeId(postcode) {
+    return `${postcode.code ?? postcode[$props.postalCodeKey]}_${postcode.provinceFk}_${
+        postcode.countryFk
+    }`;
+}
+onMounted(async () => {
+    await retriveOptions();
+    nextTick(() => mySelect.value.showPopup());
+});
+async function retriveOptions() {
+    let options = [];
+    if (modelValue.value) {
+        await locationFilter(modelValue.value, () => {});
+        options = arrayData.store.data;
+    } else {
+        const { data } = await arrayData.fetch({ updateRouter: false, append: true });
+        options = data;
+    }
+    setOptions(options);
+}
+function findOptionById(postcode) {
+    return postcodesOptions.value.find((p) => p.id === postcode);
+}
 function setOptions(data) {
-    myOptions.value = JSON.parse(JSON.stringify(data));
-    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
-}
-setOptions(options.value);
-
-watch(options, (newValue) => {
-    setOptions(newValue);
-});
-
-function showLabel(data) {
-    return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
+    postcodesOptions.value = sanitizePostcode(data);
+    if (modelValue.value) {
+        const { [$props.postalCodeKey]: code } = $props.location;
+        selectedId.value =
+            findOptionById(sanitizeId({ ...$props.location, code })) ??
+            sanitizePostcode([$props.location])[0];
+    }
+    postcodesOptionsOriginal.value = JSON.parse(JSON.stringify(postcodesOptions.value));
 }
 
-function locationFilter(search = '') {
-    if (
-        search &&
-        (search.includes('undefined') || search.startsWith(`${$props.modelValue} - `))
-    )
+async function handleInput(value) {
+    if (value) emit('update:selected', findOptionById(value));
+    if (modelValue.value) {
+        modelValue.value = value;
+        arrayData.store.userFilter = {};
+        await retriveOptions();
+        mySelect.value.showPopup();
+    } else postcodesOptions.value = postcodesOptionsOriginal.value;
+}
+function sanitizeLabel(postcode) {
+    return `${postcode.code ?? postcode[$props.postalCodeKey]} - ${postcode.town}(${
+        postcode.province
+    }), ${postcode.country}`;
+}
+
+async function locationFilter(search, update) {
+    if (search.length === 0) {
         return;
+    }
     let where = { search };
-    postcodesRef.value.fetch({ filter: { where }, limit: 30 });
+    arrayData.store.userFilter = { filter: { where } };
+    await arrayData.fetch({ append: false, updateRouter: false });
+
+    update(() => {
+        postcodesOptions.value = sanitizePostcode(arrayData.store.data);
+    });
 }
 
-function handleFetch(data) {
-    postcodesOptions.value = data;
-}
 function onDataSaved(newPostcode) {
     postcodesOptions.value.push(newPostcode);
-    value.value = newPostcode.code;
+    selectedId.value = newPostcode.code ?? newPostcode[$props.postalCodeKey];
 }
 </script>
 <template>
-    <FetchData
-        ref="postcodesRef"
-        url="Postcodes/filter"
-        @on-fetch="(data) => handleFetch(data)"
-    />
     <VnSelectDialog
-        v-if="postcodesRef"
-        :option-label="(opt) => showLabel(opt) ?? 'code'"
-        :option-value="(opt) => opt.code"
-        v-model="value"
+        ref="mySelect"
+        option-label="label"
+        option-value="id"
+        v-model="selectedId"
         :options="postcodesOptions"
         :label="t('Location')"
+        @update:model-value="handleInput"
         :placeholder="t('search_by_postalcode')"
-        @input-value="locationFilter"
-        :default-filter="false"
+        @filter="locationFilter"
         :input-debounce="300"
         :class="{ required: $attrs.required }"
         v-bind="$attrs"
         clearable
+        emit-value
     >
         <template #form>
-            <CreateNewPostcode
-                @on-data-saved="onDataSaved"
-            />
+            <CreateNewPostcode @on-data-saved="onDataSaved" />
         </template>
         <template #option="{ itemProps, opt }">
             <QItem v-bind="itemProps">
                 <QItemSection v-if="opt.code">
                     <QItemLabel>{{ opt.code }}</QItemLabel>
-                    <QItemLabel caption>{{ showLabel(opt) }}</QItemLabel>
+                    <QItemLabel caption>{{ opt.label }}</QItemLabel>
                 </QItemSection>
             </QItem>
         </template>
diff --git a/src/pages/Customer/Card/CustomerFiscalData.vue b/src/pages/Customer/Card/CustomerFiscalData.vue
index a7cdfafc5..d05e4fa01 100644
--- a/src/pages/Customer/Card/CustomerFiscalData.vue
+++ b/src/pages/Customer/Card/CustomerFiscalData.vue
@@ -95,9 +95,9 @@ function handleLocation(data, location) {
                 <VnLocation
                     :rules="validate('Worker.postcode')"
                     :roles-allowed-to-create="['deliveryAssistant']"
-                    :options="postcodesOptions"
-                    v-model="data.postcode"
-                    @update:model-value="(location) => handleLocation(data, location)"
+                    :location="data"
+                    postal-code-key="postcode"
+                    @update:selected="(location) => handleLocation(data, location)"
                 >
                 </VnLocation>
             </VnRow>
diff --git a/src/pages/Supplier/Card/SupplierFiscalData.vue b/src/pages/Supplier/Card/SupplierFiscalData.vue
index 179c6f5e6..61077d48e 100644
--- a/src/pages/Supplier/Card/SupplierFiscalData.vue
+++ b/src/pages/Supplier/Card/SupplierFiscalData.vue
@@ -17,11 +17,10 @@ const sageTaxTypesOptions = ref([]);
 const sageWithholdingsOptions = ref([]);
 const sageTransactionTypesOptions = ref([]);
 const supplierActivitiesOptions = ref([]);
-const postcodesOptions = ref([]);
 
 function handleLocation(data, location) {
-    const { town, code, provinceFk, countryFk } = location ?? {};
-    data.postCode = code;
+    const { town, label, provinceFk, countryFk } = location ?? {};
+    data.postCode = label;
     data.city = town;
     data.provinceFk = provinceFk;
     data.countryFk = countryFk;
@@ -131,9 +130,8 @@ function handleLocation(data, location) {
                 <VnLocation
                     :rules="validate('Worker.postcode')"
                     :roles-allowed-to-create="['deliveryAssistant']"
-                    :options="postcodesOptions"
-                    v-model="data.postCode"
-                    @update:model-value="(location) => handleLocation(data, location)"
+                    :location="data"
+                    @update:selected="(location) => handleLocation(data, location)"
                 >
                 </VnLocation>
             </VnRow>
diff --git a/test/cypress/integration/vnComponent/vnLocation.spec.js b/test/cypress/integration/vnComponent/vnLocation.spec.js
index 6719d8391..c465b152c 100644
--- a/test/cypress/integration/vnComponent/vnLocation.spec.js
+++ b/test/cypress/integration/vnComponent/vnLocation.spec.js
@@ -17,7 +17,7 @@ describe('VnLocation', () => {
             cy.get(inputLocation).click();
             cy.get(inputLocation).clear();
             cy.get(inputLocation).type('al');
-            cy.get(locationOptions).should('have.length.at.least', 3);
+            cy.get(locationOptions).should('have.length.at.least', 4);
         });
         it('input filter location as "ecuador"', function () {
             cy.get(inputLocation).click();
-- 
2.40.1


From 92130b4c9c770c6cc49e1253885f7837bcba29cf Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 14 Aug 2024 08:09:27 +0200
Subject: [PATCH 2/7] WIP: 59262019 Merge pull request '#7283 finish item card
 sections' (!588) from 7283-itemSectionsMigration into dev

---
 src/components/common/VnLocation.vue | 103 +++------------------------
 1 file changed, 9 insertions(+), 94 deletions(-)

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 4d429a995..8256ec5b0 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -1,124 +1,39 @@
 <script setup>
-import { ref, toRefs, computed, watch, onMounted } from 'vue';
 import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import VnSelectDialog from 'components/common/VnSelectDialog.vue';
-import FetchData from 'components/FetchData.vue';
-const emit = defineEmits(['update:modelValue', 'update:options']);
 import { useI18n } from 'vue-i18n';
-import { useArrayData } from 'src/composables/useArrayData';
 
 const { t } = useI18n();
-const postcodesOptions = ref([]);
-const postcodesRef = ref(null);
-
-const $props = defineProps({
-    modelValue: {
-        type: [String, Number, Object],
-        default: null,
-    },
-    options: {
-        type: Array,
-        default: () => [],
-    },
-    optionLabel: {
-        type: String,
-        default: '',
-    },
-    optionValue: {
-        type: String,
-        default: '',
-    },
-    filterOptions: {
-        type: Array,
-        default: () => [],
-    },
-    isClearable: {
-        type: Boolean,
-        default: true,
-    },
-    defaultFilter: {
-        type: Boolean,
-        default: true,
-    },
-});
-
-const { options } = toRefs($props);
-const myOptions = ref([]);
-const myOptionsOriginal = ref([]);
-
-const value = computed({
-    get() {
-        return $props.modelValue;
-    },
-    set(value) {
-        emit(
-            'update:modelValue',
-            postcodesOptions.value.find((p) => p.code === value)
-        );
-    },
-});
-
-onMounted(() => {
-    locationFilter($props.modelValue);
-});
-
-function setOptions(data) {
-    myOptions.value = JSON.parse(JSON.stringify(data));
-    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
-}
-setOptions(options.value);
-
-watch(options, (newValue) => {
-    setOptions(newValue);
-});
+const value = defineModel({ type: [String, Number, Object] });
 
 function showLabel(data) {
     return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
 }
-
-function locationFilter(search = '') {
-    if (
-        search &&
-        (search.includes('undefined') || search.startsWith(`${$props.modelValue} - `))
-    )
-        return;
-    let where = { search };
-    postcodesRef.value.fetch({ filter: { where }, limit: 30 });
-}
-
-function handleFetch(data) {
-    postcodesOptions.value = data;
-}
-function onDataSaved(newPostcode) {
-    postcodesOptions.value.push(newPostcode);
-    value.value = newPostcode.code;
-}
 </script>
 <template>
     <VnSelectDialog
-        v-if="postcodesRef"
-        :option-label="(opt) => showLabel(opt) ?? 'code'"
-        :option-value="(opt) => opt.code"
         v-model="value"
-        :options="postcodesOptions"
+        option-value="code"
+        option-filter-value="search"
+        :option-label="(opt) => showLabel(opt)"
+        url="Postcodes/filter"
+        :use-like="false"
         :label="t('Location')"
-        @update:model-value="handleInput"
         :placeholder="t('search_by_postalcode')"
-        @input-value="locationFilter"
-        :default-filter="false"
         :input-debounce="300"
         :class="{ required: $attrs.required }"
         v-bind="$attrs"
         clearable
+        :emit-value="false"
     >
         <template #form>
-            <CreateNewPostcode @on-data-saved="onDataSaved" />
+            <CreateNewPostcode @on-data-saved="(newValue) => (value = newValue)" />
         </template>
         <template #option="{ itemProps, opt }">
             <QItem v-bind="itemProps">
                 <QItemSection v-if="opt.code">
                     <QItemLabel>{{ opt.code }}</QItemLabel>
-                    <QItemLabel caption>{{ opt.label }}</QItemLabel>
+                    <QItemLabel caption>{{ showLabel(opt) }}</QItemLabel>
                 </QItemSection>
             </QItem>
         </template>
-- 
2.40.1


From 55b9cd9ff44f29fb95da4958c29d18ea1ae4207d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 14 Aug 2024 09:18:24 +0200
Subject: [PATCH 3/7] feat: handle same multiple CP

---
 src/components/common/VnLocation.vue          | 24 ++++++++++++-----
 src/i18n/locale/en.yml                        |  1 +
 src/i18n/locale/es.yml                        |  1 +
 src/pages/Customer/Card/CustomerAddress.vue   | 26 ++++++-------------
 .../Customer/Card/CustomerFiscalData.vue      |  2 +-
 src/pages/Customer/CustomerCreate.vue         |  1 -
 src/pages/Customer/CustomerList.vue           |  1 -
 .../components/CustomerAddressCreate.vue      |  1 -
 .../components/CustomerAddressEdit.vue        |  7 ++++-
 src/pages/Supplier/Card/SupplierAddresses.vue |  8 +++++-
 .../Supplier/Card/SupplierAddressesCreate.vue | 12 ++++++++-
 .../Supplier/Card/SupplierFiscalData.vue      | 24 ++++++++++++++++-
 src/pages/Worker/WorkerCreate.vue             |  1 -
 src/pages/Worker/WorkerList.vue               |  1 -
 src/router/modules/customer.js                |  2 +-
 15 files changed, 77 insertions(+), 35 deletions(-)

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 8256ec5b0..778932be3 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -2,20 +2,32 @@
 import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import { useI18n } from 'vue-i18n';
-
+import { ref } from 'vue';
 const { t } = useI18n();
-const value = defineModel({ type: [String, Number, Object] });
 
+const props = defineProps({
+    location: {
+        type: Object,
+        default: null,
+    },
+});
+const modelValue = ref(
+    props.location
+        ? `${props.location?.postcode} - ${props.location?.city}(${props.location?.province?.name}), ${props.location?.country?.name}`
+        : null
+);
 function showLabel(data) {
     return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
 }
 </script>
 <template>
+    {{ modelValue }}
     <VnSelectDialog
-        v-model="value"
-        option-value="code"
+        v-model="modelValue"
         option-filter-value="search"
-        :option-label="(opt) => showLabel(opt)"
+        :option-label="
+            (opt) => (typeof modelValue === 'string' ? modelValue : showLabel(opt))
+        "
         url="Postcodes/filter"
         :use-like="false"
         :label="t('Location')"
@@ -27,7 +39,7 @@ function showLabel(data) {
         :emit-value="false"
     >
         <template #form>
-            <CreateNewPostcode @on-data-saved="(newValue) => (value = newValue)" />
+            <CreateNewPostcode @on-data-saved="(newValue) => (modelValue = newValue)" />
         </template>
         <template #option="{ itemProps, opt }">
             <QItem v-bind="itemProps">
diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index ee53da80c..f61dda8a4 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -95,6 +95,7 @@ globals:
     to: To
     pageTitles:
         logIn: Login
+        addressEdit: Update address
         summary: Summary
         basicData: Basic data
         log: Logs
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 86963f3dc..4e71a69fb 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -95,6 +95,7 @@ globals:
     to: Hasta
     pageTitles:
         logIn: Inicio de sesión
+        addressEdit: Modificar consignatario
         summary: Resumen
         basicData: Datos básicos
         log: Historial
diff --git a/src/pages/Customer/Card/CustomerAddress.vue b/src/pages/Customer/Card/CustomerAddress.vue
index 6c8279d84..a97b45a50 100644
--- a/src/pages/Customer/Card/CustomerAddress.vue
+++ b/src/pages/Customer/Card/CustomerAddress.vue
@@ -5,15 +5,12 @@ import { useRoute, useRouter } from 'vue-router';
 
 import axios from 'axios';
 
-import FetchData from 'components/FetchData.vue';
-
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 
 const addresses = ref([]);
 const client = ref(null);
-const provincesLocation = ref([]);
 
 const addressFilter = {
     fields: [
@@ -41,7 +38,13 @@ const addressFilter = {
         {
             relation: 'province',
             scope: {
-                fields: ['id', 'name'],
+                fields: ['id', 'name', 'countryFk'],
+                include: [
+                    {
+                        relation: 'country',
+                        scope: { fields: ['id', 'name'] },
+                    },
+                ],
             },
         },
     ],
@@ -83,13 +86,6 @@ const getClientData = async (id) => {
     }
 };
 
-const setProvince = (provinceFk) => {
-    const result = provincesLocation.value.filter(
-        (province) => province.id === provinceFk
-    );
-    return result[0]?.name || '';
-};
-
 const isDefaultAddress = (address) => {
     return client?.value?.defaultAddressFk === address.id ? 1 : 0;
 };
@@ -128,12 +124,6 @@ const toCustomerAddressEdit = (addressId) => {
 </script>
 
 <template>
-    <FetchData
-        @on-fetch="(data) => (provincesLocation = data)"
-        auto-load
-        url="Provinces/location"
-    />
-
     <div class="full-width flex justify-center">
         <QCard class="card-width q-pa-lg" v-if="addresses.length">
             <QCardSection>
@@ -177,7 +167,7 @@ const toCustomerAddressEdit = (addressId) => {
                         <div>{{ item.street }}</div>
                         <div>
                             {{ item.postalCode }} - {{ item.city }},
-                            {{ setProvince(item.provinceFk) }}
+                            {{ item.province.name }}
                         </div>
                         <div class="flex">
                             <QCheckbox
diff --git a/src/pages/Customer/Card/CustomerFiscalData.vue b/src/pages/Customer/Card/CustomerFiscalData.vue
index 5cc656bb3..54b8adb70 100644
--- a/src/pages/Customer/Card/CustomerFiscalData.vue
+++ b/src/pages/Customer/Card/CustomerFiscalData.vue
@@ -94,7 +94,7 @@ function handleLocation(data, location) {
                 <VnLocation
                     :rules="validate('Worker.postcode')"
                     :roles-allowed-to-create="['deliveryAssistant']"
-                    v-model="data.postcode"
+                    :location="data"
                     @update:model-value="(location) => handleLocation(data, location)"
                 />
             </VnRow>
diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
index 041c92d17..193ed59c9 100644
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/src/pages/Customer/CustomerCreate.vue
@@ -87,7 +87,6 @@ function handleLocation(data, location) {
                     <VnLocation
                         :rules="validate('Worker.postcode')"
                         :roles-allowed-to-create="['deliveryAssistant']"
-                        v-model="data.location"
                         @update:model-value="(location) => handleLocation(data, location)"
                     >
                     </VnLocation>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 82ad559ad..1dc0dab43 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -413,7 +413,6 @@ function handleLocation(data, location) {
         <template #more-create-dialog="{ data }">
             <VnLocation
                 :roles-allowed-to-create="['deliveryAssistant']"
-                v-model="data.location"
                 @update:model-value="(location) => handleLocation(data, location)"
             />
             <QInput v-model="data.userName" :label="t('Web user')" />
diff --git a/src/pages/Customer/components/CustomerAddressCreate.vue b/src/pages/Customer/components/CustomerAddressCreate.vue
index 30e4b21d0..e37306a94 100644
--- a/src/pages/Customer/components/CustomerAddressCreate.vue
+++ b/src/pages/Customer/components/CustomerAddressCreate.vue
@@ -93,7 +93,6 @@ function handleLocation(data, location) {
             <VnLocation
                 :rules="validate('Worker.postcode')"
                 :roles-allowed-to-create="['deliveryAssistant']"
-                v-model="data.location"
                 @update:model-value="(location) => handleLocation(data, location)"
             />
 
diff --git a/src/pages/Customer/components/CustomerAddressEdit.vue b/src/pages/Customer/components/CustomerAddressEdit.vue
index 7a4c44014..133d2fabc 100644
--- a/src/pages/Customer/components/CustomerAddressEdit.vue
+++ b/src/pages/Customer/components/CustomerAddressEdit.vue
@@ -177,7 +177,12 @@ function handleLocation(data, location) {
                     <VnLocation
                         :rules="validate('Worker.postcode')"
                         :roles-allowed-to-create="['deliveryAssistant']"
-                        v-model="data.postalCode"
+                        :location="{
+                            postcode: data.postalCode,
+                            city: data.city,
+                            province: data.province,
+                            country: data.province.country,
+                        }"
                         @update:model-value="(location) => handleLocation(data, location)"
                     ></VnLocation>
                 </div>
diff --git a/src/pages/Supplier/Card/SupplierAddresses.vue b/src/pages/Supplier/Card/SupplierAddresses.vue
index 735b50625..4b2174d0b 100644
--- a/src/pages/Supplier/Card/SupplierAddresses.vue
+++ b/src/pages/Supplier/Card/SupplierAddresses.vue
@@ -26,7 +26,13 @@ const addressesFilter = {
         {
             relation: 'province',
             scope: {
-                fields: ['id', 'name'],
+                fields: ['id', 'name', 'countryFk'],
+                include: [
+                    {
+                        relation: 'country',
+                        scope: { fields: ['id', 'name'] },
+                    },
+                ],
             },
         },
     ],
diff --git a/src/pages/Supplier/Card/SupplierAddressesCreate.vue b/src/pages/Supplier/Card/SupplierAddressesCreate.vue
index da6549a24..df98b6091 100644
--- a/src/pages/Supplier/Card/SupplierAddressesCreate.vue
+++ b/src/pages/Supplier/Card/SupplierAddressesCreate.vue
@@ -21,6 +21,7 @@ const newAddressForm = reactive({
     provinceFk: null,
     phone: null,
     mobile: null,
+    province: null,
 });
 
 const onDataSaved = () => {
@@ -84,7 +85,16 @@ function handleLocation(data, location) {
                     <VnLocation
                         :rules="validate('Worker.postcode')"
                         :roles-allowed-to-create="['deliveryAssistant']"
-                        v-model="data.location"
+                        :location="
+                            data.postalCode
+                                ? {
+                                      postcode: data.postalCode,
+                                      city: data.city,
+                                      province: data.province,
+                                      country: data.province.country,
+                                  }
+                                : null
+                        "
                         @update:model-value="(location) => handleLocation(data, location)"
                     >
                     </VnLocation>
diff --git a/src/pages/Supplier/Card/SupplierFiscalData.vue b/src/pages/Supplier/Card/SupplierFiscalData.vue
index c638abbdc..c2cb42c6a 100644
--- a/src/pages/Supplier/Card/SupplierFiscalData.vue
+++ b/src/pages/Supplier/Card/SupplierFiscalData.vue
@@ -51,6 +51,23 @@ function handleLocation(data, location) {
         :url="`Suppliers/${route.params.id}`"
         :url-update="`Suppliers/${route.params.id}/updateFiscalData`"
         model="supplier"
+        :filter="{
+            fields: ['id', 'name', 'city', 'postCode', 'countryFk', 'provinceFk'],
+            include: [
+                {
+                    relation: 'province',
+                    scope: {
+                        fields: ['id', 'name'],
+                    },
+                },
+                {
+                    relation: 'country',
+                    scope: {
+                        fields: ['id', 'name'],
+                    },
+                },
+            ],
+        }"
         auto-load
         :clear-store-on-unmount="false"
     >
@@ -130,7 +147,12 @@ function handleLocation(data, location) {
                 <VnLocation
                     :rules="validate('Worker.postcode')"
                     :roles-allowed-to-create="['deliveryAssistant']"
-                    v-model="data.postCode"
+                    :location="{
+                        postcode: data.postCode,
+                        city: data.city,
+                        province: data.province,
+                        country: data.country,
+                    }"
                     @update:model-value="(location) => handleLocation(data, location)"
                 >
                 </VnLocation>
diff --git a/src/pages/Worker/WorkerCreate.vue b/src/pages/Worker/WorkerCreate.vue
index a1ded2bfd..5f96c136d 100644
--- a/src/pages/Worker/WorkerCreate.vue
+++ b/src/pages/Worker/WorkerCreate.vue
@@ -172,7 +172,6 @@ onBeforeMount(async () => {
                     <VnLocation
                         :rules="validate('Worker.postcode')"
                         :roles-allowed-to-create="['deliveryAssistant']"
-                        v-model="data.location"
                         @update:model-value="(location) => handleLocation(data, location)"
                         :disable="formData.isFreelance"
                     >
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index 0c2656597..9d4c3acbf 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -223,7 +223,6 @@ function uppercaseStreetModel(data) {
                     <VnLocation
                         :roles-allowed-to-create="['deliveryAssistant']"
                         :options="postcodesOptions"
-                        v-model="data.location"
                         @update:model-value="(location) => handleLocation(data, location)"
                         :disable="data.isFreelance"
                     >
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 684b83b0f..f364bd862 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -174,7 +174,7 @@ export default {
                                     path: 'edit',
                                     name: 'CustomerAddressEdit',
                                     meta: {
-                                        title: 'address-edit',
+                                        title: 'addressEdit',
                                     },
                                     component: () =>
                                         import(
-- 
2.40.1


From 8acd008f42e02a80f0c491394f41335705dc3b85 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 14 Aug 2024 09:47:27 +0200
Subject: [PATCH 4/7] feat: handle newValue

---
 src/components/common/VnLocation.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 778932be3..2fbe357ba 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -4,6 +4,7 @@ import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import { useI18n } from 'vue-i18n';
 import { ref } from 'vue';
 const { t } = useI18n();
+const emit = defineEmits(['update:model-value', 'update:options']);
 
 const props = defineProps({
     location: {
@@ -39,7 +40,14 @@ function showLabel(data) {
         :emit-value="false"
     >
         <template #form>
-            <CreateNewPostcode @on-data-saved="(newValue) => (modelValue = newValue)" />
+            <CreateNewPostcode
+                @on-data-saved="
+                    (newValue) => {
+                        modelValue = newValue;
+                        emit('update:model-value', newValue);
+                    }
+                "
+            />
         </template>
         <template #option="{ itemProps, opt }">
             <QItem v-bind="itemProps">
-- 
2.40.1


From 9eff6b56ea4f78fbc8938dbbf5d22f89a4cd843a Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 14 Aug 2024 09:48:59 +0200
Subject: [PATCH 5/7] fix: remove print variable

---
 src/components/common/VnLocation.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 2fbe357ba..e95d5a043 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -22,7 +22,6 @@ function showLabel(data) {
 }
 </script>
 <template>
-    {{ modelValue }}
     <VnSelectDialog
         v-model="modelValue"
         option-filter-value="search"
-- 
2.40.1


From 5796bc9c0a7e0dc27378b1b053eded6c07a53bbb Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 13 Sep 2024 10:32:40 +0200
Subject: [PATCH 6/7] fix: emit:updateModelValue

---
 src/components/common/VnLocation.vue          |  4 +++
 .../vnComponent/vnLocation.spec.js            | 32 ++++++++++++++++++-
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index e95d5a043..b6cbfbafd 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -20,6 +20,9 @@ const modelValue = ref(
 function showLabel(data) {
     return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
 }
+const handleModelValue = (data) => {
+    emit('update:model-value', data);
+};
 </script>
 <template>
     <VnSelectDialog
@@ -29,6 +32,7 @@ function showLabel(data) {
             (opt) => (typeof modelValue === 'string' ? modelValue : showLabel(opt))
         "
         url="Postcodes/filter"
+        @update:model-value="handleModelValue"
         :use-like="false"
         :label="t('Location')"
         :placeholder="t('search_by_postalcode')"
diff --git a/test/cypress/integration/vnComponent/vnLocation.spec.js b/test/cypress/integration/vnComponent/vnLocation.spec.js
index 614b93a8a..8c187cc7e 100644
--- a/test/cypress/integration/vnComponent/vnLocation.spec.js
+++ b/test/cypress/integration/vnComponent/vnLocation.spec.js
@@ -33,11 +33,40 @@ describe('VnLocation', () => {
             cy.login('developer');
             cy.visit('/#/supplier/567/fiscal-data', { timeout: 7000 });
             cy.waitForElement('.q-form');
-            cy.get(createLocationButton).click();
         });
+        it('Fin by postalCode', () => {
+            const postCode = '46600';
+            const firstOption = '[role="listbox"] .q-item:nth-child(1)';
+
+            cy.get(inputLocation).click();
+            cy.get(inputLocation).clear();
+            cy.get(inputLocation).type(postCode);
+            cy.get(locationOptions).should('have.length.at.least', 2);
+            cy.get(firstOption).click();
+            cy.get('.q-btn-group > .q-btn--standard > .q-btn__content > .q-icon').click();
+            cy.reload();
+            cy.waitForElement('.q-form');
+            // cy.get('[href="#/supplier/567/basic-data"] > .q-item__section--main').click();
+            // cy.get(
+            //     '[href="#/supplier/567/fiscal-data"] > .q-item__section--main'
+            // ).click();
+            cy.get(inputLocation).should(
+                'have.value',
+                '46600 - Valencia(Province one), España'
+            );
+
+            // cy.get('.q-form > .q-card > .vn-row:nth-child(6)')
+            // .find('input')
+            // .invoke('val')
+            // .then((text) => {
+            //     expect(text).to.contain('46600 - Valencia(Province one), España');
+            // });
+        });
+
         it('Create postCode', () => {
             const postCode = '1234475';
             const province = 'Valencia';
+            cy.get(createLocationButton).click();
             cy.get('.q-card > h1').should('have.text', 'New postcode');
             cy.get(dialogInputs).eq(0).clear();
             cy.get(dialogInputs).eq(0).type(postCode);
@@ -54,6 +83,7 @@ describe('VnLocation', () => {
         it('Create city', () => {
             const postCode = '9011';
             const province = 'Saskatchew';
+            cy.get(createLocationButton).click();
             cy.get(dialogInputs).eq(0).type(postCode);
             // city create button
             cy.get(
-- 
2.40.1


From a56dc7aa089c2b46d37bb92aa2c7279316f93b07 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 13 Sep 2024 10:33:08 +0200
Subject: [PATCH 7/7] test: fix test

---
 .../integration/vnComponent/vnLocation.spec.js        | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/test/cypress/integration/vnComponent/vnLocation.spec.js b/test/cypress/integration/vnComponent/vnLocation.spec.js
index 8c187cc7e..3533a3c1f 100644
--- a/test/cypress/integration/vnComponent/vnLocation.spec.js
+++ b/test/cypress/integration/vnComponent/vnLocation.spec.js
@@ -46,21 +46,10 @@ describe('VnLocation', () => {
             cy.get('.q-btn-group > .q-btn--standard > .q-btn__content > .q-icon').click();
             cy.reload();
             cy.waitForElement('.q-form');
-            // cy.get('[href="#/supplier/567/basic-data"] > .q-item__section--main').click();
-            // cy.get(
-            //     '[href="#/supplier/567/fiscal-data"] > .q-item__section--main'
-            // ).click();
             cy.get(inputLocation).should(
                 'have.value',
                 '46600 - Valencia(Province one), España'
             );
-
-            // cy.get('.q-form > .q-card > .vn-row:nth-child(6)')
-            // .find('input')
-            // .invoke('val')
-            // .then((text) => {
-            //     expect(text).to.contain('46600 - Valencia(Province one), España');
-            // });
         });
 
         it('Create postCode', () => {
-- 
2.40.1