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

Reworked data fetching for explore page

Browse Source
This commit is contained in:
Alexis
2025-07-27 18:57:31 +02:00
parent f2076e413c
commit 693f506610
1 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/pages/explore.vue
View File

@@ -5,9 +5,10 @@ definePageMeta({
middleware: ["reset-menu"] middleware: ["reset-menu"]
}) })
const { data: availableCalendars, status: calendarStatus } = useLazyFetch<{ data: Calendar[] }>("/api/calendars/query", { key: "explore-calendars", query: { full: true } }) // const { data: availableCalendars, status: calendarStatus } = useLazyFetch<{ data: Calendar[] }>("/api/calendars/query", { key: "explore-calendars", query: { full: true } })
const { data: calendars, status } = useLazyAsyncData<{ data: Calendar[] }>("explore-calendars", () => {
const isLoading = computed(() => calendarStatus.value === "pending") return $fetch("/api/calendars/query", { query: { full: true }})
})
</script> </script>
<template> <template>
@@ -32,14 +33,17 @@ const isLoading = computed(() => calendarStatus.value === "pending")
{{ $t("entity.calendar.namePublicPlural") }} {{ $t("entity.calendar.namePublicPlural") }}
</Heading> </Heading>
<div v-if="isLoading" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2"> <div v-if="status === 'pending'" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
<LoadingCard /> <LazyLoadingCard />
</div> </div>
<ul v-else-if="availableCalendars?.data" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
<li v-for="calendar in availableCalendars.data" :key="calendar.shortId"> <template v-else-if="status === 'success' && calendars?.data">
<CalendarPreviewCard :calendar="calendar" :gm-id="calendar.world?.gmId" /> <ul class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
</li> <li v-for="calendar in calendars.data" :key="calendar.shortId">
</ul> <LazyCalendarPreviewCard :calendar="calendar" :gm-id="calendar.world?.gmId" />
</li>
</ul>
</template>
</Spacing> </Spacing>
</Spacing> </Spacing>
</main> </main>