Saba-Var · Saba-Var · Sep 22, 2023 · Sep 22, 2023 · Sep 22, 2023 · Sep 22, 2023
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>Pro Noteballs</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/components/Layout/NavBar.vue b/src/components/Layout/NavBar.vue
@@ -2,7 +2,9 @@
   <nav class="navbar is-success" role="navigation" aria-label="main navigation">
     <div class="container is-max-desktop px-2">
       <div class="navbar-brand">
-        <div class="navbar-item is-size-4 is-family-monospace">Pro Noteballs</div>
+        <RouterLink to="/" class="navbar-item is-size-4 is-family-monospace is-clickable">
+          Pro Noteballs
+        </RouterLink>
 
         <a
           @click.prevent="showMobileNavBar = !showMobileNavBar"
@@ -21,8 +23,23 @@
 
       <div id="navbarBasicExample" :class="{ 'is-active': showMobileNavBar }" class="navbar-menu">
         <div class="navbar-end">
-          <RouterLink active-class="is-active" to="/" class="navbar-item">Notes</RouterLink>
-          <RouterLink active-class="is-active" to="/stats" class="navbar-item">Stats</RouterLink>
+          <RouterLink
+            @click="showMobileNavBar = !showMobileNavBar"
+            active-class="is-active"
+            class="navbar-item"
+            to="/"
+          >
+            Notes
+          </RouterLink>
+
+          <RouterLink
+            @click="showMobileNavBar = !showMobileNavBar"
+            active-class="is-active"
+            class="navbar-item"
+            to="/stats"
+          >
+            Stats</RouterLink
+          >
         </div>
       </div>
     </div>

diff --git a/src/components/Notes/AddEditNote.vue b/src/components/Notes/AddEditNote.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="card p-4 mb-5" :class="`has-background-${bgColor}-dark`">
+    <label v-if="label" class="label has-text-white">{{ label }}</label>
+    <div class="field">
+      <div class="control">
+        <textarea
+          @input="$emit('update:modelValue', $event.target.value)"
+          :placeholder="placeholder"
+          :value="modelValue"
+          ref="textareaRef"
+          class="textarea"
+        />
+      </div>
+    </div>
+
+    <div class="field is-grouped is-grouped-right">
+      <div class="control">
+        <slot name="buttons" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, ref } from 'vue'
+
+const textareaRef = ref(null)
+
+defineProps({
+  modelValue: {
+    type: String,
+    required: true
+  },
+  bgColor: {
+    default: 'success',
+    type: String
+  },
+  placeholder: {
+    default: 'Add a new note',
+    type: String
+  },
+  label: {
+    type: String
+  }
+})
+
+const focusTextarea = () => {
+  textareaRef.value.focus()
+}
+
+defineExpose({
+  focusTextarea
+})
+</script>
diff --git a/src/components/Notes/NoteCard.vue b/src/components/Notes/NoteCard.vue
@@ -16,16 +16,26 @@
           <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>
     <footer class="card-footer">
-      <a href="#" class="card-footer-item">Edit</a>
-      <a href="#" @click="deleteNoteHandler" class="card-footer-item">Delete</a>
+      <RouterLink class="card-footer-item" :to="`/edit-note/${note.id}`">Edit</RouterLink>
+
+      <a class="card-footer-item" @click="deleteNoteHandler(note.id)" href="#">Delete</a>
     </footer>
   </div>
 </template>
 
 <script setup>
