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

142 lines
3.5 KiB
Vue
Raw Normal View History

2018-03-17 18:26:18 +05:30
<script>
2019-02-15 15:39:39 +05:30
import { mapActions } from 'vuex';
2018-05-09 12:01:36 +05:30
import $ from 'jquery';
import noteEditedText from './note_edited_text.vue';
import noteAwardsList from './note_awards_list.vue';
import noteAttachment from './note_attachment.vue';
import noteForm from './note_form.vue';
import autosave from '../mixins/autosave';
2019-02-15 15:39:39 +05:30
import Suggestions from '~/vue_shared/components/markdown/suggestions.vue';
2018-03-17 18:26:18 +05:30
2018-05-09 12:01:36 +05:30
export default {
components: {
noteEditedText,
noteAwardsList,
noteAttachment,
noteForm,
2019-02-15 15:39:39 +05:30
Suggestions,
2018-05-09 12:01:36 +05:30
},
mixins: [autosave],
props: {
note: {
type: Object,
required: true,
2018-03-17 18:26:18 +05:30
},
2019-02-15 15:39:39 +05:30
line: {
type: Object,
required: false,
default: null,
},
2018-05-09 12:01:36 +05:30
canEdit: {
type: Boolean,
required: true,
2018-03-17 18:26:18 +05:30
},
2018-05-09 12:01:36 +05:30
isEditing: {
type: Boolean,
required: false,
default: false,
2018-03-17 18:26:18 +05:30
},
2019-02-15 15:39:39 +05:30
helpPagePath: {
type: String,
required: false,
default: '',
},
2018-05-09 12:01:36 +05:30
},
computed: {
noteBody() {
return this.note.note;
},
2019-02-15 15:39:39 +05:30
hasSuggestion() {
return this.note.suggestions && this.note.suggestions.length;
},
lineType() {
return this.line ? this.line.type : null;
},
2018-05-09 12:01:36 +05:30
},
mounted() {
this.renderGFM();
if (this.isEditing) {
2018-11-08 19:23:39 +05:30
this.initAutoSave(this.note);
2018-05-09 12:01:36 +05:30
}
},
updated() {
this.renderGFM();
2018-03-17 18:26:18 +05:30
2018-05-09 12:01:36 +05:30
if (this.isEditing) {
if (!this.autosave) {
2018-11-08 19:23:39 +05:30
this.initAutoSave(this.note);
2018-05-09 12:01:36 +05:30
} else {
this.setAutoSave();
2018-03-17 18:26:18 +05:30
}
2018-05-09 12:01:36 +05:30
}
},
methods: {
2019-02-15 15:39:39 +05:30
...mapActions(['submitSuggestion']),
2018-05-09 12:01:36 +05:30
renderGFM() {
$(this.$refs['note-body']).renderGFM();
2018-03-17 18:26:18 +05:30
},
2018-05-09 12:01:36 +05:30
handleFormUpdate(note, parentElement, callback) {
this.$emit('handleFormUpdate', note, parentElement, callback);
},
formCancelHandler(shouldConfirm, isDirty) {
2018-11-08 19:23:39 +05:30
this.$emit('cancelForm', shouldConfirm, isDirty);
2018-03-17 18:26:18 +05:30
},
2019-02-15 15:39:39 +05:30
applySuggestion({ suggestionId, flashContainer, callback }) {
const { discussion_id: discussionId, id: noteId } = this.note;
this.submitSuggestion({ discussionId, noteId, suggestionId, flashContainer, callback });
},
2018-05-09 12:01:36 +05:30
},
};
2018-03-17 18:26:18 +05:30
</script>
<template>
2019-02-15 15:39:39 +05:30
<div ref="note-body" :class="{ 'js-task-list-container': canEdit }" class="note-body">
<suggestions
v-if="hasSuggestion && !isEditing"
2019-03-02 22:35:43 +05:30
class="note-text md"
2019-02-15 15:39:39 +05:30
:suggestions="note.suggestions"
:note-html="note.note_html"
:line-type="lineType"
:help-page-path="helpPagePath"
@apply="applySuggestion"
/>
<div v-else class="note-text md" v-html="note.note_html"></div>
2018-03-17 18:26:18 +05:30
<note-form
v-if="isEditing"
ref="noteForm"
:is-editing="isEditing"
:note-body="noteBody"
:note-id="note.id"
2019-02-15 15:39:39 +05:30
:line="line"
:note="note"
:help-page-path="helpPagePath"
2018-11-08 19:23:39 +05:30
@handleFormUpdate="handleFormUpdate"
@cancelForm="formCancelHandler"
2018-03-17 18:26:18 +05:30
/>
<textarea
v-if="canEdit"
v-model="note.note"
:data-update-url="note.path"
2019-02-15 15:39:39 +05:30
class="hidden js-task-list-field"
></textarea>
2018-03-17 18:26:18 +05:30
<note-edited-text
v-if="note.last_edited_at"
:edited-at="note.last_edited_at"
:edited-by="note.last_edited_by"
action-text="Edited"
2018-11-08 19:23:39 +05:30
class="note_edited_ago"
2018-03-17 18:26:18 +05:30
/>
<note-awards-list
2018-12-05 23:21:45 +05:30
v-if="note.award_emoji && note.award_emoji.length"
2018-03-17 18:26:18 +05:30
:note-id="note.id"
:note-author-id="note.author.id"
:awards="note.award_emoji"
:toggle-award-path="note.toggle_award_path"
2018-05-09 12:01:36 +05:30
:can-award-emoji="note.current_user.can_award_emoji"
2018-03-17 18:26:18 +05:30
/>
2019-02-15 15:39:39 +05:30
<note-attachment v-if="note.attachment" :attachment="note.attachment" />
2018-03-17 18:26:18 +05:30
</div>
</template>