src/components/common/VnLocation.vue

@@ -7,11 +7,12 @@ const emit = defineEmits(['update:modelValue', 'update:options']);
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
-const citiesLocationOptions = ref([]);
-const provincesLocationOptions = ref([]);
-const countriesOptions = ref([]);
+// const citiesLocationOptions = ref([]);
+// const provincesLocationOptions = ref([]);
+// const countriesOptions = ref([]);
+// const townsRef = ref([]);
 const postcodesOptions = ref([]);
-const postcodeFetchDataRef = ref(null);
+const postcodesRef = ref(null);
 
 const $props = defineProps({
     modelValue: {
@@ -66,25 +67,61 @@ watch(options, (newValue) => {
     setOptions(newValue);
 });
 
-function showLabel(data){
-    return `${data.code} - ${data.town.name}(${data.town.province.name}), ${data.town.province.country.country}`;
+function showLabel(data) {
+       return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
 }
 
-</script>
+function locationFilter(value) {
+    // if(value==='') return [];
+    let where = { limit: 30 };
+    const params = { value };
+    postcodesRef.value.fetch({ where: Object.assign(where, params) });
+//     postcodesRef.value.fetch({
+//   where: {
+//     or: [
+//       { code: { like: '%4660%' } },
+//       { 'town.name': { like: '%Alz%' } }
+//     ]
+//   }});
+    // const townParams = { name: { like: `%${val}%` } };
 
-<template>
-    <FetchData
-        ref="postcodeFetchDataRef"
-        url="Postcodes/location"
-        @on-fetch="(data) => (postcodesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        @on-fetch="(data) => (citiesLocationOptions = data)"
+    // townsRef.value.fetch({ where: Object.assign(where, townParams) });
+}
+function handleFetch( data) {
+//     if (from === 'towns') {
+//         data = data.reduce((acc, town) => {
+//             for (const postcode of town.postcodes) {
+//                 console.log(postcode);
+//                 acc.push({ ...postcode, town:{name: town.name, province: town.province} });
+//             }
+
+//             return acc;
+//         }, []);
+//     }
+//     console.log(from, data);
+     postcodesOptions.value = data;
+}
+</script>
+<!-- let where = { limit: 30 };
+
+const params = { 'town': false, 'townsFk': {like: ``}  };
+where = Object.assign(where, params);
+postcodesRef.value.fetch({ where});
+} -->
+<!-- <FetchData
+        ref="townsRef"
+        @on-fetch="(data) => handleFetch('towns', data)"
         auto-load
         url="Towns/location"
-    />
+    /> -->
+<template>
     <FetchData
+        ref="postcodesRef"
+        url="Postcodes/filter"
+        @on-fetch="(data) =>handleFetch(data)"
+        auto-load
+    />
+    <!--  <FetchData
         @on-fetch="(data) => (provincesLocationOptions = data)"
         auto-load
         url="Provinces/location"
@@ -93,23 +130,26 @@ function showLabel(data){
         @on-fetch="(data) => (countriesOptions = data)"
         auto-load
         url="Countries"
-    />
+    /> -->
+    <!-- :filter-options="['code','town.name']"
+    :filter-rules="['val.length>2']" -->
     <VnSelectCreate
+        v-if="postcodesRef"
         v-model="value"
         :options="postcodesOptions"
         :label="t('Location')"
         :option-label="showLabel"
-        :placeholder="t('Search by postalCode or town (at least 3 characters')"
+        :placeholder="t('Search by postalCode, town, province or country')"
         v-bind="$attrs"
         emit-value
         map-options
         use-input
-        :filter-options="['code','town.name']"
-        :filter-rules="['val.length>2']"
         clearable
         hide-selected
         fill-input
         :class="{ required: $attrs.required }"
+        @input-value="locationFilter"
+        :default-filter="false"
     >
         <template #form>
             <CreateNewPostcode @on-data-saved="onPostcodeCreated($event)" />
@@ -118,9 +158,7 @@ function showLabel(data){
             <QItem v-bind="scope.itemProps">
                 <QItemSection v-if="scope.opt">
                     <QItemLabel>{{ scope.opt.code }}</QItemLabel>
-                    <QItemLabel caption
-                        >{{ showLabel(scope.opt)}}</QItemLabel
-                    >
+                    <QItemLabel caption>{{ showLabel(scope.opt) }}</QItemLabel>
                 </QItemSection>
             </QItem>
         </template>
@@ -137,5 +175,5 @@ function showLabel(data){
 <i18n>
 es:
     Location: Ubicación
-    Search by postalCode or town (at least 3 characters): Buscar por código postal o nombre ( al menos 3 letras)
+    Search by postalCode, town, province or country: Buscar por código postal, ciudad o país
 </i18n>