debian-mirror-gitlab/app/assets/javascripts/notes/components/noteable_discussion.vue

326 lines
9.9 KiB
Vue
Raw Normal View History

2018-03-17 18:26:18 +05:30
<script>
2018-05-09 12:01:36 +05:30
import { mapActions, mapGetters } from 'vuex';
2019-02-15 15:39:39 +05:30
import { GlTooltipDirective } from '@gitlab/ui';
2019-12-26 22:10:19 +05:30
import { s__, __ } from '~/locale';
2019-07-07 11:18:12 +05:30
import { clearDraft, getDiscussionReplyKey } from '~/lib/utils/autosave';
2018-12-13 13:39:08 +05:30
import icon from '~/vue_shared/components/icon.vue';
2019-07-07 11:18:12 +05:30
import diffLineNoteFormMixin from 'ee_else_ce/notes/mixins/diff_line_note_form';
2019-02-15 15:39:39 +05:30
import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
2018-05-09 12:01:36 +05:30
import Flash from '../../flash';
import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
2019-12-26 22:10:19 +05:30
import diffDiscussionHeader from './diff_discussion_header.vue';
2018-05-09 12:01:36 +05:30
import noteSignedOutWidget from './note_signed_out_widget.vue';
import noteForm from './note_form.vue';
import diffWithNote from './diff_with_note.vue';
import noteable from '../mixins/noteable';
import resolvable from '../mixins/resolvable';
2018-11-18 11:00:15 +05:30
import discussionNavigation from '../mixins/discussion_navigation';
2019-07-07 11:18:12 +05:30
import eventHub from '../event_hub';
2019-07-31 22:56:46 +05:30
import DiscussionNotes from './discussion_notes.vue';
import DiscussionActions from './discussion_actions.vue';
2018-03-17 18:26:18 +05:30
2018-05-09 12:01:36 +05:30
export default {
2018-11-08 19:23:39 +05:30
name: 'NoteableDiscussion',
2018-05-09 12:01:36 +05:30
components: {
2018-12-13 13:39:08 +05:30
icon,
2018-05-09 12:01:36 +05:30
userAvatarLink,
2019-12-26 22:10:19 +05:30
diffDiscussionHeader,
2018-05-09 12:01:36 +05:30
noteSignedOutWidget,
noteForm,
2019-07-07 11:18:12 +05:30
DraftNote: () => import('ee_component/batch_comments/components/draft_note.vue'),
2019-02-15 15:39:39 +05:30
TimelineEntryItem,
2019-07-31 22:56:46 +05:30
DiscussionNotes,
DiscussionActions,
2018-05-09 12:01:36 +05:30
},
directives: {
2019-02-15 15:39:39 +05:30
GlTooltip: GlTooltipDirective,
2018-05-09 12:01:36 +05:30
},
2019-07-07 11:18:12 +05:30
mixins: [noteable, resolvable, discussionNavigation, diffLineNoteFormMixin],
2018-05-09 12:01:36 +05:30
props: {
2018-11-08 19:23:39 +05:30
discussion: {
2018-05-09 12:01:36 +05:30
type: Object,
required: true,
},
2019-02-15 15:39:39 +05:30
line: {
type: Object,
required: false,
default: null,
},
2018-11-08 19:23:39 +05:30
renderDiffFile: {
type: Boolean,
required: false,
default: true,
},
alwaysExpanded: {
type: Boolean,
required: false,
default: false,
},
2018-11-18 11:00:15 +05:30
discussionsByDiffOrder: {
type: Boolean,
required: false,
default: false,
},
2019-02-15 15:39:39 +05:30
helpPagePath: {
type: String,
required: false,
default: '',
},
2018-05-09 12:01:36 +05:30
},
data() {
return {
isReplying: false,
isResolving: false,
resolveAsThread: true,
};
},
computed: {
...mapGetters([
2019-07-07 11:18:12 +05:30
'convertedDisscussionIds',
2018-05-09 12:01:36 +05:30
'getNoteableData',
2019-07-31 22:56:46 +05:30
'userCanReply',
2018-11-18 11:00:15 +05:30
'nextUnresolvedDiscussionId',
2019-02-15 15:39:39 +05:30
'unresolvedDiscussionsCount',
'hasUnresolvedDiscussions',
'showJumpToNextDiscussion',
2019-09-04 21:01:54 +05:30
'getUserData',
2018-05-09 12:01:36 +05:30
]),
2019-09-04 21:01:54 +05:30
currentUser() {
return this.getUserData;
},
2019-07-07 11:18:12 +05:30
autosaveKey() {
return getDiscussionReplyKey(this.firstNote.noteable_type, this.discussion.id);
2018-05-09 12:01:36 +05:30
},
newNotePath() {
return this.getNoteableData.create_note_path;
},
2019-07-07 11:18:12 +05:30
firstNote() {
2018-12-13 13:39:08 +05:30
return this.discussion.notes.slice(0, 1)[0];
},
2019-02-15 15:39:39 +05:30
shouldShowJumpToNextDiscussion() {
2019-09-30 21:07:59 +05:30
return this.showJumpToNextDiscussion(this.discussionsByDiffOrder ? 'diff' : 'discussion');
2018-11-18 11:00:15 +05:30
},
2018-11-08 19:23:39 +05:30
shouldRenderDiffs() {
2019-02-15 15:39:39 +05:30
return this.discussion.diff_discussion && this.renderDiffFile;
2018-05-09 12:01:36 +05:30
},
2018-12-13 13:39:08 +05:30
shouldGroupReplies() {
2019-09-30 21:07:59 +05:30
return !this.shouldRenderDiffs;
2018-12-13 13:39:08 +05:30
},
2018-05-09 12:01:36 +05:30
wrapperComponent() {
2018-11-08 19:23:39 +05:30
return this.shouldRenderDiffs ? diffWithNote : 'div';
},
wrapperComponentProps() {
if (this.shouldRenderDiffs) {
2019-02-15 15:39:39 +05:30
return { discussion: this.discussion };
2018-11-08 19:23:39 +05:30
}
return {};
2018-05-09 12:01:36 +05:30
},
2019-07-07 11:18:12 +05:30
isExpanded() {
return this.discussion.expanded || this.alwaysExpanded;
},
shouldHideDiscussionBody() {
return this.shouldRenderDiffs && !this.isExpanded;
2018-12-13 13:39:08 +05:30
},
2019-02-15 15:39:39 +05:30
diffLine() {
2019-03-02 22:35:43 +05:30
if (this.line) {
return this.line;
}
2019-02-15 15:39:39 +05:30
if (this.discussion.diff_discussion && this.discussion.truncated_diff_lines) {
return this.discussion.truncated_diff_lines.slice(-1)[0];
}
2019-03-02 22:35:43 +05:30
return null;
},
2019-07-07 11:18:12 +05:30
resolveWithIssuePath() {
2019-07-31 22:56:46 +05:30
return !this.discussionResolved ? this.discussion.resolve_with_issue_path : '';
2019-05-30 16:15:17 +05:30
},
2019-05-18 00:54:41 +05:30
},
2019-07-07 11:18:12 +05:30
created() {
eventHub.$on('startReplying', this.onStartReplying);
},
beforeDestroy() {
eventHub.$off('startReplying', this.onStartReplying);
},
2018-05-09 12:01:36 +05:30
methods: {
...mapActions([
'saveNote',
'removePlaceholderNotes',
'toggleResolveNote',
2018-11-08 19:23:39 +05:30
'expandDiscussion',
2019-07-07 11:18:12 +05:30
'removeConvertedDiscussion',
2018-05-09 12:01:36 +05:30
]),
showReplyForm() {
this.isReplying = true;
},
2018-11-18 11:00:15 +05:30
cancelReplyForm(shouldConfirm, isDirty) {
if (shouldConfirm && isDirty) {
const msg = s__('Notes|Are you sure you want to cancel creating this comment?');
2018-05-09 12:01:36 +05:30
// eslint-disable-next-line no-alert
2018-11-18 11:00:15 +05:30
if (!window.confirm(msg)) {
2018-05-09 12:01:36 +05:30
return;
2018-03-17 18:26:18 +05:30
}
2018-05-09 12:01:36 +05:30
}
2018-03-17 18:26:18 +05:30
2019-07-07 11:18:12 +05:30
if (this.convertedDisscussionIds.includes(this.discussion.id)) {
this.removeConvertedDiscussion(this.discussion.id);
}
2018-05-09 12:01:36 +05:30
this.isReplying = false;
2019-07-07 11:18:12 +05:30
clearDraft(this.autosaveKey);
2018-05-09 12:01:36 +05:30
},
saveReply(noteText, form, callback) {
2019-09-30 21:07:59 +05:30
if (!noteText) {
this.cancelReplyForm();
callback();
return;
}
2018-11-08 19:23:39 +05:30
const postData = {
in_reply_to_discussion_id: this.discussion.reply_id,
target_type: this.getNoteableData.targetType,
note: { note: noteText },
};
2019-07-07 11:18:12 +05:30
if (this.convertedDisscussionIds.includes(this.discussion.id)) {
postData.return_discussion = true;
}
2018-11-08 19:23:39 +05:30
if (this.discussion.for_commit) {
postData.note_project_id = this.discussion.project_id;
}
2018-05-09 12:01:36 +05:30
const replyData = {
endpoint: this.newNotePath,
flashContainer: this.$el,
2018-11-08 19:23:39 +05:30
data: postData,
2018-05-09 12:01:36 +05:30
};
2018-03-17 18:26:18 +05:30
2018-11-08 19:23:39 +05:30
this.isReplying = false;
2018-05-09 12:01:36 +05:30
this.saveNote(replyData)
.then(() => {
2019-07-07 11:18:12 +05:30
clearDraft(this.autosaveKey);
2018-05-09 12:01:36 +05:30
callback();
})
.catch(err => {
this.removePlaceholderNotes();
this.isReplying = true;
this.$nextTick(() => {
2019-09-30 21:07:59 +05:30
const msg = __(
'Your comment could not be submitted! Please check your network connection and try again.',
);
2018-05-09 12:01:36 +05:30
Flash(msg, 'alert', this.$el);
this.$refs.noteForm.note = noteText;
callback(err);
2018-03-17 18:26:18 +05:30
});
2018-05-09 12:01:36 +05:30
});
},
2018-11-08 19:23:39 +05:30
jumpToNextDiscussion() {
2018-11-20 20:47:30 +05:30
const nextId = this.nextUnresolvedDiscussionId(
this.discussion.id,
this.discussionsByDiffOrder,
);
2018-03-27 19:54:05 +05:30
2018-11-18 11:00:15 +05:30
this.jumpToDiscussion(nextId);
2018-03-17 18:26:18 +05:30
},
2018-11-20 20:47:30 +05:30
deleteNoteHandler(note) {
this.$emit('noteDeleted', this.discussion, note);
},
2019-07-07 11:18:12 +05:30
onStartReplying(discussionId) {
if (this.discussion.id === discussionId) {
this.showReplyForm();
}
},
2018-05-09 12:01:36 +05:30
},
};
2018-03-17 18:26:18 +05:30
</script>
<template>
2019-09-30 21:07:59 +05:30
<timeline-entry-item class="note note-discussion">
2019-02-15 15:39:39 +05:30
<div class="timeline-content">
2019-12-21 20:55:43 +05:30
<div
:data-discussion-id="discussion.id"
class="discussion js-discussion-container"
data-qa-selector="discussion_content"
>
2019-12-26 22:10:19 +05:30
<diff-discussion-header v-if="shouldRenderDiffs" :discussion="discussion" />
2019-07-07 11:18:12 +05:30
<div v-if="!shouldHideDiscussionBody" class="discussion-body">
2019-02-15 15:39:39 +05:30
<component
:is="wrapperComponent"
v-bind="wrapperComponentProps"
class="card discussion-wrapper"
>
2019-07-31 22:56:46 +05:30
<discussion-notes
:discussion="discussion"
:diff-line="diffLine"
:help-page-path="helpPagePath"
:is-expanded="isExpanded"
:line="line"
:should-group-replies="shouldGroupReplies"
@startReplying="showReplyForm"
@deleteNote="deleteNoteHandler"
>
<slot slot="avatar-badge" name="avatar-badge"></slot>
<template #footer="{ showReplies }">
<draft-note
v-if="showDraft(discussion.reply_id)"
:key="`draft_${discussion.id}`"
:draft="draftForDiscussion(discussion.reply_id)"
/>
<div
v-else-if="showReplies"
:class="{ 'is-replying': isReplying }"
2019-09-30 21:07:59 +05:30
class="discussion-reply-holder clearfix"
2019-07-31 22:56:46 +05:30
>
2019-09-04 21:01:54 +05:30
<user-avatar-link
2019-09-30 21:07:59 +05:30
v-if="!isReplying && userCanReply"
2019-09-04 21:01:54 +05:30
:link-href="currentUser.path"
:img-src="currentUser.avatar_url"
:img-alt="currentUser.name"
:img-size="40"
class="d-none d-sm-block"
/>
2019-07-31 22:56:46 +05:30
<discussion-actions
v-if="!isReplying && userCanReply"
:discussion="discussion"
:is-resolving="isResolving"
:resolve-button-title="resolveButtonTitle"
:resolve-with-issue-path="resolveWithIssuePath"
:should-show-jump-to-next-discussion="shouldShowJumpToNextDiscussion"
@showReplyForm="showReplyForm"
@resolve="resolveHandler"
@jumpToNextDiscussion="jumpToNextDiscussion"
2019-02-15 15:39:39 +05:30
/>
2019-09-04 21:01:54 +05:30
<div v-if="isReplying" class="avatar-note-form-holder">
<user-avatar-link
v-if="currentUser"
:link-href="currentUser.path"
:img-src="currentUser.avatar_url"
:img-alt="currentUser.name"
:img-size="40"
class="d-none d-sm-block"
/>
<note-form
ref="noteForm"
:discussion="discussion"
:is-editing="false"
:line="diffLine"
save-button-title="Comment"
:autosave-key="autosaveKey"
@handleFormUpdateAddToReview="addReplyToReview"
@handleFormUpdate="saveReply"
@cancelForm="cancelReplyForm"
/>
</div>
2019-07-31 22:56:46 +05:30
<note-signed-out-widget v-if="!userCanReply" />
</div>
</template>
</discussion-notes>
2019-02-15 15:39:39 +05:30
</component>
2018-03-17 18:26:18 +05:30
</div>
</div>
</div>
2019-02-15 15:39:39 +05:30
</timeline-entry-item>
2018-03-17 18:26:18 +05:30
</template>