41 lines
1.2 KiB
Vue
41 lines
1.2 KiB
Vue
<script lang="ts" setup>
|
|
import { PhCircleNotch } from '@phosphor-icons/vue';
|
|
import type { Calendar } from '~/models/CalendarConfig';
|
|
import type { Category } from '~/models/Category';
|
|
|
|
useHead({
|
|
title: 'Calendrier'
|
|
})
|
|
definePageMeta({
|
|
middleware: ['auth-guard']
|
|
})
|
|
|
|
const user = useSupabaseUser()
|
|
// Redirect user back home when they log out on the page
|
|
watch(user, (n, _o) => {
|
|
if (!n) {
|
|
navigateTo('/')
|
|
}
|
|
})
|
|
|
|
const route = useRoute()
|
|
const id = route.params.id
|
|
|
|
const { data: calendarData, pending: calPending } = useLazyFetch('/api/calendars/query', { key: `calendar-${id}`, query: { id, full: true } })
|
|
const { data: catData, pending: catPending } = useLazyFetch('/api/calendars/categories/query', { key: `categories-${id}` })
|
|
|
|
const cal = computed<Calendar>(() => calendarData?.value?.data as Calendar)
|
|
const categories = computed<Category[]>(() => catData?.value?.data as Category[])
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="calPending || catPending" class="h-full w-full grid place-items-center">
|
|
<div class="grid gap-2 justify-items-center opacity-50">
|
|
<p>Chargement du calendrier</p>
|
|
<PhCircleNotch size="50" class="animate-spin"/>
|
|
</div>
|
|
</div>
|
|
|
|
<Calendar v-else-if="cal && categories" :calendar-data="cal" :categories />
|
|
</template>
|