refactor: split calendar page components
This commit is contained in:
@@ -14,7 +14,8 @@
|
||||
"./styles/calendar.css": "./src/styles/calendar.css"
|
||||
},
|
||||
"scripts": {
|
||||
"test:calendar-picker": "rm -rf .calendar-picker-test-build && mkdir -p .calendar-picker-test-build && printf '{\"type\":\"commonjs\"}\\n' > .calendar-picker-test-build/package.json && tsc -p tsconfig.calendar-picker-tests.json && node .calendar-picker-test-build/tests/calendar-picker.test.js && node tests/calendar-picker-structure.test.mjs"
|
||||
"test:calendar-picker": "rm -rf .calendar-picker-test-build && mkdir -p .calendar-picker-test-build && printf '{\"type\":\"commonjs\"}\\n' > .calendar-picker-test-build/package.json && tsc -p tsconfig.calendar-picker-tests.json && node .calendar-picker-test-build/tests/calendar-picker.test.js && node tests/calendar-picker-structure.test.mjs",
|
||||
"test:calendar-page": "tsc -p tsconfig.calendar-page-tests.json && node --experimental-strip-types tests/calendar-view-model.test.ts && node tests/calendar-page-structure.test.mjs"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@govoplan/core-webui": "^0.1.9",
|
||||
|
||||
827
webui/src/features/calendar/CalendarCollectionDialogs.tsx
Normal file
827
webui/src/features/calendar/CalendarCollectionDialogs.tsx
Normal file
@@ -0,0 +1,827 @@
|
||||
import {
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
type ChangeEvent,
|
||||
type FormEvent,
|
||||
} from "react";
|
||||
import { RefreshCw, Trash2 } from "lucide-react";
|
||||
import {
|
||||
Button,
|
||||
ColorPickerField,
|
||||
Dialog,
|
||||
PasswordField,
|
||||
SegmentedControl,
|
||||
ToggleSwitch,
|
||||
i18nMessage,
|
||||
useUnsavedDraftGuard,
|
||||
type ApiSettings,
|
||||
} from "@govoplan/core-webui";
|
||||
import {
|
||||
listCalendarCredentials,
|
||||
type CalendarBulkMoveExternalAction,
|
||||
type CalendarCalDavAuthType,
|
||||
type CalendarCalDavConflictPolicy,
|
||||
type CalendarCalDavDiscoveryCandidate,
|
||||
type CalendarCalDavDiscoveryPayload,
|
||||
type CalendarCalDavSyncDirection,
|
||||
type CalendarCollection,
|
||||
type CalendarCollectionDeletePayload,
|
||||
type CalendarCredentialEnvelope,
|
||||
type CalendarDeleteEventAction,
|
||||
type CalendarSyncSource,
|
||||
type CalendarSyncSourceCreatePayload,
|
||||
type CalendarSyncSourceKind,
|
||||
type CalendarSyncSourceUpdatePayload,
|
||||
} from "../../api/calendar";
|
||||
import {
|
||||
DEFAULT_CALENDAR_COLOR,
|
||||
calendarDraftKey,
|
||||
dateTimeLabel,
|
||||
errorText,
|
||||
normalizeHexColor,
|
||||
} from "./calendarViewModel";
|
||||
|
||||
export type CalendarSourceMode = "local" | CalendarSyncSourceKind;
|
||||
type CalendarSourceSwitchMode =
|
||||
| "local"
|
||||
| "caldav"
|
||||
| "ics"
|
||||
| "graph"
|
||||
| "ews";
|
||||
export type CalendarCollectionDialogState =
|
||||
| { kind: "create" }
|
||||
| {
|
||||
kind: "edit";
|
||||
calendar: CalendarCollection;
|
||||
eventCount: number | null;
|
||||
loadingEventCount: boolean;
|
||||
};
|
||||
export type CalendarDeleteDialogState = {
|
||||
calendar: CalendarCollection;
|
||||
eventCount: number | null;
|
||||
loadingEventCount: boolean;
|
||||
};
|
||||
export type CalendarCalDavFormPayload = {
|
||||
collection_url: string;
|
||||
dav_url: string;
|
||||
display_name: string;
|
||||
auth_type: CalendarCalDavAuthType;
|
||||
username: string;
|
||||
credential_envelope_id: string;
|
||||
password: string;
|
||||
bearer_token: string;
|
||||
sync_enabled: boolean;
|
||||
sync_interval_seconds: number;
|
||||
sync_direction: CalendarCalDavSyncDirection;
|
||||
conflict_policy: CalendarCalDavConflictPolicy;
|
||||
};
|
||||
export type CalendarCollectionFormPayload = {
|
||||
sourceMode: CalendarSourceMode;
|
||||
name: string;
|
||||
color: string;
|
||||
caldav: CalendarCalDavFormPayload;
|
||||
};
|
||||
|
||||
export function CalendarCollectionDialog({
|
||||
state,
|
||||
settings,
|
||||
source,
|
||||
saving,
|
||||
syncingSourceId,
|
||||
canWrite,
|
||||
canDelete,
|
||||
canManageSources,
|
||||
canSyncSources,
|
||||
onCancel,
|
||||
onSave,
|
||||
onRequestDelete,
|
||||
onSync,
|
||||
onDiscover
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}: {state: CalendarCollectionDialogState;settings: ApiSettings;source: CalendarSyncSource | null;saving: boolean;syncingSourceId: string;canWrite: boolean;canDelete: boolean;canManageSources: boolean;canSyncSources: boolean;onCancel: () => void;onSave: (payload: CalendarCollectionFormPayload) => Promise<boolean>;onRequestDelete: (calendar: CalendarCollection, eventCount: number | null, loadingEventCount: boolean) => void;onSync: (source: CalendarSyncSource, payload?: {password?: string | null;bearer_token?: string | null;force_full?: boolean;}) => Promise<void>;onDiscover: (payload: CalendarCalDavDiscoveryPayload) => Promise<{calendars: CalendarCalDavDiscoveryCandidate[];}>;}) {
|
||||
const calendar = state.kind === "edit" ? state.calendar : null;
|
||||
const isEdit = Boolean(calendar);
|
||||
const [sourceMode, setSourceMode] = useState<CalendarSourceMode>(source ? source.source_kind : "local");
|
||||
const [name, setName] = useState(calendar?.name ?? "");
|
||||
const [color, setColor] = useState(normalizeHexColor(calendar?.color) || DEFAULT_CALENDAR_COLOR);
|
||||
const [davUrl, setDavUrl] = useState(source?.collection_url ?? "");
|
||||
const [collectionUrl, setCollectionUrl] = useState(source?.collection_url ?? "");
|
||||
const [displayName, setDisplayName] = useState(source?.display_name ?? "");
|
||||
const [authType, setAuthType] = useState<CalendarCalDavAuthType>(source?.auth_type ?? "basic");
|
||||
const [username, setUsername] = useState(source?.username ?? "");
|
||||
const [credentialEnvelopeId, setCredentialEnvelopeId] = useState(source?.credential_envelope_id ?? "");
|
||||
const [availableCredentials, setAvailableCredentials] = useState<CalendarCredentialEnvelope[]>([]);
|
||||
const [credentialsError, setCredentialsError] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [bearerToken, setBearerToken] = useState("");
|
||||
const [syncEnabled, setSyncEnabled] = useState(source?.sync_enabled ?? true);
|
||||
const [syncIntervalMinutes, setSyncIntervalMinutes] = useState(Math.max(1, Math.round((source?.sync_interval_seconds ?? 900) / 60)));
|
||||
const [syncDirection, setSyncDirection] = useState<CalendarCalDavSyncDirection>(source?.sync_direction ?? "two_way");
|
||||
const [conflictPolicy, setConflictPolicy] = useState<CalendarCalDavConflictPolicy>(source?.conflict_policy ?? "etag");
|
||||
const [discoveredCalendars, setDiscoveredCalendars] = useState<CalendarCalDavDiscoveryCandidate[]>([]);
|
||||
const [selectedDiscoveredUrl, setSelectedDiscoveredUrl] = useState(source?.collection_url ?? "");
|
||||
const [discovering, setDiscovering] = useState(false);
|
||||
const [discoveryError, setDiscoveryError] = useState("");
|
||||
const formId = "calendar-collection-form";
|
||||
const isExistingSyncSource = isEdit && Boolean(source);
|
||||
const canEditSource = canManageSources;
|
||||
const canEditMutableSourceSettings = canEditSource && !isExistingSyncSource;
|
||||
const effectiveCollectionUrl = (collectionUrl || davUrl).trim();
|
||||
const effectiveAuthType = sourceMode === "graph" ? "bearer" : authType;
|
||||
const needsSourceSecret = sourceMode !== "local" && (
|
||||
effectiveAuthType === "basic" && !source?.has_credential && !credentialEnvelopeId && !password.trim() ||
|
||||
effectiveAuthType === "bearer" && !source?.has_credential && !credentialEnvelopeId && !bearerToken.trim());
|
||||
|
||||
const sourceDetailsInvalid = sourceMode !== "local" && (
|
||||
!isExistingSyncSource && !canEditSource ||
|
||||
canEditSource && (!effectiveCollectionUrl || effectiveAuthType === "basic" && !username.trim() || needsSourceSecret));
|
||||
|
||||
const saveDisabled =
|
||||
saving ||
|
||||
!canWrite ||
|
||||
!name.trim() ||
|
||||
sourceDetailsInvalid;
|
||||
|
||||
const syncing = source ? syncingSourceId === source.id : false;
|
||||
|
||||
const collectionDraft = {
|
||||
sourceMode,
|
||||
name,
|
||||
color,
|
||||
davUrl,
|
||||
collectionUrl,
|
||||
displayName,
|
||||
authType,
|
||||
username,
|
||||
credentialEnvelopeId,
|
||||
password,
|
||||
bearerToken,
|
||||
syncEnabled,
|
||||
syncIntervalMinutes,
|
||||
syncDirection,
|
||||
conflictPolicy
|
||||
};
|
||||
const initialCollectionDraftKey = useMemo(() => calendarDraftKey(collectionDraft), []);
|
||||
const collectionDirty = calendarDraftKey(collectionDraft) !== initialCollectionDraftKey;
|
||||
|
||||
useUnsavedDraftGuard({
|
||||
dirty: collectionDirty,
|
||||
onSave: saveCurrent,
|
||||
onDiscard: onCancel
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (sourceMode === "local" || !canManageSources) {
|
||||
setAvailableCredentials([]);
|
||||
setCredentialsError("");
|
||||
return;
|
||||
}
|
||||
let active = true;
|
||||
listCalendarCredentials(settings, source?.id)
|
||||
.then((response) => {
|
||||
if (active) setAvailableCredentials(response.credentials);
|
||||
})
|
||||
.catch((err) => {
|
||||
if (active) {
|
||||
setAvailableCredentials([]);
|
||||
setCredentialsError(errorText(err));
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [canManageSources, settings.accessToken, settings.apiBaseUrl, settings.apiKey, source?.id, sourceMode]);
|
||||
|
||||
function currentPayload(): CalendarCollectionFormPayload {
|
||||
return {
|
||||
sourceMode,
|
||||
name,
|
||||
color,
|
||||
caldav: {
|
||||
collection_url: effectiveCollectionUrl,
|
||||
dav_url: davUrl,
|
||||
display_name: displayName,
|
||||
auth_type: effectiveAuthType,
|
||||
username,
|
||||
credential_envelope_id: credentialEnvelopeId,
|
||||
password,
|
||||
bearer_token: bearerToken,
|
||||
sync_enabled: syncEnabled,
|
||||
sync_interval_seconds: syncIntervalMinutes * 60,
|
||||
sync_direction: syncDirection,
|
||||
conflict_policy: conflictPolicy
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async function saveCurrent(): Promise<boolean> {
|
||||
if (saveDisabled) return false;
|
||||
return onSave(currentPayload());
|
||||
}
|
||||
|
||||
function submit(formEvent: FormEvent<HTMLFormElement>) {
|
||||
formEvent.preventDefault();
|
||||
void saveCurrent();
|
||||
}
|
||||
|
||||
function selectSourceMode(next: CalendarSourceMode) {
|
||||
setSourceMode(next);
|
||||
setDiscoveryError("");
|
||||
setDiscoveredCalendars([]);
|
||||
if (next === "graph") {
|
||||
setAuthType("bearer");
|
||||
setSyncDirection("inbound");
|
||||
if (!davUrl.trim()) handleDavUrlChange("me/calendar");
|
||||
return;
|
||||
}
|
||||
if (next === "ews") {
|
||||
setAuthType("basic");
|
||||
setSyncDirection("inbound");
|
||||
if (!davUrl.trim()) handleDavUrlChange("https://exchange.example.org/EWS/Exchange.asmx");
|
||||
return;
|
||||
}
|
||||
if (next === "ics" || next === "webcal") {
|
||||
setAuthType("none");
|
||||
setSyncDirection("inbound");
|
||||
return;
|
||||
}
|
||||
if (next === "caldav") {
|
||||
setSyncDirection("two_way");
|
||||
}
|
||||
}
|
||||
|
||||
function handleDavUrlChange(next: string) {
|
||||
setDavUrl(next);
|
||||
setCollectionUrl(next);
|
||||
setSelectedDiscoveredUrl("");
|
||||
setDiscoveredCalendars([]);
|
||||
setDiscoveryError("");
|
||||
}
|
||||
|
||||
function applyDiscoveredCalendar(candidate: CalendarCalDavDiscoveryCandidate) {
|
||||
setSelectedDiscoveredUrl(candidate.collection_url);
|
||||
setCollectionUrl(candidate.collection_url);
|
||||
if (candidate.display_name) {
|
||||
if (!isExistingSyncSource) setDisplayName(candidate.display_name);
|
||||
if (!isEdit && !name.trim()) setName(candidate.display_name);
|
||||
}
|
||||
const discoveredColor = normalizeHexColor(candidate.color);
|
||||
if (!isEdit && discoveredColor) setColor(discoveredColor);
|
||||
}
|
||||
|
||||
function handleDiscoveredCalendarChange(event: ChangeEvent<HTMLSelectElement>) {
|
||||
const candidate = discoveredCalendars.find((item) => item.collection_url === event.target.value);
|
||||
if (candidate) applyDiscoveredCalendar(candidate);
|
||||
}
|
||||
|
||||
async function handleDiscover() {
|
||||
const url = davUrl.trim();
|
||||
if (!url) return;
|
||||
setDiscovering(true);
|
||||
setDiscoveryError("");
|
||||
try {
|
||||
const payload: CalendarCalDavDiscoveryPayload = {
|
||||
url,
|
||||
source_id: source?.id ?? null,
|
||||
auth_type: authType,
|
||||
username: authType === "basic" ? username.trim() || null : null
|
||||
};
|
||||
if (credentialEnvelopeId) payload.credential_ref = credentialEnvelopeRef(credentialEnvelopeId);
|
||||
if (!credentialEnvelopeId && authType === "basic" && password.trim()) payload.password = password;
|
||||
if (!credentialEnvelopeId && authType === "bearer" && bearerToken.trim()) payload.bearer_token = bearerToken;
|
||||
const response = await onDiscover(payload);
|
||||
setDiscoveredCalendars(response.calendars);
|
||||
if (response.calendars.length > 0) {
|
||||
applyDiscoveredCalendar(response.calendars[0]);
|
||||
} else {
|
||||
setDiscoveryError("i18n:govoplan-calendar.no_calendar_collections_found.6453624a");
|
||||
}
|
||||
} catch (err) {
|
||||
setDiscoveryError(errorText(err));
|
||||
} finally {
|
||||
setDiscovering(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open
|
||||
title={isEdit ? "i18n:govoplan-calendar.edit_calendar.a47a2a7a" : "i18n:govoplan-calendar.add_calendar.8fadb5bc"}
|
||||
className="calendar-event-dialog"
|
||||
footerClassName="calendar-event-dialog-footer"
|
||||
closeDisabled={saving}
|
||||
onClose={onCancel}
|
||||
footer={
|
||||
<>
|
||||
<div>
|
||||
{calendar && canDelete &&
|
||||
<Button type="button" variant="danger" onClick={() => onRequestDelete(calendar, state.kind === "edit" ? state.eventCount : null, state.kind === "edit" ? state.loadingEventCount : true)} disabled={saving}>
|
||||
<Trash2 size={16} /> {calendarDeleteActionLabel(calendar)}
|
||||
</Button>
|
||||
}
|
||||
</div>
|
||||
<div className="calendar-dialog-actions">
|
||||
<Button type="button" onClick={onCancel} disabled={saving}>i18n:govoplan-calendar.cancel.77dfd213</Button>
|
||||
<Button type="submit" form={formId} variant="primary" disabled={saveDisabled}>{saving ? "i18n:govoplan-calendar.saving.ae7e8875" : isEdit ? "i18n:govoplan-calendar.save.efc007a3" : "i18n:govoplan-calendar.add.61cc55aa"}</Button>
|
||||
</div>
|
||||
</>
|
||||
}>
|
||||
|
||||
<form id={formId} className="calendar-dialog-form" onSubmit={submit}>
|
||||
{sourceMode !== "local" && !canManageSources && <p className="calendar-form-note">i18n:govoplan-calendar.managing_sync_sources_requires_calendar_administ.835e29fa</p>}
|
||||
{!isEdit &&
|
||||
<SegmentedControl
|
||||
className="calendar-source-switch"
|
||||
size="equal"
|
||||
width="fill"
|
||||
ariaLabel="i18n:govoplan-calendar.calendar_source_type.92cdb42f"
|
||||
value={sourceSwitchMode(sourceMode)}
|
||||
disabled={saving}
|
||||
onChange={selectSourceMode}
|
||||
options={[
|
||||
{ id: "local", label: "i18n:govoplan-calendar.local.dc99d54d" },
|
||||
{ id: "caldav", label: "i18n:govoplan-calendar.caldav.64f9720e", disabled: !canManageSources },
|
||||
{ id: "ics", label: "i18n:govoplan-calendar.ics_webcal.9c55b570", disabled: !canManageSources },
|
||||
{ id: "graph", label: "i18n:govoplan-calendar.graph.9a7405eb", disabled: !canManageSources },
|
||||
{ id: "ews", label: "i18n:govoplan-calendar.exchange.5b13eac7", disabled: !canManageSources }
|
||||
]}
|
||||
/>
|
||||
}
|
||||
<div className="calendar-dialog-name-color-row">
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.name.709a2322</span>
|
||||
<input value={name} onChange={(item) => setName(item.target.value)} required maxLength={255} autoFocus disabled={saving || !canWrite} />
|
||||
</label>
|
||||
<label className="calendar-dialog-color-label">
|
||||
<span>i18n:govoplan-calendar.color.1d0c8304</span>
|
||||
<ColorPickerField value={color} onChange={setColor} disabled={saving || !canWrite} />
|
||||
</label>
|
||||
</div>
|
||||
{sourceMode === "local" ?
|
||||
<section className="calendar-source-pane">
|
||||
<h3>i18n:govoplan-calendar.local_calendar.ed3f72f8</h3>
|
||||
<p className="calendar-form-note">i18n:govoplan-calendar.events_are_stored_in_govoplan_and_are_not_synced.3660e504</p>
|
||||
</section> :
|
||||
|
||||
<section className="calendar-source-pane">
|
||||
<div className="calendar-source-pane-heading">
|
||||
<h3>{calendarSourcePaneTitle(sourceMode)}</h3>
|
||||
{source &&
|
||||
<span className={[
|
||||
"calendar-sync-status",
|
||||
syncing ? "is-syncing" : "",
|
||||
source.last_status === "error" && !syncing ? "is-error" : ""].
|
||||
filter(Boolean).join(" ")}>
|
||||
{syncing ? "i18n:govoplan-calendar.syncing.4ae6fa22" : source.last_status || "i18n:govoplan-calendar.not_synced.4c205136"}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
<div className="calendar-caldav-setup">
|
||||
<label className="calendar-dialog-wide">
|
||||
<span>{calendarSourceUrlLabel(sourceMode)}</span>
|
||||
<input
|
||||
value={davUrl}
|
||||
onChange={(item) => handleDavUrlChange(item.target.value)}
|
||||
placeholder={calendarSourceUrlPlaceholder(sourceMode)}
|
||||
required
|
||||
maxLength={1000}
|
||||
disabled={saving || !canEditSource} />
|
||||
|
||||
</label>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.authentication.ee1acfa5</span>
|
||||
<select value={effectiveAuthType} onChange={(item) => setAuthType(item.target.value as CalendarCalDavAuthType)} disabled={saving || !canEditSource || sourceMode === "graph"}>
|
||||
{sourceMode !== "graph" && <option value="basic">i18n:govoplan-calendar.basic.aa2c96da</option>}
|
||||
{sourceMode !== "graph" && sourceMode !== "ews" && <option value="none">i18n:govoplan-calendar.none.6eef6648</option>}
|
||||
<option value="bearer">i18n:govoplan-calendar.bearer_token.ffa64bcf</option>
|
||||
</select>
|
||||
</label>
|
||||
{effectiveAuthType !== "none" &&
|
||||
<label>
|
||||
<span>Reusable credential</span>
|
||||
<select
|
||||
value={credentialEnvelopeId}
|
||||
disabled={saving || !canEditSource}
|
||||
onChange={(event) => {
|
||||
const credentialId = event.target.value;
|
||||
setCredentialEnvelopeId(credentialId);
|
||||
setPassword("");
|
||||
setBearerToken("");
|
||||
const credential = availableCredentials.find((item) => item.id === credentialId);
|
||||
const credentialUsername = credential?.public_data?.username;
|
||||
if (credentialUsername) setUsername(String(credentialUsername));
|
||||
}}>
|
||||
<option value="">{source?.has_credential && !source.credential_envelope_id ? "Keep source-specific credential" : "Enter credentials below"}</option>
|
||||
{availableCredentials.map((credential) =>
|
||||
<option key={credential.id} value={credential.id}>
|
||||
{credential.name}{credential.public_data?.username ? ` (${String(credential.public_data.username)})` : ""}
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
</label>
|
||||
}
|
||||
{credentialsError && <p className="calendar-form-error calendar-dialog-wide">{credentialsError}</p>}
|
||||
{effectiveAuthType === "basic" &&
|
||||
<>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.username.84c29015</span>
|
||||
<input value={username} onChange={(item) => setUsername(item.target.value)} required maxLength={255} disabled={saving || !canEditSource || Boolean(credentialEnvelopeId)} />
|
||||
</label>
|
||||
{!credentialEnvelopeId &&
|
||||
<label>
|
||||
<span>{source?.has_credential ? "i18n:govoplan-calendar.replace_password.3f912c9c" : "i18n:govoplan-calendar.password.8be3c943"}</span>
|
||||
<PasswordField value={password} onValueChange={setPassword} disabled={saving || !canEditSource} autoComplete="new-password" />
|
||||
</label>
|
||||
}
|
||||
</>
|
||||
}
|
||||
{effectiveAuthType === "bearer" && !credentialEnvelopeId &&
|
||||
<label>
|
||||
<span>{source?.has_credential ? "i18n:govoplan-calendar.replace_token.bbeee6a9" : "i18n:govoplan-calendar.bearer_token.ffa64bcf"}</span>
|
||||
<PasswordField value={bearerToken} onValueChange={setBearerToken} disabled={saving || !canEditSource} autoComplete="new-password" />
|
||||
</label>
|
||||
}
|
||||
<div className={sourceMode === "caldav" ? "calendar-discovery-actions" : "calendar-discovery-actions is-readonly"}>
|
||||
{sourceMode === "caldav" &&
|
||||
<Button type="button" onClick={() => void handleDiscover()} disabled={saving || discovering || !canEditSource || !davUrl.trim() || effectiveAuthType === "basic" && !username.trim()}>
|
||||
<RefreshCw size={16} /> {discovering ? "i18n:govoplan-calendar.discovering.1884f689" : "i18n:govoplan-calendar.discover.4827ea22"}
|
||||
</Button>
|
||||
}
|
||||
{effectiveCollectionUrl && <span>{effectiveCollectionUrl}</span>}
|
||||
</div>
|
||||
</div>
|
||||
{discoveryError && <p className="calendar-form-error">{discoveryError}</p>}
|
||||
{sourceMode === "caldav" && discoveredCalendars.length > 0 &&
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.calendar.adab5090</span>
|
||||
<select value={selectedDiscoveredUrl} onChange={handleDiscoveredCalendarChange} disabled={saving || !canEditSource}>
|
||||
{discoveredCalendars.map((candidate) =>
|
||||
<option key={candidate.collection_url} value={candidate.collection_url}>
|
||||
{candidate.display_name || candidate.collection_url}
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
</label>
|
||||
}
|
||||
<details className="calendar-advanced-settings">
|
||||
<summary>i18n:govoplan-calendar.advanced.4d064726</summary>
|
||||
<div className="calendar-dialog-grid-two">
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.display_name.c7874aaa</span>
|
||||
<input value={displayName} onChange={(item) => setDisplayName(item.target.value)} maxLength={255} disabled={saving || !canEditMutableSourceSettings} />
|
||||
</label>
|
||||
</div>
|
||||
<div className="calendar-sync-settings">
|
||||
<ToggleSwitch label="i18n:govoplan-calendar.automatic_sync.084644b2" checked={syncEnabled} disabled={saving || !canEditMutableSourceSettings} onChange={setSyncEnabled} />
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.interval.011efcd5</span>
|
||||
<input type="number" min={1} step={1} value={syncIntervalMinutes} onChange={(item) => setSyncIntervalMinutes(Math.max(1, Number(item.target.value) || 1))} disabled={saving || !canEditMutableSourceSettings} />
|
||||
</label>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.direction.fd8e45ba</span>
|
||||
<select value={sourceMode === "caldav" ? syncDirection : "inbound"} onChange={(item) => setSyncDirection(item.target.value as CalendarCalDavSyncDirection)} disabled={saving || !canEditMutableSourceSettings || sourceMode !== "caldav"}>
|
||||
<option value="two_way">i18n:govoplan-calendar.two_way.ee50a3e6</option>
|
||||
<option value="inbound">i18n:govoplan-calendar.inbound_only.bf4269b0</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.conflict_policy.5810e150</span>
|
||||
<select value={conflictPolicy} onChange={(item) => setConflictPolicy(item.target.value as CalendarCalDavConflictPolicy)} disabled={saving || !canEditMutableSourceSettings || sourceMode !== "caldav"}>
|
||||
<option value="etag">i18n:govoplan-calendar.require_matching_etag.0ab1ffe1</option>
|
||||
<option value="overwrite">i18n:govoplan-calendar.overwrite_remote.39625e32</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</details>
|
||||
{source &&
|
||||
<div className="calendar-sync-status-panel">
|
||||
<dl>
|
||||
<div><dt>i18n:govoplan-calendar.last_attempt.82aee111</dt><dd>{source.last_attempt_at ? dateTimeLabel(new Date(source.last_attempt_at)) : "i18n:govoplan-calendar.never.80c3052d"}</dd></div>
|
||||
<div><dt>i18n:govoplan-calendar.last_sync.ef0ef267</dt><dd>{source.last_synced_at ? dateTimeLabel(new Date(source.last_synced_at)) : "i18n:govoplan-calendar.never.80c3052d"}</dd></div>
|
||||
<div><dt>i18n:govoplan-calendar.next_sync.88c7af72</dt><dd>{source.next_sync_at && source.sync_enabled ? dateTimeLabel(new Date(source.next_sync_at)) : "i18n:govoplan-calendar.not_scheduled.9c367369"}</dd></div>
|
||||
<div><dt>i18n:govoplan-calendar.credential.8bede3ea</dt><dd>{source.has_credential ? "i18n:govoplan-calendar.configured.668c5fff" : "i18n:govoplan-calendar.not_configured.811931bb"}</dd></div>
|
||||
</dl>
|
||||
{source.last_error && <p className="calendar-form-error">{source.last_error}</p>}
|
||||
<div className="calendar-sync-actions">
|
||||
<Button
|
||||
type="button"
|
||||
className={syncing ? "calendar-sync-button is-syncing" : "calendar-sync-button"}
|
||||
onClick={() => void onSync(source, syncTransientPayload(effectiveAuthType, password, bearerToken))}
|
||||
disabled={saving || syncing || !canSyncSources}>
|
||||
|
||||
<RefreshCw size={16} className={syncing ? "calendar-sync-spin" : undefined} /> {syncing ? "i18n:govoplan-calendar.syncing.e5c7727a" : "i18n:govoplan-calendar.sync_now.2b7d938e"}
|
||||
</Button>
|
||||
<Button type="button" onClick={() => void onSync(source, { ...syncTransientPayload(effectiveAuthType, password, bearerToken), force_full: true })} disabled={saving || syncing || !canSyncSources}>
|
||||
i18n:govoplan-calendar.full_sync.21b89c76
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{needsSourceSecret && <p className="calendar-form-note">i18n:govoplan-calendar.enter_a_password_or_token_for_this_source.74c09a54</p>}
|
||||
</section>
|
||||
}
|
||||
</form>
|
||||
</Dialog>);
|
||||
|
||||
}
|
||||
|
||||
export function CalendarCollectionDeleteDialog({
|
||||
state,
|
||||
calendars,
|
||||
syncSources,
|
||||
saving,
|
||||
onCancel,
|
||||
onDelete
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}: {state: CalendarDeleteDialogState;calendars: CalendarCollection[];syncSources: CalendarSyncSource[];saving: boolean;onCancel: () => void;onDelete: (calendar: CalendarCollection, payload: CalendarCollectionDeletePayload) => Promise<void>;}) {
|
||||
const { calendar, eventCount, loadingEventCount } = state;
|
||||
const syncSourceByCalendarId = new Map(syncSources.map((source) => [source.calendar_id, source]));
|
||||
const source = syncSourceByCalendarId.get(calendar.id) ?? null;
|
||||
const moveTargets = calendars.filter((item) =>
|
||||
item.id !== calendar.id && calendarMoveTargetIsSupported(source, syncSourceByCalendarId.get(item.id) ?? null)
|
||||
);
|
||||
const firstMoveTargetId = moveTargets[0]?.id || "";
|
||||
const hasEvents = (eventCount ?? 0) > 0;
|
||||
const canMoveEvents = hasEvents && moveTargets.length > 0;
|
||||
const [eventAction, setEventAction] = useState<CalendarDeleteEventAction>("delete");
|
||||
const [targetCalendarId, setTargetCalendarId] = useState(firstMoveTargetId);
|
||||
const [makeTargetDefault, setMakeTargetDefault] = useState(calendar.is_default && Boolean(firstMoveTargetId));
|
||||
const effectiveEventAction: CalendarDeleteEventAction = canMoveEvents ? eventAction : "delete";
|
||||
const confirmDisabled = saving || loadingEventCount || canMoveEvents && effectiveEventAction === "move" && !targetCalendarId;
|
||||
const actionLabel = calendarDeleteActionLabel(calendar);
|
||||
const targetSource = syncSourceByCalendarId.get(targetCalendarId) ?? null;
|
||||
const externalAction = calendarBulkMoveExternalAction(source, targetSource);
|
||||
|
||||
function confirm() {
|
||||
void onDelete(calendar, {
|
||||
event_action: effectiveEventAction,
|
||||
target_calendar_id: effectiveEventAction === "move" ? targetCalendarId : null,
|
||||
make_target_default: effectiveEventAction === "move" && calendar.is_default && makeTargetDefault,
|
||||
external_action: effectiveEventAction === "move" ? externalAction : null
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open
|
||||
role="alertdialog"
|
||||
title={`${actionLabel} calendar`}
|
||||
className="calendar-delete-dialog"
|
||||
footerClassName="calendar-event-dialog-footer"
|
||||
closeDisabled={saving}
|
||||
onClose={onCancel}
|
||||
footer={
|
||||
<>
|
||||
<Button type="button" onClick={onCancel} disabled={saving}>i18n:govoplan-calendar.cancel.77dfd213</Button>
|
||||
<Button type="button" variant="danger" onClick={confirm} disabled={confirmDisabled}>
|
||||
<Trash2 size={16} /> {saving ? "i18n:govoplan-calendar.working.049ac820" : actionLabel}
|
||||
</Button>
|
||||
</>
|
||||
}>
|
||||
|
||||
<div className="calendar-delete-dialog-body">
|
||||
<p className="calendar-delete-warning">
|
||||
{loadingEventCount ?
|
||||
"i18n:govoplan-calendar.loading_event_count.716ad3c2" :
|
||||
calendarDeleteWarning(calendar, eventCount ?? 0, effectiveEventAction, targetCalendarId, moveTargets)}
|
||||
</p>
|
||||
{!loadingEventCount && eventCount === null && <p className="calendar-form-note">i18n:govoplan-calendar.event_count_could_not_be_loaded_the_backend_will.163ff055</p>}
|
||||
{canMoveEvents &&
|
||||
<fieldset className="calendar-delete-options" disabled={saving || loadingEventCount}>
|
||||
<legend>{eventCount} event{eventCount === 1 ? "" : "s"}</legend>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="calendar-delete-event-action"
|
||||
value="delete"
|
||||
checked={eventAction === "delete"}
|
||||
onChange={() => setEventAction("delete")} />
|
||||
|
||||
<span>{calendarEventDeleteOptionLabel(calendar)}</span>
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="calendar-delete-event-action"
|
||||
value="move"
|
||||
checked={eventAction === "move"}
|
||||
onChange={() => setEventAction("move")} />
|
||||
|
||||
<span>{calendarBulkMoveOptionLabel(externalAction)}</span>
|
||||
</label>
|
||||
{eventAction === "move" &&
|
||||
<>
|
||||
<label className="calendar-delete-target-label">
|
||||
<span>i18n:govoplan-calendar.target_calendar.e533fe1d</span>
|
||||
<select value={targetCalendarId} onChange={(item) => setTargetCalendarId(item.target.value)} required>
|
||||
{moveTargets.map((item) =>
|
||||
<option key={item.id} value={item.id}>{item.name}</option>
|
||||
)}
|
||||
</select>
|
||||
</label>
|
||||
{calendar.is_default &&
|
||||
<ToggleSwitch label="i18n:govoplan-calendar.make_target_calendar_the_default.10a3977b" checked={makeTargetDefault} onChange={setMakeTargetDefault} />
|
||||
}
|
||||
<p className="calendar-form-note">{calendarBulkMoveConsequence(externalAction)}</p>
|
||||
</>
|
||||
}
|
||||
</fieldset>
|
||||
}
|
||||
{!loadingEventCount && hasEvents && moveTargets.length === 0 &&
|
||||
<p className="calendar-form-note">{source ?
|
||||
"i18n:govoplan-calendar.no_local_target_calendar_is_available_add_a_local_.fad3cb65" :
|
||||
"i18n:govoplan-calendar.no_compatible_target_calendar_is_available_add_a_l.1cf6e47b"}</p>
|
||||
}
|
||||
</div>
|
||||
</Dialog>);
|
||||
|
||||
}
|
||||
|
||||
|
||||
export function syncSourceCreatePayload(sourceMode: CalendarSourceMode, payload: CalendarCalDavFormPayload): Omit<CalendarSyncSourceCreatePayload, "calendar_id"> {
|
||||
const sourceKind = syncSourceKindForMode(sourceMode, payload.collection_url);
|
||||
const result: Omit<CalendarSyncSourceCreatePayload, "calendar_id"> = {
|
||||
source_kind: sourceKind,
|
||||
collection_url: payload.collection_url.trim(),
|
||||
display_name: payload.display_name.trim() || null,
|
||||
auth_type: sourceKind === "graph" ? "bearer" : payload.auth_type,
|
||||
username: sourceKind !== "graph" && payload.auth_type === "basic" ? payload.username.trim() || null : null,
|
||||
sync_enabled: payload.sync_enabled,
|
||||
sync_interval_seconds: Math.max(60, payload.sync_interval_seconds),
|
||||
sync_direction: sourceKind === "caldav" ? payload.sync_direction : "inbound",
|
||||
conflict_policy: payload.conflict_policy,
|
||||
metadata: {}
|
||||
};
|
||||
if (payload.credential_envelope_id) {
|
||||
result.credential_ref = credentialEnvelopeRef(payload.credential_envelope_id);
|
||||
} else if (result.auth_type === "basic" && payload.password.trim()) {
|
||||
result.password = payload.password;
|
||||
} else if (result.auth_type === "bearer" && payload.bearer_token.trim()) {
|
||||
result.bearer_token = payload.bearer_token;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
export function syncSourceConnectionUpdatePayload(payload: CalendarCalDavFormPayload): CalendarSyncSourceUpdatePayload {
|
||||
const result: CalendarSyncSourceUpdatePayload = {
|
||||
collection_url: payload.collection_url.trim(),
|
||||
auth_type: payload.auth_type,
|
||||
username: payload.auth_type === "basic" ? payload.username.trim() || null : null
|
||||
};
|
||||
if (payload.credential_envelope_id) {
|
||||
result.credential_ref = credentialEnvelopeRef(payload.credential_envelope_id);
|
||||
} else if (payload.auth_type === "basic" && payload.password.trim()) {
|
||||
result.password = payload.password;
|
||||
} else if (payload.auth_type === "bearer" && payload.bearer_token.trim()) {
|
||||
result.bearer_token = payload.bearer_token;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function credentialEnvelopeRef(credentialId: string): string {
|
||||
return `credential-envelope:${credentialId}`;
|
||||
}
|
||||
|
||||
function syncSourceKindForMode(sourceMode: CalendarSourceMode, collectionUrl: string): CalendarSyncSourceKind {
|
||||
if (sourceMode === "ics" && collectionUrl.trim().toLowerCase().startsWith("webcal://")) return "webcal";
|
||||
return sourceMode === "local" ? "caldav" : sourceMode;
|
||||
}
|
||||
|
||||
function sourceSwitchMode(sourceMode: CalendarSourceMode): CalendarSourceSwitchMode {
|
||||
return sourceMode === "webcal" ? "ics" : sourceMode;
|
||||
}
|
||||
|
||||
function syncTransientPayload(authType: CalendarCalDavAuthType, password: string, bearerToken: string) {
|
||||
if (authType === "basic" && password.trim()) return { password };
|
||||
if (authType === "bearer" && bearerToken.trim()) return { bearer_token: bearerToken };
|
||||
return {};
|
||||
}
|
||||
|
||||
function calendarSourcePaneTitle(sourceMode: CalendarSourceMode): string {
|
||||
if (sourceMode === "caldav") return "i18n:govoplan-calendar.caldav_source.459ed16a";
|
||||
if (sourceMode === "ics" || sourceMode === "webcal") return "i18n:govoplan-calendar.ics_webcal_subscription.03bc0d63";
|
||||
if (sourceMode === "graph") return "i18n:govoplan-calendar.microsoft_graph_source.ec4f1383";
|
||||
if (sourceMode === "ews") return "i18n:govoplan-calendar.exchange_web_services_source.53caabf3";
|
||||
return "i18n:govoplan-calendar.local_calendar.ed3f72f8";
|
||||
}
|
||||
|
||||
function calendarSourceUrlLabel(sourceMode: CalendarSourceMode): string {
|
||||
if (sourceMode === "caldav") return "i18n:govoplan-calendar.dav_url.4205e180";
|
||||
if (sourceMode === "graph") return "i18n:govoplan-calendar.graph_calendar_url.e59607f3";
|
||||
if (sourceMode === "ews") return "i18n:govoplan-calendar.ews_endpoint.a3273983";
|
||||
return "i18n:govoplan-calendar.subscription_url.b8b6a1a0";
|
||||
}
|
||||
|
||||
function calendarSourceUrlPlaceholder(sourceMode: CalendarSourceMode): string {
|
||||
if (sourceMode === "caldav") return "https://cloud.example.org/remote.php/dav";
|
||||
if (sourceMode === "graph") return "me/calendar or https://graph.microsoft.com/v1.0/me/calendar/events/delta";
|
||||
if (sourceMode === "ews") return "https://exchange.example.org/EWS/Exchange.asmx";
|
||||
return "webcal://example.org/calendar.ics or https://example.org/calendar.ics";
|
||||
}
|
||||
|
||||
function calendarDeleteActionLabel(calendar: CalendarCollection): string {
|
||||
return calendarIsExternal(calendar) ? "i18n:govoplan-calendar.remove.e963907d" : "i18n:govoplan-calendar.delete.f6fdbe48";
|
||||
}
|
||||
|
||||
function calendarEventDeleteOptionLabel(calendar: CalendarCollection): string {
|
||||
return calendarIsExternal(calendar) ? "i18n:govoplan-calendar.remove_local_events_with_this_calendar.fb8831e1" : "i18n:govoplan-calendar.delete_events_with_this_calendar.cc0e1287";
|
||||
}
|
||||
|
||||
function calendarMoveTargetIsSupported(
|
||||
source: CalendarSyncSource | null,
|
||||
targetSource: CalendarSyncSource | null)
|
||||
: boolean {
|
||||
if (source) return targetSource === null;
|
||||
return targetSource === null || calendarSyncSourceAcceptsCopies(targetSource);
|
||||
}
|
||||
|
||||
function calendarSyncSourceAcceptsCopies(source: CalendarSyncSource): boolean {
|
||||
return source.source_kind === "caldav" && source.sync_enabled && source.sync_direction === "two_way";
|
||||
}
|
||||
|
||||
function calendarBulkMoveExternalAction(
|
||||
source: CalendarSyncSource | null,
|
||||
targetSource: CalendarSyncSource | null)
|
||||
: CalendarBulkMoveExternalAction | undefined {
|
||||
if (source && !targetSource) return "detach_keep_remote";
|
||||
if (!source && targetSource && calendarSyncSourceAcceptsCopies(targetSource)) return "copy_to_remote";
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function calendarBulkMoveOptionLabel(action: CalendarBulkMoveExternalAction | undefined): string {
|
||||
if (action === "detach_keep_remote") return "i18n:govoplan-calendar.detach_local_events_and_keep_remote_events.c58ad4e7";
|
||||
if (action === "copy_to_remote") return "i18n:govoplan-calendar.move_and_copy_events_to_the_external_calendar.23c3a004";
|
||||
return "i18n:govoplan-calendar.move_events_to_another_calendar.830c7b09";
|
||||
}
|
||||
|
||||
function calendarBulkMoveConsequence(action: CalendarBulkMoveExternalAction | undefined): string {
|
||||
if (action === "detach_keep_remote") return "i18n:govoplan-calendar.govoplan_moves_the_local_event_copies_to_the_targe.4863e46b";
|
||||
if (action === "copy_to_remote") return "i18n:govoplan-calendar.govoplan_moves_the_events_locally_and_queues_durab.da075b16";
|
||||
return "i18n:govoplan-calendar.events_remain_in_govoplan_no_external_calendar_is_.62cb5937";
|
||||
}
|
||||
|
||||
function calendarDeleteWarning(
|
||||
calendar: CalendarCollection,
|
||||
eventCount: number,
|
||||
eventAction: CalendarDeleteEventAction,
|
||||
targetCalendarId: string,
|
||||
moveTargets: CalendarCollection[])
|
||||
: string {
|
||||
const action = calendarIsExternal(calendar) ? "i18n:govoplan-calendar.removing.b7d2c38b" : "i18n:govoplan-calendar.deleting.2cda36c9";
|
||||
const eventWord = eventCount === 1 ? "i18n:govoplan-calendar.event" : "i18n:govoplan-calendar.events";
|
||||
if (eventAction === "move") {
|
||||
const target = moveTargets.find((item) => item.id === targetCalendarId);
|
||||
return i18nMessage("i18n:govoplan-calendar.value_this_calendar_will_move_value_value_to_val.6c87e1c1", { value0: action, value1: eventCount, value2: eventWord, value3: target?.name || "i18n:govoplan-calendar.the_selected_calendar.67caa12f" });
|
||||
}
|
||||
if (calendarIsExternal(calendar)) {
|
||||
return i18nMessage("i18n:govoplan-calendar.value_this_calendar_will_remove_value_local_valu.8f21a59e", { value0: action, value1: eventCount, value2: eventWord });
|
||||
}
|
||||
return i18nMessage("i18n:govoplan-calendar.value_this_calendar_will_delete_value_value.7869d1f1", { value0: action, value1: eventCount, value2: eventWord });
|
||||
}
|
||||
|
||||
function calendarIsExternal(calendar: CalendarCollection): boolean {
|
||||
const metadata = calendar.metadata;
|
||||
if (!metadata || typeof metadata !== "object") return false;
|
||||
const sourceKind = metadataText(metadata, "source_kind") || metadataText(metadata, "sourceKind") || metadataText(metadata, "connector_kind") || metadataText(metadata, "connectorKind");
|
||||
if (sourceKind && sourceKind !== "local") return true;
|
||||
const connectionKind = metadataText(metadata, "connection_kind") || metadataText(metadata, "connectionKind");
|
||||
if (connectionKind && connectionKind !== "local") return true;
|
||||
return Boolean(
|
||||
metadataFlag(metadata, "external") ||
|
||||
metadataFlag(metadata, "remote") ||
|
||||
metadataFlag(metadata, "sync") ||
|
||||
metadataFlag(metadata, "caldav") ||
|
||||
metadataText(metadata, "connector_id") ||
|
||||
metadataText(metadata, "connectorId") ||
|
||||
metadataText(metadata, "sync_href") ||
|
||||
metadataText(metadata, "syncHref")
|
||||
);
|
||||
}
|
||||
|
||||
function metadataText(metadata: Record<string, unknown>, key: string): string {
|
||||
const value = metadata[key];
|
||||
return typeof value === "string" ? value.trim().toLowerCase() : "";
|
||||
}
|
||||
|
||||
function metadataFlag(metadata: Record<string, unknown>, key: string): boolean {
|
||||
return metadata[key] === true;
|
||||
}
|
||||
562
webui/src/features/calendar/CalendarEventDialog.tsx
Normal file
562
webui/src/features/calendar/CalendarEventDialog.tsx
Normal file
@@ -0,0 +1,562 @@
|
||||
import {
|
||||
useMemo,
|
||||
useState,
|
||||
type FormEvent,
|
||||
} from "react";
|
||||
import { Trash2 } from "lucide-react";
|
||||
import {
|
||||
Button,
|
||||
DateField,
|
||||
Dialog,
|
||||
TimeField,
|
||||
ToggleSwitch,
|
||||
useUnsavedDraftGuard,
|
||||
} from "@govoplan/core-webui";
|
||||
import type {
|
||||
CalendarCollection,
|
||||
CalendarEvent,
|
||||
CalendarEventCreatePayload,
|
||||
} from "../../api/calendar";
|
||||
import {
|
||||
addDays,
|
||||
addHours,
|
||||
addMinutesToTime,
|
||||
calendarDraftKey,
|
||||
errorText,
|
||||
localDateTime,
|
||||
startOfDay,
|
||||
toInputDate,
|
||||
toInputTime,
|
||||
} from "./calendarViewModel";
|
||||
|
||||
type CalendarEventEndMode = "end" | "duration";
|
||||
type CalendarEventAdvancedPayload = Pick<
|
||||
CalendarEventCreatePayload,
|
||||
| "organizer"
|
||||
| "attendees"
|
||||
| "categories"
|
||||
| "rrule"
|
||||
| "rdate"
|
||||
| "exdate"
|
||||
| "reminders"
|
||||
| "attachments"
|
||||
| "related_to"
|
||||
| "icalendar"
|
||||
| "metadata"
|
||||
>;
|
||||
|
||||
export function CalendarEventDialog({
|
||||
calendars,
|
||||
defaultCalendarId,
|
||||
event,
|
||||
focusDate,
|
||||
saving,
|
||||
canWrite,
|
||||
canDelete,
|
||||
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>;}) {
|
||||
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;
|
||||
const initialDurationSeconds = event?.duration_seconds ?? Math.max(3600, Math.round((initialEnd.getTime() - initialStart.getTime()) / 1000));
|
||||
const [summary, setSummary] = useState(event?.summary ?? "");
|
||||
const [calendarId, setCalendarId] = useState(event?.calendar_id ?? defaultCalendarId);
|
||||
const [description, setDescription] = useState(event?.description ?? "");
|
||||
const [location, setLocation] = useState(event?.location ?? "");
|
||||
const [startDate, setStartDate] = useState(toInputDate(initialStart));
|
||||
const [endDate, setEndDate] = useState(toInputDate(initialAllDayEnd < initialStart ? initialStart : initialAllDayEnd));
|
||||
const [startTime, setStartTime] = useState(toInputTime(initialStart));
|
||||
const [endTime, setEndTime] = useState(toInputTime(initialEnd));
|
||||
const [allDay, setAllDay] = useState(event?.all_day ?? false);
|
||||
const [endMode, setEndMode] = useState<CalendarEventEndMode>(event && eventUsesDuration(event) ? "duration" : "end");
|
||||
const [durationSeconds, setDurationSeconds] = useState(String(initialDurationSeconds));
|
||||
const [uid, setUid] = useState(event?.uid ?? "");
|
||||
const [recurrenceId, setRecurrenceId] = useState(event?.recurrence_id ?? "");
|
||||
const [sequence, setSequence] = useState(String(event?.sequence ?? 0));
|
||||
const [status, setStatus] = useState(event?.status ?? "CONFIRMED");
|
||||
const [transparency, setTransparency] = useState(event?.transparency ?? "OPAQUE");
|
||||
const [classification, setClassification] = useState(event?.classification ?? "PUBLIC");
|
||||
const [timezone, setTimezone] = useState(event?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone ?? "UTC");
|
||||
const [categoriesText, setCategoriesText] = useState((event?.categories ?? []).join(", "));
|
||||
const [organizerJson, setOrganizerJson] = useState(jsonTextareaValue(event?.organizer ?? null));
|
||||
const [attendeesJson, setAttendeesJson] = useState(jsonTextareaValue(event?.attendees ?? []));
|
||||
const [rruleText, setRruleText] = useState(event?.rrule ? serializeRRuleText(event.rrule) : "");
|
||||
const [rdateJson, setRdateJson] = useState(jsonTextareaValue(event?.rdate ?? []));
|
||||
const [exdateJson, setExdateJson] = useState(jsonTextareaValue(event?.exdate ?? []));
|
||||
const [remindersJson, setRemindersJson] = useState(jsonTextareaValue(event?.reminders ?? []));
|
||||
const [attachmentsJson, setAttachmentsJson] = useState(jsonTextareaValue(event?.attachments ?? []));
|
||||
const [relatedToJson, setRelatedToJson] = useState(jsonTextareaValue(event?.related_to ?? []));
|
||||
const [sourceKind, setSourceKind] = useState(event?.source_kind ?? "local");
|
||||
const [sourceHref, setSourceHref] = useState(event?.source_href ?? "");
|
||||
const [etag, setEtag] = useState(event?.etag ?? "");
|
||||
const [icalendarJson, setICalendarJson] = useState(jsonTextareaValue(event?.icalendar ?? {}));
|
||||
const [metadataJson, setMetadataJson] = useState(jsonTextareaValue(event?.metadata ?? {}));
|
||||
const [formError, setFormError] = useState("");
|
||||
const [confirmingDelete, setConfirmingDelete] = useState(false);
|
||||
const formId = "calendar-event-form";
|
||||
const eventDraft = {
|
||||
summary,
|
||||
calendarId,
|
||||
description,
|
||||
location,
|
||||
startDate,
|
||||
endDate,
|
||||
startTime,
|
||||
endTime,
|
||||
allDay,
|
||||
endMode,
|
||||
durationSeconds,
|
||||
uid,
|
||||
recurrenceId,
|
||||
sequence,
|
||||
status,
|
||||
transparency,
|
||||
classification,
|
||||
timezone,
|
||||
categoriesText,
|
||||
organizerJson,
|
||||
attendeesJson,
|
||||
rruleText,
|
||||
rdateJson,
|
||||
exdateJson,
|
||||
remindersJson,
|
||||
attachmentsJson,
|
||||
relatedToJson,
|
||||
sourceKind,
|
||||
sourceHref,
|
||||
etag,
|
||||
icalendarJson,
|
||||
metadataJson
|
||||
};
|
||||
const initialEventDraftKey = useMemo(() => calendarDraftKey(eventDraft), []);
|
||||
const eventDirty = calendarDraftKey(eventDraft) !== initialEventDraftKey;
|
||||
|
||||
useUnsavedDraftGuard({
|
||||
dirty: eventDirty,
|
||||
onSave: saveCurrent,
|
||||
onDiscard: onCancel
|
||||
});
|
||||
|
||||
function handleAllDayChange(next: boolean) {
|
||||
setAllDay(next);
|
||||
if (next) {
|
||||
setStartTime("00:00");
|
||||
setEndTime("00:00");
|
||||
} else if (startTime === "00:00" && endTime === "00:00") {
|
||||
setStartTime("09:00");
|
||||
setEndTime("10:00");
|
||||
}
|
||||
}
|
||||
|
||||
function handleStartDateChange(next: string) {
|
||||
setStartDate(next);
|
||||
if (endDate < next) setEndDate(next);
|
||||
}
|
||||
|
||||
function handleStartTimeChange(next: string) {
|
||||
setStartTime(next);
|
||||
if (startDate === endDate && endTime <= next) setEndTime(addMinutesToTime(next, 60));
|
||||
}
|
||||
|
||||
async function saveCurrent(): Promise<boolean> {
|
||||
setFormError("");
|
||||
const startAt = allDay ? localDateTime(startDate, "00:00") : localDateTime(startDate, startTime);
|
||||
const parsedDurationSeconds = Math.max(0, Number(durationSeconds) || 0);
|
||||
const usesDuration = !allDay && endMode === "duration";
|
||||
const endAt = allDay ?
|
||||
addDays(localDateTime(endDate, "00:00"), 1) :
|
||||
usesDuration ?
|
||||
new Date(startAt.getTime() + parsedDurationSeconds * 1000) :
|
||||
localDateTime(endDate, endTime);
|
||||
if (usesDuration && parsedDurationSeconds <= 0) {
|
||||
setFormError("i18n:govoplan-calendar.duration_must_be_greater_than_zero.519292f7");
|
||||
return false;
|
||||
}
|
||||
if (endAt <= startAt) {
|
||||
setFormError(allDay ? "i18n:govoplan-calendar.end_date_must_be_on_or_after_start_date.a2518865" : "i18n:govoplan-calendar.end_date_and_time_must_be_after_start_date_and_t.daf31831");
|
||||
return false;
|
||||
}
|
||||
let advanced: CalendarEventAdvancedPayload;
|
||||
try {
|
||||
advanced = {
|
||||
organizer: parseJsonObjectOrNull(organizerJson, "i18n:govoplan-calendar.organizer.debd1720"),
|
||||
attendees: parseJsonArray(attendeesJson, "i18n:govoplan-calendar.attendees.a45a0962"),
|
||||
categories: commaSeparatedValues(categoriesText),
|
||||
rrule: parseRRuleInput(rruleText),
|
||||
rdate: parseJsonArray(rdateJson, "RDATE"),
|
||||
exdate: parseJsonArray(exdateJson, "EXDATE"),
|
||||
reminders: parseJsonArray(remindersJson, "i18n:govoplan-calendar.reminders.ae8c3939"),
|
||||
attachments: parseJsonArray(attachmentsJson, "i18n:govoplan-calendar.attachments.6771ade6"),
|
||||
related_to: parseJsonArray(relatedToJson, "i18n:govoplan-calendar.related_to.0e7989ff"),
|
||||
icalendar: withDurationMode(parseJsonObject(icalendarJson, "i18n:govoplan-calendar.icalendar.f388476d"), usesDuration),
|
||||
metadata: parseJsonObject(metadataJson, "i18n:govoplan-calendar.metadata.251edc0e")
|
||||
};
|
||||
} catch (err) {
|
||||
setFormError(errorText(err));
|
||||
return false;
|
||||
}
|
||||
const payload: CalendarEventCreatePayload = {
|
||||
calendar_id: calendarId,
|
||||
summary,
|
||||
description: description || null,
|
||||
location: location || null,
|
||||
sequence: Math.max(0, Number(sequence) || 0),
|
||||
status,
|
||||
transparency,
|
||||
classification,
|
||||
start_at: startAt.toISOString(),
|
||||
end_at: endAt.toISOString(),
|
||||
duration_seconds: usesDuration ? parsedDurationSeconds : null,
|
||||
all_day: allDay,
|
||||
timezone: timezone.trim() || null,
|
||||
source_kind: sourceKind.trim() || "local",
|
||||
source_href: sourceHref.trim() || null,
|
||||
etag: etag.trim() || null,
|
||||
...advanced
|
||||
};
|
||||
if (!event) {
|
||||
if (uid.trim()) payload.uid = uid.trim();
|
||||
if (recurrenceId.trim()) payload.recurrence_id = recurrenceId.trim();
|
||||
}
|
||||
return onSave(payload, event);
|
||||
}
|
||||
|
||||
function submit(formEvent: FormEvent<HTMLFormElement>) {
|
||||
formEvent.preventDefault();
|
||||
void saveCurrent();
|
||||
}
|
||||
|
||||
function requestDelete() {
|
||||
if (!event) return;
|
||||
if (!confirmingDelete) {
|
||||
setConfirmingDelete(true);
|
||||
return;
|
||||
}
|
||||
void onDelete(event);
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open
|
||||
title={event ? "i18n:govoplan-calendar.edit_event.a7028454" : "i18n:govoplan-calendar.new_event.2ef3795c"}
|
||||
className="calendar-event-dialog calendar-vevent-dialog"
|
||||
footerClassName="calendar-event-dialog-footer"
|
||||
closeDisabled={saving}
|
||||
onClose={onCancel}
|
||||
footer={
|
||||
<>
|
||||
<div>
|
||||
{event && canDelete &&
|
||||
<Button type="button" variant="danger" onClick={requestDelete} disabled={saving}>
|
||||
<Trash2 size={16} /> {confirmingDelete ? "i18n:govoplan-calendar.confirm_delete.c9f2829e" : "i18n:govoplan-calendar.delete.f6fdbe48"}
|
||||
</Button>
|
||||
}
|
||||
</div>
|
||||
<div className="calendar-dialog-actions">
|
||||
<Button type="button" onClick={onCancel} disabled={saving}>i18n:govoplan-calendar.cancel.77dfd213</Button>
|
||||
<Button type="submit" form={formId} variant="primary" disabled={saving || !canWrite}>{saving ? "i18n:govoplan-calendar.saving.ae7e8875" : "i18n:govoplan-calendar.save.efc007a3"}</Button>
|
||||
</div>
|
||||
</>
|
||||
}>
|
||||
|
||||
<form id={formId} className="calendar-dialog-form" onSubmit={submit}>
|
||||
{formError && <p className="calendar-form-error">{formError}</p>}
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.title.768e0c1c</span>
|
||||
<input value={summary} onChange={(item) => setSummary(item.target.value)} required maxLength={500} autoFocus disabled={saving || !canWrite} />
|
||||
</label>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.calendar.adab5090</span>
|
||||
<select value={calendarId} onChange={(item) => setCalendarId(item.target.value)} required disabled={saving || !canWrite}>
|
||||
{calendars.map((calendar) =>
|
||||
<option key={calendar.id} value={calendar.id}>{calendar.name}</option>
|
||||
)}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.description.55f8ebc8</span>
|
||||
<textarea value={description} onChange={(item) => setDescription(item.target.value)} rows={4} disabled={saving || !canWrite} />
|
||||
</label>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.location.d219c681</span>
|
||||
<input value={location} onChange={(item) => setLocation(item.target.value)} maxLength={500} disabled={saving || !canWrite} />
|
||||
</label>
|
||||
<ToggleSwitch label="i18n:govoplan-calendar.whole_day.951c82d1" checked={allDay} disabled={saving || !canWrite} onChange={handleAllDayChange} />
|
||||
<div className="calendar-dialog-date-row">
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.start_date.ff99f5b5</span>
|
||||
<DateField value={startDate} onChange={handleStartDateChange} required disabled={saving || !canWrite} />
|
||||
</label>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.start_time.88d8206d</span>
|
||||
<TimeField value={startTime} onChange={handleStartTimeChange} disabled={saving || !canWrite || allDay} />
|
||||
</label>
|
||||
</div>
|
||||
{!allDay &&
|
||||
<div className="calendar-dialog-date-row">
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.end_mode.5a06de37</span>
|
||||
<select value={endMode} onChange={(item) => setEndMode(item.target.value as CalendarEventEndMode)} disabled={saving || !canWrite}>
|
||||
<option value="end">i18n:govoplan-calendar.end_time.cd7800da</option>
|
||||
<option value="duration">i18n:govoplan-calendar.duration.1370004d</option>
|
||||
</select>
|
||||
</label>
|
||||
{endMode === "duration" &&
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.duration_seconds.19d42eeb</span>
|
||||
<input type="number" min={1} step={60} value={durationSeconds} onChange={(item) => setDurationSeconds(item.target.value)} required disabled={saving || !canWrite} />
|
||||
</label>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
{(allDay || endMode === "end") &&
|
||||
<div className="calendar-dialog-date-row">
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.end_date.89d10cd6</span>
|
||||
<DateField value={endDate} min={startDate} onChange={setEndDate} required disabled={saving || !canWrite} />
|
||||
</label>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.end_time.cd7800da</span>
|
||||
<TimeField value={endTime} min={!allDay && startDate === endDate ? startTime : undefined} onChange={setEndTime} disabled={saving || !canWrite || allDay} />
|
||||
</label>
|
||||
</div>
|
||||
}
|
||||
<details className="calendar-advanced-settings calendar-vevent-details">
|
||||
<summary>i18n:govoplan-calendar.vevent.9cf5be75</summary>
|
||||
<section className="calendar-vevent-section">
|
||||
<h3>i18n:govoplan-calendar.identity.7e5a975b</h3>
|
||||
<div className="calendar-dialog-grid-three">
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.uid.d946adf5</span>
|
||||
<input value={uid} onChange={(item) => setUid(item.target.value)} maxLength={255} disabled={saving || !canWrite || Boolean(event)} />
|
||||
</label>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.recurrence_id.e0b780ba</span>
|
||||
<input value={recurrenceId} onChange={(item) => setRecurrenceId(item.target.value)} maxLength={255} disabled={saving || !canWrite || Boolean(event)} />
|
||||
</label>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.sequence.5c8f4e0e</span>
|
||||
<input type="number" min={0} step={1} value={sequence} onChange={(item) => setSequence(item.target.value)} disabled={saving || !canWrite} />
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<section className="calendar-vevent-section">
|
||||
<h3>i18n:govoplan-calendar.state.a7250206</h3>
|
||||
<div className="calendar-dialog-grid-three">
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.status.bae7d5be</span>
|
||||
<select value={status} onChange={(item) => setStatus(item.target.value)} disabled={saving || !canWrite}>
|
||||
<option value="CONFIRMED">i18n:govoplan-calendar.confirmed.0542404a</option>
|
||||
<option value="TENTATIVE">i18n:govoplan-calendar.tentative.d19f9022</option>
|
||||
<option value="CANCELLED">i18n:govoplan-calendar.cancelled.5587b0af</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.transparency.7cb338a9</span>
|
||||
<select value={transparency} onChange={(item) => setTransparency(item.target.value)} disabled={saving || !canWrite}>
|
||||
<option value="OPAQUE">i18n:govoplan-calendar.opaque.3e1d0194</option>
|
||||
<option value="TRANSPARENT">i18n:govoplan-calendar.transparent.ea4efcae</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.class.41ff354b</span>
|
||||
<select value={classification} onChange={(item) => setClassification(item.target.value)} disabled={saving || !canWrite}>
|
||||
<option value="PUBLIC">i18n:govoplan-calendar.public.d1785ca2</option>
|
||||
<option value="PRIVATE">i18n:govoplan-calendar.private.b0b7ba46</option>
|
||||
<option value="CONFIDENTIAL">i18n:govoplan-calendar.confidential.84c9cc88</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.timezone.d1f7dc89</span>
|
||||
<input value={timezone} onChange={(item) => setTimezone(item.target.value)} maxLength={100} disabled={saving || !canWrite} />
|
||||
</label>
|
||||
<label className="calendar-dialog-wide">
|
||||
<span>i18n:govoplan-calendar.categories.6ccb6007</span>
|
||||
<input value={categoriesText} onChange={(item) => setCategoriesText(item.target.value)} disabled={saving || !canWrite} />
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<section className="calendar-vevent-section">
|
||||
<h3>i18n:govoplan-calendar.participants.cd56e083</h3>
|
||||
<div className="calendar-dialog-grid-two">
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.organizer_json.3add6f9f</span>
|
||||
<textarea value={organizerJson} onChange={(item) => setOrganizerJson(item.target.value)} rows={5} disabled={saving || !canWrite} />
|
||||
</label>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.attendees_json.aeb487bb</span>
|
||||
<textarea value={attendeesJson} onChange={(item) => setAttendeesJson(item.target.value)} rows={5} disabled={saving || !canWrite} />
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<section className="calendar-vevent-section">
|
||||
<h3>i18n:govoplan-calendar.recurrence.f7ad40f5</h3>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.rrule.c7b2f8a3</span>
|
||||
<input value={rruleText} onChange={(item) => setRruleText(item.target.value)} disabled={saving || !canWrite} />
|
||||
</label>
|
||||
<div className="calendar-dialog-grid-two">
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.rdate_json.5b51fca4</span>
|
||||
<textarea value={rdateJson} onChange={(item) => setRdateJson(item.target.value)} rows={5} disabled={saving || !canWrite} />
|
||||
</label>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.exdate_json.7d0c538d</span>
|
||||
<textarea value={exdateJson} onChange={(item) => setExdateJson(item.target.value)} rows={5} disabled={saving || !canWrite} />
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<section className="calendar-vevent-section">
|
||||
<h3>i18n:govoplan-calendar.related.917df91e</h3>
|
||||
<div className="calendar-dialog-grid-three">
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.reminders_json.ca25e08f</span>
|
||||
<textarea value={remindersJson} onChange={(item) => setRemindersJson(item.target.value)} rows={5} disabled={saving || !canWrite} />
|
||||
</label>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.attachments_json.d91abf3c</span>
|
||||
<textarea value={attachmentsJson} onChange={(item) => setAttachmentsJson(item.target.value)} rows={5} disabled={saving || !canWrite} />
|
||||
</label>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.related_to_json.2d4e8f59</span>
|
||||
<textarea value={relatedToJson} onChange={(item) => setRelatedToJson(item.target.value)} rows={5} disabled={saving || !canWrite} />
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<section className="calendar-vevent-section">
|
||||
<h3>i18n:govoplan-calendar.source.6da13add</h3>
|
||||
<div className="calendar-dialog-grid-three">
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.source_kind.7eda9bc4</span>
|
||||
<input value={sourceKind} onChange={(item) => setSourceKind(item.target.value)} maxLength={30} disabled={saving || !canWrite} />
|
||||
</label>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.source_href.819fa147</span>
|
||||
<input value={sourceHref} onChange={(item) => setSourceHref(item.target.value)} maxLength={1000} disabled={saving || !canWrite} />
|
||||
</label>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.etag.11d00f6e</span>
|
||||
<input value={etag} onChange={(item) => setEtag(item.target.value)} maxLength={255} disabled={saving || !canWrite} />
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<section className="calendar-vevent-section">
|
||||
<h3>i18n:govoplan-calendar.raw.da433cd4</h3>
|
||||
<div className="calendar-dialog-grid-two">
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.icalendar_json.fb6cc33e</span>
|
||||
<textarea value={icalendarJson} onChange={(item) => setICalendarJson(item.target.value)} rows={8} disabled={saving || !canWrite} />
|
||||
</label>
|
||||
<label>
|
||||
<span>i18n:govoplan-calendar.metadata_json.b0e4c283</span>
|
||||
<textarea value={metadataJson} onChange={(item) => setMetadataJson(item.target.value)} rows={8} disabled={saving || !canWrite} />
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
</details>
|
||||
</form>
|
||||
</Dialog>);
|
||||
|
||||
}
|
||||
|
||||
function jsonTextareaValue(value: unknown): string {
|
||||
return JSON.stringify(value, null, 2);
|
||||
}
|
||||
|
||||
function parseJsonObject(text: string, label: string): Record<string, unknown> {
|
||||
const value = parseJsonText(text, label, {});
|
||||
if (!isPlainObject(value)) throw new Error(`${label} must be a JSON object.`);
|
||||
return value;
|
||||
}
|
||||
|
||||
function parseJsonObjectOrNull(text: string, label: string): Record<string, unknown> | null {
|
||||
if (!text.trim()) return null;
|
||||
const value = parseJsonText(text, label, null);
|
||||
if (value === null) return null;
|
||||
if (!isPlainObject(value)) throw new Error(`${label} must be a JSON object or null.`);
|
||||
return value;
|
||||
}
|
||||
|
||||
function parseJsonArray(text: string, label: string): Record<string, unknown>[] {
|
||||
const value = parseJsonText(text, label, []);
|
||||
if (!Array.isArray(value)) throw new Error(`${label} must be a JSON array.`);
|
||||
return value.map((item, index) => {
|
||||
if (!isPlainObject(item)) throw new Error(`${label} item ${index + 1} must be a JSON object.`);
|
||||
return item;
|
||||
});
|
||||
}
|
||||
|
||||
function parseJsonText(text: string, label: string, fallback: unknown): unknown {
|
||||
const trimmed = text.trim();
|
||||
if (!trimmed) return fallback;
|
||||
try {
|
||||
return JSON.parse(trimmed) as unknown;
|
||||
} catch (err) {
|
||||
throw new Error(`${label} contains invalid JSON: ${errorText(err)}`);
|
||||
}
|
||||
}
|
||||
|
||||
function parseRRuleInput(text: string): Record<string, unknown> | null {
|
||||
const trimmed = text.trim();
|
||||
if (!trimmed) return null;
|
||||
if (trimmed.startsWith("{")) return parseJsonObject(trimmed, "RRULE");
|
||||
const result: Record<string, unknown> = {};
|
||||
for (const item of trimmed.split(";")) {
|
||||
const [rawKey, ...rawValueParts] = item.split("=");
|
||||
const key = rawKey.trim().toUpperCase();
|
||||
const rawValue = rawValueParts.join("=").trim();
|
||||
if (!key || !rawValue) continue;
|
||||
const values = rawValue.split(",").map((value) => value.trim()).filter(Boolean);
|
||||
result[key] = values.length > 1 ? values : values[0] ?? rawValue;
|
||||
}
|
||||
return Object.keys(result).length ? result : null;
|
||||
}
|
||||
|
||||
function serializeRRuleText(value: Record<string, unknown>): string {
|
||||
return Object.entries(value).
|
||||
map(([key, item]) => `${key.toUpperCase()}=${Array.isArray(item) ? item.join(",") : String(item)}`).
|
||||
join(";");
|
||||
}
|
||||
|
||||
function commaSeparatedValues(text: string): string[] {
|
||||
return text.split(",").map((item) => item.trim()).filter(Boolean);
|
||||
}
|
||||
|
||||
function withDurationMode(value: Record<string, unknown>, usesDuration: boolean): Record<string, unknown> {
|
||||
const next = { ...value };
|
||||
const standard = isPlainObject(next.standard) ? { ...next.standard } : {};
|
||||
if (usesDuration) {
|
||||
standard.uses_duration = true;
|
||||
} else {
|
||||
delete standard.uses_duration;
|
||||
}
|
||||
if (Object.keys(standard).length > 0) {
|
||||
next.standard = standard;
|
||||
} else {
|
||||
delete next.standard;
|
||||
}
|
||||
return next;
|
||||
}
|
||||
|
||||
function eventUsesDuration(event: CalendarEvent): boolean {
|
||||
const standard = isPlainObject(event.icalendar?.standard) ? event.icalendar.standard : null;
|
||||
return standard?.uses_duration === true;
|
||||
}
|
||||
|
||||
function isPlainObject(value: unknown): value is Record<string, unknown> {
|
||||
return typeof value === "object" && value !== null && !Array.isArray(value);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
666
webui/src/features/calendar/CalendarViews.tsx
Normal file
666
webui/src/features/calendar/CalendarViews.tsx
Normal file
@@ -0,0 +1,666 @@
|
||||
import {
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
type DragEvent as ReactDragEvent,
|
||||
} from "react";
|
||||
|
||||
import { i18nMessage } from "@govoplan/core-webui";
|
||||
|
||||
import type { CalendarEvent } from "../../api/calendar";
|
||||
import {
|
||||
HOUR_ROW_HEIGHT,
|
||||
INITIAL_SCROLL_HOUR,
|
||||
calendarEventColorStyle,
|
||||
chunk,
|
||||
continuousVirtualWindow,
|
||||
dayKey,
|
||||
dayMonthLabel,
|
||||
dropSlotMinuteOfDay,
|
||||
eventTimeLabel,
|
||||
isWeekend,
|
||||
layoutTimedEventsForDay,
|
||||
minuteOfDayLabel,
|
||||
monthYearLabel,
|
||||
sameDay,
|
||||
sameMonth,
|
||||
timedEventStyle,
|
||||
timedOverflowStyle,
|
||||
timeGridStyle,
|
||||
weekdayLong,
|
||||
type CalendarDropTarget,
|
||||
type CalendarMode,
|
||||
type CalendarResizeEdge,
|
||||
type CalendarTimeDropTarget,
|
||||
type CalendarViewPreferences,
|
||||
type ContinuousViewport,
|
||||
} from "./calendarViewModel";
|
||||
|
||||
type CalendarViewCallbacks = {
|
||||
onEventSelect: (event: CalendarEvent) => void;
|
||||
onEventHover: (eventId: string) => void;
|
||||
onEventDragStart: (
|
||||
dragEvent: ReactDragEvent<HTMLElement>,
|
||||
event: CalendarEvent,
|
||||
) => void;
|
||||
onEventDragEnd: () => void;
|
||||
onEventDragOverDay: (
|
||||
dragEvent: ReactDragEvent<HTMLElement>,
|
||||
day: Date,
|
||||
) => void;
|
||||
onDropTargetLeave: (
|
||||
dragEvent: ReactDragEvent<HTMLElement>,
|
||||
) => void;
|
||||
onEventDropOnDay: (
|
||||
dropEvent: ReactDragEvent<HTMLElement>,
|
||||
day: Date,
|
||||
) => void;
|
||||
};
|
||||
|
||||
type CalendarWeekRowsProps = CalendarViewCallbacks & {
|
||||
days: Date[];
|
||||
eventsByDay: Map<string, CalendarEvent[]>;
|
||||
calendarColorById: Map<string, string>;
|
||||
focusDate: Date;
|
||||
variant: "month" | "continuous";
|
||||
preferences: CalendarViewPreferences;
|
||||
canWrite: boolean;
|
||||
draggingEventId: string;
|
||||
hoveredEventId: string;
|
||||
dropTarget: CalendarDropTarget;
|
||||
viewport?: ContinuousViewport;
|
||||
};
|
||||
|
||||
export function CalendarWeekRows({
|
||||
days,
|
||||
eventsByDay,
|
||||
calendarColorById,
|
||||
focusDate,
|
||||
variant,
|
||||
preferences,
|
||||
canWrite,
|
||||
draggingEventId,
|
||||
hoveredEventId,
|
||||
dropTarget,
|
||||
viewport,
|
||||
onEventSelect,
|
||||
onEventHover,
|
||||
onEventDragStart,
|
||||
onEventDragEnd,
|
||||
onEventDragOverDay,
|
||||
onDropTargetLeave,
|
||||
onEventDropOnDay,
|
||||
}: CalendarWeekRowsProps) {
|
||||
const weeks = chunk(days, 7);
|
||||
const virtualWindow =
|
||||
variant === "continuous" && preferences.continuousVirtualization
|
||||
? continuousVirtualWindow(
|
||||
weeks.length,
|
||||
viewport ?? { scrollTop: 0, height: 0 },
|
||||
preferences.continuousOverscanWeeks,
|
||||
)
|
||||
: {
|
||||
start: 0,
|
||||
end: weeks.length,
|
||||
topSpacerHeight: 0,
|
||||
bottomSpacerHeight: 0,
|
||||
};
|
||||
const visibleWeeks = weeks.slice(
|
||||
virtualWindow.start,
|
||||
virtualWindow.end,
|
||||
);
|
||||
const eventLimit = variant === "month" ? 5 : 3;
|
||||
|
||||
return (
|
||||
<div className={`calendar-week-rows is-${variant}`}>
|
||||
<div className="calendar-weekday-header">
|
||||
{[
|
||||
"i18n:govoplan-calendar.mon.24b2a099",
|
||||
"i18n:govoplan-calendar.tue.529541bb",
|
||||
"i18n:govoplan-calendar.wed.23408b19",
|
||||
"i18n:govoplan-calendar.thu.3593ccd9",
|
||||
"i18n:govoplan-calendar.fri.bbd6e32e",
|
||||
"i18n:govoplan-calendar.sat.6b782d41",
|
||||
"i18n:govoplan-calendar.sun.48c98cab",
|
||||
].map((label) => (
|
||||
<span key={label}>{label}</span>
|
||||
))}
|
||||
</div>
|
||||
{virtualWindow.topSpacerHeight > 0 && (
|
||||
<div
|
||||
className="calendar-week-spacer"
|
||||
style={{ height: virtualWindow.topSpacerHeight }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
{visibleWeeks.map((week) => (
|
||||
<div className="calendar-week-row" key={dayKey(week[0])}>
|
||||
{week.map((day) => {
|
||||
const key = dayKey(day);
|
||||
const dayEvents = eventsByDay.get(key) ?? [];
|
||||
const outsideFocusMonth =
|
||||
variant === "month" && !sameMonth(day, focusDate);
|
||||
return (
|
||||
<section
|
||||
key={key}
|
||||
className={[
|
||||
"calendar-day-cell",
|
||||
outsideFocusMonth ? "is-muted" : "",
|
||||
sameDay(day, new Date()) ? "is-today" : "",
|
||||
dropTarget?.kind === "day" &&
|
||||
dropTarget.key === key
|
||||
? "is-drop-target"
|
||||
: "",
|
||||
variant === "continuous" &&
|
||||
preferences.alternateContinuousMonths
|
||||
? day.getMonth() % 2 === 0
|
||||
? "is-even-month"
|
||||
: "is-odd-month"
|
||||
: "",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
onDragOver={
|
||||
canWrite
|
||||
? (event) => onEventDragOverDay(event, day)
|
||||
: undefined
|
||||
}
|
||||
onDragLeave={
|
||||
canWrite ? onDropTargetLeave : undefined
|
||||
}
|
||||
onDrop={
|
||||
canWrite
|
||||
? (event) => onEventDropOnDay(event, day)
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<header>
|
||||
<span className="calendar-day-number">
|
||||
{day.getDate()}
|
||||
</span>
|
||||
{day.getDate() === 1 && (
|
||||
<small>{monthYearLabel(day)}</small>
|
||||
)}
|
||||
</header>
|
||||
<div className="calendar-event-stack">
|
||||
{dayEvents.slice(0, eventLimit).map((event) => (
|
||||
<CalendarEventChip
|
||||
key={event.id}
|
||||
event={event}
|
||||
color={calendarColorById.get(event.calendar_id)}
|
||||
canDrag={canWrite}
|
||||
dragging={draggingEventId === event.id}
|
||||
linkedHover={hoveredEventId === event.id}
|
||||
onSelect={onEventSelect}
|
||||
onHover={onEventHover}
|
||||
onDragStart={onEventDragStart}
|
||||
onDragEnd={onEventDragEnd}
|
||||
/>
|
||||
))}
|
||||
{dayEvents.length > eventLimit && (
|
||||
<span className="calendar-more-events">
|
||||
+{dayEvents.length - eventLimit}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
{virtualWindow.bottomSpacerHeight > 0 && (
|
||||
<div
|
||||
className="calendar-week-spacer"
|
||||
style={{ height: virtualWindow.bottomSpacerHeight }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type CalendarTimeGridProps = CalendarViewCallbacks & {
|
||||
days: Date[];
|
||||
eventsByDay: Map<string, CalendarEvent[]>;
|
||||
calendarColorById: Map<string, string>;
|
||||
mode: CalendarMode;
|
||||
preferences: CalendarViewPreferences;
|
||||
canWrite: boolean;
|
||||
draggingEventId: string;
|
||||
hoveredEventId: string;
|
||||
dropTarget: CalendarDropTarget;
|
||||
onEventResizeDragStart: (
|
||||
dragEvent: ReactDragEvent<HTMLElement>,
|
||||
event: CalendarEvent,
|
||||
edge: CalendarResizeEdge,
|
||||
) => void;
|
||||
onEventDragOverTime: (
|
||||
dragEvent: ReactDragEvent<HTMLElement>,
|
||||
day: Date,
|
||||
) => void;
|
||||
onEventDropOnTime: (
|
||||
dropEvent: ReactDragEvent<HTMLElement>,
|
||||
day: Date,
|
||||
minuteOfDay: number,
|
||||
) => void;
|
||||
};
|
||||
|
||||
export function CalendarTimeGrid({
|
||||
days,
|
||||
eventsByDay,
|
||||
calendarColorById,
|
||||
mode,
|
||||
preferences,
|
||||
canWrite,
|
||||
draggingEventId,
|
||||
hoveredEventId,
|
||||
dropTarget,
|
||||
onEventSelect,
|
||||
onEventHover,
|
||||
onEventDragStart,
|
||||
onEventResizeDragStart,
|
||||
onEventDragEnd,
|
||||
onEventDragOverDay,
|
||||
onEventDragOverTime,
|
||||
onDropTargetLeave,
|
||||
onEventDropOnDay,
|
||||
onEventDropOnTime,
|
||||
}: CalendarTimeGridProps) {
|
||||
const scrollRef = useRef<HTMLDivElement | null>(null);
|
||||
const hours = Array.from({ length: 24 }, (_item, index) => index);
|
||||
const columns = `72px repeat(${days.length}, minmax(132px, 1fr))`;
|
||||
const dimWeekends = preferences.dimWeekends && mode === "week";
|
||||
const gridStyle = timeGridStyle(columns, preferences);
|
||||
const allDayEventsByDay = days.map((day) => ({
|
||||
key: dayKey(day),
|
||||
date: day,
|
||||
events: (eventsByDay.get(dayKey(day)) ?? []).filter(
|
||||
(event) => event.all_day,
|
||||
),
|
||||
}));
|
||||
const hasAllDayEvents = allDayEventsByDay.some(
|
||||
(day) => day.events.length > 0,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (scrollRef.current) {
|
||||
scrollRef.current.scrollTop =
|
||||
INITIAL_SCROLL_HOUR * HOUR_ROW_HEIGHT;
|
||||
}
|
||||
}, [days.length, days[0]?.getTime()]);
|
||||
|
||||
return (
|
||||
<div className="calendar-time-view">
|
||||
<div
|
||||
className="calendar-time-header"
|
||||
style={{ gridTemplateColumns: columns }}
|
||||
>
|
||||
<div className="calendar-time-corner" />
|
||||
{days.map((day) => (
|
||||
<header
|
||||
key={dayKey(day)}
|
||||
className={[
|
||||
sameDay(day, new Date()) ? "is-today" : "",
|
||||
dimWeekends && isWeekend(day) ? "is-weekend" : "",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
>
|
||||
<strong>{weekdayLong(day)}</strong>
|
||||
<span>{dayMonthLabel(day)}</span>
|
||||
</header>
|
||||
))}
|
||||
</div>
|
||||
{hasAllDayEvents && (
|
||||
<div
|
||||
className="calendar-all-day-strip"
|
||||
style={{ gridTemplateColumns: columns }}
|
||||
>
|
||||
<div className="calendar-all-day-label">
|
||||
i18n:govoplan-calendar.all_day.11457433
|
||||
</div>
|
||||
{allDayEventsByDay.map((day) => (
|
||||
<div
|
||||
key={day.key}
|
||||
className={[
|
||||
"calendar-all-day-cell",
|
||||
dimWeekends && isWeekend(day.date)
|
||||
? "is-weekend"
|
||||
: "",
|
||||
dropTarget?.kind === "day" &&
|
||||
dropTarget.key === day.key
|
||||
? "is-drop-target"
|
||||
: "",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
onDragOver={
|
||||
canWrite
|
||||
? (event) => onEventDragOverDay(event, day.date)
|
||||
: undefined
|
||||
}
|
||||
onDragLeave={
|
||||
canWrite ? onDropTargetLeave : undefined
|
||||
}
|
||||
onDrop={
|
||||
canWrite
|
||||
? (event) => onEventDropOnDay(event, day.date)
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{day.events.map((event) => (
|
||||
<CalendarEventChip
|
||||
key={event.id}
|
||||
event={event}
|
||||
color={calendarColorById.get(event.calendar_id)}
|
||||
compact
|
||||
canDrag={canWrite}
|
||||
dragging={draggingEventId === event.id}
|
||||
linkedHover={hoveredEventId === event.id}
|
||||
onSelect={onEventSelect}
|
||||
onHover={onEventHover}
|
||||
onDragStart={onEventDragStart}
|
||||
onDragEnd={onEventDragEnd}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="calendar-time-scroll" ref={scrollRef}>
|
||||
<div className="calendar-time-grid" style={gridStyle}>
|
||||
<div className="calendar-hour-label-column">
|
||||
{hours.map((hour) => (
|
||||
<div className="calendar-hour-label" key={hour}>
|
||||
{String(hour).padStart(2, "0")}:00
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{days.map((day) => (
|
||||
<TimedDayColumn
|
||||
key={dayKey(day)}
|
||||
day={day}
|
||||
events={eventsByDay.get(dayKey(day)) ?? []}
|
||||
calendarColorById={calendarColorById}
|
||||
dimWeekend={dimWeekends && isWeekend(day)}
|
||||
canWrite={canWrite}
|
||||
draggingEventId={draggingEventId}
|
||||
hoveredEventId={hoveredEventId}
|
||||
dropTarget={
|
||||
dropTarget?.kind === "time" &&
|
||||
dropTarget.key === dayKey(day)
|
||||
? dropTarget
|
||||
: null
|
||||
}
|
||||
onEventSelect={onEventSelect}
|
||||
onEventHover={onEventHover}
|
||||
onEventDragStart={onEventDragStart}
|
||||
onEventResizeDragStart={onEventResizeDragStart}
|
||||
onEventDragEnd={onEventDragEnd}
|
||||
onEventDragOverTime={onEventDragOverTime}
|
||||
onDropTargetLeave={onDropTargetLeave}
|
||||
onEventDropOnTime={onEventDropOnTime}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type TimedDayColumnProps = {
|
||||
day: Date;
|
||||
events: CalendarEvent[];
|
||||
calendarColorById: Map<string, string>;
|
||||
dimWeekend: boolean;
|
||||
canWrite: boolean;
|
||||
draggingEventId: string;
|
||||
hoveredEventId: string;
|
||||
dropTarget: CalendarTimeDropTarget | null;
|
||||
onEventSelect: (event: CalendarEvent) => void;
|
||||
onEventHover: (eventId: string) => void;
|
||||
onEventDragStart: (
|
||||
dragEvent: ReactDragEvent<HTMLElement>,
|
||||
event: CalendarEvent,
|
||||
) => void;
|
||||
onEventResizeDragStart: (
|
||||
dragEvent: ReactDragEvent<HTMLElement>,
|
||||
event: CalendarEvent,
|
||||
edge: CalendarResizeEdge,
|
||||
) => void;
|
||||
onEventDragEnd: () => void;
|
||||
onEventDragOverTime: (
|
||||
dragEvent: ReactDragEvent<HTMLElement>,
|
||||
day: Date,
|
||||
) => void;
|
||||
onDropTargetLeave: (
|
||||
dragEvent: ReactDragEvent<HTMLElement>,
|
||||
) => void;
|
||||
onEventDropOnTime: (
|
||||
dropEvent: ReactDragEvent<HTMLElement>,
|
||||
day: Date,
|
||||
minuteOfDay: number,
|
||||
) => void;
|
||||
};
|
||||
|
||||
function TimedDayColumn({
|
||||
day,
|
||||
events,
|
||||
calendarColorById,
|
||||
dimWeekend,
|
||||
canWrite,
|
||||
draggingEventId,
|
||||
hoveredEventId,
|
||||
dropTarget,
|
||||
onEventSelect,
|
||||
onEventHover,
|
||||
onEventDragStart,
|
||||
onEventResizeDragStart,
|
||||
onEventDragEnd,
|
||||
onEventDragOverTime,
|
||||
onDropTargetLeave,
|
||||
onEventDropOnTime,
|
||||
}: TimedDayColumnProps) {
|
||||
const layout = useMemo(
|
||||
() => layoutTimedEventsForDay(events, day),
|
||||
[day, events],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={[
|
||||
"calendar-day-time-column",
|
||||
dimWeekend ? "is-weekend" : "",
|
||||
dropTarget ? "is-drop-target" : "",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
onDragOver={
|
||||
canWrite
|
||||
? (event) => onEventDragOverTime(event, day)
|
||||
: undefined
|
||||
}
|
||||
onDragLeave={canWrite ? onDropTargetLeave : undefined}
|
||||
onDrop={
|
||||
canWrite
|
||||
? (event) =>
|
||||
onEventDropOnTime(event, day, dropSlotMinuteOfDay(event))
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{dropTarget && (
|
||||
<div
|
||||
className="calendar-time-drop-marker"
|
||||
style={{
|
||||
top: `${
|
||||
(dropTarget.minuteOfDay / 60) * HOUR_ROW_HEIGHT
|
||||
}px`,
|
||||
}}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span>{minuteOfDayLabel(dropTarget.minuteOfDay)}</span>
|
||||
</div>
|
||||
)}
|
||||
{layout.items.map((item) => (
|
||||
<div
|
||||
key={item.event.id}
|
||||
className={[
|
||||
"calendar-timed-event",
|
||||
draggingEventId === item.event.id ? "is-dragging" : "",
|
||||
hoveredEventId === item.event.id
|
||||
? "is-linked-hover"
|
||||
: "",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
style={timedEventStyle(
|
||||
item,
|
||||
calendarColorById.get(item.event.calendar_id),
|
||||
)}
|
||||
draggable={canWrite}
|
||||
onMouseEnter={() => onEventHover(item.event.id)}
|
||||
onMouseLeave={() => onEventHover("")}
|
||||
onDragStart={
|
||||
canWrite
|
||||
? (event) => onEventDragStart(event, item.event)
|
||||
: undefined
|
||||
}
|
||||
onDragEnd={canWrite ? onEventDragEnd : undefined}
|
||||
title={i18nMessage(
|
||||
"i18n:govoplan-calendar.edit_value.fad75899",
|
||||
{ value0: item.event.summary },
|
||||
)}
|
||||
>
|
||||
{canWrite && (
|
||||
<span
|
||||
className="calendar-event-resize-handle is-start"
|
||||
draggable
|
||||
title="i18n:govoplan-calendar.change_start_time.06eea3d3"
|
||||
onDragStart={(event) =>
|
||||
onEventResizeDragStart(event, item.event, "start")
|
||||
}
|
||||
onDragEnd={onEventDragEnd}
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="calendar-timed-event-content"
|
||||
onClick={() => onEventSelect(item.event)}
|
||||
onFocus={() => onEventHover(item.event.id)}
|
||||
onBlur={() => onEventHover("")}
|
||||
title={i18nMessage(
|
||||
"i18n:govoplan-calendar.edit_value.fad75899",
|
||||
{ value0: item.event.summary },
|
||||
)}
|
||||
>
|
||||
<EventInlineLabel event={item.event} />
|
||||
</button>
|
||||
{canWrite && (
|
||||
<span
|
||||
className="calendar-event-resize-handle is-end"
|
||||
draggable
|
||||
title="i18n:govoplan-calendar.change_end_time.db66ef4b"
|
||||
onDragStart={(event) =>
|
||||
onEventResizeDragStart(event, item.event, "end")
|
||||
}
|
||||
onDragEnd={onEventDragEnd}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{layout.overflows.map((overflow) => (
|
||||
<button
|
||||
key={overflow.key}
|
||||
type="button"
|
||||
className="calendar-timed-overflow"
|
||||
style={timedOverflowStyle(overflow)}
|
||||
title={overflow.events
|
||||
.map((event) => event.summary)
|
||||
.join(", ")}
|
||||
onClick={() => onEventSelect(overflow.events[0])}
|
||||
>
|
||||
+{overflow.events.length}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type CalendarEventChipProps = {
|
||||
event: CalendarEvent;
|
||||
color?: string | null;
|
||||
compact?: boolean;
|
||||
canDrag?: boolean;
|
||||
dragging?: boolean;
|
||||
linkedHover?: boolean;
|
||||
onSelect: (event: CalendarEvent) => void;
|
||||
onHover?: (eventId: string) => void;
|
||||
onDragStart?: (
|
||||
dragEvent: ReactDragEvent<HTMLElement>,
|
||||
event: CalendarEvent,
|
||||
) => void;
|
||||
onDragEnd?: () => void;
|
||||
};
|
||||
|
||||
function CalendarEventChip({
|
||||
event,
|
||||
color,
|
||||
compact = false,
|
||||
canDrag = false,
|
||||
dragging = false,
|
||||
linkedHover = false,
|
||||
onSelect,
|
||||
onHover,
|
||||
onDragStart,
|
||||
onDragEnd,
|
||||
}: CalendarEventChipProps) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={[
|
||||
compact
|
||||
? "calendar-event-chip is-compact"
|
||||
: "calendar-event-chip",
|
||||
dragging ? "is-dragging" : "",
|
||||
linkedHover ? "is-linked-hover" : "",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
style={calendarEventColorStyle(color)}
|
||||
draggable={canDrag}
|
||||
onClick={() => onSelect(event)}
|
||||
onMouseEnter={onHover ? () => onHover(event.id) : undefined}
|
||||
onMouseLeave={onHover ? () => onHover("") : undefined}
|
||||
onFocus={onHover ? () => onHover(event.id) : undefined}
|
||||
onBlur={onHover ? () => onHover("") : undefined}
|
||||
onDragStart={
|
||||
canDrag && onDragStart
|
||||
? (dragEvent) => onDragStart(dragEvent, event)
|
||||
: undefined
|
||||
}
|
||||
onDragEnd={canDrag ? onDragEnd : undefined}
|
||||
title={i18nMessage(
|
||||
"i18n:govoplan-calendar.edit_value.fad75899",
|
||||
{ value0: event.summary },
|
||||
)}
|
||||
>
|
||||
<EventInlineLabel event={event} />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function EventInlineLabel({
|
||||
event,
|
||||
}: {
|
||||
event: CalendarEvent;
|
||||
}) {
|
||||
return (
|
||||
<span className="calendar-event-line">
|
||||
<span className="calendar-event-time">
|
||||
{eventTimeLabel(event)}
|
||||
</span>
|
||||
<span className="calendar-event-separator">-</span>
|
||||
<strong>{event.summary}</strong>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
889
webui/src/features/calendar/calendarViewModel.ts
Normal file
889
webui/src/features/calendar/calendarViewModel.ts
Normal file
@@ -0,0 +1,889 @@
|
||||
import type {
|
||||
CSSProperties,
|
||||
DragEvent as ReactDragEvent,
|
||||
} from "react";
|
||||
|
||||
import type {
|
||||
CalendarEvent,
|
||||
CalendarEventDeltaResponse,
|
||||
} from "../../api/calendar";
|
||||
|
||||
export type CalendarMode =
|
||||
| "continuous"
|
||||
| "month"
|
||||
| "week"
|
||||
| "workweek"
|
||||
| "day";
|
||||
export type Range = { start: Date; end: Date };
|
||||
export type AgendaGroup = {
|
||||
key: string;
|
||||
date: Date;
|
||||
events: CalendarEvent[];
|
||||
};
|
||||
export type ContinuousViewport = { scrollTop: number; height: number };
|
||||
export type CalendarDayDropTarget = { kind: "day"; key: string };
|
||||
export type CalendarTimeDropTarget = {
|
||||
kind: "time";
|
||||
key: string;
|
||||
minuteOfDay: number;
|
||||
};
|
||||
export type CalendarDropTarget =
|
||||
| CalendarDayDropTarget
|
||||
| CalendarTimeDropTarget
|
||||
| null;
|
||||
export type CalendarDragAction =
|
||||
| { kind: "move"; event: CalendarEvent }
|
||||
| { kind: "resize-start"; event: CalendarEvent }
|
||||
| { kind: "resize-end"; event: CalendarEvent };
|
||||
export type CalendarResizeEdge = "start" | "end";
|
||||
export type CalendarViewPreferences = {
|
||||
dimWeekends: boolean;
|
||||
dimOffHours: boolean;
|
||||
workdayStartHour: number;
|
||||
workdayEndHour: number;
|
||||
continuousVirtualization: boolean;
|
||||
continuousOverscanWeeks: number;
|
||||
alternateContinuousMonths: boolean;
|
||||
};
|
||||
|
||||
export type TimedEventLayoutItem = TimedEventSegment & {
|
||||
column: number;
|
||||
columns: number;
|
||||
};
|
||||
export type TimedOverflowLayoutItem = {
|
||||
key: string;
|
||||
top: number;
|
||||
column: number;
|
||||
columns: number;
|
||||
events: CalendarEvent[];
|
||||
};
|
||||
|
||||
type TimedEventSegment = {
|
||||
event: CalendarEvent;
|
||||
start: Date;
|
||||
end: Date;
|
||||
top: number;
|
||||
height: number;
|
||||
};
|
||||
|
||||
export const HOUR_ROW_HEIGHT = 64;
|
||||
export const INITIAL_SCROLL_HOUR = 7;
|
||||
export const CONTINUOUS_WEEK_ROW_HEIGHT = 92;
|
||||
export const DEFAULT_CALENDAR_COLOR = "#5aa99b";
|
||||
const MAX_TIMED_EVENT_COLUMNS = 3;
|
||||
const CALENDAR_MODE_STORAGE_KEY = "govoplan.calendar.mode";
|
||||
const CALENDAR_VIEW_PREFERENCES_STORAGE_KEY =
|
||||
"govoplan.calendar.viewPreferences";
|
||||
const DEFAULT_CALENDAR_VIEW_PREFERENCES: CalendarViewPreferences = {
|
||||
dimWeekends: true,
|
||||
dimOffHours: true,
|
||||
workdayStartHour: 6,
|
||||
workdayEndHour: 20,
|
||||
continuousVirtualization: true,
|
||||
continuousOverscanWeeks: 6,
|
||||
alternateContinuousMonths: true,
|
||||
};
|
||||
|
||||
export function rangeForMode(
|
||||
mode: CalendarMode,
|
||||
focusDate: Date,
|
||||
continuousWeeks: { before: number; after: number },
|
||||
): Range {
|
||||
if (mode === "month") {
|
||||
const start = startOfWeek(startOfMonth(focusDate));
|
||||
return { start, end: addDays(start, 42) };
|
||||
}
|
||||
if (mode === "day") {
|
||||
return {
|
||||
start: startOfDay(focusDate),
|
||||
end: addDays(startOfDay(focusDate), 1),
|
||||
};
|
||||
}
|
||||
if (mode === "continuous") {
|
||||
const start = addDays(
|
||||
startOfWeek(focusDate),
|
||||
-continuousWeeks.before * 7,
|
||||
);
|
||||
const end = addDays(
|
||||
startOfWeek(focusDate),
|
||||
continuousWeeks.after * 7,
|
||||
);
|
||||
return { start, end };
|
||||
}
|
||||
const start = startOfWeek(focusDate);
|
||||
return { start, end: addDays(start, mode === "workweek" ? 5 : 7) };
|
||||
}
|
||||
|
||||
export function daysForMode(
|
||||
mode: CalendarMode,
|
||||
focusDate: Date,
|
||||
continuousWeeks: { before: number; after: number },
|
||||
): Date[] {
|
||||
const range = rangeForMode(mode, focusDate, continuousWeeks);
|
||||
return daysBetween(range.start, range.end);
|
||||
}
|
||||
|
||||
export function groupEventsByDay(
|
||||
events: CalendarEvent[],
|
||||
): Map<string, CalendarEvent[]> {
|
||||
const grouped = new Map<string, CalendarEvent[]>();
|
||||
for (const event of events) {
|
||||
const start = new Date(event.start_at);
|
||||
const end = event.end_at ? new Date(event.end_at) : start;
|
||||
let cursor = startOfDay(start);
|
||||
let last =
|
||||
event.all_day && event.end_at
|
||||
? addDays(startOfDay(end), -1)
|
||||
: startOfDay(end);
|
||||
if (last < cursor) last = cursor;
|
||||
while (cursor <= last) {
|
||||
const key = dayKey(cursor);
|
||||
grouped.set(key, [...(grouped.get(key) ?? []), event]);
|
||||
cursor = addDays(cursor, 1);
|
||||
}
|
||||
}
|
||||
for (const [key, items] of grouped.entries()) {
|
||||
grouped.set(
|
||||
key,
|
||||
items.sort(
|
||||
(left, right) =>
|
||||
left.start_at.localeCompare(right.start_at) ||
|
||||
left.summary.localeCompare(right.summary),
|
||||
),
|
||||
);
|
||||
}
|
||||
return grouped;
|
||||
}
|
||||
|
||||
export function agendaGroupsForDays(
|
||||
days: Date[],
|
||||
eventsByDay: Map<string, CalendarEvent[]>,
|
||||
): AgendaGroup[] {
|
||||
const groups: AgendaGroup[] = [];
|
||||
for (const day of days) {
|
||||
const key = dayKey(day);
|
||||
const events = (eventsByDay.get(key) ?? [])
|
||||
.slice()
|
||||
.sort(compareAgendaEvents);
|
||||
if (events.length > 0) groups.push({ key, date: day, events });
|
||||
}
|
||||
return groups;
|
||||
}
|
||||
|
||||
export function eventTimeLabel(event: CalendarEvent): string {
|
||||
if (event.all_day) return "i18n:govoplan-calendar.all_day.11457433";
|
||||
const start = new Date(event.start_at);
|
||||
const end = event.end_at ? new Date(event.end_at) : null;
|
||||
return end ? `${timeLabel(start)}-${timeLabel(end)}` : timeLabel(start);
|
||||
}
|
||||
|
||||
export function dateTimeLabel(value: Date): string {
|
||||
return new Intl.DateTimeFormat(undefined, {
|
||||
dateStyle: "medium",
|
||||
timeStyle: "short",
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
export function headingForMode(
|
||||
mode: CalendarMode,
|
||||
focusDate: Date,
|
||||
range: Range,
|
||||
): string {
|
||||
if (mode === "day") return dayMonthYearLabel(focusDate);
|
||||
if (mode === "month") return monthYearLabel(focusDate);
|
||||
return `${dayMonthYearLabel(range.start)} - ${dayMonthYearLabel(
|
||||
addDays(range.end, -1),
|
||||
)}`;
|
||||
}
|
||||
|
||||
export function chunk<T>(items: T[], size: number): T[][] {
|
||||
const rows: T[][] = [];
|
||||
for (let index = 0; index < items.length; index += size) {
|
||||
rows.push(items.slice(index, index + size));
|
||||
}
|
||||
return rows;
|
||||
}
|
||||
|
||||
export function startOfDay(value: Date): Date {
|
||||
return new Date(value.getFullYear(), value.getMonth(), value.getDate());
|
||||
}
|
||||
|
||||
export function startOfWeek(value: Date): Date {
|
||||
const day = value.getDay() || 7;
|
||||
return addDays(startOfDay(value), 1 - day);
|
||||
}
|
||||
|
||||
export function startOfMonth(value: Date): Date {
|
||||
return new Date(value.getFullYear(), value.getMonth(), 1);
|
||||
}
|
||||
|
||||
export function addDays(value: Date, days: number): Date {
|
||||
const next = new Date(value);
|
||||
next.setDate(next.getDate() + days);
|
||||
return next;
|
||||
}
|
||||
|
||||
export function addMonths(value: Date, months: number): Date {
|
||||
const next = new Date(value);
|
||||
next.setMonth(next.getMonth() + months);
|
||||
return next;
|
||||
}
|
||||
|
||||
export function addHours(value: Date, hours: number): Date {
|
||||
const next = new Date(value);
|
||||
next.setHours(next.getHours() + hours);
|
||||
return next;
|
||||
}
|
||||
|
||||
export function addMinutes(value: Date, minutes: number): Date {
|
||||
const next = new Date(value);
|
||||
next.setMinutes(next.getMinutes() + minutes);
|
||||
return next;
|
||||
}
|
||||
|
||||
export function daysBetween(start: Date, end: Date): Date[] {
|
||||
const days: Date[] = [];
|
||||
for (
|
||||
let cursor = startOfDay(start);
|
||||
cursor < end;
|
||||
cursor = addDays(cursor, 1)
|
||||
) {
|
||||
days.push(cursor);
|
||||
}
|
||||
return days;
|
||||
}
|
||||
|
||||
export function dayKey(value: Date): string {
|
||||
return toInputDate(value);
|
||||
}
|
||||
|
||||
export function sameDay(left: Date, right: Date): boolean {
|
||||
return (
|
||||
left.getFullYear() === right.getFullYear() &&
|
||||
left.getMonth() === right.getMonth() &&
|
||||
left.getDate() === right.getDate()
|
||||
);
|
||||
}
|
||||
|
||||
export function sameMonth(left: Date, right: Date): boolean {
|
||||
return (
|
||||
left.getFullYear() === right.getFullYear() &&
|
||||
left.getMonth() === right.getMonth()
|
||||
);
|
||||
}
|
||||
|
||||
export function toInputDate(value: Date): string {
|
||||
return `${value.getFullYear()}-${String(value.getMonth() + 1).padStart(
|
||||
2,
|
||||
"0",
|
||||
)}-${String(value.getDate()).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
export function toInputTime(value: Date): string {
|
||||
return `${String(value.getHours()).padStart(2, "0")}:${String(
|
||||
value.getMinutes(),
|
||||
).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
export function localDateTime(date: string, time: string): Date {
|
||||
return new Date(`${date}T${time || "00:00"}:00`);
|
||||
}
|
||||
|
||||
export function loadCalendarViewPreferences(): CalendarViewPreferences {
|
||||
if (typeof window === "undefined") return DEFAULT_CALENDAR_VIEW_PREFERENCES;
|
||||
try {
|
||||
const raw = window.localStorage.getItem(
|
||||
CALENDAR_VIEW_PREFERENCES_STORAGE_KEY,
|
||||
);
|
||||
if (!raw) return DEFAULT_CALENDAR_VIEW_PREFERENCES;
|
||||
const parsed = JSON.parse(raw) as Partial<CalendarViewPreferences>;
|
||||
let workdayStartHour = clampNumber(
|
||||
parsed.workdayStartHour,
|
||||
0,
|
||||
23,
|
||||
DEFAULT_CALENDAR_VIEW_PREFERENCES.workdayStartHour,
|
||||
);
|
||||
let workdayEndHour = clampNumber(
|
||||
parsed.workdayEndHour,
|
||||
1,
|
||||
24,
|
||||
DEFAULT_CALENDAR_VIEW_PREFERENCES.workdayEndHour,
|
||||
);
|
||||
if (workdayEndHour <= workdayStartHour) {
|
||||
workdayStartHour =
|
||||
DEFAULT_CALENDAR_VIEW_PREFERENCES.workdayStartHour;
|
||||
workdayEndHour = DEFAULT_CALENDAR_VIEW_PREFERENCES.workdayEndHour;
|
||||
}
|
||||
return {
|
||||
dimWeekends:
|
||||
typeof parsed.dimWeekends === "boolean"
|
||||
? parsed.dimWeekends
|
||||
: DEFAULT_CALENDAR_VIEW_PREFERENCES.dimWeekends,
|
||||
dimOffHours:
|
||||
typeof parsed.dimOffHours === "boolean"
|
||||
? parsed.dimOffHours
|
||||
: DEFAULT_CALENDAR_VIEW_PREFERENCES.dimOffHours,
|
||||
workdayStartHour,
|
||||
workdayEndHour,
|
||||
continuousVirtualization:
|
||||
typeof parsed.continuousVirtualization === "boolean"
|
||||
? parsed.continuousVirtualization
|
||||
: DEFAULT_CALENDAR_VIEW_PREFERENCES.continuousVirtualization,
|
||||
continuousOverscanWeeks: clampNumber(
|
||||
parsed.continuousOverscanWeeks,
|
||||
2,
|
||||
20,
|
||||
DEFAULT_CALENDAR_VIEW_PREFERENCES.continuousOverscanWeeks,
|
||||
),
|
||||
alternateContinuousMonths:
|
||||
typeof parsed.alternateContinuousMonths === "boolean"
|
||||
? parsed.alternateContinuousMonths
|
||||
: DEFAULT_CALENDAR_VIEW_PREFERENCES.alternateContinuousMonths,
|
||||
};
|
||||
} catch {
|
||||
return DEFAULT_CALENDAR_VIEW_PREFERENCES;
|
||||
}
|
||||
}
|
||||
|
||||
export function loadCalendarMode(): CalendarMode {
|
||||
if (typeof window === "undefined") return "continuous";
|
||||
try {
|
||||
const storedMode = window.localStorage.getItem(
|
||||
CALENDAR_MODE_STORAGE_KEY,
|
||||
);
|
||||
return isCalendarMode(storedMode) ? storedMode : "continuous";
|
||||
} catch {
|
||||
return "continuous";
|
||||
}
|
||||
}
|
||||
|
||||
export function saveCalendarMode(mode: CalendarMode): void {
|
||||
if (typeof window === "undefined") return;
|
||||
try {
|
||||
window.localStorage.setItem(CALENDAR_MODE_STORAGE_KEY, mode);
|
||||
} catch {
|
||||
// Storage can be unavailable in locked-down browsers.
|
||||
}
|
||||
}
|
||||
|
||||
export function normalizeHexColor(
|
||||
value: string | null | undefined,
|
||||
): string | null {
|
||||
if (!value) return null;
|
||||
const trimmed = value.trim();
|
||||
if (/^#[0-9a-fA-F]{8}$/.test(trimmed)) {
|
||||
return trimmed.slice(0, 7).toLowerCase();
|
||||
}
|
||||
return /^#[0-9a-fA-F]{6}$/.test(trimmed)
|
||||
? trimmed.toLowerCase()
|
||||
: null;
|
||||
}
|
||||
|
||||
export function calendarEventColorStyle(
|
||||
color: string | null | undefined,
|
||||
): CSSProperties {
|
||||
const normalizedColor =
|
||||
normalizeHexColor(color) || DEFAULT_CALENDAR_COLOR;
|
||||
return {
|
||||
"--calendar-event-color": normalizedColor,
|
||||
"--calendar-event-bg": mixHexWithWhite(normalizedColor, 0.88),
|
||||
"--calendar-event-border": mixHexWithWhite(normalizedColor, 0.58),
|
||||
} as CSSProperties;
|
||||
}
|
||||
|
||||
export function continuousVirtualWindow(
|
||||
weekCount: number,
|
||||
viewport: ContinuousViewport,
|
||||
overscanWeeks: number,
|
||||
): {
|
||||
start: number;
|
||||
end: number;
|
||||
topSpacerHeight: number;
|
||||
bottomSpacerHeight: number;
|
||||
} {
|
||||
if (weekCount === 0) {
|
||||
return {
|
||||
start: 0,
|
||||
end: 0,
|
||||
topSpacerHeight: 0,
|
||||
bottomSpacerHeight: 0,
|
||||
};
|
||||
}
|
||||
const visibleStart = Math.floor(
|
||||
viewport.scrollTop / CONTINUOUS_WEEK_ROW_HEIGHT,
|
||||
);
|
||||
const visibleCount = Math.max(
|
||||
1,
|
||||
Math.ceil(
|
||||
(viewport.height || CONTINUOUS_WEEK_ROW_HEIGHT * 8) /
|
||||
CONTINUOUS_WEEK_ROW_HEIGHT,
|
||||
),
|
||||
);
|
||||
const start = Math.max(0, visibleStart - overscanWeeks);
|
||||
const end = Math.min(
|
||||
weekCount,
|
||||
visibleStart + visibleCount + overscanWeeks,
|
||||
);
|
||||
return {
|
||||
start,
|
||||
end,
|
||||
topSpacerHeight: start * CONTINUOUS_WEEK_ROW_HEIGHT,
|
||||
bottomSpacerHeight: Math.max(
|
||||
0,
|
||||
(weekCount - end) * CONTINUOUS_WEEK_ROW_HEIGHT,
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
export function timeGridStyle(
|
||||
columns: string,
|
||||
preferences: CalendarViewPreferences,
|
||||
): CSSProperties {
|
||||
return {
|
||||
gridTemplateColumns: columns,
|
||||
"--calendar-work-start-y": `${
|
||||
preferences.workdayStartHour * HOUR_ROW_HEIGHT
|
||||
}px`,
|
||||
"--calendar-work-end-y": `${
|
||||
preferences.workdayEndHour * HOUR_ROW_HEIGHT
|
||||
}px`,
|
||||
"--calendar-off-hours-opacity": preferences.dimOffHours ? "1" : "0",
|
||||
} as CSSProperties;
|
||||
}
|
||||
|
||||
export function moveEventToDay(
|
||||
event: CalendarEvent,
|
||||
day: Date,
|
||||
): { startAt: Date; endAt: Date | null; allDay: boolean } {
|
||||
const start = new Date(event.start_at);
|
||||
const end = event.end_at ? new Date(event.end_at) : null;
|
||||
if (event.all_day) {
|
||||
const durationDays = Math.max(
|
||||
1,
|
||||
Math.round(
|
||||
daysBetweenCount(
|
||||
startOfDay(start),
|
||||
end ? startOfDay(end) : addDays(startOfDay(start), 1),
|
||||
),
|
||||
),
|
||||
);
|
||||
const startAt = startOfDay(day);
|
||||
return {
|
||||
startAt,
|
||||
endAt: addDays(startAt, durationDays),
|
||||
allDay: true,
|
||||
};
|
||||
}
|
||||
const startAt = new Date(
|
||||
day.getFullYear(),
|
||||
day.getMonth(),
|
||||
day.getDate(),
|
||||
start.getHours(),
|
||||
start.getMinutes(),
|
||||
);
|
||||
const durationMs = eventDurationMs(event, 60 * 60 * 1000);
|
||||
return {
|
||||
startAt,
|
||||
endAt: new Date(startAt.getTime() + durationMs),
|
||||
allDay: false,
|
||||
};
|
||||
}
|
||||
|
||||
export function moveEventToTime(
|
||||
event: CalendarEvent,
|
||||
day: Date,
|
||||
minuteOfDay: number,
|
||||
): { startAt: Date; endAt: Date | null; allDay: boolean } {
|
||||
const snappedMinute = Math.min(
|
||||
23 * 60 + 45,
|
||||
Math.max(0, snapMinute(minuteOfDay)),
|
||||
);
|
||||
const startAt = dateAtMinuteOfDay(day, snappedMinute);
|
||||
const durationMs = event.all_day
|
||||
? 60 * 60 * 1000
|
||||
: eventDurationMs(event, 60 * 60 * 1000);
|
||||
return {
|
||||
startAt,
|
||||
endAt: new Date(startAt.getTime() + durationMs),
|
||||
allDay: false,
|
||||
};
|
||||
}
|
||||
|
||||
export function resizeEventToTime(
|
||||
event: CalendarEvent,
|
||||
edge: CalendarResizeEdge,
|
||||
day: Date,
|
||||
minuteOfDay: number,
|
||||
): { startAt: Date; endAt: Date | null; allDay: boolean } {
|
||||
const target = dateAtMinuteOfDay(
|
||||
day,
|
||||
Math.min(23 * 60 + 45, Math.max(0, snapMinute(minuteOfDay))),
|
||||
);
|
||||
const currentStart = new Date(event.start_at);
|
||||
const fallbackEnd = addMinutes(currentStart, 30);
|
||||
const currentEnd =
|
||||
event.end_at && new Date(event.end_at) > currentStart
|
||||
? new Date(event.end_at)
|
||||
: fallbackEnd;
|
||||
const minimumDurationMs = 15 * 60_000;
|
||||
if (edge === "start") {
|
||||
const latestStart = new Date(
|
||||
currentEnd.getTime() - minimumDurationMs,
|
||||
);
|
||||
return {
|
||||
startAt: target < latestStart ? target : latestStart,
|
||||
endAt: currentEnd,
|
||||
allDay: false,
|
||||
};
|
||||
}
|
||||
const earliestEnd = new Date(
|
||||
currentStart.getTime() + minimumDurationMs,
|
||||
);
|
||||
return {
|
||||
startAt: currentStart,
|
||||
endAt: target > earliestEnd ? target : earliestEnd,
|
||||
allDay: false,
|
||||
};
|
||||
}
|
||||
|
||||
export function dropMinuteOfDay(
|
||||
event: ReactDragEvent<HTMLElement>,
|
||||
): number {
|
||||
const rect = event.currentTarget.getBoundingClientRect();
|
||||
const offset = Math.min(
|
||||
Math.max(event.clientY - rect.top, 0),
|
||||
HOUR_ROW_HEIGHT * 24,
|
||||
);
|
||||
return Math.floor((offset / HOUR_ROW_HEIGHT) * 60);
|
||||
}
|
||||
|
||||
export function dropSlotMinuteOfDay(
|
||||
event: ReactDragEvent<HTMLElement>,
|
||||
): number {
|
||||
return Math.min(
|
||||
23 * 60 + 45,
|
||||
Math.max(0, snapMinute(dropMinuteOfDay(event))),
|
||||
);
|
||||
}
|
||||
|
||||
export function minuteOfDayLabel(value: number): string {
|
||||
const minute = Math.min(23 * 60 + 45, Math.max(0, value));
|
||||
return `${String(Math.floor(minute / 60)).padStart(2, "0")}:${String(
|
||||
minute % 60,
|
||||
).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
export function isWeekend(value: Date): boolean {
|
||||
const day = value.getDay();
|
||||
return day === 0 || day === 6;
|
||||
}
|
||||
|
||||
export function daysBetweenCount(start: Date, end: Date): number {
|
||||
return Math.round(
|
||||
(startOfDay(end).getTime() - startOfDay(start).getTime()) / 86_400_000,
|
||||
);
|
||||
}
|
||||
|
||||
export function addMinutesToTime(
|
||||
time: string,
|
||||
minutes: number,
|
||||
): string {
|
||||
const [hourPart, minutePart] = time.split(":");
|
||||
const total = Math.min(
|
||||
23 * 60 + 59,
|
||||
Math.max(
|
||||
0,
|
||||
Number(hourPart || 0) * 60 + Number(minutePart || 0) + minutes,
|
||||
),
|
||||
);
|
||||
return `${String(Math.floor(total / 60)).padStart(2, "0")}:${String(
|
||||
total % 60,
|
||||
).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
export function layoutTimedEventsForDay(
|
||||
events: CalendarEvent[],
|
||||
day: Date,
|
||||
): {
|
||||
items: TimedEventLayoutItem[];
|
||||
overflows: TimedOverflowLayoutItem[];
|
||||
} {
|
||||
const segments = timedSegmentsForDay(events, day);
|
||||
const clusters = clusterTimedSegments(segments);
|
||||
const items: TimedEventLayoutItem[] = [];
|
||||
const overflows: TimedOverflowLayoutItem[] = [];
|
||||
|
||||
for (const cluster of clusters) {
|
||||
const columnEnds: Date[] = [];
|
||||
const assigned = cluster.map((segment) => {
|
||||
let column = columnEnds.findIndex((end) => end <= segment.start);
|
||||
if (column === -1) column = columnEnds.length;
|
||||
columnEnds[column] = segment.end;
|
||||
return { ...segment, column };
|
||||
});
|
||||
const totalColumns = Math.max(1, columnEnds.length);
|
||||
const visibleColumns =
|
||||
totalColumns > MAX_TIMED_EVENT_COLUMNS
|
||||
? MAX_TIMED_EVENT_COLUMNS
|
||||
: totalColumns;
|
||||
const overflowColumn = MAX_TIMED_EVENT_COLUMNS - 1;
|
||||
const hidden =
|
||||
totalColumns > MAX_TIMED_EVENT_COLUMNS
|
||||
? assigned.filter((item) => item.column >= overflowColumn)
|
||||
: [];
|
||||
|
||||
for (const item of assigned) {
|
||||
if (hidden.includes(item)) continue;
|
||||
items.push({ ...item, columns: visibleColumns });
|
||||
}
|
||||
if (hidden.length > 0) {
|
||||
overflows.push({
|
||||
key: `${dayKey(day)}-${hidden[0].event.id}-overflow`,
|
||||
top: Math.min(...hidden.map((item) => item.top)),
|
||||
column: overflowColumn,
|
||||
columns: MAX_TIMED_EVENT_COLUMNS,
|
||||
events: hidden.map((item) => item.event),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return { items, overflows };
|
||||
}
|
||||
|
||||
export function timedEventStyle(
|
||||
item: TimedEventLayoutItem,
|
||||
color?: string | null,
|
||||
): CSSProperties {
|
||||
return {
|
||||
top: `${item.top}px`,
|
||||
height: `${item.height}px`,
|
||||
left: `calc(${(item.column * 100) / item.columns}% + 4px)`,
|
||||
width: `calc(${100 / item.columns}% - 8px)`,
|
||||
...calendarEventColorStyle(color),
|
||||
};
|
||||
}
|
||||
|
||||
export function timedOverflowStyle(
|
||||
item: TimedOverflowLayoutItem,
|
||||
): CSSProperties {
|
||||
return {
|
||||
top: `${item.top}px`,
|
||||
left: `calc(${(item.column * 100) / item.columns}% + 4px)`,
|
||||
width: `calc(${100 / item.columns}% - 8px)`,
|
||||
};
|
||||
}
|
||||
|
||||
export function monthYearLabel(value: Date): string {
|
||||
return new Intl.DateTimeFormat(undefined, {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
export function dayMonthLabel(value: Date): string {
|
||||
return new Intl.DateTimeFormat(undefined, {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
export function dayMonthYearLabel(value: Date): string {
|
||||
return new Intl.DateTimeFormat(undefined, {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
export function agendaDateLabel(value: Date): string {
|
||||
return new Intl.DateTimeFormat(undefined, {
|
||||
weekday: "short",
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
export function weekdayLong(value: Date): string {
|
||||
return new Intl.DateTimeFormat(undefined, {
|
||||
weekday: "short",
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
export function calendarDraftKey(value: unknown): string {
|
||||
return JSON.stringify(value);
|
||||
}
|
||||
|
||||
export function mergeCalendarEventDelta(
|
||||
current: CalendarEvent[],
|
||||
response: CalendarEventDeltaResponse,
|
||||
): CalendarEvent[] {
|
||||
if (response.full) {
|
||||
return response.events.slice().sort(compareCalendarEvents);
|
||||
}
|
||||
const rows = new Map(current.map((event) => [event.id, event]));
|
||||
for (const deleted of response.deleted) {
|
||||
if (
|
||||
!deleted.resource_type ||
|
||||
deleted.resource_type === "calendar_event"
|
||||
) {
|
||||
rows.delete(deleted.id);
|
||||
}
|
||||
}
|
||||
for (const event of response.events) rows.set(event.id, event);
|
||||
return Array.from(rows.values()).sort(compareCalendarEvents);
|
||||
}
|
||||
|
||||
export function errorText(error: unknown): string {
|
||||
if (error instanceof Error) return error.message;
|
||||
return "i18n:govoplan-calendar.calendar_request_failed.ae8a54f4";
|
||||
}
|
||||
|
||||
function isCalendarMode(value: unknown): value is CalendarMode {
|
||||
return (
|
||||
value === "continuous" ||
|
||||
value === "month" ||
|
||||
value === "week" ||
|
||||
value === "workweek" ||
|
||||
value === "day"
|
||||
);
|
||||
}
|
||||
|
||||
function mixHexWithWhite(hex: string, whiteRatio: number): string {
|
||||
const normalized = normalizeHexColor(hex) || DEFAULT_CALENDAR_COLOR;
|
||||
const ratio = Math.min(1, Math.max(0, whiteRatio));
|
||||
const red = Number.parseInt(normalized.slice(1, 3), 16);
|
||||
const green = Number.parseInt(normalized.slice(3, 5), 16);
|
||||
const blue = Number.parseInt(normalized.slice(5, 7), 16);
|
||||
return `rgb(${Math.round(red * (1 - ratio) + 255 * ratio)}, ${Math.round(
|
||||
green * (1 - ratio) + 255 * ratio,
|
||||
)}, ${Math.round(blue * (1 - ratio) + 255 * ratio)})`;
|
||||
}
|
||||
|
||||
function eventDurationMs(event: CalendarEvent, fallback: number): number {
|
||||
if (!event.end_at) return fallback;
|
||||
const start = new Date(event.start_at);
|
||||
const end = new Date(event.end_at);
|
||||
return Math.max(30 * 60 * 1000, end.getTime() - start.getTime());
|
||||
}
|
||||
|
||||
function dateAtMinuteOfDay(day: Date, minuteOfDay: number): Date {
|
||||
return new Date(
|
||||
day.getFullYear(),
|
||||
day.getMonth(),
|
||||
day.getDate(),
|
||||
Math.floor(minuteOfDay / 60),
|
||||
minuteOfDay % 60,
|
||||
);
|
||||
}
|
||||
|
||||
function snapMinute(value: number): number {
|
||||
return Math.round(value / 15) * 15;
|
||||
}
|
||||
|
||||
function clampNumber(
|
||||
value: unknown,
|
||||
min: number,
|
||||
max: number,
|
||||
fallback: number,
|
||||
): number {
|
||||
if (typeof value !== "number" || Number.isNaN(value)) return fallback;
|
||||
return Math.min(max, Math.max(min, Math.round(value)));
|
||||
}
|
||||
|
||||
function timedSegmentsForDay(
|
||||
events: CalendarEvent[],
|
||||
day: Date,
|
||||
): TimedEventSegment[] {
|
||||
const dayStart = startOfDay(day);
|
||||
const dayEnd = addDays(dayStart, 1);
|
||||
return events
|
||||
.filter((event) => !event.all_day)
|
||||
.map((event): TimedEventSegment | null => {
|
||||
const eventStart = new Date(event.start_at);
|
||||
const rawEventEnd = event.end_at
|
||||
? new Date(event.end_at)
|
||||
: addMinutes(eventStart, 30);
|
||||
const eventEnd =
|
||||
rawEventEnd > eventStart ? rawEventEnd : addMinutes(eventStart, 30);
|
||||
const start = eventStart < dayStart ? dayStart : eventStart;
|
||||
const end = eventEnd > dayEnd ? dayEnd : eventEnd;
|
||||
if (end <= start) return null;
|
||||
const startMinutes = minutesBetween(dayStart, start);
|
||||
const durationMinutes = minutesBetween(start, end);
|
||||
return {
|
||||
event,
|
||||
start,
|
||||
end,
|
||||
top: Math.max(0, (startMinutes / 60) * HOUR_ROW_HEIGHT),
|
||||
height: Math.max(
|
||||
26,
|
||||
(durationMinutes / 60) * HOUR_ROW_HEIGHT,
|
||||
),
|
||||
};
|
||||
})
|
||||
.filter(
|
||||
(segment): segment is TimedEventSegment => segment !== null,
|
||||
)
|
||||
.sort(
|
||||
(left, right) =>
|
||||
left.start.getTime() - right.start.getTime() ||
|
||||
right.end.getTime() - left.end.getTime(),
|
||||
);
|
||||
}
|
||||
|
||||
function clusterTimedSegments(
|
||||
segments: TimedEventSegment[],
|
||||
): TimedEventSegment[][] {
|
||||
const clusters: TimedEventSegment[][] = [];
|
||||
let current: TimedEventSegment[] = [];
|
||||
let currentEnd: Date | null = null;
|
||||
for (const segment of segments) {
|
||||
if (!current.length || (currentEnd && segment.start < currentEnd)) {
|
||||
current.push(segment);
|
||||
if (!currentEnd || segment.end.getTime() > currentEnd.getTime()) {
|
||||
currentEnd = segment.end;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
clusters.push(current);
|
||||
current = [segment];
|
||||
currentEnd = segment.end;
|
||||
}
|
||||
if (current.length) clusters.push(current);
|
||||
return clusters;
|
||||
}
|
||||
|
||||
function minutesBetween(start: Date, end: Date): number {
|
||||
return Math.max(0, (end.getTime() - start.getTime()) / 60_000);
|
||||
}
|
||||
|
||||
function compareAgendaEvents(
|
||||
left: CalendarEvent,
|
||||
right: CalendarEvent,
|
||||
): number {
|
||||
if (left.all_day !== right.all_day) return left.all_day ? -1 : 1;
|
||||
return (
|
||||
left.start_at.localeCompare(right.start_at) ||
|
||||
left.summary.localeCompare(right.summary)
|
||||
);
|
||||
}
|
||||
|
||||
function timeLabel(value: Date): string {
|
||||
return new Intl.DateTimeFormat(undefined, {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
function compareCalendarEvents(
|
||||
left: CalendarEvent,
|
||||
right: CalendarEvent,
|
||||
): number {
|
||||
return (
|
||||
new Date(left.start_at).getTime() -
|
||||
new Date(right.start_at).getTime() ||
|
||||
left.summary.localeCompare(right.summary) ||
|
||||
left.id.localeCompare(right.id)
|
||||
);
|
||||
}
|
||||
78
webui/tests/calendar-page-structure.test.mjs
Normal file
78
webui/tests/calendar-page-structure.test.mjs
Normal file
@@ -0,0 +1,78 @@
|
||||
import fs from "node:fs";
|
||||
|
||||
function assert(condition, message) {
|
||||
if (!condition) throw new Error(message);
|
||||
}
|
||||
|
||||
const page = fs.readFileSync(
|
||||
new URL(
|
||||
"../src/features/calendar/CalendarPage.tsx",
|
||||
import.meta.url,
|
||||
),
|
||||
"utf8",
|
||||
);
|
||||
const views = fs.readFileSync(
|
||||
new URL(
|
||||
"../src/features/calendar/CalendarViews.tsx",
|
||||
import.meta.url,
|
||||
),
|
||||
"utf8",
|
||||
);
|
||||
const model = fs.readFileSync(
|
||||
new URL(
|
||||
"../src/features/calendar/calendarViewModel.ts",
|
||||
import.meta.url,
|
||||
),
|
||||
"utf8",
|
||||
);
|
||||
const collectionDialogs = fs.readFileSync(
|
||||
new URL(
|
||||
"../src/features/calendar/CalendarCollectionDialogs.tsx",
|
||||
import.meta.url,
|
||||
),
|
||||
"utf8",
|
||||
);
|
||||
const eventDialog = fs.readFileSync(
|
||||
new URL(
|
||||
"../src/features/calendar/CalendarEventDialog.tsx",
|
||||
import.meta.url,
|
||||
),
|
||||
"utf8",
|
||||
);
|
||||
|
||||
assert(
|
||||
page.includes('from "./CalendarViews"'),
|
||||
"CalendarPage must compose the focused calendar view components",
|
||||
);
|
||||
assert(
|
||||
!page.includes("function CalendarWeekRows("),
|
||||
"CalendarPage must not own month/continuous rendering",
|
||||
);
|
||||
assert(
|
||||
!page.includes("function CalendarTimeGrid("),
|
||||
"CalendarPage must not own time-grid rendering",
|
||||
);
|
||||
assert(
|
||||
views.includes("export function CalendarWeekRows(") &&
|
||||
views.includes("export function CalendarTimeGrid("),
|
||||
"CalendarViews must own both view families",
|
||||
);
|
||||
assert(
|
||||
model.includes("export function layoutTimedEventsForDay(") &&
|
||||
model.includes("export function continuousVirtualWindow("),
|
||||
"calendar layout and virtualization must remain independently testable",
|
||||
);
|
||||
assert(
|
||||
!page.includes("function CalendarCollectionDialog(") &&
|
||||
!page.includes("function CalendarEventDialog("),
|
||||
"CalendarPage must not own source or event form dialogs",
|
||||
);
|
||||
assert(
|
||||
collectionDialogs.includes(
|
||||
"export function CalendarCollectionDialog(",
|
||||
) &&
|
||||
eventDialog.includes("export function CalendarEventDialog("),
|
||||
"calendar dialogs must remain focused components",
|
||||
);
|
||||
|
||||
console.log("Calendar page decomposition checks passed.");
|
||||
96
webui/tests/calendar-view-model.test.ts
Normal file
96
webui/tests/calendar-view-model.test.ts
Normal file
@@ -0,0 +1,96 @@
|
||||
import {
|
||||
continuousVirtualWindow,
|
||||
groupEventsByDay,
|
||||
layoutTimedEventsForDay,
|
||||
moveEventToDay,
|
||||
rangeForMode,
|
||||
resizeEventToTime,
|
||||
} from "../src/features/calendar/calendarViewModel.ts";
|
||||
|
||||
function assert(condition: unknown, message: string): void {
|
||||
if (!condition) throw new Error(message);
|
||||
}
|
||||
|
||||
function event(
|
||||
id: string,
|
||||
start: Date,
|
||||
end: Date,
|
||||
allDay = false,
|
||||
) {
|
||||
return {
|
||||
id,
|
||||
calendar_id: "calendar-1",
|
||||
summary: id,
|
||||
start_at: start.toISOString(),
|
||||
end_at: end.toISOString(),
|
||||
all_day: allDay,
|
||||
} as never;
|
||||
}
|
||||
|
||||
const focus = new Date(2026, 6, 15, 12);
|
||||
const month = rangeForMode("month", focus, {
|
||||
before: 8,
|
||||
after: 12,
|
||||
});
|
||||
assert(
|
||||
(month.end.getTime() - month.start.getTime()) / 86_400_000 === 42,
|
||||
"month view should retain its six-week window",
|
||||
);
|
||||
|
||||
const virtual = continuousVirtualWindow(
|
||||
100,
|
||||
{ scrollTop: 20 * 92, height: 8 * 92 },
|
||||
3,
|
||||
);
|
||||
assert(virtual.start === 17, "virtualization should retain overscan above");
|
||||
assert(virtual.end === 31, "virtualization should retain overscan below");
|
||||
assert(
|
||||
virtual.topSpacerHeight + virtual.bottomSpacerHeight > 0,
|
||||
"virtualization should preserve offscreen geometry",
|
||||
);
|
||||
|
||||
const day = new Date(2026, 6, 7);
|
||||
const parallel = [0, 1, 2, 3].map((index) =>
|
||||
event(
|
||||
`event-${index}`,
|
||||
new Date(2026, 6, 7, 9),
|
||||
new Date(2026, 6, 7, 10),
|
||||
),
|
||||
);
|
||||
const layout = layoutTimedEventsForDay(parallel, day);
|
||||
assert(
|
||||
layout.items.length === 2 && layout.overflows.length === 1,
|
||||
"parallel events should use bounded columns plus one overflow control",
|
||||
);
|
||||
assert(
|
||||
layout.overflows[0].events.length === 2,
|
||||
"overflow should retain every hidden event",
|
||||
);
|
||||
|
||||
const allDay = event(
|
||||
"all-day",
|
||||
new Date(2026, 6, 7),
|
||||
new Date(2026, 6, 9),
|
||||
true,
|
||||
);
|
||||
const grouped = groupEventsByDay([allDay]);
|
||||
assert(grouped.size === 2, "all-day end dates should remain exclusive");
|
||||
const moved = moveEventToDay(allDay, new Date(2026, 6, 20));
|
||||
assert(
|
||||
moved.endAt?.getDate() === 22,
|
||||
"moving an all-day event should preserve its duration",
|
||||
);
|
||||
|
||||
const timed = event(
|
||||
"timed",
|
||||
new Date(2026, 6, 7, 10),
|
||||
new Date(2026, 6, 7, 11),
|
||||
);
|
||||
const resized = resizeEventToTime(timed, "end", day, 9 * 60);
|
||||
assert(
|
||||
resized.endAt !== null &&
|
||||
resized.endAt.getTime() > resized.startAt.getTime(),
|
||||
"resizing must not invert an event",
|
||||
);
|
||||
|
||||
console.log("Calendar view model interaction checks passed.");
|
||||
38
webui/tsconfig.calendar-page-tests.json
Normal file
38
webui/tsconfig.calendar-page-tests.json
Normal file
@@ -0,0 +1,38 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"strict": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@govoplan/core-webui": [
|
||||
"../../govoplan-core/webui/src/index.ts"
|
||||
],
|
||||
"lucide-react": [
|
||||
"../../govoplan-core/webui/node_modules/lucide-react/dist/lucide-react.d.ts"
|
||||
],
|
||||
"react": [
|
||||
"../../govoplan-core/webui/node_modules/@types/react/index.d.ts"
|
||||
],
|
||||
"react/jsx-runtime": [
|
||||
"../../govoplan-core/webui/node_modules/@types/react/jsx-runtime.d.ts"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"../../govoplan-core/webui/src/vite-env.d.ts",
|
||||
"src/api/calendar.ts",
|
||||
"src/features/calendar/CalendarPage.tsx",
|
||||
"src/features/calendar/CalendarViews.tsx",
|
||||
"src/features/calendar/CalendarCollectionDialogs.tsx",
|
||||
"src/features/calendar/CalendarEventDialog.tsx",
|
||||
"src/features/calendar/calendarViewModel.ts"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user