Create ContactsList component and display search results

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

src/components/Navigation/Caption/Caption.vue

@@ -0,0 +1,43 @@
+<!--
+  - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @author Marco Ambrosini <marcoambrosini@pm.me
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<li>
+		<h3>{{ title }}</h3>
+		<hr>
+	</li>
+</template>
+
+<script>
+export default {
+	name: 'Caption',
+	props: {
+		title: {
+			type: String,
+			required: true
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/Navigation/ContactsList/ContactsList.vue

@@ -0,0 +1,83 @@
+<!--
+  - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @author Marco Ambrosini <marcoambrosini@pm.me
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<ul>
+		<AppContentListItem
+			v-for="item of contacts"
+			:key="item.id"
+			:to="{ name: 'conversation', params: { token: item.token }}"
+			:title="item.id">
+			<Avatar
+				slot="icon"
+				:size="44"
+				:user="item.id"
+				:display-name="item.id" />
+		</AppContentListItem>
+	</ul>
+</template>
+
+<script>
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+import Avatar from 'nextcloud-vue/dist/Components/Avatar'
+import AppContentListItem from 'nextcloud-vue/dist/Components/AppContentListItem'
+
+export default {
+	name: 'ContactsList',
+	components: {
+		Avatar,
+		AppContentListItem
+	},
+	props: {
+		contacts: {
+			type: Object,
+			required: true
+		},
+		isLoading: {
+			type: Boolean,
+			default: false
+		}
+	},
+	methods: {
+		/**
+		 * here I will have to create a new conversation
+		 */
+		// async joinConversation(token) {
+		// 	await joinConversation(token)
+		// },
+		// handleInput(payload) {
+		// 	const selectedConversationToken = payload.token
+		// 	this.joinConversation(selectedConversationToken)
+		// 	this.$router.push({ path: `/call/${selectedConversationToken}` })
+		// }
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.scroller {
+	flex: 1 0;
+}
+
+.ellipsis {
+	text-overflow: ellipsis;
+}
+</style>

src/components/Navigation/ConversationsList/ConversationsList.vue

@@ -20,7 +20,7 @@
 -->
 
 <template>
-	<ul class="app-navigation">
+	<ul class="conversations">
 		<AppContentListItem
 			v-for="item of conversationsList"
 			:key="item.id"
@@ -108,6 +108,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.conversations {
+	overflow: visible;
+}
+
 .scroller {
 	flex: 1 0;
 }

src/components/Navigation/Navigation.vue

@@ -25,7 +25,10 @@
 			<AppNavigationSearch
 				v-model="searchText"
 				@input="debounceFetchSearchResults" />
+			<Caption v-if="isSearching" title="Conversations" />
 			<ConversationsList />
+			<Caption v-if="isSearching" title="Contacts" />
+			<ContactsList v-if="isSearching" :contacts="searchResults" />
 		</ul>
 		<AppNavigationSettings>
 			Example settings
@@ -39,8 +42,9 @@ import AppNavigation from 'nextcloud-vue/dist/Components/AppNavigation'
 import AppNavigationSearch from './AppNavigationSearch/AppNavigationSearch'
 import AppNavigationSettings from 'nextcloud-vue/dist/Components/AppNavigationSettings'
 import { searchPossibleConversations } from '../../services/conversationsService'
-
+import ContactsList from './ContactsList/ContactsList'
 import debounce from 'debounce'
+import Caption from './Caption/Caption'
 
 export default {
 
@@ -50,7 +54,9 @@ export default {
 		ConversationsList,
 		AppNavigation,
 		AppNavigationSettings,
-		AppNavigationSearch
+		AppNavigationSearch,
+		ContactsList,
+		Caption
 	},
 
 	data() {
@@ -61,14 +67,23 @@ export default {
 		}
 	},
 
+	computed: {
+		isSearching() {
+			return this.searchText !== ''
+		}
+	},
+
 	methods: {
 		debounceFetchSearchResults: debounce(function() {
-			this.fetchSearchResults()
+			if (this.isSearching) {
+				this.fetchSearchResults()
+			}
 		}, 250),
 
 		async fetchSearchResults() {
 			this.contactsLoading = true
-			this.searchResults = await searchPossibleConversations(this.searchText)
+			const response = await searchPossibleConversations(this.searchText)
+			this.searchResults = response.data.ocs.data
 			this.contactsLoading = false
 		}
 	}