feat: Replace the use of mentionSelectionKeyboard mixin to a composable (#9904)

app/javascript/dashboard/components/widgets/conversation/TagAgents.vue

@@ -1,124 +1,119 @@
-<script>
-import { mapGetters } from 'vuex';
-import mentionSelectionKeyboardMixin from '../mentions/mentionSelectionKeyboardMixin';
-export default {
-  mixins: [mentionSelectionKeyboardMixin],
-  props: {
-    searchKey: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return { selectedIndex: 0 };
-  },
-  computed: {
-    ...mapGetters({ agents: 'agents/getVerifiedAgents' }),
-    items() {
-      if (!this.searchKey) {
-        return this.agents;
-      }
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue';
+import { useStoreGetters } from 'dashboard/composables/store';
+import { useKeyboardNavigableList } from 'dashboard/composables/useKeyboardNavigableList';
 
-      return this.agents.filter(agent =>
-        agent.name
-          .toLocaleLowerCase()
-          .includes(this.searchKey.toLocaleLowerCase())
-      );
-    },
-  },
-  watch: {
-    items(newListOfAgents) {
-      if (newListOfAgents.length < this.selectedIndex + 1) {
-        this.selectedIndex = 0;
-      }
-    },
+const props = defineProps({
+  searchKey: {
+    type: String,
+    default: '',
   },
+});
 
-  methods: {
-    adjustScroll() {
-      this.$nextTick(() => {
-        this.$el.scrollTop = 50 * this.selectedIndex;
-      });
-    },
-    onHover(index) {
-      this.selectedIndex = index;
-    },
-    onAgentSelect(index) {
-      this.selectedIndex = index;
-      this.onSelect();
-    },
-    onSelect() {
-      this.$emit('click', this.items[this.selectedIndex]);
-    },
-  },
+const emit = defineEmits(['click']);
+
+const getters = useStoreGetters();
+const agents = computed(() => getters['agents/getVerifiedAgents'].value);
+
+const tagAgentsRef = ref(null);
+const selectedIndex = ref(0);
+
+const items = computed(() => {
+  if (!props.searchKey) {
+    return agents.value;
+  }
+  return agents.value.filter(agent =>
+    agent.name.toLowerCase().includes(props.searchKey.toLowerCase())
+  );
+});
+
+const adjustScroll = () => {
+  nextTick(() => {
+    if (tagAgentsRef.value) {
+      tagAgentsRef.value.scrollTop = 50 * selectedIndex.value;
+    }
+  });
+};
+
+const onSelect = () => {
+  emit('click', items.value[selectedIndex.value]);
+};
+
+useKeyboardNavigableList({
+  elementRef: tagAgentsRef,
+  items,
+  onSelect,
+  adjustScroll,
+  selectedIndex,
+});
+
+watch(items, newListOfAgents => {
+  if (newListOfAgents.length < selectedIndex.value + 1) {
+    selectedIndex.value = 0;
+  }
+});
+
+const onHover = index => {
+  selectedIndex.value = index;
+};
+
+const onAgentSelect = index => {
+  selectedIndex.value = index;
+  onSelect();
 };
 </script>
 
 <template>
-  <ul
-    v-if="items.length"
-    class="vertical dropdown menu mention--box"
-    :class="{ 'with-bottom-border': items.length <= 4 }"
-  >
-    <li
-      v-for="(agent, index) in items"
-      :id="`mention-item-${index}`"
-      :key="agent.id"
-      :class="{ active: index === selectedIndex }"
-      class="last:mb-2 items-center rounded-md flex p-2"
-      @click="onAgentSelect(index)"
-      @mouseover="onHover(index)"
+  <div>
+    <ul
+      v-if="items.length"
+      ref="tagAgentsRef"
+      class="vertical dropdown menu mention--box bg-white text-sm dark:bg-slate-700 rounded-md overflow-auto absolute w-full z-20 pt-2 px-2 pb-0 shadow-md left-0 leading-[1.2] bottom-full max-h-[12.5rem] border-t border-solid border-slate-75 dark:border-slate-800"
+      :class="{
+        'border-b-[0.5rem] border-solid border-white dark:!border-slate-700':
+          items.length <= 4,
+      }"
     >
-      <div class="mr-2">
-        <woot-thumbnail
-          :src="agent.thumbnail"
-          :username="agent.name"
-          size="32px"
-        />
-      </div>
-      <div
-        class="flex-1 max-w-full overflow-hidden whitespace-nowrap text-ellipsis"
+      <li
+        v-for="(agent, index) in items"
+        :id="`mention-item-${index}`"
+        :key="agent.id"
+        :class="{
+          'bg-slate-50 dark:bg-slate-800': index === selectedIndex,
+          'last:mb-0': items.length <= 4,
+        }"
+        class="flex items-center p-2 rounded-md last:mb-2"
+        @click="onAgentSelect(index)"
+        @mouseover="onHover(index)"
       >
-        <h5
-          class="mention--user-name mb-0 text-sm text-slate-900 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
-        >
-          {{ agent.name }}
-        </h5>
-        <div
-          class="mention--email overflow-hidden whitespace-nowrap text-ellipsis text-slate-700 dark:text-slate-300 text-xs"
-        >
-          {{ agent.email }}
+        <div class="mr-2">
+          <woot-thumbnail
+            :src="agent.thumbnail"
+            :username="agent.name"
+            size="32px"
+          />
         </div>
-      </div>
-    </li>
-  </ul>
+        <div
+          class="flex-1 max-w-full overflow-hidden whitespace-nowrap text-ellipsis"
+        >
+          <h5
+            class="mb-0 overflow-hidden text-sm text-slate-800 dark:text-slate-100 whitespace-nowrap text-ellipsis"
+            :class="{
+              'text-slate-900 dark:text-slate-100': index === selectedIndex,
+            }"
+          >
+            {{ agent.name }}
+          </h5>
+          <div
+            class="overflow-hidden text-xs whitespace-nowrap text-ellipsis text-slate-700 dark:text-slate-300"
+            :class="{
+              'text-slate-800 dark:text-slate-200': index === selectedIndex,
+            }"
+          >
+            {{ agent.email }}
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
 </template>
