Merge pull request #637 from SoftwareEngineeringDaily/feat/634-new-us…

…er-route

[#634] Comment mentions (user tags)

index.html

@@ -27,33 +27,6 @@
       bottom: 0;
       position: fixed!important;
     }
-    .tribute-container li {
-      background: white;
-      padding: 10px 20px;
-      list-style: none;
-      border-bottom: 1px solid rgb(238, 238, 238);
-      box-shadow: 0 3px 10px rgb(238, 238, 238), 0 3px 10px rgb(238, 238, 238);
-    }
-    ul.tribute-container {
-      border-radius: 5px;
-    }
-    .tribute-container li.highlight {
-      background: rgb(238, 238, 238);
-      padding: 10 20px;
-    }
-
-    .tribute-container li:hover {
-      background: rgb(238, 238, 238);
-      cursor: pointer;
-      padding: 10 20px;
-    }
-
-    .tribute-container li.no-match {
-      display: none;
-    }
-    .tribute-container img {
-      padding-right: 5px;
-    }
 
     </style>
   </head>

src/components/comment/CommentForm.vue

@@ -1,6 +1,11 @@
 <template>
   <div v-if="me" class="comment-container">
-    <vue-tribute
+    <!-- <span class="active-without-border" v-if="isLoggedIn">
+      <router-link class="profile-img-link" to="/profile">
+        <img class="profile-img" :src="errorImg || avatarUrl" @error="imgOnError">
+      </router-link>
+    </span> -->
+    <CommentTribute
       class="comment-box__container"
       :options="options"
       @tribute-replaced="tributeReplaced"
@@ -13,8 +18,7 @@
         type="text"
         v-model="commentContent"
       />
-    </vue-tribute>
-
+    </CommentTribute>
     <div v-if="isLoggedIn" style="align-self: flex-end;">
       <div v-if="isSubmitting">
         <spinner :show="true"></spinner>
@@ -26,7 +30,6 @@
           @click="submitComment">
           {{submitButtonText}}
         </button>
-
         <button v-if="showCancel" class='btn-cancel btn btn-link'
         :disabled="isSubmitting"
         @click='cancelPressed'><i class="fa fa-times"/></button>
@@ -39,7 +42,7 @@
 </template>
 
 <script>
-import VueTribute from "@/components/VueTribute.js";
+import CommentTribute from "@/components/comment/CommentTribute";
 import ProfileLabel from "@/components/profile/ProfileLabel";
 import { debounce, each, map } from "lodash";
 import Spinner from "@/components/Spinner";
@@ -88,7 +91,7 @@ export default {
     },
   },
   components: {
-    VueTribute,
+    CommentTribute,
     ProfileLabel,
     Spinner
   },
@@ -105,7 +108,7 @@ export default {
           } </span>`;
         },
         noMatchTemplate: "",
-        allowSpaces: true,
+        allowSpaces: false,
         values: []
       },
       mentionedUsers: this.existingMentions,

src/components/comment/CommentTribute.vue

@@ -0,0 +1,81 @@
+<script>
+import Tribute from 'tributejs'
+
+export default {
+  name: 'vue-tribute',
+  props: {
+    options: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      tribute: null
+    }
+  },
+  mounted() {
+    const $el = this.$slots.default[0].elm
+
+    this.tribute = new Tribute(this.options)
+    this.tribute.attach($el)
+
+    $el.addEventListener('tribute-replaced', e => {
+      this.$emit('tribute-replaced', e)
+    })
+
+    $el.addEventListener('tribute-no-match', e => {
+      this.$emit('tribute-no-match', this.tribute.current.mentionText)
+    })
+  },
+  render(h) {
+    return h(
+      'div',
+      {
+        staticClass: 'v-tribute'
+      },
+      this.$slots.default
+    )
+  }
+}
+</script>
+
+<style>
+.tribute-container ul {
+    max-height: 240px;
+    overflow: auto;
+    padding: 0;
+    margin: 10px;
+    border: 1px solid #c5c5c5;
+}
+.tribute-container li {
+    background: white;
+    padding: 10px;
+    list-style: none;  
+    box-shadow: 0 3px 10px rgb(238, 238, 238), 0 3px 10px rgb(238, 238, 238);
+}
+.tribute-container li:not(:last-child) {
+    border-bottom: 1px solid #c5c5c5;
+}
+ul.tribute-container {
+    border-radius: 5px;
+}
+.tribute-container li.highlight {
+    background: #a591ff;
+}
+
+.tribute-container li:hover {
+    background: #a591ff;
+    cursor: pointer;
+}
+
+.tribute-container li.no-match {
+    display: none;
+}
+.tribute-container img {
+    border-radius: 3px;
+    width: 26px;
+    background: #fff;
+    margin-right: 5px;
+}
+</style>

src/store/actions/user.actions.js

@@ -24,8 +24,8 @@ export default {
       })
   },
 
-  searchUsers: ({ commit, state, getters }, { name }) => {
-    return axios.get(`${BASE_URL}/users/search?name=${name}`)
+  searchUsers: (_, { name }) => {
+    return axios.get(`${BASE_URL}/users/search/names?name=${name}`)
       .then(({data}) => {
         return data
       })