@rapidmx/web-client 0.14.1 → 0.16.0

package/apps/shared/components/calendar/RequestChangeForm.tsx

@@ -0,0 +1,240 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useState } from "react";
+import { HiOutlineXMark } from "react-icons/hi2";
+import { Attendee, EventChangeRequest, requestEventChange } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { htmlToPlainText, sanitizeEventDescriptionHtml } from "@rapidmx/react-shared/calendar/eventDescription.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
+import { notifyApiError } from "../../notifications/apiErrors.js";
+import { notify } from "../../notifications/store.js";
+import { INPUT_CLASS } from "./EventFormParts.js";
+import GuestInput, { GuestEntries } from "./GuestInput.js";
+import LazyDescriptionEditor from "./LazyDescriptionEditor.js";
+import { descriptionProblem, initialDescriptionHtml } from "./eventDialogFields.js";
+import { mergeGuests } from "./eventFormat.js";
+
+/** The event a guest asks about: what it says now (the form starts from it and sends only what differs) and which row of it the request is for. */
+export interface ChangeSubject {
+    /** The event's uid on this mailbox (`CalendarEvent.uid`, or `MessageInvite.calendarEventUid`): the row the organizer's answer will come back to. */
+    uid: string;
+    title: string;
+    location?: string | null;
+    /** ISO 8601 instants; absent for an event whose time is not known. */
+    startDate?: string;
+    endDate?: string;
+    allDay: boolean;
+    /** Part of a series: a request changes the whole series (its own row), so its time - which is one occurrence's - is not offered. */
+    recurring: boolean;
+    description?: string | null;
+    descriptionHtml?: string | null;
+    /** Everyone already invited, whatever the case, so a guest is not added twice. */
+    guestAddresses: string[];
+}
+
+export interface RequestChangeFormProps {
+    subject: ChangeSubject;
+    /** The organizer lets guests change the title, location, description and time (`guestsCanModify`). */
+    canChange: boolean;
+    /** The organizer lets guests add guests (`guestsCanInviteOthers`). */
+    canInvite: boolean;
+    /** The request was sent. */
+    onSent: () => void;
+    onCancel: () => void;
+}
+
+const MINUTE_MS = 60_000;
+
+/** Whether two instants (ISO, or a form's local time) name the same minute. */
+function sameMinute(a: string, b: string): boolean {
+    return Math.round(new Date(a).getTime() / MINUTE_MS) === Math.round(new Date(b).getTime() / MINUTE_MS);
+}
+
+/**
+ * A guest's request to the organizer, for an event whose organizer lets guests change it and/or invite others (`POST /calendar-events/:id/request-change`).
+ * Starts from the event as it is and sends only what the guest changed: the title, location, description and time (with `canChange`) and guests to add (with
+ * `canInvite`). Nothing changes on the guest's own calendar - the organizer's copy is updated (automatically, when the flags allow it) and the change
+ * comes back as the organizer's next update - so the form says so, and afterwards a "Your change was sent to the organizer" notification confirms it.
+ * A title or location can be changed, not cleared (the server refuses that), and the time of a series or an all-day event is not offered.
+ */
+export default function RequestChangeForm({ subject, canChange, canInvite, onSent, onCancel }: RequestChangeFormProps) {
+    const canChangeTime = canChange && !subject.allDay && !subject.recurring && !!subject.startDate && !!subject.endDate;
+    const [title, setTitle] = useState(subject.title);
+    const [location, setLocation] = useState(subject.location ?? "");
+    const [start, setStart] = useState(subject.startDate ? toDatetimeLocal(subject.startDate) : "");
+    const [end, setEnd] = useState(subject.endDate ? toDatetimeLocal(subject.endDate) : "");
+    const [descriptionHtml, setDescriptionHtml] = useState(() => initialDescriptionHtml(subject));
+    // The guests to add (not the ones already invited: `subject.guestAddresses` are skipped), what is flagged in the field, and what is being typed.
+    const [entries, setEntries] = useState<GuestEntries>({ guests: [], invalid: [], draft: "" });
+    const [error, setError] = useState<string | null>(null);
+    const [sending, setSending] = useState(false);
+    const heading = canChange ? "Request a change" : "Add guests";
+
+    /** Adds what was typed into the guests box, returning the guests to add as they now stand; something that is not an address is said. */
+    function addTypedGuests(): Attendee[] | undefined {
+        const merged = mergeGuests(entries.guests, [...entries.invalid, entries.draft].join(", "), subject.guestAddresses);
+        if (merged.invalid.length > 0) {
+            setError(`“${merged.invalid[0]}” isn’t a valid email address.`);
+            return undefined;
+        }
+        setEntries({ guests: merged.attendees, invalid: [], draft: "" });
+        return merged.attendees;
+    }
+
+    async function handleSubmit(event: FormEvent) {
+        event.preventDefault();
+        setError(null);
+        const added = canInvite ? addTypedGuests() : [];
+        if (!added) {
+            return;
+        }
+        const guests = added.map((guest) => (guest.displayName ? { address: guest.address, displayName: guest.displayName } : { address: guest.address }));
+        const request: EventChangeRequest = {};
+
+        if (canChange) {
+            if (title.trim() !== subject.title.trim()) {
+                if (!title.trim()) {
+                    setError("Enter a title, or leave it as it is.");
+                    return;
+                }
+                request.title = title.trim();
+            }
+            if (location.trim() !== (subject.location ?? "").trim()) {
+                if (!location.trim()) {
+                    setError("Enter a location, or leave it as it is.");
+                    return;
+                }
+                request.location = location.trim();
+            }
+            if (canChangeTime && (!sameMinute(start, subject.startDate as string) || !sameMinute(end, subject.endDate as string))) {
+                const startMs = new Date(start).getTime();
+                const endMs = new Date(end).getTime();
+                if (Number.isNaN(startMs) || Number.isNaN(endMs) || endMs <= startMs) {
+                    setError("The end time must be after the start time.");
+                    return;
+                }
+                request.startDate = new Date(startMs).toISOString();
+                request.endDate = new Date(endMs).toISOString();
+            }
+            const html = sanitizeEventDescriptionHtml(descriptionHtml);
+            if (html !== sanitizeEventDescriptionHtml(initialDescriptionHtml(subject)) && descriptionHtml !== initialDescriptionHtml(subject)) {
+                const plain = htmlToPlainText(html);
+                if (!plain) {
+                    setError("Enter a description, or leave it as it is.");
+                    return;
+                }
+                const tooLong = descriptionProblem(html);
+                if (tooLong) {
+                    setError(tooLong);
+                    return;
+                }
+                request.descriptionHtml = html;
+                request.description = plain;
+            }
+        }
+        if (guests.length > 0) {
+            request.addAttendees = guests;
+        }
+        if (Object.keys(request).length === 0) {
+            setError("Change something first.");
+            return;
+        }
+
+        setSending(true);
+        try {
+            await requestEventChange(subject.uid, request);
+            notify({
+                kind: "success",
+                title: "Your change was sent to the organizer",
+                message: "The event on your calendar updates when the organizer's update comes back.",
+            });
+            onSent();
+        } catch (err) {
+            notifyApiError(err, "Couldn't send your change");
+            setSending(false);
+        }
+    }
+
+    return (
+        <form onSubmit={(event) => void handleSubmit(event)} aria-label={heading} className="flex flex-col gap-3">
+            <div className="flex items-center justify-between gap-3">
+                <h3 className="text-sm font-semibold">{heading}</h3>
+                <button
+                    type="button"
+                    aria-label="Cancel request"
+                    onClick={onCancel}
+                    className="w-7 h-7 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text"
+                >
+                    <HiOutlineXMark size={16} aria-hidden="true" />
+                </button>
+            </div>
+            <p className="text-xs text-text-muted">
+                Your request goes to the organizer. Nothing on your calendar changes until their update arrives; when the organizer allows it, it is applied for you.
+            </p>
+            {error && <Alert>{error}</Alert>}
+
+            {canChange && (
+                <>
+                    <label className="flex flex-col gap-1 text-xs font-medium">
+                        Title
+                        <input type="text" className={INPUT_CLASS} value={title} onChange={(e) => setTitle(e.target.value)} />
+                    </label>
+                    <label className="flex flex-col gap-1 text-xs font-medium">
+                        Location
+                        <input type="text" className={INPUT_CLASS} value={location} onChange={(e) => setLocation(e.target.value)} />
+                    </label>
+                    {canChangeTime && (
+                        <div className="flex flex-wrap gap-3">
+                            <label className="flex flex-col gap-1 text-xs font-medium">
+                                Starts
+                                <input type="datetime-local" className={INPUT_CLASS} value={start} onChange={(e) => setStart(e.target.value)} />
+                            </label>
+                            <label className="flex flex-col gap-1 text-xs font-medium">
+                                Ends
+                                <input type="datetime-local" className={INPUT_CLASS} value={end} onChange={(e) => setEnd(e.target.value)} />
+                            </label>
+                        </div>
+                    )}
+                    {!canChangeTime && (
+                        <p className="text-xs text-text-muted">
+                            {subject.recurring ? "A change here applies to the whole series; its times can only be changed by the organizer." : "The time of this event can only be changed by the organizer."}
+                        </p>
+                    )}
+                    <div className="flex flex-col gap-1">
+                        <span className="text-xs font-medium">Description</span>
+                        <LazyDescriptionEditor value={descriptionHtml} onChange={setDescriptionHtml} />
+                    </div>
+                </>
+            )}
+
+            {canInvite && (
+                <div className="flex flex-col gap-1">
+                    <label htmlFor="request-guests" className="text-xs font-medium">
+                        Guests to add
+                    </label>
+                    <GuestInput
+                        id="request-guests"
+                        label="Guests to add"
+                        placeholder="Name or name@example.com"
+                        variant="box"
+                        skipAddresses={subject.guestAddresses}
+                        {...entries}
+                        onChange={setEntries}
+                    />
+                </div>
+            )}
+
+            <div className="flex items-center gap-2">
+                <Button type="submit" loading={sending} disabled={sending} className="!w-auto">
+                    Send request
+                </Button>
+                <Button type="button" variant="text" className="!w-auto" disabled={sending} onClick={onCancel}>
+                    Cancel
+                </Button>
+            </div>
+        </form>
+    );
+}

