✨(front) add Scheduler utilities and hooks
Add date formatting utilities and custom hooks for Scheduler initialization and event handlers including drag-drop, resize and click operations. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Nathan Panchout
@@ -0,0 +1,499 @@
|
|||||||
|
/**
|
||||||
|
* useSchedulerHandlers hook.
|
||||||
|
* Provides all event handlers for the Scheduler component.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useCallback, MutableRefObject } from "react";
|
||||||
|
import { IcsEvent } from "ts-ics";
|
||||||
|
|
||||||
|
import { useAuth } from "@/features/auth/Auth";
|
||||||
|
import type {
|
||||||
|
EventCalendarEvent,
|
||||||
|
EventCalendarSelectInfo,
|
||||||
|
EventCalendarEventClickInfo,
|
||||||
|
EventCalendarEventDropInfo,
|
||||||
|
EventCalendarEventResizeInfo,
|
||||||
|
EventCalendarDateClickInfo,
|
||||||
|
} from "../../../services/dav/types/event-calendar";
|
||||||
|
import type { EventCalendarAdapter, CalDavExtendedProps } from "../../../services/dav/EventCalendarAdapter";
|
||||||
|
import type { CalDavService } from "../../../services/dav/CalDavService";
|
||||||
|
import type { CalDavCalendar } from "../../../services/dav/types/caldav-service";
|
||||||
|
import type { EventModalState, RecurringDeleteOption } from "../types";
|
||||||
|
|
||||||
|
// Get browser timezone
|
||||||
|
const BROWSER_TIMEZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
||||||
|
|
||||||
|
type ECEvent = EventCalendarEvent;
|
||||||
|
|
||||||
|
// Calendar API interface (subset of what we need from the calendar instance)
|
||||||
|
interface CalendarApi {
|
||||||
|
updateEvent: (event: ECEvent) => void;
|
||||||
|
addEvent: (event: ECEvent) => void;
|
||||||
|
unselect: () => void;
|
||||||
|
refetchEvents: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UseSchedulerHandlersProps {
|
||||||
|
adapter: EventCalendarAdapter;
|
||||||
|
caldavService: CalDavService;
|
||||||
|
davCalendarsRef: MutableRefObject<CalDavCalendar[]>;
|
||||||
|
calendarRef: MutableRefObject<CalendarApi | null>;
|
||||||
|
calendarUrl: string;
|
||||||
|
modalState: EventModalState;
|
||||||
|
setModalState: React.Dispatch<React.SetStateAction<EventModalState>>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useSchedulerHandlers = ({
|
||||||
|
adapter,
|
||||||
|
caldavService,
|
||||||
|
davCalendarsRef,
|
||||||
|
calendarRef,
|
||||||
|
calendarUrl,
|
||||||
|
modalState,
|
||||||
|
setModalState,
|
||||||
|
}: UseSchedulerHandlersProps) => {
|
||||||
|
const { user } = useAuth();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle event drop (drag & drop to new time/date).
|
||||||
|
* Uses adapter to correctly convert dates with timezone.
|
||||||
|
*/
|
||||||
|
const handleEventDrop = useCallback(
|
||||||
|
async (info: EventCalendarEventDropInfo) => {
|
||||||
|
const extProps = info.event.extendedProps as CalDavExtendedProps;
|
||||||
|
|
||||||
|
if (!extProps?.eventUrl) {
|
||||||
|
console.error("No eventUrl in extendedProps, cannot update");
|
||||||
|
info.revert();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('[EventDrop] Event:', info.event);
|
||||||
|
console.log('[EventDrop] allDay:', info.event.allDay);
|
||||||
|
console.log('[EventDrop] start:', info.event.start);
|
||||||
|
console.log('[EventDrop] end:', info.event.end);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const icsEvent = adapter.toIcsEvent(info.event as EventCalendarEvent, {
|
||||||
|
defaultTimezone: extProps.timezone || BROWSER_TIMEZONE,
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('[EventDrop] IcsEvent start:', icsEvent.start);
|
||||||
|
console.log('[EventDrop] IcsEvent end:', icsEvent.end);
|
||||||
|
|
||||||
|
const result = await caldavService.updateEvent({
|
||||||
|
eventUrl: extProps.eventUrl,
|
||||||
|
event: icsEvent,
|
||||||
|
etag: extProps.etag,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!result.success) {
|
||||||
|
console.error("Failed to update event:", result.error);
|
||||||
|
info.revert();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update etag for next update
|
||||||
|
if (result.data?.etag && calendarRef.current) {
|
||||||
|
const updatedEvent = {
|
||||||
|
...info.event,
|
||||||
|
extendedProps: { ...extProps, etag: result.data.etag },
|
||||||
|
};
|
||||||
|
calendarRef.current.updateEvent(updatedEvent as ECEvent);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error updating event:", error);
|
||||||
|
info.revert();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[adapter, caldavService, calendarRef]
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle event resize (change duration).
|
||||||
|
*/
|
||||||
|
const handleEventResize = useCallback(
|
||||||
|
async (info: EventCalendarEventResizeInfo) => {
|
||||||
|
const extProps = info.event.extendedProps as CalDavExtendedProps;
|
||||||
|
|
||||||
|
if (!extProps?.eventUrl) {
|
||||||
|
console.error("No eventUrl in extendedProps, cannot update");
|
||||||
|
info.revert();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const icsEvent = adapter.toIcsEvent(info.event as EventCalendarEvent, {
|
||||||
|
defaultTimezone: extProps.timezone || BROWSER_TIMEZONE,
|
||||||
|
});
|
||||||
|
|
||||||
|
const result = await caldavService.updateEvent({
|
||||||
|
eventUrl: extProps.eventUrl,
|
||||||
|
event: icsEvent,
|
||||||
|
etag: extProps.etag,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!result.success) {
|
||||||
|
console.error("Failed to resize event:", result.error);
|
||||||
|
info.revert();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update etag
|
||||||
|
if (result.data?.etag && calendarRef.current) {
|
||||||
|
const updatedEvent = {
|
||||||
|
...info.event,
|
||||||
|
extendedProps: {
|
||||||
|
...extProps,
|
||||||
|
etag: result.data.etag,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
calendarRef.current.updateEvent(updatedEvent as ECEvent);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error resizing event:", error);
|
||||||
|
info.revert();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[adapter, caldavService, calendarRef]
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle event click - open edit modal.
|
||||||
|
*/
|
||||||
|
const handleEventClick = useCallback(
|
||||||
|
(info: EventCalendarEventClickInfo) => {
|
||||||
|
const extProps = info.event.extendedProps as CalDavExtendedProps;
|
||||||
|
|
||||||
|
// Convert EventCalendar event back to IcsEvent for editing
|
||||||
|
const icsEvent = adapter.toIcsEvent(info.event as EventCalendarEvent, {
|
||||||
|
defaultTimezone: extProps?.timezone || BROWSER_TIMEZONE,
|
||||||
|
});
|
||||||
|
|
||||||
|
setModalState({
|
||||||
|
isOpen: true,
|
||||||
|
mode: "edit",
|
||||||
|
event: icsEvent,
|
||||||
|
calendarUrl: extProps?.calendarUrl || calendarUrl,
|
||||||
|
eventUrl: extProps?.eventUrl,
|
||||||
|
etag: extProps?.etag,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[adapter, calendarUrl, setModalState]
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle date click - open create modal for single time slot.
|
||||||
|
*/
|
||||||
|
const handleDateClick = useCallback(
|
||||||
|
(info: EventCalendarDateClickInfo) => {
|
||||||
|
const start = info.date;
|
||||||
|
const end = new Date(start.getTime() + 60 * 60 * 1000); // 1 hour default
|
||||||
|
|
||||||
|
const newEvent: Partial<IcsEvent> = {
|
||||||
|
uid: crypto.randomUUID(),
|
||||||
|
stamp: { date: new Date() },
|
||||||
|
start: {
|
||||||
|
date: start,
|
||||||
|
type: info.allDay ? "DATE" : "DATE-TIME",
|
||||||
|
// Don't set 'local' here - the date is already in browser local time
|
||||||
|
// Setting 'local' would make EventModal think it's "fake UTC"
|
||||||
|
},
|
||||||
|
end: {
|
||||||
|
date: end,
|
||||||
|
type: info.allDay ? "DATE" : "DATE-TIME",
|
||||||
|
// Don't set 'local' here - the date is already in browser local time
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
setModalState({
|
||||||
|
isOpen: true,
|
||||||
|
mode: "create",
|
||||||
|
event: newEvent,
|
||||||
|
calendarUrl: calendarUrl,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[calendarUrl, setModalState]
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle select - open create modal for selected time range.
|
||||||
|
*/
|
||||||
|
const handleSelect = useCallback(
|
||||||
|
(info: EventCalendarSelectInfo) => {
|
||||||
|
const newEvent: Partial<IcsEvent> = {
|
||||||
|
uid: crypto.randomUUID(),
|
||||||
|
stamp: { date: new Date() },
|
||||||
|
start: {
|
||||||
|
date: info.start,
|
||||||
|
type: info.allDay ? "DATE" : "DATE-TIME",
|
||||||
|
// Don't set 'local' here - the date is already in browser local time
|
||||||
|
},
|
||||||
|
end: {
|
||||||
|
date: info.end,
|
||||||
|
type: info.allDay ? "DATE" : "DATE-TIME",
|
||||||
|
// Don't set 'local' here - the date is already in browser local time
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
setModalState({
|
||||||
|
isOpen: true,
|
||||||
|
mode: "create",
|
||||||
|
event: newEvent,
|
||||||
|
calendarUrl: calendarUrl,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Clear the selection
|
||||||
|
calendarRef.current?.unselect();
|
||||||
|
},
|
||||||
|
[calendarUrl, calendarRef, setModalState]
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle modal save (create or update event).
|
||||||
|
*/
|
||||||
|
const handleModalSave = useCallback(
|
||||||
|
async (event: IcsEvent, targetCalendarUrl: string) => {
|
||||||
|
if (modalState.mode === "create") {
|
||||||
|
// Create new event
|
||||||
|
const result = await caldavService.createEvent({
|
||||||
|
calendarUrl: targetCalendarUrl,
|
||||||
|
event,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!result.success) {
|
||||||
|
throw new Error(result.error || "Failed to create event");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add to calendar UI
|
||||||
|
if (calendarRef.current && result.data) {
|
||||||
|
// For recurring events, refetch all events to ensure proper timezone conversion
|
||||||
|
if (event.recurrenceRule) {
|
||||||
|
calendarRef.current.refetchEvents();
|
||||||
|
} else {
|
||||||
|
// Non-recurring event, add normally
|
||||||
|
const calendarColors = adapter.createCalendarColorMap(
|
||||||
|
davCalendarsRef.current
|
||||||
|
);
|
||||||
|
const ecEvents = adapter.toEventCalendarEvents([result.data], {
|
||||||
|
calendarColors,
|
||||||
|
});
|
||||||
|
if (ecEvents.length > 0) {
|
||||||
|
calendarRef.current.addEvent(ecEvents[0] as ECEvent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Update existing event
|
||||||
|
if (!modalState.eventUrl) {
|
||||||
|
throw new Error("No event URL for update");
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await caldavService.updateEvent({
|
||||||
|
eventUrl: modalState.eventUrl,
|
||||||
|
event,
|
||||||
|
etag: modalState.etag,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!result.success) {
|
||||||
|
throw new Error(result.error || "Failed to update event");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update in calendar UI
|
||||||
|
if (calendarRef.current && result.data) {
|
||||||
|
// If this is a recurring event, refetch all events to update all instances
|
||||||
|
if (event.recurrenceRule) {
|
||||||
|
calendarRef.current.refetchEvents();
|
||||||
|
} else {
|
||||||
|
// Non-recurring event, update normally
|
||||||
|
const calendarColors = adapter.createCalendarColorMap(
|
||||||
|
davCalendarsRef.current
|
||||||
|
);
|
||||||
|
const ecEvents = adapter.toEventCalendarEvents([result.data], {
|
||||||
|
calendarColors,
|
||||||
|
});
|
||||||
|
if (ecEvents.length > 0) {
|
||||||
|
calendarRef.current.updateEvent(ecEvents[0] as ECEvent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[adapter, caldavService, calendarRef, davCalendarsRef, modalState]
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle modal delete.
|
||||||
|
*/
|
||||||
|
const handleModalDelete = useCallback(
|
||||||
|
async (
|
||||||
|
event: IcsEvent,
|
||||||
|
_targetCalendarUrl: string,
|
||||||
|
option?: RecurringDeleteOption
|
||||||
|
) => {
|
||||||
|
if (!modalState.eventUrl) {
|
||||||
|
throw new Error("No event URL for delete");
|
||||||
|
}
|
||||||
|
|
||||||
|
// If this is a recurring event and we have an option
|
||||||
|
if (event.recurrenceRule && option && option !== 'all') {
|
||||||
|
// Get the occurrence date
|
||||||
|
// Prefer recurrenceId if available (it identifies this specific occurrence)
|
||||||
|
// Otherwise fall back to start date
|
||||||
|
let occurrenceDate: Date;
|
||||||
|
if (event.recurrenceId?.value?.date) {
|
||||||
|
occurrenceDate = event.recurrenceId.value.date;
|
||||||
|
} else if (event.start.date instanceof Date) {
|
||||||
|
occurrenceDate = event.start.date;
|
||||||
|
} else {
|
||||||
|
occurrenceDate = new Date(event.start.date);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (option === 'this') {
|
||||||
|
// Option 1: Delete only this occurrence - Add EXDATE
|
||||||
|
const addExdateResult = await caldavService.addExdateToEvent(
|
||||||
|
modalState.eventUrl,
|
||||||
|
occurrenceDate,
|
||||||
|
modalState.etag
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!addExdateResult.success) {
|
||||||
|
throw new Error(addExdateResult.error || "Failed to add EXDATE");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Refetch events to update UI
|
||||||
|
if (calendarRef.current) {
|
||||||
|
calendarRef.current.refetchEvents();
|
||||||
|
}
|
||||||
|
} else if (option === 'future') {
|
||||||
|
// Option 2: Delete this and future occurrences - Modify UNTIL
|
||||||
|
const fetchResult = await caldavService.fetchEvent(modalState.eventUrl);
|
||||||
|
|
||||||
|
if (!fetchResult.success || !fetchResult.data) {
|
||||||
|
throw new Error("Failed to fetch source event");
|
||||||
|
}
|
||||||
|
|
||||||
|
const sourceIcsEvents = fetchResult.data.data.events ?? [];
|
||||||
|
const sourceEvent = sourceIcsEvents.find(
|
||||||
|
(e) => e.uid === event.uid && !e.recurrenceId
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!sourceEvent || !sourceEvent.recurrenceRule) {
|
||||||
|
throw new Error("Source event or recurrence rule not found");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set UNTIL to the day before this occurrence
|
||||||
|
const untilDate = new Date(occurrenceDate);
|
||||||
|
untilDate.setDate(untilDate.getDate() - 1);
|
||||||
|
untilDate.setHours(23, 59, 59, 999);
|
||||||
|
|
||||||
|
const updatedRecurrenceRule = {
|
||||||
|
...sourceEvent.recurrenceRule,
|
||||||
|
until: {
|
||||||
|
type: 'DATE-TIME' as const,
|
||||||
|
date: untilDate,
|
||||||
|
},
|
||||||
|
count: undefined, // Remove count if present
|
||||||
|
};
|
||||||
|
|
||||||
|
const updatedEvent: IcsEvent = {
|
||||||
|
...sourceEvent,
|
||||||
|
recurrenceRule: updatedRecurrenceRule,
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateResult = await caldavService.updateEvent({
|
||||||
|
eventUrl: modalState.eventUrl,
|
||||||
|
event: updatedEvent,
|
||||||
|
etag: modalState.etag,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!updateResult.success) {
|
||||||
|
throw new Error(updateResult.error || "Failed to update event");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Refetch events to update UI
|
||||||
|
if (calendarRef.current) {
|
||||||
|
calendarRef.current.refetchEvents();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Option 3: Delete all occurrences OR non-recurring event
|
||||||
|
const result = await caldavService.deleteEvent(modalState.eventUrl);
|
||||||
|
|
||||||
|
if (!result.success) {
|
||||||
|
throw new Error(result.error || "Failed to delete event");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Refetch events to update UI
|
||||||
|
if (calendarRef.current) {
|
||||||
|
calendarRef.current.refetchEvents();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[caldavService, modalState, calendarRef]
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle modal close.
|
||||||
|
*/
|
||||||
|
const handleModalClose = useCallback(() => {
|
||||||
|
setModalState((prev) => ({ ...prev, isOpen: false }));
|
||||||
|
}, [setModalState]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle respond to invitation.
|
||||||
|
*/
|
||||||
|
const handleRespondToInvitation = useCallback(
|
||||||
|
async (event: IcsEvent, status: 'ACCEPTED' | 'TENTATIVE' | 'DECLINED') => {
|
||||||
|
if (!user?.email) {
|
||||||
|
console.error('No user email available');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!modalState.eventUrl) {
|
||||||
|
console.error('No event URL available');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await caldavService.respondToMeeting(
|
||||||
|
modalState.eventUrl,
|
||||||
|
event,
|
||||||
|
user.email,
|
||||||
|
status,
|
||||||
|
modalState.etag
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!result.success) {
|
||||||
|
throw new Error(result.error || 'Failed to respond to invitation');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('✉️ Response sent successfully:', status);
|
||||||
|
|
||||||
|
// Refetch events to update the UI with the new status
|
||||||
|
if (calendarRef.current) {
|
||||||
|
calendarRef.current.refetchEvents();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close the modal
|
||||||
|
setModalState((prev) => ({ ...prev, isOpen: false }));
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error responding to invitation:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[caldavService, user, calendarRef, modalState.eventUrl, modalState.etag, setModalState]
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
handleEventDrop,
|
||||||
|
handleEventResize,
|
||||||
|
handleEventClick,
|
||||||
|
handleDateClick,
|
||||||
|
handleSelect,
|
||||||
|
handleModalSave,
|
||||||
|
handleModalDelete,
|
||||||
|
handleModalClose,
|
||||||
|
handleRespondToInvitation,
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -0,0 +1,358 @@
|
|||||||
|
/**
|
||||||
|
* useSchedulerInit hook.
|
||||||
|
* Handles calendar initialization and configuration.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useEffect, useRef, MutableRefObject } from "react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import {
|
||||||
|
createCalendar,
|
||||||
|
TimeGrid,
|
||||||
|
DayGrid,
|
||||||
|
List,
|
||||||
|
Interaction,
|
||||||
|
} from "@event-calendar/core";
|
||||||
|
|
||||||
|
import { useCalendarLocale } from "../../../hooks/useCalendarLocale";
|
||||||
|
import type { EventCalendarAdapter, CalDavExtendedProps } from "../../../services/dav/EventCalendarAdapter";
|
||||||
|
import type { CalDavService } from "../../../services/dav/CalDavService";
|
||||||
|
import type { CalDavCalendar } from "../../../services/dav/types/caldav-service";
|
||||||
|
import type { EventCalendarEvent, EventCalendarFetchInfo } from "../../../services/dav/types/event-calendar";
|
||||||
|
|
||||||
|
type ECEvent = EventCalendarEvent;
|
||||||
|
|
||||||
|
// Calendar API interface
|
||||||
|
interface CalendarApi {
|
||||||
|
updateEvent: (event: ECEvent) => void;
|
||||||
|
addEvent: (event: ECEvent) => void;
|
||||||
|
unselect: () => void;
|
||||||
|
refetchEvents: () => void;
|
||||||
|
$destroy?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UseSchedulerInitProps {
|
||||||
|
containerRef: MutableRefObject<HTMLDivElement | null>;
|
||||||
|
calendarRef: MutableRefObject<CalendarApi | null>;
|
||||||
|
isConnected: boolean;
|
||||||
|
calendarUrl: string;
|
||||||
|
caldavService: CalDavService;
|
||||||
|
adapter: EventCalendarAdapter;
|
||||||
|
visibleCalendarUrlsRef: MutableRefObject<Set<string>>;
|
||||||
|
davCalendarsRef: MutableRefObject<CalDavCalendar[]>;
|
||||||
|
setCurrentDate: (date: Date) => void;
|
||||||
|
handleEventClick: (info: unknown) => void;
|
||||||
|
handleEventDrop: (info: unknown) => void;
|
||||||
|
handleEventResize: (info: unknown) => void;
|
||||||
|
handleDateClick: (info: unknown) => void;
|
||||||
|
handleSelect: (info: unknown) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useSchedulerInit = ({
|
||||||
|
containerRef,
|
||||||
|
calendarRef,
|
||||||
|
isConnected,
|
||||||
|
calendarUrl,
|
||||||
|
caldavService,
|
||||||
|
adapter,
|
||||||
|
visibleCalendarUrlsRef,
|
||||||
|
davCalendarsRef,
|
||||||
|
setCurrentDate,
|
||||||
|
handleEventClick,
|
||||||
|
handleEventDrop,
|
||||||
|
handleEventResize,
|
||||||
|
handleDateClick,
|
||||||
|
handleSelect,
|
||||||
|
}: UseSchedulerInitProps) => {
|
||||||
|
const { t, i18n } = useTranslation();
|
||||||
|
const { calendarLocale, firstDayOfWeek, formatDayHeader } = useCalendarLocale();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!containerRef.current || calendarRef.current || !isConnected) return;
|
||||||
|
|
||||||
|
const ec = createCalendar(
|
||||||
|
containerRef.current,
|
||||||
|
[TimeGrid, DayGrid, List, Interaction],
|
||||||
|
{
|
||||||
|
// View configuration
|
||||||
|
view: "timeGridWeek",
|
||||||
|
headerToolbar: {
|
||||||
|
start: "prev,next today",
|
||||||
|
center: "title",
|
||||||
|
end: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
|
||||||
|
},
|
||||||
|
|
||||||
|
// Button text translations
|
||||||
|
buttonText: {
|
||||||
|
today: t('calendar.views.today'),
|
||||||
|
dayGridMonth: t('calendar.views.month'),
|
||||||
|
timeGridWeek: t('calendar.views.week'),
|
||||||
|
timeGridDay: t('calendar.views.day'),
|
||||||
|
listWeek: t('calendar.views.listWeek'),
|
||||||
|
},
|
||||||
|
|
||||||
|
// Locale & time settings
|
||||||
|
locale: calendarLocale,
|
||||||
|
firstDay: firstDayOfWeek,
|
||||||
|
slotDuration: "00:30",
|
||||||
|
scrollTime: "08:00",
|
||||||
|
displayEventEnd: true,
|
||||||
|
|
||||||
|
// Interactive features
|
||||||
|
editable: true,
|
||||||
|
selectable: true,
|
||||||
|
dragScroll: true,
|
||||||
|
eventStartEditable: true,
|
||||||
|
eventDurationEditable: true,
|
||||||
|
selectMinDistance: 5,
|
||||||
|
eventDragMinDistance: 5,
|
||||||
|
selectBackgroundColor: '#ffcdd2', // Light red color for selection
|
||||||
|
|
||||||
|
// Event handlers - ALL INTERACTIONS
|
||||||
|
// Cast handlers to bypass library type differences (DomEvent vs MouseEvent)
|
||||||
|
eventClick: handleEventClick as (info: unknown) => void,
|
||||||
|
eventDrop: handleEventDrop as (info: unknown) => void,
|
||||||
|
eventResize: handleEventResize as (info: unknown) => void,
|
||||||
|
dateClick: handleDateClick as (info: unknown) => void,
|
||||||
|
select: handleSelect as (info: unknown) => void,
|
||||||
|
|
||||||
|
// Sync current date with MiniCalendar when navigating
|
||||||
|
datesSet: (info: { start: Date; end: Date }) => {
|
||||||
|
// Use the middle of the visible range as the "current" date
|
||||||
|
const midTime = (info.start.getTime() + info.end.getTime()) / 2;
|
||||||
|
setCurrentDate(new Date(midTime));
|
||||||
|
},
|
||||||
|
|
||||||
|
// Event display
|
||||||
|
dayMaxEvents: true,
|
||||||
|
nowIndicator: true,
|
||||||
|
|
||||||
|
// Date formatting (locale-aware)
|
||||||
|
dayHeaderFormat: formatDayHeader,
|
||||||
|
|
||||||
|
eventFilter: (info: { event: ECEvent; view: unknown }) => {
|
||||||
|
// Filter events based on visible calendars using the ref
|
||||||
|
const extProps = info.event.extendedProps as CalDavExtendedProps | undefined;
|
||||||
|
const eventCalendarUrl = extProps?.calendarUrl;
|
||||||
|
if (!eventCalendarUrl) return true;
|
||||||
|
return visibleCalendarUrlsRef.current.has(eventCalendarUrl);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Event sources - fetch from ALL CalDAV calendars (filtering done by eventFilter)
|
||||||
|
eventSources: [
|
||||||
|
{
|
||||||
|
events: async (fetchInfo: EventCalendarFetchInfo) => {
|
||||||
|
const calendars = davCalendarsRef.current;
|
||||||
|
if (calendars.length === 0) return [];
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Fetch events from ALL calendars in parallel
|
||||||
|
const allEventsPromises = calendars.map(async (calendar) => {
|
||||||
|
// Fetch source events (with recurrence rules) without expansion
|
||||||
|
const sourceEventsResult = await caldavService.fetchEvents(
|
||||||
|
calendar.url,
|
||||||
|
{
|
||||||
|
timeRange: {
|
||||||
|
start: fetchInfo.start,
|
||||||
|
end: fetchInfo.end,
|
||||||
|
},
|
||||||
|
expand: false,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Fetch expanded instances
|
||||||
|
const expandedEventsResult = await caldavService.fetchEvents(
|
||||||
|
calendar.url,
|
||||||
|
{
|
||||||
|
timeRange: {
|
||||||
|
start: fetchInfo.start,
|
||||||
|
end: fetchInfo.end,
|
||||||
|
},
|
||||||
|
expand: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!expandedEventsResult.success || !expandedEventsResult.data) {
|
||||||
|
console.error(
|
||||||
|
`Failed to fetch events from ${calendar.url}:`,
|
||||||
|
expandedEventsResult.error
|
||||||
|
);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build a map of source recurrence rules by UID
|
||||||
|
const sourceRulesByUid = new Map<string, unknown>();
|
||||||
|
if (sourceEventsResult.success && sourceEventsResult.data) {
|
||||||
|
for (const sourceEvent of sourceEventsResult.data) {
|
||||||
|
const icsEvents = sourceEvent.data.events ?? [];
|
||||||
|
for (const icsEvent of icsEvents) {
|
||||||
|
if (icsEvent.recurrenceRule && !icsEvent.recurrenceId) {
|
||||||
|
sourceRulesByUid.set(icsEvent.uid, icsEvent.recurrenceRule);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Enrich expanded events with recurrence rules from sources
|
||||||
|
const enrichedExpandedData = expandedEventsResult.data.map(
|
||||||
|
(event) => {
|
||||||
|
const enrichedEvents = event.data.events?.map((icsEvent) => {
|
||||||
|
// If this is an instance without recurrenceRule, add it from source
|
||||||
|
if (icsEvent.recurrenceId && !icsEvent.recurrenceRule) {
|
||||||
|
const sourceRule = sourceRulesByUid.get(icsEvent.uid);
|
||||||
|
if (sourceRule) {
|
||||||
|
return { ...icsEvent, recurrenceRule: sourceRule };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return icsEvent;
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
...event,
|
||||||
|
data: {
|
||||||
|
...event.data,
|
||||||
|
events: enrichedEvents,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const calendarColors = adapter.createCalendarColorMap(calendars);
|
||||||
|
// Type assertion needed due to the enrichment process
|
||||||
|
return adapter.toEventCalendarEvents(
|
||||||
|
enrichedExpandedData as typeof expandedEventsResult.data,
|
||||||
|
{ calendarColors }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const allEventsArrays = await Promise.all(allEventsPromises);
|
||||||
|
return allEventsArrays.flat() as ECEvent[];
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching events:", error);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
// Loading state is handled internally by the calendar
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
calendarRef.current = ec as unknown as CalendarApi;
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (calendarRef.current) {
|
||||||
|
// @event-calendar/core is Svelte-based and uses $destroy
|
||||||
|
const calendar = calendarRef.current as CalendarApi;
|
||||||
|
if (typeof calendar.$destroy === 'function') {
|
||||||
|
calendar.$destroy();
|
||||||
|
}
|
||||||
|
calendarRef.current = null;
|
||||||
|
}
|
||||||
|
// Also clear the container
|
||||||
|
if (containerRef.current) {
|
||||||
|
containerRef.current.innerHTML = '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, [
|
||||||
|
isConnected,
|
||||||
|
calendarUrl,
|
||||||
|
calendarLocale,
|
||||||
|
firstDayOfWeek,
|
||||||
|
formatDayHeader,
|
||||||
|
handleEventClick,
|
||||||
|
handleEventDrop,
|
||||||
|
handleEventResize,
|
||||||
|
handleDateClick,
|
||||||
|
handleSelect,
|
||||||
|
caldavService,
|
||||||
|
adapter,
|
||||||
|
setCurrentDate,
|
||||||
|
t,
|
||||||
|
i18n.language,
|
||||||
|
containerRef,
|
||||||
|
calendarRef,
|
||||||
|
visibleCalendarUrlsRef,
|
||||||
|
davCalendarsRef,
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hook to check scheduling capabilities on mount.
|
||||||
|
*/
|
||||||
|
export const useSchedulingCapabilitiesCheck = (
|
||||||
|
isConnected: boolean,
|
||||||
|
caldavService: CalDavService
|
||||||
|
) => {
|
||||||
|
const hasCheckedRef = useRef(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isConnected || hasCheckedRef.current) return;
|
||||||
|
|
||||||
|
hasCheckedRef.current = true;
|
||||||
|
|
||||||
|
const checkSchedulingCapabilities = async () => {
|
||||||
|
const result = await caldavService.getSchedulingCapabilities();
|
||||||
|
|
||||||
|
if (result.success && result.data) {
|
||||||
|
console.group('📅 CalDAV Scheduling Capabilities');
|
||||||
|
console.log(
|
||||||
|
'Scheduling Support:',
|
||||||
|
result.data.hasSchedulingSupport ? '✅ Enabled' : '❌ Disabled'
|
||||||
|
);
|
||||||
|
console.log(
|
||||||
|
'Schedule Outbox URL:',
|
||||||
|
result.data.scheduleOutboxUrl || '❌ Not found'
|
||||||
|
);
|
||||||
|
console.log(
|
||||||
|
'Schedule Inbox URL:',
|
||||||
|
result.data.scheduleInboxUrl || '❌ Not found'
|
||||||
|
);
|
||||||
|
console.log(
|
||||||
|
'Calendar User Addresses:',
|
||||||
|
result.data.calendarUserAddressSet.length > 0
|
||||||
|
? result.data.calendarUserAddressSet
|
||||||
|
: '❌ None'
|
||||||
|
);
|
||||||
|
console.log('');
|
||||||
|
console.log('Raw server response:', result.data.rawResponse);
|
||||||
|
|
||||||
|
if (result.data.hasSchedulingSupport) {
|
||||||
|
console.log('');
|
||||||
|
console.log('✉️ Email Notifications Status:');
|
||||||
|
console.log(' The server supports CalDAV scheduling (RFC 6638).');
|
||||||
|
console.log(
|
||||||
|
' However, this does NOT guarantee email notifications will be sent.'
|
||||||
|
);
|
||||||
|
console.log(
|
||||||
|
' Email sending requires the IMip plugin to be configured on the server.'
|
||||||
|
);
|
||||||
|
console.log(
|
||||||
|
' Contact your server administrator to verify IMip plugin configuration.'
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
console.warn('');
|
||||||
|
console.warn(
|
||||||
|
'⚠️ CalDAV scheduling properties not found on this server.'
|
||||||
|
);
|
||||||
|
console.warn(' This could mean:');
|
||||||
|
console.warn(
|
||||||
|
' 1. The scheduling plugin is not enabled in Sabre/DAV configuration'
|
||||||
|
);
|
||||||
|
console.warn(
|
||||||
|
' 2. The properties are located elsewhere (check raw response above)'
|
||||||
|
);
|
||||||
|
console.warn(
|
||||||
|
' 3. The server does not support CalDAV scheduling (RFC 6638)'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.groupEnd();
|
||||||
|
} else {
|
||||||
|
console.error('Failed to check scheduling capabilities:', result.error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
checkSchedulingCapabilities();
|
||||||
|
}, [isConnected, caldavService]);
|
||||||
|
};
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
/**
|
||||||
|
* Date formatting utilities for the Scheduler components.
|
||||||
|
* Handles conversion between Date objects and HTML input formats.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pad a number to 2 digits.
|
||||||
|
*/
|
||||||
|
const pad = (n: number): string => n.toString().padStart(2, "0");
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format Date to input datetime-local format (YYYY-MM-DDTHH:mm).
|
||||||
|
*
|
||||||
|
* @param date - The date to format
|
||||||
|
* @param isFakeUtc - If true, use getUTC* methods (for dates from adapter
|
||||||
|
* that store local time as UTC values)
|
||||||
|
*/
|
||||||
|
export const formatDateTimeLocal = (date: Date, isFakeUtc = false): string => {
|
||||||
|
if (isFakeUtc) {
|
||||||
|
// For "fake UTC" dates, getUTC* methods return the intended local time
|
||||||
|
return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())}T${pad(date.getUTCHours())}:${pad(date.getUTCMinutes())}`;
|
||||||
|
}
|
||||||
|
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Parse datetime-local input value to Date.
|
||||||
|
*
|
||||||
|
* @param value - String in YYYY-MM-DDTHH:mm format
|
||||||
|
*/
|
||||||
|
export const parseDateTimeLocal = (value: string): Date => {
|
||||||
|
return new Date(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format Date to input date format (YYYY-MM-DD).
|
||||||
|
*
|
||||||
|
* @param date - The date to format
|
||||||
|
* @param isFakeUtc - If true, use getUTC* methods (for dates from adapter)
|
||||||
|
*/
|
||||||
|
export const formatDateLocal = (date: Date, isFakeUtc = false): string => {
|
||||||
|
if (isFakeUtc) {
|
||||||
|
return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())}`;
|
||||||
|
}
|
||||||
|
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Parse date input value to Date (at midnight local time).
|
||||||
|
*
|
||||||
|
* @param value - String in YYYY-MM-DD format
|
||||||
|
*/
|
||||||
|
export const parseDateLocal = (value: string): Date => {
|
||||||
|
const [year, month, day] = value.split('-').map(Number);
|
||||||
|
return new Date(year, month - 1, day);
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user