From af5c71e060fe122f4c2f91e3860f92d72bd102de Mon Sep 17 00:00:00 2001 From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Date: Tue, 24 Jan 2023 09:10:17 +0530 Subject: [PATCH] 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 --- .../dashboard/components/ChatList.vue | 33 +++++++- .../widgets/conversation/ChatFilter.vue | 3 - .../ConversationAdvancedFilter.vue | 11 +-- .../dashboard/i18n/locale/en/chatlist.json | 3 + app/javascript/shared/mixins/filterMixin.js | 77 +++++++++++++++++++ .../shared/mixins/specs/filterMixin.spec.js | 4 + 6 files changed, 119 insertions(+), 12 deletions(-) diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue index 7d4a9239e..9f333f4c8 100644 --- a/app/javascript/dashboard/components/ChatList.vue +++ b/app/javascript/dashboard/components/ChatList.vue @@ -151,13 +151,14 @@ @@ -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 diff --git a/app/javascript/dashboard/components/widgets/conversation/ChatFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ChatFilter.vue index 95774b669..4b41f9a50 100644 --- a/app/javascript/dashboard/components/widgets/conversation/ChatFilter.vue +++ b/app/javascript/dashboard/components/widgets/conversation/ChatFilter.vue @@ -7,9 +7,6 @@ > {{ value['TEXT'] }} - diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue index b70026cb0..9caa11084 100644 --- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue +++ b/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']; diff --git a/app/javascript/dashboard/i18n/locale/en/chatlist.json b/app/javascript/dashboard/i18n/locale/en/chatlist.json index 4713bd611..b96cfb976 100644 --- a/app/javascript/dashboard/i18n/locale/en/chatlist.json +++ b/app/javascript/dashboard/i18n/locale/en/chatlist.json @@ -30,6 +30,9 @@ }, "snoozed": { "TEXT": "Snoozed" + }, + "all": { + "TEXT": "All" } }, "ATTACHMENTS": { diff --git a/app/javascript/shared/mixins/filterMixin.js b/app/javascript/shared/mixins/filterMixin.js index faf7c6220..19e6a2350 100644 --- a/app/javascript/shared/mixins/filterMixin.js +++ b/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: '', + }); + } + }, }, }; diff --git a/app/javascript/shared/mixins/specs/filterMixin.spec.js b/app/javascript/shared/mixins/specs/filterMixin.spec.js index 94fe95ea7..4b54e9326 100644 --- a/app/javascript/shared/mixins/specs/filterMixin.spec.js +++ b/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(); + }); });