IssueNotesRefactor: Implement emoji actions from emoji list.
This commit is contained in:
parent
deed4725e3
commit
9869b6b389
|
@ -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
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -41,7 +41,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
isExpanded: true,
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
toggleChevronClass() {
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -28,4 +28,7 @@ export default {
|
|||
|
||||
return Vue.http.get(endpoint, options);
|
||||
},
|
||||
toggleAward(endpoint, data) {
|
||||
return Vue.http.post(endpoint, data, { emulateJSON: true });
|
||||
},
|
||||
};
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue