feat: Replace the use of keyboardEventListener mixin to a composable (Part -3) (#9897)

2025-11-02 12:08:01 +00:00 · 2024-08-08 12:40:56 +05:30
parent ae938b2154
commit 74bbbd25b9
6 changed files with 156 additions and 178 deletions
--- a/app/javascript/dashboard/modules/notes/components/AddNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/AddNote.vue
@@ -1,43 +1,34 @@
-<script>
+<script setup>
+import { ref, computed } from 'vue';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-export default {
-  components: {
-    WootMessageEditor,
-  },
-  mixins: [keyboardEventListenerMixins],
-  data() {
-    return {
-      noteContent: '',
-    };
-  },

-  computed: {
-    buttonDisabled() {
-      return this.noteContent === '';
-    },
-  },
-  methods: {
-    getKeyboardEvents() {
-      return {
-        '$mod+Enter': {
-          action: () => this.onAdd(),
-          allowOnFocusedInput: true,
-        },
-      };
-    },
-    onAdd() {
-      if (this.noteContent !== '') {
-        this.$emit('add', this.noteContent);
-      }
-      this.noteContent = '';
-    },
+const emit = defineEmits(['add']);
+
+const addNoteRef = ref(null);
+const noteContent = ref('');
+
+const buttonDisabled = computed(() => noteContent.value === '');
+
+const onAdd = () => {
+  if (noteContent.value !== '') {
+    emit('add', noteContent.value);
+  }
+  noteContent.value = '';
+};
+
+const keyboardEvents = {
+  '$mod+Enter': {
+    action: () => onAdd(),
+    allowOnFocusedInput: true,
  },
 };
+useKeyboardEvents(keyboardEvents, addNoteRef);
 </script>

 <template>
  <div
+    ref="addNoteRef"
    class="flex flex-col flex-grow p-4 mb-2 overflow-hidden bg-white border border-solid rounded-md shadow-sm border-slate-75 dark:border-slate-700 dark:bg-slate-900 text-slate-700 dark:text-slate-100"
  >
    <WootMessageEditor
--- a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
@@ -1,10 +1,11 @@
 <script>
+import { ref } from 'vue';
 import { mapGetters } from 'vuex';
 import { useAdmin } from 'dashboard/composables/useAdmin';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import Spinner from 'shared/components/Spinner.vue';
 import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
 import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import conversationLabelMixin from 'dashboard/mixins/conversation/labelMixin';

 export default {
@@ -14,7 +15,7 @@ export default {
    AddLabel,
  },

-  mixins: [conversationLabelMixin, keyboardEventListenerMixins],
+  mixins: [conversationLabelMixin],
  props: {
    // conversationId prop is used in /conversation/labelMixin,
    // remove this props when refactoring to composable if not needed
@@ -26,14 +27,46 @@ export default {
  },
  setup() {
    const { isAdmin } = useAdmin();
+
+    const conversationLabelBoxRef = ref(null);
+    const showSearchDropdownLabel = ref(false);
+
+    const toggleLabels = () => {
+      showSearchDropdownLabel.value = !showSearchDropdownLabel.value;
+    };
+
+    const closeDropdownLabel = () => {
+      showSearchDropdownLabel.value = false;
+    };
+
+    const keyboardEvents = {
+      KeyL: {
+        action: e => {
+          e.preventDefault();
+          toggleLabels();
+        },
+      },
+      Escape: {
+        action: () => {
+          if (showSearchDropdownLabel.value) {
+            toggleLabels();
+          }
+        },
+        allowOnFocusedInput: true,
+      },
+    };
+    useKeyboardEvents(keyboardEvents, conversationLabelBoxRef);
    return {
      isAdmin,
+      conversationLabelBoxRef,
+      showSearchDropdownLabel,
+      closeDropdownLabel,
+      toggleLabels,
    };
  },
  data() {
    return {
      selectedLabels: [],
-      showSearchDropdownLabel: false,
    };
  },

@@ -42,37 +75,11 @@ export default {
      conversationUiFlags: 'conversationLabels/getUIFlags',
    }),
  },
-  methods: {
-    toggleLabels() {
-      this.showSearchDropdownLabel = !this.showSearchDropdownLabel;
-    },
-    closeDropdownLabel() {
-      this.showSearchDropdownLabel = false;
-    },
-    getKeyboardEvents() {
-      return {
-        KeyL: {
-          action: e => {
-            e.preventDefault();
-            this.toggleLabels();
-          },
-        },
-        Escape: {
-          action: () => {
-            if (this.showSearchDropdownLabel) {
-              this.toggleLabels();
-            }
-          },
-          allowOnFocusedInput: true,
-        },
-      };
-    },
-  },
 };
 </script>

 <template>
-  <div class="sidebar-labels-wrap">
+  <div ref="conversationLabelBoxRef" class="sidebar-labels-wrap">
    <div
      v-if="!conversationUiFlags.isFetching"
      class="contact-conversation--list"
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
@@ -1,53 +1,51 @@
-<script>
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';

-export default {
-  name: 'ChatwootSearch',
-  mixins: [keyboardEventListenerMixins],
-  props: {
-    title: {
-      type: String,
-      default: 'Chatwoot',
+defineProps({
+  title: {
+    type: String,
+    default: 'Chatwoot',
+  },
+});
+
+const emit = defineEmits(['search', 'close']);
+
+const articleSearchHeaderRef = ref(null);
+const searchInputRef = ref(null);
+const searchQuery = ref('');
+
+onMounted(() => {
+  searchInputRef.value.focus();
+});
+
+const onInput = e => {
+  emit('search', e.target.value);
+};
+
+const onClose = () => {
+  emit('close');
+};
+
+const keyboardEvents = {
+  Slash: {
+    action: e => {
+      e.preventDefault();
+      searchInputRef.value.focus();
    },
  },
-  data() {
-    return {
-      searchQuery: '',
-      isInputFocused: false,
-    };
-  },
-  mounted() {
-    this.$refs.searchInput.focus();
-  },
-  methods: {
-    onInput(e) {
-      this.$emit('search', e.target.value);
-    },
-    onClose() {
-      this.$emit('close');
-    },
-    onFocus() {
-      this.isInputFocused = true;
-    },
-    onBlur() {
-      this.isInputFocused = false;
-    },
-    getKeyboardEvents() {
-      return {
-        Slash: {
-          action: e => {
-            e.preventDefault();
-            this.$refs.searchInput.focus();
-          },
-        },
-      };
+  Escape: {
+    action: () => {
+      onClose();
    },
+    allowOnFocusedInput: true,
  },
 };
+useKeyboardEvents(keyboardEvents, articleSearchHeaderRef);
 </script>

 <template>
-  <div class="flex flex-col py-1">
+  <div ref="articleSearchHeaderRef" class="flex flex-col py-1">
    <div class="flex items-center justify-between py-2 mb-1">
      <h3 class="text-base text-slate-900 dark:text-slate-25">
        {{ title }}
@@ -68,13 +66,11 @@ export default {
        <fluent-icon icon="search" class="" size="18" />
      </div>
      <input
-        ref="searchInput"
+        ref="searchInputRef"
        type="text"
        :placeholder="$t('HELP_CENTER.ARTICLE_SEARCH.PLACEHOLDER')"
        class="block w-full !h-9 ltr:!pl-8 rtl:!pr-8 dark:!bg-slate-700 !bg-slate-25 text-sm rounded-md leading-8 text-slate-700 shadow-sm ring-2 ring-transparent ring-slate-300 border border-solid border-slate-300 placeholder:text-slate-400 focus:border-woot-600 focus:ring-woot-200 !mb-0 focus:bg-slate-25 dark:focus:bg-slate-700 dark:focus:ring-woot-700"
        :value="searchQuery"
-        @focus="onFocus"
-        @blur="onBlur"
        @input="onInput"
      />
    </div>
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
@@ -1,7 +1,6 @@
 <script>
 import { debounce } from '@chatwoot/utils';
 import { useAlert } from 'dashboard/composables';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';

 import SearchHeader from './Header.vue';
 import SearchResults from './SearchResults.vue';
@@ -17,7 +16,7 @@ export default {
    SearchResults,
    ArticleView,
  },
-  mixins: [portalMixin, keyboardEventListenerMixins],
+  mixins: [portalMixin],
  props: {
    selectedPortalSlug: {
      type: String,
@@ -114,16 +113,6 @@ export default {
      useAlert(this.$t('HELP_CENTER.ARTICLE_SEARCH.SUCCESS_ARTICLE_INSERTED'));
      this.onClose();
    },
-    getKeyboardEvents() {
-      return {
-        Escape: {
-          action: () => {
-            this.onClose();
-          },
-          allowOnFocusedInput: true,
-        },
-      };
-    },
  },
 };
 </script>
--- a/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
@@ -1,59 +1,63 @@
-<script>
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-export default {
-  name: 'WootDropdownMenu',
-  componentName: 'WootDropdownMenu',
+<script setup>
+import { ref } from 'vue';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';

-  mixins: [keyboardEventListenerMixins],
-
-  props: {
-    placement: {
-      type: String,
-      default: 'top',
-    },
+defineProps({
+  placement: {
+    type: String,
+    default: 'top',
  },
-  methods: {
-    dropdownMenuButtons() {
-      return this.$refs.dropdownMenu.querySelectorAll(
-        'ul.dropdown li.dropdown-menu__item .button'
-      );
-    },
-    getActiveButtonIndex(menuButtons) {
-      const focusedButton = this.$refs.dropdownMenu.querySelector(
-        'ul.dropdown li.dropdown-menu__item .button:focus'
-      );
-      return Array.from(menuButtons).indexOf(focusedButton);
-    },
-    getKeyboardEvents() {
-      const menuButtons = this.dropdownMenuButtons();
-      return {
-        ArrowUp: () => this.focusPreviousButton(menuButtons),
-        ArrowDown: () => this.focusNextButton(menuButtons),
-      };
-    },
-    focusPreviousButton(menuButtons) {
-      const activeIndex = this.getActiveButtonIndex(menuButtons);
-      const newIndex =
-        activeIndex >= 1 ? activeIndex - 1 : menuButtons.length - 1;
-      this.focusButton(menuButtons, newIndex);
-    },
-    focusNextButton(menuButtons) {
-      const activeIndex = this.getActiveButtonIndex(menuButtons);
-      const newIndex =
-        activeIndex === menuButtons.length - 1 ? 0 : activeIndex + 1;
-      this.focusButton(menuButtons, newIndex);
-    },
-    focusButton(menuButtons, newIndex) {
-      if (menuButtons.length === 0) return;
-      menuButtons[newIndex].focus();
-    },
+});
+
+const dropdownMenuRef = ref(null);
+
+const dropdownMenuButtons = () => {
+  return dropdownMenuRef.value.querySelectorAll(
+    'ul.dropdown li.dropdown-menu__item .button'
+  );
+};
+
+const getActiveButtonIndex = menuButtons => {
+  const focusedButton = dropdownMenuRef.value.querySelector(
+    'ul.dropdown li.dropdown-menu__item .button:focus'
+  );
+  return Array.from(menuButtons).indexOf(focusedButton);
+};
+
+const focusButton = (menuButtons, newIndex) => {
+  if (menuButtons.length === 0) return;
+  menuButtons[newIndex].focus();
+};
+
+const focusPreviousButton = menuButtons => {
+  const activeIndex = getActiveButtonIndex(menuButtons);
+  const newIndex = activeIndex >= 1 ? activeIndex - 1 : menuButtons.length - 1;
+  focusButton(menuButtons, newIndex);
+};
+
+const focusNextButton = menuButtons => {
+  const activeIndex = getActiveButtonIndex(menuButtons);
+  const newIndex = activeIndex === menuButtons.length - 1 ? 0 : activeIndex + 1;
+  focusButton(menuButtons, newIndex);
+};
+
+const keyboardEvents = {
+  ArrowUp: {
+    action: () => focusPreviousButton(dropdownMenuButtons()),
+    allowOnFocusedInput: true,
+  },
+  ArrowDown: {
+    action: () => focusNextButton(dropdownMenuButtons()),
+    allowOnFocusedInput: true,
  },
 };
+
+useKeyboardEvents(keyboardEvents, dropdownMenuRef);
 </script>

 <template>
  <ul
-    ref="dropdownMenu"
+    ref="dropdownMenuRef"
    class="dropdown menu vertical"
    :class="[placement && `dropdown--${placement}`]"
  >
--- a/app/javascript/superadmin_pages/views/playground/Index.vue
+++ b/app/javascript/superadmin_pages/views/playground/Index.vue
@@ -1,6 +1,5 @@
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import PlaygroundHeader from '../../components/playground/Header.vue';
 import UserMessage from '../../components/playground/UserMessage.vue';
 import BotMessage from '../../components/playground/BotMessage.vue';
@@ -13,7 +12,7 @@ export default {
    BotMessage,
    TypingIndicator,
  },
-  mixins: [messageFormatterMixin, keyboardEventListenerMixins],
+  mixins: [messageFormatterMixin],
  props: {
    componentData: {
      type: Object,
@@ -35,16 +34,6 @@ export default {
    this.focusInput();
  },
  methods: {
-    getKeyboardEvents() {
-      return {
-        '$mod+Enter': {
-          action: () => {
-            this.onMessageSend();
-          },
-          allowOnFocusedInput: true,
-        },
-      };
-    },
    focusInput() {
      this.$refs.messageInput.focus();
    },
@@ -133,6 +122,8 @@ export default {
        placeholder="Type a message... [CMD/CTRL + Enter to send]"
        autofocus
        autocomplete="off"
+        @keydown.meta.enter="onMessageSend"
+        @keydown.ctrl.enter="onMessageSend"
      />
    </div>
  </section>