64

Author: kossiecoder

public/index.html

@@ -13,6 +13,7 @@
       <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

@@ -0,0 +1,52 @@
+<template>
+  <div class="modal-wrapper">
+    <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>
+            </button>
+        </div>
+        <div class="modal-body">
+            ...
+        </div>
+        <div class="modal-footer">
+            <button 
+                type="button" 
+                class="btn btn-secondary" 
+                @click="onClose"
+            >
+                Close
+            </button>
+            <button type="button" class="btn btn-primary">Save changes</button>
+        </div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    setup(props, { emit }) {
+        const onClose = () => {
+            emit('close');
+        }
+        return {
+            onClose
+        }
+    }
+}
+</script>
+
+<style scoped>
+    .modal-wrapper {
+        position: fixed;
+        z-index: 100;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+    }
+</style>

src/components/TodoList.vue

@@ -24,19 +24,28 @@
         <div>
           <button 
             class="btn btn-danger btn-sm"
-            @click.stop="deleteTodo(index)"
+            @click.stop="openModal(todo.id)"
           >
             Delete
           </button>
         </div>
       </div>
     </div>
+    <Modal 
+      v-if="showModal"
+      @close="closeModal"
+    />
 </template>
 
 <script>
 import { useRouter } from 'vue-router';
+import Modal from '@/components/Modal.vue';
+import { ref } from 'vue';
 
 export default {
+    components: {
+      Modal
+    },
     props: {
         todos: {
             type: Array,
@@ -46,9 +55,21 @@ export default {
     emits: ['toggle-todo', 'delete-todo'],
     setup(props, { emit }) {
         const router = useRouter();
+        const showModal = ref(false);
+        const todoDeleteId = ref(null);
         const toggleTodo = (index, event) => {
           emit('toggle-todo', index, event.target.checked);
         };
+
+        const openModal = (id) => {
+          todoDeleteId.value = id;
+          showModal.value = true;
+        };
+
+        const closeModal = () => {
+          todoDeleteId.value = null;
+          showModal.value = false;
+        };
         
         const deleteTodo = (index) => {
           emit('delete-todo', index);
@@ -69,6 +90,9 @@ export default {
             toggleTodo,
             deleteTodo,
             moveToPage,
+            showModal,
+            openModal,
+            closeModal,
         };
     }
 }