IssueNotesRefactor: Implement note edit widget.
This commit is contained in:
parent
82f9730707
commit
d110f38d90
|
@ -11,6 +11,11 @@ export default {
|
|||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isEditing: false,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
UserAvatarLink,
|
||||
IssueNoteHeader,
|
||||
|
@ -22,11 +27,24 @@ export default {
|
|||
return this.note.author;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
editHandler() {
|
||||
this.isEditing = true;
|
||||
},
|
||||
formUpdateHandler(data) {
|
||||
console.log('update requested', data);
|
||||
},
|
||||
formCancelHandler() {
|
||||
this.isEditing = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li class="note timeline-entry">
|
||||
<li
|
||||
class="note timeline-entry"
|
||||
:class="{ 'is-editing': isEditing }">
|
||||
<div class="timeline-entry-inner">
|
||||
<div class="timeline-icon">
|
||||
<user-avatar-link
|
||||
|
@ -47,9 +65,14 @@ export default {
|
|||
:canAward="note.emoji_awardable"
|
||||
:canEdit="note.can_edit"
|
||||
:canDelete="note.can_edit"
|
||||
:reportAbusePath="note.report_abuse_path" />
|
||||
:reportAbusePath="note.report_abuse_path"
|
||||
:editHandler="editHandler" />
|
||||
</div>
|
||||
<issue-note-body :note="note" />
|
||||
<issue-note-body
|
||||
:note="note"
|
||||
:isEditing="isEditing"
|
||||
:formUpdateHandler="formUpdateHandler"
|
||||
:formCancelHandler="formCancelHandler" />
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
@ -21,6 +21,10 @@ export default {
|
|||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
editHandler: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
@ -70,8 +74,9 @@ export default {
|
|||
<template v-if="canEdit">
|
||||
<li>
|
||||
<button
|
||||
@click="editHandler"
|
||||
type="button"
|
||||
class="js-note-edit btn btn-transparent">
|
||||
class="btn btn-transparent">
|
||||
Edit comment
|
||||
</button>
|
||||
</li>
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
<script>
|
||||
import IssueNoteEditedText from './issue_note_edited_text.vue';
|
||||
import IssueNoteAwardsList from './issue_note_awards_list.vue';
|
||||
import IssueNoteForm from './issue_note_form.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
@ -8,19 +9,48 @@ export default {
|
|||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
isEditing: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
formUpdateHandler: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
formCancelHandler: {
|
||||
type: Function,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
IssueNoteEditedText,
|
||||
IssueNoteAwardsList,
|
||||
IssueNoteForm,
|
||||
},
|
||||
methods: {
|
||||
renderGFM() {
|
||||
$(this.$refs['note-body']).renderGFM();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.renderGFM();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="note-body">
|
||||
<div
|
||||
ref="note-body"
|
||||
class="note-body">
|
||||
<div
|
||||
v-html="note.note_html"
|
||||
class="note-text md"></div>
|
||||
<issue-note-form
|
||||
v-if="isEditing"
|
||||
:updateHandler="formUpdateHandler"
|
||||
:cancelHandler="formCancelHandler"
|
||||
:noteBody="note.note" />
|
||||
<issue-note-edited-text
|
||||
v-if="note.last_edited_by"
|
||||
:editedAt="note.last_edited_at"
|
||||
|
|
|
@ -0,0 +1,82 @@
|
|||
<script>
|
||||
import MarkdownField from '../../vue_shared/components/markdown/field.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
noteBody: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
updateHandler: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
cancelHandler: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
note: this.noteBody,
|
||||
markdownPreviewUrl: '',
|
||||
markdownDocsUrl: '',
|
||||
}
|
||||
},
|
||||
components: {
|
||||
MarkdownField,
|
||||
},
|
||||
methods: {
|
||||
handleUpdate() {
|
||||
this.updateHandler({
|
||||
note: this.note,
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const issuableDataEl = document.getElementById('js-issuable-app-initial-data');
|
||||
const issueData = JSON.parse(issuableDataEl.innerHTML.replace(/"/g, '"'));
|
||||
const { markdownDocs, markdownPreviewUrl } = issueData;
|
||||
|
||||
this.markdownDocsUrl = markdownDocs;
|
||||
this.markdownPreviewUrl = markdownPreviewUrl;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="note-edit-form">
|
||||
<form class="edit-note common-note-form">
|
||||
<markdown-field
|
||||
:markdown-preview-url="markdownPreviewUrl"
|
||||
:markdown-docs="markdownDocsUrl"
|
||||
:addSpacingClasses="false">
|
||||
<textarea
|
||||
id="note-body"
|
||||
class="note-textarea js-gfm-input js-autosize markdown-area"
|
||||
data-supports-slash-commands="false"
|
||||
aria-label="Description"
|
||||
v-model="note"
|
||||
ref="textarea"
|
||||
slot="textarea"
|
||||
placeholder="Write a comment or drag your files here..."
|
||||
@keydown.meta.enter="handleUpdate">
|
||||
</textarea>
|
||||
</markdown-field>
|
||||
<div class="note-form-actions clearfix">
|
||||
<button
|
||||
@click="handleUpdate"
|
||||
type="button"
|
||||
class="btn btn-nr btn-save">
|
||||
Save comment
|
||||
</button>
|
||||
<button
|
||||
@click="cancelHandler"
|
||||
class="btn btn-nr btn-cancel"
|
||||
type="button">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
|
@ -33,7 +33,7 @@ export default {
|
|||
TimeAgoTooltip,
|
||||
},
|
||||
methods: {
|
||||
doShit() {
|
||||
toggle() {
|
||||
this.$store.commit('toggleDiscussion', {
|
||||
discussionId: this.discussionId,
|
||||
});
|
||||
|
@ -66,7 +66,7 @@ export default {
|
|||
v-if="includeToggle"
|
||||
class="discussion-actions">
|
||||
<button
|
||||
@click="doShit"
|
||||
@click="toggle"
|
||||
class="note-action-button discussion-toggle-button js-toggle-button"
|
||||
type="button">
|
||||
<i
|
||||
|
|
Loading…
Reference in New Issue