Migration to nuxt 4

Used codemods CLI and reworked most alias'd path that stopped working
2025-07-27 14:30:30 +02:00
parent 68b9a38f83
commit 7fdab8601f
280 changed files with 847 additions and 496 deletions
--- a/app/pages/my/calendars/[id].vue
+++ b/app/pages/my/calendars/[id].vue
@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import { PhArrowBendDoubleUpLeft, PhCalendarX, PhCircleNotch } from "@phosphor-icons/vue";
+import type { Calendar } from "@@/models/CalendarConfig";
+
+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: "active-calendar",
+    query: {
+      id,
+      full: true
+    }
+  }
+)
+
+const isLoading = computed(() => calendarStatus.value === "pending")
+
+const { setActiveCalendar } = useCalendar()
+watch([calendar], () => {
+  if (calendar.value?.data) {
+    setActiveCalendar(calendar.value?.data)
+  }
+}, { 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" class="h-full w-full">
+    <Head>
+      <Title>{{ calendar.data.name }}</Title>
+    </Head>
+
+    <div class="h-full grid grid-rows-[auto_1fr] pt-8 md:gap-y-2">
+      <div class="px-5 md:px-8 max-md:mb-2">
+        <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 />
+    </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>