gancio/components/WhereInput.vue

117 lines
3.6 KiB
Vue
Raw Normal View History

2020-10-25 00:31:38 +02:00
<template lang="pug">
2022-04-27 12:34:58 +02:00
v-row
v-col(cols=12 md=6)
v-combobox(ref='place'
:rules="[$validators.required('common.where')]"
:label="$t('common.where')"
:hint="$t('event.where_description')"
:prepend-icon='mdiMapMarker'
no-filter
:value='value.name'
hide-no-data
@input.native='search'
persistent-hint
:items="places"
2022-06-18 01:10:52 +02:00
@focus='search'
2022-04-27 12:34:58 +02:00
@change='selectPlace')
template(v-slot:item="{ item, attrs, on }")
v-list-item(v-bind='attrs' v-on='on')
2022-06-21 22:45:46 +02:00
v-list-item-content(two-line v-if='item.create && search')
2022-04-27 12:34:58 +02:00
v-list-item-title <v-icon color='primary' v-text='mdiPlus' :aria-label='$t("common.add")'></v-icon> {{item.name}}
v-list-item-content(two-line v-else)
v-list-item-title(v-text='item.name')
v-list-item-subtitle(v-text='item.address')
2020-10-25 00:31:38 +02:00
2022-04-27 12:34:58 +02:00
v-col(cols=12 md=6)
v-text-field(ref='address'
:prepend-icon='mdiMap'
:disabled='disableAddress'
:rules="[ v => disableAddress ? true : $validators.required('common.address')(v)]"
:label="$t('common.address')"
@change="changeAddress"
:value="value.address")
2020-10-25 00:31:38 +02:00
</template>
<script>
import { mdiMap, mdiMapMarker, mdiPlus } from '@mdi/js'
import debounce from 'lodash/debounce'
2020-10-25 00:31:38 +02:00
export default {
name: 'WhereInput',
2020-10-27 11:56:47 +01:00
props: {
value: { type: Object, default: () => ({}) }
2020-10-27 11:56:47 +01:00
},
2020-10-25 00:31:38 +02:00
data () {
return {
mdiMap, mdiMapMarker, mdiPlus,
place: { },
placeName: '',
places: [],
2020-10-25 00:31:38 +02:00
disableAddress: true
}
},
computed: {
filteredPlaces () {
if (!this.placeName) { return this.places }
2022-05-03 18:33:20 +02:00
const placeName = this.placeName.trim().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
}
2022-04-27 12:34:58 +02:00
return tmpAddress.includes(placeName)
})
if (!nameMatch) {
matches.unshift({ create: true, name: this.placeName })
}
return matches
}
2020-10-25 00:31:38 +02:00
},
methods: {
search: debounce(async function(ev) {
const search = ev.target.value.trim().toLowerCase()
this.places = await this.$axios.$get(`place?search=${search}`)
2022-06-18 01:10:52 +02:00
if (!search && this.places.length) { return this.places }
const matches = this.places.find(p => search === p.name.toLocaleLowerCase())
if (!matches) {
this.places.unshift({ create: true, name: ev.target.value.trim() })
}
}, 100),
2020-10-25 00:31:38 +02:00
selectPlace (p) {
if (!p) { return }
if (typeof p === 'object' && !p.create) {
2022-05-03 18:33:20 +02:00
this.place.name = p.name.trim()
2020-11-04 10:55:30 +01:00
this.place.address = p.address
this.place.id = p.id
2020-10-25 00:31:38 +02:00
this.disableAddress = true
2020-11-04 10:55:30 +01:00
} else { // this is a new place
this.place.name = p.name || p
const tmpPlace = this.place.name.trim().toLocaleLowerCase()
// search for a place with the same name
const place = this.places.find(p => !p.create && p.name.trim().toLocaleLowerCase() === tmpPlace)
if (place) {
2022-05-03 18:33:20 +02:00
this.place.name = place.name
this.place.id = place.id
this.place.address = place.address
this.disableAddress = true
} else {
delete this.place.id
this.place.address = ''
this.disableAddress = false
this.$refs.place.blur()
this.$refs.address.focus()
}
2020-10-25 00:31:38 +02:00
}
2020-11-04 10:55:30 +01:00
this.$emit('input', { ...this.place })
2020-10-25 00:31:38 +02:00
},
changeAddress (v) {
this.place.address = v
2020-11-04 10:55:30 +01:00
this.$emit('input', { ...this.place })
2020-10-25 00:31:38 +02:00
}
}
}
</script>