From 7f6abdc987e4a4328d4ba6a88d1ee763775962f8 Mon Sep 17 00:00:00 2001
From: Suraj Rajput <45512114+surajput32@users.noreply.github.com>
Date: Sat, 8 May 2021 19:06:41 +0530
Subject: [PATCH] fix: Add plus icon in sidebar items to settings create page
 (#2141)

* [Issue-#1965] Add changes

* Added newLink prop with default value true to show the new icon

* Fix button alignment

Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>
---
 .../dashboard/components/layout/Sidebar.vue   |  6 ++++
 .../components/layout/SidebarItem.vue         | 32 +++++++++++++++++--
 .../dashboard/settings/labels/AddLabel.vue    | 18 +++++------
 3 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index 509c34696..79bef628a 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -144,6 +144,7 @@ export default {
         cssClass: 'menu-title align-justify',
         toState: frontendURL(`accounts/${this.accountId}/settings/inboxes`),
         toStateName: 'settings_inbox_list',
+        newLinkRouteName: 'settings_inbox_new',
         children: this.inboxes.map(inbox => ({
           id: inbox.id,
           label: inbox.name,
@@ -158,10 +159,13 @@ export default {
         icon: 'ion-pound',
         label: 'LABELS',
         hasSubMenu: true,
+        newLink: true,
         key: 'label',
         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,
@@ -178,10 +182,12 @@ export default {
         icon: 'ion-ios-people',
         label: 'TEAMS',
         hasSubMenu: true,
+        newLink: true,
         key: 'team',
         cssClass: 'menu-title align-justify teams-sidebar-menu',
         toState: frontendURL(`accounts/${this.accountId}/settings/teams`),
         toStateName: 'teams_list',
+        newLinkRouteName: 'settings_teams_new',
         children: this.teams.map(team => ({
           id: team.id,
           label: team.name,
diff --git a/app/javascript/dashboard/components/layout/SidebarItem.vue b/app/javascript/dashboard/components/layout/SidebarItem.vue
index f00753497..810155bef 100644
--- a/app/javascript/dashboard/components/layout/SidebarItem.vue
+++ b/app/javascript/dashboard/components/layout/SidebarItem.vue
@@ -19,7 +19,7 @@
       <span
         v-if="showItem(menuItem)"
         class="child-icon ion-android-add-circle"
-        @click.prevent="newLinkClick"
+        @click.prevent="newLinkClick(menuItem)"
       />
     </a>
     <ul v-if="menuItem.hasSubMenu" class="nested vertical menu">
@@ -52,6 +52,11 @@
         </a>
       </router-link>
     </ul>
+    <add-label-modal
+      v-if="showAddLabel"
+      :show.sync="showAddLabel"
+      :on-close="hideAddLabelPopup"
+    />
   </router-link>
 </template>
 
@@ -61,8 +66,17 @@ 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,
@@ -108,12 +122,24 @@ export default {
       if (!child.truncateLabel) return false;
       return child.label;
     },
-    newLinkClick() {
-      router.push({ name: 'settings_inbox_new', params: { page: 'new' } });
+    newLinkClick(item) {
+      if (item.newLinkRouteName) {
+        router.push({ name: item.newLinkRouteName, params: { page: 'new' } });
+      } else if (item.showModalForNewItem) {
+        if (item.modalName === 'AddLabel') {
+          this.showAddLabelPopup();
+        }
+      }
     },
     showItem(item) {
       return this.isAdmin && item.newLink !== undefined;
     },
+    showAddLabelPopup() {
+      this.showAddLabel = true;
+    },
+    hideAddLabelPopup() {
+      this.showAddLabel = false;
+    },
   },
 };
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
index a7ea01e6b..8056362b4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
@@ -37,16 +37,14 @@
           </label>
         </div>
         <div class="modal-footer">
-          <div class="medium-12 columns">
-            <woot-submit-button
-              :disabled="$v.title.$invalid || uiFlags.isCreating"
-              :button-text="$t('LABEL_MGMT.FORM.CREATE')"
-              :loading="uiFlags.isCreating"
-            />
-            <button class="button clear" @click.prevent="onClose">
-              {{ $t('LABEL_MGMT.FORM.CANCEL') }}
-            </button>
-          </div>
+          <woot-submit-button
+            :disabled="$v.title.$invalid || uiFlags.isCreating"
+            :button-text="$t('LABEL_MGMT.FORM.CREATE')"
+            :loading="uiFlags.isCreating"
+          />
+          <button class="button clear" @click.prevent="onClose">
+            {{ $t('LABEL_MGMT.FORM.CANCEL') }}
+          </button>
         </div>
       </form>
     </div>