You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
3.1 KiB
Vue
107 lines
3.1 KiB
Vue
<template>
|
|
<NuxtLayout name="edit">
|
|
<template #content>
|
|
<div class="mb-2 flex w-full">
|
|
<input type="text" v-model="note.title" placeholder="untitled" @change="submit()" />
|
|
</div>
|
|
<div class="sticky top-0 flex w-full justify-between">
|
|
<div @click="toggleComp('text')" class="bg-lightgray w-1/2 p-2 text-center text-xl"
|
|
:class="{ 'bg-secondary': comp === 'text' }">
|
|
Text
|
|
</div>
|
|
<div @click="toggleComp('md')" class="bg-lightgray w-1/2 p-2 text-center text-xl"
|
|
:class="{ 'bg-secondary': comp === 'md' }">
|
|
Markdown
|
|
</div>
|
|
</div>
|
|
<div class="flex h-full w-full flex-col">
|
|
<textarea ref="noteTextArea" v-show="comp === 'text'"
|
|
class="bg-secondary min-h-screen w-full flex-grow resize-none border-none p-4 outline-none placeholder:text-zinc-700 focus:outline-none"
|
|
v-model="input" @change="submit()">
|
|
</textarea>
|
|
<CardMarkdownRenderer v-show="comp === 'md'" :content="note.description" :state="'description'" />
|
|
</div>
|
|
</template>
|
|
</NuxtLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
middleware: ['auth'],
|
|
})
|
|
|
|
type Mode = 'text' | 'md'
|
|
|
|
const note = useNote()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const isLoading = ref<Boolean>(false)
|
|
const isSubmitting = ref<Boolean>(false)
|
|
const isDeleting = ref<Boolean>(false)
|
|
const comp = ref<Mode>('text')
|
|
const { textarea: noteTextArea, input } = useTextareaAutosize()
|
|
|
|
const toggleComp = (name: Mode) => {
|
|
comp.value = name
|
|
}
|
|
|
|
const { refresh } = await useFetch('/api/note', {
|
|
method: 'GET',
|
|
query: {
|
|
id: route.params.id,
|
|
},
|
|
onResponse({ response }) {
|
|
console.log('Response: ', response)
|
|
if (response.status === 500) {
|
|
console.log(`Error: ${response._data.message}`)
|
|
router.push('/notes')
|
|
return
|
|
}
|
|
note.value.title = response._data.note.title
|
|
note.value.description = response._data.note.description
|
|
input.value = note.value.description
|
|
},
|
|
})
|
|
|
|
const submitTimeout = ref()
|
|
|
|
const submit = async () => {
|
|
isSubmitting.value = true
|
|
|
|
if (submitTimeout.value) clearTimeout(submitTimeout.value)
|
|
|
|
submitTimeout.value = setTimeout(async () => {
|
|
await submitNote(note.value, route.params.id)
|
|
isSubmitting.value = false
|
|
}, 1000)
|
|
}
|
|
|
|
const deleteNote = async () => {
|
|
isDeleting.value = true
|
|
await useFetch('/api/note', {
|
|
method: 'DELETE',
|
|
query: {
|
|
id: route.params.id,
|
|
},
|
|
onResponse({ response }) {
|
|
isDeleting.value = false
|
|
console.log('DELETE:', response._data.message)
|
|
router.push('/notes')
|
|
},
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
isLoading.value = true
|
|
refresh()
|
|
isLoading.value = false
|
|
})
|
|
|
|
watch(
|
|
() => input.value,
|
|
() => {
|
|
note.value.description = input.value
|
|
}
|
|
)
|
|
</script>
|