feat: Add contact label filter (#2454)

Co-authored-by: Sojan Jose <sojan@pepalo.com>

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

@@ -27,6 +27,13 @@
           v-if="shouldShowSidebarItem"
           :key="labelSection.toState"
           :menu-item="labelSection"
+          @add-label="showAddLabelPopup"
+        />
+        <sidebar-item
+          v-if="showShowContactSideMenu"
+          :key="contactLabelSection.key"
+          :menu-item="contactLabelSection"
+          @add-label="showAddLabelPopup"
         />
       </transition-group>
     </div>
@@ -57,6 +64,10 @@
       :show="showCreateAccountModal"
       @close-account-create-modal="closeCreateAccountModal"
     />
+
+    <woot-modal :show.sync="showAddLabelModal" :on-close="hideAddLabelPopup">
+      <add-label-modal @close="hideAddLabelPopup" />
+    </woot-modal>
   </aside>
 </template>
 
@@ -74,6 +85,7 @@ import AgentDetails from './sidebarComponents/AgentDetails.vue';
 import OptionsMenu from './sidebarComponents/OptionsMenu.vue';
 import AccountSelector from './sidebarComponents/AccountSelector.vue';
 import AddAccountModal from './sidebarComponents/AddAccountModal.vue';
+import AddLabelModal from '../../routes/dashboard/settings/labels/AddLabel';
 
 export default {
   components: {
@@ -84,6 +96,7 @@ export default {
     OptionsMenu,
     AccountSelector,
     AddAccountModal,
+    AddLabelModal,
   },
   mixins: [adminMixin, alertMixin],
   data() {
@@ -91,6 +104,7 @@ export default {
       showOptionsMenu: false,
       showAccountModal: false,
       showCreateAccountModal: false,
+      showAddLabelModal: false,
     };
   },
 
@@ -131,6 +145,9 @@ export default {
     shouldShowSidebarItem() {
       return this.sidemenuItems.common.routes.includes(this.currentRoute);
     },
+    showShowContactSideMenu() {
+      return this.sidemenuItems.contacts.routes.includes(this.currentRoute);
+    },
     shouldShowTeams() {
       return this.shouldShowSidebarItem && this.teams.length;
     },
@@ -177,6 +194,29 @@ export default {
         })),
       };
     },
+    contactLabelSection() {
+      return {
+        icon: 'ion-pound',
+        label: 'TAGGED_WITH',
+        hasSubMenu: true,
+        key: 'label',
+        newLink: false,
+        cssClass: 'menu-title align-justify',
+        toState: frontendURL(`accounts/${this.accountId}/settings/labels`),
+        toStateName: 'labels_list',
+        showModalForNewItem: true,
+        modalName: 'AddLabel',
+        children: this.accountLabels.map(label => ({
+          id: label.id,
+          label: label.title,
+          color: label.color,
+          truncateLabel: true,
+          toState: frontendURL(
+            `accounts/${this.accountId}/labels/${label.title}/contacts`
+          ),
+        })),
+      };
+    },
     teamSection() {
       return {
         icon: 'ion-ios-people',
@@ -253,6 +293,12 @@ export default {
     closeCreateAccountModal() {
       this.showCreateAccountModal = false;
     },
+    showAddLabelPopup() {
+      this.showAddLabelModal = true;
+    },
+    hideAddLabelPopup() {
+      this.showAddLabelModal = false;
+    },
   },
 };
 </script>

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

@@ -52,11 +52,6 @@
         </a>
       </router-link>
     </ul>
-    <add-label-modal
-      v-if="showAddLabel"
-      :show.sync="showAddLabel"
-      :on-close="hideAddLabelPopup"
-    />
   </router-link>
 </template>
 
@@ -66,17 +61,8 @@ import { mapGetters } from 'vuex';
 import router from '../../routes';
 import adminMixin from '../../mixins/isAdmin';
 import { getInboxClassByType } from 'dashboard/helper/inbox';
-import AddLabelModal from '../../routes/dashboard/settings/labels/AddLabel';
 export default {
-  components: {
-    AddLabelModal,
-  },
   mixins: [adminMixin],
-  data() {
-    return {
-      showAddLabel: false,
-    };
-  },
   props: {
     menuItem: {
       type: Object,
@@ -127,19 +113,13 @@ export default {
         router.push({ name: item.newLinkRouteName, params: { page: 'new' } });
       } else if (item.showModalForNewItem) {
         if (item.modalName === 'AddLabel') {
-          this.showAddLabelPopup();
+          this.$emit('add-label');
         }
       }
     },
     showItem(item) {
       return this.isAdmin && item.newLink !== undefined;
     },
-    showAddLabelPopup() {
-      this.showAddLabel = true;
-    },
-    hideAddLabelPopup() {
-      this.showAddLabel = false;
-    },
   },
 };
 </script>