🔥(front) remove deprecated calendar components
Remove old CalendarView, CalendarList, EventModal and CreateCalendarModal replaced by new Scheduler and CalendarList implementations. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Nathan Panchout
@@ -1,88 +0,0 @@
|
||||
/**
|
||||
* CalendarList component - List of calendars with visibility toggles.
|
||||
*/
|
||||
|
||||
import { Button, Checkbox } from "@openfun/cunningham-react";
|
||||
|
||||
import { Calendar } from "../api";
|
||||
import { useToggleCalendarVisibility } from "../hooks/useCalendars";
|
||||
|
||||
interface CalendarListProps {
|
||||
calendars: Calendar[];
|
||||
onCreateCalendar: () => void;
|
||||
}
|
||||
|
||||
export const CalendarList = ({
|
||||
calendars,
|
||||
onCreateCalendar,
|
||||
}: CalendarListProps) => {
|
||||
const toggleVisibility = useToggleCalendarVisibility();
|
||||
|
||||
// Ensure calendars is an array
|
||||
const calendarsArray = Array.isArray(calendars) ? calendars : [];
|
||||
|
||||
const ownedCalendars = calendarsArray.filter(
|
||||
(cal) => !cal.name.includes("(partagé)")
|
||||
);
|
||||
const sharedCalendars = calendarsArray.filter((cal) =>
|
||||
cal.name.includes("(partagé)")
|
||||
);
|
||||
|
||||
const handleToggle = (calendarId: string) => {
|
||||
toggleVisibility.mutate(calendarId);
|
||||
};
|
||||
|
||||
const renderCalendarItem = (calendar: Calendar) => (
|
||||
<div key={calendar.id} className="calendar-list__item">
|
||||
<Checkbox
|
||||
checked={calendar.is_visible}
|
||||
onChange={() => handleToggle(calendar.id)}
|
||||
label=""
|
||||
aria-label={`Afficher ${calendar.name}`}
|
||||
/>
|
||||
<span
|
||||
className="calendar-list__color"
|
||||
style={{ backgroundColor: calendar.color }}
|
||||
/>
|
||||
<span className="calendar-list__name" title={calendar.name}>
|
||||
{calendar.name}
|
||||
</span>
|
||||
{calendar.is_default && (
|
||||
<span className="calendar-list__badge">Par défaut</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="calendar-list">
|
||||
<div className="calendar-list__section">
|
||||
<div className="calendar-list__section-header">
|
||||
<span className="calendar-list__section-title">Mes calendriers</span>
|
||||
<button
|
||||
className="calendar-list__add-btn"
|
||||
onClick={onCreateCalendar}
|
||||
title="Créer un calendrier"
|
||||
>
|
||||
<span className="material-icons">add</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="calendar-list__items">
|
||||
{ownedCalendars.map(renderCalendarItem)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{sharedCalendars.length > 0 && (
|
||||
<div className="calendar-list__section">
|
||||
<div className="calendar-list__section-header">
|
||||
<span className="calendar-list__section-title">
|
||||
Calendriers partagés
|
||||
</span>
|
||||
</div>
|
||||
<div className="calendar-list__items">
|
||||
{sharedCalendars.map(renderCalendarItem)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,171 +0,0 @@
|
||||
.calendar-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
|
||||
&__loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem 2rem;
|
||||
background: var(--c--theme--colors--greyscale-000);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: var(--c--theme--colors--greyscale-600);
|
||||
}
|
||||
}
|
||||
|
||||
&__container {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
&--loading,
|
||||
&--error {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
gap: 1rem;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
color: var(--c--theme--colors--greyscale-600);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--c--theme--colors--primary-500);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--c--theme--colors--primary-600);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Open-calendar overrides to match La Suite theme
|
||||
.calendar-view__container {
|
||||
// Calendar toolbar
|
||||
.ec-toolbar {
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid var(--c--theme--colors--greyscale-200);
|
||||
background: var(--c--theme--colors--greyscale-000);
|
||||
}
|
||||
|
||||
// Today button
|
||||
.ec-button {
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--c--theme--colors--greyscale-300);
|
||||
background: var(--c--theme--colors--greyscale-000);
|
||||
color: var(--c--theme--colors--greyscale-800);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--c--theme--colors--greyscale-100);
|
||||
}
|
||||
|
||||
&.ec-active {
|
||||
background: var(--c--theme--colors--primary-500);
|
||||
border-color: var(--c--theme--colors--primary-500);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation buttons
|
||||
.ec-prev,
|
||||
.ec-next {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
// Title
|
||||
.ec-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--c--theme--colors--greyscale-900);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
// Days header
|
||||
.ec-days,
|
||||
.ec-day {
|
||||
border-color: var(--c--theme--colors--greyscale-200);
|
||||
}
|
||||
|
||||
.ec-day-head {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--c--theme--colors--greyscale-600);
|
||||
}
|
||||
|
||||
// Time slots
|
||||
.ec-time {
|
||||
font-size: 0.75rem;
|
||||
color: var(--c--theme--colors--greyscale-500);
|
||||
}
|
||||
|
||||
// Events
|
||||
.ec-event {
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
padding: 2px 4px;
|
||||
border: none;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
// Today highlight
|
||||
.ec-today {
|
||||
background: rgba(var(--c--theme--colors--primary-rgb, 49, 116, 173), 0.1);
|
||||
}
|
||||
|
||||
// Now indicator
|
||||
.ec-now-indicator {
|
||||
border-color: var(--c--theme--colors--danger-500);
|
||||
|
||||
&::before {
|
||||
background: var(--c--theme--colors--danger-500);
|
||||
}
|
||||
}
|
||||
|
||||
// Popup styles
|
||||
.ec-popup {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid var(--c--theme--colors--greyscale-200);
|
||||
}
|
||||
}
|
||||
@@ -1,209 +0,0 @@
|
||||
/**
|
||||
* CalendarView component using open-calendar (Algoo).
|
||||
* Renders a CalDAV-connected calendar view.
|
||||
*/
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
import { useAuth } from "@/features/auth/Auth";
|
||||
import { createEventModalHandlers, type ModalState } from "./EventModalAdapter";
|
||||
import { useEventModal } from "../hooks/useEventModal";
|
||||
import type { IcsEvent } from 'ts-ics';
|
||||
|
||||
interface CalendarViewProps {
|
||||
selectedDate?: Date;
|
||||
onSelectDate?: (date: Date) => void;
|
||||
}
|
||||
|
||||
export const CalendarView = ({
|
||||
selectedDate = new Date(),
|
||||
onSelectDate,
|
||||
}: CalendarViewProps) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const calendarRef = useRef<unknown>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [modalState, setModalState] = useState<ModalState>({
|
||||
isOpen: false,
|
||||
mode: 'create',
|
||||
event: null,
|
||||
calendarUrl: '',
|
||||
calendars: [],
|
||||
handleSave: null,
|
||||
handleDelete: null,
|
||||
});
|
||||
const { user } = useAuth();
|
||||
|
||||
// Use the modal hook with state from adapter
|
||||
const modal = useEventModal({
|
||||
calendars: modalState.calendars,
|
||||
initialEvent: modalState.event,
|
||||
initialCalendarUrl: modalState.calendarUrl,
|
||||
onSubmit: async (event: IcsEvent, calendarUrl: string) => {
|
||||
if (modalState.handleSave) {
|
||||
await modalState.handleSave({ calendarUrl, event });
|
||||
setModalState(prev => ({ ...prev, isOpen: false }));
|
||||
}
|
||||
},
|
||||
onDelete: async (event: IcsEvent, calendarUrl: string) => {
|
||||
if (modalState.handleDelete) {
|
||||
await modalState.handleDelete({ calendarUrl, event });
|
||||
setModalState(prev => ({ ...prev, isOpen: false }));
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// Sync modal state with adapter state
|
||||
useEffect(() => {
|
||||
if (modalState.isOpen) {
|
||||
// Always call open to update all state (event, mode, calendarUrl, calendars)
|
||||
modal.open(modalState.event, modalState.mode, modalState.calendarUrl, modalState.calendars);
|
||||
} else if (modal.isOpen) {
|
||||
modal.close();
|
||||
}
|
||||
}, [modalState.isOpen, modalState.event, modalState.mode, modalState.calendarUrl, modalState.calendars]);
|
||||
|
||||
useEffect(() => {
|
||||
const initCalendar = async () => {
|
||||
if (!containerRef.current || !user) return;
|
||||
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
// Dynamically import open-calendar to avoid SSR issues (uses browser-only globals)
|
||||
const { createCalendar } = await import("open-dav-calendar");
|
||||
|
||||
// Clear previous calendar instance
|
||||
if (containerRef.current) {
|
||||
containerRef.current.innerHTML = "";
|
||||
}
|
||||
|
||||
// CalDAV server URL - proxied through Django backend
|
||||
// The proxy handles authentication via session cookies
|
||||
// open-calendar will discover calendars from this URL
|
||||
const caldavServerUrl = `${process.env.NEXT_PUBLIC_API_ORIGIN}/api/v1.0/caldav/`;
|
||||
|
||||
// Create calendar with CalDAV source
|
||||
// Use fetchOptions with credentials to include cookies
|
||||
const calendar = await createCalendar(
|
||||
[
|
||||
{
|
||||
serverUrl: caldavServerUrl,
|
||||
fetchOptions: {
|
||||
credentials: "include" as RequestCredentials,
|
||||
headers: {
|
||||
"Content-Type": "application/xml",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
[], // No address books for now
|
||||
containerRef.current,
|
||||
{
|
||||
view: "timeGridWeek",
|
||||
views: ["dayGridMonth", "timeGridWeek", "timeGridDay", "listWeek"],
|
||||
locale: "fr",
|
||||
date: selectedDate,
|
||||
editable: true,
|
||||
// Use custom EventEditHandlers that update React state
|
||||
...createEventModalHandlers(setModalState, []),
|
||||
onEventCreated: (info) => {
|
||||
console.log("Event created:", info);
|
||||
},
|
||||
onEventUpdated: (info) => {
|
||||
console.log("Event updated:", info);
|
||||
},
|
||||
onEventDeleted: (info) => {
|
||||
console.log("Event deleted:", info);
|
||||
},
|
||||
},
|
||||
{
|
||||
// French translations
|
||||
calendar: {
|
||||
today: "Aujourd'hui",
|
||||
month: "Mois",
|
||||
week: "Semaine",
|
||||
day: "Jour",
|
||||
list: "Liste",
|
||||
},
|
||||
event: {
|
||||
edit: "Modifier",
|
||||
delete: "Supprimer",
|
||||
save: "Enregistrer",
|
||||
cancel: "Annuler",
|
||||
title: "Titre",
|
||||
description: "Description",
|
||||
location: "Lieu",
|
||||
startDate: "Date de début",
|
||||
endDate: "Date de fin",
|
||||
allDay: "Journée entière",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
calendarRef.current = calendar;
|
||||
setIsLoading(false);
|
||||
} catch (err) {
|
||||
console.error("Failed to initialize calendar:", err);
|
||||
setError(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "Erreur lors du chargement du calendrier"
|
||||
);
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
initCalendar();
|
||||
|
||||
return () => {
|
||||
// Cleanup
|
||||
if (containerRef.current) {
|
||||
containerRef.current.innerHTML = "";
|
||||
}
|
||||
calendarRef.current = null;
|
||||
};
|
||||
}, [user]);
|
||||
|
||||
// Update calendar date when selectedDate changes
|
||||
useEffect(() => {
|
||||
if (calendarRef.current && selectedDate) {
|
||||
// open-calendar may have a method to set date
|
||||
// This depends on the CalendarElement API
|
||||
}
|
||||
}, [selectedDate]);
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<div className="calendar-view calendar-view--loading">
|
||||
<p>Connexion requise pour afficher le calendrier</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="calendar-view calendar-view--error">
|
||||
<p>{error}</p>
|
||||
<button onClick={() => window.location.reload()}>Réessayer</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="calendar-view">
|
||||
{isLoading && (
|
||||
<div className="calendar-view__loading">
|
||||
<p>Chargement du calendrier...</p>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="calendar-view__container"
|
||||
style={{ opacity: isLoading ? 0 : 1 }}
|
||||
/>
|
||||
{modal.Modal}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,112 +0,0 @@
|
||||
/**
|
||||
* Modal component for creating a new calendar.
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Modal,
|
||||
ModalSize,
|
||||
useModal,
|
||||
} from "@openfun/cunningham-react";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import { useCreateCalendar } from "../hooks/useCalendars";
|
||||
import { addToast, ToasterItem } from "@/features/ui/components/toaster/Toaster";
|
||||
import { errorToString } from "@/features/api/APIError";
|
||||
|
||||
export const useCreateCalendarModal = () => {
|
||||
const { t } = useTranslation();
|
||||
const modal = useModal();
|
||||
const createCalendar = useCreateCalendar();
|
||||
const [name, setName] = useState("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// Reset form when modal opens
|
||||
useEffect(() => {
|
||||
if (modal.isOpen) {
|
||||
setName("");
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}, [modal.isOpen]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!name.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await createCalendar.mutateAsync({
|
||||
name: name.trim(),
|
||||
});
|
||||
addToast(
|
||||
<ToasterItem>
|
||||
<span>{t("calendar.created_success", { name: name.trim(), defaultValue: `Calendrier "${name.trim()}" créé avec succès` })}</span>
|
||||
</ToasterItem>
|
||||
);
|
||||
setName("");
|
||||
modal.close();
|
||||
} catch (error) {
|
||||
console.error("Failed to create calendar:", error);
|
||||
const errorMessage = errorToString(error);
|
||||
addToast(
|
||||
<ToasterItem type="error">
|
||||
<span>{errorMessage || t("calendar.created_error", { defaultValue: "Erreur lors de la création du calendrier" })}</span>
|
||||
</ToasterItem>
|
||||
);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setName("");
|
||||
modal.close();
|
||||
};
|
||||
|
||||
return {
|
||||
...modal,
|
||||
Modal: (
|
||||
<Modal
|
||||
{...modal}
|
||||
title={t("calendar.create_modal.title", { defaultValue: "Créer un nouveau calendrier" })}
|
||||
size={ModalSize.SMALL}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Input
|
||||
label={t("calendar.create_modal.name_label", { defaultValue: "Nom du calendrier" })}
|
||||
value={name}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
|
||||
required
|
||||
disabled={isSubmitting}
|
||||
autoFocus
|
||||
placeholder={t("calendar.create_modal.name_placeholder", { defaultValue: "Mon calendrier" })}
|
||||
/>
|
||||
<div style={{ display: "flex", gap: "1rem", justifyContent: "flex-end", marginTop: "1.5rem" }}>
|
||||
<Button
|
||||
type="button"
|
||||
color="secondary"
|
||||
onClick={handleClose}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{t("common.cancel", { defaultValue: "Annuler" })}
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
color="primary"
|
||||
disabled={!name.trim() || isSubmitting}
|
||||
>
|
||||
{isSubmitting
|
||||
? t("common.creating", { defaultValue: "Création..." })
|
||||
: t("common.create", { defaultValue: "Créer" })}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
),
|
||||
};
|
||||
};
|
||||
@@ -1,441 +0,0 @@
|
||||
import { Modal, Button, Input, TextArea, Select } from '@openfun/cunningham-react';
|
||||
import type { IcsEvent, IcsRecurrenceRule } from 'ts-ics';
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { RecurrenceEditor } from './RecurrenceEditor';
|
||||
|
||||
// Helper function to check if event is all-day (same logic as open-dav-calendar)
|
||||
function isEventAllDay(event: IcsEvent): boolean {
|
||||
return event.start.type === 'DATE' || (event.end?.type === 'DATE');
|
||||
}
|
||||
|
||||
// Calendar type from open-calendar (exported for use in other components)
|
||||
export interface Calendar {
|
||||
url: string;
|
||||
uid?: unknown;
|
||||
displayName?: string;
|
||||
calendarColor?: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
interface EventModalProps {
|
||||
isOpen: boolean;
|
||||
mode: 'create' | 'edit';
|
||||
calendars: Calendar[];
|
||||
selectedEvent?: IcsEvent | null;
|
||||
calendarUrl: string;
|
||||
onSubmit: (event: IcsEvent, calendarUrl: string) => Promise<void>;
|
||||
onAllDayChange: (isAllDay: boolean) => void;
|
||||
onClose: () => void;
|
||||
onDelete?: (event: IcsEvent, calendarUrl: string) => Promise<void>;
|
||||
}
|
||||
|
||||
const VISIBILITY_OPTIONS = [
|
||||
{ value: 'default', label: 'Par défaut' },
|
||||
{ value: 'public', label: 'Public' },
|
||||
{ value: 'private', label: 'Privé' },
|
||||
] as const;
|
||||
|
||||
export function EventModal({
|
||||
isOpen,
|
||||
mode,
|
||||
calendars,
|
||||
selectedEvent,
|
||||
calendarUrl,
|
||||
onSubmit,
|
||||
onAllDayChange,
|
||||
onClose,
|
||||
onDelete,
|
||||
}: EventModalProps) {
|
||||
const titleInputRef = useRef<HTMLInputElement>(null);
|
||||
const [formData, setFormData] = useState<Partial<IcsEvent & { startTime?: string; endTime?: string }>>({});
|
||||
const [activeFeatures, setActiveFeatures] = useState<Set<string>>(new Set());
|
||||
const [selectedCalendarUrl, setSelectedCalendarUrl] = useState<string>(calendarUrl);
|
||||
const [allDay, setAllDay] = useState<boolean>(false);
|
||||
|
||||
// Helper to get local date from IcsDateObject
|
||||
const getLocalDate = (dateObj: { date: Date; local?: { date: Date; timezone: string } }): Date => {
|
||||
return dateObj.local?.date || dateObj.date;
|
||||
};
|
||||
|
||||
// Format date for input
|
||||
const formatDateForInput = (date: Date): string => {
|
||||
return date.toISOString().split('T')[0];
|
||||
};
|
||||
|
||||
// Format time for input
|
||||
const formatTimeForInput = (date: Date): string => {
|
||||
return date.toTimeString().slice(0, 5);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedEvent) {
|
||||
const eventAllDay = isEventAllDay(selectedEvent);
|
||||
const startDate = getLocalDate(selectedEvent.start);
|
||||
const endDate = selectedEvent.end ? getLocalDate(selectedEvent.end) : startDate;
|
||||
|
||||
setAllDay(eventAllDay);
|
||||
setFormData({
|
||||
...selectedEvent,
|
||||
summary: selectedEvent.summary || '',
|
||||
startTime: eventAllDay ? undefined : formatTimeForInput(startDate),
|
||||
endTime: eventAllDay ? undefined : formatTimeForInput(endDate),
|
||||
});
|
||||
setSelectedCalendarUrl(calendarUrl);
|
||||
} else {
|
||||
const now = new Date();
|
||||
const endTime = new Date(now.getTime() + 30 * 60 * 1000);
|
||||
setAllDay(false);
|
||||
setFormData({
|
||||
summary: '',
|
||||
start: {
|
||||
type: 'DATE-TIME',
|
||||
date: now,
|
||||
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
end: {
|
||||
type: 'DATE-TIME',
|
||||
date: endTime,
|
||||
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
startTime: formatTimeForInput(now),
|
||||
endTime: formatTimeForInput(endTime),
|
||||
});
|
||||
setSelectedCalendarUrl(calendars[0]?.url || '');
|
||||
}
|
||||
}, [selectedEvent, calendars, calendarUrl]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
requestAnimationFrame(() => {
|
||||
titleInputRef.current?.focus();
|
||||
});
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const startDate = formData.start ? getLocalDate(formData.start) : new Date();
|
||||
const endDate = formData.end ? getLocalDate(formData.end) : startDate;
|
||||
|
||||
const toggleFeature = (feature: string) => {
|
||||
if (feature === 'allDay') {
|
||||
const newAllDay = !allDay;
|
||||
setAllDay(newAllDay);
|
||||
onAllDayChange(newAllDay);
|
||||
return;
|
||||
}
|
||||
|
||||
setActiveFeatures(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(feature)) {
|
||||
next.delete(feature);
|
||||
} else {
|
||||
next.add(feature);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formData.summary) return;
|
||||
|
||||
const startDateValue = new Date(`${formatDateForInput(startDate)}T${allDay ? '00:00:00' : formData.startTime || '00:00:00'}`);
|
||||
const endDateValue = new Date(`${formatDateForInput(endDate)}T${allDay ? '00:00:00' : formData.endTime || '00:00:00'}`);
|
||||
|
||||
const updatedEvent: IcsEvent = {
|
||||
...(selectedEvent || {}),
|
||||
uid: selectedEvent?.uid || `event-${Date.now()}`,
|
||||
summary: formData.summary || '',
|
||||
location: formData.location || undefined,
|
||||
description: formData.description || formData.notes || undefined,
|
||||
start: {
|
||||
type: allDay ? 'DATE' : 'DATE-TIME',
|
||||
date: startDateValue,
|
||||
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
end: {
|
||||
type: allDay ? 'DATE' : 'DATE-TIME',
|
||||
date: endDateValue,
|
||||
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
recurrenceRule: formData.recurrenceRule,
|
||||
};
|
||||
|
||||
await onSubmit(updatedEvent, selectedCalendarUrl);
|
||||
};
|
||||
|
||||
const renderFeatureContent = () => {
|
||||
return (
|
||||
<>
|
||||
{activeFeatures.has('calendar') && (
|
||||
<div className="event-modal-layout event-modal-layout--margin-bottom-1rem">
|
||||
<Select
|
||||
label="Calendrier"
|
||||
name="calendar-select"
|
||||
value={selectedCalendarUrl}
|
||||
onChange={(e) => setSelectedCalendarUrl(e.target.value)}
|
||||
options={calendars.map(cal => ({
|
||||
value: cal.url,
|
||||
label: cal.displayName || cal.url
|
||||
}))}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeFeatures.has('repeat') && (
|
||||
<div className="event-modal-layout event-modal-layout--margin-bottom-1rem">
|
||||
<RecurrenceEditor
|
||||
value={formData.recurrenceRule}
|
||||
onChange={(recurrenceRule) => {
|
||||
setFormData(prev => ({ ...prev, recurrenceRule }));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeFeatures.has('location') && (
|
||||
<div className="event-modal-layout event-modal-layout--margin-bottom-1rem">
|
||||
<Input
|
||||
label="Lieu"
|
||||
placeholder="Ajouter un lieu"
|
||||
value={formData.location || ''}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, location: e.target.value }))}
|
||||
icon={<span className="material-icons">location_on</span>}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeFeatures.has('notes') && (
|
||||
<div className="event-modal-layout event-modal-layout--margin-bottom-1rem">
|
||||
<TextArea
|
||||
label="Notes"
|
||||
placeholder="Ajouter des notes"
|
||||
value={formData.description || formData.notes || ''}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value, notes: e.target.value }))}
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const selectedCalendar = calendars.find(cal => cal.url === selectedCalendarUrl);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={mode === 'create' ? 'Créer un événement' : 'Modifier l\'événement'}
|
||||
>
|
||||
<div className="event-modal-layout event-modal-layout--gap-2rem">
|
||||
<Input
|
||||
label="Titre"
|
||||
value={formData.summary || ''}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, summary: e.target.value }))}
|
||||
ref={titleInputRef}
|
||||
/>
|
||||
|
||||
<div className="event-modal-layout event-modal-layout--row event-modal-layout--gap-1rem">
|
||||
<div className="event-modal-layout event-modal-layout--flex-1">
|
||||
<Input
|
||||
type="date"
|
||||
label="Date de début"
|
||||
name="event-start-date"
|
||||
value={formatDateForInput(startDate)}
|
||||
onChange={(e) => {
|
||||
const newDate = new Date(e.target.value);
|
||||
const currentTime = allDay ? '00:00:00' : (formData.startTime || formatTimeForInput(startDate));
|
||||
const [hours, minutes] = currentTime.split(':');
|
||||
newDate.setHours(parseInt(hours || '0'), parseInt(minutes || '0'));
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
start: {
|
||||
type: allDay ? 'DATE' : 'DATE-TIME',
|
||||
date: newDate,
|
||||
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
startTime: allDay ? undefined : currentTime,
|
||||
}));
|
||||
}}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{!allDay && (
|
||||
<div className="event-modal-layout event-modal-layout--flex-1">
|
||||
<Input
|
||||
type="time"
|
||||
label="Heure de début"
|
||||
name="event-start-time"
|
||||
value={formData.startTime || formatTimeForInput(startDate)}
|
||||
onChange={(e) => {
|
||||
const [hours, minutes] = e.target.value.split(':');
|
||||
const newDate = new Date(startDate);
|
||||
newDate.setHours(parseInt(hours || '0'), parseInt(minutes || '0'));
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
start: {
|
||||
type: 'DATE-TIME',
|
||||
date: newDate,
|
||||
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
startTime: e.target.value,
|
||||
}));
|
||||
}}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="event-modal-layout event-modal-layout--row event-modal-layout--gap-1rem">
|
||||
<div className="event-modal-layout event-modal-layout--flex-1">
|
||||
<Input
|
||||
type="date"
|
||||
label="Date de fin"
|
||||
name="event-end-date"
|
||||
value={formatDateForInput(endDate)}
|
||||
onChange={(e) => {
|
||||
const newDate = new Date(e.target.value);
|
||||
const currentTime = allDay ? '00:00:00' : (formData.endTime || formatTimeForInput(endDate));
|
||||
const [hours, minutes] = currentTime.split(':');
|
||||
newDate.setHours(parseInt(hours || '0'), parseInt(minutes || '0'));
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
end: {
|
||||
type: allDay ? 'DATE' : 'DATE-TIME',
|
||||
date: newDate,
|
||||
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
endTime: allDay ? undefined : currentTime,
|
||||
}));
|
||||
}}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{!allDay && (
|
||||
<div className="event-modal-layout event-modal-layout--flex-1">
|
||||
<Input
|
||||
type="time"
|
||||
label="Heure de fin"
|
||||
name="event-end-time"
|
||||
value={formData.endTime || formatTimeForInput(endDate)}
|
||||
onChange={(e) => {
|
||||
const [hours, minutes] = e.target.value.split(':');
|
||||
const newDate = new Date(endDate);
|
||||
newDate.setHours(parseInt(hours || '0'), parseInt(minutes || '0'));
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
end: {
|
||||
type: 'DATE-TIME',
|
||||
date: newDate,
|
||||
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
endTime: e.target.value,
|
||||
}));
|
||||
}}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{renderFeatureContent()}
|
||||
|
||||
<div className="event-modal-layout event-modal-layout--row event-modal-layout--gap-0-5rem event-modal-layout--wrap">
|
||||
<button
|
||||
className={`event-modal__feature-tag ${activeFeatures.has('calendar') ? 'event-modal__feature-tag--active' : ''}`}
|
||||
onClick={() => toggleFeature('calendar')}
|
||||
style={selectedCalendar?.calendarColor ? {
|
||||
backgroundColor: selectedCalendar.calendarColor,
|
||||
color: 'white',
|
||||
} : undefined}
|
||||
>
|
||||
<span className="material-icons">event_note</span>
|
||||
{selectedCalendar?.displayName || selectedCalendar?.url || 'Calendrier'}
|
||||
</button>
|
||||
<button
|
||||
className={`event-modal__feature-tag ${activeFeatures.has('visibility') ? 'event-modal__feature-tag--active' : ''}`}
|
||||
onClick={() => toggleFeature('visibility')}
|
||||
>
|
||||
<span className="material-icons">visibility</span>
|
||||
Visibilité
|
||||
</button>
|
||||
<button
|
||||
className={`event-modal__feature-tag ${activeFeatures.has('repeat') ? 'event-modal__feature-tag--active' : ''}`}
|
||||
onClick={() => toggleFeature('repeat')}
|
||||
>
|
||||
<span className="material-icons">repeat</span>
|
||||
Répéter
|
||||
</button>
|
||||
<button
|
||||
className={`event-modal__feature-tag ${allDay ? 'event-modal__feature-tag--active' : ''}`}
|
||||
onClick={() => toggleFeature('allDay')}
|
||||
>
|
||||
<span className="material-icons">today</span>
|
||||
Toute la journée
|
||||
</button>
|
||||
<button
|
||||
className={`event-modal__feature-tag ${activeFeatures.has('invites') ? 'event-modal__feature-tag--active' : ''}`}
|
||||
onClick={() => toggleFeature('invites')}
|
||||
>
|
||||
<span className="material-icons">people</span>
|
||||
Invités
|
||||
</button>
|
||||
<button
|
||||
className={`event-modal__feature-tag ${activeFeatures.has('location') ? 'event-modal__feature-tag--active' : ''}`}
|
||||
onClick={() => toggleFeature('location')}
|
||||
>
|
||||
<span className="material-icons">location_on</span>
|
||||
Lieu
|
||||
</button>
|
||||
<button
|
||||
className={`event-modal__feature-tag ${activeFeatures.has('visio') ? 'event-modal__feature-tag--active' : ''}`}
|
||||
onClick={() => toggleFeature('visio')}
|
||||
>
|
||||
<span className="material-icons">videocam</span>
|
||||
Visio
|
||||
</button>
|
||||
<button
|
||||
className={`event-modal__feature-tag ${activeFeatures.has('notification') ? 'event-modal__feature-tag--active' : ''}`}
|
||||
onClick={() => toggleFeature('notification')}
|
||||
>
|
||||
<span className="material-icons">notifications</span>
|
||||
Rappel
|
||||
</button>
|
||||
<button
|
||||
className={`event-modal__feature-tag ${activeFeatures.has('notes') ? 'event-modal__feature-tag--active' : ''}`}
|
||||
onClick={() => toggleFeature('notes')}
|
||||
>
|
||||
<span className="material-icons">notes</span>
|
||||
Notes
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="event-modal-layout event-modal-layout--row event-modal-layout--justify-space-between event-modal-layout--margin-top-2rem">
|
||||
{mode === 'edit' && selectedEvent && (
|
||||
<Button
|
||||
type="button"
|
||||
color="danger"
|
||||
onClick={() => onDelete?.(selectedEvent, selectedCalendarUrl)}
|
||||
icon={<span className="material-icons">delete</span>}
|
||||
>
|
||||
Supprimer
|
||||
</Button>
|
||||
)}
|
||||
<div className="event-modal-layout event-modal-layout--row event-modal-layout--gap-1rem event-modal-layout--margin-left-auto">
|
||||
<Button
|
||||
type="button"
|
||||
color="secondary"
|
||||
onClick={onClose}
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={handleSubmit}>
|
||||
{mode === 'create' ? 'Créer' : 'Enregistrer'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -1,115 +0,0 @@
|
||||
/**
|
||||
* Adapter that bridges open-calendar's EventEditHandlers with React state.
|
||||
* The handlers update state, and the modal is rendered normally in React tree.
|
||||
*/
|
||||
|
||||
import type { IcsEvent } from 'ts-ics';
|
||||
import type { OpenCalendar } from '../hooks/useEventModal';
|
||||
|
||||
interface EventEditHandlers {
|
||||
onCreateEvent: (info: EventEditCreateInfo) => void;
|
||||
onSelectEvent: (info: EventEditSelectInfo) => void;
|
||||
onMoveResizeEvent: (info: EventEditMoveResizeInfo) => void;
|
||||
onDeleteEvent: (info: EventEditDeleteInfo) => void;
|
||||
}
|
||||
|
||||
interface EventEditCreateInfo {
|
||||
jsEvent: Event;
|
||||
userContact?: any;
|
||||
event: IcsEvent;
|
||||
calendars: OpenCalendar[];
|
||||
vCards: any[];
|
||||
handleCreate: (event: { calendarUrl: string; event: IcsEvent }) => Promise<Response>;
|
||||
}
|
||||
|
||||
interface EventEditSelectInfo {
|
||||
jsEvent: Event;
|
||||
userContact?: any;
|
||||
calendarUrl: string;
|
||||
event: IcsEvent;
|
||||
recurringEvent?: IcsEvent;
|
||||
calendars: OpenCalendar[];
|
||||
vCards: any[];
|
||||
handleUpdate: (event: { calendarUrl: string; event: IcsEvent }) => Promise<Response>;
|
||||
handleDelete: (event: { calendarUrl: string; event: IcsEvent }) => Promise<Response>;
|
||||
}
|
||||
|
||||
interface EventEditMoveResizeInfo {
|
||||
jsEvent: Event;
|
||||
calendarUrl: string;
|
||||
userContact?: any;
|
||||
event: IcsEvent;
|
||||
recurringEvent?: IcsEvent;
|
||||
start: Date;
|
||||
end: Date;
|
||||
handleUpdate: (event: { calendarUrl: string; event: IcsEvent }) => Promise<Response>;
|
||||
}
|
||||
|
||||
interface EventEditDeleteInfo {
|
||||
jsEvent: Event;
|
||||
calendarUrl: string;
|
||||
userContact?: any;
|
||||
event: IcsEvent;
|
||||
recurringEvent?: IcsEvent;
|
||||
handleDelete: (event: { calendarUrl: string; event: IcsEvent }) => Promise<Response>;
|
||||
}
|
||||
|
||||
export interface ModalState {
|
||||
isOpen: boolean;
|
||||
mode: 'create' | 'edit';
|
||||
event: IcsEvent | null;
|
||||
calendarUrl: string;
|
||||
calendars: OpenCalendar[];
|
||||
handleSave: ((event: { calendarUrl: string; event: IcsEvent }) => Promise<Response>) | null;
|
||||
handleDelete: ((event: { calendarUrl: string; event: IcsEvent }) => Promise<Response>) | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates EventEditHandlers that update the provided state setter.
|
||||
*/
|
||||
export function createEventModalHandlers(
|
||||
setState: (state: ModalState) => void,
|
||||
calendars: OpenCalendar[] | (() => OpenCalendar[])
|
||||
): EventEditHandlers {
|
||||
const getCalendars = (): OpenCalendar[] => {
|
||||
return typeof calendars === 'function' ? calendars() : calendars;
|
||||
};
|
||||
|
||||
return {
|
||||
onCreateEvent: ({ event, calendars: calList, handleCreate }: EventEditCreateInfo) => {
|
||||
setState({
|
||||
isOpen: true,
|
||||
mode: 'create',
|
||||
event,
|
||||
calendarUrl: calList[0]?.url || '',
|
||||
calendars: calList,
|
||||
handleSave: handleCreate,
|
||||
handleDelete: null,
|
||||
});
|
||||
},
|
||||
onSelectEvent: ({ calendarUrl, event, calendars: calList, handleUpdate, handleDelete }: EventEditSelectInfo) => {
|
||||
setState({
|
||||
isOpen: true,
|
||||
mode: 'edit',
|
||||
event,
|
||||
calendarUrl,
|
||||
calendars: calList,
|
||||
handleSave: handleUpdate,
|
||||
handleDelete,
|
||||
});
|
||||
},
|
||||
onMoveResizeEvent: ({ calendarUrl, event, start, end, handleUpdate }: EventEditMoveResizeInfo) => {
|
||||
const newEvent = { ...event };
|
||||
const startDelta = start.getTime() - event.start.date.getTime();
|
||||
newEvent.start = { ...newEvent.start, date: new Date(event.start.date.getTime() + startDelta) };
|
||||
if (event.end) {
|
||||
const endDelta = end.getTime() - event.end.date.getTime();
|
||||
newEvent.end = { ...newEvent.end, date: new Date(event.end.date.getTime() + endDelta) };
|
||||
}
|
||||
handleUpdate({ calendarUrl, event: newEvent });
|
||||
},
|
||||
onDeleteEvent: ({ calendarUrl, event, handleDelete }: EventEditDeleteInfo) => {
|
||||
handleDelete({ calendarUrl, event });
|
||||
},
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user