changes

Author: simeonaz

app/components/DeleteComponent.vue

@@ -0,0 +1,76 @@
+<script setup>
+const showPopup = ref(false);
+
+onMounted(() => {
+  setTimeout(() => {
+    showPopup.value = true;
+  }, 100);
+});
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["closeDelete", "deleteNote"]);
+const close = () => {
+  emit("closeDelete");
+};
+
+const deleteNote = () => {
+  emit("deleteNote", props.id);
+  close();
+};
+
+onBeforeMount(() => {
+  showPopup.value = false;
+});
+</script>
+
+<template>
+  <div
+    class="fixed inset-0 z-50 bg-vue-green/7 flex items-center justify-center"
+    @keydown.esc="close"
+  >
+    <div
+      class="w-[80vw] md:w-[50vw] lg:w-[40vw] bg-background rounded-xl p-6 shadow-lg transition-opacity duration-300 ease-in-out overflow-y-auto max-h-[95vh] scroll-container"
+    >
+      <div class="flex flex-col space-y-4">
+        <div class="flex items-center justify-between">
+          <h2 class="text-lg font-semibold text-background-dark">
+            Confirm Delete Note
+          </h2>
+
+          <button
+            @click="close"
+            type="button"
+            class="text-black hover:text-gray-500 transition-colors duration-75 cursor-pointer"
+          >
+            <Icon name="mdi:close" size="20" />
+          </button>
+        </div>
+        <p class="text-gray-500">
+          Are you sure you want to delete this note? This action cannot be
+          undone.
+        </p>
+        <div class="flex justify-end space-x-2">
+          <button
+            @click="close"
+            class="cursor-pointer px-4 py-2 bg-gray-300 text-gray-800 rounded hover:bg-gray-400 transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            @click="deleteNote"
+            class="cursor-pointer px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/components/NoteCard.vue

@@ -34,6 +34,10 @@ const deleteNote = () => {
   emit("delete");
 };
 
+const handleCopy = () => {
+  copyToClipboard(props.note.content || props.note.title);
+};
+
 const limitText = (text: string, limit: number) => {
   return text.length > limit ? text.slice(0, limit) + "..." : text;
 };
@@ -52,7 +56,7 @@ const limitText = (text: string, limit: number) => {
 
           <div
             class="text-background/95 text-sm font-semibold"
-            @click="editNote()"
+            @click="editNote"
           >
             {{ limitText(props.note?.title, 25) || "Untitled" }}
           </div>
@@ -61,21 +65,21 @@ const limitText = (text: string, limit: number) => {
         <!-- actions -->
         <div class="flex items-center space-x-2 text-background/75">
           <button
-            @click="copyToClipboard(props.note.content || props.note.title)"
+            @click="handleCopy"
             title="Copy to clipboard"
             class="hover:text-vue-green transition-colors cursor-pointer"
           >
             <Icon name="mdi:clipboard" size="22" />
           </button>
           <button
-            @click="editNote()"
+            @click="editNote"
             title="Edit note"
             class="hover:text-vue-green transition-colors cursor-pointer"
           >
             <Icon name="mdi:edit" size="22" />
           </button>
           <button
-            @click="deleteNote()"
+            @click="deleteNote"
             title="Delete note"
             class="hover:text-vue-green transition-colors cursor-pointer"
           >
@@ -86,7 +90,7 @@ const limitText = (text: string, limit: number) => {
 
       <p
         class="mt-2 text-gray-500 text-sm font-light leading-relaxed"
-        @click="editNote()"
+        @click="editNote"
       >
         {{ limitText(props.note?.content, 50) || "No content available." }}
       </p>

app/components/NoteList.vue

@@ -2,6 +2,7 @@
 import { type Note, useNotes } from "@/composables/useNotes";
 const { deleteNote } = useNotes();
 const selectedCategoryId = ref("");
+const noteToDeleteId = ref("");
 
 const props = defineProps({
   listOfNotes: {
@@ -20,6 +21,17 @@ const editOneNote = (note: Note) => {
   emit("edit", note);
 };
 
+const showPopup = ref(false);
+const togglePopup = (noteId: string) => {
+  noteToDeleteId.value = noteId;
+  showPopup.value = !showPopup.value;
+};
+
+const closePopup = () => {
+  showPopup.value = false;
+  noteToDeleteId.value = "";
+};
+
 const deleteOneNote = (noteId: string) => {
   deleteNote(noteId);
   refreshNotes();
@@ -55,7 +67,7 @@ onMounted(() => {
       :key="note.id"
       :note="note"
       @edit="editOneNote(note)"
-      @delete="deleteOneNote(note.id)"
+      @delete="togglePopup(note.id)"
     />
     <div
       v-if="filteredNotes.length === 0"
@@ -64,4 +76,10 @@ onMounted(() => {
       No notes available. Please add a note.
     </div>
   </div>
+  <DeleteComponent
+    v-if="showPopup"
+    @closeDelete="closePopup"
+    @deleteNote="deleteOneNote(noteToDeleteId)"
+    :id="noteToDeleteId"
+  />
 </template>

app/composables/useNotes.ts

@@ -46,6 +46,7 @@ export function useNotes() {
   }
 
   function deleteNote(noteId: string) {
+    // console.log("Deleting note with ID:", noteId);
     notes.value = notes.value.filter((note) => note.id !== noteId);
     saveNotes();
   }