diff options
author | Fatih Acet <acetfatih@gmail.com> | 2017-07-08 01:26:52 +0300 |
---|---|---|
committer | Fatih Acet <acetfatih@gmail.com> | 2017-07-21 22:35:25 +0300 |
commit | 9869b6b38943cad9064d0c0906414686908ad733 (patch) | |
tree | d9c44ba1b31419adbc1e27d43ffd225568bbf8f4 /app/assets/javascripts | |
parent | deed4725e32361f84440c33c2b8d8006e05d158e (diff) | |
download | gitlab-ce-9869b6b38943cad9064d0c0906414686908ad733.tar.gz |
IssueNotesRefactor: Implement emoji actions from emoji list.
Diffstat (limited to 'app/assets/javascripts')
8 files changed, 73 insertions, 8 deletions
diff --git a/app/assets/javascripts/notes/components/issue_note.vue b/app/assets/javascripts/notes/components/issue_note.vue index 0c6d17e2302..1dd4786d605 100644 --- a/app/assets/javascripts/notes/components/issue_note.vue +++ b/app/assets/javascripts/notes/components/issue_note.vue @@ -82,7 +82,7 @@ export default { this.$store.dispatch('updateNote', data) .then(() => { this.isEditing = false; - $(this.$refs['noteBody'].$el).renderGFM(); + $(this.$refs.noteBody.$el).renderGFM(); }) .catch(() => { new Flash('Something went wrong while editing your comment. Please try again.'); // eslint-disable-line diff --git a/app/assets/javascripts/notes/components/issue_note_actions.vue b/app/assets/javascripts/notes/components/issue_note_actions.vue index 60e0d10f8e7..88f0fdb9a25 100644 --- a/app/assets/javascripts/notes/components/issue_note_actions.vue +++ b/app/assets/javascripts/notes/components/issue_note_actions.vue @@ -1,5 +1,4 @@ <script> -import Vue from 'vue'; import emojiSmiling from 'icons/_emoji_slightly_smiling_face.svg'; import emojiSmile from 'icons/_emoji_smile.svg'; import emojiSmiley from 'icons/_emoji_smiley.svg'; diff --git a/app/assets/javascripts/notes/components/issue_note_awards_list.vue b/app/assets/javascripts/notes/components/issue_note_awards_list.vue index a6e441ac90c..3753eecbb99 100644 --- a/app/assets/javascripts/notes/components/issue_note_awards_list.vue +++ b/app/assets/javascripts/notes/components/issue_note_awards_list.vue @@ -1,4 +1,6 @@ <script> +/* global Flash */ + import emojiSmiling from 'icons/_emoji_slightly_smiling_face.svg'; import emojiSmile from 'icons/_emoji_smile.svg'; import emojiSmiley from 'icons/_emoji_smiley.svg'; @@ -10,10 +12,18 @@ export default { type: Array, required: true, }, + toggleAwardPath: { + type: String, + required: true, + }, noteAuthorId: { type: Number, required: true, }, + noteId: { + type: Number, + required: true, + }, }, data() { const userId = window.gon.current_user_id; @@ -129,6 +139,22 @@ export default { return title; }, + handleAward(awardName, isAwarded) { + const data = { + endpoint: this.toggleAwardPath, + action: isAwarded ? 'remove' : 'add', + noteId: this.noteId, + awardName, + }; + + this.$store.dispatch('toggleAward', data) + .then(() => { + $(this.$el).find('.award-control').tooltip('fixTitle'); + }) + .catch(() => { + new Flash('Something went wrong on our end.'); // eslint-disable-line + }); + }, }, }; </script> @@ -138,9 +164,10 @@ export default { <div class="awards js-awards-block"> <button v-for="(awardList, awardName) in groupedAwards" - class="btn award-control has-tooltip" :class="getAwardClassBindings(awardList, awardName)" :title="awardTitle(awardList)" + @click="handleAward(awardName, amIAwarded(awardList))" + class="btn award-control has-tooltip" data-placement="bottom" type="button"> <span v-html="getAwardHTML(awardName)"></span> diff --git a/app/assets/javascripts/notes/components/issue_note_body.vue b/app/assets/javascripts/notes/components/issue_note_body.vue index 4f11683c7a9..b5a8a624c85 100644 --- a/app/assets/javascripts/notes/components/issue_note_body.vue +++ b/app/assets/javascripts/notes/components/issue_note_body.vue @@ -64,7 +64,9 @@ export default { actionText="Edited" /> <issue-note-awards-list v-if="note.award_emoji.length" + :noteId="note.id" + :noteAuthorId="note.author.id" :awards="note.award_emoji" - :noteAuthorId="note.author.id" /> + :toggleAwardPath="note.toggle_award_path" /> </div> </template> diff --git a/app/assets/javascripts/notes/components/issue_note_header.vue b/app/assets/javascripts/notes/components/issue_note_header.vue index 879b7c0716b..cf2826e7b2e 100644 --- a/app/assets/javascripts/notes/components/issue_note_header.vue +++ b/app/assets/javascripts/notes/components/issue_note_header.vue @@ -41,7 +41,7 @@ export default { data() { return { isExpanded: true, - } + }; }, computed: { toggleChevronClass() { diff --git a/app/assets/javascripts/notes/components/issue_notes.vue b/app/assets/javascripts/notes/components/issue_notes.vue index d7ca0e3f688..4aa8bd1d1d8 100644 --- a/app/assets/javascripts/notes/components/issue_notes.vue +++ b/app/assets/javascripts/notes/components/issue_notes.vue @@ -3,7 +3,6 @@ import Vue from 'vue'; import Vuex from 'vuex'; -import { mapGetters } from 'vuex'; import storeOptions from '../stores/issue_notes_store'; import IssueNote from './issue_note.vue'; import IssueDiscussion from './issue_discussion.vue'; @@ -28,9 +27,9 @@ export default { IssueCommentForm, }, computed: { - ...mapGetters([ + ...Vuex.mapGetters([ 'notes', - ]) + ]), }, methods: { component(note) { diff --git a/app/assets/javascripts/notes/services/issue_notes_service.js b/app/assets/javascripts/notes/services/issue_notes_service.js index 0a9df556292..c80e23f02cb 100644 --- a/app/assets/javascripts/notes/services/issue_notes_service.js +++ b/app/assets/javascripts/notes/services/issue_notes_service.js @@ -28,4 +28,7 @@ export default { return Vue.http.get(endpoint, options); }, + toggleAward(endpoint, data) { + return Vue.http.post(endpoint, data, { emulateJSON: true }); + }, }; diff --git a/app/assets/javascripts/notes/stores/issue_notes_store.js b/app/assets/javascripts/notes/stores/issue_notes_store.js index 6f3dd24cad3..6a11c65fedc 100644 --- a/app/assets/javascripts/notes/stores/issue_notes_store.js +++ b/app/assets/javascripts/notes/stores/issue_notes_store.js @@ -84,6 +84,29 @@ const mutations = { storeState.notes.push(noteData); }, + toggleAward(storeState, data) { + const { awardName, note, action } = data; + const { id, name, username } = window.gl.currentUserData; + + if (action === 'add') { + note.award_emoji.push({ + name: awardName, + user: { id, name, username }, + }); + } else if (action === 'remove') { + let index = -1; + + note.award_emoji.forEach((a, i) => { + if (a.name === awardName && a.user.id === id) { + index = i; + } + }); + + if (index > -1) { + note.award_emoji.splice(index, 1); + } + } + }, }; const actions = { @@ -124,6 +147,7 @@ const actions = { }, createNewNote(context, data) { const { endpoint, noteData } = data; + return service .createNewNote(endpoint, noteData) .then(res => res.json()) @@ -164,6 +188,17 @@ const actions = { return res; }); }, + toggleAward(context, data) { + const { endpoint, awardName, action, noteId } = data; + const note = context.getters.notesById[noteId]; + + return service + .toggleAward(endpoint, { name: awardName }) + .then(res => res.json()) + .then(() => { + context.commit('toggleAward', { awardName, note, action }); + }); + }, }; export default { |