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

autocomplete tags by searching

Browse Source
This commit is contained in:
lesion
2022-05-25 10:53:01 +02:00
parent 335fa0e00e
commit 601c3f7dc8
1 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
pages/add/_edit.vue
View File

@@ -52,9 +52,9 @@
:prepend-icon="mdiTagMultiple" :prepend-icon="mdiTagMultiple"
chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
no-filter no-filter
:search-input.sync="tagName" @input.native='searchTags'
:delimiters="[',', ';']" :delimiters="[',', ';']"
:items="filteredTags" :items="tags"
:label="$t('common.tags')") :label="$t('common.tags')")
template(v-slot:selection="{ item, on, attrs, selected, parent}") template(v-slot:selection="{ item, on, attrs, selected, parent}")
v-chip(v-bind="attrs" close :close-icon='mdiCloseCircle' @click:close='parent.selectItem(item)' v-chip(v-bind="attrs" close :close-icon='mdiCloseCircle' @click:close='parent.selectItem(item)'
@@ -68,7 +68,8 @@
</template> </template>
<script> <script>
import { mapActions, mapState } from 'vuex' import { mapState } from 'vuex'
import debounce from 'lodash/debounce'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { mdiFileImport, mdiFormatTitle, mdiTagMultiple, mdiCloseCircle } from '@mdi/js' import { mdiFileImport, mdiFormatTitle, mdiTagMultiple, mdiCloseCircle } from '@mdi/js'
@@ -133,7 +134,7 @@ export default {
tags: [], tags: [],
media: [] media: []
}, },
tagName: '', tags: [],
page: { month, year }, page: { month, year },
fileList: [], fileList: [],
id: null, id: null,
@@ -149,7 +150,7 @@ export default {
} }
}, },
computed: { computed: {
...mapState(['tags', 'settings']), ...mapState(['settings']),
filteredTags () { filteredTags () {
if (!this.tagName) { return this.tags.slice(0, 10).map(t => t.tag) } if (!this.tagName) { return this.tags.slice(0, 10).map(t => t.tag) }
const tagName = this.tagName.trim().toLowerCase() const tagName = this.tagName.trim().toLowerCase()
@@ -157,7 +158,10 @@ export default {
} }
}, },
methods: { methods: {
...mapActions(['updateMeta']), searchTags: debounce( async function(ev) {
const search = ev.target.value
this.tags = await this.$axios.$get(`/tag?search=${search}`)
}),
eventImported (event) { eventImported (event) {
this.event = Object.assign(this.event, event) this.event = Object.assign(this.event, event)
this.$refs.where.selectPlace({ name: event.place.name, create: true }) this.$refs.where.selectPlace({ name: event.place.name, create: true })
@@ -213,7 +217,6 @@ export default {
} else { } else {
await this.$axios.$post('/event', formData) await this.$axios.$post('/event', formData)
} }
this.updateMeta()
this.$router.push('/') this.$router.push('/')
this.$nextTick(() => { this.$nextTick(() => {
this.$root.$message(this.$auth.loggedIn ? (this.edit ? 'event.saved' : 'event.added') : 'event.added_anon', { color: 'success' }) this.$root.$message(this.$auth.loggedIn ? (this.edit ? 'event.saved' : 'event.added') : 'event.added_anon', { color: 'success' })