Keyboard navigation for conversation search

src/components/LeftSidebar/ConversationsList/ConversationsList.vue

@@ -40,10 +40,8 @@
 import Conversation from './Conversation'
 import Hint from '../../Hint'
 import LoadingPlaceholder from '../../LoadingPlaceholder'
-import { fetchConversations } from '../../../services/conversationsService'
 import { joinConversation, leaveConversation } from '../../../services/participantsService'
 import { EventBus } from '../../../services/EventBus'
-import debounce from 'debounce'
 
 export default {
 	name: 'ConversationsList',
@@ -57,47 +55,30 @@ export default {
 			type: String,
 			default: '',
 		},
+
+		conversationsList: {
+			type: Array,
+			required: true,
+		},
+
+		initialisedConversations: {
+			type: Boolean,
+			default: true,
+		},
 	},
 
 	data() {
 		return {
-			initialisedConversations: false,
 			isFetchingConversations: false,
 		}
 	},
 
-	computed: {
-		conversationsList() {
-			let conversations = this.$store.getters.conversationsList
-
-			if (this.searchText !== '') {
-				const lowerSearchText = this.searchText.toLowerCase()
-				conversations = conversations.filter(conversation => conversation.displayName.toLowerCase().indexOf(lowerSearchText) !== -1 || conversation.name.toLowerCase().indexOf(lowerSearchText) !== -1)
-			}
-
-			return conversations.sort(this.sortConversations)
-		},
-	},
-
-	beforeMount() {
-		this.fetchConversations()
-	},
-
 	mounted() {
-		/** Refreshes the conversations every 30 seconds */
-		window.setInterval(() => {
-			if (!this.isFetchingConversations) {
-				this.fetchConversations()
-			}
-		}, 30000)
-
 		EventBus.$on('routeChange', this.onRouteChange)
-		EventBus.$on('shouldRefreshConversations', this.debounceFetchConversations)
 	},
 
 	beforeDestroy() {
 		EventBus.$off('routeChange', this.onRouteChange)
-		EventBus.$off('shouldRefreshConversations', this.debounceFetchConversations)
 	},
 
 	methods: {
@@ -111,51 +92,6 @@ export default {
 			}
 		},
 
