65

Author: kossiecoder

db.json

@@ -70,36 +70,6 @@
       "completed": false,
       "body": "go to supermarket and buy milk",
       "id": 22
-    },
-    {
-      "subject": "buy milk",
-      "completed": false,
-      "body": "buy milk at supermarket",
-      "id": 23
-    },
-    {
-      "subject": "asdfasdf",
-      "completed": false,
-      "body": "asdfasdf",
-      "id": 24
-    },
-    {
-      "subject": "asdf",
-      "completed": false,
-      "body": "asdf",
-      "id": 25
-    },
-    {
-      "subject": "123123",
-      "completed": false,
-      "body": "dfghdfgh",
-      "id": 26
-    },
-    {
-      "subject": "ab",
-      "completed": false,
-      "body": "ffffffdfdfasfff",
-      "id": 28
     }
   ]
 }

public/index.html

@@ -13,7 +13,6 @@
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <div id="modal"></div>
     <!-- built files will be auto injected -->
   </body>
 </html>

src/components/Modal.vue

@@ -3,13 +3,15 @@
     <div class="modal-dialog">
         <div class="modal-content">
         <div class="modal-header">
-            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <span @click="onClose">&times;</span>
+            <h5 class="modal-title">
+                Delete Todo
+            </h5>
+            <button type="button" class="close">
+                <span @click="onClose">&times;</span>
             </button>
         </div>
         <div class="modal-body">
-            ...
+            Are you sure you want to delete the todo?
         </div>
         <div class="modal-footer">
             <button 
@@ -19,7 +21,11 @@
             >
                 Close
             </button>
-            <button type="button" class="btn btn-primary">Save changes</button>
+            <button 
+                type="button" 
+                class="btn btn-danger"
+                @click="onDelete"
+            >Delete</button>
         </div>
         </div>
     </div>
@@ -32,8 +38,14 @@ export default {
         const onClose = () => {
             emit('close');
         }
+
+        const onDelete = () => {
+            emit('delete');
+        }
+        
         return {
-            onClose
+            onClose,
+            onDelete
         }
     }
 }

src/components/TodoList.vue

@@ -34,6 +34,7 @@
     <Modal 
       v-if="showModal"
       @close="closeModal"
+      @delete="deleteTodo"
     />
 </template>
 
@@ -71,8 +72,11 @@ export default {
           showModal.value = false;
         };
         
-        const deleteTodo = (index) => {
-          emit('delete-todo', index);
+        const deleteTodo = () => {
+          emit('delete-todo', todoDeleteId.value);
+
+          showModal.value = false;
+          todoDeleteId.value = null;
         };
 
         const moveToPage = (todoId) => {

src/pages/todos/index.vue

@@ -122,9 +122,9 @@ export default {
       }
     };
 
-    const deleteTodo = async (index) => {
+    const deleteTodo = async (id) => {
       error.value = '';
-      const id = todos.value[index].id;
+    
       try {
         await axios.delete('http://localhost:3000/todos/' + id);