feat: Add all filter for conversations (#3102)

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">
-        <i :class="computedInboxClass" />
-        {{ inboxName }}
-      </span>
+      <div class="conversation--metadata">
+        <span v-if="showInboxName" class="label">
+          <i :class="computedInboxClass" />
+          {{ 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>