feat: Update command bar component to composition API
This commit is contained in:
iamsivin
@@ -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 -->
|
||||
|
||||
Reference in New Issue
Block a user