feat(quick-260923-ad9): Reiterleiste in der Oberflaeche - Task 3
dashboard-api.ts: fuenf neue Abrufe fuer die Reiter-Wege, die vier bestehenden Aufrufe (Layout/Widgets lesen/schreiben) tragen jetzt die Reiter-Kennung (Abfrageparameter bzw. Rumpf). dashboard-store.ts: Zustand um dashboards/activeDashboardId/ isSwitchingDashboard erweitert. loadDashboard() holt zuerst die Reiter, macht den ersten aktiv, laedt erst danach dessen Inhalt; ein modul-globales Versprechen schuetzt gegen doppeltes Laden der Reiterliste bei doppeltem Einhaengen. selectDashboard() schreibt eine ungespeicherte Anordnung ZUERST fuer den alten Reiter (Kennung vor dem Wechsel gelesen) und ersetzt danach Kacheln/Anordnung vollstaendig. createDashboard/renameDashboard/ deleteDashboard pflegen Reiterliste und aktiven Reiter; Loeschen des aktiven Reiters macht den dann ersten Reiter aktiv. Die Marker-Umrechnung (quick-260916-bwo) laeuft unveraendert je Reiter mit, auch beim Wechsel. dashboard-tabs.tsx (neu): Reiterleiste, Klick wechselt immer; im Bearbeitungsmodus zusaetzlich Anlegen, Umbenennen (an Ort und Stelle, Enter/Escape) und Loeschen (mit Rueckfrage) - Loeschen-Knopf fehlt beim letzten verbleibenden Reiter (D-10). Fokus beim Umbenennen ueber einen Ref statt autoFocus (lint/a11y/noAutofocus). (portal)/page.tsx: Leiste ueber dem Raster, kurze Ladezeile waehrend eines Reiterwechsels statt des Rasters - die Leiste bleibt stehen. DashboardGrid selbst unveraendert (D-06). Uebersetzungen: neue Schluessel unter widgets.tabs.* in de.json/en.json, Dialog-Knoepfe nutzen die vorhandenen common.cancel/common.delete. Deviations (Rule 3 - blockierende Nachwirkung dieses Tasks, ausserhalb der files_modified-Liste, aber direkt durch die dashboardId-Pflicht verursacht): - settings/dashboard/page.tsx: fetchWidgets() verlangt jetzt eine Reiter-Kennung; die Seite ist nicht reiterbewusst (ausserhalb des Umfangs) und zeigt jetzt die Kacheln des ERSTEN Reiters - deckungsgleich mit dem bisherigen Verhalten fuer den haeufigen Fall genau eines Reiters. - (portal)/page.test.tsx: mockStore brauchte die neuen Reiter-Felder/ -Methoden, sonst waere DashboardTabs auf `dashboards.map` von undefined gescheitert. Tests: dashboard-store.test.ts 15 (6 alte angepasste Signaturen + 9 neue), dashboard-tabs.test.tsx 12 (neu). web gesamt 682 Tests in 82 Dateien, dashboard-grid.test.tsx unveraendert bei 12. type-check 4/4, lint 5/5 mit weiterhin genau 53 Warnungen in web. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -5,44 +5,105 @@
|
||||
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
|
||||
|
||||
export async function fetchLayout(): Promise<Record<string, unknown>> {
|
||||
const res = await fetch(`${API_URL}/dashboard/layout`, {
|
||||
// --- Reiter (quick-260923-ad9) ---------------------------------------------
|
||||
|
||||
export interface DashboardTab {
|
||||
id: string;
|
||||
name: string;
|
||||
position: number;
|
||||
}
|
||||
|
||||
export async function fetchDashboards(): Promise<DashboardTab[]> {
|
||||
const res = await fetch(`${API_URL}/dashboard/tabs`, {
|
||||
credentials: 'include',
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to fetch dashboards');
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function createDashboardTab(): Promise<DashboardTab> {
|
||||
const res = await fetch(`${API_URL}/dashboard/tabs`, {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to create dashboard');
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function renameDashboardTab(id: string, name: string): Promise<DashboardTab> {
|
||||
const res = await fetch(`${API_URL}/dashboard/tabs/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ name }),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to rename dashboard');
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function deleteDashboardTab(id: string): Promise<void> {
|
||||
const res = await fetch(`${API_URL}/dashboard/tabs/${id}`, {
|
||||
method: 'DELETE',
|
||||
credentials: 'include',
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to delete dashboard');
|
||||
}
|
||||
|
||||
export async function reorderDashboardTabs(ids: string[]): Promise<DashboardTab[]> {
|
||||
const res = await fetch(`${API_URL}/dashboard/tabs/order`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ ids }),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to reorder dashboards');
|
||||
return res.json();
|
||||
}
|
||||
|
||||
// --- Anordnung und Kacheln — je Reiter (quick-260923-ad9) ------------------
|
||||
|
||||
export async function fetchLayout(dashboardId: string): Promise<Record<string, unknown>> {
|
||||
const res = await fetch(
|
||||
`${API_URL}/dashboard/layout?dashboardId=${encodeURIComponent(dashboardId)}`,
|
||||
{ credentials: 'include' },
|
||||
);
|
||||
if (!res.ok) throw new Error('Failed to fetch layout');
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function saveLayout(
|
||||
dashboardId: string,
|
||||
layouts: Record<string, unknown>,
|
||||
): Promise<void> {
|
||||
const res = await fetch(`${API_URL}/dashboard/layout`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ layouts }),
|
||||
body: JSON.stringify({ dashboardId, layouts }),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to save layout');
|
||||
}
|
||||
|
||||
export async function fetchWidgets(): Promise<
|
||||
Array<{ id: string; widgetType: string; config: Record<string, unknown> }>
|
||||
> {
|
||||
const res = await fetch(`${API_URL}/dashboard/widgets`, {
|
||||
credentials: 'include',
|
||||
});
|
||||
export async function fetchWidgets(
|
||||
dashboardId: string,
|
||||
): Promise<Array<{ id: string; widgetType: string; config: Record<string, unknown> }>> {
|
||||
const res = await fetch(
|
||||
`${API_URL}/dashboard/widgets?dashboardId=${encodeURIComponent(dashboardId)}`,
|
||||
{ credentials: 'include' },
|
||||
);
|
||||
if (!res.ok) throw new Error('Failed to fetch widgets');
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function addWidget(
|
||||
dashboardId: string,
|
||||
widgetType: string,
|
||||
): Promise<{ id: string; widgetType: string; config: Record<string, unknown> }> {
|
||||
const res = await fetch(`${API_URL}/dashboard/widgets`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ widgetType }),
|
||||
body: JSON.stringify({ dashboardId, widgetType }),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to add widget');
|
||||
return res.json();
|
||||
|
||||
@@ -1,17 +1,31 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
/**
|
||||
* dashboard-store.test — NEU (quick-260916-bwo, feineres Dashboard-Raster).
|
||||
* dashboard-store.test — quick-260916-bwo (Marker-Umrechnung) + erweitert um
|
||||
* quick-260923-ad9 (Task 3, Dashboard-Reiter).
|
||||
*
|
||||
* Sechs Tests fuer die Anbindung der einmaligen Umrechnung im Store:
|
||||
* `loadDashboard` rechnet alte Anordnungen um und speichert SOFORT mit
|
||||
* Marker; `saveLayout` traegt den Marker bei JEDEM Speichern (T-BWO-02 —
|
||||
* fehlt er, wuerde das naechste Laden erneut verdoppeln); der Zustand
|
||||
* selbst bleibt markerfrei (der Store iteriert mit Object.keys ueber die
|
||||
* Breakpoints); `addWidget` legt neue Eintraege in den verdoppelten
|
||||
* Vorgabegroessen an. Der Store hatte bisher keine Testdatei.
|
||||
* Sechs Tests (1-6) pinnen weiterhin die Anbindung der einmaligen
|
||||
* Umrechnung im Store — `loadDashboard`/`selectDashboard` rechnen alte
|
||||
* Anordnungen um und speichern SOFORT mit Marker; `saveLayout` traegt den
|
||||
* Marker bei JEDEM Speichern (T-BWO-02); der Zustand selbst bleibt
|
||||
* markerfrei; `addWidget` legt neue Eintraege in den verdoppelten
|
||||
* Vorgabegroessen an. Signaturen sind an die Reiter-Kennung angepasst
|
||||
* (`fetchLayout(dashboardId)`, `saveLayout(dashboardId, layouts)`,
|
||||
* `addWidget(dashboardId, widgetType)`), das gepruefte Verhalten ist
|
||||
* dasselbe.
|
||||
*
|
||||
* Ab Test 7: Reiter-Verwaltung — Laden holt zuerst die Reiterliste, macht
|
||||
* den ersten aktiv und laedt erst danach dessen Inhalt; ein Reiterwechsel
|
||||
* schreibt eine ungespeicherte Anordnung zuerst fuer den ALTEN Reiter;
|
||||
* Anlegen/Umbenennen/Loeschen pflegen die Reiterliste und den aktiven
|
||||
* Reiter.
|
||||
*/
|
||||
vi.mock('@/lib/dashboard-api', () => ({
|
||||
fetchDashboards: vi.fn(),
|
||||
createDashboardTab: vi.fn(),
|
||||
renameDashboardTab: vi.fn(),
|
||||
deleteDashboardTab: vi.fn(),
|
||||
reorderDashboardTabs: vi.fn(),
|
||||
fetchLayout: vi.fn(),
|
||||
fetchWidgets: vi.fn(),
|
||||
saveLayout: vi.fn(),
|
||||
@@ -25,9 +39,14 @@ import * as api from '@/lib/dashboard-api';
|
||||
const { useDashboardStore } = await import('./dashboard-store');
|
||||
|
||||
const EMPTY = { lg: [], md: [], sm: [], xs: [], xxs: [] };
|
||||
const DASH_1 = { id: 'dash-1', name: 'Dashboard', position: 0 };
|
||||
const DASH_2 = { id: 'dash-2', name: 'Dashboard 2', position: 1 };
|
||||
|
||||
beforeEach(() => {
|
||||
useDashboardStore.setState({
|
||||
dashboards: [],
|
||||
activeDashboardId: null,
|
||||
isSwitchingDashboard: false,
|
||||
layouts: { lg: [], md: [], sm: [], xs: [], xxs: [] },
|
||||
widgets: [],
|
||||
isEditMode: false,
|
||||
@@ -36,7 +55,9 @@ beforeEach(() => {
|
||||
error: null,
|
||||
});
|
||||
vi.clearAllMocks();
|
||||
vi.mocked(api.fetchDashboards).mockResolvedValue([DASH_1]);
|
||||
vi.mocked(api.fetchWidgets).mockResolvedValue([]);
|
||||
vi.mocked(api.fetchLayout).mockResolvedValue({ ...EMPTY });
|
||||
vi.mocked(api.saveLayout).mockResolvedValue(undefined);
|
||||
});
|
||||
|
||||
@@ -45,7 +66,7 @@ afterEach(() => {
|
||||
});
|
||||
|
||||
describe('dashboard-store — einmalige Umrechnung mit Marker (quick-260916-bwo)', () => {
|
||||
it('Test 1: alte Anordnung wird beim Laden umgerechnet und SOFORT mit Marker gespeichert', async () => {
|
||||
it('Test 1: alte Anordnung wird beim Laden umgerechnet und SOFORT fuer den ersten Reiter mit Marker gespeichert', async () => {
|
||||
vi.mocked(api.fetchLayout).mockResolvedValue({
|
||||
lg: [{ i: 'a', x: 1, y: 1, w: 2, h: 2 }], md: [], sm: [], xs: [], xxs: [],
|
||||
});
|
||||
@@ -57,6 +78,7 @@ describe('dashboard-store — einmalige Umrechnung mit Marker (quick-260916-bwo)
|
||||
expect(Object.keys(state.layouts)).not.toContain('__gridVersion');
|
||||
expect(api.saveLayout).toHaveBeenCalledTimes(1);
|
||||
expect(api.saveLayout).toHaveBeenCalledWith(
|
||||
'dash-1',
|
||||
expect.objectContaining({ __gridVersion: 2, lg: [{ i: 'a', x: 2, y: 2, w: 4, h: 4 }] }),
|
||||
);
|
||||
expect(state.isDirty).toBe(false);
|
||||
@@ -86,7 +108,10 @@ describe('dashboard-store — einmalige Umrechnung mit Marker (quick-260916-bwo)
|
||||
expect(useDashboardStore.getState().layouts).toEqual(EMPTY);
|
||||
});
|
||||
|
||||
it('Test 4: jedes Speichern traegt den Marker (T-BWO-02), der Zustand bleibt markerfrei', async () => {
|
||||
it('Test 4: jedes Speichern traegt den Marker (T-BWO-02) unter der aktiven Reiter-Kennung, der Zustand bleibt markerfrei', async () => {
|
||||
await useDashboardStore.getState().loadDashboard();
|
||||
vi.mocked(api.saveLayout).mockClear();
|
||||
|
||||
const layouts = { lg: [{ i: 'a', x: 2, y: 2, w: 4, h: 4 }], md: [], sm: [], xs: [], xxs: [] };
|
||||
useDashboardStore.getState().updateLayouts(layouts);
|
||||
expect(useDashboardStore.getState().isDirty).toBe(true);
|
||||
@@ -94,7 +119,10 @@ describe('dashboard-store — einmalige Umrechnung mit Marker (quick-260916-bwo)
|
||||
await useDashboardStore.getState().saveLayout();
|
||||
|
||||
expect(api.saveLayout).toHaveBeenCalledTimes(1);
|
||||
expect(api.saveLayout).toHaveBeenCalledWith(expect.objectContaining({ __gridVersion: 2, ...layouts }));
|
||||
expect(api.saveLayout).toHaveBeenCalledWith(
|
||||
'dash-1',
|
||||
expect.objectContaining({ __gridVersion: 2, ...layouts }),
|
||||
);
|
||||
expect(useDashboardStore.getState().isDirty).toBe(false);
|
||||
expect(Object.keys(useDashboardStore.getState().layouts)).not.toContain('__gridVersion');
|
||||
});
|
||||
@@ -115,13 +143,148 @@ describe('dashboard-store — einmalige Umrechnung mit Marker (quick-260916-bwo)
|
||||
expect(errorSpy).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('Test 6: neues Widget wird in den neuen (verdoppelten) Vorgabegroessen angelegt', async () => {
|
||||
it('Test 6: neues Widget wird in den neuen (verdoppelten) Vorgabegroessen fuer den aktiven Reiter angelegt', async () => {
|
||||
await useDashboardStore.getState().loadDashboard();
|
||||
vi.mocked(api.addWidget).mockResolvedValue({ id: 'n1', widgetType: 'clock', config: {} });
|
||||
|
||||
await useDashboardStore.getState().addWidget('clock');
|
||||
|
||||
const state = useDashboardStore.getState();
|
||||
expect(api.addWidget).toHaveBeenCalledWith('dash-1', 'clock');
|
||||
expect(state.layouts.lg).toContainEqual({ i: 'n1', x: 0, y: 0, w: 4, h: 4 });
|
||||
expect(state.isDirty).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('dashboard-store — Reiter laden (quick-260923-ad9, Task 3)', () => {
|
||||
it('Test 7: holt zuerst die Reiterliste, macht den ERSTEN aktiv und laedt erst danach dessen Kacheln und Anordnung', async () => {
|
||||
vi.mocked(api.fetchDashboards).mockResolvedValue([DASH_1, DASH_2]);
|
||||
const callOrder: string[] = [];
|
||||
vi.mocked(api.fetchDashboards).mockImplementation(async () => {
|
||||
callOrder.push('tabs');
|
||||
return [DASH_1, DASH_2];
|
||||
});
|
||||
vi.mocked(api.fetchLayout).mockImplementation(async () => {
|
||||
callOrder.push('layout');
|
||||
return { ...EMPTY };
|
||||
});
|
||||
vi.mocked(api.fetchWidgets).mockImplementation(async () => {
|
||||
callOrder.push('widgets');
|
||||
return [];
|
||||
});
|
||||
|
||||
await useDashboardStore.getState().loadDashboard();
|
||||
|
||||
expect(callOrder[0]).toBe('tabs');
|
||||
expect(callOrder.slice(1).sort()).toEqual(['layout', 'widgets']);
|
||||
expect(api.fetchLayout).toHaveBeenCalledWith('dash-1');
|
||||
expect(api.fetchWidgets).toHaveBeenCalledWith('dash-1');
|
||||
expect(useDashboardStore.getState().activeDashboardId).toBe('dash-1');
|
||||
expect(useDashboardStore.getState().dashboards).toEqual([DASH_1, DASH_2]);
|
||||
});
|
||||
|
||||
it('Test 8: zweimaliges Aufrufen von loadDashboard hintereinander loest nur EINEN Abruf der Reiterliste aus', async () => {
|
||||
const first = useDashboardStore.getState().loadDashboard();
|
||||
const second = useDashboardStore.getState().loadDashboard();
|
||||
|
||||
await Promise.all([first, second]);
|
||||
|
||||
expect(api.fetchDashboards).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('dashboard-store — Reiterwechsel (quick-260923-ad9, Task 3)', () => {
|
||||
it('Test 9: ein Wechsel mit ungespeicherter Anordnung schreibt die Anordnung ZUERST fuer den ALTEN Reiter', async () => {
|
||||
vi.mocked(api.fetchDashboards).mockResolvedValue([DASH_1, DASH_2]);
|
||||
await useDashboardStore.getState().loadDashboard();
|
||||
useDashboardStore.getState().updateLayouts({ lg: [{ i: 'x', x: 0, y: 0, w: 1, h: 1 }], md: [], sm: [], xs: [], xxs: [] });
|
||||
vi.mocked(api.saveLayout).mockClear();
|
||||
vi.mocked(api.fetchLayout).mockResolvedValue({ ...EMPTY });
|
||||
vi.mocked(api.fetchWidgets).mockResolvedValue([]);
|
||||
|
||||
await useDashboardStore.getState().selectDashboard('dash-2');
|
||||
|
||||
expect(api.saveLayout).toHaveBeenCalledWith('dash-1', expect.anything());
|
||||
expect(useDashboardStore.getState().activeDashboardId).toBe('dash-2');
|
||||
});
|
||||
|
||||
it('Test 10: nach dem Wechsel stehen im Zustand AUSSCHLIESSLICH Kacheln und Anordnung des neuen Reiters', async () => {
|
||||
vi.mocked(api.fetchDashboards).mockResolvedValue([DASH_1, DASH_2]);
|
||||
await useDashboardStore.getState().loadDashboard();
|
||||
|
||||
vi.mocked(api.fetchLayout).mockResolvedValue({
|
||||
lg: [{ i: 'only-on-dash-2', x: 0, y: 0, w: 2, h: 2 }], md: [], sm: [], xs: [], xxs: [], __gridVersion: 2,
|
||||
});
|
||||
vi.mocked(api.fetchWidgets).mockResolvedValue([{ id: 'w-on-dash-2', widgetType: 'clock', config: {} }]);
|
||||
|
||||
await useDashboardStore.getState().selectDashboard('dash-2');
|
||||
|
||||
const state = useDashboardStore.getState();
|
||||
expect(state.widgets).toEqual([{ id: 'w-on-dash-2', widgetType: 'clock', config: {} }]);
|
||||
expect(state.layouts.lg).toEqual([{ i: 'only-on-dash-2', x: 0, y: 0, w: 2, h: 2 }]);
|
||||
});
|
||||
|
||||
it('Test 11: ein Wechsel auf den bereits aktiven Reiter tut nichts', async () => {
|
||||
await useDashboardStore.getState().loadDashboard();
|
||||
vi.mocked(api.fetchLayout).mockClear();
|
||||
vi.mocked(api.fetchWidgets).mockClear();
|
||||
|
||||
await useDashboardStore.getState().selectDashboard('dash-1');
|
||||
|
||||
expect(api.fetchLayout).not.toHaveBeenCalled();
|
||||
expect(api.fetchWidgets).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('dashboard-store — Reiter anlegen/umbenennen/loeschen (quick-260923-ad9, Task 3)', () => {
|
||||
it('Test 12: createDashboard haengt den neuen Reiter hinten an, macht ihn aktiv, die Kachelflaeche ist leer', async () => {
|
||||
await useDashboardStore.getState().loadDashboard();
|
||||
vi.mocked(api.createDashboardTab).mockResolvedValue(DASH_2);
|
||||
vi.mocked(api.fetchLayout).mockResolvedValue({ ...EMPTY });
|
||||
vi.mocked(api.fetchWidgets).mockResolvedValue([]);
|
||||
|
||||
await useDashboardStore.getState().createDashboard();
|
||||
|
||||
const state = useDashboardStore.getState();
|
||||
expect(state.dashboards.map((d) => d.id)).toEqual(['dash-1', 'dash-2']);
|
||||
expect(state.activeDashboardId).toBe('dash-2');
|
||||
expect(state.widgets).toEqual([]);
|
||||
});
|
||||
|
||||
it('Test 13: renameDashboard aktualisiert den Namen in der Reiterliste', async () => {
|
||||
await useDashboardStore.getState().loadDashboard();
|
||||
vi.mocked(api.renameDashboardTab).mockResolvedValue({ id: 'dash-1', name: 'Finanzen', position: 0 });
|
||||
|
||||
await useDashboardStore.getState().renameDashboard('dash-1', 'Finanzen');
|
||||
|
||||
expect(useDashboardStore.getState().dashboards[0].name).toBe('Finanzen');
|
||||
});
|
||||
|
||||
it('Test 14: deleteDashboard des AKTIVEN Reiters macht den dann ersten verbleibenden Reiter aktiv und laedt dessen Inhalt', async () => {
|
||||
vi.mocked(api.fetchDashboards).mockResolvedValue([DASH_1, DASH_2]);
|
||||
await useDashboardStore.getState().loadDashboard();
|
||||
vi.mocked(api.deleteDashboardTab).mockResolvedValue(undefined);
|
||||
vi.mocked(api.fetchLayout).mockResolvedValue({ ...EMPTY });
|
||||
vi.mocked(api.fetchWidgets).mockResolvedValue([{ id: 'w-on-dash-2', widgetType: 'clock', config: {} }]);
|
||||
|
||||
await useDashboardStore.getState().deleteDashboard('dash-1');
|
||||
|
||||
const state = useDashboardStore.getState();
|
||||
expect(state.dashboards.map((d) => d.id)).toEqual(['dash-2']);
|
||||
expect(state.activeDashboardId).toBe('dash-2');
|
||||
expect(state.widgets).toEqual([{ id: 'w-on-dash-2', widgetType: 'clock', config: {} }]);
|
||||
});
|
||||
|
||||
it('Test 15: deleteDashboard eines INAKTIVEN Reiters aendert den aktiven Reiter nicht', async () => {
|
||||
vi.mocked(api.fetchDashboards).mockResolvedValue([DASH_1, DASH_2]);
|
||||
await useDashboardStore.getState().loadDashboard();
|
||||
vi.mocked(api.deleteDashboardTab).mockResolvedValue(undefined);
|
||||
vi.mocked(api.fetchLayout).mockClear();
|
||||
|
||||
await useDashboardStore.getState().deleteDashboard('dash-2');
|
||||
|
||||
expect(useDashboardStore.getState().activeDashboardId).toBe('dash-1');
|
||||
expect(useDashboardStore.getState().dashboards.map((d) => d.id)).toEqual(['dash-1']);
|
||||
expect(api.fetchLayout).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { create } from 'zustand';
|
||||
import * as api from '@/lib/dashboard-api';
|
||||
import type { DashboardTab } from '@/lib/dashboard-api';
|
||||
import type { WidgetType } from '@/components/dashboard/widget-registry';
|
||||
import { WIDGET_CONSTRAINTS } from '@/components/dashboard/widget-registry';
|
||||
import { migrateGridLayouts, withGridVersion } from '@/lib/grid-layout-migration';
|
||||
@@ -11,6 +12,9 @@ export interface WidgetInstance {
|
||||
}
|
||||
|
||||
interface DashboardState {
|
||||
dashboards: DashboardTab[];
|
||||
activeDashboardId: string | null;
|
||||
isSwitchingDashboard: boolean;
|
||||
layouts: Record<string, Array<{ i: string; x: number; y: number; w: number; h: number }>>;
|
||||
widgets: WidgetInstance[];
|
||||
isEditMode: boolean;
|
||||
@@ -24,6 +28,33 @@ interface DashboardState {
|
||||
removeWidget: (id: string) => Promise<void>;
|
||||
loadDashboard: () => Promise<void>;
|
||||
saveLayout: () => Promise<void>;
|
||||
selectDashboard: (id: string) => Promise<void>;
|
||||
createDashboard: () => Promise<void>;
|
||||
renameDashboard: (id: string, name: string) => Promise<void>;
|
||||
deleteDashboard: (id: string) => Promise<void>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Schutz gegen doppeltes Laden der Reiterliste (quick-260923-ad9, Task 3,
|
||||
* T-AD9-07 — Gegenstück zur Transaktionssperre in `listDashboards` auf der
|
||||
* API): ein modul-globales Versprechen statt eines Zustandsfeldes, damit
|
||||
* ZWEI synchron hintereinander ausgeloeste `loadDashboard()`-Aufrufe (z. B.
|
||||
* React StrictMode, doppeltes Einhaengen) sich dasselbe, noch nicht
|
||||
* aufgeloeste Versprechen teilen — `api.fetchDashboards()` laeuft dann nur
|
||||
* EINMAL. Nach Abschluss (Erfolg ODER Fehler) wird die Sperre zurueckgesetzt,
|
||||
* damit ein spaeteres, echtes Neuladen (Seite erneut besucht, langer
|
||||
* Zeitabstand) wieder ein frisches Netzwerkergebnis holt statt fuer immer
|
||||
* auf dem ersten Ergebnis zu bleiben.
|
||||
*/
|
||||
let dashboardsLoadPromise: Promise<DashboardTab[]> | null = null;
|
||||
|
||||
function loadDashboardsOnce(): Promise<DashboardTab[]> {
|
||||
if (!dashboardsLoadPromise) {
|
||||
dashboardsLoadPromise = api.fetchDashboards().finally(() => {
|
||||
dashboardsLoadPromise = null;
|
||||
});
|
||||
}
|
||||
return dashboardsLoadPromise;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -37,8 +68,19 @@ interface DashboardState {
|
||||
* ueber die Breakpoints). Fehlt der Marker beim Speichern, wird beim naechsten
|
||||
* Laden erneut verdoppelt — deshalb `withGridVersion` an BEIDEN Speicherstellen
|
||||
* (Sofort-Speichern nach der Umrechnung und `saveLayout`), T-BWO-02.
|
||||
*
|
||||
* quick-260923-ad9 (Task 3): Reiter — mehrere Dashboards je Benutzer. Der
|
||||
* erste (`position` aufsteigend) ist der Standard und wird beim Laden aktiv.
|
||||
* `layouts`/`widgets` gehoeren IMMER zum `activeDashboardId` — ein
|
||||
* Reiterwechsel ersetzt beide vollstaendig, nie ein Zusammenfuehren. Die
|
||||
* Marker-Umrechnung oben gilt weiterhin je Reiter: `selectDashboard`
|
||||
* durchlaeuft dieselbe Umrechnung-plus-Sofort-Speichern-Logik wie
|
||||
* `loadDashboard`.
|
||||
*/
|
||||
export const useDashboardStore = create<DashboardState>()((set, get) => ({
|
||||
dashboards: [],
|
||||
activeDashboardId: null,
|
||||
isSwitchingDashboard: false,
|
||||
layouts: { lg: [], md: [], sm: [], xs: [], xxs: [] },
|
||||
widgets: [],
|
||||
isEditMode: false,
|
||||
@@ -63,8 +105,10 @@ export const useDashboardStore = create<DashboardState>()((set, get) => ({
|
||||
},
|
||||
|
||||
addWidget: async (widgetType: WidgetType) => {
|
||||
const dashboardId = get().activeDashboardId;
|
||||
if (!dashboardId) return;
|
||||
try {
|
||||
const newWidget = await api.addWidget(widgetType);
|
||||
const newWidget = await api.addWidget(dashboardId, widgetType);
|
||||
const constraints = WIDGET_CONSTRAINTS[widgetType];
|
||||
|
||||
set((state) => {
|
||||
@@ -117,12 +161,21 @@ export const useDashboardStore = create<DashboardState>()((set, get) => ({
|
||||
loadDashboard: async () => {
|
||||
set({ isLoading: true, error: null });
|
||||
try {
|
||||
const dashboards = await loadDashboardsOnce();
|
||||
const first = dashboards[0];
|
||||
if (!first) {
|
||||
set({ error: 'Failed to load dashboard', isLoading: false });
|
||||
return;
|
||||
}
|
||||
|
||||
const [rawLayouts, widgets] = await Promise.all([
|
||||
api.fetchLayout(),
|
||||
api.fetchWidgets(),
|
||||
api.fetchLayout(first.id),
|
||||
api.fetchWidgets(first.id),
|
||||
]);
|
||||
const { layouts: migratedLayouts, migrated } = migrateGridLayouts(rawLayouts);
|
||||
set({
|
||||
dashboards,
|
||||
activeDashboardId: first.id,
|
||||
layouts: migratedLayouts,
|
||||
widgets,
|
||||
isLoading: false,
|
||||
@@ -132,7 +185,7 @@ export const useDashboardStore = create<DashboardState>()((set, get) => ({
|
||||
// try/catch, damit ein Speicherfehler NICHT als Ladefehler erscheint.
|
||||
if (migrated) {
|
||||
try {
|
||||
await api.saveLayout(withGridVersion(migratedLayouts));
|
||||
await api.saveLayout(first.id, withGridVersion(migratedLayouts));
|
||||
} catch (err) {
|
||||
console.error('Failed to persist migrated layout:', err);
|
||||
}
|
||||
@@ -146,11 +199,105 @@ export const useDashboardStore = create<DashboardState>()((set, get) => ({
|
||||
},
|
||||
|
||||
saveLayout: async () => {
|
||||
const dashboardId = get().activeDashboardId;
|
||||
if (!dashboardId) return;
|
||||
try {
|
||||
await api.saveLayout(withGridVersion(get().layouts));
|
||||
await api.saveLayout(dashboardId, withGridVersion(get().layouts));
|
||||
set({ isDirty: false });
|
||||
} catch (err) {
|
||||
console.error('Failed to save layout:', err);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Wechselt den aktiven Reiter (quick-260923-ad9, Task 3). Eine
|
||||
* ungespeicherte Anordnung wird ZUERST fuer den ALTEN Reiter geschrieben
|
||||
* (`get().saveLayout()` liest `activeDashboardId` VOR dem `set` unten,
|
||||
* schreibt also unter der Kennung des alten Reiters) — erst danach werden
|
||||
* Kacheln und Anordnung des neuen Reiters geladen und ersetzen den
|
||||
* Zustand VOLLSTAENDIG (kein Zusammenfuehren).
|
||||
*/
|
||||
selectDashboard: async (id: string) => {
|
||||
const state = get();
|
||||
if (id === state.activeDashboardId) return;
|
||||
|
||||
if (state.isDirty) {
|
||||
await get().saveLayout();
|
||||
}
|
||||
|
||||
set({ isSwitchingDashboard: true, error: null });
|
||||
try {
|
||||
const [rawLayouts, widgets] = await Promise.all([
|
||||
api.fetchLayout(id),
|
||||
api.fetchWidgets(id),
|
||||
]);
|
||||
const { layouts: migratedLayouts, migrated } = migrateGridLayouts(rawLayouts);
|
||||
set({
|
||||
activeDashboardId: id,
|
||||
layouts: migratedLayouts,
|
||||
widgets,
|
||||
isDirty: false,
|
||||
isSwitchingDashboard: false,
|
||||
});
|
||||
if (migrated) {
|
||||
try {
|
||||
await api.saveLayout(id, withGridVersion(migratedLayouts));
|
||||
} catch (err) {
|
||||
console.error('Failed to persist migrated layout:', err);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to switch dashboard:', err);
|
||||
set({ isSwitchingDashboard: false, error: 'Failed to switch dashboard' });
|
||||
}
|
||||
},
|
||||
|
||||
/** Legt einen neuen, leeren Reiter an und macht ihn aktiv (D-08). */
|
||||
createDashboard: async () => {
|
||||
try {
|
||||
const created = await api.createDashboardTab();
|
||||
set((state) => ({ dashboards: [...state.dashboards, created] }));
|
||||
await get().selectDashboard(created.id);
|
||||
} catch (err) {
|
||||
console.error('Failed to create dashboard:', err);
|
||||
}
|
||||
},
|
||||
|
||||
renameDashboard: async (id: string, name: string) => {
|
||||
try {
|
||||
const updated = await api.renameDashboardTab(id, name);
|
||||
set((state) => ({
|
||||
dashboards: state.dashboards.map((d) => (d.id === id ? updated : d)),
|
||||
}));
|
||||
} catch (err) {
|
||||
console.error('Failed to rename dashboard:', err);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Loescht einen Reiter. Beim aktiven Reiter wird danach der dann erste
|
||||
* verbleibende Reiter aktiv und sein Inhalt geladen (`selectDashboard`).
|
||||
* Die verbleibende Liste wird lokal gefiltert statt neu geladen — die vom
|
||||
* Server neu vergebenen `position`-Werte werden dabei nicht nachgezogen;
|
||||
* das ist fuer die Reihenfolge in der Leiste unschaedlich (sie filtert nur,
|
||||
* sortiert nicht neu), ein spaeteres Umsortieren sendet ohnehin die
|
||||
* VOLLSTAENDIGE Kennungsliste, nicht die Positionszahlen.
|
||||
*/
|
||||
deleteDashboard: async (id: string) => {
|
||||
try {
|
||||
await api.deleteDashboardTab(id);
|
||||
const remaining = get().dashboards.filter((d) => d.id !== id);
|
||||
set({ dashboards: remaining });
|
||||
|
||||
if (get().activeDashboardId === id) {
|
||||
const next = remaining[0];
|
||||
if (next) {
|
||||
set({ activeDashboardId: null });
|
||||
await get().selectDashboard(next.id);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to delete dashboard:', err);
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
Reference in New Issue
Block a user