Camille Moussu
1097 lines
36 KiB
TypeScript
1097 lines
36 KiB
TypeScript
import { useAppDispatch, useAppSelector } from "@/app/hooks";
|
|
import { ResponsiveDialog } from "@/components/Dialog";
|
|
import EventFormFields from "@/components/Event/EventFormFields";
|
|
import { addDays } from "@/components/Event/utils/dateRules";
|
|
import { formatDateTimeInTimezone } from "@/components/Event/utils/dateTimeFormatters";
|
|
import { convertFormDateTimeToISO } from "@/components/Event/utils/dateTimeHelpers";
|
|
import {
|
|
putEventAsync,
|
|
updateEventInstanceAsync,
|
|
updateSeriesAsync,
|
|
} from "@/features/Calendars/services";
|
|
import { updateAttendeesAfterTimeChange } from "@/features/Events/updateEventHelpers/updateAttendeesAfterTimeChange";
|
|
import { assertThunkSuccess } from "@/utils/assertThunkSuccess";
|
|
import {
|
|
buildEventFormTempData,
|
|
clearEventFormTempData,
|
|
EventFormContext,
|
|
EventFormState,
|
|
restoreEventFormDataFromTemp as restoreEventFormDataFromStorage,
|
|
restoreFormDataFromTemp,
|
|
saveEventFormDataToTemp,
|
|
showErrorNotification,
|
|
} from "@/utils/eventFormTempStorage";
|
|
import { extractEventBaseUuid } from "@/utils/extractEventBaseUuid";
|
|
import {
|
|
browserDefaultTimeZone,
|
|
getTimezoneOffset,
|
|
resolveTimezone,
|
|
} from "@/utils/timezone";
|
|
import { TIMEZONES } from "@/utils/timezone-data";
|
|
import { addVideoConferenceToDescription } from "@/utils/videoConferenceUtils";
|
|
import { Box, Button } from "@linagora/twake-mui";
|
|
import AddIcon from "@mui/icons-material/Add";
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { useI18n } from "twake-i18n";
|
|
import {
|
|
clearFetchCache,
|
|
removeEvent,
|
|
updateEventLocal,
|
|
} from "../Calendars/CalendarSlice";
|
|
import { Calendar } from "../Calendars/CalendarTypes";
|
|
import { userAttendee } from "../User/models/attendee";
|
|
import { deleteEvent, getEvent, putEvent } from "./EventApi";
|
|
import { CalendarEvent, RepetitionObject } from "./EventsTypes";
|
|
import { detectRecurringEventChanges } from "./eventUtils";
|
|
import { moveEventBetweenCalendars } from "./updateEventHelpers/moveEventBetweenCalendars";
|
|
|
|
function EventUpdateModal({
|
|
eventId,
|
|
calId,
|
|
open,
|
|
onClose,
|
|
onCloseAll,
|
|
eventData,
|
|
typeOfAction,
|
|
}: {
|
|
eventId: string;
|
|
calId: string;
|
|
open: boolean;
|
|
onClose: (event: unknown, reason: "backdropClick" | "escapeKeyDown") => void;
|
|
onCloseAll?: () => void;
|
|
eventData?: CalendarEvent | null;
|
|
typeOfAction?: "solo" | "all";
|
|
}) {
|
|
const { t } = useI18n();
|
|
const dispatch = useAppDispatch();
|
|
const calList = useAppSelector((state) => state.calendars.list);
|
|
// Get event from Redux store (cached data) as fallback
|
|
const cachedEvent = useAppSelector(
|
|
(state) => state.calendars.list[calId]?.events[eventId]
|
|
);
|
|
|
|
// Use fresh data if available, otherwise use eventData from props, otherwise use cached data
|
|
const event = eventData || cachedEvent;
|
|
|
|
const user = useAppSelector((state) => state.user);
|
|
|
|
const userPersonalCalendars: Calendar[] = useMemo(() => {
|
|
const allCalendars = Object.values(calList) as Calendar[];
|
|
return allCalendars.filter(
|
|
(calendar: Calendar) =>
|
|
calendar.id?.split("/")[0] === user.userData?.openpaasId ||
|
|
(calendar.delegated && calendar.access?.write)
|
|
);
|
|
}, [calList, user.userData?.openpaasId]);
|
|
|
|
const timezoneList = useMemo(() => {
|
|
const zones = Object.keys(TIMEZONES.zones).sort();
|
|
const browserTz = resolveTimezone(browserDefaultTimeZone);
|
|
|
|
return { zones, browserTz, getTimezoneOffset };
|
|
}, []);
|
|
|
|
const [showMore, setShowMore] = useState(false);
|
|
const [showDescription, setShowDescription] = useState(
|
|
event?.description ? true : false
|
|
);
|
|
const [showRepeat, setShowRepeat] = useState(
|
|
event?.repetition?.freq ? true : false
|
|
);
|
|
|
|
// Form state - initialize with empty values
|
|
const [title, setTitle] = useState("");
|
|
const [description, setDescription] = useState("");
|
|
const [location, setLocation] = useState("");
|
|
const [start, setStart] = useState("");
|
|
const [end, setEnd] = useState("");
|
|
const [allday, setAllDay] = useState(false);
|
|
const [repetition, setRepetition] = useState<RepetitionObject>(
|
|
{} as RepetitionObject
|
|
);
|
|
const [alarm, setAlarm] = useState("");
|
|
const [busy, setBusy] = useState("OPAQUE");
|
|
const [eventClass, setEventClass] = useState("PUBLIC");
|
|
const [timezone, setTimezone] = useState(
|
|
resolveTimezone(browserDefaultTimeZone)
|
|
);
|
|
const [newCalId, setNewCalId] = useState(calId);
|
|
const defaultCalendarId = useMemo(
|
|
() => userPersonalCalendars[0]?.id ?? "",
|
|
[userPersonalCalendars]
|
|
);
|
|
|
|
const [calendarid, setCalendarid] = useState(calId ?? defaultCalendarId);
|
|
|
|
const [attendees, setAttendees] = useState<userAttendee[]>([]);
|
|
const [hasVideoConference, setHasVideoConference] = useState(false);
|
|
const [meetingLink, setMeetingLink] = useState<string | null>(null);
|
|
const [isFormValid, setIsFormValid] = useState(false);
|
|
const [showValidationErrors, setShowValidationErrors] = useState(false);
|
|
const [hasEndDateChanged, setHasEndDateChanged] = useState(false);
|
|
|
|
const resetAllStateToDefault = useCallback(() => {
|
|
setShowMore(false);
|
|
setShowDescription(false);
|
|
setShowRepeat(false);
|
|
setTitle("");
|
|
setDescription("");
|
|
setAttendees([]);
|
|
setLocation("");
|
|
setStart("");
|
|
setEnd("");
|
|
if (defaultCalendarId) {
|
|
setCalendarid(defaultCalendarId);
|
|
}
|
|
setAllDay(false);
|
|
setRepetition({} as RepetitionObject);
|
|
setAlarm("");
|
|
setEventClass("PUBLIC");
|
|
setBusy("OPAQUE");
|
|
setTimezone(resolveTimezone(browserDefaultTimeZone));
|
|
setHasVideoConference(false);
|
|
setMeetingLink(null);
|
|
}, [defaultCalendarId]);
|
|
|
|
// Prevent repeated initialization loops
|
|
const initializedKeyRef = useRef<string | null>(null);
|
|
// Track when restoring from error to prevent other useEffects from overriding restored data
|
|
const isRestoringFromErrorRef = useRef(false);
|
|
|
|
// State to hold the master event when editing "all events"
|
|
const [masterEvent, setMasterEvent] = useState<CalendarEvent | null>(null);
|
|
const [isLoadingMasterEvent, setIsLoadingMasterEvent] = useState(false);
|
|
|
|
// Fetch master event when editing "all events" of a recurring series
|
|
useEffect(() => {
|
|
if (!event || !open || typeOfAction !== "all") {
|
|
setMasterEvent(null);
|
|
return;
|
|
}
|
|
|
|
const isRecurringEvent = !!event.repetition?.freq;
|
|
if (!isRecurringEvent) {
|
|
setMasterEvent(null);
|
|
return;
|
|
}
|
|
|
|
// Check if this is an instance (has recurrence-id)
|
|
const [baseUID, recurrenceId] = event.uid.split("/");
|
|
if (!recurrenceId) {
|
|
// This is already the master event
|
|
setMasterEvent(event);
|
|
return;
|
|
}
|
|
|
|
// Fetch the master event
|
|
const fetchMasterEvent = async () => {
|
|
setIsLoadingMasterEvent(true);
|
|
try {
|
|
const masterEventToFetch = {
|
|
...event,
|
|
uid: baseUID, // Use base UID to get master event
|
|
};
|
|
const fetchedMasterEvent = await getEvent(masterEventToFetch, true);
|
|
setMasterEvent(fetchedMasterEvent);
|
|
} catch (err) {
|
|
console.error("Failed to fetch master event:", err);
|
|
// Fallback to using the clicked instance
|
|
setMasterEvent(event);
|
|
} finally {
|
|
setIsLoadingMasterEvent(false);
|
|
}
|
|
};
|
|
|
|
fetchMasterEvent();
|
|
}, [event, open, typeOfAction]);
|
|
|
|
// Initialize form state when event data is available
|
|
useEffect(() => {
|
|
// Skip if restoring from error - data already restored
|
|
if (isRestoringFromErrorRef.current) {
|
|
return;
|
|
}
|
|
|
|
// Skip if still loading master event
|
|
if (isLoadingMasterEvent) {
|
|
return;
|
|
}
|
|
|
|
if (event && open) {
|
|
// Use master event for "all" action, otherwise use the clicked event
|
|
const eventToDisplay =
|
|
typeOfAction === "all" && masterEvent ? masterEvent : event;
|
|
|
|
// Reset validation errors when modal opens
|
|
setShowValidationErrors(false);
|
|
|
|
// Editing existing event - populate fields with event data
|
|
setTitle(eventToDisplay.title ?? "");
|
|
setDescription(eventToDisplay.description ?? "");
|
|
setLocation(eventToDisplay.location ?? "");
|
|
|
|
// Handle all-day events properly
|
|
const isAllDay = eventToDisplay.allday ?? false;
|
|
setAllDay(isAllDay);
|
|
|
|
// Get event's original timezone
|
|
const eventTimezone = eventToDisplay.timezone
|
|
? resolveTimezone(eventToDisplay.timezone)
|
|
: resolveTimezone(browserDefaultTimeZone);
|
|
|
|
// Format dates based on all-day status
|
|
if (eventToDisplay.start) {
|
|
if (isAllDay) {
|
|
// For all-day events, use date format (YYYY-MM-DD)
|
|
const startDate = new Date(eventToDisplay.start);
|
|
setStart(startDate.toISOString().split("T")[0]);
|
|
} else {
|
|
// For timed events, format in the event's original timezone
|
|
setStart(
|
|
formatDateTimeInTimezone(eventToDisplay.start, eventTimezone)
|
|
);
|
|
}
|
|
} else {
|
|
setStart("");
|
|
}
|
|
|
|
if (eventToDisplay.end) {
|
|
if (isAllDay) {
|
|
// For all-day events, use date format (YYYY-MM-DD)
|
|
const endDate = new Date(eventToDisplay.end);
|
|
endDate.setDate(endDate.getDate() - 1);
|
|
setEnd(endDate.toISOString().split("T")[0]);
|
|
} else {
|
|
// For timed events, format in the event's original timezone
|
|
setEnd(formatDateTimeInTimezone(eventToDisplay.end, eventTimezone));
|
|
}
|
|
} else {
|
|
setEnd("");
|
|
}
|
|
|
|
// Find correct calendar index
|
|
setCalendarid(calId);
|
|
|
|
// Handle repetition properly - check both current event and base event
|
|
const baseEventId = extractEventBaseUuid(eventToDisplay.uid);
|
|
const baseEvent = calList[calId]?.events[baseEventId];
|
|
const repetitionSource =
|
|
eventToDisplay.repetition || baseEvent?.repetition;
|
|
|
|
if (repetitionSource && repetitionSource.freq) {
|
|
const repetitionData: RepetitionObject = {
|
|
freq: repetitionSource.freq,
|
|
interval: repetitionSource.interval || 1,
|
|
occurrences: repetitionSource.occurrences,
|
|
endDate: repetitionSource.endDate,
|
|
byday: repetitionSource.byday || null,
|
|
};
|
|
setRepetition(repetitionData);
|
|
setShowRepeat(true);
|
|
} else {
|
|
setRepetition({} as RepetitionObject);
|
|
setShowRepeat(false);
|
|
}
|
|
|
|
setAttendees(
|
|
eventToDisplay.attendee
|
|
? eventToDisplay.attendee.filter(
|
|
(a: userAttendee) =>
|
|
a.cal_address !== eventToDisplay.organizer?.cal_address
|
|
)
|
|
: []
|
|
);
|
|
setAlarm(eventToDisplay.alarm?.trigger ?? "");
|
|
setEventClass(eventToDisplay.class ?? "PUBLIC");
|
|
setBusy(eventToDisplay.transp ?? "OPAQUE");
|
|
|
|
if (eventToDisplay.timezone) {
|
|
const resolvedTimezone = resolveTimezone(eventToDisplay.timezone);
|
|
setTimezone(resolvedTimezone);
|
|
} else {
|
|
const browserTz = resolveTimezone(browserDefaultTimeZone);
|
|
setTimezone(browserTz);
|
|
}
|
|
setHasVideoConference(
|
|
eventToDisplay.x_openpass_videoconference ? true : false
|
|
);
|
|
setMeetingLink(eventToDisplay.x_openpass_videoconference || null);
|
|
setNewCalId(eventToDisplay.calId || calId);
|
|
|
|
// Update description to include video conference footer if exists
|
|
if (
|
|
eventToDisplay.x_openpass_videoconference &&
|
|
eventToDisplay.description
|
|
) {
|
|
const hasVideoFooter = eventToDisplay.description.includes("Visio:");
|
|
if (!hasVideoFooter) {
|
|
setDescription(
|
|
addVideoConferenceToDescription(
|
|
eventToDisplay.description,
|
|
eventToDisplay.x_openpass_videoconference
|
|
)
|
|
);
|
|
} else {
|
|
setDescription(eventToDisplay.description);
|
|
}
|
|
}
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [
|
|
open,
|
|
event,
|
|
calId,
|
|
userPersonalCalendars,
|
|
calList,
|
|
masterEvent,
|
|
isLoadingMasterEvent,
|
|
]);
|
|
|
|
// Helper to close modal(s) - use onCloseAll if available to close preview modal too
|
|
const closeModal = () => {
|
|
if (onCloseAll) {
|
|
onCloseAll();
|
|
} else {
|
|
onClose({}, "backdropClick");
|
|
}
|
|
};
|
|
|
|
const handleClose = () => {
|
|
// Clear temp data when user manually closes modal
|
|
clearEventFormTempData("update");
|
|
closeModal();
|
|
setShowValidationErrors(false);
|
|
resetAllStateToDefault();
|
|
initializedKeyRef.current = null;
|
|
};
|
|
|
|
// Function to save current form data to temp storage
|
|
const saveCurrentFormData = useCallback(() => {
|
|
const formState: EventFormState = {
|
|
title,
|
|
description,
|
|
location,
|
|
start,
|
|
end,
|
|
allday,
|
|
repetition,
|
|
attendees,
|
|
alarm,
|
|
busy,
|
|
eventClass,
|
|
timezone,
|
|
calendarid,
|
|
hasVideoConference,
|
|
meetingLink,
|
|
showMore,
|
|
showDescription,
|
|
showRepeat,
|
|
hasEndDateChanged,
|
|
};
|
|
const context: EventFormContext = {
|
|
eventId,
|
|
calId,
|
|
typeOfAction,
|
|
};
|
|
return buildEventFormTempData(formState, context);
|
|
}, [
|
|
title,
|
|
description,
|
|
location,
|
|
start,
|
|
end,
|
|
allday,
|
|
repetition,
|
|
attendees,
|
|
alarm,
|
|
busy,
|
|
eventClass,
|
|
timezone,
|
|
calendarid,
|
|
hasVideoConference,
|
|
meetingLink,
|
|
showMore,
|
|
showDescription,
|
|
showRepeat,
|
|
hasEndDateChanged,
|
|
eventId,
|
|
calId,
|
|
typeOfAction,
|
|
]);
|
|
|
|
// Check for temp data when modal opens
|
|
useEffect(() => {
|
|
if (open && event) {
|
|
const tempData = restoreEventFormDataFromStorage("update");
|
|
if (
|
|
tempData &&
|
|
tempData.fromError &&
|
|
tempData.eventId === eventId &&
|
|
tempData.calId === calId &&
|
|
tempData.typeOfAction === typeOfAction
|
|
) {
|
|
// Mark that we're restoring from error to prevent other useEffects from overriding
|
|
isRestoringFromErrorRef.current = true;
|
|
|
|
// Restore form data from previous failed save
|
|
restoreFormDataFromTemp(tempData, {
|
|
setTitle,
|
|
setDescription,
|
|
setLocation,
|
|
setStart,
|
|
setEnd,
|
|
setAllDay,
|
|
setRepetition,
|
|
setAttendees,
|
|
setAlarm,
|
|
setBusy,
|
|
setEventClass,
|
|
setTimezone,
|
|
setCalendarid,
|
|
setHasVideoConference,
|
|
setMeetingLink,
|
|
setShowMore,
|
|
setShowDescription,
|
|
setShowRepeat,
|
|
setHasEndDateChanged,
|
|
});
|
|
// Clear the error flag but keep data until successful save
|
|
const updatedTempData = { ...tempData, fromError: false };
|
|
saveEventFormDataToTemp("update", updatedTempData);
|
|
|
|
// Reset flag after restore completes (use setTimeout to ensure other useEffects have checked the flag)
|
|
setTimeout(() => {
|
|
isRestoringFromErrorRef.current = false;
|
|
}, 0);
|
|
}
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [open, eventId, calId, typeOfAction]);
|
|
|
|
const handleSave = async () => {
|
|
// Show validation errors when Save is clicked
|
|
setShowValidationErrors(true);
|
|
|
|
// Check if form is valid before saving
|
|
if (!isFormValid) {
|
|
return;
|
|
}
|
|
|
|
if (!event) {
|
|
return;
|
|
}
|
|
|
|
const organizer = event.organizer;
|
|
|
|
const targetCalendar = calList[calendarid];
|
|
if (!targetCalendar) {
|
|
console.error("Target calendar not found");
|
|
return;
|
|
}
|
|
|
|
// Reset validation state when validation passes
|
|
setShowValidationErrors(false);
|
|
|
|
// Handle recurrence instances
|
|
const [baseUID, recurrenceId] = event.uid.split("/");
|
|
|
|
// Check if this is a recurring event
|
|
const isRecurringEvent = !!event.repetition?.freq;
|
|
|
|
const getSeriesInstances = (): Record<string, CalendarEvent> => {
|
|
const instances: Record<string, CalendarEvent> = {};
|
|
const seriesEvents = targetCalendar.events || {};
|
|
|
|
Object.keys(seriesEvents).forEach((eventId) => {
|
|
const instance = seriesEvents[eventId];
|
|
if (instance && extractEventBaseUuid(eventId) === baseUID) {
|
|
instances[eventId] = { ...instance };
|
|
}
|
|
});
|
|
|
|
return instances;
|
|
};
|
|
|
|
// When editing "all events" of a recurring series, use the master event we already fetched
|
|
let masterEventData: CalendarEvent | null = null;
|
|
if (isRecurringEvent && typeOfAction === "all") {
|
|
// We already have the master event from state
|
|
masterEventData = masterEvent;
|
|
|
|
if (!masterEventData) {
|
|
// This shouldn't happen, but handle it gracefully
|
|
const formDataToSave = saveCurrentFormData();
|
|
const errorFormData = {
|
|
...formDataToSave,
|
|
fromError: true,
|
|
};
|
|
saveEventFormDataToTemp("update", errorFormData);
|
|
|
|
showErrorNotification(
|
|
"Failed to load master event data. Please try again."
|
|
);
|
|
|
|
// Dispatch eventModalError to reopen modal
|
|
window.dispatchEvent(
|
|
new CustomEvent("eventModalError", {
|
|
detail: { type: "update", eventId, calId, typeOfAction },
|
|
})
|
|
);
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Handle start and end dates based on all-day status
|
|
let startDate: string;
|
|
let endDate: string;
|
|
|
|
// For single events or "solo" edits, use the edited dates from form
|
|
if (allday) {
|
|
// For all-day events, use date format (YYYY-MM-DD)
|
|
// Extract date string directly to avoid timezone conversion issues
|
|
const startDateOnly = (start || "").split("T")[0];
|
|
const endDateOnlyUI = (end || start || "").split("T")[0];
|
|
// API needs end date = UI end date + 1 day
|
|
const endDateOnlyAPI = addDays(endDateOnlyUI, 1);
|
|
// Parse date string and create Date at UTC midnight to avoid timezone offset issues
|
|
const [startYear, startMonth, startDay] = startDateOnly
|
|
.split("-")
|
|
.map(Number);
|
|
const [endYear, endMonth, endDay] = endDateOnlyAPI.split("-").map(Number);
|
|
const startDateObj = new Date(
|
|
Date.UTC(startYear, startMonth - 1, startDay, 0, 0, 0, 0)
|
|
);
|
|
const endDateObj = new Date(
|
|
Date.UTC(endYear, endMonth - 1, endDay, 0, 0, 0, 0)
|
|
);
|
|
startDate = startDateObj.toISOString();
|
|
endDate = endDateObj.toISOString();
|
|
} else {
|
|
// For timed events
|
|
startDate = convertFormDateTimeToISO(start, timezone);
|
|
// In normal mode, only override end date when the end date field is not shown and end date is same as start date
|
|
const startDateOnly = (start || "").split("T")[0];
|
|
const endDateOnly = (end || "").split("T")[0];
|
|
if (!showMore && !hasEndDateChanged && startDateOnly === endDateOnly) {
|
|
const endTimeOnly = end.includes("T")
|
|
? end.split("T")[1]?.slice(0, 5) || "00:00"
|
|
: "00:00";
|
|
const endDateTime = `${startDateOnly}T${endTimeOnly}`;
|
|
endDate = convertFormDateTimeToISO(endDateTime, timezone);
|
|
} else {
|
|
// Extended mode or end date explicitly shown in normal mode or end date differs from start date: use actual end datetime
|
|
endDate = convertFormDateTimeToISO(end, timezone);
|
|
}
|
|
}
|
|
|
|
const eventStartChanged =
|
|
new Date(event.start).getTime() !== new Date(startDate).getTime();
|
|
const eventEndChanged =
|
|
new Date(event?.end ?? "").getTime() !== new Date(endDate).getTime();
|
|
const timeChanged = eventStartChanged || eventEndChanged;
|
|
|
|
const newEvent: CalendarEvent = {
|
|
...updateAttendeesAfterTimeChange(event, timeChanged, attendees),
|
|
calId: newCalId || calId,
|
|
title,
|
|
URL: event.URL ?? `/calendars/${newCalId || calId}/${event.uid}.ics`,
|
|
start: startDate,
|
|
end: endDate,
|
|
allday,
|
|
uid: event.uid,
|
|
description,
|
|
location,
|
|
repetition,
|
|
class: eventClass,
|
|
organizer: organizer,
|
|
timezone,
|
|
transp: busy,
|
|
sequence: (event.sequence ?? 1) + 1,
|
|
color: targetCalendar?.color,
|
|
alarm: { trigger: alarm, action: "EMAIL" },
|
|
x_openpass_videoconference: meetingLink || undefined,
|
|
};
|
|
|
|
// Special case: When converting recurring event to non-recurring
|
|
if (
|
|
recurrenceId &&
|
|
typeOfAction === "all" &&
|
|
event.repetition?.freq &&
|
|
!repetition.freq
|
|
) {
|
|
const baseUID = extractEventBaseUuid(event.uid);
|
|
|
|
// Save current form data to temp storage before closing
|
|
const formDataToSave = saveCurrentFormData();
|
|
saveEventFormDataToTemp("update", formDataToSave);
|
|
|
|
// Close modal immediately for better UX
|
|
closeModal();
|
|
|
|
const seriesInstancesSnapshot = getSeriesInstances();
|
|
let hasRemovedSeriesInstances = false;
|
|
let createdSingleEventUid: string | null = null;
|
|
|
|
const removeSeriesInstancesFromUI = () => {
|
|
if (!seriesInstancesSnapshot) return;
|
|
Object.keys(seriesInstancesSnapshot).forEach((eventId) => {
|
|
dispatch(removeEvent({ calendarUid: calId, eventUid: eventId }));
|
|
});
|
|
hasRemovedSeriesInstances = true;
|
|
};
|
|
|
|
const restoreSeriesInstancesToUI = () => {
|
|
if (!seriesInstancesSnapshot) return;
|
|
Object.values(seriesInstancesSnapshot).forEach((instance) => {
|
|
dispatch(
|
|
updateEventLocal({
|
|
calId,
|
|
event: instance,
|
|
})
|
|
);
|
|
});
|
|
};
|
|
|
|
try {
|
|
// STEP 1: Delete ALL instances of recurring event
|
|
// Note: This system stores instances only, no master event file
|
|
|
|
// Collect all instances that need to be deleted
|
|
const instancesToDelete = Object.keys(targetCalendar.events)
|
|
.filter((eventId) => extractEventBaseUuid(eventId) === baseUID)
|
|
.map((eventId) => targetCalendar.events[eventId]);
|
|
|
|
// Get unique URLs to avoid deleting same file multiple times
|
|
const uniqueURLs = new Set<string>();
|
|
const instancesByURL = new Map<string, CalendarEvent[]>();
|
|
|
|
instancesToDelete.forEach((instance) => {
|
|
if (!instancesByURL.has(instance.URL)) {
|
|
instancesByURL.set(instance.URL, []);
|
|
}
|
|
instancesByURL.get(instance.URL)!.push(instance);
|
|
uniqueURLs.add(instance.URL);
|
|
});
|
|
|
|
// Delete each unique URL once
|
|
const deletePromises = Array.from(uniqueURLs).map(async (url) => {
|
|
try {
|
|
await deleteEvent(url);
|
|
} catch (deleteError) {
|
|
// Check if error is an object with response or message properties
|
|
const errorObj = deleteError as {
|
|
response?: { status?: number };
|
|
message?: string;
|
|
};
|
|
|
|
// Silently ignore 404 - file might already be deleted
|
|
const is404 =
|
|
errorObj.response?.status === 404 ||
|
|
errorObj.message?.includes("404") ||
|
|
errorObj.message?.includes("Not Found");
|
|
|
|
if (!is404) {
|
|
console.error(
|
|
`Failed to delete event file: ${errorObj.message || "Unknown error"}`
|
|
);
|
|
}
|
|
}
|
|
});
|
|
|
|
await Promise.all(deletePromises);
|
|
|
|
// Small delay to ensure backend processes deletions
|
|
await new Promise((resolve) => setTimeout(resolve, 100));
|
|
|
|
// STEP 2: Create new non-recurring event
|
|
const newEventUID = crypto.randomUUID();
|
|
const finalNewEvent = {
|
|
...newEvent,
|
|
uid: newEventUID,
|
|
URL: `/calendars/${newCalId || calId}/${newEventUID}.ics`,
|
|
sequence: 1, // New event with new UID starts at sequence 1
|
|
recurrenceId: undefined,
|
|
};
|
|
|
|
// STEP 3: Persist new event to server
|
|
await putEvent(finalNewEvent, targetCalendar.owner?.emails?.[0]);
|
|
|
|
// STEP 4: Update Redux store - Add new event first to prevent empty grid
|
|
dispatch(updateEventLocal({ calId, event: finalNewEvent }));
|
|
createdSingleEventUid = finalNewEvent.uid;
|
|
|
|
// Clear cache to ensure navigation to other weeks works
|
|
dispatch(clearFetchCache(calId));
|
|
|
|
// STEP 5: Remove old recurring instances only after the rest succeeds
|
|
removeSeriesInstancesFromUI();
|
|
|
|
// Clear temp data on successful save
|
|
clearEventFormTempData("update");
|
|
|
|
// Reset all state to default values only on successful save
|
|
resetAllStateToDefault();
|
|
initializedKeyRef.current = null;
|
|
} catch (err) {
|
|
// Check if error is an object with a message property
|
|
const errorObj = err as { message?: string };
|
|
|
|
// API failed - restore form data and mark as error
|
|
const errorFormData = {
|
|
...formDataToSave,
|
|
fromError: true,
|
|
};
|
|
saveEventFormDataToTemp("update", errorFormData);
|
|
|
|
// Show error notification
|
|
showErrorNotification(
|
|
errorObj.message ||
|
|
"Failed to convert recurring event. Please try again."
|
|
);
|
|
|
|
if (createdSingleEventUid) {
|
|
dispatch(
|
|
removeEvent({ calendarUid: calId, eventUid: createdSingleEventUid })
|
|
);
|
|
}
|
|
|
|
if (hasRemovedSeriesInstances) {
|
|
restoreSeriesInstancesToUI();
|
|
}
|
|
|
|
// Try to reopen modal by dispatching custom event
|
|
window.dispatchEvent(
|
|
new CustomEvent("eventModalError", {
|
|
detail: { type: "update", eventId, calId, typeOfAction },
|
|
})
|
|
);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Save current form data to temp storage before closing
|
|
const formDataToSave = saveCurrentFormData();
|
|
saveEventFormDataToTemp("update", formDataToSave);
|
|
|
|
// Close popup immediately for better UX (for non-special cases)
|
|
closeModal();
|
|
|
|
// Execute API calls in background based on typeOfAction
|
|
try {
|
|
if (recurrenceId) {
|
|
if (typeOfAction === "solo") {
|
|
// Update single instance with optimistic update + rollback
|
|
|
|
dispatch(
|
|
updateEventLocal({
|
|
calId,
|
|
event: { ...newEvent, recurrenceId },
|
|
})
|
|
);
|
|
|
|
const result = await dispatch(
|
|
updateEventInstanceAsync({
|
|
cal: targetCalendar,
|
|
event: { ...newEvent, recurrenceId },
|
|
})
|
|
);
|
|
|
|
// Handle result of updateEventInstanceAsync
|
|
await assertThunkSuccess(result);
|
|
|
|
// Clear temp data on successful save
|
|
clearEventFormTempData("update");
|
|
} else if (typeOfAction === "all") {
|
|
// Update all instances - check if repetition rules changed
|
|
const baseUID = extractEventBaseUuid(event.uid);
|
|
|
|
const changes = detectRecurringEventChanges(
|
|
event,
|
|
{ repetition, timezone, allday, start, end },
|
|
masterEventData,
|
|
resolveTimezone
|
|
);
|
|
const repetitionRulesChanged = changes.repetitionRulesChanged;
|
|
|
|
if (repetitionRulesChanged) {
|
|
// Date/time or repetition rules changed - remove all overrides
|
|
|
|
const seriesInstancesSnapshot = getSeriesInstances();
|
|
|
|
const removeSeriesInstancesFromUI = () => {
|
|
Object.keys(seriesInstancesSnapshot).forEach((eventId) => {
|
|
dispatch(
|
|
removeEvent({ calendarUid: calId, eventUid: eventId })
|
|
);
|
|
});
|
|
};
|
|
|
|
const restoreSeriesInstancesFromSnapshot = () => {
|
|
Object.values(seriesInstancesSnapshot).forEach((instance) => {
|
|
dispatch(
|
|
updateEventLocal({
|
|
calId,
|
|
event: instance,
|
|
})
|
|
);
|
|
});
|
|
};
|
|
|
|
try {
|
|
// STEP 1: Remove ALL old instances from UI (including solo overrides)
|
|
removeSeriesInstancesFromUI();
|
|
|
|
// STEP 2: Update series on server with removeOverrides=true
|
|
// IMPORTANT: Use base event UID (master), not instance UID with recurrence-id
|
|
const masterEventForUpdate = {
|
|
...newEvent,
|
|
uid: baseUID, // Use base UID for updating the master
|
|
recurrenceId: undefined, // Don't send recurrence-id for master update
|
|
};
|
|
|
|
const result = await dispatch(
|
|
updateSeriesAsync({
|
|
cal: targetCalendar,
|
|
event: masterEventForUpdate,
|
|
removeOverrides: true,
|
|
})
|
|
);
|
|
|
|
// Handle result of updateSeriesAsync
|
|
await assertThunkSuccess(result);
|
|
|
|
// Clear cache after successful update
|
|
dispatch(clearFetchCache(calId));
|
|
|
|
// Clear temp data on successful save
|
|
clearEventFormTempData("update");
|
|
} catch (seriesError) {
|
|
// Restore instances on error
|
|
restoreSeriesInstancesFromSnapshot();
|
|
throw seriesError;
|
|
}
|
|
} else {
|
|
// Only properties changed - use optimistic update and keep overrides
|
|
|
|
// Store old instances for rollback
|
|
const oldInstances = getSeriesInstances();
|
|
|
|
// Optimistic update: Apply new properties to all instances immediately
|
|
Object.keys(oldInstances).forEach((eventId) => {
|
|
const instance = oldInstances[eventId];
|
|
|
|
dispatch(
|
|
updateEventLocal({
|
|
calId,
|
|
event: {
|
|
...instance,
|
|
title: newEvent.title,
|
|
description: newEvent.description,
|
|
location: newEvent.location,
|
|
class: newEvent.class,
|
|
transp: newEvent.transp,
|
|
attendee: newEvent.attendee,
|
|
alarm: newEvent.alarm,
|
|
x_openpass_videoconference:
|
|
newEvent.x_openpass_videoconference,
|
|
},
|
|
})
|
|
);
|
|
});
|
|
|
|
// Update server in background with removeOverrides=false
|
|
// IMPORTANT: Use base event UID (master), not instance UID with recurrence-id
|
|
const masterEventForUpdate = {
|
|
...newEvent,
|
|
uid: baseUID, // Use base UID for updating the master
|
|
recurrenceId: undefined, // Don't send recurrence-id for master update
|
|
};
|
|
|
|
const result = await dispatch(
|
|
updateSeriesAsync({
|
|
cal: targetCalendar,
|
|
event: masterEventForUpdate,
|
|
removeOverrides: false,
|
|
})
|
|
);
|
|
|
|
// Handle result of updateSeriesAsync
|
|
await assertThunkSuccess(result);
|
|
|
|
// Clear cache to ensure navigation shows updated data
|
|
dispatch(clearFetchCache(calId));
|
|
|
|
// Clear temp data on successful save
|
|
clearEventFormTempData("update");
|
|
}
|
|
}
|
|
} else {
|
|
// Non-recurring event (or converting to recurring)
|
|
|
|
// Special case: Converting no-repeat to repeat
|
|
if (!event.repetition?.freq && repetition?.freq) {
|
|
const oldEventUID = event.uid;
|
|
|
|
// API call: putEventAsync will create recurring event and fetch all instances
|
|
const result = await dispatch(
|
|
putEventAsync({ cal: targetCalendar, newEvent })
|
|
);
|
|
|
|
// Handle result of putEventAsync - check if rejected first
|
|
await assertThunkSuccess(result);
|
|
|
|
// Remove old single event AFTER new recurring instances are added to store
|
|
// This prevents empty grid during the transition
|
|
dispatch(removeEvent({ calendarUid: calId, eventUid: oldEventUID }));
|
|
|
|
// Clear cache to ensure navigation to other weeks works
|
|
dispatch(clearFetchCache(calId));
|
|
|
|
// Clear temp data on successful save
|
|
clearEventFormTempData("update");
|
|
} else if (newCalId === calId) {
|
|
// Normal non-recurring event update (same calendar)
|
|
const result = await dispatch(
|
|
putEventAsync({ cal: targetCalendar, newEvent })
|
|
);
|
|
|
|
await assertThunkSuccess(result);
|
|
|
|
// Clear temp data on successful save
|
|
clearEventFormTempData("update");
|
|
}
|
|
// Note: when newCalId !== calId, the move is handled below in the
|
|
// "Handle calendar change" block, so we intentionally skip putEventAsync here.
|
|
}
|
|
|
|
// Handle calendar change (move to a different calendar)
|
|
if (newCalId !== calId) {
|
|
await moveEventBetweenCalendars({
|
|
dispatch,
|
|
calList,
|
|
newEvent,
|
|
oldCalId: calId,
|
|
newCalId,
|
|
});
|
|
|
|
// Clear temp data on successful move
|
|
clearEventFormTempData("update");
|
|
}
|
|
|
|
// Reset all state to default values only on successful save (after all branches)
|
|
clearEventFormTempData("update");
|
|
resetAllStateToDefault();
|
|
initializedKeyRef.current = null;
|
|
} catch (error) {
|
|
// Check if error is an object with a message property
|
|
const errorObj = error as { message?: string };
|
|
|
|
// Handle errors for all branches
|
|
// Rollback optimistic updates if any
|
|
// API failed - restore form data and mark as error
|
|
const errorFormData = {
|
|
...formDataToSave,
|
|
fromError: true,
|
|
};
|
|
saveEventFormDataToTemp("update", errorFormData);
|
|
|
|
// Show error notification
|
|
showErrorNotification(
|
|
errorObj.message || "Failed to update event. Please try again."
|
|
);
|
|
|
|
// Try to reopen modal
|
|
window.dispatchEvent(
|
|
new CustomEvent("eventModalError", {
|
|
detail: { type: "update", eventId, calId, typeOfAction },
|
|
})
|
|
);
|
|
}
|
|
};
|
|
|
|
const dialogActions = (
|
|
<Box display="flex" justifyContent="space-between" width="100%" px={2}>
|
|
{!showMore && (
|
|
<Button startIcon={<AddIcon />} onClick={() => setShowMore(!showMore)}>
|
|
{t("common.moreOptions")}
|
|
</Button>
|
|
)}
|
|
<Box display="flex" gap={1} ml={showMore ? "auto" : 0}>
|
|
<Button variant="outlined" onClick={handleClose}>
|
|
{t("common.cancel")}
|
|
</Button>
|
|
<Button variant="contained" onClick={handleSave}>
|
|
{t("actions.save")}
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
|
|
if (!event) return null;
|
|
|
|
return (
|
|
<ResponsiveDialog
|
|
open={open}
|
|
onClose={handleClose}
|
|
title={t("event.updateEvent")}
|
|
isExpanded={showMore}
|
|
onExpandToggle={() => setShowMore(!showMore)}
|
|
actions={dialogActions}
|
|
>
|
|
<EventFormFields
|
|
title={title}
|
|
setTitle={setTitle}
|
|
description={description}
|
|
setDescription={setDescription}
|
|
location={location}
|
|
setLocation={setLocation}
|
|
start={start}
|
|
setStart={setStart}
|
|
end={end}
|
|
setEnd={setEnd}
|
|
allday={allday}
|
|
setAllDay={setAllDay}
|
|
repetition={repetition}
|
|
setRepetition={setRepetition}
|
|
typeOfAction={typeOfAction}
|
|
attendees={attendees}
|
|
setAttendees={setAttendees}
|
|
alarm={alarm}
|
|
setAlarm={setAlarm}
|
|
busy={busy}
|
|
setBusy={setBusy}
|
|
eventClass={eventClass}
|
|
setEventClass={setEventClass}
|
|
timezone={timezone}
|
|
setTimezone={setTimezone}
|
|
eventId={event.uid}
|
|
calendarid={calendarid}
|
|
setCalendarid={setCalendarid}
|
|
hasVideoConference={hasVideoConference}
|
|
setHasVideoConference={setHasVideoConference}
|
|
meetingLink={meetingLink}
|
|
setMeetingLink={setMeetingLink}
|
|
showMore={showMore}
|
|
showDescription={showDescription}
|
|
setShowDescription={setShowDescription}
|
|
showRepeat={typeOfAction !== "solo" && showRepeat}
|
|
setShowRepeat={setShowRepeat}
|
|
isOpen={open}
|
|
userPersonalCalendars={userPersonalCalendars}
|
|
timezoneList={timezoneList}
|
|
onCalendarChange={(newCalendarId) => {
|
|
const selectedCalendar = calList[newCalendarId];
|
|
if (selectedCalendar) {
|
|
setNewCalId(selectedCalendar.id);
|
|
}
|
|
}}
|
|
onValidationChange={setIsFormValid}
|
|
showValidationErrors={showValidationErrors}
|
|
onHasEndDateChangedChange={setHasEndDateChanged}
|
|
/>
|
|
</ResponsiveDialog>
|
|
);
|
|
}
|
|
|
|
export default EventUpdateModal;
|