From 54eab878060a3f29fee51a818427c223a0e9651d Mon Sep 17 00:00:00 2001
From: fayazara <fayazara@gmail.com>
Date: Thu, 8 Dec 2022 15:48:25 +0530
Subject: [PATCH] test adding child keys

---
 .../i18n/locale/en/generalSettings.json       |  2 ++
 .../dashboard/commands/CommandBarIcons.js     |  1 +
 .../routes/dashboard/commands/commandbar.vue  |  4 +++
 .../dashboard/commands/goToCommandHotKeys.js  | 36 ++++++++++++++-----
 4 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/app/javascript/dashboard/i18n/locale/en/generalSettings.json b/app/javascript/dashboard/i18n/locale/en/generalSettings.json
index f1d87ee73..aebd2c27f 100644
--- a/app/javascript/dashboard/i18n/locale/en/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/en/generalSettings.json
@@ -97,6 +97,7 @@
     "SEARCH_PLACEHOLDER": "Search or jump to",
     "SECTIONS": {
       "GENERAL": "General",
+      "CHATWOOT": "Search Chatwoot",
       "REPORTS": "Reports",
       "CONVERSATION": "Conversation",
       "CHANGE_ASSIGNEE": "Change Assignee",
@@ -107,6 +108,7 @@
     },
     "COMMANDS": {
       "GO_TO_CONVERSATION_DASHBOARD": "Go to Conversation Dashboard",
+      "SEARCH_EVEYTHING": "Search everything",
       "GO_TO_CONTACTS_DASHBOARD": "Go to Contacts Dashboard",
       "GO_TO_REPORTS_OVERVIEW": "Go to Reports Overview",
       "GO_TO_CONVERSATION_REPORTS": "Go to Conversation Reports",
diff --git a/app/javascript/dashboard/routes/dashboard/commands/CommandBarIcons.js b/app/javascript/dashboard/routes/dashboard/commands/CommandBarIcons.js
index d0d0bb633..50da8b920 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/CommandBarIcons.js
+++ b/app/javascript/dashboard/routes/dashboard/commands/CommandBarIcons.js
@@ -26,3 +26,4 @@ export const ICON_LABELS = `<svg role="img" class="ninja-icon ninja-icon--fluent
 export const ICON_ACCOUNT_SETTINGS = `<svg role="img" class="ninja-icon ninja-icon--fluent" width="18" height="18" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.75 3h6.5a.75.75 0 0 1 .743.648L16 3.75V7h1.75A3.25 3.25 0 0 1 21 10.25v6.5A3.25 3.25 0 0 1 17.75 20H6.25A3.25 3.25 0 0 1 3 16.75v-6.5A3.25 3.25 0 0 1 6.25 7H8V3.75a.75.75 0 0 1 .648-.743L8.75 3h6.5-6.5Zm9 5.5H6.25a1.75 1.75 0 0 0-1.75 1.75v6.5c0 .966.784 1.75 1.75 1.75h11.5a1.75 1.75 0 0 0 1.75-1.75v-6.5a1.75 1.75 0 0 0-1.75-1.75Zm-3.25-4h-5V7h5V4.5Z" fill="currentColor"/></svg>`;
 export const ICON_INBOXES = `<svg role="img" class="ninja-icon ninja-icon--fluent" width="18" height="18" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.25 3h11.5a3.25 3.25 0 0 1 3.245 3.066L21 6.25v11.5a3.25 3.25 0 0 1-3.066 3.245L17.75 21H6.25a3.25 3.25 0 0 1-3.245-3.066L3 17.75V6.25a3.25 3.25 0 0 1 3.066-3.245L6.25 3h11.5-11.5ZM4.5 14.5v3.25a1.75 1.75 0 0 0 1.606 1.744l.144.006h11.5a1.75 1.75 0 0 0 1.744-1.607l.006-.143V14.5h-3.825a3.752 3.752 0 0 1-3.475 2.995l-.2.005a3.752 3.752 0 0 1-3.632-2.812l-.043-.188H4.5v3.25-3.25Zm13.25-10H6.25a1.75 1.75 0 0 0-1.744 1.606L4.5 6.25V13H9a.75.75 0 0 1 .743.648l.007.102a2.25 2.25 0 0 0 4.495.154l.005-.154a.75.75 0 0 1 .648-.743L15 13h4.5V6.25a1.75 1.75 0 0 0-1.607-1.744L17.75 4.5Z" fill="currentColor"/></svg>`;
 export const ICON_APPS = `<svg role="img" class="ninja-icon ninja-icon--fluent" width="18" height="18" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m18.492 2.33 3.179 3.179a2.25 2.25 0 0 1 0 3.182l-2.584 2.584A2.25 2.25 0 0 1 21 13.5v5.25A2.25 2.25 0 0 1 18.75 21H5.25A2.25 2.25 0 0 1 3 18.75V5.25A2.25 2.25 0 0 1 5.25 3h5.25a2.25 2.25 0 0 1 2.225 1.915L15.31 2.33a2.25 2.25 0 0 1 3.182 0ZM4.5 18.75c0 .414.336.75.75.75l5.999-.001.001-6.75H4.5v6Zm8.249.749h6.001a.75.75 0 0 0 .75-.75V13.5a.75.75 0 0 0-.75-.75h-6.001v6.75Zm-2.249-15H5.25a.75.75 0 0 0-.75.75v6h6.75v-6a.75.75 0 0 0-.75-.75Zm2.25 4.81v1.94h1.94l-1.94-1.94Zm3.62-5.918-3.178 3.178a.75.75 0 0 0 0 1.061l3.179 3.179a.75.75 0 0 0 1.06 0l3.18-3.179a.75.75 0 0 0 0-1.06l-3.18-3.18a.75.75 0 0 0-1.06 0Z" fill="currentColor"/></svg>`;
+export const SEARCH = `<svg class="ninja-icon ninja-icon--fluent" width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 2.75a7.25 7.25 0 0 1 5.63 11.819l4.9 4.9a.75.75 0 0 1-.976 1.134l-.084-.073l-4.901-4.9A7.25 7.25 0 1 1 10 2.75Zm0 1.5a5.75 5.75 0 1 0 0 11.5a5.75 5.75 0 0 0 0-11.5Z"/></svg>`;
diff --git a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
index b11f9b947..1d794d02a 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
+++ b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
@@ -6,6 +6,7 @@
     hideBreadcrumbs
     :placeholder="placeholder"
     @selected="setCommandbarData"
+    @change="onChange"
   />
 </template>
 
@@ -56,6 +57,9 @@ export default {
     setCommandbarData() {
       this.$refs.ninjakeys.data = this.hotKeys;
     },
+    onChange(ninjaKeyInstance) {
+      // console.log(ninjaKeyInstance);
+    },
   },
 };
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/commands/goToCommandHotKeys.js b/app/javascript/dashboard/routes/dashboard/commands/goToCommandHotKeys.js
index b1d17dcbb..6c6186482 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/goToCommandHotKeys.js
+++ b/app/javascript/dashboard/routes/dashboard/commands/goToCommandHotKeys.js
@@ -20,6 +20,14 @@ import { mapGetters } from 'vuex';
 import { FEATURE_FLAGS } from '../../../featureFlags';
 
 const GO_TO_COMMANDS = [
+  {
+    id: 'search_everything',
+    title: 'COMMAND_BAR.COMMANDS.SEARCH_EVEYTHING',
+    section: 'COMMAND_BAR.SECTIONS.CHATWOOT',
+    icon: ICON_CONVERSATION_DASHBOARD,
+    children: ['Light Theme', 'Dark Theme', 'System Theme'],
+    role: ['agent'],
+  },
   {
     id: 'goto_conversation_dashboard',
     title: 'COMMAND_BAR.COMMANDS.GO_TO_CONVERSATION_DASHBOARD',
@@ -180,18 +188,28 @@ export default {
         }
         return true;
       });
-
       if (!this.isAdmin) {
         commands = commands.filter(command => command.role.includes('agent'));
       }
-
-      return commands.map(command => ({
-        id: command.id,
-        section: this.$t(command.section),
-        title: this.$t(command.title),
-        icon: command.icon,
-        handler: () => this.openRoute(command.path(this.accountId)),
-      }));
+      return commands.map(command => {
+        return {
+          id: command.id,
+          section: this.$t(command.section),
+          title: this.$t(command.title),
+          icon: command.icon,
+          children: command.children,
+          handler: () => {
+            if (command.children) {
+              // const ninja = this.$refs.ninjakeys;
+              const ninja = document.querySelector('ninja-keys');
+              ninja.open({ parent: command.id });
+              return { keepOpen: true };
+            } else {
+              this.openRoute(command.path(this.accountId));
+            }
+          },
+        };
+      });
     },
   },
   methods: {