schalli/tessera-ctl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 14 Wiki Activity

feat(web): CalendarConfig im Einstellungsfeld, Changelog- und Handbuch-Eintrag

Browse Source 
- Kalender-Zweig im Einstellungsfeld ersetzt den englischen Fliesstext durch CalendarConfig (Monatsansicht ein/aus, Anzahl Termine 0..10, Zeitraum 7/14/30/60/90) nach Muster ClockConfig; Speichern per partiellem updateWidgetConfig
- Paneltest um drei Kalender-Tests erweitert (7/7 gruen), next-intl-Mock interpoliert jetzt {platzhalter}
- CHANGELOG.md: zweiter Eintrag unter Unveroeffentlicht/Geaendert; Anwenderhandbuch: Widget-Tabellenzeile und Dashboard-Widgets-Absatz ergaenzt
- Gesamtlauf: 51 Testdateien / 332 Tests gruen, Type-Check Exit 0 (quick-260916-htc)

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Schalli
2026-09-16 13:12:48 +02:00
parent 61996dceef
commit 6d8c7c46a8
4 changed files with 177 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/settings/widget-settings-panel.test.tsx
+78 -1
View File
@@ -19,7 +19,12 @@ vi.mock('next-intl', async () => {
| string
| undefined;
return {
useTranslations: (ns?: string) => (key: string) => lookup(ns ? `${ns}.${key}` : key) ?? key,
useTranslations:
(ns?: string) =>
(key: string, values?: Record<string, unknown>) => {
const raw = lookup(ns ? `${ns}.${key}` : key) ?? key;
return values ? raw.replace(/\{(\w+)\}/g, (_: string, n: string) => String(values[n] ?? '')) : raw;
},
};
});
@@ -36,6 +41,7 @@ vi.mock('@/components/settings/search-provider-form', () => ({
}));
const clockTexts = (de as { widgets: { clock: Record<string, string> } }).widgets.clock;
const cal = (de as { widgets: { calendar: Record<string, string> } }).widgets.calendar;
const WIDGET = { id: 'c1', widgetType: 'clock', config: { timezone: 'Europe/Berlin', timeFontSizePt: 24 } };
@@ -105,3 +111,74 @@ describe('WidgetSettingsPanel — Schriftgroesse der Uhrzeit (quick-260916-bwo)'
expect(screen.getByRole('alert')).toBeInTheDocument();
});
});
describe('WidgetSettingsPanel — Kalender-Einstellungen (quick-260916-htc)', () => {
function renderCalendarExpanded(config: Record<string, unknown> = {}) {
const onWidgetUpdate = vi.fn();
const widget = { id: 'k1', widgetType: 'calendar', config };
render(<WidgetSettingsPanel widgets={[widget]} onWidgetUpdate={onWidgetUpdate} />);
fireEvent.click(screen.getByRole('button', { name: /Kalender #1/ }));
return { onWidgetUpdate };
}
it('Test 5: Vorbelegung aus der Konfiguration, Optionslisten und uebersetzte Link-Zeile', () => {
renderCalendarExpanded();
const showMonth = screen.getByLabelText(cal.configShowMonth) as HTMLInputElement;
expect(showMonth.checked).toBe(true);
const maxEventsSelect = screen.getByLabelText(cal.configMaxEvents) as HTMLSelectElement;
expect(maxEventsSelect.value).toBe('3');
const maxEventsOptionTexts = Array.from(maxEventsSelect.options).map((o) => o.textContent);
expect(maxEventsOptionTexts).toEqual([
cal.configMaxEventsNone,
cal.configMaxEventsOne,
...Array.from({ length: 9 }, (_, i) => cal.configMaxEventsMany.replace('{count}', String(i + 2))),
]);
const lookaheadSelect = screen.getByLabelText(cal.configLookahead) as HTMLSelectElement;
expect(lookaheadSelect.value).toBe('30');
const lookaheadOptionTexts = Array.from(lookaheadSelect.options).map((o) => o.textContent);
expect(lookaheadOptionTexts).toEqual(
[7, 14, 30, 60, 90].map((days) => cal.configLookaheadOption.replace('{days}', String(days))),
);
expect(screen.getByText(cal.configSourcesHint)).toBeInTheDocument();
const link = screen.getByRole('link', { name: cal.configSourcesLink });
expect(link).toHaveAttribute('href', '/settings/dashboard/calendar');
expect(screen.queryByText(/managed under/)).not.toBeInTheDocument();
});
it('Test 6: jede Aenderung ruft updateWidgetConfig/onWidgetUpdate nur mit dem geaenderten Feld auf', async () => {
const { onWidgetUpdate } = renderCalendarExpanded();
fireEvent.change(screen.getByLabelText(cal.configMaxEvents), { target: { value: '5' } });
await vi.waitFor(() => expect(onWidgetUpdate).toHaveBeenCalledWith('k1', { maxEvents: 5 }));
expect(updateWidgetConfig).toHaveBeenCalledWith('k1', { maxEvents: 5 });
fireEvent.change(screen.getByLabelText(cal.configLookahead), { target: { value: '14' } });
await vi.waitFor(() => expect(onWidgetUpdate).toHaveBeenCalledWith('k1', { lookaheadDays: 14 }));
expect(updateWidgetConfig).toHaveBeenCalledWith('k1', { lookaheadDays: 14 });
fireEvent.click(screen.getByLabelText(cal.configShowMonth));
await vi.waitFor(() => expect(onWidgetUpdate).toHaveBeenCalledWith('k1', { showMonth: false }));
expect(updateWidgetConfig).toHaveBeenCalledWith('k1', { showMonth: false });
expect(updateWidgetConfig).toHaveBeenCalledTimes(3);
});
it('Test 7: bestehende Werte werden angezeigt, ungueltige Werte geklemmt', () => {
renderCalendarExpanded({ showMonth: false, maxEvents: 7, lookaheadDays: 60 });
expect((screen.getByLabelText(cal.configShowMonth) as HTMLInputElement).checked).toBe(false);
expect((screen.getByLabelText(cal.configMaxEvents) as HTMLSelectElement).value).toBe('7');
expect((screen.getByLabelText(cal.configLookahead) as HTMLSelectElement).value).toBe('60');
cleanup();
renderCalendarExpanded({ maxEvents: 42, lookaheadDays: 45 });
expect((screen.getByLabelText(cal.configMaxEvents) as HTMLSelectElement).value).toBe('10');
expect((screen.getByLabelText(cal.configLookahead) as HTMLSelectElement).value).toBe('30');
});
});
apps/web/src/components/settings/widget-settings-panel.tsx
+96 -13
View File
@@ -11,6 +11,11 @@ import {
CLOCK_FONT_SIZE_MIN_PT,
resolveClockTimeFontSizePt,
} from '@/components/dashboard/widgets/clock-font-size';
import {
CALENDAR_LOOKAHEAD_OPTIONS,
CALENDAR_MAX_EVENTS_LIMIT,
resolveCalendarConfig,
} from '@/components/dashboard/widgets/calendar-month';
/**
* IANA timezones offered for clock configuration (D-12).
@@ -170,20 +175,14 @@ export function WidgetSettingsPanel({
/>
)}
{/* Calendar config — managed elsewhere */}
{/* Calendar config (quick-260916-htc) */}
{widget.widgetType === 'calendar' && (
<div className="text-sm text-muted-foreground">
<p>
Calendar sources are managed under{' '}
<Link
href="/settings/dashboard/calendar"
className="text-primary underline hover:text-primary/90"
>
Settings &gt; Dashboard &gt; Calendar
</Link>
.
</p>
</div>
<CalendarConfig
config={widget.config}
onChange={(cfg) =>
handleConfigChange(widget.id, cfg)
}
/>
)}
</div>
)}
@@ -317,6 +316,90 @@ function ClockConfig({
);
}
function CalendarConfig({
config,
onChange,
}: {
config: Record<string, unknown>;
onChange: (cfg: Record<string, unknown>) => void;
}) {
const t = useTranslations('widgets');
const { showMonth, maxEvents, lookaheadDays } = resolveCalendarConfig(config);
const maxEventsOptions = Array.from({ length: CALENDAR_MAX_EVENTS_LIMIT + 1 }, (_, n) => n);
return (
<div className="space-y-4">
{/* Monatsansicht ein-/ausblenden */}
<div className="flex items-center gap-3">
<input
id="calendar-show-month"
type="checkbox"
className="h-4 w-4 rounded border-border text-primary"
checked={showMonth}
onChange={(e) => onChange({ showMonth: e.target.checked })}
/>
<label htmlFor="calendar-show-month" className="text-sm text-foreground">
{t('calendar.configShowMonth')}
</label>
</div>
{/* Anzahl der angezeigten Termine */}
<div>
<label htmlFor="calendar-max-events" className="mb-1 block text-sm text-foreground">
{t('calendar.configMaxEvents')}
</label>
<select
id="calendar-max-events"
className="h-9 w-full max-w-xs rounded border border-border bg-background px-3 text-sm text-foreground"
value={String(maxEvents)}
onChange={(e) => onChange({ maxEvents: Number(e.target.value) })}
>
{maxEventsOptions.map((n) => (
<option key={n} value={String(n)}>
{n === 0
? t('calendar.configMaxEventsNone')
: n === 1
? t('calendar.configMaxEventsOne')
: t('calendar.configMaxEventsMany', { count: n })}
</option>
))}
</select>
</div>
{/* Zeitraum der angezeigten Termine */}
<div>
<label htmlFor="calendar-lookahead" className="mb-1 block text-sm text-foreground">
{t('calendar.configLookahead')}
</label>
<select
id="calendar-lookahead"
className="h-9 w-full max-w-xs rounded border border-border bg-background px-3 text-sm text-foreground"
value={String(lookaheadDays)}
onChange={(e) => onChange({ lookaheadDays: Number(e.target.value) })}
>
{CALENDAR_LOOKAHEAD_OPTIONS.map((days) => (
<option key={days} value={String(days)}>
{t('calendar.configLookaheadOption', { days })}
</option>
))}
</select>
</div>
{/* Hinweis auf die Kalenderquellenverwaltung */}
<p className="text-xs text-muted-foreground">
{t('calendar.configSourcesHint')}{' '}
<Link
href="/settings/dashboard/calendar"
className="text-primary underline hover:text-primary/90"
>
{t('calendar.configSourcesLink')}
</Link>
</p>
</div>
);
}
function NoteConfig({
config,
onChange,