-		sortConversations(conversation1, conversation2) {
-			if (conversation1.isFavorite !== conversation2.isFavorite) {
-				return conversation1.isFavorite ? -1 : 1
-			}
-
-			return conversation2.lastActivity - conversation1.lastActivity
-		},
-
-		debounceFetchConversations: debounce(function() {
-			if (!this.isFetchingConversations) {
-				this.fetchConversations()
-			}
-		}, 3000),
-
-		async fetchConversations() {
-			this.isFetchingConversations = true
-
-			/**
-			 * Fetches the conversations from the server and then adds them one by one
-			 * to the store.
-			 */
-			try {
-				const conversations = await fetchConversations()
-				this.initialisedConversations = true
-				this.$store.dispatch('purgeConversationsStore')
-				conversations.data.ocs.data.forEach(conversation => {
-					this.$store.dispatch('addConversation', conversation)
-					if (conversation.token === this.$store.getters.getToken()) {
-						this.$store.dispatch('markConversationRead', this.$store.getters.getToken())
-					}
-				})
-				/**
-				 * Emits a global event that is used in App.vue to update the page title once the
-				 * ( if the current route is a conversation and once the conversations are received)
-				 */
-				EventBus.$emit('conversationsReceived', {
-					singleConversation: false,
-				})
-				this.isFetchingConversations = false
-			} catch (error) {
-				console.debug('Error while fetching conversations: ', error)
-				this.isFetchingConversations = false
-			}
-		},
-
 		// Emit the click event so the search text in the leftsidebar can be reset.
 		handleConversationClick(item) {
 			this.$emit('click-search-result', item.token)

src/components/LeftSidebar/LeftSidebar.vue

@@ -27,6 +27,7 @@
 				class="conversations-search"
 				:is-searching="isSearching"
 				@input="debounceFetchSearchResults"
+				@keypress.enter.prevent.stop="onInputEnter"
 				@abort-search="abortSearch" />
 			<NewGroupConversation
 				v-if="canStartConversations" />
@@ -36,8 +37,11 @@
 				:title="t('spreed', 'Conversations')" />
 			<li>
 				<ConversationsList
+					:conversations-list="conversationsList"
+					:initialised-conversations="initialisedConversations"
 					:search-text="searchText"
-					@click-search-result="handleClickSearchResult" />
+					@click-search-result="handleClickSearchResult"
+					@focus="setFocusedIndex" />
 			</li>
 			<template v-if="isSearching">
 				<template v-if="searchResultsUsers.length !== 0">
@@ -106,12 +110,15 @@ import SearchBox from './SearchBox/SearchBox'
 import debounce from 'debounce'
 import { EventBus } from '../../services/EventBus'
 import {
-	createGroupConversation, createOneToOneConversation,
+	createGroupConversation,
+	createOneToOneConversation,
+	fetchConversations,
 	searchPossibleConversations,
 } from '../../services/conversationsService'
 import { CONVERSATION } from '../../constants'
 import { loadState } from '@nextcloud/initial-state'
 import NewGroupConversation from './NewGroupConversation/NewGroupConversation'
+import arrowNavigation from '../../mixins/arrowNavigation'
 
 export default {
 
@@ -127,6 +134,10 @@ export default {
 		NewGroupConversation,
 	},
 
+	mixins: [
+		arrowNavigation,
+	],
+
 	data() {
 		return {
 			searchText: '',
@@ -137,12 +148,20 @@ export default {
 			contactsLoading: false,
 			isCirclesEnabled: loadState('talk', 'circles_enabled'),
 			canStartConversations: loadState('talk', 'start_conversations'),
+			initialisedConversations: false,
 		}
 	},
 
 	computed: {
 		conversationsList() {
-			return this.$store.getters.conversationsList
+			let conversations = this.$store.getters.conversationsList
+
+			if (this.searchText !== '') {
+				const lowerSearchText = this.searchText.toLowerCase()
+				conversations = conversations.filter(conversation => conversation.displayName.toLowerCase().indexOf(lowerSearchText) !== -1 || conversation.name.toLowerCase().indexOf(lowerSearchText) !== -1)
+			}
+
+			return conversations.sort(this.sortConversations)
 		},
 
 		isSearching() {
@@ -198,9 +217,38 @@ export default {
 		EventBus.$once('resetSearchFilter', () => {
 			this.searchText = ''
 		})
+
+		this.fetchConversations()
+	},
+
+	mounted() {
+		/** Refreshes the conversations every 30 seconds */
+		window.setInterval(() => {
+			if (!this.isFetchingConversations) {
+				this.fetchConversations()
+			}
+		}, 30000)
+
+		EventBus.$on('shouldRefreshConversations', this.debounceFetchConversations)
+
+		this.mountArrowNavigation()
+	},
+
+	beforeDestroy() {
+		EventBus.$off('shouldRefreshConversations', this.debounceFetchConversations)
 	},
 
 	methods: {
+		getFocusableList() {
+			return this.$el.querySelectorAll('li.acli_wrapper .acli')
+		},
+		focusCancel() {
+			return this.abortSearch()
+		},
+		isFocused() {
+			return this.isSearching
+		},
+
 		debounceFetchSearchResults: debounce(function() {
 			if (this.isSearching) {
 				this.fetchSearchResults()
@@ -219,6 +267,9 @@ export default {
 			this.searchResultsGroups = this.searchResults.filter((match) => match.source === 'groups')
 			this.searchResultsCircles = this.searchResults.filter((match) => match.source === 'circles')
 			this.contactsLoading = false
+
+			// If none already focused, focus the first rendered result
+			this.focusInitialise()
 		},
 
 		/**
@@ -243,6 +294,7 @@ export default {
 		hasOneToOneConversationWith(userId) {
 			return !!this.conversationsList.find(conversation => conversation.type === CONVERSATION.TYPE.ONE_TO_ONE && conversation.name === userId)
 		},
+
 		// Reset the search text, therefore end the search operation.
 		abortSearch() {
 			this.searchText = ''
@@ -264,6 +316,51 @@ export default {
 				})
 			})
 		},
+
+		sortConversations(conversation1, conversation2) {
+			if (conversation1.isFavorite !== conversation2.isFavorite) {
+				return conversation1.isFavorite ? -1 : 1
+			}
+
+			return conversation2.lastActivity - conversation1.lastActivity
+		},
+
+		debounceFetchConversations: debounce(function() {
+			if (!this.isFetchingConversations) {
+				this.fetchConversations()
+			}
+		}, 3000),
+
+		async fetchConversations() {
+			this.isFetchingConversations = true
+
+			/**
+			 * Fetches the conversations from the server and then adds them one by one
+			 * to the store.
+			 */
+			try {
+				const conversations = await fetchConversations()
+				this.initialisedConversations = true
+				this.$store.dispatch('purgeConversationsStore')
+				conversations.data.ocs.data.forEach(conversation => {
+					this.$store.dispatch('addConversation', conversation)
+					if (conversation.token === this.$store.getters.getToken()) {
+						this.$store.dispatch('markConversationRead', this.$store.getters.getToken())
+					}
+				})
+				/**
+				 * Emits a global event that is used in App.vue to update the page title once the
+				 * ( if the current route is a conversation and once the conversations are received)
+				 */
+				EventBus.$emit('conversationsReceived', {
+					singleConversation: false,
+				})
+				this.isFetchingConversations = false
+			} catch (error) {
+				console.debug('Error while fetching conversations: ', error)
+				this.isFetchingConversations = false
+			}
+		},
 	},
 }
 </script>

src/components/LeftSidebar/SearchBox/SearchBox.vue

@@ -28,7 +28,8 @@
 			v-model="localValue"
 			class="app-navigation-search__input"
 			type="text"
-			:placeHolder="placeholderText">
+			:placeHolder="placeholderText"
+			@keypress.enter.prevent="handleSubmit">
 		<button
 			v-if="isSearching"
 			class="abort-search icon-close"