From a849eb908bfa815ab440e08cc29d6f840749e7cc Mon Sep 17 00:00:00 2001 From: Marcos Schlup Date: Thu, 13 Feb 2020 15:05:03 -0300 Subject: [PATCH 1/3] Changed search users route --- src/store/actions/user.actions.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/store/actions/user.actions.js b/src/store/actions/user.actions.js index 79c9ce1d..9853320a 100644 --- a/src/store/actions/user.actions.js +++ b/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 }) From c7a56f7fbe7d9602e1c55286f1711a423043549b Mon Sep 17 00:00:00 2001 From: Marcos Schlup Date: Fri, 14 Feb 2020 10:46:50 -0300 Subject: [PATCH 2/3] changed mention menu layout. Removed multi requests when typing from API after first mention --- index.html | 26 ++++++++++++++++++-------- src/components/comment/CommentForm.vue | 9 +++++++-- 2 files changed, 25 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 8ab4f51e..070e00af 100644 --- a/index.html +++ b/index.html @@ -27,32 +27,42 @@ bottom: 0; position: fixed!important; } + .tribute-container ul { + max-height: 240px; + overflow: auto; + padding: 0; + margin: 10px; + border: 1px solid #c5c5c5; + } .tribute-container li { background: white; - padding: 10px 20px; - list-style: none; - border-bottom: 1px solid rgb(238, 238, 238); + 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: rgb(238, 238, 238); - padding: 10 20px; + background: #a591ff; } .tribute-container li:hover { - background: rgb(238, 238, 238); + background: #a591ff; cursor: pointer; - padding: 10 20px; } .tribute-container li.no-match { display: none; } .tribute-container img { - padding-right: 5px; + border-radius: 3px; + width: 26px; + background: #fff; + margin-right: 5px; } diff --git a/src/components/comment/CommentForm.vue b/src/components/comment/CommentForm.vue index 67b2fb25..08c7b3ab 100644 --- a/src/components/comment/CommentForm.vue +++ b/src/components/comment/CommentForm.vue @@ -108,7 +108,7 @@ export default { } `; }, noMatchTemplate: "", - allowSpaces: true, + allowSpaces: false, values: [] }, mentionedUsers: this.existingMentions, @@ -192,8 +192,13 @@ export default { this.handleSelectUser(user); }, tributeNoMatch: debounce(function(searchQuery) { + + const list = [1,1,1,1,1,1,1,1,1,1,1,1,1].map(() => { return { _id:Math.random().toString(36).slice(0,8).toUpperCase(), name: Math.random().toString(36).slice(0,8).toUpperCase()}}); + + // this.setUserList(list); this.searchUsers({ name: searchQuery }).then(users => { - this.setUserList(users); + console.log(users.concat(list)) + this.setUserList(users.concat(list)); }); }, 10), From 12d71edad5ded19e285ea4ffc12083cb8a6aa260 Mon Sep 17 00:00:00 2001 From: Marcos Schlup Date: Fri, 14 Feb 2020 11:50:10 -0300 Subject: [PATCH 3/3] Created component for VueTribute --- index.html | 37 ----------- src/components/VueTribute.js | 45 ------------- src/components/comment/CommentForm.vue | 17 ++--- src/components/comment/CommentTribute.vue | 81 +++++++++++++++++++++++ 4 files changed, 86 insertions(+), 94 deletions(-) delete mode 100644 src/components/VueTribute.js create mode 100644 src/components/comment/CommentTribute.vue diff --git a/index.html b/index.html index d752e8ba..6923d1b6 100644 --- a/index.html +++ b/index.html @@ -27,43 +27,6 @@ bottom: 0; position: fixed!important; } - .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; - } diff --git a/src/components/VueTribute.js b/src/components/VueTribute.js deleted file mode 100644 index 22293b58..00000000 --- a/src/components/VueTribute.js +++ /dev/null @@ -1,45 +0,0 @@ -import Tribute from 'tributejs' - -const VueTribute = { - 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 - ) - } -} - -if (typeof window !== 'undefined' && window.Vue) { - window.Vue.component(VueTribute.name, VueTribute) -} - -export default VueTribute diff --git a/src/components/comment/CommentForm.vue b/src/components/comment/CommentForm.vue index 53516c44..d9e517fd 100644 --- a/src/components/comment/CommentForm.vue +++ b/src/components/comment/CommentForm.vue @@ -6,7 +6,7 @@ --> - - - +
@@ -32,7 +31,6 @@ @click="submitComment"> {{submitButtonText}} - @@ -45,7 +43,7 @@ + +