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

Added update logic for single day events

Browse Source
This commit is contained in:
Alexis
2025-08-09 16:24:59 +02:00
parent 5a421cf07f
commit 7468374bb5
3 changed files with 110 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/components/calendar/event/Event.vue
View File

@@ -2,14 +2,17 @@
import { cn } from "@/lib/utils"
import type { RPGDate } from "@@/models/Date"
import type { CalendarEvent } from "@@/models/CalendarEvent"
import { ja } from "zod/v4/locales";
const props = defineProps<{
event: CalendarEvent
tileDate: RPGDate
}>()
const { areDatesIdentical, revealEditEventModal, revealDeleteEventModal } = useCalendar()
const { lastActiveEvent } = storeToRefs(useCalendar())
const buttonRef = useTemplateRef<HTMLButtonElement>('buttonRef')
const { areDatesIdentical, revealEditEventModal, revealDeleteEventModal, resetSkeleton } = useCalendar()
const { lastActiveEvent, eventSkeleton, isDraggingEvent } = storeToRefs(useCalendar())
const spansMultipleDays = computed(() => Boolean(props.event.startDate && props.event.endDate))
const isStartEvent = computed(() => spansMultipleDays.value && areDatesIdentical(props.tileDate, props.event.startDate))
@@ -49,13 +52,29 @@ onMounted(() => {
handleDelete()
})
})
// Draggable logic
const isTileDragging = shallowRef(false)
function handleDragStart() {
isTileDragging.value = true
isDraggingEvent.value = true
eventSkeleton.value = structuredClone(toRaw(props.event))
handleClosePopover()
}
function handleDragEnd() {
isTileDragging.value = false
isDraggingEvent.value = false
}
</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"
ref="buttonRef"
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-opacity outline-offset-1 cursor-pointer"
:draggable="event.endDate ? 'false' : 'true'"
:class="
cn(
`element-${event.category?.color}`,
@@ -63,11 +82,17 @@ onMounted(() => {
'is-hidden': event.hidden,
'rounded-r-none': isStartEvent,
'rounded-l-none': isEndEvent,
},
{
'opacity-60': isTileDragging,
'opacity-100': !isTileDragging
}
)
"
@dblclick="handleDoubleClick"
@keydown.delete="handleDelete"
@dragstart="handleDragStart"
@dragend="handleDragEnd"
>
<div class="line-clamp-2 [overflow-wrap:anywhere] hyphens-auto">
{{ eventTitle }}

84
app/components/calendar/state/monthly/DayTile.vue
View File

@@ -6,6 +6,9 @@ import { storeToRefs } from "pinia"
import { computed, ref, type ComputedRef } from "vue"
import CalendarEventButton from "../../event/Event.vue"
import { useToast } from "@/components/ui/toast"
import type { APIError } from "@@/models/Errors"
import { ToastLifetime } from "@/components/ui/toast/use-toast"
const props = defineProps<{
date: RPGDate
@@ -16,11 +19,14 @@ const emit = defineEmits<{
"on-open-create-dialog": [date: RPGDate]
}>()
const { toast } = useToast()
const { t } = useI18n()
const calendarTile = ref()
const calendarEventsList = ref()
const { defaultDate, selectDate, areDatesIdentical, getFormattedDateTitle } = useCalendar()
const { selectedDate, currentEvents, isReadOnly } = storeToRefs(useCalendar())
const { defaultDate, selectDate, areDatesIdentical, getFormattedDateTitle, updateEventFromSkeleton, resetSkeleton } = useCalendar()
const { selectedDate, currentEvents, isReadOnly, eventSkeleton, isDraggingEvent } = storeToRefs(useCalendar())
const breakpoints = useBreakpoints(
breakpointsTailwind
@@ -60,7 +66,13 @@ const { top: tileListTop } = useElementBounding(calendarEventsList)
const numberOfEventsToFit: ComputedRef<number> = computed(() => {
if (!eventsForTheDay.value.length) return 0
return Math.trunc((tileHeight.value - (tileListTop.value - tileTop.value)) / 40)
let offset = 0
if (isDraggingEvent.value && !tileNotHovered.value) {
offset = 1
}
return Math.trunc((tileHeight.value - (tileListTop.value - tileTop.value)) / 40) - offset
})
/**
@@ -76,16 +88,61 @@ const eventsToDisplay: ComputedRef<CalendarEvent[]> = computed<CalendarEvent[]>(
* Used if not all events can be seen in the tile's space
*/
const eventsNotDisplayed: ComputedRef<number> = computed<number>(() => eventsForTheDay.value.length - eventsToDisplay.value.length)
// Handle drop events
const { isOutside: tileNotHovered } = useMouseInElement(calendarTile)
const isLoading = ref(false)
async function handleTileDrop() {
if (isLoading.value) return
isLoading.value = true
eventSkeleton.value.startDate = props.date
const { error } = await tryCatch(updateEventFromSkeleton())
if (error) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const apiError = (error as any).data as APIError
apiError.data.errors.forEach((error) => {
toast({
title: t("entity.calendar.event.editErrors.toastTitle"),
variant: "destructive",
description: t(`entity.calendar.event.editErrors.${error.path[1]}_${error.code}`),
duration: ToastLifetime.MEDIUM,
})
})
isLoading.value = false
return
}
console.log(eventSkeleton.value)
toast({
title: t("entity.calendar.event.updatedToast.title", { event: eventSkeleton.value.title }),
variant: "success",
duration: ToastLifetime.SHORT
})
isLoading.value = false
resetSkeleton()
}
</script>
<template>
<div
ref="calendarTile"
class="tile relative p-1 md:p-2 transition-all"
class="tile relative p-1 md:p-2 md:pt-1 transition-all"
:class="{
'text-slate-300 dark:text-slate-500': props.faded,
'text-slate-500 dark:text-slate-300': !props.faded
}"
@drop.prevent="handleTileDrop"
@dragenter.prevent
@dragover.prevent
>
<button
class="relative z-10 group block w-full text-2xs md:text-xs text-center cursor-pointer"
@@ -107,13 +164,25 @@ const eventsNotDisplayed: ComputedRef<number> = computed<number>(() => eventsFo
<ClientOnly>
<ul
ref="calendarEventsList"
class="absolute top-9 md:top-12 bottom-1 md:bottom-2 inset-x-2 grid auto-rows-min gap-1 z-10 pointer-events-none transition-opacity"
class="absolute top-8 md:top-10 bottom-1 md:bottom-2 inset-x-2 grid auto-rows-min gap-1 z-10 pointer-events-none transition-opacity"
:class="{
'opacity-40': props.faded && !isSelectedDate
}"
>
<TransitionGroup name="event">
<li v-for="event in eventsToDisplay" :key="event.id" class="grid w-full pointer-events-auto">
<li
v-if="!tileNotHovered && isDraggingEvent && !(eventsForTheDay.find((e) => e.id === eventSkeleton.id))"
:key="eventSkeleton.id"
class="opacity-60"
>
<CalendarEventButton :event="eventSkeleton" :tile-date="date" />
</li>
<TransitionGroup :name="!isDraggingEvent ? 'event' : ''">
<li
v-for="(event, i) in eventsToDisplay"
:key="event.id"
class="grid w-full pointer-events-auto"
>
<CalendarEventButton :event :tile-date="date" />
</li>
</TransitionGroup>
@@ -158,6 +227,7 @@ const eventsNotDisplayed: ComputedRef<number> = computed<number>(() => eventsFo
<ClientOnly>
<LazyCalendarDialogCreateEvent v-if="!isReadOnly && breakpoints.lg.value" :date btn-class="absolute inset-0 w-full h-full cursor-default z-0" />
<button
v-else-if="!isReadOnly && !breakpoints.lg.value"
class="absolute inset-0 w-full h-full cursor-default z-0"

8
app/stores/CalendarStore.ts
View File

@@ -130,7 +130,7 @@ export const useCalendar = defineStore("calendar", () => {
return Number(params.month)
})
const currentMonthData = computed<CalendarMonth>(() => {
return sortedMonths.value[currentMonth.value]
return sortedMonths.value[currentMonth.value]!
})
// Gets the label from currentMonth index
const currentMonthName = computed<string>(() => getMonthName(currentMonth.value))
@@ -605,7 +605,7 @@ export const useCalendar = defineStore("calendar", () => {
// Else, we need to accelerate and decelerate
else {
// First, get all the remaining days in the current month
const currentMonth = sortedMonths.value[datePivot.month]
const currentMonth = sortedMonths.value[datePivot.month]!
dateAcc.day = currentMonth.days - datePivot.day
if (direction === "future") {
datePivot.month = getNextViewMonth(datePivot.month)
@@ -756,7 +756,7 @@ export const useCalendar = defineStore("calendar", () => {
// Loop over all event once to convert the structure to a usable one
for (let i = 0; i < allEvents.value.length; i++) {
const e: CalendarEvent = allEvents.value[i]
const e: CalendarEvent = allEvents.value[i]!
// Estimate distance from pivot
const startDateDays: number = convertDateToDays(e.startDate)
@@ -830,6 +830,7 @@ export const useCalendar = defineStore("calendar", () => {
const isCreatingEvent = ref<boolean>(false)
const isUpdatingEvent = ref<boolean>(false)
const isDeletingEvent = ref<boolean>(false)
const isDraggingEvent = ref<boolean>(false)
const operationInProgress = computed<boolean>(() => isCreatingEvent.value || isUpdatingEvent.value || isDeletingEvent.value)
let abortController: AbortController | null = null
@@ -984,6 +985,7 @@ export const useCalendar = defineStore("calendar", () => {
isCreatingEvent,
isUpdatingEvent,
isDeletingEvent,
isDraggingEvent,
operationInProgress,
eventSkeleton,
resetSkeleton,