From 9c2eea9186490942c3d07eefbf18abd1e3b403f2 Mon Sep 17 00:00:00 2001
From: Moustafa Shaaban <Moustafa_Shaaban@zohomail.com>
Date: Sun, 21 Apr 2024 00:24:58 +0200
Subject: [PATCH] Added update and delete tags functionality

---
 src/components/TagDetail.vue | 130 +++++++++++++++++++++++++++++++++++
 src/components/TagList.vue   |   6 ++
 src/router/index.js          |   6 ++
 src/stores/notes.js          |   5 +-
 4 files changed, 146 insertions(+), 1 deletion(-)
 create mode 100644 src/components/TagDetail.vue

diff --git a/src/components/TagDetail.vue b/src/components/TagDetail.vue
new file mode 100644
index 0000000..694a4f6
--- /dev/null
+++ b/src/components/TagDetail.vue
@@ -0,0 +1,130 @@
+<template>
+    <q-page class="flex flex-center">
+        <q-card v-if="isEditing" flat bordered class="my-card">
+            <q-card-section class="row items-center q-pb-none q-mb-md" vertical>
+                <div class="text-h6">Edit: {{ tag.name }}</div>
+            </q-card-section>
+
+            <q-card-section>
+                <q-form @submit.prevent="handleSubmit">
+                    <q-input filled v-model="tag.name" label="Tag Name" required lazy-rules
+                        :rules="[val => val && val.length > 0 || 'Tag Name is required']" />
+
+
+                    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+                        <q-btn type="submit" fab icon="done" color="primary">
+                        </q-btn>
+                    </q-page-sticky>
+                </q-form>
+            </q-card-section>
+
+            <q-page-sticky position="bottom-left" :offset="[18, 18]">
+                <q-btn @click="isEditing = false" fab icon="undo" color="negative">
+                </q-btn>
+            </q-page-sticky>
+        </q-card>
+
+
+        <q-card v-else class="my-card q-mt-md" flat bordered>
+            <q-card-section>
+                <div class="row items-center no-wrap">
+                    <div class="col">
+                        <div class="text-h6">{{ tag.name }}</div>
+                    </div>
+                </div>
+            </q-card-section>
+
+
+            <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-card-actions>
+        </q-card>
+
+        <q-page-sticky position="bottom-left" :offset="[18, 18]">
+            <q-btn :to="{ 'name': 'tags' }" fab icon="undo" color="negative">
+            </q-btn>
+        </q-page-sticky>
+    </q-page>
+</template>
+
+<script setup>
+    import { ref } from 'vue';
+    import { useRoute, useRouter } from 'vue-router';
+    import { Dialog, date, Notify } from 'quasar';
+
+    import { useNotesStore } from '../stores/notes.js';
+
+    const notesStore = useNotesStore();
+    const route = useRoute();
+    const router = useRouter();
+
+    const isEditing = ref(false);
+
+    const tag = ref({
+        id: '',
+        name: ''
+    });
+
+    tag.value = notesStore.getTagById(route.params.id);
+
+    function handleSubmit() {
+        try {
+            notesStore.updateTag(route.params.id, tag.value);
+            isEditing = false;
+            Notify.create({
+                message: 'Tag Updated 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, }
+                ]
+            })
+        }
+    };
+
+    function confirm(id) {
+        Dialog.create({
+            dark: true,
+            title: 'Confirm',
+            color: 'primary',
+            message: 'Delete this tag?, Your Notes that has this tag will not be deleted',
+            cancel: true,
+            persistent: true
+        }).onOk(() => {
+            try {
+                notesStore.deleteTag(id)
+                router.push('/tags');
+                Notify.create({
+                    message: 'Tag 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>
+
+
+<style lang="sass" scoped>
+.my-card
+  width: 100%
+  width: 350px
+</style>
diff --git a/src/components/TagList.vue b/src/components/TagList.vue
index 4635e06..d7d5220 100644
--- a/src/components/TagList.vue
+++ b/src/components/TagList.vue
@@ -13,6 +13,12 @@ const notesStore = useNotesStore();
         <q-card-section>
             <div class="text-h6">{{ tag.name }}</div>
         </q-card-section>
+        
+        <q-separator />
+        
+        <q-card-actions>
+          <q-btn color="info" flat :to="{ name: 'tag-detail', params: { id: tag.id } }">Details</q-btn>
+        </q-card-actions>
       </q-card>
     </div>
     <div v-else>
diff --git a/src/router/index.js b/src/router/index.js
index f92f0ff..5f15476 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,6 +5,7 @@ import NoteForm from "../components/NoteForm.vue";
 import NoteDetail from "../components/NoteDetail.vue";
 import TagForm from "../components/TagForm.vue";
 import TagList from "../components/TagList.vue";
+import TagDetail from "../components/TagDetail.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -34,6 +35,11 @@ const router = createRouter({
       name: 'add-tag',
       component: TagForm,
     },
+    {
+      path: '/tag-detail/:id',
+      name: 'tag-detail',
+      component: TagDetail,
+    },
     {
       path: "/about",
       name: "about",
diff --git a/src/stores/notes.js b/src/stores/notes.js
index 6e93734..069ae16 100644
--- a/src/stores/notes.js
+++ b/src/stores/notes.js
@@ -12,7 +12,10 @@ export const useNotesStore = defineStore('notes', {
   getters: {
     getNoteById: (state) => {
       return (id) => state.notes.find((note) => note.id === id)
-    }
+    },
+    getTagById: (state) => {
+      return (id) => state.tags.find((tag) => tag.id === id)
+    },
   },
   actions: {
     addNote(note) {