111 lines
3.1 KiB
TypeScript
111 lines
3.1 KiB
TypeScript
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;
|
|
}
|