✨(front) add Scheduler modals
Add EventModal for creating and editing events with support for recurrence, attendees and all-day events. Add DeleteEventModal with options for recurring event deletion scope. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Nathan Panchout
@@ -0,0 +1,95 @@
|
||||
/**
|
||||
* DeleteEventModal component.
|
||||
* Displays options for deleting recurring events or confirms single event deletion.
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button, Modal, ModalSize } from "@gouvfr-lasuite/cunningham-react";
|
||||
|
||||
import type { DeleteEventModalProps, RecurringDeleteOption } from "./types";
|
||||
|
||||
export const DeleteEventModal = ({
|
||||
isOpen,
|
||||
isRecurring,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
}: DeleteEventModalProps) => {
|
||||
const { t } = useTranslation();
|
||||
const [selectedOption, setSelectedOption] =
|
||||
useState<RecurringDeleteOption>('this');
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onCancel}
|
||||
title={t('calendar.event.deleteConfirm')}
|
||||
size={ModalSize.SMALL}
|
||||
rightActions={
|
||||
<>
|
||||
<Button color="neutral" onClick={onCancel}>
|
||||
{t('calendar.event.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
color="error"
|
||||
onClick={() => onConfirm(isRecurring ? selectedOption : undefined)}
|
||||
>
|
||||
{t('calendar.event.delete')}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="delete-modal__content">
|
||||
{isRecurring ? (
|
||||
<>
|
||||
<p className="delete-modal__message">
|
||||
{t('calendar.event.deleteRecurringPrompt')}
|
||||
</p>
|
||||
<div className="delete-modal__options">
|
||||
<label className="delete-modal__option">
|
||||
<input
|
||||
type="radio"
|
||||
name="delete-option"
|
||||
value="this"
|
||||
checked={selectedOption === 'this'}
|
||||
onChange={(e) =>
|
||||
setSelectedOption(e.target.value as RecurringDeleteOption)
|
||||
}
|
||||
/>
|
||||
<span>{t('calendar.event.deleteThisOccurrence')}</span>
|
||||
</label>
|
||||
<label className="delete-modal__option">
|
||||
<input
|
||||
type="radio"
|
||||
name="delete-option"
|
||||
value="future"
|
||||
checked={selectedOption === 'future'}
|
||||
onChange={(e) =>
|
||||
setSelectedOption(e.target.value as RecurringDeleteOption)
|
||||
}
|
||||
/>
|
||||
<span>{t('calendar.event.deleteThisAndFuture')}</span>
|
||||
</label>
|
||||
<label className="delete-modal__option">
|
||||
<input
|
||||
type="radio"
|
||||
name="delete-option"
|
||||
value="all"
|
||||
checked={selectedOption === 'all'}
|
||||
onChange={(e) =>
|
||||
setSelectedOption(e.target.value as RecurringDeleteOption)
|
||||
}
|
||||
/>
|
||||
<span>{t('calendar.event.deleteAllOccurrences')}</span>
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p className="delete-modal__message">
|
||||
{t('calendar.event.deleteConfirmMessage')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,620 @@
|
||||
/**
|
||||
* EventModal component.
|
||||
* Handles creation and editing of calendar events.
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
IcsEvent,
|
||||
IcsAttendee,
|
||||
IcsOrganizer,
|
||||
IcsRecurrenceRule,
|
||||
} from "ts-ics";
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Modal,
|
||||
ModalSize,
|
||||
Select,
|
||||
TextArea,
|
||||
} from "@gouvfr-lasuite/cunningham-react";
|
||||
|
||||
import { useAuth } from "@/features/auth/Auth";
|
||||
import { AttendeesInput } from "../AttendeesInput";
|
||||
import { RecurrenceEditor } from "../RecurrenceEditor";
|
||||
import { DeleteEventModal } from "./DeleteEventModal";
|
||||
import type { EventModalProps, RecurringDeleteOption } from "./types";
|
||||
import {
|
||||
formatDateTimeLocal,
|
||||
formatDateLocal,
|
||||
parseDateTimeLocal,
|
||||
parseDateLocal,
|
||||
} from "./utils/dateFormatters";
|
||||
|
||||
// Get browser timezone
|
||||
const BROWSER_TIMEZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
||||
|
||||
export const EventModal = ({
|
||||
isOpen,
|
||||
mode,
|
||||
event,
|
||||
calendarUrl,
|
||||
calendars,
|
||||
adapter,
|
||||
onSave,
|
||||
onDelete,
|
||||
onRespondToInvitation,
|
||||
onClose,
|
||||
}: EventModalProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { user } = useAuth();
|
||||
const [title, setTitle] = useState(event?.summary || "");
|
||||
const [description, setDescription] = useState(event?.description || "");
|
||||
const [location, setLocation] = useState(event?.location || "");
|
||||
const [startDateTime, setStartDateTime] = useState("");
|
||||
const [endDateTime, setEndDateTime] = useState("");
|
||||
const [selectedCalendarUrl, setSelectedCalendarUrl] = useState(calendarUrl);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [attendees, setAttendees] = useState<IcsAttendee[]>([]);
|
||||
const [showAttendees, setShowAttendees] = useState(false);
|
||||
const [recurrence, setRecurrence] = useState<IcsRecurrenceRule | undefined>(
|
||||
event?.recurrenceRule
|
||||
);
|
||||
const [showRecurrence, setShowRecurrence] = useState(() => {
|
||||
return !!event?.recurrenceRule;
|
||||
});
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [isAllDay, setIsAllDay] = useState(() => {
|
||||
return event?.start?.type === 'DATE';
|
||||
});
|
||||
|
||||
// Calculate organizer
|
||||
const organizer: IcsOrganizer | undefined =
|
||||
event?.organizer ||
|
||||
(user?.email
|
||||
? { email: user.email, name: user.email.split('@')[0] }
|
||||
: undefined);
|
||||
|
||||
// Check if current user is an attendee (invited to this event)
|
||||
const currentUserAttendee = event?.attendees?.find(
|
||||
(att) => user?.email && att.email.toLowerCase() === user.email.toLowerCase()
|
||||
);
|
||||
const isInvited = !!(
|
||||
event?.organizer &&
|
||||
currentUserAttendee &&
|
||||
event.organizer.email !== user?.email
|
||||
);
|
||||
const currentParticipationStatus =
|
||||
currentUserAttendee?.partstat || 'NEEDS-ACTION';
|
||||
|
||||
// Reset form when event changes
|
||||
useEffect(() => {
|
||||
setTitle(event?.summary || "");
|
||||
setDescription(event?.description || "");
|
||||
setLocation(event?.location || "");
|
||||
setSelectedCalendarUrl(calendarUrl);
|
||||
|
||||
// Initialize attendees from event
|
||||
if (event?.attendees && event.attendees.length > 0) {
|
||||
setAttendees(event.attendees);
|
||||
setShowAttendees(true);
|
||||
} else {
|
||||
setAttendees([]);
|
||||
setShowAttendees(false);
|
||||
}
|
||||
|
||||
// Initialize recurrence from event
|
||||
if (event?.recurrenceRule) {
|
||||
setRecurrence(event.recurrenceRule);
|
||||
setShowRecurrence(true);
|
||||
} else {
|
||||
setRecurrence(undefined);
|
||||
setShowRecurrence(false);
|
||||
}
|
||||
|
||||
// Initialize all-day from event
|
||||
const eventIsAllDay = event?.start?.type === 'DATE';
|
||||
setIsAllDay(eventIsAllDay);
|
||||
|
||||
// Parse start/end dates
|
||||
// Dates from adapter have timezone info and are "fake UTC" - use getUTC* methods
|
||||
if (event?.start?.date) {
|
||||
const startDate =
|
||||
event.start.date instanceof Date
|
||||
? event.start.date
|
||||
: new Date(event.start.date);
|
||||
// If there's timezone info, the date is "fake UTC"
|
||||
const isFakeUtc = Boolean(event.start.local?.timezone);
|
||||
|
||||
if (eventIsAllDay) {
|
||||
setStartDateTime(formatDateLocal(startDate, isFakeUtc));
|
||||
} else {
|
||||
setStartDateTime(formatDateTimeLocal(startDate, isFakeUtc));
|
||||
}
|
||||
} else {
|
||||
if (eventIsAllDay) {
|
||||
setStartDateTime(formatDateLocal(new Date()));
|
||||
} else {
|
||||
setStartDateTime(formatDateTimeLocal(new Date()));
|
||||
}
|
||||
}
|
||||
|
||||
if (event?.end?.date) {
|
||||
const endDate =
|
||||
event.end.date instanceof Date
|
||||
? event.end.date
|
||||
: new Date(event.end.date);
|
||||
const isFakeUtc = Boolean(event.end.local?.timezone);
|
||||
|
||||
if (eventIsAllDay) {
|
||||
// For all-day events, the end date in ICS is exclusive (next day)
|
||||
// But in the UI we want to show the inclusive end date (same day for 1-day event)
|
||||
// So subtract 1 day when displaying
|
||||
const displayEndDate = new Date(endDate);
|
||||
displayEndDate.setUTCDate(displayEndDate.getUTCDate() - 1);
|
||||
setEndDateTime(formatDateLocal(displayEndDate, isFakeUtc));
|
||||
} else {
|
||||
setEndDateTime(formatDateTimeLocal(endDate, isFakeUtc));
|
||||
}
|
||||
} else {
|
||||
if (eventIsAllDay) {
|
||||
// Default: same day
|
||||
setEndDateTime(formatDateLocal(new Date()));
|
||||
} else {
|
||||
// Default: 1 hour after start
|
||||
const defaultEnd = new Date();
|
||||
defaultEnd.setHours(defaultEnd.getHours() + 1);
|
||||
setEndDateTime(formatDateTimeLocal(defaultEnd));
|
||||
}
|
||||
}
|
||||
}, [event, calendarUrl]);
|
||||
|
||||
const handleSave = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
// Remove duration to avoid union type conflict
|
||||
// (IcsEvent is either end or duration, not both)
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { duration: _duration, ...eventWithoutDuration } = event ?? {};
|
||||
|
||||
let icsEvent: IcsEvent;
|
||||
|
||||
if (isAllDay) {
|
||||
// All-day event
|
||||
const startDate = parseDateLocal(startDateTime);
|
||||
const endDate = parseDateLocal(endDateTime);
|
||||
|
||||
// Create UTC dates for all-day events
|
||||
const utcStart = new Date(
|
||||
Date.UTC(
|
||||
startDate.getFullYear(),
|
||||
startDate.getMonth(),
|
||||
startDate.getDate()
|
||||
)
|
||||
);
|
||||
// For all-day events, the end date in ICS is exclusive (next day)
|
||||
// The user enters the inclusive end date, so we add 1 day for ICS
|
||||
const utcEnd = new Date(
|
||||
Date.UTC(
|
||||
endDate.getFullYear(),
|
||||
endDate.getMonth(),
|
||||
endDate.getDate() + 1 // Add 1 day for exclusive end
|
||||
)
|
||||
);
|
||||
|
||||
icsEvent = {
|
||||
...eventWithoutDuration,
|
||||
uid: event?.uid || crypto.randomUUID(),
|
||||
summary: title,
|
||||
description: description || undefined,
|
||||
location: location || undefined,
|
||||
stamp: event?.stamp || { date: new Date() },
|
||||
start: {
|
||||
date: utcStart,
|
||||
type: "DATE",
|
||||
},
|
||||
end: {
|
||||
date: utcEnd,
|
||||
type: "DATE",
|
||||
},
|
||||
organizer: organizer,
|
||||
attendees: attendees.length > 0 ? attendees : undefined,
|
||||
recurrenceRule: recurrence,
|
||||
};
|
||||
} else {
|
||||
// Timed event
|
||||
const startDate = parseDateTimeLocal(startDateTime);
|
||||
const endDate = parseDateTimeLocal(endDateTime);
|
||||
|
||||
// Create "fake UTC" dates where getUTCHours() = local hours
|
||||
// This is required because ts-ics uses getUTCHours() to generate ICS
|
||||
const fakeUtcStart = new Date(
|
||||
Date.UTC(
|
||||
startDate.getFullYear(),
|
||||
startDate.getMonth(),
|
||||
startDate.getDate(),
|
||||
startDate.getHours(),
|
||||
startDate.getMinutes(),
|
||||
startDate.getSeconds()
|
||||
)
|
||||
);
|
||||
const fakeUtcEnd = new Date(
|
||||
Date.UTC(
|
||||
endDate.getFullYear(),
|
||||
endDate.getMonth(),
|
||||
endDate.getDate(),
|
||||
endDate.getHours(),
|
||||
endDate.getMinutes(),
|
||||
endDate.getSeconds()
|
||||
)
|
||||
);
|
||||
|
||||
icsEvent = {
|
||||
...eventWithoutDuration,
|
||||
uid: event?.uid || crypto.randomUUID(),
|
||||
summary: title,
|
||||
description: description || undefined,
|
||||
location: location || undefined,
|
||||
stamp: event?.stamp || { date: new Date() },
|
||||
start: {
|
||||
date: fakeUtcStart,
|
||||
type: "DATE-TIME",
|
||||
local: {
|
||||
date: fakeUtcStart,
|
||||
timezone: BROWSER_TIMEZONE,
|
||||
tzoffset: adapter.getTimezoneOffset(startDate, BROWSER_TIMEZONE),
|
||||
},
|
||||
},
|
||||
end: {
|
||||
date: fakeUtcEnd,
|
||||
type: "DATE-TIME",
|
||||
local: {
|
||||
date: fakeUtcEnd,
|
||||
timezone: BROWSER_TIMEZONE,
|
||||
tzoffset: adapter.getTimezoneOffset(endDate, BROWSER_TIMEZONE),
|
||||
},
|
||||
},
|
||||
organizer: organizer,
|
||||
attendees: attendees.length > 0 ? attendees : undefined,
|
||||
recurrenceRule: recurrence,
|
||||
};
|
||||
}
|
||||
|
||||
await onSave(icsEvent, selectedCalendarUrl);
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error("Failed to save event:", error);
|
||||
alert(t('api.error.unexpected'));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteClick = () => {
|
||||
setShowDeleteModal(true);
|
||||
};
|
||||
|
||||
const handleDeleteConfirm = async (option?: RecurringDeleteOption) => {
|
||||
if (!onDelete || !event?.uid) return;
|
||||
|
||||
setShowDeleteModal(false);
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await onDelete(event as IcsEvent, selectedCalendarUrl, option);
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error("Failed to delete event:", error);
|
||||
alert(t('api.error.unexpected'));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteCancel = () => {
|
||||
setShowDeleteModal(false);
|
||||
};
|
||||
|
||||
const handleRespondToInvitation = async (
|
||||
status: 'ACCEPTED' | 'TENTATIVE' | 'DECLINED'
|
||||
) => {
|
||||
if (!onRespondToInvitation || !event) return;
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await onRespondToInvitation(event as IcsEvent, status);
|
||||
// Update local state to reflect new status
|
||||
setAttendees((prev) =>
|
||||
prev.map((att) =>
|
||||
user?.email && att.email.toLowerCase() === user.email.toLowerCase()
|
||||
? { ...att, partstat: status }
|
||||
: att
|
||||
)
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Failed to respond to invitation:", error);
|
||||
alert(t('api.error.unexpected'));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleStartDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newStartValue = e.target.value;
|
||||
|
||||
if (isAllDay) {
|
||||
const oldStart = parseDateLocal(startDateTime);
|
||||
const oldEnd = parseDateLocal(endDateTime);
|
||||
const duration = oldEnd.getTime() - oldStart.getTime();
|
||||
|
||||
const newStart = parseDateLocal(newStartValue);
|
||||
const newEnd = new Date(newStart.getTime() + duration);
|
||||
|
||||
setStartDateTime(newStartValue);
|
||||
setEndDateTime(formatDateLocal(newEnd));
|
||||
} else {
|
||||
const oldStart = parseDateTimeLocal(startDateTime);
|
||||
const oldEnd = parseDateTimeLocal(endDateTime);
|
||||
const duration = oldEnd.getTime() - oldStart.getTime();
|
||||
|
||||
const newStart = parseDateTimeLocal(newStartValue);
|
||||
const newEnd = new Date(newStart.getTime() + duration);
|
||||
|
||||
setStartDateTime(newStartValue);
|
||||
setEndDateTime(formatDateTimeLocal(newEnd));
|
||||
}
|
||||
};
|
||||
|
||||
const handleAllDayChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newIsAllDay = e.target.checked;
|
||||
setIsAllDay(newIsAllDay);
|
||||
|
||||
// Convert dates when switching modes
|
||||
if (newIsAllDay) {
|
||||
// Convert to date-only format
|
||||
const start = parseDateTimeLocal(startDateTime);
|
||||
const end = parseDateTimeLocal(endDateTime);
|
||||
setStartDateTime(formatDateLocal(start));
|
||||
setEndDateTime(formatDateLocal(end));
|
||||
} else {
|
||||
// Convert to datetime format
|
||||
const start = parseDateLocal(startDateTime);
|
||||
const end = parseDateLocal(endDateTime);
|
||||
setStartDateTime(formatDateTimeLocal(start));
|
||||
setEndDateTime(formatDateTimeLocal(end));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
size={ModalSize.MEDIUM}
|
||||
title={
|
||||
mode === "create"
|
||||
? t('calendar.event.createTitle')
|
||||
: t('calendar.event.editTitle')
|
||||
}
|
||||
leftActions={
|
||||
mode === "edit" && onDelete ? (
|
||||
<Button
|
||||
color="error"
|
||||
onClick={handleDeleteClick}
|
||||
disabled={isLoading}
|
||||
>
|
||||
{t('calendar.event.delete')}
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
rightActions={
|
||||
<>
|
||||
<Button color="neutral" onClick={onClose} disabled={isLoading}>
|
||||
{t('calendar.event.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
color="brand"
|
||||
onClick={handleSave}
|
||||
disabled={isLoading || !title.trim()}
|
||||
>
|
||||
{isLoading ? "..." : t('calendar.event.save')}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="event-modal__content">
|
||||
<Input
|
||||
label={t('calendar.event.title')}
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
fullWidth
|
||||
/>
|
||||
|
||||
{/* Invitation Response Section */}
|
||||
{isInvited && mode === 'edit' && onRespondToInvitation && (
|
||||
<div className="event-modal__invitation">
|
||||
<div className="event-modal__invitation-header">
|
||||
<span className="event-modal__invitation-label">
|
||||
{t('calendar.event.invitation', { defaultValue: 'Invitation' })}
|
||||
</span>
|
||||
<span className="event-modal__invitation-organizer">
|
||||
{t('calendar.event.organizedBy', {
|
||||
defaultValue: 'Organisé par',
|
||||
})}{' '}
|
||||
{event?.organizer?.name || event?.organizer?.email}
|
||||
</span>
|
||||
</div>
|
||||
<div className="event-modal__invitation-actions">
|
||||
<Button
|
||||
size="small"
|
||||
color={
|
||||
currentParticipationStatus === 'ACCEPTED'
|
||||
? 'success'
|
||||
: 'neutral'
|
||||
}
|
||||
onClick={() => handleRespondToInvitation('ACCEPTED')}
|
||||
disabled={
|
||||
isLoading || currentParticipationStatus === 'ACCEPTED'
|
||||
}
|
||||
>
|
||||
✓ {t('calendar.event.accept', { defaultValue: 'Accepter' })}
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
color={
|
||||
currentParticipationStatus === 'TENTATIVE'
|
||||
? 'warning'
|
||||
: 'neutral'
|
||||
}
|
||||
onClick={() => handleRespondToInvitation('TENTATIVE')}
|
||||
disabled={
|
||||
isLoading || currentParticipationStatus === 'TENTATIVE'
|
||||
}
|
||||
>
|
||||
? {t('calendar.event.maybe', { defaultValue: 'Peut-être' })}
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
color={
|
||||
currentParticipationStatus === 'DECLINED'
|
||||
? 'error'
|
||||
: 'neutral'
|
||||
}
|
||||
onClick={() => handleRespondToInvitation('DECLINED')}
|
||||
disabled={
|
||||
isLoading || currentParticipationStatus === 'DECLINED'
|
||||
}
|
||||
>
|
||||
✗ {t('calendar.event.decline', { defaultValue: 'Refuser' })}
|
||||
</Button>
|
||||
</div>
|
||||
{currentParticipationStatus && (
|
||||
<div className="event-modal__invitation-status">
|
||||
{t('calendar.event.yourResponse', {
|
||||
defaultValue: 'Votre réponse',
|
||||
})}
|
||||
:{' '}
|
||||
<strong>
|
||||
{currentParticipationStatus === 'ACCEPTED' &&
|
||||
t('calendar.event.accepted', { defaultValue: 'Accepté' })}
|
||||
{currentParticipationStatus === 'TENTATIVE' &&
|
||||
t('calendar.event.tentative', {
|
||||
defaultValue: 'Peut-être',
|
||||
})}
|
||||
{currentParticipationStatus === 'DECLINED' &&
|
||||
t('calendar.event.declined', { defaultValue: 'Refusé' })}
|
||||
{currentParticipationStatus === 'NEEDS-ACTION' &&
|
||||
t('calendar.event.needsAction', {
|
||||
defaultValue: 'En attente',
|
||||
})}
|
||||
</strong>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Select
|
||||
label={t('calendar.event.calendar', { defaultValue: 'Calendrier' })}
|
||||
value={selectedCalendarUrl}
|
||||
onChange={(e) => setSelectedCalendarUrl(String(e.target.value))}
|
||||
options={calendars.map((cal) => ({
|
||||
value: cal.url,
|
||||
label: cal.displayName || cal.url,
|
||||
}))}
|
||||
fullWidth
|
||||
/>
|
||||
|
||||
<label className="event-modal__checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isAllDay}
|
||||
onChange={handleAllDayChange}
|
||||
/>
|
||||
<span>{t('calendar.event.allDay')}</span>
|
||||
</label>
|
||||
|
||||
<div className="event-modal__datetime-row">
|
||||
<Input
|
||||
type={isAllDay ? "date" : "datetime-local"}
|
||||
label={t('calendar.event.start')}
|
||||
value={startDateTime}
|
||||
onChange={handleStartDateChange}
|
||||
fullWidth
|
||||
/>
|
||||
<Input
|
||||
type={isAllDay ? "date" : "datetime-local"}
|
||||
label={t('calendar.event.end')}
|
||||
value={endDateTime}
|
||||
onChange={(e) => setEndDateTime(e.target.value)}
|
||||
fullWidth
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
label={t('calendar.event.location')}
|
||||
value={location}
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
fullWidth
|
||||
/>
|
||||
|
||||
<TextArea
|
||||
label={t('calendar.event.description')}
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
rows={3}
|
||||
fullWidth
|
||||
/>
|
||||
|
||||
<div className="event-modal__features">
|
||||
<button
|
||||
type="button"
|
||||
className={`event-modal__feature-tag ${
|
||||
showAttendees ? 'event-modal__feature-tag--active' : ''
|
||||
}`}
|
||||
onClick={() => setShowAttendees(!showAttendees)}
|
||||
>
|
||||
<span className="material-icons">people</span>
|
||||
{t('calendar.event.attendees')}
|
||||
{attendees.length > 0 && ` (${attendees.length})`}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={`event-modal__feature-tag ${
|
||||
showRecurrence ? 'event-modal__feature-tag--active' : ''
|
||||
}`}
|
||||
onClick={() => setShowRecurrence(!showRecurrence)}
|
||||
>
|
||||
<span className="material-icons">repeat</span>
|
||||
{t('calendar.recurrence.label')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showAttendees && (
|
||||
<div className="event-modal__attendees-input">
|
||||
<AttendeesInput
|
||||
attendees={attendees}
|
||||
onChange={setAttendees}
|
||||
organizerEmail={user?.email}
|
||||
organizer={organizer}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showRecurrence && (
|
||||
<div className="event-modal__recurrence-editor">
|
||||
<RecurrenceEditor value={recurrence} onChange={setRecurrence} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<DeleteEventModal
|
||||
isOpen={showDeleteModal}
|
||||
isRecurring={!!recurrence}
|
||||
onConfirm={handleDeleteConfirm}
|
||||
onCancel={handleDeleteCancel}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user