73 lines
2.0 KiB
Vue
73 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { formatDate } from '@/utils/helpers'
|
|
import {
|
|
activeNote,
|
|
deleteNote,
|
|
rootNote,
|
|
setRootNote,
|
|
setActiveNote,
|
|
getNoteReferences
|
|
} from '@/composables/useNotes'
|
|
import { Haptics, ImpactStyle } from '@capacitor/haptics'
|
|
|
|
const props = defineProps<{
|
|
note: Note
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
update: [note: Note]
|
|
}>()
|
|
|
|
const noteTitle = ref<string>(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[]>(() => getNoteReferences(props.note))
|
|
|
|
const handleAction = async (action: string, closeModal: () => Promise<Boolean>) => {
|
|
Haptics.impact({ style: ImpactStyle.Light })
|
|
switch (action) {
|
|
case 'delete':
|
|
if (closeModal) await closeModal()
|
|
setActiveNote(rootNote.value?.id)
|
|
deleteNote(props.note.id)
|
|
break
|
|
case 'setRoot':
|
|
setRootNote(props.note.id)
|
|
if (closeModal) closeModal()
|
|
}
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="flex flex-grow flex-col">
|
|
<NoteToolbar :note="props.note" @execute="handleAction">
|
|
<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="w-full bg-transparent pb-1 outline-none" v-model="noteTitle" />
|
|
</template>
|
|
</NoteToolbar>
|
|
<NoteEditor
|
|
class="flex-grow"
|
|
:note="activeNote"
|
|
@update="updateNoteContent"
|
|
v-if="activeNote"
|
|
></NoteEditor>
|
|
<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>
|