67

Author: kossiecoder

db.json

@@ -64,12 +64,6 @@
       "subject": "new todo222",
       "completed": true,
       "id": 21
-    },
-    {
-      "subject": "buy milk",
-      "completed": false,
-      "body": "go to supermarket and buy milk",
-      "id": 22
     }
   ]
 }

src/components/DeleteModal.vue

@@ -0,0 +1,52 @@
+<template>
+  <Modal>
+    <template v-slot:title>
+        Delete Todo
+    </template>
+    <template v-slot:body>
+        Are you sure you want to delete this todo?
+    </template>
+    <template v-slot:footer>
+        <button 
+            type="button" 
+            class="btn btn-secondary" 
+            @click="onClose"
+        >
+            Close
+        </button>
+        <button 
+            type="button" 
+            class="btn btn-danger"
+            @click="onDelete"
+        >Delete</button>
+    </template>
+  </Modal>
+</template>
+
+<script>
+import Modal from '@/components/Modal.vue';
+
+export default {
+    components: {
+        Modal
+    },
+    setup(props, { emit }) {
+        const onClose = () => {
+            emit('close');
+        }
+
+        const onDelete = () => {
+            emit('delete');
+        }
+        
+        return {
+            onClose,
+            onDelete
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

src/components/Modal.vue

@@ -4,28 +4,17 @@
         <div class="modal-content">
         <div class="modal-header">
             <h5 class="modal-title">
-                Delete Todo
+                <slot name="title"></slot>
             </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?
+            <slot name="body"></slot>
         </div>
         <div class="modal-footer">
-            <button 
-                type="button" 
-                class="btn btn-secondary" 
-                @click="onClose"
-            >
-                Close
-            </button>
-            <button 
-                type="button" 
-                class="btn btn-danger"
-                @click="onDelete"
-            >Delete</button>
+            <slot name="footer"></slot>
         </div>
         </div>
     </div>
@@ -38,14 +27,9 @@ export default {
         const onClose = () => {
             emit('close');
         }
-
-        const onDelete = () => {
-            emit('delete');
-        }
         
         return {
             onClose,
-            onDelete
         }
     }
 }

src/components/TodoList.vue

@@ -42,7 +42,7 @@
 
 <script>
 import { useRouter } from 'vue-router';
-import Modal from '@/components/Modal.vue';
+import Modal from '@/components/DeleteModal.vue';
 import { ref } from 'vue';
 
 export default {

src/pages/todos/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="opacity: 0.5">
+  <div>
     <div class="d-flex justify-content-between mb-3">
       <h2>To-Do List</h2>
       <button