implement toolbar actions

src/components/Modal.vue

@@ -1,11 +1,21 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core'
 
+const modal = ref<HTMLElement | null>(null)
 const modalBox = ref(null)
 const show = ref(false)
 
 const open = () => (show.value = true)
-const close = () => (show.value = false)
+const close = async () => {
+  return new Promise((resolve) => {
+    modal.value?.addEventListener('transitionend', () => resolve(true))
+    show.value = false
+    // nextTick(() => {
+    //   console.log('done!')
+    //   resolve(true)
+    // })
+  })
+}
 
 const slotProps = { open, close }
 
@@ -27,7 +37,7 @@ const onLeave = (el: Element, done: () => void): void => {
   <slot name="activator" v-bind="slotProps"></slot>
   <Teleport to="body">
     <Transition @enter="onEnter" @leave="onLeave">
-      <div class="modal bg-neutral-800 bg-opacity-60" v-if="show">
+      <div class="modal bg-neutral-800 bg-opacity-60" v-if="show" ref="modal">
         <div class="modal-box" ref="modalBox">
           <h3 class="text-lg font-bold" v-if="$slots.title"><slot name="title" /></h3>
           <p class="py-4">

src/components/Note.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { formatDate } from '@/utils/helpers'
-import { notes, activeNote } from '@/composables/useNotes'
-import { notesRelations } from '@/composables/useNotes'
+import {
+  notes,
+  activeNote,
+  notesRelations,
+  deleteNote,
+  rootNote,
+  setRootNote,
+} from '@/composables/useNotes'
 
 const props = defineProps<{
   note: Note
@@ -21,24 +27,30 @@ watch(noteTitle, () => {
 })
 
 const references = computed<Note[]>(() => {
-  return notesRelations.value[props.note.id].from
-    .map((noteId) => {
-      return notes.value.find((note) => note.id === noteId)
-    })
-    .filter((note): note is Note => note !== undefined)
+  const relations = notesRelations.value[props.note.id]
+  return relations
+    ? (relations.from || [])
+        .map((noteId) => {
+          return notes.value.find((note) => note.id === noteId)
+        })
+        .filter((note): note is Note => note !== undefined)
+    : []
 })
 
-const deleteNote = () => {
-  console.log('delete note')
+const del = async (closeModal: () => Promise<Boolean>) => {
+  await closeModal()
+  activeNote.value = rootNote.value
+  deleteNote(props.note.id)
 }
 
-const setRootNote = () => {
-  console.log('set root note')
+const setRoot = async (closeModal: () => Promise<Boolean>) => {
+  setRootNote(props.note.id)
+  closeModal()
 }
 </script>
 <template>
   <div class="flex flex-col">
-    <NoteToolbar @delete="deleteNote" @set-root="setRootNote">
+    <NoteToolbar @delete="del" @set-root="setRoot">
       <template #title>
         <i
           class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"

src/components/Note/NoteToolbar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const emit = defineEmits<{
-  delete: []
-  setRoot: []
+  delete: [close: () => void]
+  setRoot: [close: () => void]
 }>()
 </script>
 <template>
@@ -18,9 +18,9 @@ const emit = defineEmits<{
             <i class="fas fa-fw fa-trash" />
           </button>
         </template>
-        <template #default>Are you sure you want to delete this?</template>
+        <template #default>Are you sure you want to delete this note?</template>
         <template #actions="{ close }">
-          <button class="btn-primary btn-sm btn mr-1" @click="emit('delete')">
+          <button class="btn-primary btn-sm btn mr-1" @click="emit('delete', close)">
             Delete note
           </button>
           <button class="btn-sm btn" @click="close">Close</button>
@@ -36,7 +36,7 @@ const emit = defineEmits<{
           Are you sure you want to set this note as root note?
         </template>
         <template #actions="{ close }">
-          <button class="btn-primary btn-sm btn mr-1" @click="emit('setRoot')">
+          <button class="btn-primary btn-sm btn mr-1" @click="emit('setRoot', close)">
             Set current note as root
           </button>
           <button class="btn-sm btn" @click="close">Close</button>

src/composables/useNotes.ts

@@ -19,12 +19,28 @@ watch(notes, () => {
 
 export const activeNote = ref<Note>()
 watch(activeNote, () => {
-  if (activeNote.value) useTitle(`${activeNote.value.title} | Contexted`)
+  if (activeNote.value) {
+    useTitle(`${activeNote.value.title} | Contexted`)
+  }
+})
+export const setActiveNote = (noteId: string) => {
+  activeNote.value = notes.value.find((note) => note.id === noteId)
+}
+
+export const rootNote = computed<Note | undefined>(() => {
+  const rootNote = notes.value.find((note: Note) => note.isRoot)
+  return rootNote
 })
 
-export const rootNote = computed<Note | undefined>(() =>
-  notes.value.find((note: Note) => note.isRoot)
-)
+export const setRootNote = (noteId: string) => {
+  if (rootNote.value) {
+    const updatedRootNote = { ...baseNotes[rootNote.value.id], isRoot: false }
+    updateNote(updatedRootNote.id, updatedRootNote)
+  }
+  const note = { ...baseNotes[noteId], isRoot: true }
+  updateNote(noteId, note)
+  setActiveNote(noteId)
+}
 
 export const setDefaultNotes = (defaultNotes: BaseNote[]) => {
   defaultNotes.forEach((defaultNote) => {
@@ -61,8 +77,8 @@ export const findNotes = (query: string): Note[] => {
   })
 }
 
-export const updateNote = (noteId: string, note: Note) => {
-  const updatedNote: Note = {
+export const updateNote = (noteId: string, note: BaseNote) => {
+  const updatedNote: BaseNote = {
     ...note,
     modified: new Date().getTime(),
   }
@@ -82,6 +98,10 @@ export const addNote = (title: string, content: string, goToNote: boolean = fals
   if (goToNote) activeNote.value = notes.value.find((note) => note.id === newNote.id)
 }
 
+export const deleteNote = (noteId: string) => {
+  delete baseNotes[noteId]
+}
+
 const getNoteLinksByNoteId = (noteId: string): string[] => {
   const note = baseNotes[noteId]
   const regex = /\[\[(.*?)\]\]/g