diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue index c53dd926f6c9..ecf0557e10a3 100644 --- a/app/javascript/dashboard/components/ChatList.vue +++ b/app/javascript/dashboard/components/ChatList.vue @@ -250,6 +250,9 @@ export default { ...filter, attributeName: this.$t(`FILTER.ATTRIBUTES.${filter.attributeI18nKey}`), })), + // chatsOnView is to store the chats that are currently visible on the screen, + // which mirrors the conversationList. + chatsOnView: [], foldersQuery: {}, showAddFoldersModal: false, showDeleteFoldersModal: false, @@ -349,18 +352,39 @@ export default { this.currentPageFilterKey ); }, + activeAssigneeTabCount() { + const { activeAssigneeTab } = this; + const count = this.assigneeTabItems.find( + item => item.key === activeAssigneeTab + ).count; + return count; + }, conversationFilters() { return { inboxId: this.conversationInbox ? this.conversationInbox : undefined, assigneeType: this.activeAssigneeTab, status: this.activeStatus, - page: this.currentPage + 1, + page: this.conversationListPagination, labels: this.label ? [this.label] : undefined, teamId: this.teamId || undefined, conversationType: this.conversationType || undefined, folders: this.hasActiveFolders ? this.savedFoldersValue : undefined, }; }, + conversationListPagination() { + const conversationsPerPage = 25; + const isNoFiltersOrFoldersAndChatListNotEmpty = + !this.hasAppliedFiltersOrActiveFolders && this.chatsOnView !== []; + const isUnderPerPage = + this.chatsOnView.length < conversationsPerPage && + this.activeAssigneeTabCount < conversationsPerPage && + this.activeAssigneeTabCount > this.chatsOnView.length; + + if (isNoFiltersOrFoldersAndChatListNotEmpty && isUnderPerPage) { + return 1; + } + return this.currentPage + 1; + }, pageTitle() { if (this.hasAppliedFilters) { return this.$t('CHAT_LIST.TAB_HEADING'); @@ -402,7 +426,6 @@ export default { } else { conversationList = [...this.chatLists]; } - return conversationList; }, activeFolder() { @@ -451,6 +474,9 @@ export default { this.resetAndFetchData(); } }, + chatLists() { + this.chatsOnView = this.conversationList; + }, }, mounted() { this.$store.dispatch('setChatFilter', this.activeStatus);