122 lines
4.3 KiB
Vue
122 lines
4.3 KiB
Vue
<script lang="ts" setup>
|
|
import { cn } from "~/lib/utils"
|
|
import type { RPGDate } from "~/models/Date"
|
|
import type { CalendarEvent } from "~/models/CalendarEvent"
|
|
|
|
import { PhArrowSquareOut, PhHourglassMedium, PhAlarm, PhMapPinArea, PhEye } from "@phosphor-icons/vue"
|
|
|
|
const props = defineProps<{
|
|
event: CalendarEvent
|
|
}>()
|
|
|
|
defineEmits<{
|
|
(e: "query:date-jump", payload: RPGDate): void
|
|
}>()
|
|
|
|
const { getRelativeString, defaultDate, getFormattedDateTitle } = useCalendar()
|
|
|
|
const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
|
|
const dateDuration = computed<string | null>(() => props.event.endDate ? getRelativeString(props.event.startDate, props.event.endDate, "compact") : null)
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
class="event-callout group relative block w-full text-left py-2 px-3 md:py-3 md:px-4 cursor-pointer transition-colors"
|
|
:class="cn(
|
|
event.category ? `element-${event.category.color}` : '',
|
|
{
|
|
'pt-4 is-hidden': event.hidden,
|
|
})"
|
|
@click="$emit('query:date-jump', event.startDate)"
|
|
>
|
|
<div class="flex gap-2 items-center mb-1">
|
|
<h2 class="font-semibold md:font-bold md:text-lg underline-offset-4 group-hover:underline">
|
|
{{ event.title }}
|
|
</h2>
|
|
<div v-if="event.wiki">
|
|
<UiButton variant="link" size="xs" as-child class="text-inherit">
|
|
<a :href="event.wiki" target="_blank">
|
|
Wiki
|
|
<PhArrowSquareOut size="16" weight="fill" />
|
|
</a>
|
|
</UiButton>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-2 items-center justify-between mb-2 md:mb-1">
|
|
<template v-if="!event.endDate">
|
|
<p class="font-semibold text-sm opacity-75">
|
|
{{ getFormattedDateTitle(event.startDate, true) }}
|
|
</p>
|
|
</template>
|
|
<template v-else>
|
|
<p class="font-semibold text-sm opacity-75">
|
|
{{
|
|
$t('entity.calendar.date.fromTo',
|
|
{
|
|
startDate: getFormattedDateTitle(event.startDate, true),
|
|
endDate: getFormattedDateTitle(event.endDate, true)
|
|
}
|
|
)
|
|
}}
|
|
</p>
|
|
</template>
|
|
<div v-if="event.hidden" class="flex justify-end">
|
|
<UiTooltipProvider :delay-duration="250">
|
|
<UiTooltip>
|
|
<UiTooltipTrigger as-child>
|
|
<UiBadge class="flex gap-1">
|
|
<PhEye size="16" weight="fill" /> {{ $t('entity.calendar.event.isHidden') }}
|
|
</UiBadge>
|
|
</UiTooltipTrigger>
|
|
<UiTooltipContent>
|
|
<p>
|
|
{{ $t('entity.calendar.event.hiddenTooltip') }}
|
|
</p>
|
|
</UiTooltipContent>
|
|
</UiTooltip>
|
|
</UiTooltipProvider>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-1 flex gap-x-2 items-center">
|
|
<template v-if="event.location">
|
|
<p class="w-fit text-xs md:text-sm italic opacity-75 flex items-center gap-1">
|
|
<PhMapPinArea size="16" weight="fill" /> {{ event.location }}
|
|
</p>
|
|
</template>
|
|
<p class="w-fit text-xs md:text-sm italic opacity-75 flex items-center gap-1">
|
|
<PhAlarm size="16" weight="fill" /> {{ dateDifference }}
|
|
</p>
|
|
<template v-if="dateDuration">
|
|
<p class="w-fit text-xs md:text-sm italic opacity-75 flex items-center gap-1">
|
|
<PhHourglassMedium size="16" weight="fill" /> {{ $t('entity.calendar.date.while', { duration: dateDuration } )}}
|
|
</p>
|
|
</template>
|
|
</div>
|
|
|
|
<div v-if="event.category || event.secondaryCategories" class="absolute top-3 right-4">
|
|
<ul class="flex gap-1">
|
|
<li v-if="event.category">
|
|
<UiBadge class="mix-blend-luminosity font-bold bg-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600 lowercase" variant="secondary">
|
|
{{ event.category?.name }}
|
|
</UiBadge>
|
|
</li>
|
|
|
|
<li v-for="cat in event.secondaryCategories" :key="cat.id">
|
|
<UiBadge class="mix-blend-luminosity bg-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600 lowercase" variant="secondary">
|
|
{{ cat.name }}
|
|
</UiBadge>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div v-if="event.description" class="text-xs md:text-sm">
|
|
<hr class="my-3 md:my-2 border-white opacity-50" >
|
|
<span class="opacity-75">
|
|
{{ event.description }}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</template>
|