Fixed Delete Note Functionality and Updated the UI

MoustafaShaaban · Jun 20, 2024 · ce79a57 · ce79a57
1 parent 05ea069
commit ce79a57
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 7 deletions.
diff --git a/src/components/NoteDetail.vue b/src/components/NoteDetail.vue
@@ -156,7 +156,7 @@ function confirm(id) {
 
             <q-card-actions>
                 <q-btn color="primary" type="button" size="sm" @click="isEditing = true">Edit</q-btn>
-                <q-btn color="negative" type="button" size="sm" @click="confirm">Delete</q-btn>
+                <q-btn color="negative" type="button" size="sm" @click="confirm(note.id)">Delete</q-btn>
             </q-card-actions>
         </q-card>
 

diff --git a/src/components/NoteForm.vue b/src/components/NoteForm.vue
@@ -64,7 +64,7 @@ function handleSubmit() {
       <q-card-section>
         <q-form @submit.prevent="handleSubmit">
           <q-input autocomplete filled v-model="noteTitle" label="Note Title" required lazy-rules
-            :rules="[val => val && val.length > 0 || 'Note Title is required']" />
+            :rules="[val => val && val.length > 0 || 'Note Title is required']"  autofocus />
 
           <q-input filled v-model="noteContent" type="textarea" required label="Note Content" lazy-rules
             :rules="[val => val && val.length > 0 || 'Note Content is required']" />

diff --git a/src/components/TagForm.vue b/src/components/TagForm.vue
@@ -53,7 +53,7 @@ function handleSubmit() {
             <q-card-section>
                 <q-form @submit.prevent="handleSubmit">
                     <q-input filled v-model="tagName" label="Tag Name" required lazy-rules
-                        :rules="[val => val && val.length > 0 || 'Tag Name is required']" />
+                        :rules="[val => val && val.length > 0 || 'Tag Name is required']"  autofocus />
 
                     <q-page-sticky position="bottom-right" :offset="[18, 18]">
                         <q-btn type="submit" fab icon="done" color="primary">

diff --git a/src/stores/notes.js b/src/stores/notes.js
@@ -42,9 +42,15 @@ export const useNotesStore = defineStore("notes", {
       console.log(noteToEdit.title);
     },
 
+    // deleteNote(id) {
+    //   const noteToDelete = this.notes.findIndex((note) => note.id === id);
+    //   this.notes.splice(noteToDelete);
+    // },
+
     deleteNote(id) {
-      const noteToDelete = this.notes.findIndex((note) => note.id === id);
-      this.notes.splice(noteToDelete);
+      this.notes = this.notes.filter((note) => {
+        return note.id !== id;
+      })
     },
 
     addTag(tag) {

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from 'vue';
-import { date } from 'quasar';
+import { date, Dialog, Notify } from 'quasar';
 import { useNotesStore } from '../stores/notes';
 
 const notesStore = useNotesStore();
@@ -13,6 +13,36 @@ const searchResult = computed(() => {
   });
 });
 
+function confirm(id) {
+    Dialog.create({
+        dark: true,
+        title: 'Confirm',
+        color: 'primary',
+        message: 'Are you sure you want to delete this note?',
+        cancel: true,
+        persistent: true
+    }).onOk(() => {
+        try {
+            notesStore.deleteNote(id)
+            Notify.create({
+                message: 'Note Deleted Successfully',
+                type: "positive",
+                actions: [
+                    { icon: 'close', color: 'white', round: true, }
+                ]
+            })
+        } catch (error) {
+            Notify.create({
+                message: error.message,
+                type: "negative",
+                actions: [
+                    { icon: 'close', color: 'white', round: true, }
+                ]
+            })
+        }
+    })
+};
+
 </script>
 
 <template>
@@ -39,8 +69,11 @@ const searchResult = computed(() => {
               <q-btn color="grey-7" round flat icon="more_vert">
                 <q-menu cover auto-close>
                   <q-list>
+                    <q-item clickable :to="{ name: 'note-detail', params: { id: note.id } }">
+                      <q-item-section>Details</q-item-section>
+                    </q-item>
                     <q-item clickable>
-                      <q-item-section color="negative">Remove Card</q-item-section>
+                      <q-item-section color="negative" @click="confirm(note.id)">Delete</q-item-section>
                     </q-item>
                   </q-list>
                 </q-menu>