Complete recurrence editing and calendar preferences

webui/src/features/calendar/CalendarEventDialog.tsx

@@ -8,6 +8,7 @@ import {
   Button,
   DateField,
   Dialog,
+  SegmentedControl,
   TimeField,
   ToggleSwitch,
   useUnsavedDraftGuard,
@@ -30,6 +31,7 @@ import {
 } from "./calendarViewModel";
 
 type CalendarEventEndMode = "end" | "duration";
+type CalendarEventEditScope = "occurrence" | "series";
 type CalendarEventAdvancedPayload = Pick<
   CalendarEventCreatePayload,
   | "organizer"
@@ -49,25 +51,40 @@ export function CalendarEventDialog({
   calendars,
   defaultCalendarId,
   event,
+  editScope,
+  canChooseSeries,
+  seriesLoaded,
   focusDate,
   saving,
   canWrite,
   canDelete,
+  onEditScopeChange,
   onCancel,
   onSave,
   onDelete
-
-
-
-
-
-
-
-
-
-
-
-}: {calendars: CalendarCollection[];defaultCalendarId: string;event: CalendarEvent | null;focusDate: Date;saving: boolean;canWrite: boolean;canDelete: boolean;onCancel: () => void;onSave: (payload: CalendarEventCreatePayload, event: CalendarEvent | null) => Promise<boolean>;onDelete: (event: CalendarEvent) => Promise<void>;}) {
+}: {
+  calendars: CalendarCollection[];
+  defaultCalendarId: string;
+  event: CalendarEvent | null;
+  editScope: CalendarEventEditScope;
+  canChooseSeries: boolean;
+  seriesLoaded: boolean;
+  focusDate: Date;
+  saving: boolean;
+  canWrite: boolean;
+  canDelete: boolean;
+  onEditScopeChange: (scope: CalendarEventEditScope) => void;
+  onCancel: () => void;
+  onSave: (
+    payload: CalendarEventCreatePayload,
+    event: CalendarEvent | null,
+    editScope: CalendarEventEditScope
+  ) => Promise<boolean>;
+  onDelete: (
+    event: CalendarEvent,
+    editScope: CalendarEventEditScope
+  ) => Promise<void>;
+}) {
   const initialStart = event ? new Date(event.start_at) : focusDate;
   const initialEnd = event?.end_at ? new Date(event.end_at) : addHours(initialStart, 1);
   const initialAllDayEnd = event?.all_day && event.end_at ? addDays(startOfDay(initialEnd), -1) : initialEnd;
@@ -231,7 +248,7 @@ export function CalendarEventDialog({
       if (uid.trim()) payload.uid = uid.trim();
       if (recurrenceId.trim()) payload.recurrence_id = recurrenceId.trim();
     }
-    return onSave(payload, event);
+    return onSave(payload, event, editScope);
   }
 
   function submit(formEvent: FormEvent<HTMLFormElement>) {
@@ -245,7 +262,7 @@ export function CalendarEventDialog({
       setConfirmingDelete(true);
       return;
     }
-    void onDelete(event);
+    void onDelete(event, editScope);
   }
 
   return (
@@ -273,6 +290,24 @@ export function CalendarEventDialog({
       }>
 
       <form id={formId} className="calendar-dialog-form" onSubmit={submit}>
+        {canChooseSeries && (
+          <SegmentedControl
+            ariaLabel="Recurring event edit scope"
+            value={editScope}
+            onChange={onEditScopeChange}
+            width="fill"
+            size="equal"
+            disabled={saving}
+            options={[
+              { id: "occurrence", label: "This occurrence" },
+              {
+                id: "series",
+                label: seriesLoaded ? "Whole series" : "Loading series",
+                disabled: !seriesLoaded
+              }
+            ]}
+          />
+        )}
         {formError && <p className="calendar-form-error">{formError}</p>}
         <label>
           <span>i18n:govoplan-calendar.title.768e0c1c</span>
@@ -559,4 +594,3 @@ function eventUsesDuration(event: CalendarEvent): boolean {
 function isPlainObject(value: unknown): value is Record<string, unknown> {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
-