129 lines
3.2 KiB
Vue
129 lines
3.2 KiB
Vue
<script lang="ts" setup>
|
|
import { PhArrowBendDoubleUpLeft, PhCalendarX, PhCircleNotch } from "@phosphor-icons/vue";
|
|
import type { Calendar } from "~/models/CalendarConfig";
|
|
import type { Category } from "~/models/Category";
|
|
|
|
definePageMeta({
|
|
middleware: ["auth-guard"]
|
|
})
|
|
|
|
const user = useSupabaseUser()
|
|
|
|
// Redirect user back home when they log out on the page
|
|
watch(user, (n) => {
|
|
if (!n) {
|
|
navigateTo("/")
|
|
}
|
|
})
|
|
|
|
const route = useRoute()
|
|
const id = route.params.id
|
|
|
|
const {
|
|
data: calendar,
|
|
status: calendarStatus
|
|
} = await useLazyFetch<{ data: Calendar }>("/api/calendars/query",
|
|
{
|
|
key: `calendar-${id}`,
|
|
query: {
|
|
id,
|
|
full: true
|
|
}
|
|
}
|
|
)
|
|
|
|
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")
|
|
|
|
// Set custom menu
|
|
// This should be reserved for actions, not for breadcrumbs
|
|
//
|
|
// const { t } = useI18n()
|
|
// const { setCurrentMenu } = useUiStore()
|
|
|
|
// // Set menu once we have the calendar data
|
|
// watch(calendar, (n) => {
|
|
// if (n?.data) {
|
|
// setCurrentMenu([
|
|
// {
|
|
// tooltip: t("entity.world.backToMy"),
|
|
// to: "/my",
|
|
// phIcon: "universe",
|
|
// phIconWeight: "regular"
|
|
// },
|
|
// {
|
|
// tooltip: t("entity.world.backToSingle", { world: calendar.value?.data.world?.name }),
|
|
// to: `/my/worlds/${calendar.value?.data.world?.id}`,
|
|
// phIcon: "world"
|
|
// },
|
|
// ])
|
|
// }
|
|
// }, { immediate: true })
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="isLoading" class="h-full w-full grid place-items-center">
|
|
<Head>
|
|
<Title>{{ $t("entity.calendar.nameSingular") }}</Title>
|
|
</Head>
|
|
|
|
<div class="grid gap-2 justify-items-center opacity-50">
|
|
<p>
|
|
{{ $t('entity.calendar.isLoading') }}
|
|
</p>
|
|
<PhCircleNotch size="50" class="animate-spin"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="calendar?.data && categories?.data" class="h-full w-full">
|
|
<Head>
|
|
<Title>{{ calendar.data.name }}</Title>
|
|
</Head>
|
|
|
|
<div class="h-full grid grid-rows-[auto_1fr] pt-8 gap-y-2">
|
|
<div class="px-8">
|
|
<Breadcrumb
|
|
v-if="calendar.data.world"
|
|
:items="[
|
|
{ label: calendar.data.world.name, to: `/my/worlds/${calendar.data.world.id}` },
|
|
{ label: calendar.data.name },
|
|
]"
|
|
/>
|
|
</div>
|
|
|
|
<Calendar :calendar-data="calendar.data" :categories="categories.data" />
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="h-full w-full grid place-items-center">
|
|
<Head>
|
|
<Title>{{ $t("entity.calendar.notFound") }}</Title>
|
|
</Head>
|
|
|
|
<div class="grid justify-items-center opacity-80">
|
|
<PhCalendarX size="75" class="opacity-60" />
|
|
|
|
<Heading level="h1">
|
|
{{ $t("entity.calendar.notFound") }}
|
|
</Heading>
|
|
|
|
<p>
|
|
{{ $t('entity.calendar.notFoundDescription') }}
|
|
</p>
|
|
|
|
<UiButton variant="default" class="mt-4 gap-2" as-child>
|
|
<RouterLink to="/my">
|
|
<PhArrowBendDoubleUpLeft size="24" />
|
|
|
|
{{ $t('entity.calendar.backToList') }}
|
|
</RouterLink>
|
|
</UiButton>
|
|
</div>
|
|
</div></template>
|