Fix: sidebar filters not applying bug for chatlist (#1938)

app/javascript/dashboard/components/ChatList.vue

@@ -150,24 +150,16 @@ export default {
     },
     conversationList() {
       let conversationList = [];
+      const filters = this.conversationFilters;
       if (this.activeAssigneeTab === 'me') {
-        conversationList = this.mineChatsList.slice();
+        conversationList = [...this.mineChatsList(filters)];
       } else if (this.activeAssigneeTab === 'unassigned') {
-        conversationList = this.unAssignedChatsList.slice();
+        conversationList = [...this.unAssignedChatsList(filters)];
       } else {
-        conversationList = this.allChatList.slice();
+        conversationList = [...this.allChatList(filters)];
       }
 
-      if (!this.label) {
-        return conversationList;
-      }
-
-      return conversationList.filter(conversation => {
-        const labels = this.$store.getters[
-          'conversationLabels/getConversationLabels'
-        ](conversation.id);
-        return labels.includes(this.label);
-      });
+      return conversationList;
     },
     activeTeam() {
       if (this.teamId) {

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

@@ -1,4 +1,5 @@
 import authAPI from '../../../api/auth';
+import { applyPageFilters } from './helpers';
 
 export const getSelectedChatConversation = ({
   allConversations,
@@ -18,24 +19,30 @@ const getters = {
     );
     return selectedChat || {};
   },
-  getMineChats(_state) {
+  getMineChats: _state => activeFilters => {
     const currentUserID = authAPI.getCurrentUser().id;
-    return _state.allConversations.filter(chat =>
-      !chat.meta.assignee
-        ? false
-        : chat.status === _state.chatStatusFilter &&
-          chat.meta.assignee.id === currentUserID
-    );
+
+    return _state.allConversations.filter(conversation => {
+      const { assignee } = conversation.meta;
+      const isAssignedToMe = assignee && assignee.id === currentUserID;
+      const shouldFilter = applyPageFilters(conversation, activeFilters);
+      const isChatMine = isAssignedToMe && shouldFilter;
+
+      return isChatMine;
+    });
   },
-  getUnAssignedChats(_state) {
-    return _state.allConversations.filter(
-      chat => !chat.meta.assignee && chat.status === _state.chatStatusFilter
-    );
+  getUnAssignedChats: _state => activeFilters => {
+    return _state.allConversations.filter(conversation => {
+      const isUnAssigned = !conversation.meta.assignee;
+      const shouldFilter = applyPageFilters(conversation, activeFilters);
+      return isUnAssigned && shouldFilter;
+    });
   },
-  getAllStatusChats(_state) {
-    return _state.allConversations.filter(
-      chat => chat.status === _state.chatStatusFilter
-    );
+  getAllStatusChats: _state => activeFilters => {
+    return _state.allConversations.filter(conversation => {
+      const shouldFilter = applyPageFilters(conversation, activeFilters);
+      return shouldFilter;
+    });
   },
   getChatListLoadingStatus: ({ listLoadingStatus }) => listLoadingStatus,
   getAllMessagesLoaded(_state) {
@@ -56,18 +63,6 @@ const getters = {
   },
   getChatStatusFilter: ({ chatStatusFilter }) => chatStatusFilter,
   getSelectedInbox: ({ currentInbox }) => currentInbox,
-  getNextChatConversation: _state => {
-    const [selectedChat] = getSelectedChatConversation(_state);
-    const conversations = getters.getAllStatusChats(_state);
-    if (conversations.length <= 1) {
-      return null;
-    }
-    const currentIndex = conversations.findIndex(
-      conversation => conversation.id === selectedChat.id
-    );
-    const nextIndex = (currentIndex + 1) % conversations.length;
-    return conversations[nextIndex];
-  },
 };
 
 export default getters;

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

@@ -4,3 +4,32 @@ export const findPendingMessageIndex = (chat, message) => {
     m => m.id === message.id || m.id === tempMessageId
   );
 };
+
+export const applyPageFilters = (conversation, filters) => {
+  const { inboxId, status, labels = [], teamId } = filters;
+  const {
+    status: chatStatus,
+    inbox_id: chatInboxId,
+    labels: chatLabels = [],
+    meta = {},
+  } = conversation;
+  const { team = {} } = meta;
+  const { id: chatTeamId } = team;
+  const filterByStatus = chatStatus === status;
+  let shouldFilter = filterByStatus;
+
+  if (inboxId) {
+    const filterByInbox = Number(inboxId) === chatInboxId;
+    shouldFilter = shouldFilter && filterByInbox;
+  }
+  if (teamId) {
+    const filterByTeam = Number(teamId) === chatTeamId;
+    shouldFilter = shouldFilter && filterByTeam;
+  }
+  if (labels.length) {
+    const filterByLabels = labels.every(label => chatLabels.includes(label));
+    shouldFilter = shouldFilter && filterByLabels;
+  }
+
+  return shouldFilter;
+};

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

@@ -47,33 +47,59 @@ describe('#getters', () => {
       ]);
     });
   });
-  describe('#getNextChatConversation', () => {
-    it('return the next chat', () => {
-      const state = {
-        allConversations: [
-          {
-            id: 1,
-          },
-          {
-            id: 2,
-          },
-        ],
-        selectedChatId: 1,
-      };
-      expect(getters.getNextChatConversation(state)).toEqual({
-        id: 2,
-      });
-    });
-    it('return null when there is only one chat', () => {
-      const state = {
-        allConversations: [
-          {
-            id: 1,
-          },
-        ],
-        selectedChatId: 1,
-      };
-      expect(getters.getNextChatConversation(state)).toBeNull();
+  describe('#getUnAssignedChats', () => {
+    it('order returns only chats assigned to user', () => {
+      const conversationList = [
+        {
+          id: 1,
+          inbox_id: 2,
+          status: 1,
+          meta: { assignee: { id: 1 } },
+          labels: ['sales', 'dev'],
+        },
+        {
+          id: 2,
+          inbox_id: 2,
+          status: 1,
+          meta: {},
+          labels: ['dev'],
+        },
+        {
+          id: 11,
+          inbox_id: 3,
+          status: 1,
+          meta: { assignee: { id: 1 } },
+          labels: [],
+        },
+        {
+          id: 22,
+          inbox_id: 4,
+          status: 1,
+          meta: { team: { id: 5 } },
+          labels: ['sales'],
+        },
+      ];
+
+      expect(
+        getters.getUnAssignedChats({ allConversations: conversationList })({
+          status: 1,
+        })
+      ).toEqual([
+        {
+          id: 2,
+          inbox_id: 2,
+          status: 1,
+          meta: {},
+          labels: ['dev'],
+        },
+        {
+          id: 22,
+          inbox_id: 4,
+          status: 1,
+          meta: { team: { id: 5 } },
+          labels: ['sales'],
+        },
+      ]);
     });
   });
 });

app/javascript/dashboard/store/modules/specs/conversations/helpers.spec.js

@@ -1,4 +1,38 @@
-import { findPendingMessageIndex } from '../../conversations/helpers';
+import {
+  findPendingMessageIndex,
+  applyPageFilters,
+} from '../../conversations/helpers';
+
+const conversationList = [
+  {
+    id: 1,
+    inbox_id: 2,
+    status: 1,
+    meta: {},
+    labels: ['sales', 'dev'],
+  },
+  {
+    id: 2,
+    inbox_id: 2,
+    status: 1,
+    meta: {},
+    labels: ['dev'],
+  },
+  {
+    id: 11,
+    inbox_id: 3,
+    status: 1,
+    meta: { team: { id: 5 } },
+    labels: [],
+  },
+  {
+    id: 22,
+    inbox_id: 4,
+    status: 1,
+    meta: { team: { id: 5 } },
+    labels: ['sales'],
+  },
+];
 
 describe('#findPendingMessageIndex', () => {
   it('returns the correct index of pending message with id', () => {
@@ -18,20 +52,64 @@ describe('#findPendingMessageIndex', () => {
   });
 });
 
-describe('#addOrUpdateChat', () => {
-  it('returns the correct index of pending message with id', () => {
-    const chat = {
-      messages: [{ id: 1, status: 'progress' }],
-    };
-    const message = { echo_id: 1 };
-    expect(findPendingMessageIndex(chat, message)).toEqual(0);
+describe('#applyPageFilters', () => {
+  describe('#filter-team', () => {
+    it('returns true if conversation has team and team filter is active', () => {
+      const filters = {
+        status: 1,
+        teamId: 5,
+      };
+      expect(applyPageFilters(conversationList[3], filters)).toEqual(true);
+    });
+    it('returns true if conversation has no team and team filter is active', () => {
+      const filters = {
+        status: 1,
+        teamId: 5,
+      };
+      expect(applyPageFilters(conversationList[0], filters)).toEqual(false);
+    });
   });
 
-  it('returns -1 if pending message with id is not present', () => {
-    const chat = {
-      messages: [{ id: 1, status: 'progress' }],
-    };
-    const message = { echo_id: 2 };
-    expect(findPendingMessageIndex(chat, message)).toEqual(-1);
+  describe('#filter-inbox', () => {
+    it('returns true if conversation has inbox and inbox filter is active', () => {
+      const filters = {
+        status: 1,
+        inboxId: 4,
+      };
+      expect(applyPageFilters(conversationList[3], filters)).toEqual(true);
+    });
+    it('returns true if conversation has no inbox and inbox filter is active', () => {
+      const filters = {
+        status: 1,
+        inboxId: 5,
+      };
+      expect(applyPageFilters(conversationList[0], filters)).toEqual(false);
+    });
+  });
+
+  describe('#filter-labels', () => {
+    it('returns true if conversation has labels and labels filter is active', () => {
+      const filters = {
+        status: 1,
+        labels: ['dev'],
+      };
+      expect(applyPageFilters(conversationList[0], filters)).toEqual(true);
+    });
+    it('returns true if conversation has no inbox and inbox filter is active', () => {
+      const filters = {
+        status: 1,
+        labels: ['dev'],
+      };
+      expect(applyPageFilters(conversationList[2], filters)).toEqual(false);
+    });
+  });
+
+  describe('#filter-status', () => {
+    it('returns true if conversation has status and status filter is active', () => {
+      const filters = {
+        status: 1,
+      };
+      expect(applyPageFilters(conversationList[1], filters)).toEqual(true);
+    });
   });
 });