Add support for selecting actions
This commit is contained in:
parent
3fe439462d
commit
d8650c9570
|
@ -1,16 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<modal v-if="active" class="quick-actions">
|
<modal v-if="active" class="quick-actions">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<input
|
<div class="action-input" :class="{'has-action': selectedAction !== null}">
|
||||||
v-focus
|
<div class="selected-action tag" v-if="selectedAction !== null">
|
||||||
class="input"
|
{{ selectedAction.title }}
|
||||||
:class="{'is-loading': loading}"
|
</div>
|
||||||
v-model="query"
|
<input
|
||||||
placeholder="Type a command or search..."
|
v-focus
|
||||||
@keyup="search"
|
class="input"
|
||||||
ref="searchInput"
|
:class="{'is-loading': loading}"
|
||||||
@keydown.down.prevent="() => select(0, 0)"
|
v-model="query"
|
||||||
/>
|
:placeholder="placeholder"
|
||||||
|
@keyup="search"
|
||||||
|
ref="searchInput"
|
||||||
|
@keydown.down.prevent="() => select(0, 0)"
|
||||||
|
@keyup.prevent.delete="() => selectedAction = null"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="results">
|
<div class="results">
|
||||||
<div v-for="(r, k) in results" :key="k" class="result">
|
<div v-for="(r, k) in results" :key="k" class="result">
|
||||||
|
@ -45,6 +51,11 @@ const TYPE_TASK = 'task'
|
||||||
const TYPE_ACTION = 'action'
|
const TYPE_ACTION = 'action'
|
||||||
const TYPE_TEAM = 'team'
|
const TYPE_TEAM = 'team'
|
||||||
|
|
||||||
|
const ACTION_NEW_TASK = 'newTask'
|
||||||
|
const ACTION_NEW_LIST = 'newList'
|
||||||
|
const ACTION_NEW_NAMESPACE = 'newNamespace'
|
||||||
|
const ACTION_NEW_TEAM = 'newTeam'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'quick-actions',
|
name: 'quick-actions',
|
||||||
data() {
|
data() {
|
||||||
|
@ -53,17 +64,23 @@ export default {
|
||||||
availableActions: [
|
availableActions: [
|
||||||
{
|
{
|
||||||
title: 'New task',
|
title: 'New task',
|
||||||
|
action: ACTION_NEW_TASK,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'New list',
|
title: 'New list',
|
||||||
|
action: ACTION_NEW_LIST,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'New namespace',
|
title: 'New namespace',
|
||||||
|
action: ACTION_NEW_NAMESPACE,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'New Team',
|
title: 'New Team',
|
||||||
|
action: ACTION_NEW_TEAM,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
selectedAction: null,
|
||||||
|
|
||||||
foundTasks: [],
|
foundTasks: [],
|
||||||
taskSearchTimeout: null,
|
taskSearchTimeout: null,
|
||||||
taskService: null,
|
taskService: null,
|
||||||
|
@ -110,6 +127,22 @@ export default {
|
||||||
loading() {
|
loading() {
|
||||||
return this.taskService.loading
|
return this.taskService.loading
|
||||||
},
|
},
|
||||||
|
placeholder() {
|
||||||
|
if (this.selectedAction !== null) {
|
||||||
|
switch (this.selectedAction.action) {
|
||||||
|
case ACTION_NEW_TASK:
|
||||||
|
return 'Enter the title of the new task...'
|
||||||
|
case ACTION_NEW_LIST:
|
||||||
|
return 'Enter the title of the new list...'
|
||||||
|
case ACTION_NEW_TEAM:
|
||||||
|
return 'Enter the title of the new team...'
|
||||||
|
case ACTION_NEW_NAMESPACE:
|
||||||
|
return 'Enter the title of the new namespace...'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'Type a command or search...'
|
||||||
|
},
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.taskService = new TaskService()
|
this.taskService = new TaskService()
|
||||||
|
@ -139,15 +172,18 @@ export default {
|
||||||
})
|
})
|
||||||
}, 150)
|
}, 150)
|
||||||
},
|
},
|
||||||
doAction(type, e) {
|
doAction(type, item) {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case TYPE_LIST:
|
case TYPE_LIST:
|
||||||
this.$router.push({name: 'list.index', params: {listId: e.id}})
|
this.$router.push({name: 'list.index', params: {listId: item.id}})
|
||||||
break
|
break
|
||||||
case TYPE_TASK:
|
case TYPE_TASK:
|
||||||
this.$router.push({name: 'task.detail', params: {id: e.id}})
|
this.$router.push({name: 'task.detail', params: {id: item.id}})
|
||||||
break
|
break
|
||||||
case TYPE_ACTION:
|
case TYPE_ACTION:
|
||||||
|
this.query = ''
|
||||||
|
this.selectedAction = item
|
||||||
|
this.$refs.searchInput.focus()
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -159,7 +195,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (index < 0) {
|
if (index < 0) {
|
||||||
parentIndex--;
|
parentIndex--
|
||||||
index = this.results[parentIndex].items.length - 1
|
index = this.results[parentIndex].items.length - 1
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -5,9 +5,23 @@
|
||||||
transform: translate(-50%, -3rem) !important;
|
transform: translate(-50%, -3rem) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input {
|
.action-input {
|
||||||
border: 0;
|
display: flex;
|
||||||
font-size: 1.5rem;
|
align-items: center;
|
||||||
|
|
||||||
|
.input {
|
||||||
|
border: 0;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-action .input {
|
||||||
|
padding-left: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-action {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
margin-left: .5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.results {
|
.results {
|
||||||
|
|
Reference in New Issue