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 {