-
-<style scoped lang="scss">
-.mention--box {
-  @apply bg-white text-sm dark:bg-slate-700 rounded-md overflow-auto absolute w-full z-20 pt-2 px-2 pb-0 shadow-md left-0 leading-[1.2] bottom-full max-h-[12.5rem] border-t border-solid border-slate-75 dark:border-slate-800;
-
-  &.with-bottom-border {
-    @apply border-b-[0.5rem] border-solid border-white dark:border-slate-600;
-
-    li {
-      &:last-child {
-        @apply mb-0;
-      }
-    }
-  }
-
-  li {
-    &.active {
-      @apply bg-slate-50 dark:bg-slate-800;
-
-      .mention--user-name {
-        @apply text-slate-900 dark:text-slate-100;
-      }
-      .mention--email {
-        @apply text-slate-800 dark:text-slate-200;
-      }
-    }
-  }
-}
-</style>

app/javascript/dashboard/components/widgets/mentions/MentionBox.vue

@@ -1,71 +1,82 @@
-<script>
-import mentionSelectionKeyboardMixin from './mentionSelectionKeyboardMixin';
-export default {
-  mixins: [mentionSelectionKeyboardMixin],
-  props: {
-    items: {
-      type: Array,
-      default: () => {},
-    },
-    type: {
-      type: String,
-      default: 'canned',
-    },
+<script setup>
+import { ref, watch, computed } from 'vue';
+import { useKeyboardNavigableList } from 'dashboard/composables/useKeyboardNavigableList';
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => [],
   },
-  data() {
-    return {
-      selectedIndex: 0,
-    };
-  },
-  watch: {
-    items(newItems) {
-      if (newItems.length < this.selectedIndex + 1) {
-        this.selectedIndex = 0;
-      }
-    },
-    selectedIndex() {
-      const container = this.$refs.mentionsListContainer;
-      const item = container.querySelector(
-        `#mention-item-${this.selectedIndex}`
-      );
-      if (item) {
-        const itemTop = item.offsetTop;
-        const itemBottom = itemTop + item.offsetHeight;
-        const containerTop = container.scrollTop;
-        const containerBottom = containerTop + container.offsetHeight;
-        if (itemTop < containerTop) {
-          container.scrollTop = itemTop;
-        } else if (itemBottom + 34 > containerBottom) {
-          container.scrollTop = itemBottom - container.offsetHeight + 34;
-        }
-      }
-    },
-  },
-  methods: {
-    adjustScroll() {},
-    onHover(index) {
-      this.selectedIndex = index;
-    },
-    onListItemSelection(index) {
-      this.selectedIndex = index;
-      this.onSelect();
-    },
-    onSelect() {
-      this.$emit('mentionSelect', this.items[this.selectedIndex]);
-    },
-    variableKey(item = {}) {
-      return this.type === 'variable' ? `{{${item.label}}}` : `/${item.label}`;
-    },
+  type: {
+    type: String,
+    default: 'canned',
   },
+});
+
+const emit = defineEmits(['mentionSelect']);
+
+const mentionsListContainerRef = ref(null);
+const selectedIndex = ref(0);
+
+const adjustScroll = () => {
+  const container = mentionsListContainerRef.value;
+  const item = container.querySelector(`#mention-item-${selectedIndex.value}`);
+  if (item) {
+    const itemTop = item.offsetTop;
+    const itemBottom = itemTop + item.offsetHeight;
+    const containerTop = container.scrollTop;
+    const containerBottom = containerTop + container.offsetHeight;
+    if (itemTop < containerTop) {
+      container.scrollTop = itemTop;
+    } else if (itemBottom + 34 > containerBottom) {
+      container.scrollTop = itemBottom - container.offsetHeight + 34;
+    }
+  }
+};
+
+const onSelect = () => {
+  emit('mentionSelect', props.items[selectedIndex.value]);
+};
+
+useKeyboardNavigableList({
+  elementRef: mentionsListContainerRef,
+  items: computed(() => props.items),
+  onSelect,
+  adjustScroll,
+  selectedIndex,
+});
+
+watch(
+  () => props.items,
+  newItems => {
+    if (newItems.length < selectedIndex.value + 1) {
+      selectedIndex.value = 0;
+    }
+  }
+);
+
+watch(selectedIndex, adjustScroll);
+
+const onHover = index => {
+  selectedIndex.value = index;
+};
+
+const onListItemSelection = index => {
+  selectedIndex.value = index;
+  onSelect();
+};
+
+const variableKey = (item = {}) => {
+  return props.type === 'variable' ? `{{${item.label}}}` : `/${item.label}`;
 };
 </script>
 
 <template>
   <div
