Merge pull request #2355 from nextcloud/feature/vuejs/start-group-conversations

Start group conversations

src/components/Navigation/ContactsList/ContactsList.vue

@@ -48,7 +48,7 @@ export default {
 	},
 	props: {
 		contacts: {
-			type: Object,
+			type: Array,
 			required: true
 		},
 		isLoading: {

src/components/Navigation/GroupsList/GroupsList.vue

@@ -0,0 +1,91 @@
+<!--
+  - @copyright Copyright (c) 2019 Joas Schilling <coding@schilljs.com>
+  -
+  - @author Joas Schilling <coding@schilljs.com>
+  -
+  - @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 class="contacts-list">
+		<AppContentListItem
+			v-for="item of groups"
+			:key="item.id"
+			:title="item.label"
+			@click="createAndJoinConversation(item.id)">
+			<ConversationIcon
+				slot="icon"
+				:item="dummyIconData" />
+		</AppContentListItem>
+	</ul>
+</template>
+
+<script>
+import ConversationIcon from '../../ConversationIcon'
+import AppContentListItem from '../ConversationsList/AppContentListItem/AppContentListItem'
+import { createGroupConversation } from '../../../services/conversationsService'
+import { CONVERSATION } from '../../../constants'
+
+export default {
+	name: 'GroupsList',
+	components: {
+		ConversationIcon,
+		AppContentListItem
+	},
+	props: {
+		groups: {
+			type: Array,
+			required: true
+		},
+		isLoading: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		dummyIconData() {
+			return {
+				type: CONVERSATION.TYPE.GROUP
+			}
+		}
+	},
+	methods: {
+		/**
+		 * Create a new conversation with the selected user.
+		 * @param {string} groupId the ID of the clicked group.
+		 */
+		async createAndJoinConversation(groupId) {
+			console.debug(groupId)
+			const response = await createGroupConversation(groupId)
+			const conversation = response.data.ocs.data
+			this.$store.dispatch('addConversation', conversation)
+			this.$router.push({ name: 'conversation', params: { token: conversation.token } }).catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
+			console.debug(response)
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.ellipsis {
+	text-overflow: ellipsis;
+}
+.contacts-list {
+	overflow: visible;
+	display: block;
+}
+
+</style>

src/components/Navigation/Hint/Hint.vue

@@ -0,0 +1,53 @@
+<!--
+  - @copyright Copyright (c) 2019 Joas Schilling <coding@schilljs.com>
+  -
+  - @author Joas Schilling <coding@schilljs.com>
+  -
+  - @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 class="app-navigation-hint">
+		{{ hint }}
+	</li>
+</template>
+
+<script>
+export default {
+	name: 'Hint',
+	props: {
+		hint: {
+			type: String,
+			required: true
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.app-navigation-hint {
+		color: var(--color-text-maxcontrast);
+		line-height: 44px;
+
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		box-shadow: none !important;
+		user-select: none;
+		pointer-events: none;
+
+		padding-left: 56px;
+	}
+</style>

src/components/Navigation/Navigation.vue

@@ -28,9 +28,19 @@
 			<Caption v-if="isSearching"
 				:title="t('spreed', 'Conversations')" />
 			<ConversationsList />
-			<Caption v-if="isSearching"
-				:title="t('spreed', 'Contacts')" />
-			<ContactsList v-if="isSearching" :contacts="searchResults" />
+			<template v-if="isSearching">
+				<Caption
+					:title="t('spreed', 'Contacts')" />
+				<ContactsList v-if="searchResultsUsers.length !== 0" :contacts="searchResultsUsers" />
+				<Hint v-else-if="contactsLoading" :hint="t('spreed', 'Loading')" />
+				<Hint v-else :hint="t('spreed', 'No results')" />
+
+				<Caption
+					:title="t('spreed', 'Groups')" />
+				<GroupsList v-if="searchResultsGroups.length !== 0" :groups="searchResultsGroups" />
+				<Hint v-else-if="contactsLoading" :hint="t('spreed', 'Loading')" />
+				<Hint v-else :hint="t('spreed', 'No results')" />
+			</template>
 		</ul>
 		<AppNavigationSettings class="settings">
 			Example settings
@@ -43,10 +53,13 @@ import ConversationsList from './ConversationsList/ConversationsList'
 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 GroupsList from './GroupsList/GroupsList'
 import debounce from 'debounce'
 import Caption from './Caption/Caption'
+import Hint from './Hint/Hint'
+import { searchPossibleConversations } from '../../services/conversationsService'
+import { getCurrentUser } from '@nextcloud/auth'
 
 export default {
 
@@ -58,13 +71,17 @@ export default {
 		AppNavigationSettings,
 		AppNavigationSearch,
 		ContactsList,
-		Caption
+		GroupsList,
+		Caption,
+		Hint
 	},
 
 	data() {
 		return {
 			searchText: '',
 			searchResults: {},
+			searchResultsUsers: [],
+			searchResultsGroups: [],
 			contactsLoading: false
 		}
 	},
@@ -86,6 +103,8 @@ export default {
 			this.contactsLoading = true
 			const response = await searchPossibleConversations(this.searchText)
 			this.searchResults = response.data.ocs.data
+			this.searchResultsUsers = this.searchResults.filter((match) => match.source === 'users' && match.id !== getCurrentUser().uid)
+			this.searchResultsGroups = this.searchResults.filter((match) => match.source === 'groups')
 			this.contactsLoading = false
 		}
 	}