vue Address: listen to adresssSelector to automatically fill street/number fields

This commit is contained in:
Mathieu Jaumotte 2021-09-02 19:15:40 +02:00
parent 34df295801
commit 90faa27461

View File

@ -4,6 +4,8 @@
<VueMultiselect
id="addressSelector"
v-model="value"
@search-change="listenInputSearch"
ref="addressSelector"
@select="selectAddress"
name="field"
track-by="id"
@ -17,7 +19,8 @@
:options="addresses">
</VueMultiselect>
</div>
<div class="custom-address row g-1" v-if="writeNewAddress || writeNewPostalCode">
<div class="custom-address row g-1" v-if="writeNewAddress || writeNewPostalCode || (isEnteredCustomAddress && !isAddressSelectorOpen)">
<div class="col-10">
<div class="form-floating">
<input class="form-control"
@ -60,6 +63,12 @@ export default {
writeNewPostalCode() {
return this.entity.selected.writeNew.postCode;
},
isAddressSelectorOpen() {
return this.$refs.addressSelector.$data.isOpen;
},
isEnteredCustomAddress() {
return this.$data.value !== null && typeof this.$data.value.text !== 'undefined';
},
addresses() {
return this.entity.loaded.addresses;
},
@ -90,6 +99,36 @@ export default {
this.entity.selected.address.streetNumber = value.streetNumber;
this.updateMapCenter(value.point);
},
listenInputSearch(query) {
//console.log('listenInputSearch', query, this.isAddressSelectorOpen);
if (this.isAddressSelectorOpen) {
this.$data.value = { text: query };
} else if (this.isEnteredCustomAddress) {
let addr = this.splitAddress(this.$data.value.text);
this.entity.selected.address.street = addr.street;
this.entity.selected.address.streetNumber = addr.number;
}
},
splitAddress(address) {
let substr = address
.split(',')
.map(s => s.trim());
if (substr.length === 1) {
substr = address.split(' ');
}
let decimal = [];
substr.forEach((s, i) => { decimal[i] = /^\d+$/.test(s) });
if (decimal[0] === true) {
return { number: substr.shift(),
street: substr.join(' ') }
}
else if (decimal[decimal.length - 1] === true) {
return { number: substr.pop(),
street: substr.join(' ') }
}
return { number: '',
street: substr.join(' ') }
},
addAddress() {
this.entity.selected.writeNew.address = true;
}