schalli
b16e4b8e67
- Titel-Span im Tooltip: min-w-0 break-words statt truncate - Breite (288px) und Rand-Klemmung aus TOOLTIP_WIDTH_PX/TOOLTIP_EDGE_PX - Test 4c: belegt Klassen und Tooltip-Breite Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
331 lines
12 KiB
TypeScript
331 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import { useTranslations } from 'next-intl';
|
|
import type { WidgetProps } from '../widget-registry';
|
|
import { fetchEvents, fetchSources } from '@/lib/calendar-api';
|
|
import type { CalendarEvent } from '@/lib/calendar-api';
|
|
import {
|
|
buildCalendarDays,
|
|
computeFetchWindow,
|
|
formatEventDate,
|
|
formatEventTime,
|
|
formatMonthLabel,
|
|
groupEventsByDate,
|
|
resolveCalendarConfig,
|
|
selectUpcomingEvents,
|
|
WEEKDAY_LABELS,
|
|
} from './calendar-month';
|
|
|
|
// quick-260916-j4f: Breite und Rand-Klemmung des Termin-Tooltips aus einer
|
|
// Quelle, damit Breite und Klemmwert nicht auseinanderlaufen; 288 px
|
|
// entspricht Tailwind w-72.
|
|
const TOOLTIP_WIDTH_PX = 288;
|
|
const TOOLTIP_EDGE_PX = 4;
|
|
|
|
/**
|
|
* Calendar widget (DASH-05, D-10 read-only), neu gebaut nach dem Vorbild des
|
|
* alten persoenlichen Dashboards des Anwenders (quick-260916-htc).
|
|
*
|
|
* Oben ein Monatsraster (Nav-Zeile Zurueck/Monat/Weiter, Wochentagskopf,
|
|
* 42 Zellen ab Montag, Faehrmonatstage gedaempft, heutiger Tag hervorgehoben,
|
|
* Zaehl-Plakette an Tagen mit Terminen, Tooltip beim Ueberfahren), darunter
|
|
* der Block "Naechste Termine". Beide Bloecke lassen sich unabhaengig
|
|
* ein-/ausblenden (Config `showMonth`/`maxEvents`, siehe calendar-month.ts).
|
|
*
|
|
* Der Tooltip wird per `createPortal` in `document.body` gerendert, weil die
|
|
* Karte in widget-wrapper.tsx `overflow-hidden` traegt und ein absolut
|
|
* positionierter Tooltip sonst abgeschnitten wuerde. Titel im Tooltip
|
|
* brechen um (kein truncate); Breite/Klemmung kommen aus
|
|
* `TOOLTIP_WIDTH_PX`/`TOOLTIP_EDGE_PX` (quick-260916-j4f).
|
|
*
|
|
* Das Ladefenster ist IMMER auf lokale Tagesgrenzen gerundet
|
|
* (`computeFetchWindow`), damit der Backend-Cache-Schluessel
|
|
* (`${userId}:${from.toISOString()}:${to.toISOString()}`) ueber den
|
|
* 5-Minuten-Refresh hinweg stabil bleibt — auch wenn die Monatsansicht
|
|
* ausgeblendet ist, deckt das Fenster weiterhin das 42-Tage-Raster des
|
|
* (dann immer heutigen) Monats ab, siehe SUMMARY.
|
|
*
|
|
* Mehrtaegige/ganztaegige Termine werden im Raster nur am Starttag gezaehlt
|
|
* (siehe calendar-month.ts).
|
|
*
|
|
* Refreshes every 5 minutes to match the backend cache TTL.
|
|
* NEVER fetches external calendars directly (RESEARCH anti-pattern).
|
|
*/
|
|
export function CalendarWidget({ config }: WidgetProps) {
|
|
const t = useTranslations('widgets');
|
|
const [events, setEvents] = useState<CalendarEvent[]>([]);
|
|
const [hasSources, setHasSources] = useState<boolean | null>(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [monthDate, setMonthDate] = useState(() => {
|
|
const now = new Date();
|
|
return new Date(now.getFullYear(), now.getMonth(), 1);
|
|
});
|
|
const [hover, setHover] = useState<{
|
|
key: string;
|
|
rect: { top: number; left: number; bottom: number; right: number };
|
|
} | null>(null);
|
|
const intervalRef = useRef<ReturnType<typeof setInterval> | undefined>(undefined);
|
|
|
|
const { showMonth, maxEvents, lookaheadDays } = useMemo(
|
|
() => resolveCalendarConfig(config),
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
[config.showMonth, config.maxEvents, config.lookaheadDays],
|
|
);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
|
|
async function loadData() {
|
|
try {
|
|
// Check if user has any sources configured
|
|
const sources = await fetchSources();
|
|
if (cancelled) return;
|
|
|
|
if (sources.length === 0) {
|
|
setHasSources(false);
|
|
setEvents([]);
|
|
setIsLoading(false);
|
|
return;
|
|
}
|
|
|
|
setHasSources(true);
|
|
|
|
// Fetch aggregated events for the current grid/lookahead window —
|
|
// ALWAYS with both day-boundary ISO strings (T-HTC-03).
|
|
const { from, to } = computeFetchWindow(monthDate, lookaheadDays);
|
|
const eventData = await fetchEvents(from.toISOString(), to.toISOString());
|
|
if (cancelled) return;
|
|
setEvents(eventData);
|
|
} catch {
|
|
// Silent fail — show empty state
|
|
if (!cancelled) {
|
|
setEvents([]);
|
|
}
|
|
} finally {
|
|
if (!cancelled) {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
}
|
|
|
|
loadData();
|
|
|
|
// Refresh every 5 minutes (300000ms) to match backend cache TTL
|
|
intervalRef.current = setInterval(() => {
|
|
loadData();
|
|
}, 300_000);
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
if (intervalRef.current) {
|
|
clearInterval(intervalRef.current);
|
|
}
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [monthDate.getTime(), lookaheadDays]);
|
|
|
|
const showPrev = useCallback(() => {
|
|
setHover(null);
|
|
setMonthDate((d) => new Date(d.getFullYear(), d.getMonth() - 1, 1));
|
|
}, []);
|
|
const showNext = useCallback(() => {
|
|
setHover(null);
|
|
setMonthDate((d) => new Date(d.getFullYear(), d.getMonth() + 1, 1));
|
|
}, []);
|
|
const showToday = useCallback(() => {
|
|
setHover(null);
|
|
const now = new Date();
|
|
setMonthDate(new Date(now.getFullYear(), now.getMonth(), 1));
|
|
}, []);
|
|
|
|
const eventsByDate = useMemo(() => groupEventsByDate(events), [events]);
|
|
const days = useMemo(() => buildCalendarDays(monthDate, eventsByDate), [monthDate, eventsByDate]);
|
|
const upcoming = useMemo(
|
|
() => selectUpcomingEvents(events, lookaheadDays, maxEvents),
|
|
[events, lookaheadDays, maxEvents],
|
|
);
|
|
|
|
// Loading state
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center p-2">
|
|
<span className="text-sm text-muted-foreground">{t('calendar.loading')}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// No sources configured
|
|
if (hasSources === false) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center p-2">
|
|
<span className="text-sm text-muted-foreground">{t('calendar.emptyNoSources')}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Both blocks hidden by configuration
|
|
if (!showMonth && maxEvents === 0) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center p-2">
|
|
<span className="text-sm text-muted-foreground">{t('calendar.nothingSelected')}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const hoverEvents = hover ? (eventsByDate.get(hover.key) ?? []) : [];
|
|
|
|
return (
|
|
<div className="flex h-full flex-col gap-1 overflow-hidden p-1.5">
|
|
{showMonth && (
|
|
<div data-testid="calendar-month" className="flex shrink-0 flex-col gap-1">
|
|
{/* Nav-Zeile */}
|
|
<div className="grid grid-cols-[1fr_1.4fr_1fr] gap-1">
|
|
<button
|
|
type="button"
|
|
className="widgetNoDrag rounded border border-border bg-muted/50 px-1 py-[clamp(2px,0.8cqh,6px)] text-[clamp(10px,2.6cqw,13px)] leading-none text-foreground hover:bg-muted"
|
|
onClick={showPrev}
|
|
>
|
|
{t('calendar.monthPrev')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="widgetNoDrag truncate rounded border border-border bg-muted/50 px-1 py-[clamp(2px,0.8cqh,6px)] text-[clamp(10px,2.6cqw,13px)] font-semibold leading-none text-foreground hover:bg-muted"
|
|
title={t('calendar.monthToday')}
|
|
onClick={showToday}
|
|
>
|
|
{formatMonthLabel(monthDate)}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="widgetNoDrag rounded border border-border bg-muted/50 px-1 py-[clamp(2px,0.8cqh,6px)] text-[clamp(10px,2.6cqw,13px)] leading-none text-foreground hover:bg-muted"
|
|
onClick={showNext}
|
|
>
|
|
{t('calendar.monthNext')}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Wochentagskopf */}
|
|
<div className="grid grid-cols-7 gap-px text-center text-[clamp(9px,2.2cqw,12px)] font-medium text-muted-foreground">
|
|
{WEEKDAY_LABELS.map((label) => (
|
|
<div key={label}>{label}</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Raster */}
|
|
<div className="grid grid-cols-7 gap-px">
|
|
{days.map((day) => {
|
|
const hasEvents = day.events.length > 0;
|
|
const cellClass = [
|
|
'widgetNoDrag relative flex min-h-[clamp(16px,5.5cqh,40px)] items-start rounded bg-muted/50 px-1 py-0.5 text-[clamp(9px,2.4cqw,13px)] leading-none',
|
|
day.inCurrentMonth ? 'text-foreground' : 'text-muted-foreground/60',
|
|
day.isToday ? 'ring-1 ring-primary font-semibold text-primary' : '',
|
|
hasEvents ? 'cursor-default hover:bg-muted' : '',
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
|
|
return (
|
|
<div
|
|
key={day.key}
|
|
data-testid="calendar-day"
|
|
data-date={day.key}
|
|
data-today={day.isToday || undefined}
|
|
data-outside={!day.inCurrentMonth || undefined}
|
|
className={cellClass}
|
|
onMouseEnter={(e) =>
|
|
hasEvents &&
|
|
setHover({ key: day.key, rect: e.currentTarget.getBoundingClientRect() })
|
|
}
|
|
onMouseLeave={() => setHover(null)}
|
|
>
|
|
<span>{day.date.getDate()}</span>
|
|
{hasEvents && (
|
|
<span
|
|
data-testid="calendar-day-count"
|
|
className="absolute bottom-px right-px flex h-[clamp(10px,3cqw,16px)] min-w-[clamp(10px,3cqw,16px)] items-center justify-center rounded-full bg-primary px-0.5 text-[clamp(7px,1.8cqw,10px)] font-semibold leading-none text-primary-foreground"
|
|
>
|
|
{day.events.length}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{maxEvents > 0 && (
|
|
<section className="flex min-h-0 flex-1 flex-col gap-1">
|
|
<h3 className="shrink-0 text-[clamp(10px,2.6cqw,13px)] font-semibold text-foreground">
|
|
{t('calendar.upcomingTitle')}
|
|
</h3>
|
|
{upcoming.length === 0 ? (
|
|
<p className="text-[clamp(9px,2.2cqw,12px)] text-muted-foreground">
|
|
{t('calendar.emptyNoEvents')}
|
|
</p>
|
|
) : (
|
|
<ul data-testid="calendar-upcoming" className="min-h-0 flex-1 space-y-1 overflow-y-auto">
|
|
{upcoming.map((event) => (
|
|
<li key={event.id} className="flex items-start gap-2 rounded bg-muted/50 px-2 py-1">
|
|
<span
|
|
data-testid="event-color-dot"
|
|
className="mt-1 h-2 w-2 shrink-0 rounded-full"
|
|
style={{ backgroundColor: event.color || 'var(--muted-foreground)' }}
|
|
aria-hidden="true"
|
|
/>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-[clamp(9px,2.2cqw,12px)] text-muted-foreground">
|
|
{formatEventDate(event)}
|
|
</p>
|
|
<p className="truncate text-[clamp(10px,2.5cqw,14px)] font-semibold text-foreground">
|
|
{event.title}
|
|
</p>
|
|
{event.location && (
|
|
<p className="truncate text-[clamp(9px,2.1cqw,12px)] text-muted-foreground">
|
|
{event.location}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
)}
|
|
|
|
{hover !== null &&
|
|
typeof document !== 'undefined' &&
|
|
createPortal(
|
|
<div
|
|
data-testid="calendar-day-tooltip"
|
|
role="tooltip"
|
|
className="pointer-events-none fixed z-50 rounded border border-border bg-card p-2 text-xs text-foreground shadow-lg"
|
|
style={{
|
|
width: TOOLTIP_WIDTH_PX,
|
|
top: hover.rect.bottom + TOOLTIP_EDGE_PX,
|
|
left: Math.max(
|
|
TOOLTIP_EDGE_PX,
|
|
Math.min(hover.rect.left, window.innerWidth - TOOLTIP_WIDTH_PX - TOOLTIP_EDGE_PX),
|
|
),
|
|
}}
|
|
>
|
|
{hoverEvents.slice(0, 5).map((event) => (
|
|
<div key={event.id} className="flex gap-2">
|
|
<span className="shrink-0 tabular-nums text-muted-foreground">
|
|
{event.allDay ? t('calendar.allDay') : formatEventTime(event.start)}
|
|
</span>
|
|
<span className="min-w-0 break-words">{event.title}</span>
|
|
</div>
|
|
))}
|
|
{hoverEvents.length > 5 && (
|
|
<div className="mt-1 text-muted-foreground">{t('calendar.tooltipMore')}</div>
|
|
)}
|
|
</div>,
|
|
document.body,
|
|
)}
|
|
</div>
|
|
);
|
|
}
|