Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revamped world slug code

Browse Source
This commit is contained in:
Alexis
2025-02-28 14:34:57 +01:00
parent d6d173d087
commit 500941ae69
1 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
pages/my/worlds/[id].vue
View File

@@ -8,9 +8,7 @@ const supabase = useSupabaseClient()
const route = useRoute() const route = useRoute()
const id = route.params.id const id = route.params.id
const { data: res, pending } = await useFetch("/api/worlds/query", { query: { id, full: true } }) const { data: world, status } = await useFetch<{ data: World }>("/api/worlds/query", { query: { id, full: true } })
const world = ref<World>(res.value?.data as World)
definePageMeta({ definePageMeta({
middleware: ["auth-guard"] middleware: ["auth-guard"]
@@ -40,8 +38,10 @@ let calendarChannel: RealtimeChannel
/** Handles calendar insertion realtime events */ /** Handles calendar insertion realtime events */
function handleInsertedCalendar(newCalendar: Calendar) { function handleInsertedCalendar(newCalendar: Calendar) {
if (!world.value) return
try { try {
world.value.calendars?.push(newCalendar) world.value.data.calendars?.push(newCalendar)
} catch (err) { } catch (err) {
console.log(err) console.log(err)
} }
@@ -49,8 +49,10 @@ function handleInsertedCalendar(newCalendar: Calendar) {
/** Handles calendar deletion realtime events */ /** Handles calendar deletion realtime events */
function handleDeletedCalendar(id: number) { function handleDeletedCalendar(id: number) {
if (!world.value) return
try { try {
world.value.calendars?.splice(world.value.calendars.findIndex(c => c.id === id)) world.value.data.calendars?.splice(world.value.data.calendars.findIndex(c => c.id === id))
} catch (err) { } catch (err) {
console.log(err) console.log(err)
} }
@@ -101,7 +103,7 @@ function hideDeleteModal() {
<template> <template>
<main class="p-8"> <main class="p-8">
<template v-if="pending"> <template v-if="status === 'pending'">
<Head> <Head>
<Title>{{ $t("entity.world.namePlural") }}</Title> <Title>{{ $t("entity.world.namePlural") }}</Title>
</Head> </Head>
@@ -112,14 +114,14 @@ function hideDeleteModal() {
</template> </template>
<template v-else-if="world"> <template v-else-if="world">
<Head> <Head>
<Title>{{ world.name }}</Title> <Title>{{ world.data.name }}</Title>
</Head> </Head>
<header class="lg:w-1/2 mb-8"> <header class="lg:w-1/2 mb-8">
<Spacing> <Spacing>
<Heading level="h1">{{ world.name }}</Heading> <Heading level="h1">{{ world.data.name }}</Heading>
<p>{{ world.description }}</p> <p>{{ world.data.description }}</p>
</Spacing> </Spacing>
</header> </header>
@@ -146,8 +148,8 @@ function hideDeleteModal() {
</UiTooltipProvider> </UiTooltipProvider>
</div> </div>
<ul v-if="world.calendars && world.calendars?.length > 0" class="grid md:grid-cols-3 gap-2"> <ul v-if="world.data.calendars && world.data.calendars?.length > 0" class="grid md:grid-cols-3 gap-2">
<li v-for="calendar in world.calendars" :key="calendar.id"> <li v-for="calendar in world.data.calendars" :key="calendar.id">
<UiCard <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" 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="`/my/calendars/${calendar.id}`" :link="`/my/calendars/${calendar.id}`"
@@ -173,10 +175,13 @@ function hideDeleteModal() {
</template> </template>
</Spacing> </Spacing>
</section> </section>
</template>
<CalendarDialogCreate :world :modal-state="isCreateCalendarModalOpen" @on-close="hideCreateDialog" /> <CalendarDialogCreate :world="world.data" :modal-state="isCreateCalendarModalOpen" @on-close="hideCreateDialog" />
<CalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteCalendarModalOpen" @on-close="hideDeleteModal" /> <CalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteCalendarModalOpen" @on-close="hideDeleteModal" />
</template>
<template v-else>
Not found
</template>
</main> </main>
</template> </template>