-import { defineProps, computed, defineEmits } from 'vue'
+import { useNotesStore } from '@/stores/notes'
+import { defineProps, computed } from 'vue'
+import { RouterLink } from 'vue-router'
 
 const props = defineProps({
   note: {
@@ -34,11 +44,8 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['deleteNoteHandler'])
-
-const deleteNoteHandler = () => {
-  emit('deleteNoteHandler', props.note.id)
-}
+const storeNotes = useNotesStore()
+const { deleteNoteHandler } = storeNotes
 
 const noteContentLengthText = computed(() => {
   const length = props.note.content.length

diff --git a/src/components/Notes/index.js b/src/components/Notes/index.js
@@ -1 +1,2 @@
+export { default as AddEditNote } from './AddEditNote.vue'
 export { default as NoteCard } from './NoteCard.vue'
diff --git a/src/main.js b/src/main.js
@@ -5,9 +5,10 @@ import { createPinia } from 'pinia'
 import App from '@/App.vue'
 import router from '@/router'
 
+const pinia = createPinia()
 const app = createApp(App)
 
-app.use(createPinia())
+app.use(pinia)
 app.use(router)
 
 app.mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import { ViewNotes, ViewStats } from '@/views'
+import { ViewNotes, ViewStats, ViewEditNote } from '@/views'
 
 const routes = [
   {
@@ -12,6 +12,12 @@ const routes = [
     component: ViewStats,
     path: '/stats',
     name: 'stats'
+  },
+
+  {
+    component: ViewEditNote,
+    path: '/edit-note/:id',
+    name: 'edit-note'
   }
 ]
 

diff --git a/src/stores/counter.js b/src/stores/counter.js
diff --git a/src/stores/notes.js b/src/stores/notes.js
@@ -0,0 +1,51 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export const useNotesStore = defineStore('notes', () => {
+  const notes = ref([])
+
+  const noteAddHandler = (newNote) => {
+    notes.value.unshift({
+      createdAt: new Date().toDateString(),
+      id: new Date().getTime(),
+      content: newNote,
+      updatedAt: null
+    })
+  }
+
+  const deleteNoteHandler = (id) => {
+    notes.value = notes.value.filter((note) => note.id !== id)
+  }
+
+  const editNoteHandler = (id, newContent) => {
+    let note = notes.value.find((note) => note.id === id)
+
+    if (note) {
+      note.updatedAt = new Date().toDateString()
+      note.content = newContent
+    }
+  }
+
+  const getNoteContent = computed(() => {
+    return (id) => {
+      const note = notes.value.find((note) => note.id === id)
+      return note ? note.content : null
+    }
+  })
+
+  const totalNotesCount = computed(() => notes.value.length)
+
+  const totalCharactersCount = computed(() => {
+    return notes.value.reduce((acc, note) => acc + note.content.length, 0)
+  })
+
+  return {
+    totalCharactersCount,
+    deleteNoteHandler,
+    totalNotesCount,
+    editNoteHandler,
+    getNoteContent,
+    noteAddHandler,
+    notes
+  }
+})
diff --git a/src/views/ViewEditNote.vue b/src/views/ViewEditNote.vue
@@ -0,0 +1,49 @@
+<template>
+  <AddEditNote
+    placeholder="Edit note"
+    v-model="noteContent"
+    ref="addEditNoteRef"
+    label="Edit Note"
+    bgColor="link"
+  >
+    <template v-slot:buttons>
+      <button @click="$router.push('/')" class="button is-light is-link mr-3">Cancel</button>
+
+      <button
+        class="button has-background-link is-link"
+        :disabled="!noteContent.trim()"
+        @click="editNote"
+      >
+        Save note
+      </button>
+    </template>
+  </AddEditNote>
+</template>
+
+<script setup>
+import { useRoute, useRouter } from 'vue-router'
+import { useNotesStore } from '@/stores/notes'
+import { AddEditNote } from '@/components'
+import { onMounted, ref } from 'vue'
+
+const noteStore = useNotesStore()
+const noteContent = ref('')
+const router = useRouter()
+const route = useRoute()
+
+const { getNoteContent, editNoteHandler } = noteStore
+
+const editNote = () => {
+  editNoteHandler(+route.params.id, noteContent.value)
+  router.push('/')
+}
+
+onMounted(() => {
+  const note = getNoteContent(+route.params.id)
+  if (note) {
+    noteContent.value = note
+  } else {
+    router.push('/')
+  }
+})
+</script>
diff --git a/src/views/ViewNotes.vue b/src/views/ViewNotes.vue
@@ -1,52 +1,43 @@
 <template>
   <div class="notes">
-    <div class="card has-background-success-dark p-4 mb-5">
-      <div class="field">
-        <div class="control">
-          <textarea v-model="newNoteValue" class="textarea" placeholder="Add a new note" />
-        </div>
-      </div>
-
-      <div class="field is-grouped is-grouped-right">
-        <div class="control">
-          <button
-            :disabled="!newNoteValue.trim()"
-            class="button has-background-success is-link"
-            @click="newNoteAddHandler"
-          >
-            Add New Note
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <NoteCard
-      v-for="note in notes"
-      @deleteNoteHandler="deleteNoteHandler"
-      :key="note.id"
-      :note="note"
-    />
+    <AddEditNote ref="addEditNoteRef" v-model="newNoteValue">
+      <template v-slot:buttons>
+        <button
+          :disabled="!newNoteValue.trim()"
+          class="button has-background-success is-link"
+          @click="newNoteAddHandler"
+        >
+          Add New Note
+        </button>
+      </template>
+    </AddEditNote>
+
+    <NoteCard v-for="note in notes" :key="note.id" :note="note" />
   </div>
 </template>
 
 <script setup>
-import { NoteCard } from '@/components'
-import { ref } from 'vue'
+import { NoteCard, AddEditNote } from '@/components'
+import { useNotesStore } from '@/stores/notes'
+import { ref, onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
 
 const newNoteValue = ref('')
+const addEditNoteRef = ref(null)
+
+const storeNotes = useNotesStore()
 
-const notes = ref([])
+const { notes } = storeToRefs(storeNotes)
+
+const { noteAddHandler } = storeNotes
 
 const newNoteAddHandler = () => {
-  notes.value.push({
-    id: Math.random() + new Date().getTime(),
-    createdAt: new Date().toDateString(),
-    content: newNoteValue.value
-  })
+  noteAddHandler(newNoteValue.value)
   newNoteValue.value = ''
+  addEditNoteRef.value.focusTextarea()
 }
 
-const deleteNoteHandler = (id) => {
-  notes.value = notes.value.filter((note) => note.id !== id)
-}
+onMounted(() => {
+  addEditNoteRef.value.focusTextarea()
+})
 </script>