Commit d110f38d authored by Fatih Acet's avatar Fatih Acet

IssueNotesRefactor: Implement note edit widget.

parent 82f97307
...@@ -11,6 +11,11 @@ export default { ...@@ -11,6 +11,11 @@ export default {
required: true, required: true,
}, },
}, },
data() {
return {
isEditing: false,
}
},
components: { components: {
UserAvatarLink, UserAvatarLink,
IssueNoteHeader, IssueNoteHeader,
...@@ -22,11 +27,24 @@ export default { ...@@ -22,11 +27,24 @@ export default {
return this.note.author; return this.note.author;
}, },
}, },
methods: {
editHandler() {
this.isEditing = true;
},
formUpdateHandler(data) {
console.log('update requested', data);
},
formCancelHandler() {
this.isEditing = false;
},
},
}; };
</script> </script>
<template> <template>
<li class="note timeline-entry"> <li
class="note timeline-entry"
:class="{ 'is-editing': isEditing }">
<div class="timeline-entry-inner"> <div class="timeline-entry-inner">
<div class="timeline-icon"> <div class="timeline-icon">
<user-avatar-link <user-avatar-link
...@@ -47,9 +65,14 @@ export default { ...@@ -47,9 +65,14 @@ export default {
:canAward="note.emoji_awardable" :canAward="note.emoji_awardable"
:canEdit="note.can_edit" :canEdit="note.can_edit"
:canDelete="note.can_edit" :canDelete="note.can_edit"
:reportAbusePath="note.report_abuse_path" /> :reportAbusePath="note.report_abuse_path"
:editHandler="editHandler" />
</div> </div>
<issue-note-body :note="note" /> <issue-note-body
:note="note"
:isEditing="isEditing"
:formUpdateHandler="formUpdateHandler"
:formCancelHandler="formCancelHandler" />
</div> </div>
</div> </div>
</li> </li>
......
...@@ -21,6 +21,10 @@ export default { ...@@ -21,6 +21,10 @@ export default {
type: Boolean, type: Boolean,
required: true, required: true,
}, },
editHandler: {
type: Function,
required: true,
},
}, },
data() { data() {
return { return {
...@@ -70,8 +74,9 @@ export default { ...@@ -70,8 +74,9 @@ export default {
<template v-if="canEdit"> <template v-if="canEdit">
<li> <li>
<button <button
@click="editHandler"
type="button" type="button"
class="js-note-edit btn btn-transparent"> class="btn btn-transparent">
Edit comment Edit comment
</button> </button>
</li> </li>
......
<script> <script>
import IssueNoteEditedText from './issue_note_edited_text.vue'; import IssueNoteEditedText from './issue_note_edited_text.vue';
import IssueNoteAwardsList from './issue_note_awards_list.vue'; import IssueNoteAwardsList from './issue_note_awards_list.vue';
import IssueNoteForm from './issue_note_form.vue';
export default { export default {
props: { props: {
...@@ -8,19 +9,48 @@ export default { ...@@ -8,19 +9,48 @@ export default {
type: Object, type: Object,
required: true, required: true,
}, },
isEditing: {
type: Boolean,
required: false,
default: false,
},
formUpdateHandler: {
type: Function,
required: true,
},
formCancelHandler: {
type: Function,
required: true,
}
}, },
components: { components: {
IssueNoteEditedText, IssueNoteEditedText,
IssueNoteAwardsList, IssueNoteAwardsList,
IssueNoteForm,
},
methods: {
renderGFM() {
$(this.$refs['note-body']).renderGFM();
},
},
mounted() {
this.renderGFM();
}, },
}; };
</script> </script>
<template> <template>
<div class="note-body"> <div
ref="note-body"
class="note-body">
<div <div
v-html="note.note_html" v-html="note.note_html"
class="note-text md"></div> class="note-text md"></div>
<issue-note-form
v-if="isEditing"
:updateHandler="formUpdateHandler"
:cancelHandler="formCancelHandler"
:noteBody="note.note" />
<issue-note-edited-text <issue-note-edited-text
v-if="note.last_edited_by" v-if="note.last_edited_by"
:editedAt="note.last_edited_at" :editedAt="note.last_edited_at"
......
<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(/&quot;/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 { ...@@ -33,7 +33,7 @@ export default {
TimeAgoTooltip, TimeAgoTooltip,
}, },
methods: { methods: {
doShit() { toggle() {
this.$store.commit('toggleDiscussion', { this.$store.commit('toggleDiscussion', {
discussionId: this.discussionId, discussionId: this.discussionId,
}); });
...@@ -66,7 +66,7 @@ export default { ...@@ -66,7 +66,7 @@ export default {
v-if="includeToggle" v-if="includeToggle"
class="discussion-actions"> class="discussion-actions">
<button <button
@click="doShit" @click="toggle"
class="note-action-button discussion-toggle-button js-toggle-button" class="note-action-button discussion-toggle-button js-toggle-button"
type="button"> type="button">
<i <i
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment