feat: Add the ability to save filters for contact (#3791)

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -88,12 +88,31 @@ export default {
       currentUser: 'getCurrentUser',
       globalConfig: 'globalConfig/get',
       inboxes: 'inboxes/getInboxes',
-      customViews: 'customViews/getCustomViews',
       accountId: 'getCurrentAccountId',
       currentRole: 'getCurrentRole',
       labels: 'labels/getLabelsOnSidebar',
       teams: 'teams/getMyTeams',
     }),
+    activeCustomView() {
+      if (this.activePrimaryMenu.key === 'contacts') {
+        return 'contact';
+      }
+      if (this.activePrimaryMenu.key === 'conversations') {
+        return 'conversation';
+      }
+      return '';
+    },
+    customViews() {
+      return this.$store.getters['customViews/getCustomViewsByFilterType'](
+        this.activeCustomView
+      );
+    },
+    isConversationOrContactActive() {
+      return (
+        this.activePrimaryMenu.key === 'contacts' ||
+        this.activePrimaryMenu.key === 'conversations'
+      );
+    },
     sideMenuConfig() {
       return getSidebarItems(this.accountId);
     },
@@ -121,16 +140,27 @@ export default {
       return activePrimaryMenu;
     },
   },
+
+  watch: {
+    activeCustomView() {
+      this.fetchCustomViews();
+    },
+  },
   mounted() {
     this.$store.dispatch('labels/get');
     this.$store.dispatch('inboxes/get');
-    this.$store.dispatch('customViews/get');
     this.$store.dispatch('notifications/unReadCount');
     this.$store.dispatch('teams/get');
     this.$store.dispatch('attributes/get');
+    this.fetchCustomViews();
   },
 
   methods: {
+    fetchCustomViews() {
+      if (this.isConversationOrContactActive) {
+        this.$store.dispatch('customViews/get', this.activeCustomView);
+      }
+    },
     toggleKeyShortcutModal() {
       this.showShortcutModal = true;
     },

app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js

@@ -5,6 +5,7 @@ const contacts = accountId => ({
   routes: [
     'contacts_dashboard',
     'contact_profile_dashboard',
+    'contacts_through_custom_view',
     'contacts_labels_dashboard',
   ],
   menuItems: [

app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue

@@ -57,6 +57,9 @@ export default {
     hasSecondaryMenu() {
       return this.menuConfig.menuItems && this.menuConfig.menuItems.length;
     },
+    contactCustomViews() {
+      return this.customViews.filter(view => view.filter_type === 'contact');
+    },
     accessibleMenuItems() {
       if (!this.currentRole) {
         return [];
@@ -157,7 +160,7 @@ export default {
     customViewsSection() {
       return {
         icon: 'folder',
-        label: 'CUSTOM_VIEWS',
+        label: 'CUSTOM_VIEWS_FOLDER',
         hasSubMenu: true,
         key: 'custom_view',
         children: this.customViews
@@ -172,8 +175,27 @@ export default {
           })),
       };
     },
+    contactCustomViewsSection() {
+      return {
+        icon: 'folder',
+        label: 'CUSTOM_VIEWS_SEGMENTS',
+        hasSubMenu: true,
+        key: 'custom_view',
+        children: this.customViews
+          .filter(view => view.filter_type === 'contact')
+          .map(view => ({
+            id: view.id,
+            label: view.name,
+            truncateLabel: true,
+            toState: frontendURL(
+              `accounts/${this.accountId}/contacts/custom_view/${view.id}`
+            ),
+          })),
+      };
+    },
     additionalSecondaryMenuItems() {
       let conversationMenuItems = [this.inboxSection, this.labelSection];
+      let contactMenuItems = [this.contactLabelSection];
       if (this.teams.length) {
         conversationMenuItems = [this.teamSection, ...conversationMenuItems];
       }
@@ -183,9 +205,15 @@ export default {
           ...conversationMenuItems,
         ];
       }
+      if (this.contactCustomViews.length) {
+        contactMenuItems = [
+          this.contactCustomViewsSection,
+          ...contactMenuItems,
+        ];
+      }
       return {
         conversations: conversationMenuItems,
-        contacts: [this.contactLabelSection],
+        contacts: contactMenuItems,
       };
     },
   },