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/calendars/[id].vue
+++ b/app/pages/calendars/[id].vue
@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import { PhArrowBendDoubleUpLeft, PhCalendarX, PhCircleNotch } from "@phosphor-icons/vue";
+import type { Calendar } from "@@/models/CalendarConfig";
+
+const route = useRoute()
+const shortId = route.params.id
+
+const user = useSupabaseUser()
+
+const {
+  data: calendar,
+  status: calendarStatus,
+  refresh: calRefresh
+} = await useLazyFetch<{ data: Calendar }>("/api/calendars/query",
+  {
+    key: "active-calendar",
+    query: {
+      shortId,
+      full: true
+    }
+  }
+)
+
+const isLoading = computed(() => calendarStatus.value === "pending")
+
+watch(user, () => calRefresh())
+
+const { setActiveCalendar } = useCalendar()
+watch(isLoading, (n) => {
+  if (!n && 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 pt-8">
+    <Head>
+      <Title>{{ calendar.data.name }}</Title>
+    </Head>
+
+    <Calendar />
+  </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="/explore">
+          <PhArrowBendDoubleUpLeft size="24" />
+
+          {{ $t('entity.calendar.backToList') }}
+        </RouterLink>
+      </UiButton>
+    </div>
+  </div>
+</template>