Migration to nuxt 4
Used codemods CLI and reworked most alias'd path that stopped working
This commit is contained in:
Alexis
225
app/components/calendar/event/Details.vue
Normal file
225
app/components/calendar/event/Details.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<script lang="ts" setup>
|
||||
import { cn } from "@/lib/utils"
|
||||
import type { RPGDate } from "@@/models/Date"
|
||||
import type { CalendarEvent } from "@@/models/CalendarEvent"
|
||||
import { useCalendar } from "@/stores/CalendarStore"
|
||||
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
|
||||
|
||||
import {
|
||||
PhHourglassMedium,
|
||||
PhAlarm,
|
||||
PhHourglassHigh,
|
||||
PhHourglassLow,
|
||||
PhMapPinArea,
|
||||
PhDotsThreeOutlineVertical,
|
||||
PhEye
|
||||
} from "@phosphor-icons/vue"
|
||||
import type { CollisionPadding } from "@@/models/Popover"
|
||||
|
||||
const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString, revealEditEventModal, revealDeleteEventModal } = useCalendar()
|
||||
const { lastActiveEvent, isReadOnly } = storeToRefs(useCalendar())
|
||||
|
||||
const props = defineProps<{
|
||||
event: CalendarEvent
|
||||
spansMultipleDays: boolean
|
||||
isStartEvent?: boolean
|
||||
isEndEvent?: boolean
|
||||
}>()
|
||||
|
||||
const breakpoints = useBreakpoints(
|
||||
breakpointsTailwind
|
||||
)
|
||||
const collisionPadLg: CollisionPadding = {
|
||||
top: 50,
|
||||
bottom: 50,
|
||||
left: 50,
|
||||
right: 50,
|
||||
}
|
||||
const collisionPad: CollisionPadding = {
|
||||
top: 80,
|
||||
bottom: 80,
|
||||
left: 12.5,
|
||||
right: 12.5,
|
||||
}
|
||||
|
||||
// Ref for the popover
|
||||
const eventDetails = ref<HTMLElement>()
|
||||
|
||||
const emit = defineEmits(["query:close-popover"])
|
||||
|
||||
const dateDifference = computed<string>(() => getRelativeString(defaultDate, props.event.startDate))
|
||||
const dateDuration = computed<string | null>(() => props.event.endDate ? getRelativeString(props.event.startDate, props.event.endDate, "compact") : null)
|
||||
|
||||
function handleJumpToDate(date: RPGDate) {
|
||||
jumpToDate(date)
|
||||
emit("query:close-popover")
|
||||
}
|
||||
|
||||
/**
|
||||
* Edit event
|
||||
*/
|
||||
const commandMenuOpened = ref(false)
|
||||
|
||||
function deployEditModal() {
|
||||
lastActiveEvent.value = structuredClone(toRaw(props.event))
|
||||
revealEditEventModal()
|
||||
commandMenuOpened.value = false
|
||||
emit("query:close-popover")
|
||||
}
|
||||
|
||||
/**
|
||||
* Confirm event deletion
|
||||
*/
|
||||
function deployDeleteModal() {
|
||||
lastActiveEvent.value = structuredClone(toRaw(props.event))
|
||||
revealDeleteEventModal()
|
||||
commandMenuOpened.value = false
|
||||
emit("query:close-popover")
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UiPopoverContent
|
||||
class="max-w-full w-96 event-popover"
|
||||
:align="'center'"
|
||||
:align-offset="breakpoints.lg.value ? 50 : 25"
|
||||
:side-offset="8"
|
||||
:side="breakpoints.lg.value ? 'left' : 'top'"
|
||||
:collision-padding="breakpoints.lg.value ? collisionPadLg : collisionPad"
|
||||
:class="cn(
|
||||
event.category ? `element-${event.category.color}` : '',
|
||||
)"
|
||||
@focus-outside.prevent
|
||||
>
|
||||
<div ref="eventDetails" class="grid gap-1">
|
||||
<header class="pr-12">
|
||||
<div class="mb-2 max-h-24 overflow-y-auto text-lg font-semibold">
|
||||
{{ event.title }}
|
||||
</div>
|
||||
|
||||
<div class="mb-1">
|
||||
<template v-if="!event.endDate">
|
||||
<p class="font-semibold">{{ getFormattedDateTitle(event.startDate, true) }}</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p class="font-semibold">
|
||||
{{
|
||||
$t('entity.calendar.date.fromTo',
|
||||
{
|
||||
startDate: getFormattedDateTitle(event.startDate, true),
|
||||
endDate: getFormattedDateTitle(event.endDate, true)
|
||||
}
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="mb-1 space-y-1">
|
||||
<template v-if="event.location">
|
||||
<div class="text-sm italic dark:opacity-75 flex items-center gap-1">
|
||||
<div>
|
||||
<PhMapPinArea size="16" weight="fill" />
|
||||
</div>
|
||||
<p class="max-h-12 overflow-y-auto">{{ event.location }}</p>
|
||||
</div>
|
||||
</template>
|
||||
<div class="text-sm italic dark:opacity-75 flex items-center gap-1">
|
||||
<div>
|
||||
<PhAlarm size="16" weight="fill" />
|
||||
</div>
|
||||
<p>{{ dateDifference }}</p>
|
||||
</div>
|
||||
<template v-if="dateDuration">
|
||||
<div class="text-sm italic dark:opacity-75 flex items-center gap-1">
|
||||
<div>
|
||||
<PhHourglassMedium size="16" weight="fill" />
|
||||
</div>
|
||||
<p>{{ $t('entity.calendar.date.while', { duration: dateDuration } )}}</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<template v-if="event.category || event.secondaryCategories">
|
||||
<ul class="flex gap-1">
|
||||
<li v-if="event.category">
|
||||
<UiBadge class="mix-blend-luminosity font-bold bg-gray-400 hover:bg-gray-300 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>
|
||||
</template>
|
||||
|
||||
<template v-if="event.description">
|
||||
<hr class="border-border mt-2" >
|
||||
|
||||
<div class="max-h-48 overflow-y-auto mt-2 text-sm text-slate-600 dark:text-slate-300">
|
||||
{{ event.description }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<menu v-if="!isReadOnly" class="absolute top-4 right-4" :class="cn({ 'top-6': event.hidden })">
|
||||
<UiPopover v-model:open="commandMenuOpened">
|
||||
<UiPopoverTrigger as-child>
|
||||
<UiButton size="icon" variant="outline" class="mix-blend-luminosity bg-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600">
|
||||
<PhDotsThreeOutlineVertical size="20" weight="fill" />
|
||||
</UiButton>
|
||||
</UiPopoverTrigger>
|
||||
<UiPopoverContent class="w-fit p-0" align="start" side="right" :collision-padding="20" >
|
||||
<UiCommand>
|
||||
<UiCommandList>
|
||||
<UiCommandGroup>
|
||||
<UiCommandItem value="edit-event" @select="deployEditModal"> {{ $t('ui.action.edit') }} </UiCommandItem>
|
||||
<UiCommandItem value="delete-event" @select="deployDeleteModal"> {{ $t('ui.action.delete') }} </UiCommandItem>
|
||||
</UiCommandGroup>
|
||||
</UiCommandList>
|
||||
</UiCommand>
|
||||
</UiPopoverContent>
|
||||
</UiPopover>
|
||||
</menu>
|
||||
|
||||
<nav v-if="event.startDate && event.endDate" class="mt-2 flex gap-2">
|
||||
<UiBadge class="hover:bg-indigo-400 dark:hover:bg-slate-300" as-child>
|
||||
<button
|
||||
class="flex gap-1"
|
||||
title="Naviguer au début"
|
||||
@click="handleJumpToDate(event.startDate!)"
|
||||
>
|
||||
<PhHourglassHigh size="16" weight="fill" /> {{ $t('entity.calendar.event.isStart') }}
|
||||
</button>
|
||||
</UiBadge>
|
||||
<UiBadge class="hover:bg-indigo-400 dark:hover:bg-slate-300" as-child title="Naviguer à la fin">
|
||||
<button
|
||||
class="flex gap-1"
|
||||
title="Naviguer à la fin"
|
||||
@click="handleJumpToDate(event.endDate!)"
|
||||
>
|
||||
<PhHourglassLow size="16" weight="fill" /> {{ $t('entity.calendar.event.isEnd') }}
|
||||
</button>
|
||||
</UiBadge>
|
||||
</nav>
|
||||
|
||||
<UiTooltipProvider v-if="event.hidden" :delay-duration="250">
|
||||
<UiTooltip>
|
||||
<UiTooltipTrigger as-child>
|
||||
<UiBadge class="absolute -top-2 right-2 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>
|
||||
</UiPopoverContent>
|
||||
</template>
|
||||
86
app/components/calendar/event/Event.vue
Normal file
86
app/components/calendar/event/Event.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<script lang="ts" setup>
|
||||
import { cn } from "@/lib/utils"
|
||||
import type { RPGDate } from "@@/models/Date"
|
||||
import type { CalendarEvent } from "@@/models/CalendarEvent"
|
||||
|
||||
const props = defineProps<{
|
||||
event: CalendarEvent
|
||||
tileDate: RPGDate
|
||||
}>()
|
||||
|
||||
const { areDatesIdentical, revealEditEventModal, revealDeleteEventModal } = useCalendar()
|
||||
const { lastActiveEvent } = storeToRefs(useCalendar())
|
||||
|
||||
const spansMultipleDays = computed(() => Boolean(props.event.startDate && props.event.endDate))
|
||||
const isStartEvent = computed(() => spansMultipleDays.value && areDatesIdentical(props.tileDate, props.event.startDate))
|
||||
const isEndEvent = computed(() => spansMultipleDays.value && props.event.endDate && areDatesIdentical(props.tileDate, props.event.endDate))
|
||||
|
||||
const titleCharLimit = 50;
|
||||
const eventTitle = computed<string>(() => props.event.title.length <= titleCharLimit ? props.event.title : `${props.event.title.slice(0, titleCharLimit)}…`)
|
||||
|
||||
// Popover code
|
||||
const isPopoverDetailsOpen = ref<boolean>(false)
|
||||
|
||||
function handleDoubleClick() {
|
||||
isPopoverDetailsOpen.value = false
|
||||
lastActiveEvent.value = structuredClone(toRaw(props.event))
|
||||
revealEditEventModal()
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
isPopoverDetailsOpen.value = false
|
||||
lastActiveEvent.value = structuredClone(toRaw(props.event))
|
||||
revealDeleteEventModal()
|
||||
}
|
||||
|
||||
function handleClosePopover() {
|
||||
isPopoverDetailsOpen.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// Listen for keydown events
|
||||
window.addEventListener("keydown", (e: KeyboardEvent) => {
|
||||
// If the popover isn't opened, this is not the event we're trying to delete, so return
|
||||
if (!isPopoverDetailsOpen.value) return
|
||||
|
||||
// If the key isn't the delete one, return
|
||||
if (e.key !== "Delete") return
|
||||
|
||||
handleDelete()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UiPopover v-model:open="isPopoverDetailsOpen">
|
||||
<UiPopoverTrigger as-child>
|
||||
<button
|
||||
class="event-button text-2xs md:text-xs px-[5px] py-[5px] md:px-2 md:py-1 block w-full text-left rounded-sm transition-colors outline-offset-1 cursor-pointer"
|
||||
:class="
|
||||
cn(
|
||||
`element-${event.category?.color}`,
|
||||
{
|
||||
'is-hidden': event.hidden,
|
||||
'rounded-r-none': isStartEvent,
|
||||
'rounded-l-none': isEndEvent,
|
||||
}
|
||||
)
|
||||
"
|
||||
@dblclick="handleDoubleClick"
|
||||
@keydown.delete="handleDelete"
|
||||
>
|
||||
<div class="line-clamp-2 [overflow-wrap:anywhere] hyphens-auto">
|
||||
{{ eventTitle }}
|
||||
</div>
|
||||
</button>
|
||||
</UiPopoverTrigger>
|
||||
|
||||
<CalendarEventDetails
|
||||
:event
|
||||
:spans-multiple-days
|
||||
:is-start-event
|
||||
:is-end-event
|
||||
@query:close-popover="handleClosePopover"
|
||||
/>
|
||||
</UiPopover>
|
||||
</template>
|
||||
Reference in New Issue
Block a user