Merge branch 'develop' into feat/chatlist-page-clip

app/javascript/dashboard/components/ChatList.vue

@@ -249,7 +249,7 @@ const activeAssigneeTabCount = computed(() => {
 });
 
 const conversationListPagination = computed(() => {
-  const conversationsPerPage = 25;
+  const conversationsPerPage = wootConstants.CONVERSATIONS_PER_PAGE;
   const hasChatsOnView =
     chatsOnView.value &&
     Array.isArray(chatsOnView.value) &&
@@ -339,7 +339,10 @@ const conversationList = computed(() => {
     });
   }
 
-  return localConversationList;
+  // Clip to current page size to fix pagination order bug
+  const maxItems =
+    currentFiltersPage.value * wootConstants.CONVERSATIONS_PER_PAGE;
+  return localConversationList.slice(0, maxItems);
 });
 
 const showEndOfListMessage = computed(() => {

app/javascript/dashboard/constants/globals.js

@@ -1,5 +1,6 @@
 export default {
   GRAVATAR_URL: 'https://www.gravatar.com/avatar/',
+  CONVERSATIONS_PER_PAGE: 25,
   ASSIGNEE_TYPE: {
     ME: 'me',
     UNASSIGNED: 'unassigned',

app/javascript/dashboard/store/modules/conversations/getters.js

@@ -75,14 +75,17 @@ const getters = {
   getMineChats: (_state, _, __, rootGetters) => activeFilters => {
     const currentUserID = rootGetters.getCurrentUser?.id;
 
-    return _state.allConversations.filter(conversation => {
+    // Sort after filtering so tab lists keep server pagination order despite merge appends.
-      const { assignee } = conversation.meta;
+    return _state.allConversations
-      const isAssignedToMe = assignee && assignee.id === currentUserID;
+      .filter(conversation => {
-      const shouldFilter = applyPageFilters(conversation, activeFilters);
+        const { assignee } = conversation.meta;
-      const isChatMine = isAssignedToMe && shouldFilter;
+        const isAssignedToMe = assignee && assignee.id === currentUserID;
+        const shouldFilter = applyPageFilters(conversation, activeFilters);
+        const isChatMine = isAssignedToMe && shouldFilter;
 
-      return isChatMine;
+        return isChatMine;
-    });
+      })
+      .sort((a, b) => sortComparator(a, b, _state.chatSortFilter));
   },
   getAppliedConversationFiltersV2: _state => {
     // TODO: Replace existing one with V2 after migrating the filters to use camelcase
@@ -96,11 +99,13 @@ const getters = {
     return hasAppliedFilters ? filterQueryGenerator(_state.appliedFilters) : [];
   },
   getUnAssignedChats: _state => activeFilters => {
-    return _state.allConversations.filter(conversation => {
+    return _state.allConversations
-      const isUnAssigned = !conversation.meta.assignee;
+      .filter(conversation => {
-      const shouldFilter = applyPageFilters(conversation, activeFilters);
+        const isUnAssigned = !conversation.meta.assignee;
-      return isUnAssigned && shouldFilter;
+        const shouldFilter = applyPageFilters(conversation, activeFilters);
-    });
+        return isUnAssigned && shouldFilter;
+      })
+      .sort((a, b) => sortComparator(a, b, _state.chatSortFilter));
   },
   getAllStatusChats: (_state, _, __, rootGetters) => activeFilters => {
     const currentUser = rootGetters.getCurrentUser;
@@ -110,17 +115,19 @@ const getters = {
     const permissions = getUserPermissions(currentUser, currentAccountId);
     const userRole = getUserRole(currentUser, currentAccountId);
 
-    return _state.allConversations.filter(conversation => {
+    return _state.allConversations
-      const shouldFilter = applyPageFilters(conversation, activeFilters);
+      .filter(conversation => {
-      const allowedForRole = applyRoleFilter(
+        const shouldFilter = applyPageFilters(conversation, activeFilters);
-        conversation,
+        const allowedForRole = applyRoleFilter(
-        userRole,
+          conversation,
-        permissions,
+          userRole,
-        currentUserId
+          permissions,
-      );
+          currentUserId
+        );
 
-      return shouldFilter && allowedForRole;
+        return shouldFilter && allowedForRole;
-    });
+      })
+      .sort((a, b) => sortComparator(a, b, _state.chatSortFilter));
   },
   getChatListLoadingStatus: ({ listLoadingStatus }) => listLoadingStatus,
   getAllMessagesLoaded(_state) {