Refactoring and add empty content for empty filter output

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
nextcloud · Oct 18, 2023 · 79eec40 · 79eec40
1 parent fd6b0f1
commit 79eec40
Show file tree

Hide file tree

Showing 2 changed files with 119 additions and 16 deletions.
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
@@ -121,17 +121,30 @@
 				<ul class="h-100" :class="{'scroller': isSearching}">
 					<!-- Conversations List -->
 					<template v-if="!isSearching">
-						<Hint v-if="initialisedConversations && filteredConversationsList.length === 0" :hint="t('spreed', 'No matches found')" />
-						<li class="h-100">
+						<NcAppNavigationCaption v-if="isFiltered && filteredConversationsList.length > 0" :name="getFilterCaption" />
+						<NcEmptyContent v-else-if="initialisedConversations && filteredConversationsList.length === 0"
+							class="scroller"
+							:name="t('spreed', 'No matches found')"
+							:description="messageDisplay">
+							<template #icon>
+								<MessageBadge :size="64" />
+							</template>
+							<template #action>
+								<NcButton @click="handleFilter(null)">
+									<template #icon>
+										<FilterRemoveIcon :size="20" />
+									</template>
+									{{ t('spreed', 'Clear filter') }}
+								</NcButton>
+							</template>
+						</NcEmptyContent>
+						<li v-show="filteredConversationsList.length > 0" class="h-100">
 							<ConversationsListVirtual ref="scroller"
 								:conversations="filteredConversationsList"
 								:loading="!initialisedConversations"
 								class="scroller h-100"
 								@scroll.native="debounceHandleScroll" />
 						</li>
-						<Hint v-if="initialisedConversations && filteredConversationsList.length === 0"
-							:hint="t('spreed', 'No matches found')" />
-
 						<NcButton v-if="!preventFindingUnread && lastUnreadMentionBelowViewportIndex !== null"
 							class="unread-mention-button"
 							type="primary"
@@ -265,6 +278,7 @@ import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigati
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 
 import ConversationIcon from '../ConversationIcon.vue'
 import Hint from '../Hint.vue'
@@ -288,6 +302,7 @@ import { EventBus } from '../../services/EventBus.js'
 import { talkBroadcastChannel } from '../../services/talkBroadcastChannel.js'
 import CancelableRequest from '../../utils/cancelableRequest.js'
 import { requestTabLeadership } from '../../utils/requestTabLeadership.js'
+import { filterFunction } from '../../utils/conversation.js'
 
 export default {
 
@@ -318,6 +333,7 @@ export default {
 		List,
 		DotsVertical,
 		Note,
+		NcEmptyContent,
 	},
 
 	mixins: [
@@ -367,6 +383,7 @@ export default {
 			isCurrentTabLeader: false,
 			isFocused: false,
 			isFiltered: null,
+			previousFilter: null,
 		}
 	},
 
@@ -387,21 +404,37 @@ export default {
 			}
 		},
 
+		token() {
+			return this.$store.getters.getToken()
+		},
+
+		getFilterCaption() {
+			return this.isFiltered === 'mentions'
+				? t('spreed', 'Unread mentions')
+				: t('spreed', 'Unread messages')
+		},
+
+		messageDisplay() {
+			return this.isFiltered === 'mentions'
+				? t('spreed', 'You have no unread mentions in your inbox')
+				: t('spreed', 'You have no unread messages in your inbox')
+		},
+
 		filteredConversationsList() {
 			if (this.isFocused) {
 				return this.conversationsList
 			}
+			// applying filters
+			if (this.isFiltered) {
+				const filteredConversations = this.conversationsList.filter((conversation) => filterFunction(this.isFiltered, conversation)
+					|| conversation.hasCall
+					|| conversation.token === this.token)
 
-			if (this.isFiltered === 'unread') {
-				return this.conversationsList.filter(conversation => conversation.unreadMessages > 0
-				|| conversation.hasCall || conversation.token === this.$store.getters.getToken())
-			}
+				// return empty if it only includes the current conversation without any flags
+				const isNewFilter = this.isPreviousFilter() !== this.isFiltered
+				const validFilteredConversations = filteredConversations.filter((conversation) => filterFunction(this.isFiltered, conversation))
 
-			if (this.isFiltered === 'mentions') {
-				return this.conversationsList.filter(conversation => conversation.unreadMention
-				|| conversation.hasCall
-				|| (conversation.unreadMessages > 0 && (conversation.type === CONVERSATION.TYPE.ONE_TO_ONE || conversation.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER))
-				|| conversation.token === this.$store.getters.getToken())
+				return !validFilteredConversations.length && isNewFilter ? [] : filteredConversations
 			}
 
 			return this.conversationsList
@@ -523,18 +556,24 @@ export default {
 			this.$refs.openConversationsList.showModal()
 		},
 
+		isPreviousFilter() {
+			const cachedPreviousFilter = this.previousFilter
+			this.previousFilter = this.isFiltered
+			return cachedPreviousFilter
+		},
+
 		handleFilter(filter) {
 			this.isFiltered = filter
-
 			// Store the active filter
 			if (filter) {
 				BrowserStorage.setItem('filterEnabled', filter)
 			} else {
 				BrowserStorage.removeItem('filterEnabled')
 			}
-
 			// Clear the search input once a filter is active
 			this.searchText = ''
+			// Initiate the previous filter
+			this.previousFilter = null
 		},
 
 		scrollBottomUnread() {
@@ -927,6 +966,11 @@ export default {
 
 }
 
+:deep(.empty-content) {
+	text-align: center;
+	margin-top: 10%;
+}
+
 .settings-button {
 	justify-content: flex-start !important;
 }

diff --git a/src/utils/conversation.js b/src/utils/conversation.js
@@ -0,0 +1,59 @@
+/**
+ * @copyright Copyright (c) 2023 <dorra.jaoued7@gmail.com>
+ *
+ * @author Dorra Jaouad <dorra.jaoued7@gmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * 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/>.
+ *
+ */
+import { CONVERSATION } from '../constants.js'
+
+/**
+ * check if the conversation has unread messages
+ *
+ * @param {object} conversation conversation object
+ * @return {boolean}
+ */
+export function hasUnreadMessages(conversation) {
+	return conversation.unreadMessages > 0
+}
+
+/**
+ * check if the conversation has unread mentions
+ *
+ * @param {object} conversation conversation object
+ * @return {boolean}
+ */
+export function hasUnreadMentions(conversation) {
+	return conversation.unreadMention
+		|| conversation.unreadMentionDirect
+		|| (conversation.unreadMessages > 0
+			&& (conversation.type === CONVERSATION.TYPE.ONE_TO_ONE || conversation.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER))
+}
+
+/**
+ * apply the active filter
+ *
+ * @param {string} filter the filter option
+ * @param {object} conversation conversation object
+ */
+export function filterFunction(filter, conversation) {
+	if (filter === 'unread') {
+		return hasUnreadMessages(conversation)
+	} else if (filter === 'mentions') {
+		return hasUnreadMentions(conversation)
+	}
+}