Merge pull request #9 from Saba-Var/feat/note_delete_modal

feat: note delete modal

src/components/Notes/ModalDeleteNote.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="modal p-2"
+    :class="{
+      'is-active': modelValue
+    }"
+  >
+    <div class="modal-background"></div>
+    <div class="modal-card" ref="deleteModalRef">
+      <header class="modal-card-head">
+        <p class="modal-card-title">Delete Note</p>
+        <button class="delete" aria-label="close" @click="closeModalHandler"></button>
+      </header>
+      <section class="modal-card-body">Do you really want to delete this note?</section>
+      <footer class="modal-card-foot field is-grouped is-grouped-right">
+        <button class="button is-danger" @click="$emit('deleteNote')">Delete</button>
+        <button @click="closeModalHandler" class="button">Cancel</button>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onClickOutside, onKeyStroke } from '@vueuse/core'
+import { defineEmits, defineProps, ref } from 'vue'
+
+defineProps({
+  modelValue: {
+    default: false,
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['deleteNote', 'update:modelValue'])
+
+const deleteModalRef = ref(null)
+
+const closeModalHandler = () => {
+  emit('update:modelValue', false)
+}
+
+onClickOutside(deleteModalRef, closeModalHandler)
+
+onKeyStroke('Escape', closeModalHandler)
+</script>

src/components/Notes/NoteCard.vue

@@ -1,57 +1,64 @@
 <template>
-  <div
-    class="card mb-4 scale-in-center"
-    :class="{
-      'scale-out-center': isDeleting
-    }"
-  >
-    <div class="card-content">
-      <div class="content">
-        <p class="note-content">
-          {{ note.content }}
-        </p>
-      </div>
-      <div class="has-text-right has-text-grey-light mt-2">
-        <small> {{ noteContentLengthText }}</small>
-      </div>
-
-      <div class="has-text-right has-text-grey-light">
-        <small>
-          Created at:
-          <time :datetime="note.createdAt"> {{ note.createdAt }} </time>
-        </small>
+  <div>
+    <div
+      class="card mb-4 scale-in-center"
+      :class="{
+        'scale-out-center': isDeleting
+      }"
+    >
+      <div class="card-content">
+        <div class="content">
+          <p class="note-content">
+            {{ note.content }}
+          </p>
+        </div>
+        <div class="has-text-right has-text-grey-light mt-2">
+          <small> {{ noteContentLengthText }}</small>
+        </div>
+
+        <div class="has-text-right has-text-grey-light">
+          <small>
+            Created at:
+            <time :datetime="note.createdAt"> {{ note.createdAt }} </time>
+          </small>
+        </div>
+
+        <div v-if="note.updatedAt" class="has-text-right has-text-grey-light">
+          <small>
+            Updated at:
+            <time :datetime="note.updatedAt"> {{ note.updatedAt }} </time>
+          </small>
+        </div>
       </div>
 
-      <div v-if="note.updatedAt" class="has-text-right has-text-grey-light">
-        <small>
-          Updated at:
-          <time :datetime="note.updatedAt"> {{ note.updatedAt }} </time>
-        </small>
-      </div>
+      <footer class="card-footer">
+        <button
+          class="card-footer-item action-button button is-clickable has-text-link"
+          @click="enableEditingNote"
+          :disabled="isDeleting"
+        >
+          Edit
+        </button>
+
+        <button
+          class="card-footer-item action-button button is-clickable has-text-danger"
+          @click="modals.showDeleteModal = true"
+          :disabled="isDeleting"
+        >
+          Delete
+        </button>
+      </footer>
     </div>
 
-    <footer class="card-footer">
-      <button
-        class="card-footer-item action-button button is-clickable has-text-link"
-        @click="enableEditingNote"
-        :disabled="isDeleting"
-      >
-        Edit
-      </button>
-
-      <button
-        class="card-footer-item action-button button is-clickable has-text-danger"
-        :disabled="isDeleting"
-        @click="deleteNote"
-      >
-        Delete
-      </button>
-    </footer>
+    <Teleport to="body">
+      <ModalDeleteNote v-model="modals.showDeleteModal" @deleteNote="deleteNote" />
+    </Teleport>
   </div>
 </template>
 
 <script setup>
-import { defineProps, computed, ref, defineEmits } from 'vue'
+import { defineProps, computed, ref, defineEmits, reactive } from 'vue'
+import { ModalDeleteNote } from '@/components'
 import { useNotesStore } from '@/stores/notes'
 import { useToast } from 'vue-toastification'
 import { useRouter } from 'vue-router'
@@ -88,8 +95,12 @@ const storeNotes = useNotesStore()
 const { deleteNoteHandler } = storeNotes
 
 const isDeleting = ref(false)
+const modals = reactive({
+  showDeleteModal: false
+})
 
 const deleteNote = () => {
+  modals.showDeleteModal = false
   isDeleting.value = true
 
   const timeout = setTimeout(() => {

src/components/Notes/index.js

@@ -1,2 +1,3 @@
+export { default as ModalDeleteNote } from './ModalDeleteNote.vue'
 export { default as AddEditNote } from './AddEditNote.vue'
 export { default as NoteCard } from './NoteCard.vue'