mirror of
https://framagit.org/les/gancio.git
synced 2025-01-31 16:42:22 +01:00
a new search experience
This commit is contained in:
les
parent
fab0ac8030
commit
eb65ccbf72
1 changed files with 78 additions and 29 deletions
|
|
@ -1,33 +1,35 @@
|
|||
<template lang="pug">
|
||||
div.ml-2.mt-1.text-center
|
||||
el-main
|
||||
//- el-switch.mb-1(v-if='$auth.loggedIn'
|
||||
//- active-text='solo miei'
|
||||
//- inactive-text='tutti'
|
||||
//- inactive-color='lightgreen'
|
||||
//- v-model='onlyMine'
|
||||
//- )
|
||||
el-switch.mt-1.mb-1.ml-2.d-block(
|
||||
el-switch.mt-1.mb-2.ml-2(
|
||||
v-if='recurrentFilter && settings.allow_recurrent_event'
|
||||
inactive-text=''
|
||||
:active-text="$t('event.recurrent_event_too')"
|
||||
inactive-color='lightgreen'
|
||||
:active-text="$t('event.show_recurrent')"
|
||||
v-model='showRecurrent'
|
||||
)
|
||||
el-switch.mt-1.mb-1.ml-2.d-block(
|
||||
el-switch.mt-1.mb-2.ml-2(
|
||||
v-if='pastFilter'
|
||||
:inactive-text="$t('event.only_future')"
|
||||
:active-text="$t('event.past_too')"
|
||||
inactive-color='lightgreen'
|
||||
:active-text="$t('event.show_past')"
|
||||
v-model='showPast'
|
||||
)
|
||||
client-only
|
||||
el-select.search(v-model='filter'
|
||||
multiple
|
||||
filterable collapse-tags default-first-option
|
||||
:placeholder='$t("common.search")')
|
||||
el-option(v-for='(keyword, id) in keywords' :key='keyword.value'
|
||||
:label='keyword.label' :value='keyword.value')
|
||||
|
||||
el-autocomplete.mb-1#search.inline-input(placeholder='Cerca' prefix-icon='el-icon-search'
|
||||
highlight-first-item
|
||||
v-model='search' :debounce='200'
|
||||
:fetch-suggestions='querySearch' clearable
|
||||
@select='addFilter')
|
||||
template(slot-scope='{ item }')
|
||||
span.float-left {{ item.label }}
|
||||
i.float-right.el-icon-place(v-if='item.type==="place"')
|
||||
i.float-right.el-icon-collection-tag(v-if='item.type==="tag"')
|
||||
br
|
||||
el-tag.mr-1(type='success' v-for='f in filter'
|
||||
disable-transitions closable :key='f.type + f.id'
|
||||
@close='removeFilter(f)') {{f.label}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -40,16 +42,15 @@ export default {
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
onlyMine: false
|
||||
search: ''
|
||||
}
|
||||
},
|
||||
methods: mapActions(['setSearchPlaces', 'setSearchTags', 'showPastEvents', 'showRecurrentEvents']),
|
||||
computed: {
|
||||
...mapState(['tags', 'places', 'filters', 'settings']),
|
||||
// TOFIX: optimize
|
||||
keywords () {
|
||||
const tags = this.tags.map(t => ({ value: 't' + t.tag, label: t.tag, weigth: t.weigth }))
|
||||
const places = this.places.map(p => ({ value: 'p' + p.id, label: p.name, weigth: p.weigth }))
|
||||
const tags = this.tags.map(t => ({ type: 'tag', label: t, weigth: t.weigth, id: t }))
|
||||
const places = this.places.map(p => ({ type: 'place', label: p.name, weigth: p.weigth, id: p.id }))
|
||||
return tags.concat(places).sort((a, b) => b.weigth - a.weigth)
|
||||
},
|
||||
showPast: {
|
||||
|
|
@ -60,17 +61,65 @@ export default {
|
|||
set (value) { this.showRecurrentEvents(value) },
|
||||
get () { return this.filters.show_recurrent_events }
|
||||
},
|
||||
filter: {
|
||||
set (filters) {
|
||||
const tags = filters.filter(f => f[0] === 't').map(t => t.slice(1))
|
||||
this.setSearchTags(tags)
|
||||
const places = filters.filter(f => f[0] === 'p').map(p => +p.slice(1))
|
||||
this.setSearchPlaces(places)
|
||||
},
|
||||
get () {
|
||||
return this.filters.tags.map(t => 't' + t).concat(this.filters.places.map(p => 'p' + p))
|
||||
filter () {
|
||||
// set (filters) {
|
||||
// const tags = filters.filter(f => f[0] === 't').map(t => t.slice(1))
|
||||
// this.setSearchTags(tags)
|
||||
// const places = filters.filter(f => f[0] === 'p').map(p => +p.slice(1))
|
||||
// this.setSearchPlaces(places)
|
||||
// },
|
||||
// get () {
|
||||
return this.filters.tags.concat(this.filters.places)
|
||||
// }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['setSearchPlaces', 'setSearchTags',
|
||||
'showPastEvents', 'showRecurrentEvents', 'updateEvent']),
|
||||
removeFilter (item) {
|
||||
if (item.type === 'tag') {
|
||||
this.setSearchTags(this.filters.tags.filter(t => t.id !== item.id))
|
||||
} else {
|
||||
this.setSearchPlaces(this.filters.places.filter(p => p.id !== item.id))
|
||||
}
|
||||
},
|
||||
querySearch (queryString, cb) {
|
||||
const ret = this.keywords
|
||||
.filter(k => !this.filter.map(f => f.id).includes(k.id))
|
||||
.filter(k => k.label.toLowerCase().includes(queryString))
|
||||
.slice(0, 5)
|
||||
cb(ret)
|
||||
},
|
||||
addFilter (item) {
|
||||
if (item.type === 'tag') {
|
||||
this.setSearchTags(this.filters.tags.concat(item))
|
||||
} else {
|
||||
this.setSearchPlaces(this.filters.places.concat(item))
|
||||
}
|
||||
this.search = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='less'>
|
||||
#search {
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
border-bottom: 2px solid lightgray;
|
||||
color: white;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.el-switch__label {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.el-switch__label.is-active {
|
||||
color: lightgreen;
|
||||
}
|
||||
|
||||
.el-switch__core {
|
||||
background-color: #555;
|
||||
border-color: #777;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue