jcoffey-dev
7ba749148f
Asked for in #167: a right-click on a mail that turns it into a calendar entry, the way a bill or a task becomes a reminder. Nothing clever, and deliberately so -- the subject becomes the title, the body becomes the description, and the reader supplies the one thing the message cannot. A due date is exactly that thing. "Due on the 14th" in an invoice is not a date a parser could be trusted with, and a wrong guess quietly scheduled is worse than no guess at all, so the editor opens on the next half hour for an hour and the reader fixes it. Forward rather than now, because a start time that has already passed by the time they press Create is one more thing to correct. The body is capped at 5000 characters. A newsletter is a message too, and its whole body would be stored on the event, synced to every device, and shown in a three-row textarea; what is worth keeping -- the amount, the account, the address -- is near the top. The cut is marked, so a truncated bill is not read as the whole of it. One message only. The list menu acts on the selection everywhere else, but there is no sensible event to make out of five mails, and the mobile entry appears only when exactly one row is held. The editor lives inside CalendarView and the reader is in the mail view when they ask, so the draft waits in the calendar store until that view mounts and takes it -- once, or it would reopen on every later visit. It seeds a form rather than an event: the dialog still says New event and still has to be pressed. Called *Create event…* rather than "appointment", which is the word the issue used: it opens the New event dialog, and each catalogue already has its own settled noun for that -- Termin, événement, 日程. Reachable three ways, since a phone has no right-click: the row context menu, a message's ⋮, and the ⋮ of a held row on mobile. Hidden entirely where the account has no calendar.
416 lines
27 KiB
TypeScript
416 lines
27 KiB
TypeScript
import { useEffect, useMemo, useRef, useState } from "react";
|
||
import { Plus, Trash2, Users } from "lucide-react";
|
||
import type { BusyPeriod, CalendarEvent, EmailAddress, JSCalendarAlert, JSCalendarParticipant, JSCalendarRecurrenceRule, JSCalendarNDay } from "@/jmap/types";
|
||
import { useCalendar, myParticipantKeys, isRecurring, isOccurrence, eventRule, makeParticipant, participantEmail, type EventScope } from "@/store/calendar";
|
||
import { useSettings } from "@/store/settings";
|
||
import { useSession } from "@/store/session";
|
||
import { useContacts } from "@/store/contacts";
|
||
import { Dialog } from "@/ui/dialog";
|
||
import { ColorSwatches, Switch } from "@/ui/misc";
|
||
import { toast } from "@/ui/toast";
|
||
import { RecipientInput } from "../compose/RecipientInput";
|
||
import { DateField, DateTimeField } from "@/ui/datefield";
|
||
import { browserTimeZone, dateToZonedLocal, formatDuration, fromInputDateTime, listTimeZones, parseDuration, toInputDateTime, toLocalDateOnly, zonedToDate, DAY_MS, humanDuration } from "@/lib/dates";
|
||
import { formatClock, formatNumericDate, formatWeekday } from "@/lib/datetime";
|
||
import { WEEKDAYS, describeRule, presetFor, ruleFromPreset, type RecurrencePreset } from "@/lib/recurrence";
|
||
import { newKey } from "@/lib/contacts";
|
||
import { askEditScope, droppedMessage, runScoped } from "./scope";
|
||
import { t as translate } from "@/lib/i18n";
|
||
|
||
export interface EditorInit {
|
||
event?: CalendarEvent;
|
||
start: Date;
|
||
end: Date;
|
||
allDay: boolean;
|
||
/**
|
||
* Values a new event opens with, from wherever it was begun -- a message,
|
||
* so far. Not an event: this is still a form the reader has to finish, so
|
||
* `editing` stays false and the dialog says New event / Create.
|
||
*/
|
||
seed?: { title?: string; description?: string };
|
||
}
|
||
|
||
const ALERT_OPTIONS = [0, 5, 10, 15, 30, 60, 120, 1440, 2880, 10080];
|
||
|
||
/**
|
||
* Fields this form always sends that a single occurrence will not take.
|
||
*
|
||
* `useDefaultAlerts` and `calendarIds` are refused with `invalidProperties`;
|
||
* the rest are dropped from the patch while the response still reports
|
||
* success. Both halves are reasons not to send them — the second more so,
|
||
* because nothing would say it had happened.
|
||
*/
|
||
const OCCURRENCE_OMIT = new Set(["useDefaultAlerts", "calendarIds", "recurrenceRule", "privacy", "organizerCalendarAddress"]);
|
||
|
||
export function EventEditor({ init, onClose }: { init: EditorInit; onClose: () => void }) {
|
||
const cal = useCalendar();
|
||
const settings = useSettings((s) => s.settings);
|
||
const session = useSession((s) => s.session);
|
||
const [base, setBase] = useState<CalendarEvent | null | undefined>(init.event && !init.event.baseEventId ? init.event : undefined);
|
||
const [scope, setScope] = useState<EventScope | undefined>(init.event?.baseEventId ? undefined : "series");
|
||
const editing = Boolean(init.event);
|
||
|
||
/*
|
||
* Which event this form is even about has to be settled before it opens.
|
||
*
|
||
* A form populated from the master shows the series' start date, so editing
|
||
* Wednesday's standup would offer to move Monday's — right for the series and
|
||
* wrong for one date. So the scope is asked first, and the occurrence itself
|
||
* is what the form loads when the answer is "this occurrence".
|
||
*/
|
||
/*
|
||
* Asked once per event, and deliberately not tied to the effect's lifetime.
|
||
*
|
||
* Two things make the obvious version wrong. A dialog is queued in a store
|
||
* the moment it is requested, so it outlives the effect that asked for it: a
|
||
* re-run queues a second prompt the first answer cannot retract, and the
|
||
* reader is asked the same question twice. And gating the *answer* on a
|
||
* cleanup flag is worse — React's StrictMode runs mount, cleanup, mount, so
|
||
* the flag is already set by the time anyone clicks and the editor never
|
||
* opens at all. The ref is what makes this once; the answer is applied
|
||
* whenever it arrives.
|
||
*/
|
||
const asked = useRef<string | null>(null);
|
||
useEffect(() => {
|
||
const ev = init.event;
|
||
if (!ev) { setBase(null); setScope("series"); return; }
|
||
if (!ev.baseEventId) { setBase(ev); setScope("series"); return; }
|
||
if (asked.current === ev.id) return;
|
||
asked.current = ev.id;
|
||
void (async () => {
|
||
const chosen = isRecurring(ev) && isOccurrence(ev) ? await askEditScope(ev) : "series";
|
||
if (!chosen) { onClose(); return; }
|
||
setScope(chosen);
|
||
if (chosen === "occurrence") setBase(ev);
|
||
else void cal.getEvent(ev.baseEventId!).then(setBase);
|
||
})();
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [init.event?.id]);
|
||
|
||
if (base === undefined || scope === undefined) return null;
|
||
return <EventForm key={base?.id ?? "new"} init={init} base={base} scope={scope} editing={editing} onClose={onClose} settingsTz={settings.timeZone ?? browserTimeZone} defaultAlert={settings.defaultAlertMinutes} myEmail={session?.username ?? ""} />;
|
||
}
|
||
|
||
function EventForm({ init, base, scope, editing, onClose, settingsTz, defaultAlert, myEmail }: { init: EditorInit; base: CalendarEvent | null; scope: EventScope; editing: boolean; onClose: () => void; settingsTz: string; defaultAlert: number; myEmail: string }) {
|
||
/** This form is editing one date rather than the series behind it. */
|
||
const oneDate = scope === "occurrence";
|
||
const cal = useCalendar();
|
||
const contacts = useContacts();
|
||
const ev = base;
|
||
const calendars = Object.values(cal.calendars).filter((c) => c.myRights.mayWriteAll || c.myRights.mayWriteOwn);
|
||
const initialCal = ev ? Object.keys(ev.calendarIds)[0] : (calendars.find((c) => c.isDefault)?.id ?? calendars[0]?.id);
|
||
const evTz = ev?.timeZone ?? settingsTz;
|
||
const baseStart = ev ? zonedToDate(ev.start, ev.showWithoutTime ? null : evTz) : init.start;
|
||
const baseEnd = ev ? new Date(baseStart.getTime() + (parseDuration(ev.duration) || (ev.showWithoutTime ? 86400 : 3600)) * 1000) : init.end;
|
||
|
||
const [title, setTitle] = useState(ev?.title ?? init.seed?.title ?? "");
|
||
const [calendarId, setCalendarId] = useState(initialCal ?? "");
|
||
const [allDay, setAllDay] = useState(ev ? Boolean(ev.showWithoutTime) : init.allDay);
|
||
const [start, setStart] = useState(baseStart);
|
||
const [end, setEnd] = useState(baseEnd);
|
||
const [tz, setTz] = useState(evTz);
|
||
const [location, setLocation] = useState(Object.values(ev?.locations ?? {})[0]?.name ?? "");
|
||
const [vurl, setVurl] = useState(Object.values(ev?.virtualLocations ?? {})[0]?.uri ?? "");
|
||
const [description, setDescription] = useState(ev?.description ?? init.seed?.description ?? "");
|
||
const [status, setStatus] = useState<NonNullable<CalendarEvent["status"]>>(ev?.status ?? "confirmed");
|
||
const [privacy, setPrivacy] = useState<NonNullable<CalendarEvent["privacy"]>>(ev?.privacy ?? "public");
|
||
const [freeBusy, setFreeBusy] = useState<NonNullable<CalendarEvent["freeBusyStatus"]>>(ev?.freeBusyStatus ?? "busy");
|
||
const [color, setColor] = useState<string | null>(ev?.color ?? null);
|
||
const categories = useSettings((s) => s.settings.eventCategories);
|
||
const [category, setCategory] = useState<string>(() => Object.keys(ev?.categories ?? {}).find((n) => categories.some((c) => c.name.toLowerCase() === n.toLowerCase())) ?? "");
|
||
const [rule, setRule] = useState<JSCalendarRecurrenceRule | undefined>(ev ? eventRule(ev) : undefined);
|
||
const [preset, setPreset] = useState<RecurrencePreset>(presetFor(ev ? eventRule(ev) : undefined));
|
||
const [alerts, setAlerts] = useState<number[]>(() => {
|
||
const a = Object.values(ev?.alerts ?? {}).map((x) => ("offset" in x.trigger ? -parseDuration(x.trigger.offset) / 60 : 0)).filter((n) => n >= 0);
|
||
if (ev) return a;
|
||
return defaultAlert >= 0 ? [defaultAlert] : [];
|
||
});
|
||
const myKeys = ev ? myParticipantKeys(ev, cal.identities) : [];
|
||
const [attendees, setAttendees] = useState<EmailAddress[]>(() =>
|
||
Object.entries(ev?.participants ?? {})
|
||
.filter(([k, p]) => !myKeys.includes(k) && !(p.roles?.owner && !p.roles?.attendee))
|
||
.map(([, p]) => ({ name: p.name ?? null, email: participantEmail(p) }))
|
||
.filter((a) => a.email),
|
||
);
|
||
const [sendInvites, setSendInvites] = useState(true);
|
||
const [busy, setBusy] = useState(false);
|
||
const [fb, setFb] = useState<Record<string, BusyPeriod[]>>({});
|
||
const [showMore, setShowMore] = useState(Boolean(ev && (ev.privacy !== "public" || ev.freeBusyStatus === "free" || ev.color || ev.status !== "confirmed" || Object.keys(ev.categories ?? {}).length)));
|
||
|
||
const identity = cal.identities.find((i) => i.isDefault) ?? cal.identities[0];
|
||
const myAddress = identity?.calendarAddress ?? (myEmail.includes("@") ? `mailto:${myEmail}` : "");
|
||
const myPlainEmail = myAddress.replace(/^mailto:/i, "");
|
||
|
||
// Free/busy lookup for attendees that are directory principals
|
||
useEffect(() => {
|
||
if (!attendees.length || !contacts.principalsLoaded) {
|
||
if (!contacts.principalsLoaded) void contacts.loadPrincipals();
|
||
return;
|
||
}
|
||
const dayStart = new Date(start);
|
||
dayStart.setHours(0, 0, 0, 0);
|
||
const dayEnd = new Date(dayStart.getTime() + DAY_MS);
|
||
let cancelled = false;
|
||
(async () => {
|
||
const out: Record<string, BusyPeriod[]> = {};
|
||
for (const a of attendees) {
|
||
const p = contacts.principals.find((x) => x.email?.toLowerCase() === a.email.toLowerCase());
|
||
if (!p) continue;
|
||
try {
|
||
out[a.email] = await cal.availability(p.id, dayStart, dayEnd);
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
}
|
||
if (!cancelled) setFb(out);
|
||
})();
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [attendees.map((a) => a.email).join(","), start.getTime(), contacts.principalsLoaded]);
|
||
|
||
const onStartChange = (d: Date) => {
|
||
if (Number.isNaN(d.getTime())) return;
|
||
const dur = end.getTime() - start.getTime();
|
||
setStart(d);
|
||
setEnd(new Date(d.getTime() + Math.max(dur, allDay ? DAY_MS : 15 * 60_000)));
|
||
};
|
||
|
||
const save = async () => {
|
||
if (!calendarId) {
|
||
toast.error(translate("Choose a calendar"));
|
||
return;
|
||
}
|
||
if (end <= start) {
|
||
toast.error(translate("End must be after start"));
|
||
return;
|
||
}
|
||
setBusy(true);
|
||
try {
|
||
const s = allDay ? new Date(start.getFullYear(), start.getMonth(), start.getDate()) : start;
|
||
let e = allDay ? new Date(end.getFullYear(), end.getMonth(), end.getDate()) : end;
|
||
if (allDay && e <= s) e = new Date(s.getTime() + DAY_MS);
|
||
const participants: Record<string, JSCalendarParticipant> = {};
|
||
if (attendees.length && myAddress) {
|
||
participants.me = makeParticipant(myPlainEmail, identity?.name, "owner");
|
||
for (const a of attendees) {
|
||
// preserve existing status if the attendee was already there
|
||
const existing = Object.values(ev?.participants ?? {}).find((p) => participantEmail(p).toLowerCase() === a.email.toLowerCase());
|
||
participants[newKey("p")] = makeParticipant(a.email, a.name, "attendee", existing?.participationStatus);
|
||
}
|
||
}
|
||
const alertObj: Record<string, JSCalendarAlert> = {};
|
||
for (const m of alerts) alertObj[newKey("a")] = { "@type": "Alert", trigger: { "@type": "OffsetTrigger", offset: formatDuration(-m * 60), relativeTo: "start" }, action: "display" };
|
||
const obj: Record<string, unknown> = {
|
||
title: title.trim() || "(untitled)",
|
||
description: description.trim() || undefined,
|
||
showWithoutTime: allDay,
|
||
start: allDay ? `${toLocalDateOnly(s)}T00:00:00` : dateToZonedLocal(s, tz),
|
||
timeZone: allDay ? null : tz,
|
||
duration: formatDuration(Math.round((e.getTime() - s.getTime()) / 1000)),
|
||
locations: location.trim() ? { [newKey("l")]: { "@type": "Location", name: location.trim() } } : undefined,
|
||
virtualLocations: vurl.trim() ? { [newKey("v")]: { "@type": "VirtualLocation", uri: vurl.trim(), name: "Online meeting" } } : undefined,
|
||
participants: Object.keys(participants).length ? participants : undefined,
|
||
// Stalwart 0.16 names the organizer here; RFC 8984's replyTo is ignored.
|
||
organizerCalendarAddress: Object.keys(participants).length && myAddress ? myAddress : undefined,
|
||
alerts: Object.keys(alertObj).length ? alertObj : undefined,
|
||
useDefaultAlerts: false,
|
||
// Singular, and no array: Stalwart 0.16 rejects `recurrenceRules` outright (#30).
|
||
recurrenceRule: rule ?? undefined,
|
||
status,
|
||
privacy,
|
||
freeBusyStatus: freeBusy,
|
||
color: color ?? (category ? categories.find((c) => c.name === category)?.color : undefined),
|
||
categories: category ? { [category]: true } : undefined,
|
||
};
|
||
const invites = sendInvites && attendees.length > 0;
|
||
if (ev) {
|
||
/*
|
||
* A single occurrence takes less than the series does. Four of the
|
||
* fields this form always sends are among them — `useDefaultAlerts`
|
||
* and `calendarIds` are refused outright, `recurrenceRule`,
|
||
* `privacy` and `organizerCalendarAddress` are dropped in silence —
|
||
* so they are left out here rather than sent and believed. The store
|
||
* still checks; this is what stops it having to complain.
|
||
*/
|
||
const source = oneDate
|
||
? Object.fromEntries(Object.entries(obj).filter(([k]) => !OCCURRENCE_OMIT.has(k)))
|
||
: obj;
|
||
const patch: Record<string, unknown> = {};
|
||
for (const [k, v] of Object.entries(source)) patch[k] = v === undefined ? null : v;
|
||
if (!oneDate && Object.keys(ev.calendarIds)[0] !== calendarId) patch.calendarIds = { [calendarId]: true };
|
||
const dropped = await runScoped(scope, (s) => cal.updateEvent(ev, patch, invites, s));
|
||
if (!dropped) { setBusy(false); return; }
|
||
toast.success(droppedMessage(dropped) ?? (oneDate ? "This occurrence updated" : "Event updated"));
|
||
} else {
|
||
const clean: Record<string, unknown> = {};
|
||
for (const [k, v] of Object.entries(obj)) if (v !== undefined) clean[k] = v;
|
||
await cal.createEvent(clean as Partial<CalendarEvent>, calendarId, invites);
|
||
toast.success(invites ? "Event created and invitations sent" : "Event created");
|
||
}
|
||
onClose();
|
||
} catch (err) {
|
||
toast.error((err as Error).message);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
};
|
||
|
||
const customRule = rule ?? { "@type": "RecurrenceRule", frequency: "weekly" as const };
|
||
const dayWindow = useMemo(() => {
|
||
const ds = new Date(start);
|
||
ds.setHours(0, 0, 0, 0);
|
||
return { ds, de: new Date(ds.getTime() + DAY_MS) };
|
||
}, [start]);
|
||
|
||
return (
|
||
<Dialog open onClose={onClose} title={editing ? translate("Edit event") : translate("New event")} size="lg" footer={<><button className="btn" onClick={onClose}>{translate("Cancel")}</button><button className="btn btn-primary" disabled={busy} onClick={() => void save()}>{busy ? translate("Saving…") : editing ? translate("Save") : attendees.length && sendInvites ? translate("Send invites") : translate("Create")}</button></>}>
|
||
<div className="event-form">
|
||
{ev && isRecurring(ev) && (
|
||
<div className="info-box mb-16">
|
||
{oneDate
|
||
? `Editing ${formatNumericDate(start)} only — the rest of the series is unchanged. Repeat, calendar and privacy belong to the series and are not shown.`
|
||
: "This is a recurring event — changes apply to the whole series."}
|
||
</div>
|
||
)}
|
||
<div className="field"><input className="input" style={{ fontSize: "1.1em", height: 44 }} placeholder={translate("Add title")} autoFocus value={title} onChange={(e) => setTitle(e.target.value)} /></div>
|
||
<div className="time-row mb-8">
|
||
{allDay ? (
|
||
<>
|
||
<DateField aria-label={translate("Starts")} value={toLocalDateOnly(start)} onChange={(v) => v && onStartChange(new Date(`${v}T00:00:00`))} />
|
||
<span className="muted center">{translate("to")}</span>
|
||
<DateField aria-label={translate("Ends")} value={toLocalDateOnly(new Date(end.getTime() - 1))} onChange={(v) => v && setEnd(new Date(new Date(`${v}T00:00:00`).getTime() + DAY_MS))} />
|
||
</>
|
||
) : (
|
||
<>
|
||
<DateTimeField aria-label={translate("Starts")} value={toInputDateTime(start)} onChange={(v) => v && onStartChange(fromInputDateTime(v))} />
|
||
<span className="muted center">{translate("to")}</span>
|
||
<DateTimeField aria-label={translate("Ends")} value={toInputDateTime(end)} onChange={(v) => v && setEnd(fromInputDateTime(v))} />
|
||
</>
|
||
)}
|
||
</div>
|
||
<div className="row wrap" style={{ gap: 16, marginBottom: 8 }}>
|
||
<label className="check"><input type="checkbox" checked={allDay} onChange={(e) => { setAllDay(e.target.checked); if (e.target.checked) { const s = new Date(start); s.setHours(0, 0, 0, 0); setStart(s); setEnd(new Date(s.getTime() + Math.max(DAY_MS, Math.ceil((end.getTime() - s.getTime()) / DAY_MS) * DAY_MS))); } }} /> {translate("All day")}</label>
|
||
{!allDay && (
|
||
<select className="select" style={{ width: "auto", height: 32 }} value={tz} onChange={(e) => setTz(e.target.value)} title={translate("Time zone")}>
|
||
{!listTimeZones().includes(tz) && <option value={tz}>{tz}</option>}
|
||
{listTimeZones().map((t) => <option key={t} value={t}>{t}</option>)}
|
||
</select>
|
||
)}
|
||
{!oneDate && (
|
||
<select className="select" style={{ width: "auto", height: 32 }} value={preset} onChange={(e) => { const p = e.target.value as RecurrencePreset; setPreset(p); if (p === "custom") setRule(rule ?? { "@type": "RecurrenceRule", frequency: "weekly", byDay: [{ "@type": "NDay", day: WEEKDAYS[(start.getDay() + 6) % 7]!.key }] }); else setRule(ruleFromPreset(p, start)); }}>
|
||
<option value="none">{translate("Does not repeat")}</option>
|
||
<option value="daily">{translate("Daily")}</option>
|
||
<option value="weekly">{translate("Weekly on {weekday}", { weekday: formatWeekday(start, "long") })}</option>
|
||
<option value="weekdays">{translate("Every weekday")}</option>
|
||
<option value="monthly">{translate("Monthly on day {day}", { day: start.getDate() })}</option>
|
||
<option value="yearly">{translate("Yearly")}</option>
|
||
<option value="custom">{translate("Custom…")}</option>
|
||
</select>
|
||
)}
|
||
</div>
|
||
{!oneDate && preset === "custom" && (
|
||
<div className="card" style={{ marginBottom: 12 }}>
|
||
<div className="row wrap" style={{ gap: 8 }}>
|
||
<span>{translate("Repeat every")}</span>
|
||
<input className="input" type="number" min={1} style={{ width: 70 }} value={customRule.interval ?? 1} onChange={(e) => setRule({ ...customRule, interval: Math.max(1, Number(e.target.value)) })} />
|
||
<select className="select" style={{ width: "auto" }} value={customRule.frequency} onChange={(e) => setRule({ ...customRule, frequency: e.target.value as JSCalendarRecurrenceRule["frequency"], byDay: e.target.value === "weekly" ? customRule.byDay : undefined, byMonthDay: e.target.value === "monthly" ? [start.getDate()] : undefined })}>
|
||
<option value="daily">{translate("day(s)")}</option><option value="weekly">{translate("week(s)")}</option><option value="monthly">{translate("month(s)")}</option><option value="yearly">{translate("year(s)")}</option>
|
||
</select>
|
||
</div>
|
||
{customRule.frequency === "weekly" && (
|
||
<div className="row" style={{ gap: 4, marginTop: 8 }}>
|
||
{WEEKDAYS.map((w) => {
|
||
const on = customRule.byDay?.some((d) => d.day === w.key);
|
||
return <button key={w.key} type="button" className={`btn btn-sm btn-pill ${on ? "btn-primary" : ""}`} style={{ width: 36, padding: 0 }} title={w.label} onClick={() => { const cur = customRule.byDay ?? []; const next: JSCalendarNDay[] = on ? cur.filter((d) => d.day !== w.key) : [...cur, { "@type": "NDay", day: w.key }]; setRule({ ...customRule, byDay: next.length ? next : undefined }); }}>{w.short}</button>;
|
||
})}
|
||
</div>
|
||
)}
|
||
<div className="row wrap" style={{ gap: 8, marginTop: 8 }}>
|
||
<span>{translate("Ends")}</span>
|
||
<select className="select" style={{ width: "auto" }} value={customRule.until ? "until" : customRule.count ? "count" : "never"} onChange={(e) => { const v = e.target.value; setRule({ ...customRule, until: v === "until" ? `${toLocalDateOnly(new Date(start.getTime() + 30 * DAY_MS))}T23:59:59` : undefined, count: v === "count" ? 10 : undefined }); }}>
|
||
<option value="never">{translate("never")}</option><option value="until">{translate("on date")}</option><option value="count">{translate("after N times")}</option>
|
||
</select>
|
||
{customRule.until && <DateField aria-label={translate("Repeat until")} className="w-auto" value={customRule.until.slice(0, 10)} onChange={(v) => v && setRule({ ...customRule, until: `${v}T23:59:59` })} />}
|
||
{customRule.count && <input className="input" type="number" min={1} style={{ width: 80 }} value={customRule.count} onChange={(e) => setRule({ ...customRule, count: Math.max(1, Number(e.target.value)) })} />}
|
||
</div>
|
||
<div className="hint mt-8">{describeRule(customRule)}</div>
|
||
</div>
|
||
)}
|
||
<div className="field-row">
|
||
<div className="field"><label>{translate("Calendar")}</label>
|
||
<select className="select" value={calendarId} disabled={oneDate} title={oneDate ? translate("An occurrence cannot be moved to another calendar on its own") : undefined} onChange={(e) => setCalendarId(e.target.value)}>
|
||
{calendars.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||
</select>
|
||
</div>
|
||
<div className="field"><label>{translate("Location")}</label><input className="input" value={location} onChange={(e) => setLocation(e.target.value)} placeholder={translate("Add location")} /></div>
|
||
</div>
|
||
<div className="field"><label>{translate("Meeting link")}</label><input className="input" value={vurl} onChange={(e) => setVurl(e.target.value)} placeholder={translate("https://meet.example.com/…")} /></div>
|
||
<div className="field">
|
||
<label><Users size={13} /> {translate("Guests")}</label>
|
||
<div className="input" style={{ height: "auto", minHeight: 38, padding: "4px 8px" }}>
|
||
<RecipientInput value={attendees} onChange={setAttendees} placeholder={translate("Add guests by name or email")} />
|
||
</div>
|
||
{attendees.length > 0 && (
|
||
<>
|
||
<Switch checked={sendInvites} onChange={setSendInvites} label={translate("Send invitation emails to guests")} />
|
||
{Object.keys(fb).length > 0 && (
|
||
<div className="freebusy">
|
||
<div className="hint">{translate("Availability on {date}", { date: formatNumericDate(start) })}</div>
|
||
{attendees.filter((a) => fb[a.email]).map((a) => (
|
||
<div key={a.email} className="fb-row">
|
||
<span className="truncate" style={{ width: 140 }}>{a.name ?? a.email}</span>
|
||
<div className="fb-bar">
|
||
{fb[a.email]!.map((b, i) => {
|
||
const bs = Math.max(new Date(b.utcStart).getTime(), dayWindow.ds.getTime());
|
||
const be = Math.min(new Date(b.utcEnd).getTime(), dayWindow.de.getTime());
|
||
if (be <= bs) return null;
|
||
return <span key={i} className="fb-busy" style={{ left: `${((bs - dayWindow.ds.getTime()) / DAY_MS) * 100}%`, width: `${((be - bs) / DAY_MS) * 100}%` }} title={`${b.busyStatus}: ${formatClock(new Date(b.utcStart))} – ${formatClock(new Date(b.utcEnd))}`} />;
|
||
})}
|
||
{!allDay && <span className="fb-window" style={{ left: `${((start.getTime() - dayWindow.ds.getTime()) / DAY_MS) * 100}%`, width: `${((end.getTime() - start.getTime()) / DAY_MS) * 100}%` }} />}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
<div className="field"><label>{translate("Description")}</label><textarea className="textarea" value={description} onChange={(e) => setDescription(e.target.value)} rows={3} /></div>
|
||
<div className="field">
|
||
<label>{translate("Reminders")}</label>
|
||
<div className="alerts-list">
|
||
{alerts.map((m, i) => (
|
||
<div key={i} className="row">
|
||
<select className="select" style={{ width: "auto" }} value={String(m)} onChange={(e) => setAlerts(alerts.map((x, j) => (j === i ? Number(e.target.value) : x)))}>
|
||
{[...new Set([...ALERT_OPTIONS, m])].sort((a, b) => a - b).map((o) => <option key={o} value={o}>{o === 0 ? "At time of event" : `${humanDuration(o * 60)} before`}</option>)}
|
||
</select>
|
||
<button className="icon-btn sm danger" onClick={() => setAlerts(alerts.filter((_, j) => j !== i))} aria-label={translate("Remove reminder")}><Trash2 size={16} /></button>
|
||
</div>
|
||
))}
|
||
<button className="btn btn-ghost btn-sm" style={{ alignSelf: "flex-start" }} onClick={() => setAlerts([...alerts, 10])}><Plus size={14} /> {translate("Add reminder")}</button>
|
||
</div>
|
||
</div>
|
||
<button className="btn btn-ghost btn-sm" onClick={() => setShowMore((v) => !v)}>{showMore ? "Fewer options" : "More options"}</button>
|
||
{showMore && (
|
||
<div className="mt-8">
|
||
<div className="field-row">
|
||
<div className="field"><label>{translate("Status")}</label><select className="select" value={status} onChange={(e) => setStatus(e.target.value as typeof status)}><option value="confirmed">{translate("Confirmed")}</option><option value="tentative">{translate("Tentative")}</option><option value="cancelled">{translate("Cancelled")}</option></select></div>
|
||
<div className="field"><label>{translate("Show as")}</label><select className="select" value={freeBusy} onChange={(e) => setFreeBusy(e.target.value as typeof freeBusy)}><option value="busy">{translate("Busy")}</option><option value="free">{translate("Free")}</option></select></div>
|
||
{!oneDate && <div className="field"><label>{translate("Visibility")}</label><select className="select" value={privacy} onChange={(e) => setPrivacy(e.target.value as typeof privacy)}><option value="public">{translate("Default")}</option><option value="private">{translate("Private")}</option><option value="secret">{translate("Secret")}</option></select></div>}
|
||
</div>
|
||
<div className="field"><label>{translate("Category")}</label>
|
||
<select className="select" value={category} onChange={(e) => setCategory(e.target.value)}>
|
||
<option value="">{translate("None")}</option>
|
||
{categories.map((c) => <option key={c.name} value={c.name}>{c.name}</option>)}
|
||
</select>
|
||
</div>
|
||
<div className="field"><label>{translate("Color")}</label><div className="row wrap"><ColorSwatches value={color} onChange={setColor} />{color && <button className="btn btn-ghost btn-sm" onClick={() => setColor(null)}>{category ? translate("Use category color") : translate("Use calendar color")}</button>}</div></div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</Dialog>
|
||
);
|
||
}
|