refactor: harden calendar sync and add dashboard widget

2026-07-29 14:16:28 +02:00
parent 77072d057a
commit 2cb3aca27c
5 changed files with 651 additions and 95 deletions
--- a/webui/src/features/calendar/UpcomingEventsWidget.tsx
+++ b/webui/src/features/calendar/UpcomingEventsWidget.tsx
@@ -0,0 +1,110 @@
+import { useCallback } from "react";
+import { CalendarDays, MapPin } from "lucide-react";
+import { Link } from "react-router-dom";
+import {
+  DashboardWidgetList,
+  DismissibleAlert,
+  LoadingFrame,
+  useDashboardWidgetData,
+  type ApiSettings,
+  type DashboardWidgetConfiguration
+} from "@govoplan/core-webui";
+import {
+  listCalendarEvents,
+  type CalendarEvent
+} from "../../api/calendar";
+
+export default function UpcomingEventsWidget({
+  settings,
+  refreshKey,
+  configuration
+}: {
+  settings: ApiSettings;
+  refreshKey: number;
+  configuration: DashboardWidgetConfiguration;
+}) {
+  const maxItems = numberSetting(configuration.maxItems, 5, 1, 12);
+  const daysAhead = numberSetting(configuration.daysAhead, 14, 1, 90);
+  const showLocation = configuration.showLocation !== false;
+  const load = useCallback(async () => {
+    const start = new Date();
+    const end = new Date(start);
+    end.setDate(end.getDate() + daysAhead);
+    const response = await listCalendarEvents(settings, {
+      start_at: start.toISOString(),
+      end_at: end.toISOString()
+    });
+    return [...response.events]
+      .filter((event) => event.status !== "cancelled")
+      .sort(
+        (left, right) =>
+          new Date(left.start_at).getTime() - new Date(right.start_at).getTime()
+      )
+      .slice(0, maxItems);
+  }, [daysAhead, maxItems, settings]);
+  const { data: events, loading, error } = useDashboardWidgetData(
+    load,
+    refreshKey
+  );
+
+  return (
+    <LoadingFrame loading={loading} label="Loading upcoming calendar events">
+      {error && (
+        <DismissibleAlert tone="warning" resetKey={error}>
+          {error}
+        </DismissibleAlert>
+      )}
+      <DashboardWidgetList
+        emptyText={`No events in the next ${daysAhead} days.`}
+        items={(events ?? []).map((event) => ({
+          id: event.id,
+          title: event.summary,
+          detail:
+            showLocation && event.location ? (
+              <>
+                <MapPin size={12} aria-hidden="true" /> {event.location}
+              </>
+            ) : undefined,
+          meta: eventTimeLabel(event),
+          leading: <CalendarDays size={17} aria-hidden="true" />,
+          to: "/calendar"
+        }))}
+      />
+      <div className="dashboard-contribution-footer">
+        <Link className="btn btn-secondary" to="/calendar">
+          Open calendar
+        </Link>
+      </div>
+    </LoadingFrame>
+  );
+}
+
+function eventTimeLabel(event: CalendarEvent): string {
+  const start = new Date(event.start_at);
+  if (event.all_day) {
+    return new Intl.DateTimeFormat(undefined, {
+      weekday: "short",
+      day: "2-digit",
+      month: "short"
+    }).format(start);
+  }
+  return new Intl.DateTimeFormat(undefined, {
+    weekday: "short",
+    day: "2-digit",
+    month: "short",
+    hour: "2-digit",
+    minute: "2-digit"
+  }).format(start);
+}
+
+function numberSetting(
+  value: unknown,
+  fallback: number,
+  minimum: number,
+  maximum: number
+): number {
+  const numeric = typeof value === "number" ? value : Number(value);
+  return Number.isFinite(numeric)
+    ? Math.max(minimum, Math.min(maximum, Math.floor(numeric)))
+    : fallback;
+}