chore: Move Canned Responses list to a separate component (#1681)

app/javascript/dashboard/assets/scss/widgets/_reply-box.scss

@@ -8,22 +8,6 @@
   }
 
   .reply-box__top {
-    .canned {
-      background: var(--white);
-      border-bottom: var(--space-small) solid var(--white);
-      border-top: 1px solid var(--color-border);
-      left: 0;
-      max-height: 14rem;
-      overflow: auto;
-      padding-top: var(--space-small);
-      position: absolute;
-      width: 100%;
-      z-index: 100;
-
-      .active a {
-        background: $color-woot;
-      }
-    }
 
     .icon {
       color: $medium-gray;

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

@@ -1,95 +1,45 @@
 <template>
-  <ul
+  <mention-box :items="items" @mention-select="handleMentionClick" />
-    v-if="cannedMessages.length"
-    id="canned-list"
-    class="vertical dropdown menu canned"
-    :style="{ top: getTopPadding() + 'rem' }"
-  >
-    <li
-      v-for="(item, index) in cannedMessages"
-      :id="`canned-${index}`"
-      :key="item.short_code"
-      :class="{ active: index === selectedIndex }"
-      @click="onListItemSelection(index)"
-      @mouseover="onHover(index)"
-    >
-      <a class="text-truncate">
-        <strong>{{ item.short_code }}</strong> - {{ item.content }}
-      </a>
-    </li>
-  </ul>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
+import MentionBox from '../mentions/MentionBox.vue';
 
 export default {
-  props: ['onKeyenter', 'onClick'],
+  components: { MentionBox },
-  data() {
+  props: {
-    return {
+    searchKey: {
-      selectedIndex: 0,
+      type: String,
-    };
+      default: '',
+    },
   },
   computed: {
     ...mapGetters({
       cannedMessages: 'getCannedResponses',
     }),
+    items() {
+      return this.cannedMessages.map(cannedMessage => ({
+        label: cannedMessage.short_code,
+        key: cannedMessage.short_code,
+        description: cannedMessage.content,
+      }));
+    },
   },
   watch: {
-    cannedMessages(newCannedMessages) {
+    searchKey() {
-      if (newCannedMessages.length < this.selectedIndex + 1) {
+      this.fetchCannedResponses();
-        this.selectedIndex = 0;
-      }
     },
   },
   mounted() {
-    document.addEventListener('keydown', this.keyListener);
+    this.fetchCannedResponses();
-  },
-  beforeDestroy() {
-    document.removeEventListener('keydown', this.keyListener);
   },
   methods: {
-    getTopPadding() {
+    fetchCannedResponses() {
-      if (this.cannedMessages.length <= 4) {
+      this.$store.dispatch('getCannedResponse', { searchKey: this.searchKey });
-        return -(this.cannedMessages.length * 2.8 + 1.7);
-      }
-      return -14;
     },
-    isUp(e) {
+    handleMentionClick(item = {}) {
-      return e.keyCode === 38 || (e.ctrlKey && e.keyCode === 80); // UP, Ctrl-P
+      this.$emit('click', item.description);
-    },
-    isDown(e) {
-      return e.keyCode === 40 || (e.ctrlKey && e.keyCode === 78); // DOWN, Ctrl-N
-    },
-    isEnter(e) {
-      return e.keyCode === 13;
-    },
-    keyListener(e) {
-      if (this.isUp(e)) {
-        if (!this.selectedIndex) {
-          this.selectedIndex = this.cannedMessages.length - 1;
-        } else {
-          this.selectedIndex -= 1;
-        }
-      }
-      if (this.isDown(e)) {
-        if (this.selectedIndex === this.cannedMessages.length - 1) {
-          this.selectedIndex = 0;
-        } else {
-          this.selectedIndex += 1;
-        }
-      }
-      if (this.isEnter(e)) {
-        this.onKeyenter(this.cannedMessages[this.selectedIndex].content);
-      }
-      this.$el.scrollTop = 28 * this.selectedIndex;
-    },
-    onHover(index) {
-      this.selectedIndex = index;
-    },
-    onListItemSelection(index) {
-      this.selectedIndex = index;
-      this.onClick(this.cannedMessages[this.selectedIndex].content);
     },
   },
 };

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

@@ -10,9 +10,8 @@
       <canned-response
         v-if="showCannedResponsesList"
         v-on-clickaway="hideCannedResponse"
-        data-dropdown-menu
+        :search-key="cannedResponseSearchKey"
-        :on-keyenter="replaceText"
+        @click="replaceText"
-        :on-click="replaceText"
       />
       <emoji-input
         v-if="showEmojiPicker"
@@ -114,6 +113,7 @@ export default {
       isUploading: false,
       replyType: REPLY_EDITOR_MODES.REPLY,
       isFormatMode: false,
+      cannedResponseSearchKey: '',
     };
   },
   computed: {
@@ -234,14 +234,13 @@ export default {
       const hasNextWord = updatedMessage.includes(' ');
       const isShortCodeActive = isSlashCommand && !hasNextWord;
       if (isShortCodeActive) {
+        this.cannedResponseSearchKey = updatedMessage.substr(
+          1,
+          updatedMessage.length
+        );
         this.showCannedResponsesList = true;
-        if (updatedMessage.length > 1) {
-          const searchKey = updatedMessage.substr(1, updatedMessage.length);
-          this.$store.dispatch('getCannedResponse', { searchKey });
-        } else {
-          this.$store.dispatch('getCannedResponse');
-        }
       } else {
+        this.cannedResponseSearchKey = '';
         this.showCannedResponsesList = false;
       }
     },

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

@@ -0,0 +1,115 @@
+<template>
+  <ul
+    v-if="items.length"
+    class="vertical dropdown menu mention--box"
+    :style="{ top: getTopPadding() + 'rem' }"
+  >
+    <li
+      v-for="(item, index) in items"
+      :id="`mention-item-${index}`"
+      :key="item.key"
+      :class="{ active: index === selectedIndex }"
+      @click="onListItemSelection(index)"
+      @mouseover="onHover(index)"
+    >
+      <a class="text-truncate">
+        <strong>{{ item.label }}</strong> - {{ item.description }}
+      </a>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      selectedIndex: 0,
+    };
+  },
+  watch: {
+    items(newItems) {
+      if (newItems.length < this.selectedIndex + 1) {
+        this.selectedIndex = 0;
+      }
+    },
+  },
+  mounted() {
+    document.addEventListener('keydown', this.keyListener);
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.keyListener);
+  },
+  methods: {
+    getTopPadding() {
+      if (this.items.length <= 4) {
+        return -(this.items.length * 2.8 + 1.7);
+      }
+      return -14;
+    },
+    isUp(e) {
+      return e.keyCode === 38 || (e.ctrlKey && e.keyCode === 80); // UP, Ctrl-P
+    },
+    isDown(e) {
+      return e.keyCode === 40 || (e.ctrlKey && e.keyCode === 78); // DOWN, Ctrl-N
+    },
+    isEnter(e) {
+      return e.keyCode === 13;
+    },
+    keyListener(e) {
+      if (this.isUp(e)) {
+        if (!this.selectedIndex) {
+          this.selectedIndex = this.items.length - 1;
+        } else {
+          this.selectedIndex -= 1;
+        }
+      }
+      if (this.isDown(e)) {
+        if (this.selectedIndex === this.items.length - 1) {
+          this.selectedIndex = 0;
+        } else {
+          this.selectedIndex += 1;
+        }
+      }
+      if (this.isEnter(e)) {
+        this.onMentionSelect();
+      }
+      this.$el.scrollTop = 28 * this.selectedIndex;
+    },
+    onHover(index) {
+      this.selectedIndex = index;
+    },
+    onListItemSelection(index) {
+      this.selectedIndex = index;
+      this.onMentionSelect();
+    },
+    onMentionSelect() {
+      this.$emit('mention-select', this.items[this.selectedIndex]);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.mention--box {
+  background: var(--white);
+  border-bottom: var(--space-small) solid var(--white);
+  border-top: 1px solid var(--color-border);
+  left: 0;
+  max-height: 14rem;
+  overflow: auto;
+  padding-top: var(--space-small);
+  position: absolute;
+  width: 100%;
+  z-index: 100;
+
+  .active a {
+    background: var(--w-500);
+  }
+}
+</style>