116 lines
3.0 KiB
Vue
116 lines
3.0 KiB
Vue
<script lang="ts" setup>
|
|
import { type RPGDate } from '@/models/Date'
|
|
|
|
import { PhArrowLineLeft, PhArrowLineRight } from '@phosphor-icons/vue'
|
|
|
|
const { currentDate, currentConfig, jumpToDate, getRelativeEventFromDate } = useCalendar()
|
|
|
|
function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
|
|
let fromDate: RPGDate
|
|
|
|
// To modify, obviously
|
|
const daysPerMonth = 32
|
|
const monthsPerYear = 10
|
|
|
|
const toDay = position === 'next' ? daysPerMonth : 1
|
|
const toMonth = position === 'next' ? monthsPerYear : 0
|
|
|
|
switch (currentConfig.viewType) {
|
|
case 'month':
|
|
fromDate = {
|
|
day: toDay,
|
|
month: currentDate.currentMonth,
|
|
year: currentDate.currentYear
|
|
}
|
|
break
|
|
|
|
case 'year':
|
|
fromDate = {
|
|
day: toDay,
|
|
month: toMonth,
|
|
year: currentDate.currentYear
|
|
}
|
|
break
|
|
|
|
case 'decade':
|
|
fromDate = {
|
|
day: toDay,
|
|
month: currentDate.currentMonth,
|
|
year: currentDate.currentYear
|
|
}
|
|
break
|
|
|
|
case 'century':
|
|
default:
|
|
fromDate = {
|
|
day: toDay,
|
|
month: currentDate.currentMonth,
|
|
year: currentDate.currentYear
|
|
}
|
|
break
|
|
}
|
|
|
|
try {
|
|
const { targetDate } = getRelativeEventFromDate(fromDate, position)
|
|
|
|
jumpToDate(targetDate)
|
|
} catch (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex gap-2">
|
|
<div class="grid items-end w-40 px-4 py-2 border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm text-sm">
|
|
<ClientOnly>
|
|
<span>{{ currentDate.currentDateTitle }}</span>
|
|
|
|
<template #fallback>
|
|
<span class="inline-block">
|
|
<UiSkeleton class="h-[19px] w-full rounded-sm" />
|
|
</span>
|
|
</template>
|
|
</ClientOnly>
|
|
</div>
|
|
<div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
|
|
<UiTooltipProvider :delay-duration="250">
|
|
<UiTooltip>
|
|
<UiTooltipTrigger as-child>
|
|
<UiButton
|
|
variant="ghost"
|
|
size="icon"
|
|
class="rounded-t-sm rounded-b-none"
|
|
@click="handleGotoPreviousEventPage('prev')"
|
|
>
|
|
<PhArrowLineLeft size="22" />
|
|
</UiButton>
|
|
</UiTooltipTrigger>
|
|
<UiTooltipContent>
|
|
<p>Précédente page à évènements</p>
|
|
</UiTooltipContent>
|
|
</UiTooltip>
|
|
</UiTooltipProvider>
|
|
</div>
|
|
<div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
|
|
<UiTooltipProvider :delay-duration="250">
|
|
<UiTooltip>
|
|
<UiTooltipTrigger as-child>
|
|
<UiButton
|
|
variant="ghost"
|
|
size="icon"
|
|
class="rounded-t-sm rounded-b-none"
|
|
@click="handleGotoPreviousEventPage('next')"
|
|
>
|
|
<PhArrowLineRight size="22" />
|
|
</UiButton>
|
|
</UiTooltipTrigger>
|
|
<UiTooltipContent>
|
|
<p>Prochaine page à évènements</p>
|
|
</UiTooltipContent>
|
|
</UiTooltip>
|
|
</UiTooltipProvider>
|
|
</div>
|
|
</div>
|
|
</template>
|