91 lines
2.2 KiB
Vue
91 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { formatDate } from '@/utils/helpers'
|
|
import {
|
|
notes,
|
|
activeNote,
|
|
notesRelations,
|
|
deleteNote,
|
|
rootNote,
|
|
setRootNote,
|
|
setActiveNote,
|
|
} from '@/composables/useNotes'
|
|
|
|
const props = defineProps<{
|
|
note: Note
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
update: [note: Note]
|
|
}>()
|
|
|
|
const noteTitle = ref(props.note.title)
|
|
watch(noteTitle, () => {
|
|
const updatedNote: Note = { ...props.note, title: noteTitle.value }
|
|
emit('update', updatedNote)
|
|
})
|
|
|
|
const updateNoteContent = (content: string) => {
|
|
const updatedNote: Note = { ...props.note, content }
|
|
emit('update', updatedNote)
|
|
}
|
|
|
|
const references = computed<Note[]>(() => {
|
|
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 del = async (closeModal: () => Promise<Boolean>) => {
|
|
await closeModal()
|
|
setActiveNote(rootNote.value?.id)
|
|
deleteNote(props.note.id)
|
|
}
|
|
|
|
const setRoot = async (closeModal: () => Promise<Boolean>) => {
|
|
setRootNote(props.note.id)
|
|
closeModal()
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="flex flex-col">
|
|
<NoteToolbar :note="props.note" @delete="del" @set-root="setRoot">
|
|
<template #title>
|
|
<i
|
|
class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
|
|
v-if="props.note.isRoot"
|
|
></i>
|
|
<input
|
|
type="text"
|
|
class="flex-1 bg-transparent py-1 outline-none"
|
|
v-model="noteTitle"
|
|
/>
|
|
</template>
|
|
</NoteToolbar>
|
|
<NoteEditor
|
|
class="h-100 flex-1 overflow-auto"
|
|
:note="activeNote"
|
|
@update="updateNoteContent"
|
|
v-if="activeNote"
|
|
/>
|
|
<NoteReferences :references="references" />
|
|
<hr class="my-3" />
|
|
<div class="flex text-sm text-secondary">
|
|
<span>{{ note.wordCount }} {{ note.wordCount === 1 ? 'word' : 'words' }}</span>
|
|
<span class="ml-auto">Last modified {{ formatDate(note.modified) }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.btn-group .btn {
|
|
@apply border-[1px] border-neutral-200 text-opacity-70;
|
|
&:not(:first-child) {
|
|
@apply ml-[-1px];
|
|
}
|
|
}
|
|
</style>
|