From 810dd81b34669426630453370dde37ec00beaa4f Mon Sep 17 00:00:00 2001 From: Javier Segarra Date: Fri, 12 Jan 2024 09:58:12 +0100 Subject: [PATCH 01/26] refs #6280 feat VnLocation approach --- src/components/common/VnLocation.vue | 179 +++++++++++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 src/components/common/VnLocation.vue diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue new file mode 100644 index 000000000..70e818ade --- /dev/null +++ b/src/components/common/VnLocation.vue @@ -0,0 +1,179 @@ + + + + + + +es: + Location: Ubicación + From 68ba851e6e9f5c2b5a7e47b3b33df2b8ce1fddf3 Mon Sep 17 00:00:00 2001 From: Javier Segarra Date: Fri, 12 Jan 2024 09:58:24 +0100 Subject: [PATCH 02/26] refs #6280 feat use VnLocation in CustomerCreate --- src/pages/Customer/CustomerCreate.vue | 96 ++------------------------- 1 file changed, 7 insertions(+), 89 deletions(-) diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue index cfaef0855..f6ac6a165 100644 --- a/src/pages/Customer/CustomerCreate.vue +++ b/src/pages/Customer/CustomerCreate.vue @@ -2,12 +2,11 @@ import { reactive, ref } from 'vue'; import { useI18n } from 'vue-i18n'; -import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue'; import FetchData from 'components/FetchData.vue'; import FormModel from 'components/FormModel.vue'; import VnRow from 'components/ui/VnRow.vue'; import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; -import VnSelectCreate from 'src/components/common/VnSelectCreate.vue'; +import VnLocation from 'src/components/common/VnLocation.vue'; import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue'; const { t } = useI18n(); @@ -133,96 +132,15 @@ const onPostcodeCreated = async () => {
- - - - -
-
- - - - -
- - -
- - - -
-
- + v-model="data.location" + @update:model-value="(data)=> console.log(data)" + > +
+
From 67d4471f42eb2d125103ad42f8c65d3e44e4fe70 Mon Sep 17 00:00:00 2001 From: Javier Segarra Date: Fri, 12 Jan 2024 10:57:50 +0100 Subject: [PATCH 03/26] refs #6280 feat: improve VnLocation --- src/components/common/VnLocation.vue | 7 +++-- src/components/common/VnSelectFilter.vue | 38 ++++++++++++++++++++++-- 2 files changed, 41 insertions(+), 4 deletions(-) diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue index 70e818ade..3a296e168 100644 --- a/src/components/common/VnLocation.vue +++ b/src/components/common/VnLocation.vue @@ -135,16 +135,19 @@ function showLabel(data){ auto-load url="Countries" /> + [], + }, + filterRules: { + type: [Array, Function], default: () => [], }, isClearable: { @@ -47,16 +51,46 @@ function setOptions(data) { myOptions.value = JSON.parse(JSON.stringify(data)); myOptionsOriginal.value = JSON.parse(JSON.stringify(data)); } +function deepFind(obj, path) { + var paths = path.split('.') + , current = obj + , i; + + for (i = 0; i < paths.length; ++i) { + if (current[paths[i]] == undefined) { + return undefined; + } else { + current = current[paths[i]]; + } + } + return current; +} setOptions(options.value); const filter = (val, options) => { const search = val.toString().toLowerCase(); if (!search) return options; + if($props.filterRules.length) { + const passSomeRule = $props.filterRules.some((rule) => { + if(typeof rule === 'object') return true + const cond = eval(rule) + return cond; + }); + if(!passSomeRule) return options + } return options.filter((row) => { if ($props.filterOptions.length) { return $props.filterOptions.some((prop) => { - const propValue = String(row[prop]).toLowerCase(); + const passRules = $props.filterRules + .filter(rule=>typeof rule === 'object') + .every(rule=>{ + const propExists = Object.keys(rule).includes(prop); + if(!propExists) return false; + return eval(prop.concat(rule[prop])) + }); + const propValue = String(deepFind(row,prop)).toLowerCase(); + if(passRules) return propValue.includes(search); }); } From 4b3ca3bbd97872f8c8935f0ec30ee3d442f14788 Mon Sep 17 00:00:00 2001 From: Javier Segarra Date: Fri, 12 Jan 2024 11:27:54 +0100 Subject: [PATCH 04/26] refs #6280 feat: return geoFk VnLocation --- src/components/common/VnLocation.vue | 51 +++--------------------- src/components/common/VnSelectFilter.vue | 9 ----- 2 files changed, 5 insertions(+), 55 deletions(-) diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue index 3a296e168..5c41144ac 100644 --- a/src/components/common/VnLocation.vue +++ b/src/components/common/VnLocation.vue @@ -2,7 +2,6 @@ import { ref, toRefs, computed, watch } from 'vue'; import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue'; import VnSelectCreate from 'components/common/VnSelectCreate.vue'; -import VnSelectFilter from 'components/common/VnSelectFilter.vue'; import FetchData from 'components/FetchData.vue'; const emit = defineEmits(['update:modelValue', 'update:options']); import { useI18n } from 'vue-i18n'; @@ -44,14 +43,10 @@ const $props = defineProps({ default: true, }, }); -const locationsRef = ref(); -const locationsRefFilter = ref({ fields: ['code', 'nickname'], limit: 30 }); -const { optionLabel, optionValue, options } = toRefs($props); +const { options } = toRefs($props); const myOptions = ref([]); const myOptionsOriginal = ref([]); -const vnSelectRef = ref(); -const showForm = ref(false); const value = computed({ get() { @@ -67,42 +62,6 @@ function setOptions(data) { myOptionsOriginal.value = JSON.parse(JSON.stringify(data)); } setOptions(options.value); -const filter = (val, options) => { - const search = val.toString().toLowerCase(); - - if (!search) return options; - // if (!search.length < 2) return options; - - return options -}; - -const filterHandler = (val, update) => { - update( - () => { - // if (val.length>2) - myOptions.value = filter(val, myOptionsOriginal.value); - }, - (ref) => { - if (val !== '' && ref.options.length > 0) { - ref.setOptionIndex(-1); - ref.moveOptionSelection(1, true); - } - } - ); -}; - -function locationFilter(val) { - let where = { limit: 30 }; - let params = {}; - let key = 'nickname'; - - if (new RegExp(/\d/g).test(val)) { - key = 'id'; - } - params = { [key]: { like: `%${val}%` } }; - where = Object.assign(where, params); - locationsRef.value.fetch({ where }); -} watch(options, (newValue) => { setOptions(newValue); }); @@ -135,19 +94,19 @@ function showLabel(data){ auto-load url="Countries" /> - { if (!search) return options; if($props.filterRules.length) { const passSomeRule = $props.filterRules.some((rule) => { - if(typeof rule === 'object') return true const cond = eval(rule) return cond; }); @@ -82,15 +81,7 @@ const filter = (val, options) => { return options.filter((row) => { if ($props.filterOptions.length) { return $props.filterOptions.some((prop) => { - const passRules = $props.filterRules - .filter(rule=>typeof rule === 'object') - .every(rule=>{ - const propExists = Object.keys(rule).includes(prop); - if(!propExists) return false; - return eval(prop.concat(rule[prop])) - }); const propValue = String(deepFind(row,prop)).toLowerCase(); - if(passRules) return propValue.includes(search); }); } From 20835471a3a1c392b080f51295e0bf49c92a71cf Mon Sep 17 00:00:00 2001 From: Javier Segarra Date: Mon, 15 Jan 2024 09:14:42 +0100 Subject: [PATCH 05/26] refs #6280 feat: handle option selected from VnLocation --- src/components/common/VnLocation.vue | 4 ++-- src/pages/Customer/CustomerCreate.vue | 18 +++++++++++++----- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue index 5c41144ac..e91c78430 100644 --- a/src/components/common/VnLocation.vue +++ b/src/components/common/VnLocation.vue @@ -98,9 +98,8 @@ function showLabel(data){ v-model="value" :options="postcodesOptions" :label="t('Location')" - option-value="geoFk" :option-label="showLabel" - :placeholder="t('Min. 3 char')" + :placeholder="t('Search by postalCode or town (at least 3 characters')" v-bind="$attrs" emit-value map-options @@ -138,4 +137,5 @@ function showLabel(data){ es: Location: Ubicación + Search by postalCode or town (at least 3 characters): Buscar por código postal o nombre ( al menos 3 letras) diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue index f6ac6a165..3afda7fac 100644 --- a/src/pages/Customer/CustomerCreate.vue +++ b/src/pages/Customer/CustomerCreate.vue @@ -36,9 +36,13 @@ const provincesLocationOptions = ref([]); const countriesOptions = ref([]); const postcodesOptions = ref([]); -const onPostcodeCreated = async () => { - postcodeFetchDataRef.value.fetch(); -}; + +function handleLocation(data, { city, postcode, provinceFk, countryFk }) { + data.postcode = postcode; + data.city = city; + data.provinceFk = provinceFk; + data.countryFk = countryFk; +}