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.
54 lines
1.7 KiB
Vue
54 lines
1.7 KiB
Vue
<template>
|
|
<App>
|
|
<Header />
|
|
<div class="flex w-full max-w-3xl justify-end gap-4">
|
|
<ElementButton @click="userSignOut()"
|
|
class="group/button flex gap-2 align-middle hover:bg-red-500 hover:text-black">
|
|
<Icon name="fa6-solid:arrow-right-from-bracket" />
|
|
<p> Sign Out </p>
|
|
</ElementButton>
|
|
<ElementButton class="group/button flex gap-2 align-middle hover:bg-blue-500 hover:text-black"
|
|
@click="create()">
|
|
<Icon v-if="isCreating" name="loading" />
|
|
<Icon v-if="!isCreating" name="fa6-solid:square-plus" />
|
|
<p> New Note </p>
|
|
</ElementButton>
|
|
</div>
|
|
|
|
<div class="mx-12 flex h-full w-full max-w-3xl flex-row justify-center gap-4">
|
|
<div v-if="data" class="flex w-full flex-col gap-4">
|
|
<div v-for="note in data.notes" :key="note.id">
|
|
<LazyCardNote :id="note.id" :uuid="note.uuid" :title="note.title ? note.title : 'untitled'"
|
|
:description="note.description" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</App>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
middleware: ['auth'],
|
|
})
|
|
|
|
const router = useRouter()
|
|
const isCreating = ref<boolean>(false)
|
|
|
|
const { data: data, refresh } = await useFetch('/api/notes')
|
|
|
|
const create = async () => {
|
|
isCreating.value = true
|
|
await useFetch('/api/note/new', {
|
|
onResponse({ response }) {
|
|
console.log(response._data.message)
|
|
router.push(`/notes/${response._data.note.uuid}`)
|
|
},
|
|
})
|
|
isCreating.value = false
|
|
}
|
|
|
|
onMounted(() => {
|
|
refresh()
|
|
})
|
|
</script>
|