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

init search api usage in Search component

Browse Source
This commit is contained in:
lesion
2022-05-25 10:56:21 +02:00
parent b2fe976998
commit 20274c1e74
2 changed files with 79 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
components/Search.vue
View File

@@ -1,24 +1,24 @@
<template lang="pug">
v-container.pt-0.pt-md-2
v-switch.mt-0(
<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-autocomplete(
:label="$t('event.show_recurrent')"/> -->
<v-combobox
:label='$t("common.search")'
:items='keywords'
:items='items'
no-filter
@input='input'
hide-details
@change='change'
:value='selectedFilters'
clearable
:search-input.sync='search'
item-text='label'
return-object
chips single-line
multiple)
template(v-slot:selection="data")
: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'
@@ -26,12 +26,20 @@
: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-icon(v-text="item.type === 'place' ? mdiMapMarker : mdiTag")
v-list-item-content
v-list-item-title(v-text='item.label')
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>
<script>
@@ -41,61 +49,67 @@ export default {
name: 'Search',
props: {
recurrentFilter: { type: Boolean, default: true },
filters: { type: Object, default: () => {} }
},
data () {
return {
mdiTag, mdiMapMarker, mdiCloseCircle,
tmpfilter: null,
item: '',
items: [],
search: ''
}
},
watch: {
async search (search) {
if (!search) return
this.items = await this.$axios.$get('/event/search', { params: { search } })
}
},
computed: {
...mapState(['tags', 'places', '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
}
...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
// 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)
}
this.$emit('update', filters)
},
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),
show_recurrent: this.filters.show_recurrent
}
this.$emit('update', filters)
}
}
}
</script>

2
pages/index.vue
View File

@@ -17,7 +17,7 @@ v-container#home(fluid)
Calendar(@dayclick='dayChange' @monthchange='monthChange' :events='filteredEvents')
.col.pt-0.pt-md-2
Search(:filters='filters' @update='updateFilters')
Search(@tag:selected="tag => $router.push(`/tag/${tag.tag}`)")
v-chip(v-if='selectedDay' close :close-icon='mdiCloseCircle' @click:close='dayChange()') {{selectedDay}}
//- Events