package/apps/shared/components/calendar/SplitDayView.tsx

@@ -1,143 +1,144 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React from "react";
-import { addDays, addMinutes, format, startOfDay } from "date-fns";
-import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
-import { occursOnDay } from "./allDay.js";
-
-const HOUR_HEIGHT_PX = 48;
-const SLOT_MINUTES = 30;
-const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
-const HOURS = Array.from({ length: 24 }, (_, h) => h);
-
-export interface SplitDayColumn {
-    folderUid: string;
-    name: string;
-    color: string;
-}
-
-export interface SplitDayViewProps {
-    day: Date;
-    columns: SplitDayColumn[];
-    /** Already expanded for `day` — see `recurrence.ts`'s `expandAllOccurrences`. Not pre-filtered by
-     * calendar; this component splits them into columns itself by `occurrence.folderUid`. */
-    occurrences: CalendarOccurrence[];
-    onSelectEvent: (occurrence: CalendarOccurrence) => void;
-    /** Click on an empty slot in one calendar's column — the calendar it belongs to is `folderUid`. */
-    onSelectSlot: (start: Date, end: Date, folderUid: string) => void;
-}
-
-/**
- * Outlook's "Split" view: one column per checked calendar, all showing the same single day, so
- * events across calendars can be compared side by side. A deliberately separate component from
- * `TimeGridView` rather than a generalization of it — it shares that component's visual language
- * (same hour rail, same slot height) but is genuinely simpler in one respect: no drag-to-move/resize.
- * Dragging an event between calendar columns would mean reassigning its `folderUid`, a real feature
- * `moveOccurrence`/`resolveDragAction` don't support today; rather than bolt that on, this view is
- * click-only (select an event, or click a slot to create one already targeted at that column's
- * calendar) — a practical scope cut, not an oversight.
- */
-export default function SplitDayView({ day, columns, occurrences, onSelectEvent, onSelectSlot }: SplitDayViewProps) {
-    const dayOccurrences = occurrences.filter((occ) => occursOnDay(occ, day));
-    const dayStart = startOfDay(day);
-
-    return (
-        <div role="region" aria-label="Split view" className="flex-1 flex flex-col min-h-0 overflow-y-auto">
-            <div className="flex border-b border-border shrink-0">
-                <div className="w-14 shrink-0" />
-                {columns.map((col) => (
-                    <div key={col.folderUid} className="flex-1 min-w-0 py-1 flex items-center justify-center gap-1.5 border-l border-border">
-                        <span aria-hidden="true" className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: col.color }} />
-                        <span className="text-xs font-semibold truncate">{col.name}</span>
-                    </div>
-                ))}
-            </div>
-            <div className="flex flex-1">
-                <div className="w-14 shrink-0">
-                    {HOURS.map((hour) => (
-                        <div key={hour} style={{ height: HOUR_HEIGHT_PX }} className="text-[10px] text-text-muted text-right pr-1.5 -mt-1.5">
-                            {hour === 0 ? "" : format(new Date(2000, 0, 1, hour), "ha")}
-                        </div>
-                    ))}
-                </div>
-                {columns.map((col) => (
-                    <SplitColumn
-                        key={col.folderUid}
-                        column={col}
-                        dayStart={dayStart}
-                        occurrences={dayOccurrences.filter((occ) => occ.folderUid === col.folderUid)}
-                        onSelectEvent={onSelectEvent}
-                        onSelectSlot={onSelectSlot}
-                    />
-                ))}
-            </div>
-        </div>
-    );
-}
-
-function SplitColumn({
-    column,
-    dayStart,
-    occurrences,
-    onSelectEvent,
-    onSelectSlot,
-}: {
-    column: SplitDayColumn;
-    dayStart: Date;
-    occurrences: CalendarOccurrence[];
-    onSelectEvent: (occurrence: CalendarOccurrence) => void;
-    onSelectSlot: (start: Date, end: Date, folderUid: string) => void;
-}) {
-    return (
-        <div className="flex-1 min-w-0 relative border-l border-border">
-            {Array.from({ length: SLOTS_PER_DAY }, (_, i) => {
-                const slotStart = addMinutes(dayStart, i * SLOT_MINUTES);
-                return (
-                    <button
-                        key={i}
-                        type="button"
-                        onClick={() => onSelectSlot(slotStart, addMinutes(slotStart, SLOT_MINUTES), column.folderUid)}
-                        style={{ height: HOUR_HEIGHT_PX / 2 }}
-                        className="block w-full border-b border-border/50 text-left"
-                        aria-label={`New event at ${format(slotStart, "h:mm a")} in ${column.name}`}
-                    />
-                );
-            })}
-            {occurrences.map((occurrence) => {
-                const start = new Date(occurrence.startDate);
-                const end = new Date(occurrence.endDate);
-                // Clipped to this day, so a multi-day event fills only the part of the day it covers. An
-                // all-day event is date-only (see `allDay.ts`), so it always spans the whole local day.
-                const dayEnd = addDays(dayStart, 1).getTime();
-                const visibleStart = occurrence.allDay ? dayStart.getTime() : Math.max(start.getTime(), dayStart.getTime());
-                const visibleEnd = occurrence.allDay ? dayEnd : Math.min(end.getTime(), dayEnd);
-                const top = ((visibleStart - dayStart.getTime()) / 60_000 / 60) * HOUR_HEIGHT_PX;
-                const height = Math.max(((visibleEnd - visibleStart) / 60_000 / 60) * HOUR_HEIGHT_PX, 16);
-                const isFree = occurrence.busyStatus === "free";
-                return (
-                    <div
-                        key={occurrence.occurrenceKey}
-                        onClick={() => onSelectEvent(occurrence)}
-                        style={{
-                            position: "absolute",
-                            top,
-                            height,
-                            left: 2,
-                            right: 2,
-                            ...(isFree ? undefined : { backgroundColor: column.color, color: "#fff" }),
-                        }}
-                        className={[
-                            "rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer",
-                            isFree ? "bg-surface-alt text-text-muted" : "",
-                        ].join(" ")}
-                    >
-                        <div className="font-medium truncate">{occurrence.title}</div>
-                        <div className="truncate">{format(start, "h:mma")}</div>
-                    </div>
-                );
-            })}
-        </div>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { addDays, addMinutes, format, startOfDay } from "date-fns";
+import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { occursOnDay } from "./allDay.js";
+import { EventAnchor, anchorOf } from "./EventShell.js";
+
+const HOUR_HEIGHT_PX = 48;
+const SLOT_MINUTES = 30;
+const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
+const HOURS = Array.from({ length: 24 }, (_, h) => h);
+
+export interface SplitDayColumn {
+    folderUid: string;
+    name: string;
+    color: string;
+}
+
+export interface SplitDayViewProps {
+    day: Date;
+    columns: SplitDayColumn[];
+    /** Already expanded for `day` — see `recurrence.ts`'s `expandAllOccurrences`. Not pre-filtered by
+     * calendar; this component splits them into columns itself by `occurrence.folderUid`. */
+    occurrences: CalendarOccurrence[];
+    onSelectEvent: (occurrence: CalendarOccurrence) => void;
+    /** Click on an empty slot in one calendar's column — the calendar it belongs to is `folderUid`; `anchor` is the slot. */
+    onSelectSlot: (start: Date, end: Date, folderUid: string, anchor: EventAnchor) => void;
+}
+
+/**
+ * Outlook's "Split" view: one column per checked calendar, all showing the same single day, so
+ * events across calendars can be compared side by side. A deliberately separate component from
+ * `TimeGridView` rather than a generalization of it — it shares that component's visual language
+ * (same hour rail, same slot height) but is genuinely simpler in one respect: no drag-to-move/resize.
+ * Dragging an event between calendar columns would mean reassigning its `folderUid`, a real feature
+ * `moveOccurrence`/`resolveDragAction` don't support today; rather than bolt that on, this view is
+ * click-only (select an event, or click a slot to create one already targeted at that column's
+ * calendar) — a practical scope cut, not an oversight.
+ */
+export default function SplitDayView({ day, columns, occurrences, onSelectEvent, onSelectSlot }: SplitDayViewProps) {
+    const dayOccurrences = occurrences.filter((occ) => occursOnDay(occ, day));
+    const dayStart = startOfDay(day);
+
+    return (
+        <div role="region" aria-label="Split view" data-calendar-scroller className="flex-1 flex flex-col min-h-0 overflow-y-auto">
+            <div className="flex border-b border-border shrink-0">
+                <div className="w-14 shrink-0" />
+                {columns.map((col) => (
+                    <div key={col.folderUid} className="flex-1 min-w-0 py-1 flex items-center justify-center gap-1.5 border-l border-border">
+                        <span aria-hidden="true" className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: col.color }} />
+                        <span className="text-xs font-semibold truncate">{col.name}</span>
+                    </div>
+                ))}
+            </div>
+            <div className="flex flex-1">
+                <div className="w-14 shrink-0">
+                    {HOURS.map((hour) => (
+                        <div key={hour} style={{ height: HOUR_HEIGHT_PX }} className="text-[10px] text-text-muted text-right pr-1.5 -mt-1.5">
+                            {hour === 0 ? "" : format(new Date(2000, 0, 1, hour), "ha")}
+                        </div>
+                    ))}
+                </div>
+                {columns.map((col) => (
+                    <SplitColumn
+                        key={col.folderUid}
+                        column={col}
+                        dayStart={dayStart}
+                        occurrences={dayOccurrences.filter((occ) => occ.folderUid === col.folderUid)}
+                        onSelectEvent={onSelectEvent}
+                        onSelectSlot={onSelectSlot}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+function SplitColumn({
+    column,
+    dayStart,
+    occurrences,
+    onSelectEvent,
+    onSelectSlot,
+}: {
+    column: SplitDayColumn;
+    dayStart: Date;
+    occurrences: CalendarOccurrence[];
+    onSelectEvent: (occurrence: CalendarOccurrence) => void;
+    onSelectSlot: (start: Date, end: Date, folderUid: string, anchor: EventAnchor) => void;
+}) {
+    return (
+        <div className="flex-1 min-w-0 relative border-l border-border">
+            {Array.from({ length: SLOTS_PER_DAY }, (_, i) => {
+                const slotStart = addMinutes(dayStart, i * SLOT_MINUTES);
+                return (
+                    <button
+                        key={i}
+                        type="button"
+                        onClick={(e) => onSelectSlot(slotStart, addMinutes(slotStart, SLOT_MINUTES), column.folderUid, anchorOf(e.currentTarget))}
+                        style={{ height: HOUR_HEIGHT_PX / 2 }}
+                        className="block w-full border-b border-border/50 text-left"
+                        aria-label={`New event at ${format(slotStart, "h:mm a")} in ${column.name}`}
+                    />
+                );
+            })}
+            {occurrences.map((occurrence) => {
+                const start = new Date(occurrence.startDate);
+                const end = new Date(occurrence.endDate);
+                // Clipped to this day, so a multi-day event fills only the part of the day it covers. An
+                // all-day event is date-only (see `allDay.ts`), so it always spans the whole local day.
+                const dayEnd = addDays(dayStart, 1).getTime();
+                const visibleStart = occurrence.allDay ? dayStart.getTime() : Math.max(start.getTime(), dayStart.getTime());
+                const visibleEnd = occurrence.allDay ? dayEnd : Math.min(end.getTime(), dayEnd);
+                const top = ((visibleStart - dayStart.getTime()) / 60_000 / 60) * HOUR_HEIGHT_PX;
+                const height = Math.max(((visibleEnd - visibleStart) / 60_000 / 60) * HOUR_HEIGHT_PX, 16);
+                const isFree = occurrence.busyStatus === "free";
+                return (
+                    <div
+                        key={occurrence.occurrenceKey}
+                        onClick={() => onSelectEvent(occurrence)}
+                        style={{
+                            position: "absolute",
+                            top,
+                            height,
+                            left: 2,
+                            right: 2,
+                            ...(isFree ? undefined : { backgroundColor: column.color, color: "#fff" }),
+                        }}
+                        className={[
+                            "rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer",
+                            isFree ? "bg-surface-alt text-text-muted" : "",
+                        ].join(" ")}
+                    >
+                        <div className="font-medium truncate">{occurrence.title}</div>
+                        <div className="truncate">{format(start, "h:mma")}</div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}