gancio-upstream/components/Search.vue
2020-11-13 00:13:44 +01:00

74 lines
2.4 KiB
Vue

<template lang="pug">
v-container
v-switch.mt-0(
v-if='recurrentFilter && settings.allow_recurrent_event'
inset color='primary'
:label="$t('event.show_recurrent')"
@change="v => $emit('showrecurrent', v)")
v-autocomplete.mt-0(
:label='$t("common.search")'
:items='keywords'
@change='change'
:value='selectedFilters'
clearable
:search-input.sync='search'
item-text='label'
return-object
chips single-line
multiple)
template(v-slot:selection="data")
v-chip(v-bind="data.attrs"
:input-value="data.selected")
v-avatar(left)
v-icon {{data.item.type === 'place' ? 'mdi-map-marker' : 'mdi-tag' }}
span {{ data.item.label }}
template(v-slot:item='{ item }')
v-list-item-avatar
v-icon {{item.type === 'place' ? 'mdi-map-marker' : 'mdi-tag' }}
v-list-item-content
v-list-item-title(v-text='item.label')
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'Search',
props: {
pastFilter: { type: Boolean, default: true },
recurrentFilter: { type: Boolean, default: true },
filters: { type: Object, default: () => {} }
},
data () {
return {
tmpfilter: null,
search: ''
}
},
computed: {
...mapState(['tags', 'places', 'settings']),
selectedFilters () {
const tags = this.tags.filter(t => this.filters.tags.includes(t.tag)).map(t => ({ type: 'tag', label: t.tag, weigth: t.weigth, id: t.tag }))
const places = this.places.filter(p => this.filters.places.includes(p.id))
.map(p => ({ type: 'place', label: p.name, weigth: p.weigth, id: p.id }))
const keywords = tags.concat(places).sort((a, b) => b.weigth - a.weigth)
return keywords
},
keywords () {
const tags = this.tags.map(t => ({ type: 'tag', label: t.tag, weigth: t.weigth, id: t.tag }))
const places = this.places.map(p => ({ type: 'place', label: p.name, weigth: p.weigth, id: p.id }))
const keywords = tags.concat(places).sort((a, b) => b.weigth - a.weigth)
return keywords
}
},
methods: {
change (filters) {
filters = {
tags: filters.filter(t => t.type === 'tag').map(t => t.id),
places: filters.filter(p => p.type === 'place').map(p => p.id)
}
this.$emit('update', filters)
}
}
}
</script>