From 9179e13dcda0eeaeb5ac17243f58576bb882c04b Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 29 Jul 2024 15:03:21 +0200
Subject: [PATCH 1/4] fix: vnLocation

---
 src/boot/axios.js                             |   9 ++
 src/components/CreateNewCityForm.vue          |  14 +--
 src/components/CreateNewPostcodeForm.vue      |  71 +++++++-----
 src/components/CreateNewProvinceForm.vue      |   6 +-
 src/components/VnSelectProvince.vue           |  57 ++++++++++
 src/components/common/VnLocation.vue          | 106 ++----------------
 src/components/common/VnSelect.vue            |  25 ++++-
 src/components/common/VnSelectDialog.vue      |  28 ++---
 .../Customer/Card/CustomerFiscalData.vue      |   2 -
 src/pages/Customer/CustomerCreate.vue         |   2 -
 src/pages/Customer/CustomerList.vue           |   2 -
 .../components/CustomerAddressCreate.vue      |   2 -
 .../components/CustomerAddressEdit.vue        |   2 -
 .../Supplier/Card/SupplierAddressesCreate.vue |   2 -
 .../Supplier/Card/SupplierFiscalData.vue      |   2 -
 src/pages/Worker/WorkerCreate.vue             |   2 -
 .../vnComponent/vnLocation.spec.js            |  82 ++++++++------
 17 files changed, 192 insertions(+), 222 deletions(-)
 create mode 100644 src/components/VnSelectProvince.vue