-    ref="mentionsListContainer"
+    ref="mentionsListContainerRef"
     class="bg-white dark:bg-slate-800 rounded-md overflow-auto absolute w-full z-20 pb-0 shadow-md left-0 bottom-full max-h-[9.75rem] border border-solid border-slate-100 dark:border-slate-700 mention--box"
   >
-    <ul class="vertical dropdown menu">
+    <ul class="mb-0 vertical dropdown menu">
       <woot-dropdown-item
         v-for="(item, index) in items"
         :id="`mention-item-${index}`"

app/javascript/dashboard/components/widgets/mentions/mentionSelectionKeyboardMixin.js

@@ -1,62 +0,0 @@
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-
-export default {
-  mixins: [keyboardEventListenerMixins],
-  methods: {
-    moveSelectionUp() {
-      if (!this.selectedIndex) {
-        this.selectedIndex = this.items.length - 1;
-      } else {
-        this.selectedIndex -= 1;
-      }
-      this.adjustScroll();
-    },
-    moveSelectionDown() {
-      if (this.selectedIndex === this.items.length - 1) {
-        this.selectedIndex = 0;
-      } else {
-        this.selectedIndex += 1;
-      }
-      this.adjustScroll();
-    },
-    getKeyboardEvents() {
-      return {
-        ArrowUp: {
-          action: e => {
-            this.moveSelectionUp();
-            e.preventDefault();
-          },
-          allowOnFocusedInput: true,
-        },
-        'Control+KeyP': {
-          action: e => {
-            this.moveSelectionUp();
-            e.preventDefault();
-          },
-          allowOnFocusedInput: true,
-        },
-        ArrowDown: {
-          action: e => {
-            this.moveSelectionDown();
-            e.preventDefault();
-          },
-          allowOnFocusedInput: true,
-        },
-        'Control+KeyN': {
-          action: e => {
-            this.moveSelectionDown();
-            e.preventDefault();
-          },
-          allowOnFocusedInput: true,
-        },
-        Enter: {
-          action: e => {
-            this.onSelect();
-            e.preventDefault();
-          },
-          allowOnFocusedInput: true,
-        },
-      };
-    },
-  },
-};

