NoLog.cz/gancio-upstream
6
0
Fork 0
mirror of https://framagit.org/les/gancio.git synced 2025-01-31 16:42:22 +01:00
Code Issues Projects Releases Packages 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
No known key found for this signature in database
GPG key ID: 352918250B012177
1 changed files with 72 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

165
components/Search.vue
View file

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