Merge pull request #2346 from nextcloud/feature/vuejs/sort-conversations

Sort conversations by favorite and last activity

src/components/Navigation/ConversationsList/Conversation.vue

@@ -21,7 +21,7 @@
 
 <template>
 	<AppContentListItem
-		:title="item.displayName"
+		:title="conversationName"
 		:to="{ name: 'conversation', params: { token: item.token }}"
 		@click.prevent.exact="joinConversation(item.token)">
 		<ConversationIcon
@@ -132,6 +132,11 @@ export default {
 		}
 	},
 	computed: {
+		conversationName() {
+			// FIXME this is just for demonstration, instead the yellow star
+			// FIXME should be added on top of the ConversationIcon
+			return (this.item.isFavorite ? 'FAVORITE' : '') + this.item.displayName
+		},
 		linkToConversation() {
 			return window.location.protocol + '//' + window.location.host + generateUrl('/call/' + this.item.token)
 		},

src/components/Navigation/ConversationsList/ConversationsList.vue

@@ -22,7 +22,7 @@
 <template>
 	<ul class="conversations">
 		<Conversation
-			v-for="item of conversationsList"
+			v-for="item of sortedConversationsList"
 			:key="item.id"
 			:item="item" />
 	</ul>
@@ -42,8 +42,8 @@ export default {
 		conversationsList() {
 			return this.$store.getters.conversationsList
 		},
-		conversations() {
-			return this.$store.getters.conversations
+		sortedConversationsList() {
+			return this.conversationsList.slice().sort(this.sortConversations)
 		}
 	},
 	beforeMount() {
@@ -56,6 +56,13 @@ export default {
 		}, 30000)
 	},
 	methods: {
+		sortConversations(conversation1, conversation2) {
+			if (conversation1.isFavorite !== conversation2.isFavorite) {
+				return conversation1.isFavorite ? -1 : 1
+			}
+
+			return conversation2.lastActivity - conversation1.lastActivity
+		},
 		handleInput(payload) {
 			const selectedConversationToken = payload.token
 			this.joinConversation(selectedConversationToken)