2 files changed, 40 insertions(+), 1 deletions(-)

M src/store.js
M src/views/Dashboard.vue

@@ 24,6 24,9 @@ function post(url, data) {
 function patch(url, data) {
   return send(url, data, 'PATCH');
 }
+function delete_(url) {
+  return send(url, undefined, 'DELETE');
+}
 
 export default {
   chores: [],


@@ 66,6 69,17 @@ export default {
         }
       });
   },
+  deleteChore: async function(choreId) {
+    return delete_(`/team/${this.team.id}/chores/${choreId}`)
+      .then(() => {
+        const choreIndex = this.chores.findIndex(c => c.id === choreId);
+        if (choreIndex !== -1) {
+          const cloned = this.chores.slice();
+          cloned.splice(choreIndex, 1);
+          this.chores = cloned;
+        }
+      });
+  },
   postChoresData: async function(newChore) {
     return post(`/team/${this.team.id}/chores`,
       {chores: [newChore]})

@@ 43,7 43,7 @@
           <NcActions>
             <NcActionButton icon="icon-checkmark" @click="openConfirmModal(chore.id)" :closeAfterClick="true">Mark as done</NcActionButton>
             <NcActionRouter icon="icon-details" :to="getLink(chore.id)" :closeAfterClick="true">Details</NcActionRouter>
-            <NcActionButton icon="icon-delete" :closeAfterClick="true">Delete chore</NcActionButton>
+            <NcActionButton icon="icon-delete" @click="openConfirmDeleteModal(chore.id)" :closeAfterClick="true">Delete chore</NcActionButton>
           </NcActions>
         </td>
         <td class="cell-assignee">


@@ 80,6 80,20 @@
       </div>
     </div>
   </NcModal>
+  <NcModal v-if="modalConfirmDelete" @close="closeConfirmDeleteModal">
+    <div class="modal__content">
+      <div class="modal-title">
+        Confirm deletion
+      </div>
+      <div class="modal-body">
+        Delete chore: {{ modalConfirmDelete.name }}
+      </div>
+      <div class="modal-buttons">
+        <button class="" @click="closeConfirmDeleteModal">Cancel</button>
+        <button class="error primary" @click="deleteChore(modalConfirmDelete.id)">Delete chore</button>
+      </div>
+    </div>
+  </NcModal>
 </div>
 </template>
 


@@ 108,6 122,7 @@ export default {
     return {
       store: this.$root.$data.globalStore,
       now: new Date(),
+      modalConfirmDelete: undefined,
       modalConfirmTaskDone: undefined,
     }
   },


@@ 176,6 191,16 @@ export default {
     closeConfirmModal() {
       this.modalConfirmTaskDone = undefined;
     },
+    openConfirmDeleteModal(choreId) {
+      this.modalConfirmDelete = this.chores.find((c) => (c.id === choreId));
+    },
+    closeConfirmDeleteModal() {
+      this.modalConfirmDelete = undefined;
+    },
+    deleteChore(choreId) {
+      this.store.deleteChore(choreId);
+      this.closeConfirmDeleteModal();
+    },
     postWorkDone(choreId) {
       this.store.submitWork(choreId);
       this.closeConfirmModal();