diff --git a/src/boot/axios.js b/src/boot/axios.js
index fa8a08003..9b32275bd 100644
--- a/src/boot/axios.js
+++ b/src/boot/axios.js
@@ -43,6 +43,15 @@ const onResponseError = (error) => {
     }
 
     switch (response?.status) {
+        case 422:
+            if (error.name == 'ValidationError')
+                message +=
+                    ' "' +
+                    responseError.details.context +
+                    '.' +
+                    Object.keys(responseError.details.codes).join(',') +
+                    '"';
+            break;
         case 500:
             message = 'errors.statusInternalServerError';
             break;
diff --git a/src/components/CreateNewCityForm.vue b/src/components/CreateNewCityForm.vue
index 45fa61dff..3861e3253 100644
--- a/src/components/CreateNewCityForm.vue
+++ b/src/components/CreateNewCityForm.vue
@@ -4,8 +4,8 @@ import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import VnInput from 'src/components/common/VnInput.vue';
+import VnSelectProvince from 'components/VnSelectProvince.vue';
+import VnInput from 'components/common/VnInput.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
 const emit = defineEmits(['onDataSaved']);
@@ -45,15 +45,7 @@ const onDataSaved = (dataSaved) => {
                     v-model="data.name"
                     :rules="validate('city.name')"
                 />
-                <VnSelect
-                    :label="t('Province')"
-                    :options="provincesOptions"
-                    hide-selected
-                    option-label="name"
-                    option-value="id"
-                    v-model="data.provinceFk"
-                    :rules="validate('city.provinceFk')"
-                />
+                <VnSelectProvince v-model="data.provinceFk" />
             </VnRow>
         </template>
     </FormModelPopup>
diff --git a/src/components/CreateNewPostcodeForm.vue b/src/components/CreateNewPostcodeForm.vue
index 25a61a0ca..b1b8852d3 100644
--- a/src/components/CreateNewPostcodeForm.vue
+++ b/src/components/CreateNewPostcodeForm.vue
@@ -5,9 +5,9 @@ import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
+import VnSelectProvince from 'src/components/VnSelectProvince.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import CreateNewCityForm from './CreateNewCityForm.vue';
-import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
 import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
@@ -28,7 +28,7 @@ const countriesOptions = ref([]);
 const provincesOptions = ref([]);
 const townsLocationOptions = ref([]);
 
-const onDataSaved = (formData) => {
+function onDataSaved(formData) {
     const newPostcode = {
         ...formData,
     };
@@ -43,25 +43,34 @@ const onDataSaved = (formData) => {
     const countryObject = countriesOptions.value.find(
         ({ id }) => id === formData.countryFk
     );
-    newPostcode.country = countryObject?.country;
+    newPostcode.country = countryObject?.name;
     emit('onDataSaved', newPostcode);
-};
+}
 
-const onCityCreated = async ({ name, provinceFk }, formData) => {
+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;
-};
+}
 
-const onProvinceCreated = async ({ name }, formData) => {
-    await provincesFetchDataRef.value.fetch();
-    formData.provinceFk = provincesOptions.value.find(
-        (province) => province.name === name
-    ).id;
-};
+function setTown(id, data) {
+    const newTown = townsLocationOptions.value.find((town) => town.id == id);
+    if (!newTown) return;
+
+    data.provinceFk = newTown.provinceFk;
+    data.countryFk = newTown.province.countryFk;
+}
+
+function setProvince(id, data) {
+    const newProvince = provincesOptions.value.find((province) => province.id == id);
+    if (!newProvince) return;
+
+    data.countryFk = newProvince.countryFk;
+}
 </script>
 
 <template>
@@ -73,6 +82,7 @@ const onProvinceCreated = async ({ name }, formData) => {
     />
     <FetchData
         ref="provincesFetchDataRef"
+        :filter="{ include: { relation: 'country' } }"
         @on-fetch="(data) => (provincesOptions = data)"
         auto-load
         url="Provinces"
@@ -91,7 +101,7 @@ const onProvinceCreated = async ({ name }, formData) => {
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <VnRow>
                 <VnInput
                     :label="t('Postcode')"
                     v-model="data.code"
@@ -100,6 +110,7 @@ const onProvinceCreated = async ({ name }, formData) => {
                 <VnSelectDialog
                     :label="t('City')"
                     :options="townsLocationOptions"
+                    @update:model-value="(value) => setTown(value, data)"
                     v-model="data.townFk"
                     hide-selected
                     option-label="name"
@@ -107,30 +118,28 @@ const onProvinceCreated = async ({ name }, formData) => {
                     :rules="validate('postcode.city')"
                     :roles-allowed-to-create="['deliveryAssistant']"
                 >
+                    <template #option="{ itemProps, opt }">
+                        <QItem v-bind="itemProps">
+                            <QItemSection>
+                                <QItemLabel>{{ opt.name }}</QItemLabel>
+                                <QItemLabel caption>
+                                    {{ opt.province.name }},
+                                    {{ opt.province.country.name }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
                     <template #form>
                         <CreateNewCityForm @on-data-saved="onCityCreated($event, data)" />
                     </template>
                 </VnSelectDialog>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-xl">
-                <VnSelectDialog
-                    :label="t('Province')"
-                    :options="provincesOptions"
-                    hide-selected
-                    option-label="name"
-                    option-value="id"
+            <VnRow>
+                <VnSelectProvince
+                    @update:model-value="(value) => setProvince(value, data)"
                     v-model="data.provinceFk"
-                    :rules="validate('postcode.provinceFk')"
-                    :roles-allowed-to-create="['deliveryAssistant']"
-                >
-                    <template #form>
-                        <CreateNewProvinceForm
-                            @on-data-saved="onProvinceCreated($event, data)"
-                        />
-                    </template> </VnSelectDialog
-            ></VnRow>
-            <VnRow class="row q-gutter-md q-mb-xl"
-                ><VnSelect
+                />
+                <VnSelect
                     :label="t('Country')"
                     :options="countriesOptions"
                     hide-selected
diff --git a/src/components/CreateNewProvinceForm.vue b/src/components/CreateNewProvinceForm.vue
index 2d626ed99..c403ccb6b 100644
--- a/src/components/CreateNewProvinceForm.vue
+++ b/src/components/CreateNewProvinceForm.vue
@@ -19,8 +19,8 @@ const provinceFormData = reactive({
 
 const autonomiesOptions = ref([]);
 
-const onDataSaved = (dataSaved) => {
-    emit('onDataSaved', dataSaved);
+const onDataSaved = (dataSaved, requestResponse) => {
+    emit('onDataSaved', dataSaved, requestResponse);
 };
 </script>
 
@@ -36,7 +36,7 @@ const onDataSaved = (dataSaved) => {
         url-create="provinces"
         model="province"
         :form-initial-data="provinceFormData"
-        @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/VnSelectProvince.vue b/src/components/VnSelectProvince.vue
new file mode 100644
index 000000000..88d372038
--- /dev/null
+++ b/src/components/VnSelectProvince.vue
@@ -0,0 +1,57 @@
+<script setup>
+import { ref, watch } from 'vue';
+import { useValidator } from 'src/composables/useValidator';
+import { useI18n } from 'vue-i18n';
+
+import VnSelectDialog from 'components/common/VnSelectDialog.vue';
+import FetchData from 'components/FetchData.vue';
+import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
+
+const provinceFk = defineModel({ type: Number });
+watch(provinceFk, async () => await provincesFetchDataRef.value.fetch());
+
+const { validate } = useValidator();
+const { t } = useI18n();
+
+const provincesOptions = ref();
+const provincesFetchDataRef = ref();
+
+async function onProvinceCreated(_, { id }) {
+    await provincesFetchDataRef.value.fetch();
+    provinceFk.value = id;
+}
+</script>
+
+<template>
+    <FetchData
+        ref="provincesFetchDataRef"
+        :filter="{ include: { relation: 'country' } }"
+        @on-fetch="(data) => (provincesOptions = data)"
+        auto-load
+        url="Provinces"
+    />
+    <VnSelectDialog
+        :label="t('Province')"
+        :options="provincesOptions"
+        hide-selected
+        v-model="provinceFk"
+        :rules="validate && validate('postcode.provinceFk')"
+        :roles-allowed-to-create="['deliveryAssistant']"
+    >
+        <template #option="{ itemProps, opt }">
+            <QItem v-bind="itemProps">
+                <QItemSection>
+                    <QItemLabel>{{ opt.name }}</QItemLabel>
+                    <QItemLabel caption> {{ opt.country.name }} </QItemLabel>
+                </QItemSection>
+            </QItem>
+        </template>
+        <template #form>
+            <CreateNewProvinceForm @on-data-saved="onProvinceCreated" />
+        </template>
+    </VnSelectDialog>
+</template>
+<i18n>
+    es:
+        Province: Provincia
+</i18n>
diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 9ed48ca15..00bda48cc 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -1,123 +1,33 @@
 <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';
 
 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>
-    <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"
-        :options="postcodesOptions"
+        option-value="code"
+        option-filter-value="search"
+        :option-label="(opt) => showLabel(opt)"
+        url="Postcodes/filter"
+        :use-like="false"
         :label="t('Location')"
         :placeholder="t('search_by_postalcode')"
-        @input-value="locationFilter"
-        :default-filter="false"
         :input-debounce="300"
         :class="{ required: $attrs.required }"
         v-bind="$attrs"
+        @update:model-value="(_, object) => (value = object)"
         clearable
     >
         <template #form>
-            <CreateNewPostcode
-                @on-data-saved="onDataSaved"
-            />
+            <CreateNewPostcode @on-data-saved="(newValue) => (value = newValue)" />
         </template>
         <template #option="{ itemProps, opt }">
             <QItem v-bind="itemProps">
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 3cba466a3..9a1a3602f 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -25,6 +25,10 @@ const $props = defineProps({
         type: String,
         default: null,
     },
+    optionFilterValue: {
+        type: String,
+        default: null,
+    },
     url: {
         type: String,
         default: '',
@@ -70,7 +74,8 @@ const $props = defineProps({
 const { t } = useI18n();
 const requiredFieldRule = (val) => val ?? t('globals.fieldRequired');
 
-const { optionLabel, optionValue, optionFilter, options, modelValue } = toRefs($props);
+const { optionLabel, optionValue, optionFilter, optionFilterValue, options, modelValue } =
+    toRefs($props);
 const myOptions = ref([]);
 const myOptionsOriginal = ref([]);
 const vnSelectRef = ref();
@@ -82,7 +87,12 @@ const value = computed({
         return $props.modelValue;
     },
     set(value) {
-        emit('update:modelValue', value);
+        setOptions(myOptionsOriginal.value);
+        emit(
+            'update:modelValue',
+            value,
+            value && myOptions.value.find((o) => o[optionValue.value] == value)
+        );
     },
 });
 
@@ -137,16 +147,19 @@ async function fetchFilter(val) {
     if (!$props.url || !dataRef.value) return;
 
     const { fields, sortBy, limit } = $props;
-    let key = optionFilter.value ?? optionLabel.value;
-
-    if (new RegExp(/\d/g).test(val)) key = optionValue.value;
+    const key =
+        optionFilterValue.value ??
+        (new RegExp(/\d/g).test(val)
+            ? optionValue.value
+            : optionFilter.value ?? optionLabel.value);
 
     const defaultWhere = $props.useLike
         ? { [key]: { like: `%${val}%` } }
         : { [key]: val };
     const where = { ...(val ? defaultWhere : {}), ...$props.where };
-    const fetchOptions = { where, order: sortBy, limit };
+    const fetchOptions = { where, limit };
     if (fields) fetchOptions.fields = fields;
+    if (sortBy) fetchOptions.order = sortBy;
     return dataRef.value.fetch(fetchOptions);
 }
 
diff --git a/src/components/common/VnSelectDialog.vue b/src/components/common/VnSelectDialog.vue
index 3726691af..7f7c29f5d 100644
--- a/src/components/common/VnSelectDialog.vue
+++ b/src/components/common/VnSelectDialog.vue
@@ -1,21 +1,12 @@
 <script setup>
 import { ref, computed } from 'vue';
-
-import VnSelect from 'src/components/common/VnSelect.vue';
-
 import { useRole } from 'src/composables/useRole';
 
+import VnSelect from 'src/components/common/VnSelect.vue';
 const emit = defineEmits(['update:modelValue']);
 
+const value = defineModel({ type: [String, Number, Object] });
 const $props = defineProps({
-    modelValue: {
-        type: [String, Number, Object],
-        default: null,
-    },
-    options: {
-        type: Array,
-        default: () => [],
-    },
     rolesAllowedToCreate: {
         type: Array,
         default: () => ['developer'],
@@ -33,15 +24,6 @@ const $props = defineProps({
 const role = useRole();
 const showForm = ref(false);
 
-const value = computed({
-    get() {
-        return $props.modelValue;
-    },
-    set(value) {
-        emit('update:modelValue', value);
-    },
-});
-
 const isAllowedToCreate = computed(() => {
     return role.hasAny($props.rolesAllowedToCreate);
 });
@@ -52,7 +34,11 @@ const toggleForm = () => {
 </script>
 
 <template>
-    <VnSelect v-model="value" :options="options" v-bind="$attrs">
+    <VnSelect
+        v-model="value"
+        v-bind="$attrs"
+        @update:model-value="(...args) => emit('update:modelValue', ...args)"
+    >
         <template v-if="isAllowedToCreate" #append>
             <QIcon
                 @click.stop.prevent="toggleForm()"
diff --git a/src/pages/Customer/Card/CustomerFiscalData.vue b/src/pages/Customer/Card/CustomerFiscalData.vue
index a7cdfafc5..a68f5631f 100644
--- a/src/pages/Customer/Card/CustomerFiscalData.vue
+++ b/src/pages/Customer/Card/CustomerFiscalData.vue
@@ -15,7 +15,6 @@ const route = useRoute();
 
 const typesTaxes = ref([]);
 const typesTransactions = ref([]);
-const postcodesOptions = ref([]);
 
 function handleLocation(data, location) {
     const { town, code, provinceFk, countryFk } = location ?? {};
@@ -95,7 +94,6 @@ 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)"
                 >
diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
index 80bfd1efe..ca543583a 100644
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/src/pages/Customer/CustomerCreate.vue
@@ -18,7 +18,6 @@ const initialData = reactive({
 
 const workersOptions = ref([]);
 const businessTypesOptions = ref([]);
-const postcodesOptions = ref([]);
 
 function handleLocation(data, location) {
     const { town, code, provinceFk, countryFk } = location ?? {};
@@ -88,7 +87,6 @@ function handleLocation(data, location) {
                     <VnLocation
                         :rules="validate('Worker.postcode')"
                         :roles-allowed-to-create="['deliveryAssistant']"
-                        :options="postcodesOptions"
                         v-model="data.location"
                         @update:model-value="(location) => handleLocation(data, location)"
                     >
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index a9e4d978e..f26eb1889 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -15,7 +15,6 @@ import { toDate } from 'src/filters';
 const { t } = useI18n();
 const router = useRouter();
 
-const postcodesOptions = ref([]);
 const tableRef = ref();
 
 const columns = computed(() => [
@@ -420,7 +419,6 @@ function handleLocation(data, location) {
         <template #more-create-dialog="{ data }">
             <VnLocation
                 :roles-allowed-to-create="['deliveryAssistant']"
-                :options="postcodesOptions"
                 v-model="data.location"
                 @update:model-value="(location) => handleLocation(data, location)"
             />
diff --git a/src/pages/Customer/components/CustomerAddressCreate.vue b/src/pages/Customer/components/CustomerAddressCreate.vue
index 57997fb01..0f8baec8c 100644
--- a/src/pages/Customer/components/CustomerAddressCreate.vue
+++ b/src/pages/Customer/components/CustomerAddressCreate.vue
@@ -21,7 +21,6 @@ const formInitialData = reactive({ isDefaultAddress: false });
 
 const urlCreate = ref('');
 
-const postcodesOptions = ref([]);
 const agencyModes = ref([]);
 const incoterms = ref([]);
 const customsAgents = ref([]);
@@ -94,7 +93,6 @@ function handleLocation(data, location) {
             <VnLocation
                 :rules="validate('Worker.postcode')"
                 :roles-allowed-to-create="['deliveryAssistant']"
-                :options="postcodesOptions"
                 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 2d14b571e..26c7d0621 100644
--- a/src/pages/Customer/components/CustomerAddressEdit.vue
+++ b/src/pages/Customer/components/CustomerAddressEdit.vue
@@ -18,7 +18,6 @@ const route = useRoute();
 const router = useRouter();
 
 const urlUpdate = ref('');
-const postcodesOptions = ref([]);
 const agencyModes = ref([]);
 const incoterms = ref([]);
 const customsAgents = ref([]);
@@ -178,7 +177,6 @@ function handleLocation(data, location) {
                     <VnLocation
                         :rules="validate('Worker.postcode')"
                         :roles-allowed-to-create="['deliveryAssistant']"
-                        :options="postcodesOptions"
                         v-model="data.postalCode"
                         @update:model-value="(location) => handleLocation(data, location)"
                     ></VnLocation>
diff --git a/src/pages/Supplier/Card/SupplierAddressesCreate.vue b/src/pages/Supplier/Card/SupplierAddressesCreate.vue
index eccf06204..ab887e186 100644
--- a/src/pages/Supplier/Card/SupplierAddressesCreate.vue
+++ b/src/pages/Supplier/Card/SupplierAddressesCreate.vue
@@ -11,7 +11,6 @@ const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 
-const postcodesOptions = ref([]);
 const viewAction = ref();
 const updateAddressId = ref(null);
 const newAddressForm = reactive({
@@ -85,7 +84,6 @@ function handleLocation(data, location) {
                     <VnLocation
                         :rules="validate('Worker.postcode')"
                         :roles-allowed-to-create="['deliveryAssistant']"
-                        :options="postcodesOptions"
                         v-model="data.location"
                         @update:model-value="(location) => handleLocation(data, location)"
                     >
diff --git a/src/pages/Supplier/Card/SupplierFiscalData.vue b/src/pages/Supplier/Card/SupplierFiscalData.vue
index 179c6f5e6..47f82e904 100644
--- a/src/pages/Supplier/Card/SupplierFiscalData.vue
+++ b/src/pages/Supplier/Card/SupplierFiscalData.vue
@@ -17,7 +17,6 @@ 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 ?? {};
@@ -131,7 +130,6 @@ 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)"
                 >
diff --git a/src/pages/Worker/WorkerCreate.vue b/src/pages/Worker/WorkerCreate.vue
index 5e81a3070..a1ded2bfd 100644
--- a/src/pages/Worker/WorkerCreate.vue
+++ b/src/pages/Worker/WorkerCreate.vue
@@ -21,7 +21,6 @@ const companiesOptions = ref([]);
 const workersOptions = ref([]);
 const payMethodsOptions = ref([]);
 const bankEntitiesOptions = ref([]);
-const postcodesOptions = ref([]);
 const formData = ref({ isFreelance: false });
 const defaultPayMethod = ref(0);
 
@@ -173,7 +172,6 @@ onBeforeMount(async () => {
                     <VnLocation
                         :rules="validate('Worker.postcode')"
                         :roles-allowed-to-create="['deliveryAssistant']"
-                        :options="postcodesOptions"
                         v-model="data.location"
                         @update:model-value="(location) => handleLocation(data, location)"
                         :disable="formData.isFreelance"
diff --git a/test/cypress/integration/vnComponent/vnLocation.spec.js b/test/cypress/integration/vnComponent/vnLocation.spec.js
index 6719d8391..942111450 100644
--- a/test/cypress/integration/vnComponent/vnLocation.spec.js
+++ b/test/cypress/integration/vnComponent/vnLocation.spec.js
@@ -1,30 +1,31 @@
-const locationOptions = '[role="listbox"] > div.q-virtual-scroll__content > .q-item';
 describe('VnLocation', () => {
+    const locationOptions = '[role="listbox"] > div.q-virtual-scroll__content > .q-item';
     const dialogInputs = '.q-dialog label input';
+    const createLocationButton = '.q-form > .q-card > .vn-row:nth-child(6) .--add-icon';
+    const inputLocation = '.q-form input[aria-label="Location"]';
     describe('Worker Create', () => {
-        const inputLocation = '.q-form input[aria-label="Location"]';
-        beforeEach(() => {
-            cy.viewport(1280, 720);
-            cy.login('developer');
-            cy.visit('/#/worker/create', { timeout: 5000 });
-            cy.waitForElement('.q-card');
-        });
-        it('Show all options', function () {
-            cy.get(inputLocation).click();
-            cy.get(locationOptions).should('have.length.at.least', 5);
-        });
-        it('input filter location as "al"', function () {
-            cy.get(inputLocation).click();
-            cy.get(inputLocation).clear();
-            cy.get(inputLocation).type('al');
-            cy.get(locationOptions).should('have.length.at.least', 3);
-        });
-        it('input filter location as "ecuador"', function () {
-            cy.get(inputLocation).click();
-            cy.get(inputLocation).clear();
-            cy.get(inputLocation).type('ecuador');
-            cy.get(locationOptions).should('have.length.at.least', 1);
-        });
+        // beforeEach(() => {
+        //     cy.viewport(1280, 720);
+        //     cy.login('developer');
+        //     cy.visit('/#/worker/create', { timeout: 5000 });
+        //     cy.waitForElement('.q-card');
+        // });
+        // it('Show all options', function () {
+        //     cy.get(inputLocation).click();
+        //     cy.get(locationOptions).should('have.length.at.least', 5);
+        // });
+        // it('input filter location as "al"', function () {
+        //     cy.get(inputLocation).click();
+        //     cy.get(inputLocation).clear();
+        //     cy.get(inputLocation).type('al');
+        //     cy.get(locationOptions).should('have.length.at.least', 3);
+        // });
+        // it('input filter location as "ecuador"', function () {
+        //     cy.get(inputLocation).click();
+        //     cy.get(inputLocation).clear();
+        //     cy.get(inputLocation).type('ecuador');
+        //     cy.get(locationOptions).should('have.length.at.least', 1);
+        // });
     });
     describe('Fiscal-data', () => {
         beforeEach(() => {
@@ -32,25 +33,34 @@ describe('VnLocation', () => {
             cy.login('developer');
             cy.visit('/#/supplier/567/fiscal-data', { timeout: 7000 });
             cy.waitForElement('.q-form');
+            cy.get(createLocationButton).click();
         });
-        it('Create postCode', function () {
-            cy.get('.q-form > .q-card > .vn-row:nth-child(6) .--add-icon').click();
+        it('Create postCode', () => {
+            const postCode = '1234453';
             cy.get('.q-card > h1').should('have.text', 'New postcode');
-            cy.get(dialogInputs).eq(0).clear('12');
-            cy.get(dialogInputs).eq(0).type('1234453');
+            cy.get(dialogInputs).eq(0).clear();
+            cy.get(dialogInputs).eq(0).type(postCode);
             cy.selectOption(
                 '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(4)   > .q-select > .q-field__inner > .q-field__control ',
                 'Valencia'
             );
-            cy.selectOption(
-                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(5)   > .q-select > .q-field__inner > .q-field__control ',
-                'Province one'
-            );
-            cy.selectOption(
-                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(6)  > .q-select > .q-field__inner > .q-field__control ',
-                'España'
-            );
             cy.get('.q-mt-lg > .q-btn--standard').click();
+            cy.get(':nth-child(6) > .q-input input').contains(postCode);
         });
+        // it('Create city', () => {
+        //     const postCode = '9011';
+        //     const province = 'Saskatchewan';
+        //     cy.get(dialogInputs).eq(0).type(postCode);
+        //     // city create button
+        //     cy.get(
+        //         '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(4) > .q-select > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon'
+        //     ).click();
+        //     cy.selectOption('#q-portal--dialog--2 .q-select', 'one');
+        //     cy.get('#q-portal--dialog--2 .q-input').type(province);
+        //     cy.get('#q-portal--dialog--2 .q-btn--standard').click();
+        //     cy.get('#q-portal--dialog--1 .q-btn--standard').click();
+        //     cy.get(inputLocation).contains(postCode);
+        //     cy.get(inputLocation).contains(province);
+        // });
     });
 });

From f4347411abc4a7d9f2636aef6a86719896e510d6 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 30 Jul 2024 10:01:16 +0200
Subject: [PATCH 2/4] test: add better test to vnLocation

---
 .../vnComponent/vnLocation.spec.js            | 98 +++++++++++--------
 1 file changed, 57 insertions(+), 41 deletions(-)

diff --git a/test/cypress/integration/vnComponent/vnLocation.spec.js b/test/cypress/integration/vnComponent/vnLocation.spec.js
index 942111450..30c1d6df2 100644
--- a/test/cypress/integration/vnComponent/vnLocation.spec.js
+++ b/test/cypress/integration/vnComponent/vnLocation.spec.js
@@ -4,28 +4,28 @@ describe('VnLocation', () => {
     const createLocationButton = '.q-form > .q-card > .vn-row:nth-child(6) .--add-icon';
     const inputLocation = '.q-form input[aria-label="Location"]';
     describe('Worker Create', () => {
-        // beforeEach(() => {
-        //     cy.viewport(1280, 720);
-        //     cy.login('developer');
-        //     cy.visit('/#/worker/create', { timeout: 5000 });
-        //     cy.waitForElement('.q-card');
-        // });
-        // it('Show all options', function () {
-        //     cy.get(inputLocation).click();
-        //     cy.get(locationOptions).should('have.length.at.least', 5);
-        // });
-        // it('input filter location as "al"', function () {
-        //     cy.get(inputLocation).click();
-        //     cy.get(inputLocation).clear();
-        //     cy.get(inputLocation).type('al');
-        //     cy.get(locationOptions).should('have.length.at.least', 3);
-        // });
-        // it('input filter location as "ecuador"', function () {
-        //     cy.get(inputLocation).click();
-        //     cy.get(inputLocation).clear();
-        //     cy.get(inputLocation).type('ecuador');
-        //     cy.get(locationOptions).should('have.length.at.least', 1);
-        // });
+        beforeEach(() => {
+            cy.viewport(1280, 720);
+            cy.login('developer');
+            cy.visit('/#/worker/create', { timeout: 5000 });
+            cy.waitForElement('.q-card');
+        });
+        it('Show all options', function () {
+            cy.get(inputLocation).click();
+            cy.get(locationOptions).should('have.length.at.least', 5);
+        });
+        it('input filter location as "al"', function () {
+            cy.get(inputLocation).click();
+            cy.get(inputLocation).clear();
+            cy.get(inputLocation).type('al');
+            cy.get(locationOptions).should('have.length.at.least', 3);
+        });
+        it('input filter location as "ecuador"', function () {
+            cy.get(inputLocation).click();
+            cy.get(inputLocation).clear();
+            cy.get(inputLocation).type('ecuador');
+            cy.get(locationOptions).should('have.length.at.least', 1);
+        });
     });
     describe('Fiscal-data', () => {
         beforeEach(() => {
@@ -36,31 +36,47 @@ describe('VnLocation', () => {
             cy.get(createLocationButton).click();
         });
         it('Create postCode', () => {
-            const postCode = '1234453';
+            const postCode = '1234475';
+            const province = 'Valencia';
             cy.get('.q-card > h1').should('have.text', 'New postcode');
             cy.get(dialogInputs).eq(0).clear();
             cy.get(dialogInputs).eq(0).type(postCode);
             cy.selectOption(
-                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(4)   > .q-select > .q-field__inner > .q-field__control ',
-                'Valencia'
+                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(4) > .q-select > .q-field__inner > .q-field__control ',
+                province
             );
             cy.get('.q-mt-lg > .q-btn--standard').click();
-            cy.get(':nth-child(6) > .q-input input').contains(postCode);
+            cy.get('.q-dialog__inner > .column > #formModel > .q-card').should(
+                'not.exist'
+            );
+            checkVnLocation(postCode, province);
         });
-        // it('Create city', () => {
-        //     const postCode = '9011';
-        //     const province = 'Saskatchewan';
-        //     cy.get(dialogInputs).eq(0).type(postCode);
-        //     // city create button
-        //     cy.get(
-        //         '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(4) > .q-select > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon'
-        //     ).click();
-        //     cy.selectOption('#q-portal--dialog--2 .q-select', 'one');
-        //     cy.get('#q-portal--dialog--2 .q-input').type(province);
-        //     cy.get('#q-portal--dialog--2 .q-btn--standard').click();
-        //     cy.get('#q-portal--dialog--1 .q-btn--standard').click();
-        //     cy.get(inputLocation).contains(postCode);
-        //     cy.get(inputLocation).contains(province);
-        // });
+        it('Create city', () => {
+            const postCode = '9011';
+            const province = 'Saskatchew';
+            cy.get(dialogInputs).eq(0).type(postCode);
+            // city create button
+            cy.get(
+                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(4) > .q-select > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon'
+            ).click();
+            cy.selectOption('#q-portal--dialog--2 .q-select', 'one');
+            cy.get('#q-portal--dialog--2 .q-input').type(province);
+            cy.get('#q-portal--dialog--2 .q-btn--standard').click();
+            cy.get('#q-portal--dialog--1 .q-btn--standard').click();
+            checkVnLocation(postCode, province);
+        });
+
+        function checkVnLocation(postCode, province) {
+            cy.get('.q-dialog__inner > .column > #formModel > .q-card').should(
+                'not.exist'
+            );
+            cy.get('.q-form > .q-card > .vn-row:nth-child(6)')
+                .find('input')
+                .invoke('val')
+                .then((text) => {
+                    expect(text).to.contain(postCode);
+                    expect(text).to.contain(province);
+                });
+        }
     });
 });

From 7ff20f3064511256a38891d9a627bf4908601331 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Tue, 30 Jul 2024 11:50:23 +0200
Subject: [PATCH 3/4] hotFix: supplierList correct filter

---
 src/pages/Supplier/SupplierList.vue | 50 +++++++++++++++--------------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/pages/Supplier/SupplierList.vue b/src/pages/Supplier/SupplierList.vue
index 5d9942536..0a40ca30d 100644
--- a/src/pages/Supplier/SupplierList.vue
+++ b/src/pages/Supplier/SupplierList.vue
@@ -19,58 +19,61 @@ const columns = computed(() => [
         label: t('supplier.list.tableVisibleColumns.name'),
         name: 'socialName',
         create: true,
-        component: 'input',
-        columnField: {
-            component: null,
+        columnCreate: {
+            component: 'input',
+        },
+        columnFilter: {
+            name: 'search',
         },
     },
     {
         align: 'left',
         label: t('supplier.list.tableVisibleColumns.nif'),
         name: 'nif',
-        component: 'input',
-        columnField: {
-            component: null,
+        columnFilter: {
+            inWhere: true,
         },
     },
     {
         align: 'left',
         label: t('supplier.list.tableVisibleColumns.nickname'),
         name: 'alias',
-        component: 'input',
-        columnField: {
-            component: null,
+        columnFilter: {
+            name: 'search',
         },
     },
     {
         align: 'left',
         label: t('supplier.list.tableVisibleColumns.account'),
         name: 'account',
-        component: 'input',
-        columnField: {
-            component: null,
+        columnFilter: {
+            inWhere: true,
         },
     },
     {
         align: 'left',
         label: t('supplier.list.tableVisibleColumns.payMethod'),
         name: 'payMethod',
-        component: 'select',
-        attrs: {
-            url: 'payMethods',
-            fields: ['id', 'name'],
-        },
-        columnField: {
-            component: null,
+        columnFilter: {
+            inWhere: true,
+            name: 'payMethodFk',
+            component: 'select',
+            attrs: {
+                url: 'payMethods',
+                fields: ['id', 'name'],
+                find: {
+                    value: 'payMethodFk',
+                    label: 'name',
+                },
+            },
         },
     },
     {
         align: 'left',
         label: t('supplier.list.tableVisibleColumns.payDay'),
-        name: 'payDat',
-        component: 'input',
-        columnField: {
-            component: null,
+        name: 'payDay',
+        columnFilter: {
+            inWhere: true,
         },
     },
 ]);
@@ -99,7 +102,6 @@ const columns = computed(() => [
 <i18n>
 en:
     Search suppliers: Search suppliers
-
 es:
     Search suppliers: Buscar proveedores
 </i18n>

From d0149d8cbea7547fff7709c0a90a124d7bf40eed Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 30 Jul 2024 12:26:26 +0200
Subject: [PATCH 4/4] empty commit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 71d80d401..1e5ac3bbc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "24.30.1",
+    "version": "24.30.2",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",