chore: Adds the ability to see the existing filter when we apply a new filter (#6310)

* feat: Adds existing filter to advance filter modal when we apply a filter

app/javascript/dashboard/components/ChatList.vue

@@ -151,13 +151,14 @@
     </div>
     <woot-modal
       :show.sync="showAdvancedFilters"
-      :on-close="onToggleAdvanceFiltersModal"
+      :on-close="closeAdvanceFiltersModal"
       size="medium"
     >
       <conversation-advanced-filter
         v-if="showAdvancedFilters"
         :initial-filter-types="advancedFilterTypes"
-        :on-close="onToggleAdvanceFiltersModal"
+        :initial-applied-filters="appliedFilter"
+        :on-close="closeAdvanceFiltersModal"
         @applyFilter="onApplyFilter"
       />
     </woot-modal>
@@ -181,6 +182,7 @@ import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomView
 import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
 import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
 import alertMixin from 'shared/mixins/alertMixin';
+import filterMixin from 'shared/mixins/filterMixin';
 
 import {
   hasPressedAltAndJKey,
@@ -202,7 +204,13 @@ export default {
     DeleteCustomViews,
     ConversationBulkActions,
   },
-  mixins: [timeMixin, conversationMixin, eventListenerMixins, alertMixin],
+  mixins: [
+    timeMixin,
+    conversationMixin,
+    eventListenerMixins,
+    alertMixin,
+    filterMixin,
+  ],
   props: {
     conversationInbox: {
       type: [String, Number],
@@ -248,11 +256,13 @@ export default {
       selectedConversations: [],
       selectedInboxes: [],
       isContextMenuOpen: false,
+      appliedFilter: [],
     };
   },
   computed: {
     ...mapGetters({
       currentChat: 'getSelectedChat',
+      currentUser: 'getCurrentUser',
       chatLists: 'getAllConversations',
       mineChatsList: 'getMineChats',
       allChatList: 'getAllStatusChats',
@@ -288,6 +298,13 @@ export default {
         !this.chatListLoading
       );
     },
+    currentUserDetails() {
+      const { id, name } = this.currentUser;
+      return {
+        id,
+        name,
+      };
+    },
     assigneeTabItems() {
       const ASSIGNEE_TYPE_TAB_KEYS = {
         me: 'mineCount',
@@ -461,7 +478,14 @@ export default {
       this.showDeleteFoldersModal = false;
     },
     onToggleAdvanceFiltersModal() {
-      this.showAdvancedFilters = !this.showAdvancedFilters;
+      if (!this.hasAppliedFilters) {
+        this.initializeExistingFilterToModal();
+      }
+      this.showAdvancedFilters = true;
+    },
+    closeAdvanceFiltersModal() {
+      this.showAdvancedFilters = false;
+      this.appliedFilter = [];
     },
     getKeyboardListenerParams() {
       const allConversations = this.$refs.activeConversation.querySelectorAll(
@@ -520,6 +544,7 @@ export default {
         return;
       }
       this.fetchConversations();
+      this.appliedFilter = [];
     },
     fetchConversations() {
       this.$store

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

@@ -7,9 +7,6 @@
     >
       {{ value['TEXT'] }}
     </option>
-    <option value="all">
-      {{ $t('CHAT_LIST.FILTER_ALL') }}
-    </option>
   </select>
 </template>
 

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

@@ -77,6 +77,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    initialAppliedFilters: {
+      type: Array,
+      default: () => [],
+    },
   },
   validations: {
     appliedFilters: {
@@ -102,7 +106,7 @@ export default {
   data() {
     return {
       show: true,
-      appliedFilters: [],
+      appliedFilters: this.initialAppliedFilters,
       filterTypes: this.initialFilterTypes,
       filterAttributeGroups,
       filterGroups: [],
@@ -120,6 +124,7 @@ export default {
     this.setFilterAttributes();
     this.$store.dispatch('campaigns/get');
     if (this.getAppliedConversationFilters.length) {
+      this.appliedFilters = [];
       this.appliedFilters = [...this.getAppliedConversationFilters];
     } else {
       this.appliedFilters.push({
@@ -230,10 +235,6 @@ export default {
                 name: statusFilters[status].TEXT,
               };
             }),
-            {
-              id: 'all',
-              name: this.$t('CHAT_LIST.FILTER_ALL'),
-            },
           ];
         case 'assignee_id':
           return this.$store.getters['agents/getAgents'];

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

@@ -30,6 +30,9 @@
       },
       "snoozed": {
         "TEXT": "Snoozed"
+      },
+      "all": {
+        "TEXT": "All"
       }
     },
     "ATTACHMENTS": {

app/javascript/shared/mixins/filterMixin.js

@@ -1,3 +1,5 @@
+import wootConstants from 'dashboard/constants';
+
 export default {
   methods: {
     setFilterAttributes() {
@@ -38,5 +40,80 @@ export default {
       this.filterTypes = [...this.filterTypes, ...customAttributeTypes];
       this.filterGroups = [...allFilterGroups, customAttributesFormatted];
     },
+
+    initializeExistingFilterToModal() {
+      this.initializeStatusAndAssigneeFilterToModal();
+      this.initializeInboxTeamAndLabelFilterToModal();
+    },
+    initializeStatusAndAssigneeFilterToModal() {
+      if (this.activeStatus !== '') {
+        this.appliedFilter.push({
+          attribute_key: 'status',
+          attribute_model: 'standard',
+          filter_operator: 'equal_to',
+          values: [
+            {
+              id: this.activeStatus,
+              name: this.$t(
+                `CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${this.activeStatus}.TEXT`
+              ),
+            },
+          ],
+          query_operator: 'and',
+          custom_attribute_type: '',
+        });
+      }
+      if (this.activeAssigneeTab === wootConstants.ASSIGNEE_TYPE.ME) {
+        this.appliedFilter.push({
+          attribute_key: 'assignee_id',
+          filter_operator: 'equal_to',
+          values: this.currentUserDetails,
+          query_operator: 'and',
+          custom_attribute_type: '',
+        });
+      }
+    },
+    initializeInboxTeamAndLabelFilterToModal() {
+      if (this.conversationInbox) {
+        this.appliedFilter.push({
+          attribute_key: 'inbox_id',
+          attribute_model: 'standard',
+          filter_operator: 'equal_to',
+          values: [
+            {
+              id: this.conversationInbox,
+              name: this.inbox.name,
+            },
+          ],
+          query_operator: 'and',
+          custom_attribute_type: '',
+        });
+      }
+      if (this.teamId) {
+        this.appliedFilter.push({
+          attribute_key: 'team_id',
+          attribute_model: 'standard',
+          filter_operator: 'equal_to',
+          values: this.activeTeam,
+          query_operator: 'and',
+          custom_attribute_type: '',
+        });
+      }
+      if (this.label) {
+        this.appliedFilter.push({
+          attribute_key: 'labels',
+          attribute_model: 'standard',
+          filter_operator: 'equal_to',
+          values: [
+            {
+              id: this.label,
+              name: this.label,
+            },
+          ],
+          query_operator: 'and',
+          custom_attribute_type: '',
+        });
+      }
+    },
   },
 };

app/javascript/shared/mixins/specs/filterMixin.spec.js

@@ -10,4 +10,8 @@ describe('Test mixin function', () => {
   it('should return proper value from bool', () => {
     expect(wrapper.vm.setFilterAttributes).toBeTruthy();
   });
+
+  it('should return proper value from bool', () => {
+    expect(wrapper.vm.initializeExistingFilterToModal).toBeTruthy();
+  });
 });