app/javascript/dashboard/components/widgets/mentions/specs/mentionSelectionKeyboardMixin.spec.js

@@ -1,69 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-
-const localVue = createLocalVue();
-
-const buildComponent = ({ data = {}, methods = {} }) => ({
-  render() {},
-  data() {
-    return { ...data, selectedIndex: 0, items: [1, 2, 3] };
-  },
-  methods: { ...methods, onSelect: vi.fn(), adjustScroll: vi.fn() },
-  mixins: [keyboardEventListenerMixins],
-});
-
-describe('mentionSelectionKeyboardMixin', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    const Component = buildComponent({});
-    wrapper = shallowMount(Component, { localVue });
-  });
-
-  it('ArrowUp and Control+KeyP update selectedIndex correctly', () => {
-    const preventDefault = vi.fn();
-    const keyboardEvents = wrapper.vm.getKeyboardEvents();
-
-    if (keyboardEvents && keyboardEvents.ArrowUp) {
-      keyboardEvents.ArrowUp.action({ preventDefault });
-      expect(wrapper.vm.selectedIndex).toBe(2);
-      expect(preventDefault).toHaveBeenCalled();
-    }
-
-    wrapper.setData({ selectedIndex: 1 });
-    if (keyboardEvents && keyboardEvents['Control+KeyP']) {
-      keyboardEvents['Control+KeyP'].action({ preventDefault });
-      expect(wrapper.vm.selectedIndex).toBe(0);
-      expect(preventDefault).toHaveBeenCalledTimes(2);
-    }
-  });
-
-  it('ArrowDown and Control+KeyN update selectedIndex correctly', () => {
-    const preventDefault = vi.fn();
-    const keyboardEvents = wrapper.vm.getKeyboardEvents();
-
-    if (keyboardEvents && keyboardEvents.ArrowDown) {
-      keyboardEvents.ArrowDown.action({ preventDefault });
-      expect(wrapper.vm.selectedIndex).toBe(1);
-      expect(preventDefault).toHaveBeenCalled();
-    }
-
-    wrapper.setData({ selectedIndex: 1 });
-    if (keyboardEvents && keyboardEvents['Control+KeyN']) {
-      keyboardEvents['Control+KeyN'].action({ preventDefault });
-      expect(wrapper.vm.selectedIndex).toBe(2);
-      expect(preventDefault).toHaveBeenCalledTimes(2);
-    }
-  });
-
-  it('Enter key triggers onSelect method', () => {
-    const preventDefault = vi.fn();
-    const keyboardEvents = wrapper.vm.getKeyboardEvents();
-
-    if (keyboardEvents && keyboardEvents.Enter) {
-      keyboardEvents.Enter.action({ preventDefault });
-      expect(wrapper.vm.onSelect).toHaveBeenCalled();
-      expect(preventDefault).toHaveBeenCalled();
-    }
-  });
-});