Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed loading syntax for calendar

Browse Source
This commit is contained in:
Alexis
2025-02-28 13:42:09 +01:00
parent c59d4eaf92
commit d6d173d087
2 changed files with 52 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
pages/my/calendars/[id].vue
View File

@@ -8,6 +8,7 @@ definePageMeta({
})
const user = useSupabaseUser()
// Redirect user back home when they log out on the page
watch(user, (n) => {
if (!n) {
@@ -18,15 +19,31 @@ watch(user, (n) => {
const route = useRoute()
const id = route.params.id
const { data: calendarData, pending: calPending } = await useLazyFetch("/api/calendars/query", { key: `calendar-${id}`, query: { id, full: true } })
const { data: catData, pending: catPending } = await useLazyFetch("/api/calendars/categories/query", { key: `categories-${id}` })
const {
data: calendar,
status: calendarStatus
} = await useLazyFetch<{ data: Calendar }>("/api/calendars/query",
{
key: `calendar-${id}`,
query: {
id,
full: true
}
}
)
const cal = computed<Calendar>(() => calendarData?.value?.data as Calendar)
const categories = computed<Category[]>(() => catData?.value?.data as Category[])
const {
data: categories,
status: categoriesStatus
} = await useLazyFetch<{ data: Category[] }>("/api/calendars/categories/query",
{ key: `categories-${id}` }
)
const isLoading = computed(() => calendarStatus.value === "pending" || categoriesStatus.value === "pending")
</script>
<template>
<div v-if="calPending || catPending" class="h-full w-full grid place-items-center">
<div v-if="isLoading" class="h-full w-full grid place-items-center">
<Head>
<Title>{{ $t("entity.calendar.nameSingular") }}</Title>
</Head>
@@ -39,11 +56,11 @@ const categories = computed<Category[]>(() => catData?.value?.data as Category[]
</div>
</div>
<div v-else-if="cal && categories" class="h-full w-full">
<div v-else-if="calendar && categories" class="h-full w-full">
<Head>
<Title>{{ cal.name }}</Title>
<Title>{{ calendar.data.name }}</Title>
</Head>
<Calendar :calendar-data="cal" :categories />
<Calendar :calendar-data="calendar.data" :categories="categories.data" />
</div>
</template>