From d0fc3b0f2e4ec62b62a79a72119cd9f97946c712 Mon Sep 17 00:00:00 2001 From: les Date: Thu, 21 Jan 2021 01:11:08 +0100 Subject: [PATCH] cleaning where selection / creation of a new place --- pages/add/WhereInput.vue | 50 ++++++++++++++++++++++++++++------------ 1 file changed, 35 insertions(+), 15 deletions(-) diff --git a/pages/add/WhereInput.vue b/pages/add/WhereInput.vue index 035b2eae..b87bb187 100644 --- a/pages/add/WhereInput.vue +++ b/pages/add/WhereInput.vue @@ -4,17 +4,20 @@ :rules="[$validators.required('common.where')]" :label="$t('common.where')" :hint="$t('event.where_description')" - :hide-no-data="!place._name" - :search-input.sync="place._name" + :search-input.sync="placeName" prepend-icon='mdi-map-marker' persistent-hint :value="value.name" - :items="places" + :items="filteredPlaces" + no-filter item-text='name' @change='selectPlace') - template(v-slot:no-data) - v-list-item(@click='createPlace') - v-list-item-content Create {{place._name}} + template(v-slot:item="{ item }") + v-list-item-content(two-line v-if='item.create') + v-list-item-title mdi-plus {{item.name}} + v-list-item-content(two-line v-else) + v-list-item-title {{item.name}} + v-list-item-subtitle {{item.address}} v-text-field.col-md-6(ref='address' prepend-icon='mdi-map' @@ -35,22 +38,43 @@ export default { }, data () { return { - place: { _name: '' }, + place: { }, + placeName: '', disableAddress: true } }, computed: { - ...mapState(['places']) + ...mapState(['places']), + filteredPlaces () { + if (!this.placeName) { return this.places } + const placeName = this.placeName.toLowerCase() + let nameMatch = false + const matches = this.places.filter(p => { + const tmpName = p.name.toLowerCase() + const tmpAddress = p.address.toLowerCase() + if (tmpName.includes(placeName)) { + if (tmpName === placeName) { nameMatch = true } + return true + } + if (tmpAddress.includes(placeName)) { return true } + return false + }) + if (!nameMatch) { + matches.unshift({ create: true, name: this.placeName }) + } + return matches + } }, methods: { selectPlace (p) { - if (typeof p === 'object') { - if (p === null) { return } + if (!p) { return } + if (typeof p === 'object' && !p.create) { this.place.name = p.name this.place.address = p.address this.disableAddress = true } else { // this is a new place - this.place.name = p + this.place.name = p.name || p + this.place.address = '' this.disableAddress = false this.$refs.place.blur() this.$refs.address.focus() @@ -60,10 +84,6 @@ export default { changeAddress (v) { this.place.address = v this.$emit('input', { ...this.place }) - }, - createPlace (v) { - this.$refs.place.blur() - this.$refs.address.focus() } } }