Add ability to submit new notes

src/store/modules/reports.js

@@ -39,8 +39,19 @@ const reports = {
       }
     ]
   },
-  mutations: {},
-  actions: {}
+  mutations: {
+    SET_REPORT: (state, { index, report }) => {
+      state.fetchedReports[index] = report
+    }
+  },
+  actions: {
+    async AddNote({ commit, state, getters }, { reportId, note }) {
+      const report = state.fetchedReports.find(report => report.id === reportId)
+      report.notes = [...report.notes, note]
+      const reportIndex = state.fetchedReports.findIndex(report => report.id === reportId)
+      commit('SET_REPORT', { reportIndex, report })
+    }
+  }
 }
 
 export default reports

src/views/reports/components/TimelineItem.vue

@@ -22,6 +22,7 @@
             <i class="el-icon-close" @click="toggleNoteInput"/>
           </div>
           <el-input v-model="note" :rows="2" type="textarea" autofocus/>
+          <el-button class="submit-button" plain size="small" @click="addNewNote(item.id)">Submit</el-button>
         </div>
       </el-collapse>
     </el-card>
@@ -47,6 +48,12 @@ export default {
   methods: {
     toggleNoteInput() {
       this.$data.showNewNoteInput = !this.$data.showNewNoteInput
+    },
+    addNewNote(reportId) {
+      const currentUserNickname = this.$store.state.user.name
+      const note = { author: currentUserNickname, text: this.$data.note, timestamp: '2019/04/01' }
+      this.$store.dispatch('AddNote', { reportId, note })
+      this.$data.note = ''
     }
   }
 }
@@ -56,6 +63,9 @@ export default {
   .el-card__body {
     padding: 17px 17px 0;
   }
+  .el-collapse {
+    border-bottom: none;
+  }
   .el-collapse-item__header {
     height: 46px;
   }
@@ -79,7 +89,6 @@ export default {
     align-items: baseline;
   }
   .new-note {
-    margin-bottom: 17px;
     p {
       font-size: 13px;
       font-weight: 500;
@@ -94,6 +103,10 @@ export default {
   .note-text {
     margin-bottom: 14px;
   }
+  .submit-button {
+    display: block;
+    margin: 7px 0 17px auto;
+  }
   .timestamp {
     margin: 0;
     font-style: italic;