Skip to content

Commit

Permalink
fix(LeftSidebar): fixed no results hints and improved the filtering l…
Browse files Browse the repository at this point in the history
…ogic.

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
  • Loading branch information
DorraJaouad committed Oct 19, 2023
1 parent 6de7100 commit 5ee5aa7
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 18 deletions.
79 changes: 62 additions & 17 deletions src/components/LeftSidebar/LeftSidebar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -121,16 +121,29 @@
<ul class="h-100" :class="{'scroller': isSearching}">
<!-- Conversations List -->
<template v-if="!isSearching">
<li class="h-100">
<NcEmptyContent v-if="initialisedConversations && filteredConversationsList.length === 0"
:name="t('spreed', 'No matches found')"
:description="displayedMessage">
<template #icon>
<MessageBadge v-if="isFiltered" :size="64" />
<MessageOutline v-else :size="64" />
</template>
<template #action>
<NcButton v-if="isFiltered" @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"
Expand Down Expand Up @@ -252,6 +265,7 @@ import List from 'vue-material-design-icons/FormatListBulleted.vue'
import MessageBadge from 'vue-material-design-icons/MessageBadge.vue'
import Note from 'vue-material-design-icons/NoteEditOutline.vue'
import Plus from 'vue-material-design-icons/Plus.vue'
import MessageOutline from 'vue-material-design-icons/MessageOutline.vue'

import { showError } from '@nextcloud/dialogs'
import { emit } from '@nextcloud/event-bus'
Expand All @@ -264,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'
Expand All @@ -287,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 {

Expand All @@ -310,13 +326,15 @@ export default {
// Icons
AtIcon,
MessageBadge,
MessageOutline,
FilterIcon,
FilterRemoveIcon,
Plus,
ChatPlus,
List,
DotsVertical,
Note,
NcEmptyContent,
},

mixins: [
Expand Down Expand Up @@ -366,6 +384,7 @@ export default {
isCurrentTabLeader: false,
isFocused: false,
isFiltered: null,
isNavigating: false,
}
},

Expand All @@ -386,21 +405,34 @@ export default {
}
},

token() {
return this.$store.getters.getToken()
},

displayedMessage() {
switch (this.isFiltered) {
case 'mentions':
return t('spreed', 'You have no unread mentions in your inbox.')
case 'unread':
return t('spreed', 'You have no unread messages in your inbox.')
default:
return t('spreed', 'Your inbox is empty.')
}
},

filteredConversationsList() {
if (this.isFocused) {
return this.conversationsList
}

if (this.isFiltered === 'unread') {
return this.conversationsList.filter(conversation => conversation.unreadMessages > 0
|| conversation.hasCall || conversation.token === this.$store.getters.getToken())
}

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())
// applying filters
if (this.isFiltered) {
const filteredConversations = this.conversationsList.filter((conversation) => filterFunction(this.isFiltered, conversation)
|| conversation.hasCall
|| conversation.token === this.token)

// return empty if it only includes the current conversation without any flags
const validFilteredConversations = filteredConversations.filter((conversation) => filterFunction(this.isFiltered, conversation))
return !validFilteredConversations.length && !this.isNavigating ? [] : filteredConversations
}

return this.conversationsList
Expand Down Expand Up @@ -449,6 +481,14 @@ export default {
},
},

watch: {
token(value) {
if (value && this.isFiltered) {
this.isNavigating = true
}
},
},

beforeMount() {
// Restore last fetched conversations from browser storage,
// before updated ones come from server
Expand Down Expand Up @@ -524,16 +564,16 @@ export default {

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 navigation status
this.isNavigating = false
},

scrollBottomUnread() {
Expand Down Expand Up @@ -926,6 +966,11 @@ export default {

}

:deep(.empty-content) {
text-align: center;
padding: 20% 10px 0;
}

.settings-button {
justify-content: flex-start !important;
}
Expand Down
2 changes: 1 addition & 1 deletion src/store/conversationsStore.js
Original file line number Diff line number Diff line change
Expand Up @@ -580,7 +580,7 @@ const actions = {
return
}

commit('updateUnreadMessages', { token, unreadMessages: 0, unreadMention: false })
commit('updateUnreadMessages', { token, unreadMessages: 0, unreadMention: false, unreadMentionDirect: false })
},

async markConversationUnread({ commit, dispatch, getters }, { token }) {
Expand Down
59 changes: 59 additions & 0 deletions src/utils/conversation.js
Original file line number Diff line number Diff line change
@@ -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)
}
}

0 comments on commit 5ee5aa7

Please sign in to comment.