From ad60c05e87129e2b41e86b175756a9fcae75554b Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Fri, 23 Aug 2024 13:11:21 +0530
Subject: [PATCH] feat: Update command bar component to composition API

---
 .../routes/dashboard/commands/commandbar.vue  | 208 +++++++++---------
 1 file changed, 99 insertions(+), 109 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
index 01893bbf9..4ce46111b 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
+++ b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
@@ -1,118 +1,108 @@
-<script>
+<script setup>
 import '@chatwoot/ninja-keys';
-import { useConversationLabels } from 'dashboard/composables/useConversationLabels';
-import { useAI } from 'dashboard/composables/useAI';
-import { useAgentsList } from 'dashboard/composables/useAgentsList';
+import { ref, computed, watch, onMounted } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useTrack } from 'dashboard/composables';
+import { useRoute } from 'dashboard/composables/route';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useAppearanceHotKeys } from './useAppearanceHotKeys';
+import { useInboxHotKeys } from './useInboxHotKeys';
+import { useGoToCommandHotKeys } from './useGoToCommandHotKeys';
+import { useBulkActionsHotKeys } from './useBulkActionsHotKeys';
+import { useConversationHotKeys } from './useConversationHotKeys';
 import wootConstants from 'dashboard/constants/globals';
-import conversationHotKeysMixin from './conversationHotKeys';
-import bulkActionsHotKeysMixin from './bulkActionsHotKeys';
-import inboxHotKeysMixin from './inboxHotKeys';
-import goToCommandHotKeys from './goToCommandHotKeys';
-import appearanceHotKeys from './appearanceHotKeys';
-import { GENERAL_EVENTS } from '../../../helper/AnalyticsHelper/events';
+import { GENERAL_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 
-export default {
-  mixins: [
-    conversationHotKeysMixin,
-    bulkActionsHotKeysMixin,
-    inboxHotKeysMixin,
-    appearanceHotKeys,
-    goToCommandHotKeys,
-  ],
-  setup() {
-    // used in conversationHotKeysMixin
-    const {
-      activeLabels,
-      inactiveLabels,
-      addLabelToConversation,
-      removeLabelFromConversation,
-    } = useConversationLabels();
+const store = useStore();
+const route = useRoute();
+const track = useTrack();
+const { t } = useI18n();
 
-    const { isAIIntegrationEnabled } = useAI();
-    const { agentsList, assignableAgents } = useAgentsList();
+const ninjakeys = ref(null);
 
-    return {
-      agentsList,
-      assignableAgents,
-      activeLabels,
-      inactiveLabels,
-      addLabelToConversation,
-      removeLabelFromConversation,
-      isAIIntegrationEnabled,
-    };
-  },
-  data() {
-    return {
-      // Added selectedSnoozeType to track the selected snooze type
-      // So if the selected snooze type is "custom snooze" then we set selectedSnoozeType with the CMD action id
-      // So that we can track the selected snooze type and when we close the command bar
-      selectedSnoozeType: null,
-    };
-  },
-  computed: {
-    placeholder() {
-      return this.$t('COMMAND_BAR.SEARCH_PLACEHOLDER');
-    },
-    accountId() {
-      return this.$store.getters.getCurrentAccountId;
-    },
-    routeName() {
-      return this.$route.name;
-    },
-    hotKeys() {
-      return [
-        ...this.inboxHotKeys,
-        ...this.conversationHotKeys,
-        ...this.bulkActionsHotKeys,
-        ...this.goToCommandHotKeys,
-        ...this.goToAppearanceHotKeys,
-      ];
-    },
-  },
-  watch: {
-    routeName() {
-      this.setCommandbarData();
-    },
-  },
-  mounted() {
-    this.setCommandbarData();
-  },
-  methods: {
-    setCommandbarData() {
-      this.$refs.ninjakeys.data = this.hotKeys;
-    },
-    onSelected(item) {
-      const {
-        detail: {
-          action: { title = null, section = null, id = null } = {},
-        } = {},
-      } = item;
-      // Added this condition to prevent setting the selectedSnoozeType to null
-      // When we select the "custom snooze" (CMD bar will close and the custom snooze modal will open)
-      if (id === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
-        this.selectedSnoozeType =
-          wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME;
-      } else {
-        this.selectedSnoozeType = null;
-      }
-      this.$track(GENERAL_EVENTS.COMMAND_BAR, {
-        section,
-        action: title,
-      });
-      this.setCommandbarData();
-    },
-    onClosed() {
-      // If the selectedSnoozeType is not "SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME (custom snooze)" then we set the context menu chat id to null
-      // Else we do nothing and its handled in the ChatList.vue hideCustomSnoozeModal() method
-      if (
-        this.selectedSnoozeType !==
-        wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME
-      ) {
-        this.$store.dispatch('setContextMenuChatId', null);
-      }
-    },
-  },
+// Added selectedSnoozeType to track the selected snooze type
+// So if the selected snooze type is "custom snooze" then we set selectedSnoozeType with the CMD action id
+// So that we can track the selected snooze type and when we close the command bar
+const selectedSnoozeType = ref(null);
+
+const { goToAppearanceHotKeys } = useAppearanceHotKeys();
+const { inboxHotKeys } = useInboxHotKeys();
+const { goToCommandHotKeys } = useGoToCommandHotKeys();
+const { bulkActionsHotKeys, selectedConversations } = useBulkActionsHotKeys();
+const {
+  conversationHotKeys,
+  assignableAgents,
+  currentChat,
+  teamsList,
+  activeLabels,
+  draftMessage,
+  replyMode,
+  contextMenuChatId,
+} = useConversationHotKeys();
+
+const placeholder = computed(() => t('COMMAND_BAR.SEARCH_PLACEHOLDER'));
+const routeName = computed(() => route.name);
+
+const hotKeys = computed(() => [
+  ...inboxHotKeys.value,
+  ...goToCommandHotKeys.value,
+  ...goToAppearanceHotKeys.value,
+  ...bulkActionsHotKeys.value,
+  ...conversationHotKeys.value,
+]);
+
+const setCommandBarData = () => {
+  ninjakeys.value.data = hotKeys.value;
 };
+
+const onSelected = item => {
+  const {
+    detail: { action: { title = null, section = null, id = null } = {} } = {},
+  } = item;
+  // Added this condition to prevent setting the selectedSnoozeType to null
+  // When we select the "custom snooze" (CMD bar will close and the custom snooze modal will open)
+  if (id === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
+    selectedSnoozeType.value = wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME;
+  } else {
+    selectedSnoozeType.value = null;
+  }
+
+  track(GENERAL_EVENTS.COMMAND_BAR, {
+    section,
+    action: title,
+  });
+
+  setCommandBarData();
+};
+
+const onClosed = () => {
+  // If the selectedSnoozeType is not "SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME (custom snooze)" then we set the context menu chat id to null
+  // Else we do nothing and its handled in the ChatList.vue hideCustomSnoozeModal() method
+  if (
+    selectedSnoozeType.value !== wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME
+  ) {
+    store.dispatch('setContextMenuChatId', null);
+  }
+};
+
+watch(
+  [
+    routeName,
+    selectedConversations,
+    assignableAgents,
+    currentChat,
+    teamsList,
+    activeLabels,
+    draftMessage,
+    replyMode,
+    contextMenuChatId,
+  ],
+  () => {
+    setCommandBarData();
+  }
+);
+
+onMounted(setCommandBarData);
 </script>
 
 <!-- eslint-disable vue/attribute-hyphenation -->