Fixed 404 pages
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script lang="ts" setup>
|
||||
import { PhCalendarX, PhCircleNotch } from "@phosphor-icons/vue";
|
||||
import { PhArrowBendDoubleUpLeft, PhCalendarX, PhCircleNotch } from "@phosphor-icons/vue";
|
||||
import type { Calendar } from "~/models/CalendarConfig";
|
||||
import type { Category } from "~/models/Category";
|
||||
|
||||
@@ -52,7 +52,7 @@ watch(user, () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="calendar && categories" class="h-full w-full">
|
||||
<div v-else-if="calendar?.data && categories?.data" class="h-full w-full">
|
||||
<Head>
|
||||
<Title>{{ calendar.data.name }}</Title>
|
||||
</Head>
|
||||
@@ -75,6 +75,14 @@ watch(user, () => {
|
||||
<p>
|
||||
{{ $t('entity.calendar.notFoundDescription') }}
|
||||
</p>
|
||||
|
||||
<UiButton variant="default" class="mt-4 gap-2" as-child>
|
||||
<RouterLink to="/explore">
|
||||
<PhArrowBendDoubleUpLeft size="24" />
|
||||
|
||||
{{ $t('entity.calendar.backToList') }}
|
||||
</RouterLink>
|
||||
</UiButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<template>
|
||||
<main class="p-8">
|
||||
<Head>
|
||||
<Title>{{ $t("entity.world.namePlural") }}</Title>
|
||||
</Head>
|
||||
|
||||
<Heading level="h1">Calendriers publics</Heading>
|
||||
</main>
|
||||
</template>
|
||||
@@ -1,9 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Calendar } from "~/models/CalendarConfig";
|
||||
|
||||
const { data } = await useFetch("/api/calendars/query", { key: "explore-calendars" })
|
||||
|
||||
const availableCalendars = data.value?.data as Calendar[]
|
||||
const { data: availableCalendars } = await useLazyFetch<{ data: Calendar[] }>("/api/calendars/query", { key: "explore-calendars" })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -22,8 +20,8 @@ const availableCalendars = data.value?.data as Calendar[]
|
||||
{{ $t("entity.calendar.namePublicPlural") }}
|
||||
</Heading>
|
||||
|
||||
<ul v-if="availableCalendars && availableCalendars?.length > 0" class="grid md:grid-cols-3 gap-2">
|
||||
<li v-for="calendar in availableCalendars" :key="calendar.shortId">
|
||||
<ul v-if="availableCalendars?.data" class="grid md:grid-cols-3 gap-2">
|
||||
<li v-for="calendar in availableCalendars.data" :key="calendar.shortId">
|
||||
<UiCard
|
||||
class="w-full transition-all hover:bg-slate-50 dark:bg-gray-950 dark:hover:bg-indigo-950 dark:focus-within:outline-gray-900"
|
||||
:link="`/calendars/${calendar.shortId}`"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts" setup>
|
||||
import { PhCircleNotch } from "@phosphor-icons/vue";
|
||||
import { PhArrowBendDoubleUpLeft, PhCalendarX, PhCircleNotch } from "@phosphor-icons/vue";
|
||||
import type { Calendar } from "~/models/CalendarConfig";
|
||||
import type { Category } from "~/models/Category";
|
||||
|
||||
@@ -56,11 +56,36 @@ const isLoading = computed(() => calendarStatus.value === "pending" || categorie
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="calendar && categories" class="h-full w-full">
|
||||
<div v-else-if="calendar?.data && categories?.data" class="h-full w-full">
|
||||
<Head>
|
||||
<Title>{{ calendar.data.name }}</Title>
|
||||
</Head>
|
||||
|
||||
<Calendar :calendar-data="calendar.data" :categories="categories.data" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import type { RealtimeChannel } from "@supabase/supabase-js"
|
||||
import type { World } from "~/models/World";
|
||||
import type { Calendar } from "~/models/CalendarConfig";
|
||||
import { PhPlus, PhTrash } from "@phosphor-icons/vue";
|
||||
import { PhArrowBendDoubleUpLeft, PhGlobeHemisphereWest, PhPlus, PhTrash } from "@phosphor-icons/vue";
|
||||
|
||||
const supabase = useSupabaseClient()
|
||||
const route = useRoute()
|
||||
@@ -112,7 +112,7 @@ function hideDeleteModal() {
|
||||
{{ $t('entity.isLoading') }}
|
||||
</Heading>
|
||||
</template>
|
||||
<template v-else-if="world">
|
||||
<template v-else-if="world?.data">
|
||||
<Head>
|
||||
<Title>{{ world.data.name }}</Title>
|
||||
</Head>
|
||||
@@ -180,7 +180,31 @@ function hideDeleteModal() {
|
||||
<CalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteCalendarModalOpen" @on-close="hideDeleteModal" />
|
||||
</template>
|
||||
<template v-else>
|
||||
Not found
|
||||
<div class="h-full w-full grid place-items-center">
|
||||
<Head>
|
||||
<Title>{{ $t("entity.world.notFound") }}</Title>
|
||||
</Head>
|
||||
|
||||
<div class="grid justify-items-center opacity-80">
|
||||
<PhGlobeHemisphereWest size="75" class="opacity-60" weight="fill" />
|
||||
|
||||
<Heading level="h1">
|
||||
{{ $t("entity.world.notFound") }}
|
||||
</Heading>
|
||||
|
||||
<p>
|
||||
{{ $t('entity.world.notFoundDescription') }}
|
||||
</p>
|
||||
|
||||
<UiButton variant="default" class="mt-4 gap-2" as-child>
|
||||
<RouterLink to="/my">
|
||||
<PhArrowBendDoubleUpLeft size="24" />
|
||||
|
||||
{{ $t('entity.world.backToList') }}
|
||||
</RouterLink>
|
||||
</UiButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user