diff options
Diffstat (limited to 'app/assets/javascripts/work_items/components/notes/work_item_note_awards_list.vue')
-rw-r--r-- | app/assets/javascripts/work_items/components/notes/work_item_note_awards_list.vue | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/app/assets/javascripts/work_items/components/notes/work_item_note_awards_list.vue b/app/assets/javascripts/work_items/components/notes/work_item_note_awards_list.vue new file mode 100644 index 00000000000..3c30c204ab6 --- /dev/null +++ b/app/assets/javascripts/work_items/components/notes/work_item_note_awards_list.vue @@ -0,0 +1,95 @@ +<script> +import * as Sentry from '@sentry/browser'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import AwardsList from '~/vue_shared/components/awards_list.vue'; +import { getMutation, optimisticAwardUpdate } from '../../notes/award_utils'; + +export default { + components: { + AwardsList, + }, + inject: ['fullPath'], + props: { + workItemIid: { + type: String, + required: true, + }, + note: { + type: Object, + required: true, + }, + isModal: { + type: Boolean, + required: false, + default: false, + }, + }, + computed: { + awardsListBoundary() { + return this.isModal ? '.modal-body' : ''; + }, + awards() { + return this.note.awardEmoji.nodes.map((award) => { + return { + ...award, + user: { + ...award.user, + id: getIdFromGraphQLId(award.user.id), + }, + }; + }); + }, + hasAwardEmojiPermission() { + return this.note.userPermissions.awardEmoji; + }, + currentUserId() { + return window.gon.current_user_id; + }, + }, + methods: { + async handleAward(name) { + if (!this.hasAwardEmojiPermission) { + return; + } + + const { mutation, mutationName, errorMessage } = getMutation({ note: this.note, name }); + + try { + await this.$apollo.mutate({ + mutation, + variables: { + awardableId: this.note.id, + name, + }, + optimisticResponse: { + [mutationName]: { + errors: [], + }, + }, + update: optimisticAwardUpdate({ + note: this.note, + name, + fullPath: this.fullPath, + workItemIid: this.workItemIid, + }), + }); + } catch (error) { + this.$emit('error', errorMessage); + Sentry.captureException(error); + } + }, + }, +}; +</script> + +<template> + <awards-list + v-if="awards.length" + :awards="awards" + :can-award-emoji="hasAwardEmojiPermission" + :current-user-id="currentUserId" + :boundary="awardsListBoundary" + class="gl-px-2" + @award="handleAward($event)" + /> +</template> |