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/calendars/[id].vue
View File

@@ -8,8 +8,29 @@ const shortId = route.params.id
const user = useSupabaseUser() const user = useSupabaseUser()
const { data: calendarData, pending: calPending, refresh: calRefresh } = await useLazyFetch<{ data: Calendar }>("/api/calendars/query", { query: { shortId, full: true } }) const {
const { data: catData, pending: catPending, refresh: catRefresh } = await useLazyFetch<{ data: Category[] }>("/api/calendars/categories/query") data: calendar,
status: calendarStatus,
refresh: calRefresh
} = await useLazyFetch<{ data: Calendar }>("/api/calendars/query",
{
key: `calendar-${shortId}`,
query: {
shortId,
full: true
}
}
)
const {
data: categories,
status: categoriesStatus,
refresh: catRefresh
} = await useLazyFetch<{ data: Category[] }>("/api/calendars/categories/query",
{ key: `categories-${shortId}` }
)
const isLoading = computed(() => calendarStatus.value === "pending" || categoriesStatus.value === "pending")
watch(user, () => { watch(user, () => {
calRefresh() calRefresh()
@@ -18,7 +39,7 @@ watch(user, () => {
</script> </script>
<template> <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> <Head>
<Title>{{ $t("entity.calendar.nameSingular") }}</Title> <Title>{{ $t("entity.calendar.nameSingular") }}</Title>
</Head> </Head>
@@ -31,12 +52,12 @@ watch(user, () => {
</div> </div>
</div> </div>
<div v-else-if="calendarData && catData" class="h-full w-full"> <div v-else-if="calendar && categories" class="h-full w-full">
<Head> <Head>
<Title>{{ calendarData.data.name }}</Title> <Title>{{ calendar.data.name }}</Title>
</Head> </Head>
<Calendar :calendar-data="calendarData.data" :categories="catData.data" /> <Calendar :calendar-data="calendar.data" :categories="categories.data" />
</div> </div>
<div v-else class="h-full w-full grid place-items-center"> <div v-else class="h-full w-full grid place-items-center">

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

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