feat: add filtering of archived conversations

Signed-off-by: Maksim Sukharev <[email protected]>
nextcloud · Sep 20, 2024 · 1e76d5f · 1e76d5f
1 parent 843b38f
commit 1e76d5f
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 17 deletions.
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
@@ -45,6 +45,15 @@
 							{{ t('spreed', 'Filter unread messages') }}
 						</NcActionButton>
 
+						<NcActionButton close-after-click
+							:model-value="isFiltered === 'archived'"
+							@click="handleFilter('archived')">
+							<template #icon>
+								<IconArchive :size="20" />
+							</template>
+							{{ t('spreed', 'Filter archived conversations') }}
+						</NcActionButton>
+
 						<NcActionButton v-if="isFiltered"
 							close-after-click
 							class="filter-actions__clearbutton"
@@ -135,6 +144,7 @@
 					:description="emptyContentDescription">
 					<template #icon>
 						<AtIcon v-if="isFiltered === 'mentions'" :size="64" />
+						<IconArchive v-else-if="isFiltered === 'archived'" :size="64" />
 						<MessageBadge v-else-if="isFiltered === 'unread'" :size="64" />
 						<MessageOutline v-else :size="64" />
 					</template>
@@ -277,6 +287,25 @@
 
 		<template #footer>
 			<div class="left-sidebar__settings-button-container">
+				<NcButton v-if="isFiltered"
+					type="tertiary"
+					wide
+					@click="handleFilter(null)">
+					<template #icon>
+						<FilterRemoveIcon :size="20" />
+					</template>
+					{{ t('spreed', 'Clear filters') }}
+				</NcButton>
+				<NcButton v-else
+					type="tertiary"
+					wide
+					@click="handleFilter('archived')">
+					<template #icon>
+						<IconArchive :size="20" />
+					</template>
+					{{ t('spreed', 'Archived conversations') }}
+				</NcButton>
+
 				<NcButton type="tertiary" wide @click="showSettings">
 					<template #icon>
 						<Cog :size="20" />
@@ -293,6 +322,7 @@ import debounce from 'debounce'
 import { ref } from 'vue'
 
 import AccountMultiplePlus from 'vue-material-design-icons/AccountMultiplePlus.vue'
+import IconArchive from 'vue-material-design-icons/Archive.vue'
 import AtIcon from 'vue-material-design-icons/At.vue'
 import ChatPlus from 'vue-material-design-icons/ChatPlus.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
@@ -388,6 +418,7 @@ export default {
 		MessageOutline,
 		FilterIcon,
 		FilterRemoveIcon,
+		IconArchive,
 		Phone,
 		Plus,
 		ChatPlus,
@@ -496,6 +527,8 @@ export default {
 				return t('spreed', 'You have no unread mentions.')
 			case 'unread':
 				return t('spreed', 'You have no unread messages.')
+			case 'archived':
+				return t('spreed', 'You have no archived conversations.')
 			default:
 				return ''
 			}
@@ -505,23 +538,19 @@ export default {
 			if (this.isFocused) {
 				return this.conversationsList
 			}
-			// applying filters
-			if (this.isFiltered) {
-				let validConversationsCount = 0
-				const filteredConversations = this.conversationsList.filter((conversation) => {
-					const conversationIsValid = filterFunction(this.isFiltered, conversation)
-					if (conversationIsValid) {
-						validConversationsCount++
-					}
-					return conversationIsValid
-						|| conversation.hasCall
-						|| conversation.token === this.token
-				})
-				// return empty if it only includes the current conversation without any flags
-				return validConversationsCount === 0 && !this.isNavigating ? [] : filteredConversations
-			}
 
-			return this.conversationsList
+			let validConversationsCount = 0
+			const filteredConversations = this.conversationsList.filter((conversation) => {
+				const conversationIsValid = filterFunction(this.isFiltered, conversation)
+				if (conversationIsValid) {
+					validConversationsCount++
+				}
+				return conversationIsValid
+					|| conversation.hasCall
+					|| conversation.token === this.token
+			})
+			// return empty if it only includes the current conversation without any flags
+			return validConversationsCount === 0 && !this.isNavigating ? [] : filteredConversations
 		},
 
 		isSearching() {
@@ -1076,6 +1105,9 @@ export default {
 }
 
 .left-sidebar__settings-button-container {
+	display: flex;
+	flex-direction: column;
+	gap: var(--default-grid-baseline);
 	padding: calc(2 * var(--default-grid-baseline));
 }
 

diff --git a/src/utils/conversation.js b/src/utils/conversation.js
@@ -2,7 +2,7 @@
  * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-import { CONVERSATION } from '../constants.js'
+import { CONVERSATION, PARTICIPANT } from '../constants.js'
 
 /**
  * check if the conversation has unread messages
@@ -27,6 +27,30 @@ export function hasUnreadMentions(conversation) {
 			&& (conversation.type === CONVERSATION.TYPE.ONE_TO_ONE || conversation.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER))
 }
 
+/**
+ * check if the conversation is archived
+ *
+ * @param {object} conversation conversation object
+ * @return {boolean}
+ */
+export function isArchived(conversation) {
+	return conversation.isArchived
+}
+
+/**
+ * check if the conversation passes default validation:
+ * - non-archived
+ * - archived, but have an unread message with notification triggered
+ *
+ * @param {object} conversation conversation object
+ * @return {boolean}
+ */
+export function isDefault(conversation) {
+	return !isArchived(conversation)
+		|| (conversation.notificationLevel === PARTICIPANT.NOTIFY.ALWAYS && hasUnreadMessages(conversation))
+		|| (conversation.notificationLevel === PARTICIPANT.NOTIFY.MENTION && hasUnreadMentions(conversation))
+}
+
 /**
  * apply the active filter
  *
@@ -38,5 +62,9 @@ export function filterFunction(filter, conversation) {
 		return hasUnreadMessages(conversation)
 	} else if (filter === 'mentions') {
 		return hasUnreadMentions(conversation)
+	} else if (filter === 'archived') {
+		return isArchived(conversation)
+	} else {
+		return isDefault(conversation)
 	}
 }