ami/tl-vikunja
1
0
Fork 0
Code

feat(filter): autocomplete for projects

Browse Source
This commit is contained in:
kolaente 2024-03-08 12:01:12 +01:00
parent b1d9dc6fc3
commit 9eac746984
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
1 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/project/partials/FilterInput.vue
View File

@ -10,6 +10,7 @@ import {useLabelStore} from '@/stores/labels'
import XLabel from '@/components/tasks/partials/label.vue'
import User from '@/components/misc/user.vue'
import ProjectUserService from '@/services/projectUsers'
import {useProjectStore} from '@/stores/projects'
const {
projectId,
@ -55,6 +56,7 @@ const labelFields = [
const autocompleteFields = [
...labelFields,
...assigneeFields,
'project',
]
const availableFilterFields = [
@ -212,9 +214,10 @@ function updateDateInQuery(newDate: string) {
const autocompleteMatchPosition = ref(0)
const autocompleteMatchText = ref('')
const autocompleteResultType = ref<'labels' | 'assignees' | null>(null)
const autocompleteResultType = ref<'labels' | 'assignees' | 'projects' | null>(null)
const autocompleteResults = ref<any[]>([])
const labelStore = useLabelStore()
const projectStore = useProjectStore()
function handleFieldInput(e, autocompleteOnInput) {
const cursorPosition = filterInput.value.selectionStart
@ -241,6 +244,10 @@ function handleFieldInput(e, autocompleteOnInput) {
.then(users => autocompleteResults.value = users.length > 1 ? users : [])
}
}
if (!projectId && matched.startsWith('project')) {
autocompleteResultType.value = 'projects'
autocompleteResults.value = projectStore.searchProject(keyword)
}
autocompleteMatchText.value = keyword
autocompleteMatchPosition.value = prefix.length - 1
}
@ -310,7 +317,7 @@ function autocompleteSelect(value) {
:user="item"
:avatar-size="25"
/>
<template v-else> {{ item }}</template>
<template v-else> {{ item.title }}</template>
</template>
</AutocompleteDropdown>
</div>