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

Changed ways to access calendars

Browse Source
This commit is contained in:
Alexis
2024-06-13 19:10:03 +02:00
parent a7cb032b12
commit bc29129546
12 changed files with 191 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
components/calendar/Calendar.vue
View File

@@ -2,7 +2,7 @@
import { useCalendar } from '@/stores/CalendarStore'
import { computed, type Component, type ComputedRef } from 'vue'
import { PhMagnifyingGlass } from '@phosphor-icons/vue'
import { PhCircleNotch, PhMagnifyingGlass } from '@phosphor-icons/vue'
import MonthlyLayout from './state/monthly/Layout.vue'
import CenturyLayout from './state/centennially/Layout.vue'
import DecadeLayout from './state/decennially/Layout.vue'
@@ -15,9 +15,11 @@ const { setCalendarId, setMonths, setDefaultDate, currentConfig, selectedDate, j
const { setEvents, setCategories } = useCalendarEvents()
const { setCharacters } = useCharacters()
const { data: calendar, pending: calPending, refresh: calRefresh } = await useLazyFetch(`/api/calendars/query?world_id=${worldId}`)
const { data: characters, pending: charPending, refresh: charRefresh } = await useLazyFetch(`/api/characters/query?world_id=${worldId}`)
const { data: categories, pending: categoryPending, refresh: categoryRefresh } = await useLazyFetch(`/api/calendars/categories/query`)
const { months } = storeToRefs(useCalendar())
const { data: calendar, pending: calPending, refresh: calRefresh } = useFetch(`/api/calendars/query?world_id=${worldId}`)
const { data: characters, pending: charPending, refresh: charRefresh } = useFetch(`/api/characters/query?world_id=${worldId}`)
const { data: categories, pending: categoryPending, refresh: categoryRefresh } = useFetch(`/api/calendars/categories/query`)
if (!calendar.value) {
await calRefresh()
@@ -119,24 +121,44 @@ onMounted(() => {
</script>
<template>
<div class="h-full">
<template v-if="calPending || charPending || categoryPending">
<div class="h-full grid place-items-center">
Loading notamment
<div class="h-full w-full relative">
<TransitionGroup name="screen">
<div v-if="calPending || charPending || categoryPending" class="h-full w-full grid place-items-center">
<div class="flex flex-col items-center">
<PhCircleNotch size="42" class="animate-spin" />
<p class="text-lg mt-2">Chargement en cours…</p>
</div>
</div>
</template>
<template v-else>
<div class="h-full grid grid-rows-[auto,1fr]">
<div v-else-if="months.length > 0" class="h-full grid grid-rows-[auto,1fr]">
<CalendarMenu />
<KeepAlive>
<component :is="currentViewComponent"/>
</KeepAlive>
</div>
<LazyCalendarSearch />
<LazyCalendarFormUpdateEvent />
<LazyCalendarFormDeleteEvent />
</template>
<LazyCalendarSearch />
<LazyCalendarFormUpdateEvent />
<LazyCalendarFormDeleteEvent />
</div>
</TransitionGroup>
</div>
</template>
<style lang="scss" scoped>
.screen-move, /* apply transition to moving elements */
.screen-enter-active,
.screen-leave-active {
transition: all .4s ease-out;
}
.screen-enter-from,
.screen-leave-to {
opacity: 0;
}
/* ensure leaving items are taken out of layout flow so that moving
animations can be calculated correctly. */
.screen-leave-active {
position: absolute;
}
</style>

5
components/global/Spacing.vue Normal file
View File

@@ -0,0 +1,5 @@
<template>
<div class="space-y-2">
<slot />
</div>
</template>

2
components/global/user/CTA.vue
View File

@@ -43,7 +43,7 @@ async function handleLogout() {
}
function gotoProfilePage() {
router.push({ path: '/profile' })
router.push({ path: '/i' })
closeMenu()
}

55
components/profile/Dashboard.vue
View File

@@ -1,55 +0,0 @@
<script lang="ts" setup>
const user = useSupabaseUser()
const { data: worlds } = await useLazyFetch('/api/worlds')
</script>
<template>
<main class="p-8">
<Heading>{{ user?.user_metadata.full_name }}</Heading>
<section v-if="worlds?.data" class="mt-4">
<h2 class="mb-4 text-lg font-bold">
Mondes
</h2>
<ul class="grid md:grid-cols-3 gap-2">
<li v-for="(world, i) in worlds.data" :key="i">
<UiCard
class="w-full transition-all"
:link="`/calendar/${world.id}`"
:class="{
'hover:bg-slate-50 dark:hover:bg-sky-950 dark:focus-within:outline-sky-900': !world.color,
'bg-red-100 dark:bg-red-950 border-red-200 hover:bg-red-50 dark:hover:bg-red-900 dark:border-red-900 dark:focus-within:outline-red-900': world.color === 'red',
'bg-orange-100 dark:bg-orange-950 border-orange-200 hover:bg-orange-50 dark:hover:bg-orange-900 dark:border-orange-900 dark:focus-within:outline-orange-900': world.color === 'orange',
'bg-amber-100 dark:bg-amber-950 border-amber-200 hover:bg-amber-50 dark:hover:bg-amber-900 dark:border-amber-900 dark:focus-within:outline-amber-900': world.color === 'amber',
'bg-yellow-100 dark:bg-yellow-950 border-yellow-200 hover:bg-yellow-50 dark:hover:bg-yellow-900 dark:border-yellow-900 dark:focus-within:outline-yellow-900': world.color === 'yellow',
'bg-lime-100 dark:bg-lime-950 border-lime-200 hover:bg-lime-50 dark:hover:bg-lime-900 dark:border-lime-900 dark:focus-within:outline-lime-900': world.color === 'lime',
' bg-green-100 dark:bg-green-950 border-green-200 hover:bg-green-50 dark:hover:bg-green-900 dark:border-green-900 dark:focus-within:outline-green-900': world.color === 'green',
'bg-emerald-100 dark:bg-emerald-950 border-emerald-200 hover:bg-emerald-50 dark:hover:bg-emerald-900 dark:border-emerald-900 dark:focus-within:outline-emerald-900': world.color === 'emerald',
'bg-teal-100 dark:bg-teal-950 border-teal-200 hover:bg-teal-50 dark:hover:bg-teal-900 dark:border-teal-900 dark:focus-within:outline-teal-900': world.color === 'teal',
'bg-cyan-100 dark:bg-cyan-950 border-cyan-200 hover:bg-cyan-50 dark:hover:bg-cyan-900 dark:border-cyan-900 dark:focus-within:outline-cyan-900': world.color === 'cyan',
'bg-sky-100 dark:bg-sky-950 border-sky-200 hover:bg-sky-50 dark:hover:bg-sky-900 dark:border-sky-900 dark:focus-within:outline-sky-900': world.color === 'sky',
'bg-blue-100 dark:bg-blue-950 border-blue-200 hover:bg-blue-50 dark:hover:bg-blue-900 dark:border-blue-900 dark:focus-within:outline-blue-900': world.color === 'blue',
'bg-indigo-100 dark:bg-indigo-950 border-indigo-200 hover:bg-indigo-50 dark:hover:bg-indigo-900 dark:border-indigo-900 dark:focus-within:outline-indigo-900': world.color === 'indigo',
'bg-violet-100 dark:bg-violet-950 border-violet-200 hover:bg-violet-50 dark:hover:bg-violet-900 dark:border-violet-900 dark:focus-within:outline-violet-900': world.color === 'violet',
'bg-purple-100 dark:bg-purple-950 border-purple-200 hover:bg-purple-50 dark:hover:bg-purple-900 dark:border-purple-900 dark:focus-within:outline-purple-900': world.color === 'purple',
'bg-fuchsia-100 dark:bg-fuchsia-950 border-fuchsia-200 hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 dark:border-fuchsia-900 dark:focus-within:outline-fuchsia-900': world.color === 'fuchsia',
'bg-pink-100 dark:bg-pink-950 border-pink-200 hover:bg-pink-50 dark:hover:bg-pink-900 dark:border-pink-900 dark:focus-within:outline-pink-900': world.color === 'pink',
'bg-pink-100 dark:bg-rose-950 border-rose-200 hover:bg-rose-50 dark:hover:bg-rose-900 dark:border-rose-900 dark:focus-within:outline-rose-900': world.color === 'rose',
'text-slate-100 bg-slate-900 border-slate-700 hover:bg-slate-700 dark:hover:bg-slate-800 dark:border-slate-900 dark:focus-within:outline-slate-900': world.color === 'black',
' hover:bg-slate-50 dark:hover:text-slate-900 dark:hover:bg-slate-300 dark:border-slate-500 dark:focus-within:outline-slate-100': world.color === 'white',
}"
>
<UiCardHeader>
<UiCardTitle>{{ world.name }}</UiCardTitle>
</UiCardHeader>
<UiCardContent>
<p class="italic">{{ world.description }}</p>
</UiCardContent>
</UiCard>
</li>
</ul>
</section>
</main>
</template>