encrypt/gancio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve search inside sharing

Browse Source
This commit is contained in:
lesion
2022-05-31 15:22:42 +02:00
parent 8e33ef9096
commit c1c8af0727
1 changed files with 72 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
components/Search.vue
View File

@@ -1,115 +1,94 @@
<template> <template lang="pug">
<v-container class='pt-0.pt-md-2'> v-container.pt-0.pt-md-2
<!-- <v-switch class='mt-0' v-switch.mt-0(
v-if='recurrentFilter && settings.allow_recurrent_event' v-if='settings.allow_recurrent_event'
v-model='showRecurrent' v-model='showRecurrent'
inset color='primary' inset color='primary'
hide-details hide-details
:label="$t('event.show_recurrent')"/> --> :label="$t('event.show_recurrent')")
v-autocomplete(
<v-combobox v-model='meta'
:label='$t("common.search")' :label='$t("common.search")'
:items='items' :filter='filter'
no-filter cache-items
@input='input' hide-details
hide-details color='primary'
:menu-props="{ maxWidth: '400' }" clearable
:search-input.sync='search'> :clear-icon='mdiCloseCircle'
<!-- <template v-slot:selection="{ item, on, attrs, selected, parent}"> hide-selected
<span>{{selected}}</span> small-chips
</template> --> :items='items'
<!-- template(v-slot:selection="data") @change='change'
v-chip(v-bind="data.attrs" hide-no-data
close @input.native='search'
:close-icon='mdiCloseCircle' item-text='label'
@click:close='remove(data.item)' return-object
:input-value="data.selected") chips
v-avatar(left) multiple)
v-icon(v-text="data.item.type === 'place' ? mdiMapMarker : mdiTag") template(v-slot:selection="{ attrs, item }")
span {{ data.item.label }} --> v-chip(v-bind="attrs"
<template v-slot:item='{ item }' > close
<v-list-item-avatar v-if="['place','tag'].includes(item.type)"> @click:close='remove(item)'
<v-icon small v-text="item.type === 'place' ? mdiMapMarker : mdiTag" /> :close-icon='mdiCloseCircle')
</v-list-item-avatar> v-avatar(left)
<v-list-item-content v-if="item.type === 'event'"> v-icon(v-text="item.type === 'place' ? mdiMapMarker : mdiTag")
<v-list-item-title v-text='item.title'/> span {{ item.label }}
<v-list-item-subtitle>{{item.start_datetime | from}} @{{item.place.name}}</v-list-item-subtitle> template(v-slot:item='{ item }')
</v-list-item-content> v-list-item-avatar
<v-list-item-title v-else-if='item.type==="tag"' v-text='item.tag' /> v-icon(v-text="item.type === 'place' ? mdiMapMarker : mdiTag")
<v-list-item-title v-else-if='item.type==="place"' v-text='item.name' /> v-list-item-content
</template> v-list-item-title(v-text='item.label')
</v-combobox> v-list-item-subtitle(v-if='item.type ==="place"' v-text='item.address')
</v-container>
</template> </template>
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
import { mdiMapMarker, mdiTag, mdiCloseCircle } from '@mdi/js' import { mdiMapMarker, mdiTag, mdiCloseCircle } from '@mdi/js'
import debounce from 'lodash/debounce'
export default { export default {
name: 'Search', name: 'Search',
props: { props: {
recurrentFilter: { type: Boolean, default: true }, filters: { type: Object, default: () => ({}) }
}, },
data () { data () {
return { return {
mdiTag, mdiMapMarker, mdiCloseCircle, mdiTag, mdiMapMarker, mdiCloseCircle,
item: '', meta: [],
items: [], items: [],
search: ''
}
},
watch: {
async search (search) {
if (!search) return
this.items = await this.$axios.$get('/event/search', { params: { search } })
} }
}, },
computed: { computed: {
...mapState(['settings']), ...mapState(['settings']),
// showRecurrent: { showRecurrent: {
// get () { get () {
// return this.filters.show_recurrent return this.filters.show_recurrent
// }, },
// set (v) { set (v) {
// const filters = { this.change(v)
// tags: this.filters.tags,
// places: this.filters.places,
// show_recurrent: v
// }
// this.$emit('update', filters)
// }
// },
// 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: {
// remove (item) {
// const filters = {
// tags: item.type === 'tag' ? this.filters.tags.filter(f => f !== item.id) : this.filters.tags,
// places: item.type === 'place' ? this.filters.places.filter(f => f !== item.id) : this.filters.places,
// show_recurrent: this.filters.show_recurrent
// }
// this.$emit('update', filters)
// },
input (item) {
if (typeof item ==='object') {
this.$emit(`${item.type}:selected`, item)
} else {
this.$emit('update', item)
} }
}, },
},
methods: {
filter (item, queryText, itemText) {
return itemText.toLocaleLowerCase().indexOf(queryText.toLocaleLowerCase()) > -1 ||
item.address && item.address.toLocaleLowerCase().indexOf(queryText.toLocaleLowerCase()) > -1
},
search: debounce(async function(search) {
this.items = await this.$axios.$get(`/event/meta?search=${search.target.value}`)
}, 100),
remove (item) {
this.meta = this.meta.filter(m => m.type !== item.type || m.type === 'place' ? m.id !== item.id : m.tag !== item.tag)
this.change()
},
change (show_recurrent) {
const filters = {
tags: this.meta.filter(t => t.type === 'tag').map(t => t.label),
places: this.meta.filter(p => p.type === 'place').map(p => p.id),
show_recurrent: typeof show_recurrent !== 'undefined' ? show_recurrent : this.filters.show_recurrent
}
this.$emit('update', filters)
}
} }
} }
</script> </script>