feat: Add all filter for conversations (#3102)

app/finders/conversation_finder.rb

@@ -94,6 +94,8 @@ class ConversationFinder
   end
 
   def filter_by_status
+    return if params[:status] == 'all'
+
     @conversations = @conversations.where(status: params[:status] || DEFAULT_STATUS)
   end
 

app/javascript/dashboard/components/ChatList.vue

@@ -26,6 +26,7 @@
         :active-label="label"
         :team-id="teamId"
         :chat="chat"
+        :show-assignee="showAssigneeInConversationCard"
       />
 
       <div v-if="chatListLoading" class="text-center">
@@ -119,6 +120,9 @@ export default {
         };
       });
     },
+    showAssigneeInConversationCard() {
+      return this.activeAssigneeTab === wootConstants.ASSIGNEE_TYPE.ALL;
+    },
     inbox() {
       return this.$store.getters['inboxes/getInbox'](this.activeInbox);
     },

app/javascript/dashboard/components/widgets/conversation/ChatFilter.vue

@@ -7,6 +7,9 @@
     >
       {{ item['TEXT'] }}
     </option>
+    <option value="all">
+      {{ $t('CHAT_LIST.FILTER_ALL') }}
+    </option>
   </select>
 </template>
 
@@ -30,6 +33,8 @@ export default {
         } else if (this.activeStatus === wootConstants.STATUS_TYPE.PENDING) {
           this.activeStatus = wootConstants.STATUS_TYPE.SNOOZED;
         } else if (this.activeStatus === wootConstants.STATUS_TYPE.SNOOZED) {
+          this.activeStatus = wootConstants.STATUS_TYPE.ALL;
+        } else if (this.activeStatus === wootConstants.STATUS_TYPE.ALL) {
           this.activeStatus = wootConstants.STATUS_TYPE.OPEN;
         }
       }

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -8,7 +8,7 @@
     }"
     @click="cardClick(chat)"
   >
-    <Thumbnail
+    <thumbnail
       v-if="!hideThumbnail"
       :src="currentContact.thumbnail"
       :badge="inboxBadge"
@@ -18,10 +18,20 @@
       size="40px"
     />
     <div class="conversation--details columns">
-      <span v-if="showInboxName" class="label">
+      <div class="conversation--metadata">
-        <i :class="computedInboxClass" />
+        <span v-if="showInboxName" class="label">
-        {{ inboxName }}
+          <i :class="computedInboxClass" />
-      </span>
+          {{ inboxName }}
+        </span>
+
+        <span
+          v-if="showAssignee && assignee"
+          class="label assignee-label text-truncate"
+        >
+          <i class="ion-person" />
+          {{ assignee.name }}
+        </span>
+      </div>
       <h4 class="conversation--user">
         {{ currentContact.name }}
       </h4>
@@ -97,6 +107,10 @@ export default {
       type: [String, Number],
       default: 0,
     },
+    showAssignee: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   computed: {
@@ -109,7 +123,11 @@ export default {
     }),
 
     chatMetadata() {
-      return this.chat.meta;
+      return this.chat.meta || {};
+    },
+
+    assignee() {
+      return this.chatMetadata.assignee || {};
     },
 
     currentContact() {
@@ -252,4 +270,14 @@ export default {
   color: var(--s-600);
   font-size: var(--font-size-mini);
 }
+
+.conversation--metadata {
+  display: flex;
+  justify-content: space-between;
+  padding-right: var(--space-normal);
+
+  .assignee-label {
+    max-width: 50%;
+  }
+}
 </style>

app/javascript/dashboard/constants.js

@@ -10,6 +10,7 @@ export default {
     RESOLVED: 'resolved',
     PENDING: 'pending',
     SNOOZED: 'snoozed',
+    ALL: 'all',
   },
 };
 export const DEFAULT_REDIRECT_URL = '/app/';

app/javascript/dashboard/i18n/locale/en/chatlist.json

@@ -10,6 +10,7 @@
     "SEARCH": {
       "INPUT": "Search for People, Chats, Saved Replies .."
     },
