diff options
author | Fatih Acet <acetfatih@gmail.com> | 2017-06-16 01:37:06 +0300 |
---|---|---|
committer | Fatih Acet <acetfatih@gmail.com> | 2017-07-21 22:35:25 +0300 |
commit | 96ede7f73191909e68156fba3e9e2c3f9a8e723f (patch) | |
tree | 4f9889ef40a4be7afeca874ac989d1d7edca3154 | |
parent | 66f4af5c65a6721666f05ac75b07f7495f8e86d0 (diff) |
IssueNotesRefactor: Implement logic for delete action.
No backend request for now. It’s just client side logic.
6 files changed, 62 insertions, 9 deletions
diff --git a/app/assets/javascripts/notes/components/issue_discussion.vue b/app/assets/javascripts/notes/components/issue_discussion.vue index 954a6e3b7ee..1f7707a5208 100644 --- a/app/assets/javascripts/notes/components/issue_discussion.vue +++ b/app/assets/javascripts/notes/components/issue_discussion.vue @@ -48,7 +48,7 @@ export default { this.$store.commit('toggleDiscussion', { discussionId: this.note.id, }); - } + }, }, }; </script> diff --git a/app/assets/javascripts/notes/components/issue_note.vue b/app/assets/javascripts/notes/components/issue_note.vue index 191555fd979..3dc28d60ddd 100644 --- a/app/assets/javascripts/notes/components/issue_note.vue +++ b/app/assets/javascripts/notes/components/issue_note.vue @@ -14,6 +14,7 @@ export default { data() { return { isEditing: false, + isDeleting: false, }; }, components: { @@ -26,11 +27,28 @@ export default { author() { return this.note.author; }, + classNameBindings() { + return { + 'is-editing': this.isEditing, + 'disabled-content': this.isDeleting, + }; + }, }, methods: { editHandler() { this.isEditing = true; }, + deleteHandler() { + this.isDeleting = true; + this.$store + .dispatch('deleteNote', this.note) + .then(() => { + this.isDeleting = false; + }) + .catch(() => { + this.isDeleting = false; + }); + }, formUpdateHandler() { // console.log('update requested', data); }, @@ -44,7 +62,7 @@ export default { <template> <li class="note timeline-entry" - :class="{ 'is-editing': isEditing }"> + :class="classNameBindings"> <div class="timeline-entry-inner"> <div class="timeline-icon"> <user-avatar-link @@ -66,7 +84,8 @@ export default { :canEdit="note.can_edit" :canDelete="note.can_edit" :reportAbusePath="note.report_abuse_path" - :editHandler="editHandler" /> + :editHandler="editHandler" + :deleteHandler="deleteHandler" /> </div> <issue-note-body :note="note" diff --git a/app/assets/javascripts/notes/components/issue_note_actions.vue b/app/assets/javascripts/notes/components/issue_note_actions.vue index f9447062df9..1f25421dd74 100644 --- a/app/assets/javascripts/notes/components/issue_note_actions.vue +++ b/app/assets/javascripts/notes/components/issue_note_actions.vue @@ -26,6 +26,10 @@ export default { type: Function, required: true, }, + deleteHandler: { + type: Function, + required: true, + }, }, data() { return { @@ -92,7 +96,10 @@ export default { </a> </li> <li> - <a class="js-note-delete"> + <a + @click.prevent="deleteHandler" + class="js-note-delete" + href="#"> <span class="text-danger"> Delete comment </span> diff --git a/app/assets/javascripts/notes/components/issue_system_note.vue b/app/assets/javascripts/notes/components/issue_system_note.vue index f8b37344cee..a2ca4c828c1 100644 --- a/app/assets/javascripts/notes/components/issue_system_note.vue +++ b/app/assets/javascripts/notes/components/issue_system_note.vue @@ -12,12 +12,12 @@ export default { data() { return { svg: iconsMap[this.note.system_note_icon_name], - } + }; }, components: { IssueNoteHeader, }, -} +}; </script> <template> diff --git a/app/assets/javascripts/notes/services/issue_notes_service.js b/app/assets/javascripts/notes/services/issue_notes_service.js index 810dec61b5b..c36b835c383 100644 --- a/app/assets/javascripts/notes/services/issue_notes_service.js +++ b/app/assets/javascripts/notes/services/issue_notes_service.js @@ -7,4 +7,7 @@ export default { fetchNotes(endpoint) { return Vue.http.get(endpoint); }, + deleteNote(endpoint) { + return Vue.http.get(endpoint); + }, }; diff --git a/app/assets/javascripts/notes/stores/issue_notes_store.js b/app/assets/javascripts/notes/stores/issue_notes_store.js index 9fd95d892fa..eb387811443 100644 --- a/app/assets/javascripts/notes/stores/issue_notes_store.js +++ b/app/assets/javascripts/notes/stores/issue_notes_store.js @@ -3,9 +3,7 @@ import service from '../services/issue_notes_service'; -const findNoteObjectById = (notes, id) => { - return notes.filter(n => n.id === id)[0]; -}; +const findNoteObjectById = (notes, id) => notes.filter(n => n.id === id)[0]; const state = { notes: [], @@ -26,6 +24,20 @@ const mutations = { discussion.expanded = !discussion.expanded; }, + deleteNote(storeState, note) { + const noteObj = findNoteObjectById(storeState.notes, note.discussion_id); + + if (noteObj.individual_note) { + storeState.notes.splice(storeState.notes.indexOf(noteObj), 1); + } else { + const comment = findNoteObjectById(noteObj.notes, note.id); + noteObj.notes.splice(noteObj.notes.indexOf(comment), 1); + + if (!noteObj.notes.length) { + storeState.notes.splice(storeState.notes.indexOf(noteObj), 1); + } + } + }, }; const actions = { @@ -40,6 +52,18 @@ const actions = { new Flash('Something went wrong while fetching issue comments. Please try again.'); // eslint-disable-line }); }, + deleteNote(context, note) { + // FIXME: Implement request, remove fake delete timer... + return service + .deleteNote(`${document.location.href}.json`) + .then(res => res.json) + .then(() => { + context.commit('deleteNote', note); + }) + .catch(() => { + new Flash('Something went wrong while deleting your note. Please try again.'); // eslint-disable-line + }); + }, }; export default { |