Quick Actions & global search (#528)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/528
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>

src/components/home/contentAuth.vue

@@ -20,6 +20,8 @@
 			>
 				<a @click="$store.commit('menuActive', false)" class="mobile-overlay" v-if="menuActive"></a>
 
+				<quick-actions/>
+
 				<router-view/>
 
 				<transition name="modal">
@@ -43,10 +45,11 @@
 import {mapState} from 'vuex'
 import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
 import Navigation from '@/components/home/navigation'
+import QuickActions from '@/components/quick-actions/quick-actions'
 
 export default {
 	name: 'contentAuth',
-	components: {Navigation},
+	components: {QuickActions, Navigation},
 	watch: {
 		'$route': 'doStuffAfterRoute',
 	},
@@ -83,7 +86,7 @@ export default {
 				this.$route.name === 'user.settings' ||
 				this.$route.name === 'namespaces.index'
 			) {
-				this.$store.commit(CURRENT_LIST, {})
+				this.$store.commit(CURRENT_LIST, null)
 			}
 		},
 		renewTokenOnFocus() {

src/components/home/topNavigation.vue

@@ -37,6 +37,14 @@
 
 		<div class="navbar-end">
 			<update/>
+			<a
+				@click="openQuickActions"
+				class="trigger-button pr-0"
+				@shortkey="openQuickActions"
+				v-shortkey="['ctrl', 'k']"
+			>
+				<icon icon="search"/>
+			</a>
 			<notifications/>
 			<div class="user">
 				<img :src="userAvatar" alt="" class="avatar"/>
@@ -83,7 +91,7 @@
 
 <script>
 import {mapState} from 'vuex'
-import {CURRENT_LIST} from '@/store/mutation-types'
+import {CURRENT_LIST, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
 import Rights from '@/models/rights.json'
 import Update from '@/components/home/update'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown'
@@ -113,6 +121,9 @@ export default {
 			this.$store.dispatch('auth/logout')
 			this.$router.push({name: 'user.login'})
 		},
+		openQuickActions() {
+			this.$store.commit(QUICK_ACTIONS_ACTIVE, true)
+		},
 	},
 }
 </script>

src/components/input/multiselect.vue

@@ -34,7 +34,7 @@
 		</div>
 
 		<transition name="fade">
-			<div class="search-results" v-if="searchResultsVisible">
+			<div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible">
 				<button
 					v-if="creatableAvailable"
 					class="is-fullwidth"
@@ -166,6 +166,27 @@ export default {
 				return false
 			},
 		},
+		// If true, displays the search results inline instead of using a dropdown.
+		inline: {
+			type: Boolean,
+			default() {
+				return false
+			},
+		},
+		// If true, shows search results when no query is specified.
+		showEmpty: {
+			type: Boolean,
+			default() {
+				return true
+			},
+		},
+		// The delay in ms after which the search event will be fired. Used to avoid hitting the network on every keystroke.
+		searchDelay: {
+			type: Number,
+			default() {
+				return 200
+			},
+		},
 	},
 	mounted() {
 		document.addEventListener('click', this.hideSearchResultsHandler)
@@ -181,6 +202,10 @@ export default {
 	},
 	computed: {
 		searchResultsVisible() {
+			if(this.query === '' && !this.showEmpty) {
+				return false
+			}
+
 			return this.showSearchResults && (
 					(this.filteredSearchResults.length > 0) ||
 					(this.creatable && this.query !== '')
@@ -225,7 +250,7 @@ export default {
 					this.localLoading = false
 				}, 100) // The duration of the loading timeout of the services
 				this.showSearchResults = true
-			}, 200)
+			}, this.searchDelay)
 		},
 		hideSearchResultsHandler(e) {
 			closeWhenClickedOutside(e, this.$refs.multiselectRoot, this.closeSearchResults)

src/components/notifications/notifications.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="notifications">
-		<a @click.stop="showNotifications = !showNotifications" class="trigger">
+		<a @click.stop="showNotifications = !showNotifications" class="trigger-button">
 			<span class="unread-indicator" v-if="unreadNotifications > 0"></span>
 			<icon icon="bell"/>
 		</a>

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

@@ -0,0 +1,388 @@
+<template>
+	<modal v-if="active" class="quick-actions" @close="closeQuickActions">
+		<div class="card">
+			<div class="action-input" :class="{'has-active-cmd': selectedCmd !== null}">
+				<div class="active-cmd tag" v-if="selectedCmd !== null">
+					{{ selectedCmd.title }}
+				</div>
+				<input
+					v-focus
+					class="input"
+					:class="{'is-loading': loading}"
+					v-model="query"
+					:placeholder="placeholder"
+					@keyup="search"
+					ref="searchInput"
+					@keydown.down.prevent="() => select(0, 0)"
+					@keyup.prevent.delete="unselectCmd"
+					@keyup.prevent.enter="doCmd"
+					@keyup.prevent.esc="closeQuickActions"
+				/>
+			</div>
+
+			<div class="has-text-grey-light p-4" v-if="hintText !== ''">
+				{{ hintText }}
+			</div>
+
+			<div class="results" v-if="selectedCmd === null">
+				<div v-for="(r, k) in results" :key="k" class="result">
+					<span class="result-title">
+						{{ r.title }}
+					</span>
+					<div class="result-items">
+						<button
+							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()"
+						>
+							{{ i.title }}
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</modal>
+</template>
+
+<script>
+import TaskService from '@/services/task'
+import ListService from '@/services/list'
+import NamespaceService from '@/services/namespace'
+import TeamService from '@/services/team'
+
+import TaskModel from '@/models/task'
+import NamespaceModel from '@/models/namespace'
+import TeamModel from '@/models/team'
+
+import {CURRENT_LIST, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
+import ListModel from '@/models/list'
+
+const TYPE_LIST = 'list'
+const TYPE_TASK = 'task'
+const TYPE_CMD = 'cmd'
+const TYPE_TEAM = 'team'
+
+const CMD_NEW_TASK = 'newTask'
+const CMD_NEW_LIST = 'newList'
+const CMD_NEW_NAMESPACE = 'newNamespace'
+const CMD_NEW_TEAM = 'newTeam'
+
+export default {
+	name: 'quick-actions',
+	data() {
+		return {
+			query: '',
+			selectedCmd: null,
+
+			foundTasks: [],
+			taskSearchTimeout: null,
+			taskService: null,
+
+			foundTeams: [],
+			teamService: null,
+
+			namespaceService: null,
+			listService: null,
+		}
+	},
+	computed: {
+		active() {
+			const active = this.$store.state[QUICK_ACTIONS_ACTIVE]
+			if (!active) {
+				this.reset()
+			}
+			return active
+		},
+		results() {
+			const lists = (Object.values(this.$store.state.lists).filter(l => {
+				return l.title.toLowerCase().includes(this.query.toLowerCase())
+			}) ?? [])
+
+			const cmds = this.availableCmds
+				.filter(a => a.title.toLowerCase().includes(this.query.toLowerCase()))
+
+			return [
+				{
+					type: TYPE_CMD,
+					title: 'Commands',
+					items: cmds,
+				},
+				{
+					type: TYPE_TASK,
+					title: 'Tasks',
+					items: this.foundTasks,
+				},
+				{
+					type: TYPE_LIST,
+					title: 'Lists',
+					items: lists,
+				},
+				{
+					type: TYPE_TEAM,
+					title: 'Teams',
+					items: this.foundTeams,
+				},
+			].filter(i => i.items.length > 0)
+		},
+		nothing() {
+			return this.search === '' || Object.keys(this.results).length === 0
+		},
+		loading() {
+			return this.taskService.loading ||
+				this.listService.loading ||
+				this.namespaceService.loading ||
+				this.teamService.loading
+		},
+		placeholder() {
+			if (this.selectedCmd !== null) {
+				switch (this.selectedCmd.action) {
+					case CMD_NEW_TASK:
+						return 'Enter the title of the new task...'
+					case CMD_NEW_LIST:
+						return 'Enter the title of the new list...'
+					case CMD_NEW_NAMESPACE:
+						return 'Enter the title of the new namespace...'
+					case CMD_NEW_TEAM:
+						return 'Enter the name of the new team...'
+				}
+			}
+
+			return 'Type a command or search...'
+		},
+		hintText() {
+			let namespace
+
+			if (this.selectedCmd !== null && this.currentList !== null) {
+				switch (this.selectedCmd.action) {
+					case CMD_NEW_TASK:
+						return `Create a task in the current list (${this.currentList.title})`
+					case CMD_NEW_LIST:
+						namespace = this.$store.getters['namespaces/getNamespaceById'](this.currentList.namespaceId)
+						return `Create a list in the current namespace (${namespace.title})`
+				}
+			}
+
+			return ''
+		},
+		currentList() {
+			return Object.keys(this.$store.state[CURRENT_LIST]).length === 0 ? null : this.$store.state[CURRENT_LIST]
+		},
+		availableCmds() {
+			const cmds = []
+
+			if (this.currentList !== null) {
+				cmds.push({
+					title: 'New task',
+					action: CMD_NEW_TASK,
+				})
+				cmds.push({
+					title: 'New list',
+					action: CMD_NEW_LIST,
+				})
+			}
+			cmds.push({
+				title: 'New namespace',
+				action: CMD_NEW_NAMESPACE,
+			})
+			cmds.push({
+				title: 'New Team',
+				action: CMD_NEW_TEAM,
+			})
+
+			return cmds
+		},
+	},
+	created() {
+		this.taskService = new TaskService()
+		this.listService = new ListService()
+		this.namespaceService = new NamespaceService()
+		this.teamService = new TeamService()
+	},
+	methods: {
+		search() {
+			this.searchTasks()
+		},
+		searchTasks() {
+			if (this.query === '' || this.selectedCmd !== null) {
+				return
+			}
+
+			if (this.taskSearchTimeout !== null) {
+				clearTimeout(this.taskSearchTimeout)
+				this.taskSearchTimeout = null
+			}
+
+			this.taskSearchTimeout = setTimeout(() => {
+				this.taskService.getAll({}, {s: this.query})
+					.then(r => {
+						r = r.map(t => {
+							t.type = TYPE_TASK
+							const list = this.$store.getters['lists/getListById'](t.listId) === null ? null : this.$store.getters['lists/getListById'](t.listId)
+							if (list !== null) {
+								t.title = `${t.title} (${list.title})`
+							}
+
+							return t
+						})
+						this.$set(this, 'foundTasks', r)
+					})
+			}, 150)
+		},
+		closeQuickActions() {
+			this.$store.commit(QUICK_ACTIONS_ACTIVE, false)
+		},
+		doAction(type, item) {
+			switch (type) {
+				case TYPE_LIST:
+					this.$router.push({name: 'list.index', params: {listId: item.id}})
+					this.closeQuickActions()
+					break
+				case TYPE_TASK:
+					this.$router.push({name: 'task.detail', params: {id: item.id}})
+					this.closeQuickActions()
+					break
+				case TYPE_CMD:
+					this.query = ''
+					this.selectedCmd = item
+					this.$refs.searchInput.focus()
+					break
+			}
+		},
+		doCmd() {
+			if (this.selectedCmd === null) {
+				return
+			}
+
+			if (this.query === '') {
+				return
+			}
+
+			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
+			}
+		},
+		newTask() {
+			if (this.currentList === null) {
+				return
+			}
+
+			const newTask = new TaskModel({
+				title: this.query,
+				listId: this.currentList.id,
+			})
+			this.taskService.create(newTask)
+				.then(r => {
+					this.success({message: 'The task was successfully created.'}, this)
+					this.$router.push({name: 'task.detail', params: {id: r.id}})
+					this.closeQuickActions()
+				})
+				.catch((e) => {
+					this.error(e, this)
+				})
+		},
+		newList() {
+			if (this.currentList === null) {
+				return
+			}
+
+			const newList = new ListModel({
+				title: this.query,
+				namespaceId: this.currentList.namespaceId,
+			})
+			this.listService.create(newList)
+				.then(r => {
+					this.success({message: 'The list was successfully created.'}, this)
+					this.$router.push({name: 'list.index', params: {listId: r.id}})
+					this.closeQuickActions()
+				})
+				.catch((e) => {
+					this.error(e, this)
+				})
+		},
+		newNamespace() {
+			const newNamespace = new NamespaceModel({title: this.query})
+			this.namespaceService.create(newNamespace)
+				.then(r => {
+					this.$store.commit('namespaces/addNamespace', r)
+					this.success({message: 'The namespace was successfully created.'}, this)
+					this.$router.back()
+					this.closeQuickActions()
+				})
+				.catch((e) => {
+					this.error(e, this)
+				})
+		},
+		newTeam() {
+			const newTeam = new TeamModel({name: this.query})
+			this.teamService.create(newTeam)
+				.then(r => {
+					this.$router.push({
+						name: 'teams.edit',
+						params: {id: r.id},
+					})
+					this.success({message: 'The team was successfully created.'}, this)
+					this.closeQuickActions()
+				})
+				.catch((e) => {
+					this.error(e, this)
+				})
+		},
+		select(parentIndex, index) {
+
+			if (index < 0 && parentIndex === 0) {
+				this.$refs.searchInput.focus()
+				return
+			}
+
+			if (index < 0) {
+				parentIndex--
+				index = this.results[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`]
+			}
+
+			if (typeof elems === 'undefined' || elems.length === 0) {
+				return
+			}
+
+			if (Array.isArray(elems)) {
+				elems[0].focus()
+				return
+			}
+
+			elems.focus()
+		},
+		unselectCmd() {
+			if (this.query !== '') {
+				return
+			}
+
+			this.selectedCmd = null
+		},
+		reset() {
+			this.query = ''
+			this.selectedCmd = null
+		}
+	},
+}
+</script>

src/store/index.js

@@ -8,7 +8,7 @@ import {
 	LOADING,
 	LOADING_MODULE,
 	MENU_ACTIVE,
-	ONLINE,
+	ONLINE, QUICK_ACTIONS_ACTIVE,
 } from './mutation-types'
 import config from './modules/config'
 import auth from './modules/auth'
@@ -44,6 +44,7 @@ export const store = new Vuex.Store({
 		hasTasks: false,
 		menuActive: true,
 		keyboardShortcutsActive: false,
+		quickActionsActive: false,
 	},
 	mutations: {
 		[LOADING](state, loading) {
@@ -60,6 +61,12 @@ export const store = new Vuex.Store({
 		},
 		[CURRENT_LIST](state, currentList) {
 
+			if (currentList === null) {
+				state.currentList = {}
+				state.background = null
+				return
+			}
+
 			setTitle(currentList.title)
 
 			// Not sure if this is the right way to do it but hey, it works
@@ -127,5 +134,8 @@ export const store = new Vuex.Store({
 		[KEYBOARD_SHORTCUTS_ACTIVE](state, active) {
 			state.keyboardShortcutsActive = active
 		},
+		[QUICK_ACTIONS_ACTIVE](state, active) {
+			state.quickActionsActive = active
+		},
 	},
 })

src/store/mutation-types.js

@@ -6,6 +6,7 @@ export const CURRENT_LIST = 'currentList'
 export const HAS_TASKS = 'hasTasks'
 export const MENU_ACTIVE = 'menuActive'
 export const KEYBOARD_SHORTCUTS_ACTIVE = 'keyboardShortcutsActive'
+export const QUICK_ACTIONS_ACTIVE = 'quickActionsActive'
 
 export const CONFIG = 'config'
 export const AUTH = 'auth'

src/styles/components/_all.scss

@@ -23,3 +23,4 @@
 @import 'api-config';
 @import 'datepicker';
 @import 'notifications';
+@import 'quick-actions';

src/styles/components/base/multiselect.scss

@@ -72,6 +72,10 @@
 		max-width: 100%;
 		min-width: 100%;
 
+		&-inline {
+			position: static;
+		}
+
 		button {
 			background: transparent;
 			display: block;

src/styles/components/notifications.scss

@@ -1,13 +1,6 @@
 .notifications {
 	width: 50px;
 
-	.trigger {
-		cursor: pointer;
-		color: $grey-400;
-		padding: 1rem;
-		font-size: 1.25rem;
-		position: relative;
-
 	.unread-indicator {
 		position: absolute;
 		top: 1rem;
@@ -19,7 +12,6 @@
 		border-radius: 100%;
 		border: 2px solid $white;
 	}
-	}
 
 	.notifications-list {
 		position: fixed;

src/styles/components/quick-actions.scss

@@ -0,0 +1,67 @@
+.quick-actions {
+
+	.modal-content {
+		top: 6rem !important;
+		transform: translate(-50%, -3rem) !important;
+	}
+
+	.action-input {
+		display: flex;
+		align-items: center;
+
+		.input {
+			border: 0;
+			font-size: 1.5rem;
+		}
+
+		&.has-active-cmd .input {
+			padding-left: .5rem;
+		}
+
+		.active-cmd {
+			font-size: 1.25rem;
+			margin-left: .5rem;
+		}
+	}
+
+	.results {
+		text-align: left;
+		width: 100%;
+		color: $grey-800;
+
+		.result {
+			&-title {
+				background: $grey-50;
+				padding: .5rem;
+				display: block;
+				font-size: .75rem;
+			}
+
+			&-items {
+				button {
+					font-size: .9rem;
+					width: 100%;
+					background: transparent;
+					text-align: left;
+					box-shadow: none;
+					border-radius: 0;
+					text-transform: none;
+					font-family: $family-sans-serif;
+					font-weight: normal;
+					padding: .5rem .75rem;
+					border: none;
+					cursor: pointer;
+
+					&:focus, &:hover {
+						background: $grey-50;
+						box-shadow: none !important;
+					}
+
+					&:active {
+						background: $grey-100;
+					}
+				}
+			}
+		}
+	}
+}

src/styles/theme/navigation.scss

@@ -318,11 +318,21 @@
           display: inline-block;
         }
       }
+
     }
   }
 }
 
-.navbar .user {
+.navbar {
+  .trigger-button {
+    cursor: pointer;
+    color: $grey-400;
+    padding: 1rem;
+    font-size: 1.25rem;
+    position: relative;
+  }
+
+  .user {
     span {
       font-family: $vikunja-font;
     }
@@ -353,9 +363,9 @@
         box-shadow: none !important;
       }
     }
-}
+  }
 
-.menu-hide-button, .menu-show-button {
+  .menu-hide-button, .menu-show-button {
     display: none;
     z-index: 31;
     font-weight: bold;
@@ -366,21 +376,21 @@
     &:hover, &:focus {
       color: $grey-900;
     }
-}
+  }
 
-.menu-hide-button {
+  .menu-hide-button {
     position: fixed;
 
     &:hover, &:focus {
       color: $text;
     }
-}
+  }
 
-.navbar-brand .menu-show-button {
+  .navbar-brand .menu-show-button {
     display: block;
-}
+  }
 
-.mobile-overlay {
+  .mobile-overlay {
     display: none;
     position: fixed;
     top: 0;
@@ -391,9 +401,9 @@
     z-index: 5;
     opacity: 0;
     transition: all $transition;
-}
+  }
 
-@media screen and (max-width: $tablet) {
+  @media screen and (max-width: $tablet) {
     .menu-hide-button {
       display: block;
       top: $hamburger-menu-icon-spacing;
@@ -413,17 +423,18 @@
     .navbar.is-dark .navbar-brand > .navbar-item {
       margin: 0 auto;
     }
-}
+  }
 
-.logout-icon {
+  .logout-icon {
     margin-right: 0.85rem !important;
-}
+  }
 
-.menu-bottom-link {
+  .menu-bottom-link {
     width: 100%;
     color: $grey-300;
     text-align: center;
     display: block;
     margin: 1rem 0;
     font-size: .8rem;
+  }
 }

src/views/tasks/TaskDetailView.vue

@@ -429,6 +429,7 @@ import heading from '@/components/tasks/partials/heading'
 import Datepicker from '@/components/input/datepicker'
 import {playPop} from '@/helpers/playPop'
 import TaskSubscription from '@/components/misc/subscription'
+import {CURRENT_LIST} from '@/store/mutation-types'
 
 export default {
 	name: 'TaskDetailView',
@@ -520,7 +521,9 @@ export default {
 				return null
 			}
 
-			return this.$store.getters['namespaces/getListAndNamespaceById'](this.task.listId)
+			const list = this.$store.getters['namespaces/getListAndNamespaceById'](this.task.listId)
+			this.$store.commit(CURRENT_LIST, list.list)
+			return list
 		},
 		canWrite() {
 			return this.task && this.task.maxRight && this.task.maxRight > rights.READ