cleaning where selection / creation of a new place

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="placeName"
-      :search-input.sync="place._name"
       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)
+      template(v-slot:item="{ item }")
-        v-list-item(@click='createPlace')
+        v-list-item-content(two-line v-if='item.create')
-          v-list-item-content Create {{place._name}}
+          v-list-item-title <v-icon color='primary'>mdi-plus</v-icon> {{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) { return }
-        if (p === null) { 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()
     }
   }
 }