Search for tasks

src/components/quick-actions/quick-actions.vue

@@ -18,6 +18,12 @@
 <script>
 import Multiselect from '@/components/input/multiselect'
 
+import TaskService from '@/services/task'
+
+const TYPE_LIST = 'list'
+const TYPE_TASK = 'task'
+const TYPE_ACTION = 'action'
+
 export default {
 	name: 'quick-actions',
 	components: {
@@ -26,25 +32,87 @@ export default {
 	data() {
 		return {
 			query: '',
+			availableActions: [
+				{
+					title: 'New task',
+				},
+				{
+					title: 'New list',
+				},
+				{
+					title: 'New namespace',
+				},
+				{
+					title: 'New Team',
+				},
+			],
+			foundTasks: [],
+			taskSearchTimeout: null,
+			taskService: null,
+
+			foundTeams: [],
 		}
 	},
 	computed: {
 		active: () => true, // TODO: use state + keyboard shortcut
 		results() {
-			return Object.values(this.$store.state.lists).filter(l => {
+			const lists = (Object.values(this.$store.state.lists).filter(l => {
 				return l.title.toLowerCase().includes(this.query.toLowerCase())
-			}) ?? []
+			}) ?? [])
+				.map(l => {
+					l.type = TYPE_LIST
+					return l
+				})
+
+			const actions = this.availableActions
+				.filter(a => a.title.includes(this.query.toLowerCase()))
+				.map(a => {
+					a.type = TYPE_ACTION
+					return a
+				})
+
+			return [...actions, ...lists, ...this.foundTasks, ...this.foundTeams]
 		},
 		nothing() {
 			return this.search === '' || Object.keys(this.results).length === 0
 		},
 	},
+	created() {
+		this.taskService = new TaskService()
+	},
 	methods: {
 		search(query) {
 			this.query = query
+			this.searchTasks(query)
+		},
+		searchTasks(query) {
+			if (this.taskSearchTimeout !== null) {
+				clearTimeout(this.taskSearchTimeout)
+				this.taskSearchTimeout = null
+			}
+
+			this.taskSearchTimeout = setTimeout(() => {
+				this.taskService.getAll({}, {s: query})
+					.then(r => {
+						r = r.map(t => {
+							t.type = TYPE_TASK
+							return t
+						})
+						this.$set(this, 'foundTasks', r)
+					})
+			}, 150)
 		},
 		select(e) {
-			console.log('select', e)
+			switch (e.type) {
+				case TYPE_LIST:
+					this.$router.push({name: 'list.index', params: {listId: e.id}})
+					break
+				case TYPE_TASK:
+					this.$router.push({name: 'task.detail', params: {id: e.id}})
+					break
+				case TYPE_ACTION:
+					break
+			}
 		},
 	},
 }