feat: quick-actions script setup (#2478)
Co-authored-by: Dominik Pschenitschni <mail@celement.de> Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2478 Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de> Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
Dominik Pschenitschni
konrad
parent
9807858436
commit
386fd79b49
@ -13,7 +13,7 @@
|
||||
:placeholder="placeholder"
|
||||
@keyup="search"
|
||||
ref="searchInput"
|
||||
@keydown.down.prevent="() => select(0, 0)"
|
||||
@keydown.down.prevent="select(0, 0)"
|
||||
@keyup.prevent.delete="unselectCmd"
|
||||
@keyup.prevent.enter="doCmd"
|
||||
@keyup.prevent.esc="closeQuickActions"
|
||||
@ -35,13 +35,14 @@
|
||||
<BaseButton
|
||||
v-for="(i, key) in r.items"
|
||||
:key="key"
|
||||
:ref="`result-${k}_${key}`"
|
||||
@keydown.up.prevent="() => select(k, key - 1)"
|
||||
@keydown.down.prevent="() => select(k, key + 1)"
|
||||
@click.prevent.stop="() => doAction(r.type, i)"
|
||||
@keyup.prevent.enter="() => doAction(r.type, i)"
|
||||
@keyup.prevent.esc="() => $refs.searchInput.focus()"
|
||||
:class="{'is-strikethrough': i.done}"
|
||||
class="result-item-button"
|
||||
:class="{'is-strikethrough': (i as DoAction<ITask>)?.done}"
|
||||
:ref="(el: Element | ComponentPublicInstance | null) => setResultRefs(el, k, key)"
|
||||
@keydown.up.prevent="select(k, key - 1)"
|
||||
@keydown.down.prevent="select(k, key + 1)"
|
||||
@click.prevent.stop="doAction(r.type, i)"
|
||||
@keyup.prevent.enter="doAction(r.type, i)"
|
||||
@keyup.prevent.esc="searchInput?.focus()"
|
||||
>
|
||||
{{ i.title }}
|
||||
</BaseButton>
|
||||
@ -52,23 +53,20 @@
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent} from 'vue'
|
||||
<script setup lang="ts">
|
||||
import {ref, computed, watchEffect, shallowReactive, type ComponentPublicInstance} from 'vue'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
import {useRouter} from 'vue-router'
|
||||
|
||||
import TaskService from '@/services/task'
|
||||
import TeamService from '@/services/team'
|
||||
|
||||
import NamespaceModel from '@/models/namespace'
|
||||
import TeamModel from '@/models/team'
|
||||
|
||||
import ListModel from '@/models/list'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
|
||||
import {getHistory} from '@/modules/listHistory'
|
||||
import {parseTaskText, PrefixMode} from '@/modules/parseTaskText'
|
||||
import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
|
||||
import {PREFIXES} from '@/modules/parseTaskText'
|
||||
|
||||
import {useBaseStore} from '@/stores/base'
|
||||
import {useListStore} from '@/stores/lists'
|
||||
@ -76,429 +74,504 @@ import {useNamespaceStore} from '@/stores/namespaces'
|
||||
import {useLabelStore} from '@/stores/labels'
|
||||
import {useTaskStore} from '@/stores/tasks'
|
||||
|
||||
const TYPE_LIST = 'list'
|
||||
const TYPE_TASK = 'task'
|
||||
const TYPE_CMD = 'cmd'
|
||||
const TYPE_TEAM = 'team'
|
||||
import {getHistory} from '@/modules/listHistory'
|
||||
import {parseTaskText, PrefixMode, PREFIXES} from '@/modules/parseTaskText'
|
||||
import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
|
||||
import {success} from '@/message'
|
||||
|
||||
const CMD_NEW_TASK = 'newTask'
|
||||
const CMD_NEW_LIST = 'newList'
|
||||
const CMD_NEW_NAMESPACE = 'newNamespace'
|
||||
const CMD_NEW_TEAM = 'newTeam'
|
||||
import type {ITeam} from '@/modelTypes/ITeam'
|
||||
import type {ITask} from '@/modelTypes/ITask'
|
||||
import type {INamespace} from '@/modelTypes/INamespace'
|
||||
import type {IList} from '@/modelTypes/IList'
|
||||
|
||||
const SEARCH_MODE_ALL = 'all'
|
||||
const SEARCH_MODE_TASKS = 'tasks'
|
||||
const SEARCH_MODE_LISTS = 'lists'
|
||||
const SEARCH_MODE_TEAMS = 'teams'
|
||||
const {t} = useI18n({useScope: 'global'})
|
||||
const router = useRouter()
|
||||
|
||||
export default defineComponent({
|
||||
name: 'quick-actions',
|
||||
components: {
|
||||
BaseButton,
|
||||
QuickAddMagic,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: '',
|
||||
selectedCmd: null,
|
||||
|
||||
foundTasks: [],
|
||||
taskSearchTimeout: null,
|
||||
taskService: new TaskService(),
|
||||
|
||||
foundTeams: [],
|
||||
teamSearchTimeout: null,
|
||||
teamService: new TeamService(),
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
active() {
|
||||
const active = useBaseStore().quickActionsActive
|
||||
if (!active) {
|
||||
// FIXME: computeds shouldn't have side effects.
|
||||
// create a watcher instead
|
||||
this.reset()
|
||||
}
|
||||
return active
|
||||
},
|
||||
results() {
|
||||
let lists = []
|
||||
const baseStore = useBaseStore()
|
||||
const listStore = useListStore()
|
||||
const namespaceStore = useNamespaceStore()
|
||||
const labelStore = useLabelStore()
|
||||
const taskStore = useTaskStore()
|
||||
|
||||
if (this.searchMode === SEARCH_MODE_ALL || this.searchMode === SEARCH_MODE_LISTS) {
|
||||
const {list} = this.parsedQuery
|
||||
type DoAction<Type = {}> = { type: ACTION_TYPE } & Type
|
||||
|
||||
if (list === null) {
|
||||
lists = []
|
||||
} else {
|
||||
const ncache = {}
|
||||
enum ACTION_TYPE {
|
||||
CMD = 'cmd',
|
||||
TASK = 'task',
|
||||
LIST = 'list',
|
||||
TEAM = 'team',
|
||||
}
|
||||
|
||||
enum COMMAND_TYPE {
|
||||
NEW_TASK = 'newTask',
|
||||
NEW_LIST = 'newList',
|
||||
NEW_NAMESPACE = 'newNamespace',
|
||||
NEW_TEAM = 'newTeam',
|
||||
}
|
||||
|
||||
enum SEARCH_MODE {
|
||||
ALL = 'all',
|
||||
TASKS = 'tasks',
|
||||
LISTS = 'lists',
|
||||
TEAMS = 'teams',
|
||||
}
|
||||
|
||||
const query = ref('')
|
||||
const selectedCmd = ref<Command | null>(null)
|
||||
|
||||
const foundTasks = ref<DoAction<ITask>[]>([])
|
||||
const taskService = shallowReactive(new TaskService())
|
||||
|
||||
const foundTeams = ref<ITeam[]>([])
|
||||
const teamService = shallowReactive(new TeamService())
|
||||
|
||||
const active = computed(() => baseStore.quickActionsActive)
|
||||
|
||||
watchEffect(() => {
|
||||
if (!active.value) {
|
||||
reset()
|
||||
}
|
||||
})
|
||||
|
||||
function closeQuickActions() {
|
||||
baseStore.setQuickActionsActive(false)
|
||||
}
|
||||
|
||||
const foundLists = computed(() => {
|
||||
const { list } = parsedQuery.value
|
||||
if (
|
||||
searchMode.value === SEARCH_MODE.ALL ||
|
||||
searchMode.value === SEARCH_MODE.LISTS ||
|
||||
list === null
|
||||
) {
|
||||
return []
|
||||
}
|
||||
|
||||
const ncache: { [id: ListModel['id']]: INamespace } = {}
|
||||
const history = getHistory()
|
||||
// Puts recently visited lists at the top
|
||||
const allLists = [...new Set([
|
||||
...history.map(l => listStore.getListById(l.id)),
|
||||
const allLists = [
|
||||
...new Set([
|
||||
...history.map((l) => listStore.getListById(l.id)),
|
||||
...listStore.searchList(list),
|
||||
])]
|
||||
]),
|
||||
]
|
||||
|
||||
lists = allLists.filter(l => {
|
||||
return allLists.filter((l) => {
|
||||
if (typeof l === 'undefined' || l === null) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (typeof ncache[l.namespaceId] === 'undefined') {
|
||||
ncache[l.namespaceId] = useNamespaceStore().getNamespaceById(l.namespaceId)
|
||||
ncache[l.namespaceId] = namespaceStore.getNamespaceById(l.namespaceId)
|
||||
}
|
||||
|
||||
return !ncache[l.namespaceId].isArchived
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// FIXME: use fuzzysearch
|
||||
const foundCommands = computed(() => availableCmds.value.filter((a) =>
|
||||
a.title.toLowerCase().includes(query.value.toLowerCase()),
|
||||
))
|
||||
|
||||
interface Result {
|
||||
type: ACTION_TYPE
|
||||
title: string
|
||||
items: DoAction<any>
|
||||
}
|
||||
|
||||
const cmds = this.availableCmds
|
||||
.filter(a => a.title.toLowerCase().includes(this.query.toLowerCase()))
|
||||
|
||||
const results = computed<Result[]>(() => {
|
||||
return [
|
||||
{
|
||||
type: TYPE_CMD,
|
||||
title: this.$t('quickActions.commands'),
|
||||
items: cmds,
|
||||
type: ACTION_TYPE.CMD,
|
||||
title: t('quickActions.commands'),
|
||||
items: foundCommands.value,
|
||||
},
|
||||
{
|
||||
type: TYPE_TASK,
|
||||
title: this.$t('quickActions.tasks'),
|
||||
items: this.foundTasks,
|
||||
type: ACTION_TYPE.TASK,
|
||||
title: t('quickActions.tasks'),
|
||||
items: foundTasks.value,
|
||||
},
|
||||
{
|
||||
type: TYPE_LIST,
|
||||
title: this.$t('quickActions.lists'),
|
||||
items: lists,
|
||||
type: ACTION_TYPE.LIST,
|
||||
title: t('quickActions.lists'),
|
||||
items: foundLists.value,
|
||||
},
|
||||
{
|
||||
type: TYPE_TEAM,
|
||||
title: this.$t('quickActions.teams'),
|
||||
items: this.foundTeams,
|
||||
type: ACTION_TYPE.TEAM,
|
||||
title: t('quickActions.teams'),
|
||||
items: foundTeams.value,
|
||||
},
|
||||
].filter(i => i.items.length > 0)
|
||||
},
|
||||
nothing() {
|
||||
return this.search === '' || Object.keys(this.results).length === 0
|
||||
},
|
||||
loading() {
|
||||
return this.taskService.loading ||
|
||||
useNamespaceStore().isLoading || useListStore().isLoading ||
|
||||
this.teamService.loading
|
||||
},
|
||||
placeholder() {
|
||||
if (this.selectedCmd !== null) {
|
||||
switch (this.selectedCmd.action) {
|
||||
case CMD_NEW_TASK:
|
||||
return this.$t('quickActions.newTask')
|
||||
case CMD_NEW_LIST:
|
||||
return this.$t('quickActions.newList')
|
||||
case CMD_NEW_NAMESPACE:
|
||||
return this.$t('quickActions.newNamespace')
|
||||
case CMD_NEW_TEAM:
|
||||
return this.$t('quickActions.newTeam')
|
||||
}
|
||||
].filter((i) => i.items.length > 0)
|
||||
})
|
||||
|
||||
const loading = computed(() =>
|
||||
taskService.loading ||
|
||||
namespaceStore.isLoading ||
|
||||
listStore.isLoading ||
|
||||
teamService.loading,
|
||||
)
|
||||
|
||||
interface Command {
|
||||
type: COMMAND_TYPE
|
||||
title: string
|
||||
placeholder: string
|
||||
action: () => Promise<void>
|
||||
}
|
||||
|
||||
return this.$t('quickActions.placeholder')
|
||||
const commands = computed<{ [key in COMMAND_TYPE]: Command }>(() => ({
|
||||
newTask: {
|
||||
type: COMMAND_TYPE.NEW_TASK,
|
||||
title: t('quickActions.cmds.newTask'),
|
||||
placeholder: t('quickActions.newTask'),
|
||||
action: newTask,
|
||||
},
|
||||
hintText() {
|
||||
newList: {
|
||||
type: COMMAND_TYPE.NEW_LIST,
|
||||
title: t('quickActions.cmds.newList'),
|
||||
placeholder: t('quickActions.newList'),
|
||||
action: newList,
|
||||
},
|
||||
newNamespace: {
|
||||
type: COMMAND_TYPE.NEW_NAMESPACE,
|
||||
title: t('quickActions.cmds.newNamespace'),
|
||||
placeholder: t('quickActions.newNamespace'),
|
||||
action: newNamespace,
|
||||
},
|
||||
newTeam: {
|
||||
type: COMMAND_TYPE.NEW_TEAM,
|
||||
title: t('quickActions.cmds.newTeam'),
|
||||
placeholder: t('quickActions.newTeam'),
|
||||
action: newTeam,
|
||||
},
|
||||
}))
|
||||
|
||||
const placeholder = computed(() => selectedCmd.value?.placeholder || t('quickActions.placeholder'))
|
||||
|
||||
const currentList = computed(() => Object.keys(baseStore.currentList).length === 0
|
||||
? null
|
||||
: baseStore.currentList,
|
||||
)
|
||||
|
||||
const hintText = computed(() => {
|
||||
let namespace
|
||||
|
||||
if (this.selectedCmd !== null && this.currentList !== null) {
|
||||
switch (this.selectedCmd.action) {
|
||||
case CMD_NEW_TASK:
|
||||
return this.$t('quickActions.createTask', {title: this.currentList.title})
|
||||
case CMD_NEW_LIST:
|
||||
namespace = useNamespaceStore().getNamespaceById(this.currentList.namespaceId)
|
||||
return this.$t('quickActions.createList', {title: namespace.title})
|
||||
if (selectedCmd.value !== null && currentList.value !== null) {
|
||||
switch (selectedCmd.value.type) {
|
||||
case COMMAND_TYPE.NEW_TASK:
|
||||
return t('quickActions.createTask', {
|
||||
title: currentList.value.title,
|
||||
})
|
||||
case COMMAND_TYPE.NEW_LIST:
|
||||
namespace = namespaceStore.getNamespaceById(
|
||||
currentList.value.namespaceId,
|
||||
)
|
||||
return t('quickActions.createList', {
|
||||
title: namespace?.title,
|
||||
})
|
||||
}
|
||||
}
|
||||
const prefixes =
|
||||
PREFIXES[getQuickAddMagicMode()] ?? PREFIXES[PrefixMode.Default]
|
||||
return t('quickActions.hint', prefixes)
|
||||
})
|
||||
|
||||
const prefixes = PREFIXES[getQuickAddMagicMode()] ?? PREFIXES[PrefixMode.Default]
|
||||
|
||||
return this.$t('quickActions.hint', prefixes)
|
||||
},
|
||||
currentList() {
|
||||
const currentList = useBaseStore().currentList
|
||||
return Object.keys(currentList).length === 0 ? null : currentList
|
||||
},
|
||||
availableCmds() {
|
||||
const availableCmds = computed(() => {
|
||||
const cmds = []
|
||||
|
||||
if (this.currentList !== null) {
|
||||
cmds.push({
|
||||
title: this.$t('quickActions.cmds.newTask'),
|
||||
action: CMD_NEW_TASK,
|
||||
})
|
||||
cmds.push({
|
||||
title: this.$t('quickActions.cmds.newList'),
|
||||
action: CMD_NEW_LIST,
|
||||
})
|
||||
if (currentList.value !== null) {
|
||||
cmds.push(commands.value.newTask, commands.value.newList)
|
||||
}
|
||||
cmds.push({
|
||||
title: this.$t('quickActions.cmds.newNamespace'),
|
||||
action: CMD_NEW_NAMESPACE,
|
||||
})
|
||||
cmds.push({
|
||||
title: this.$t('quickActions.cmds.newTeam'),
|
||||
action: CMD_NEW_TEAM,
|
||||
})
|
||||
|
||||
cmds.push(commands.value.newNamespace, commands.value.newTeam)
|
||||
return cmds
|
||||
},
|
||||
parsedQuery() {
|
||||
return parseTaskText(this.query, getQuickAddMagicMode())
|
||||
},
|
||||
searchMode() {
|
||||
if (this.query === '') {
|
||||
return SEARCH_MODE_ALL
|
||||
})
|
||||
|
||||
const parsedQuery = computed(() => parseTaskText(query.value, getQuickAddMagicMode()))
|
||||
|
||||
const searchMode = computed(() => {
|
||||
if (query.value === '') {
|
||||
return SEARCH_MODE.ALL
|
||||
}
|
||||
|
||||
const {text, list, labels, assignees} = this.parsedQuery
|
||||
|
||||
const { text, list, labels, assignees } = parsedQuery.value
|
||||
if (assignees.length === 0 && text !== '') {
|
||||
return SEARCH_MODE_TASKS
|
||||
return SEARCH_MODE.TASKS
|
||||
}
|
||||
if (assignees.length === 0 && list !== null && text === '' && labels.length === 0) {
|
||||
return SEARCH_MODE_LISTS
|
||||
if (
|
||||
assignees.length === 0 &&
|
||||
list !== null &&
|
||||
text === '' &&
|
||||
labels.length === 0
|
||||
) {
|
||||
return SEARCH_MODE.LISTS
|
||||
}
|
||||
if (
|
||||
assignees.length > 0 &&
|
||||
list === null &&
|
||||
text === '' &&
|
||||
labels.length === 0
|
||||
) {
|
||||
return SEARCH_MODE.TEAMS
|
||||
}
|
||||
return SEARCH_MODE.ALL
|
||||
})
|
||||
|
||||
const isNewTaskCommand = computed(() => (
|
||||
selectedCmd.value !== null &&
|
||||
selectedCmd.value.type === COMMAND_TYPE.NEW_TASK
|
||||
))
|
||||
|
||||
const taskSearchTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
|
||||
|
||||
type Filter = {by: string, value: string | number, comparator: string}
|
||||
|
||||
function filtersToParams(filters: Filter[]) {
|
||||
const filter_by : Filter['by'][] = []
|
||||
const filter_value : Filter['value'][] = []
|
||||
const filter_comparator : Filter['comparator'][] = []
|
||||
|
||||
filters.forEach(({by, value, comparator}) => {
|
||||
filter_by.push(by)
|
||||
filter_value.push(value)
|
||||
filter_comparator.push(comparator)
|
||||
})
|
||||
|
||||
return {
|
||||
filter_by,
|
||||
filter_value,
|
||||
filter_comparator,
|
||||
}
|
||||
if (assignees.length > 0 && list === null && text === '' && labels.length === 0) {
|
||||
return SEARCH_MODE_TEAMS
|
||||
}
|
||||
|
||||
return SEARCH_MODE_ALL
|
||||
},
|
||||
isNewTaskCommand() {
|
||||
return this.selectedCmd !== null && this.selectedCmd.action === CMD_NEW_TASK
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
this.searchTasks()
|
||||
this.searchTeams()
|
||||
},
|
||||
searchTasks() {
|
||||
if (this.searchMode !== SEARCH_MODE_ALL && this.searchMode !== SEARCH_MODE_TASKS) {
|
||||
this.foundTasks = []
|
||||
function searchTasks() {
|
||||
if (
|
||||
searchMode.value !== SEARCH_MODE.ALL &&
|
||||
searchMode.value !== SEARCH_MODE.TASKS
|
||||
) {
|
||||
foundTasks.value = []
|
||||
return
|
||||
}
|
||||
|
||||
if (this.selectedCmd !== null) {
|
||||
if (selectedCmd.value !== null) {
|
||||
return
|
||||
}
|
||||
|
||||
if (this.taskSearchTimeout !== null) {
|
||||
clearTimeout(this.taskSearchTimeout)
|
||||
this.taskSearchTimeout = null
|
||||
if (taskSearchTimeout.value !== null) {
|
||||
clearTimeout(taskSearchTimeout.value)
|
||||
taskSearchTimeout.value = null
|
||||
}
|
||||
|
||||
const {text, list, labels} = this.parsedQuery
|
||||
const { text, list: listName, labels } = parsedQuery.value
|
||||
|
||||
const params = {
|
||||
s: text,
|
||||
filter_by: [],
|
||||
filter_value: [],
|
||||
filter_comparator: [],
|
||||
const filters: Filter[] = []
|
||||
|
||||
// FIXME: improve types
|
||||
function addFilter(
|
||||
by: Filter['by'],
|
||||
value: Filter['value'],
|
||||
comparator: Filter['comparator'],
|
||||
) {
|
||||
filters.push({
|
||||
by,
|
||||
value,
|
||||
comparator,
|
||||
})
|
||||
}
|
||||
|
||||
const listStore = useListStore()
|
||||
|
||||
if (listName !== null) {
|
||||
const list = listStore.findListByExactname(listName)
|
||||
if (list !== null) {
|
||||
const l = listStore.findListByExactname(list)
|
||||
if (l !== null) {
|
||||
params.filter_by.push('list_id')
|
||||
params.filter_value.push(l.id)
|
||||
params.filter_comparator.push('equals')
|
||||
addFilter('listId', list.id, 'equals')
|
||||
}
|
||||
}
|
||||
|
||||
if (labels.length > 0) {
|
||||
const labelIds = useLabelStore().getLabelsByExactTitles(labels).map(l => l.id)
|
||||
const labelIds = labelStore.getLabelsByExactTitles(labels).map((l) => l.id)
|
||||
if (labelIds.length > 0) {
|
||||
params.filter_by.push('labels')
|
||||
params.filter_value.push(labelIds.join())
|
||||
params.filter_comparator.push('in')
|
||||
addFilter('labels', labelIds.join(), 'in')
|
||||
}
|
||||
}
|
||||
|
||||
this.taskSearchTimeout = setTimeout(async () => {
|
||||
const r = await this.taskService.getAll({}, params)
|
||||
this.foundTasks = r.map(t => {
|
||||
t.type = TYPE_TASK
|
||||
const params = {
|
||||
s: text,
|
||||
...filtersToParams(filters),
|
||||
}
|
||||
|
||||
taskSearchTimeout.value = setTimeout(async () => {
|
||||
const r = await taskService.getAll({}, params) as DoAction<ITask>[]
|
||||
foundTasks.value = r.map((t) => {
|
||||
t.type = ACTION_TYPE.TASK
|
||||
const list = listStore.getListById(t.listId)
|
||||
if (list !== null) {
|
||||
t.title = `${t.title} (${list.title})`
|
||||
}
|
||||
|
||||
return t
|
||||
})
|
||||
}, 150)
|
||||
},
|
||||
searchTeams() {
|
||||
if (this.searchMode !== SEARCH_MODE_ALL && this.searchMode !== SEARCH_MODE_TEAMS) {
|
||||
this.foundTeams = []
|
||||
}
|
||||
|
||||
const teamSearchTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
|
||||
|
||||
function searchTeams() {
|
||||
if (
|
||||
searchMode.value !== SEARCH_MODE.ALL &&
|
||||
searchMode.value !== SEARCH_MODE.TEAMS
|
||||
) {
|
||||
foundTeams.value = []
|
||||
return
|
||||
}
|
||||
|
||||
if (this.query === '' || this.selectedCmd !== null) {
|
||||
if (query.value === '' || selectedCmd.value !== null) {
|
||||
return
|
||||
}
|
||||
|
||||
if (this.teamSearchTimeout !== null) {
|
||||
clearTimeout(this.teamSearchTimeout)
|
||||
this.teamSearchTimeout = null
|
||||
if (teamSearchTimeout.value !== null) {
|
||||
clearTimeout(teamSearchTimeout.value)
|
||||
teamSearchTimeout.value = null
|
||||
}
|
||||
|
||||
const {assignees} = this.parsedQuery
|
||||
|
||||
this.teamSearchTimeout = setTimeout(async () => {
|
||||
const teamSearchPromises = assignees.map((t) => this.teamService.getAll({}, {s: t}))
|
||||
const { assignees } = parsedQuery.value
|
||||
teamSearchTimeout.value = setTimeout(async () => {
|
||||
const teamSearchPromises = assignees.map((t) =>
|
||||
teamService.getAll({}, { s: t }),
|
||||
)
|
||||
const teamsResult = await Promise.all(teamSearchPromises)
|
||||
this.foundTeams = teamsResult.flatMap(team => {
|
||||
foundTeams.value = teamsResult.flatMap((team) => {
|
||||
team.title = team.name
|
||||
return team
|
||||
})
|
||||
}, 150)
|
||||
},
|
||||
closeQuickActions() {
|
||||
useBaseStore().setQuickActionsActive(false)
|
||||
},
|
||||
doAction(type, item) {
|
||||
}
|
||||
|
||||
function search() {
|
||||
searchTasks()
|
||||
searchTeams()
|
||||
}
|
||||
|
||||
const searchInput = ref<HTMLElement | null>(null)
|
||||
|
||||
async function doAction(type: ACTION_TYPE, item: DoAction) {
|
||||
switch (type) {
|
||||
case TYPE_LIST:
|
||||
this.$router.push({name: 'list.index', params: {listId: item.id}})
|
||||
this.closeQuickActions()
|
||||
case ACTION_TYPE.LIST:
|
||||
closeQuickActions()
|
||||
await router.push({
|
||||
name: 'list.index',
|
||||
params: { listId: (item as DoAction<IList>).id },
|
||||
})
|
||||
break
|
||||
case TYPE_TASK:
|
||||
this.$router.push({name: 'task.detail', params: {id: item.id}})
|
||||
this.closeQuickActions()
|
||||
case ACTION_TYPE.TASK:
|
||||
closeQuickActions()
|
||||
await router.push({
|
||||
name: 'task.detail',
|
||||
params: { id: (item as DoAction<ITask>).id },
|
||||
})
|
||||
break
|
||||
case TYPE_CMD:
|
||||
this.query = ''
|
||||
this.selectedCmd = item
|
||||
this.$refs.searchInput.focus()
|
||||
case ACTION_TYPE.CMD:
|
||||
query.value = ''
|
||||
selectedCmd.value = item as DoAction<Command>
|
||||
searchInput.value?.focus()
|
||||
break
|
||||
}
|
||||
},
|
||||
doCmd() {
|
||||
if (this.results.length === 1 && this.results[0].items.length === 1) {
|
||||
this.doAction(this.results[0].type, this.results[0].items[0])
|
||||
}
|
||||
|
||||
async function doCmd() {
|
||||
if (results.value.length === 1 && results.value[0].items.length === 1) {
|
||||
const result = results.value[0]
|
||||
doAction(result.type, result.items[0])
|
||||
return
|
||||
}
|
||||
|
||||
if (this.selectedCmd === null) {
|
||||
if (selectedCmd.value === null || query.value === '') {
|
||||
return
|
||||
}
|
||||
|
||||
if (this.query === '') {
|
||||
return
|
||||
closeQuickActions()
|
||||
await selectedCmd.value.action()
|
||||
}
|
||||
|
||||
switch (this.selectedCmd.action) {
|
||||
case CMD_NEW_TASK:
|
||||
this.newTask()
|
||||
break
|
||||
case CMD_NEW_LIST:
|
||||
this.newList()
|
||||
break
|
||||
case CMD_NEW_NAMESPACE:
|
||||
this.newNamespace()
|
||||
break
|
||||
case CMD_NEW_TEAM:
|
||||
this.newTeam()
|
||||
break
|
||||
}
|
||||
},
|
||||
async newTask() {
|
||||
if (this.currentList === null) {
|
||||
async function newTask() {
|
||||
if (currentList.value === null) {
|
||||
return
|
||||
}
|
||||
|
||||
const taskStore = useTaskStore()
|
||||
const task = await taskStore.createNewTask({
|
||||
title: this.query,
|
||||
listId: this.currentList.id,
|
||||
title: query.value,
|
||||
listId: currentList.value.id,
|
||||
})
|
||||
this.$message.success({message: this.$t('task.createSuccess')})
|
||||
this.$router.push({name: 'task.detail', params: {id: task.id}})
|
||||
this.closeQuickActions()
|
||||
},
|
||||
async newList() {
|
||||
if (this.currentList === null) {
|
||||
return
|
||||
success({ message: t('task.createSuccess') })
|
||||
await router.push({ name: 'task.detail', params: { id: task.id } })
|
||||
}
|
||||
|
||||
const newList = new ListModel({
|
||||
title: this.query,
|
||||
namespaceId: this.currentList.namespaceId,
|
||||
async function newList() {
|
||||
if (currentList.value === null) {
|
||||
return
|
||||
}
|
||||
const newList = await listStore.createList(new ListModel({
|
||||
title: query.value,
|
||||
namespaceId: currentList.value.namespaceId,
|
||||
}))
|
||||
success({ message: t('list.create.createdSuccess')})
|
||||
await router.push({
|
||||
name: 'list.index',
|
||||
params: { listId: newList.id },
|
||||
})
|
||||
const listStore = useListStore()
|
||||
const list = await listStore.createList(newList)
|
||||
this.$message.success({message: this.$t('list.create.createdSuccess')})
|
||||
this.$router.push({name: 'list.index', params: {listId: list.id}})
|
||||
this.closeQuickActions()
|
||||
},
|
||||
async newNamespace() {
|
||||
const newNamespace = new NamespaceModel({title: this.query})
|
||||
}
|
||||
|
||||
await useNamespaceStore().createNamespace(newNamespace)
|
||||
this.$message.success({message: this.$t('namespace.create.success')})
|
||||
this.closeQuickActions()
|
||||
},
|
||||
async newTeam() {
|
||||
const newTeam = new TeamModel({name: this.query})
|
||||
const team = await this.teamService.create(newTeam)
|
||||
this.$router.push({
|
||||
async function newNamespace() {
|
||||
const newNamespace = new NamespaceModel({ title: query.value })
|
||||
await namespaceStore.createNamespace(newNamespace)
|
||||
success({ message: t('namespace.create.success') })
|
||||
}
|
||||
|
||||
async function newTeam() {
|
||||
const newTeam = new TeamModel({ name: query.value })
|
||||
const team = await teamService.create(newTeam)
|
||||
await router.push({
|
||||
name: 'teams.edit',
|
||||
params: { id: team.id },
|
||||
})
|
||||
this.$message.success({message: this.$t('team.create.success')})
|
||||
this.closeQuickActions()
|
||||
},
|
||||
select(parentIndex, index) {
|
||||
|
||||
if (index < 0 && parentIndex === 0) {
|
||||
this.$refs.searchInput.focus()
|
||||
return
|
||||
success({ message: t('team.create.success') })
|
||||
}
|
||||
|
||||
type BaseButtonInstance = InstanceType<typeof BaseButton>
|
||||
const resultRefs = ref<(BaseButtonInstance | null)[][]>([])
|
||||
|
||||
function setResultRefs(el: Element | ComponentPublicInstance | null, index: number, key: number) {
|
||||
if (resultRefs.value[index] === undefined) {
|
||||
resultRefs.value[index] = []
|
||||
}
|
||||
|
||||
resultRefs.value[index][key] = el as (BaseButtonInstance | null)
|
||||
}
|
||||
|
||||
function select(parentIndex: number, index: number) {
|
||||
if (index < 0 && parentIndex === 0) {
|
||||
searchInput.value?.focus()
|
||||
return
|
||||
}
|
||||
if (index < 0) {
|
||||
parentIndex--
|
||||
index = this.results[parentIndex].items.length - 1
|
||||
index = results.value[parentIndex].items.length - 1
|
||||
}
|
||||
|
||||
let elems = this.$refs[`result-${parentIndex}_${index}`]
|
||||
|
||||
if (this.results[parentIndex].items.length === index) {
|
||||
elems = this.$refs[`result-${parentIndex + 1}_0`]
|
||||
let elems = resultRefs.value[parentIndex][index]
|
||||
if (results.value[parentIndex].items.length === index) {
|
||||
elems = resultRefs.value[parentIndex + 1][0]
|
||||
}
|
||||
|
||||
if (typeof elems === 'undefined' || elems.length === 0) {
|
||||
if (
|
||||
typeof elems === 'undefined'
|
||||
/* || elems.length === 0 */
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
if (Array.isArray(elems)) {
|
||||
elems[0].focus()
|
||||
return
|
||||
}
|
||||
|
||||
elems.focus()
|
||||
},
|
||||
unselectCmd() {
|
||||
if (this.query !== '') {
|
||||
return
|
||||
elems?.focus()
|
||||
}
|
||||
|
||||
this.selectedCmd = null
|
||||
},
|
||||
reset() {
|
||||
this.query = ''
|
||||
this.selectedCmd = null
|
||||
},
|
||||
},
|
||||
})
|
||||
function unselectCmd() {
|
||||
if (query.value !== '') {
|
||||
return
|
||||
}
|
||||
selectedCmd.value = null
|
||||
}
|
||||
|
||||
function reset() {
|
||||
query.value = ''
|
||||
selectedCmd.value = null
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -508,6 +581,7 @@ export default defineComponent({
|
||||
top: 3rem;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.action-input {
|
||||
display: flex;
|
||||
@ -522,29 +596,28 @@ export default defineComponent({
|
||||
padding-left: .5rem;
|
||||
}
|
||||
|
||||
}
|
||||
.active-cmd {
|
||||
font-size: 1.25rem;
|
||||
margin-left: .5rem;
|
||||
background-color: var(--grey-100);
|
||||
color: var(--grey-800);
|
||||
}
|
||||
}
|
||||
|
||||
.results {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
color: var(--grey-800);
|
||||
}
|
||||
|
||||
.result {
|
||||
&-title {
|
||||
.result-title {
|
||||
background: var(--grey-100);
|
||||
padding: .5rem;
|
||||
display: block;
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
&-items {
|
||||
button {
|
||||
.result-item-button {
|
||||
font-size: .9rem;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
@ -559,7 +632,8 @@ export default defineComponent({
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus, &:hover {
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: var(--grey-100);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
@ -568,10 +642,6 @@ export default defineComponent({
|
||||
background: var(--grey-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// HACK:
|
||||
// FIXME:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user