+    "FILTER_ALL": "All",
     "STATUS_TABS": [
       {
         "NAME": "Open",

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

@@ -5,6 +5,9 @@ export const findPendingMessageIndex = (chat, message) => {
   );
 };
 
+const filterByStatus = (chatStatus, filterStatus) =>
+  filterStatus === 'all' ? true : chatStatus === filterStatus;
+
 export const applyPageFilters = (conversation, filters) => {
   const { inboxId, status, labels = [], teamId } = filters;
   const {
@@ -15,9 +18,8 @@ export const applyPageFilters = (conversation, filters) => {
   } = conversation;
   const team = meta.team || {};
   const { id: chatTeamId } = team;
-  const filterByStatus = chatStatus === status;
-  let shouldFilter = filterByStatus;
 
+  let shouldFilter = filterByStatus(chatStatus, status);
   if (inboxId) {
     const filterByInbox = Number(inboxId) === chatInboxId;
     shouldFilter = shouldFilter && filterByInbox;

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

@@ -7,28 +7,28 @@ const conversationList = [
   {
     id: 1,
     inbox_id: 2,
-    status: 1,
+    status: 'open',
     meta: {},
     labels: ['sales', 'dev'],
   },
   {
     id: 2,
     inbox_id: 2,
-    status: 1,
+    status: 'open',
     meta: {},
     labels: ['dev'],
   },
   {
     id: 11,
     inbox_id: 3,
-    status: 1,
+    status: 'resolved',
     meta: { team: { id: 5 } },
     labels: [],
   },
   {
     id: 22,
     inbox_id: 4,
-    status: 1,
+    status: 'pending',
     meta: { team: { id: 5 } },
     labels: ['sales'],
   },
@@ -56,14 +56,14 @@ describe('#applyPageFilters', () => {
   describe('#filter-team', () => {
     it('returns true if conversation has team and team filter is active', () => {
       const filters = {
-        status: 1,
+        status: 'resolved',
         teamId: 5,
       };
-      expect(applyPageFilters(conversationList[3], filters)).toEqual(true);
+      expect(applyPageFilters(conversationList[2], filters)).toEqual(true);
     });
     it('returns true if conversation has no team and team filter is active', () => {
       const filters = {
-        status: 1,
+        status: 'open',
         teamId: 5,
       };
       expect(applyPageFilters(conversationList[0], filters)).toEqual(false);
@@ -73,14 +73,14 @@ describe('#applyPageFilters', () => {
   describe('#filter-inbox', () => {
     it('returns true if conversation has inbox and inbox filter is active', () => {
       const filters = {
-        status: 1,
+        status: 'pending',
         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,
+        status: 'open',
         inboxId: 5,
       };
       expect(applyPageFilters(conversationList[0], filters)).toEqual(false);
@@ -90,14 +90,14 @@ describe('#applyPageFilters', () => {
   describe('#filter-labels', () => {
     it('returns true if conversation has labels and labels filter is active', () => {
       const filters = {
-        status: 1,
+        status: 'open',
         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,
+        status: 'open',
         labels: ['dev'],
       };
       expect(applyPageFilters(conversationList[2], filters)).toEqual(false);
@@ -107,7 +107,13 @@ describe('#applyPageFilters', () => {
   describe('#filter-status', () => {
     it('returns true if conversation has status and status filter is active', () => {
       const filters = {
-        status: 1,
+        status: 'open',
+      };
+      expect(applyPageFilters(conversationList[1], filters)).toEqual(true);
+    });
+    it('returns true if conversation has status and status filter is all', () => {
+      const filters = {
+        status: 'all',
       };
       expect(applyPageFilters(conversationList[1], filters)).toEqual(true);
     });

spec/finders/conversation_finder_spec.rb

@@ -48,6 +48,15 @@ describe ::ConversationFinder do
       end
     end
 
+    context 'with status all' do
+      let(:params) { { status: 'all' } }
+
+      it 'returns all conversations' do
+        result = conversation_finder.perform
+        expect(result[:conversations].length).to be 5
+      end
+    end
+
     context 'with assignee_type assigned' do
       let(:params) { { assignee_type: 'assigned' } }
 

swagger/paths/conversation/index.yml

@@ -15,7 +15,7 @@ get:
     - name: status
       in: query
       type: string
-      enum: ['open', 'resolved', 'pending']
+      enum: ['open', 'resolved', 'pending', 'all']
     - name: page
       in: query
       type: integer

swagger/swagger.json

@@ -1488,7 +1488,8 @@
             "enum": [
               "open",
               "resolved",
-              "pending"
+              "pending",
+              "all"
             ]
           },
           {