Expose project-wide history controls

2026-07-25 23:16:46 +02:00
parent b2763f72d5
commit 59d442593f
8 changed files with 146 additions and 86 deletions
@@ -237,9 +237,9 @@ not change the project revision or undo/redo stacks. Restoring a server-stored
 snapshot verifies its checksum and the current-state hash, replaces supported
 project data atomically and records a new `restore` revision with a complete
 inverse command. Restore can therefore be undone and redone after a restart.
-The project page exposes an initially collapsed German snapshot/timeline UI
-with explicit restore confirmation and cursor-based loading of older revision
-metadata.
+The project page exposes persistent project-wide Undo/Redo in the header of an
+initially collapsed German snapshot/timeline UI, with explicit restore
+confirmation and cursor-based loading of older revision metadata.
 Insertions and generated move targets use client-generated stable UUIDs, and
 undo restores the same ids from complete server snapshots. The tree response
 supplies the optimistic `currentRevision`; obsolete direct field PATCH,
@@ -6,8 +6,8 @@ Gerätezeilen und wiederverwendbare Projektgeräte fachlich getrennt behandelt.

 Das Projekt befindet sich in aktiver Entwicklung. Der lokale Entwicklungsbetrieb
 mit SQLite und Docker Compose ist unterstützt. Ein Produktionsdeployment,
-persistentes Undo/Redo, Projektversionen und der Revit-/IFCGUID-Datenaustausch sind
-noch nicht implementiert.
+automatische periodische Sicherungspunkte und der Revit-/IFCGUID-Datenaustausch
+sind noch nicht implementiert.

 ## Unterstützter Arbeitsablauf

@@ -18,7 +18,8 @@ noch nicht implementiert.
 - Projektgeräte einfügen, verknüpfen und kontrolliert synchronisieren
 - komplette Stromkreisblöcke filtern und sortieren
 - BMKs stabil halten und nur auf ausdrücklichen Befehl neu nummerieren
- Änderungen innerhalb der aktuellen Editorsitzung rückgängig machen und wiederholen
+- Änderungen projektweit und auch nach einem Reload rückgängig machen und wiederholen
+- benannte Sicherungspunkte anlegen, wiederherstellen und Revisionen einsehen

 ## Technik

@@ -142,6 +142,7 @@ Covered operations include:
 - renumber and identifier update flows
 - apply sorted order

-The toolbar currently exposes availability through its Undo/Redo buttons.
-Named restore points and the revision timeline are available on the project
-page; the circuit editor keeps only the compact Undo/Redo controls.
+The editor toolbar exposes availability through its Undo/Redo buttons. The
+project page provides the same persistent project-wide controls in the header
+of its version card, including after a reload. Named restore points and the
+revision timeline remain inside the expandable part of that card.
@@ -121,7 +121,10 @@ Die Projektseite bindet diese APIs in einem einklappbaren Bereich
 „Versionen und Sicherungspunkte“ ein. Dort können Benutzer Sicherungspunkte
 benennen, nach expliziter Bestätigung wiederherstellen und die paginierte
 Revisions-Timeline mit deutschen Quellen- und Änderungsbezeichnungen lesen.
-Nach einem Restore lädt die Seite sämtliche Projektdaten neu.
+Projektweites Rückgängig/Wiederholen bleibt im Kopf dieses Bereichs auch im
+eingeklappten Zustand erreichbar. Die Verfügbarkeit stammt direkt aus den
+persistierten Server-Stacks; nach einer Historienaktion oder einem Restore lädt
+die Seite sämtliche Projektdaten neu.
 `circuit-device-row.move` verschiebt oder sortiert eine oder mehrere Zeilen
 zwischen vorhandenen Stromkreisen derselben Liste. Erwartete und neue
 Stromkreis-/Sortierpositionen machen Forward und Inverse deterministisch;
@@ -157,8 +160,9 @@ einschließlich ProjectDevice-Verknüpfung und lokaler Override-Metadaten. Damit
 werden stille Überschreibungen veralteter Zeilen verhindert und Undo/Redo stellt
 exakt die vorherigen lokalen Werte wieder her. Die Synchronisieren- und
 Trennen-Endpunkte sowie die Projektseite verwenden diesen Command mit
-optimistischer Revisionsprüfung. Das dortige Rückgängig löst die persistente
-projektweite Historie aus; separate direkte Restore-/Reconnect-Schreibwege
+optimistischer Revisionsprüfung. Rückgängig/Wiederholen erfolgt dort
+einheitlich über die persistente projektweite Historie; der frühere
+sitzungslokale Spezial-Undo und separate direkte Restore-/Reconnect-Schreibwege
 existieren nicht mehr.
 `project-device.update` versioniert Änderungen an den kanonischen
 Projektgerätefeldern unabhängig davon. Der Store erzeugt die Inverse aus dem
@@ -212,8 +216,7 @@ bei einem späteren Wechsel trotzdem einen eigenen PostgreSQL-Adapter.

 ## Noch nicht unterstützt

- vollständiges persistentes Undo/Redo, sichtbare Historie nach Reload und
-  benannte Projektstände
+- automatische periodische Projekt-Snapshots und Aufbewahrungsrichtlinie
 - Mehrbenutzerbetrieb und Konfliktauflösung
 - Revit-/CSV-/IFCGUID-Round-trip
 - vollständige elektrische Dimensionierung
@@ -373,6 +373,8 @@ Tasks:
  persistent undo/redo
 - [x] expose named snapshots, confirmed restore and the paginated revision
  timeline on the project page
+- [x] expose persistent project-wide undo/redo controls on the project page
+  and remove its session-local ProjectDevice synchronization undo state
 - keep database backups separate from logical history

 Implemented foundation:
@@ -401,6 +403,8 @@ Implemented foundation:
  undo/redo stacks
 - the project page lists, creates and explicitly restores named snapshots and
  displays paginated revision metadata without exposing command payloads
+- the version-card header reads persisted undo/redo eligibility and executes
+  optimistic project-wide undo/redo even while its timeline body is collapsed
 - a central application dispatcher reconstructs persisted commands and exposes
  optimistic command, undo and redo endpoints for Circuit and CircuitDeviceRow
  field updates
@@ -21,7 +21,6 @@ import {
  listProjects,
  listRooms,
  synchronizeProjectDeviceRows,
-  undoProjectCommand,
  updateProjectDevice,
  updateProjectSettings,
 } from "../../../frontend/utils/api";
@@ -56,11 +55,6 @@ const projectDeviceSyncFieldLabels: Record<ProjectDeviceSyncField, string> = {
  remark: "Bemerkung",
 };

-type ProjectDeviceUndoState = {
-  projectDeviceId: string;
-  revisionNumber: number;
-};
-
 const emptyProjectDevice: CreateProjectDeviceInput = {
  name: "",
  displayName: "",
@@ -117,7 +111,6 @@ export default function ProjectDetailPage() {
  const [syncPreview, setSyncPreview] = useState<ProjectDeviceSyncPreviewDto | null>(null);
  const [selectedSyncRowIds, setSelectedSyncRowIds] = useState<string[]>([]);
  const [selectedSyncFields, setSelectedSyncFields] = useState<ProjectDeviceSyncField[]>([]);
-  const [projectDeviceUndo, setProjectDeviceUndo] = useState<ProjectDeviceUndoState | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [isSaving, setIsSaving] = useState(false);

@@ -180,7 +173,6 @@ export default function ProjectDetailPage() {
    setProject((current) =>
      current ? { ...current, currentRevision } : current
    );
-    setProjectDeviceUndo(null);
  }

  async function handleCreateBoard(event: FormEvent<HTMLFormElement>) {
@@ -386,7 +378,6 @@ export default function ProjectDetailPage() {
      return;
    }
    try {
-      setProjectDeviceUndo(null);
      const preview = await getProjectDeviceSyncPreview(projectId, projectDeviceId);
      setSyncPreview(preview);
      setSelectedSyncRowIds(preview.rows.filter((row) => row.differences.length > 0).map((row) => row.rowId));
@@ -438,10 +429,6 @@ export default function ProjectDetailPage() {
      setSelectedSyncRowIds(
        result.preview.rows.filter((row) => row.differences.length > 0).map((row) => row.rowId)
      );
-      setProjectDeviceUndo({
-        projectDeviceId: syncPreview.projectDevice.id,
-        revisionNumber: result.revision.revisionNumber,
-      });
    } catch (err) {
      setError(err instanceof Error ? err.message : "Gerätezeilen konnten nicht synchronisiert werden.");
    } finally {
@@ -474,10 +461,6 @@ export default function ProjectDetailPage() {
          .map((row) => row.rowId)
      );
      applyProjectRevision(result.history.currentRevision);
-      setProjectDeviceUndo({
-        projectDeviceId: syncPreview.projectDevice.id,
-        revisionNumber: result.revision.revisionNumber,
-      });
    } catch (err) {
      setError(err instanceof Error ? err.message : "Verknüpfungen konnten nicht getrennt werden.");
    } finally {
@@ -485,40 +468,6 @@ export default function ProjectDetailPage() {
    }
  }

-  async function handleUndoProjectDeviceOperation() {
-    if (!projectId || !project || !projectDeviceUndo) {
-      return;
-    }
-    setIsSaving(true);
-    setError(null);
-    try {
-      if (
-        project.currentRevision !==
-        projectDeviceUndo.revisionNumber
-      ) {
-        throw new Error(
-          "Eine neuere Projektänderung verhindert dieses Rückgängig."
-        );
-      }
-      const result = await undoProjectCommand(
-        projectId,
-        project.currentRevision
-      );
-      const preview = await getProjectDeviceSyncPreview(
-        projectId,
-        projectDeviceUndo.projectDeviceId
-      );
-      applyProjectRevision(result.history.currentRevision);
-      setSyncPreview(preview);
-      setSelectedSyncRowIds(preview.rows.filter((row) => row.differences.length > 0).map((row) => row.rowId));
-      setProjectDeviceUndo(null);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Die letzte Aktion konnte nicht rückgängig gemacht werden.");
-    } finally {
-      setIsSaving(false);
-    }
-  }
-
  async function handleCopyGlobalToProject() {
    if (!projectId || !project || !selectedGlobalDeviceId) {
      return;
@@ -624,7 +573,7 @@ export default function ProjectDetailPage() {
          <section className="col-12">
            <ProjectVersionHistory
              currentRevision={project.currentRevision}
-              onRestoreComplete={() => window.location.reload()}
+              onProjectStateChange={() => window.location.reload()}
              projectId={projectId}
            />
          </section>
@@ -1163,16 +1112,6 @@ export default function ProjectDetailPage() {
            </div>

            <div className="d-flex flex-wrap gap-2">
-              {projectDeviceUndo ? (
-                <button
-                  className="btn btn-outline-secondary"
-                  type="button"
-                  onClick={() => void handleUndoProjectDeviceOperation()}
-                  disabled={isSaving}
-                >
-                  Letzte Aktion rückgängig
-                </button>
-              ) : null}
              <button
                className="btn btn-primary"
                type="button"
@@ -7,15 +7,19 @@ import React, {
  useState,
 } from "react";
 import type {
+  ProjectHistoryStateDto,
  ProjectRevisionPageDto,
  ProjectRevisionSummaryDto,
  ProjectSnapshotMetadataDto,
 } from "../types";
 import {
  createNamedProjectSnapshot,
+  getProjectHistory,
  listProjectRevisions,
  listProjectSnapshots,
+  redoProjectCommand,
  restoreProjectSnapshot,
+  undoProjectCommand,
 } from "../utils/api";
 import {
  getProjectRevisionDescription,
@@ -26,7 +30,7 @@ import {
 interface ProjectVersionHistoryProps {
  projectId: string;
  currentRevision: number;
-  onRestoreComplete: () => void;
+  onProjectStateChange: () => void;
 }

 const revisionPageSize = 10;
@@ -34,8 +38,10 @@ const revisionPageSize = 10;
 export function ProjectVersionHistory({
  projectId,
  currentRevision,
-  onRestoreComplete,
+  onProjectStateChange,
 }: ProjectVersionHistoryProps) {
+  const [history, setHistory] =
+    useState<ProjectHistoryStateDto | null>(null);
  const [snapshots, setSnapshots] = useState<ProjectSnapshotMetadataDto[]>(
    []
  );
@@ -51,9 +57,26 @@ export function ProjectVersionHistory({
    useState<ProjectSnapshotMetadataDto | null>(null);
  const [isOpen, setIsOpen] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
+  const [isHistoryLoading, setIsHistoryLoading] = useState(true);
  const [isBusy, setIsBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

+  const loadHistory = useCallback(async () => {
+    setIsHistoryLoading(true);
+    try {
+      setHistory(await getProjectHistory(projectId));
+    } catch (loadError) {
+      setError(
+        getVersionHistoryError(
+          loadError,
+          "Rückgängig-Status konnte nicht geladen werden."
+        )
+      );
+    } finally {
+      setIsHistoryLoading(false);
+    }
+  }, [projectId]);
+
  const loadOverview = useCallback(async () => {
    setIsLoading(true);
    setError(null);
@@ -77,6 +100,10 @@ export function ProjectVersionHistory({
    }
  }, [projectId]);

+  useEffect(() => {
+    void loadHistory();
+  }, [currentRevision, loadHistory]);
+
  useEffect(() => {
    if (isOpen) {
      void loadOverview();
@@ -157,7 +184,7 @@ export function ProjectVersionHistory({
      );
      setRestoreCandidate(null);
      setIsBusy(false);
-      onRestoreComplete();
+      onProjectStateChange();
    } catch (restoreError) {
      setError(
        getVersionHistoryError(
@@ -170,6 +197,33 @@ export function ProjectVersionHistory({
    }
  }

+  async function handleHistoryCommand(direction: "undo" | "redo") {
+    setIsBusy(true);
+    setError(null);
+    try {
+      const result =
+        direction === "undo"
+          ? await undoProjectCommand(projectId, currentRevision)
+          : await redoProjectCommand(projectId, currentRevision);
+      setHistory(result.history);
+      onProjectStateChange();
+    } catch (historyError) {
+      setError(
+        getVersionHistoryError(
+          historyError,
+          direction === "undo"
+            ? "Die letzte Änderung konnte nicht rückgängig gemacht werden."
+            : "Die letzte Änderung konnte nicht wiederholt werden."
+        )
+      );
+    } finally {
+      setIsBusy(false);
+    }
+  }
+
+  const historyIsCurrent =
+    history?.currentRevision === currentRevision;
+
  return (
    <section className="card shadow-sm">
      <div className="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
@@ -178,6 +232,42 @@ export function ProjectVersionHistory({
          <span className="badge text-bg-secondary">
            Aktuelle Revision {currentRevision}
          </span>
+          <button
+            className="btn btn-sm btn-outline-secondary"
+            disabled={
+              isBusy ||
+              isHistoryLoading ||
+              !historyIsCurrent ||
+              !history?.undoDepth
+            }
+            onClick={() => void handleHistoryCommand("undo")}
+            title={
+              history?.undoDepth
+                ? `${history.undoDepth} Änderung(en) können rückgängig gemacht werden`
+                : "Keine Änderung zum Rückgängigmachen"
+            }
+            type="button"
+          >
+            Rückgängig
+          </button>
+          <button
+            className="btn btn-sm btn-outline-secondary"
+            disabled={
+              isBusy ||
+              isHistoryLoading ||
+              !historyIsCurrent ||
+              !history?.redoDepth
+            }
+            onClick={() => void handleHistoryCommand("redo")}
+            title={
+              history?.redoDepth
+                ? `${history.redoDepth} Änderung(en) können wiederholt werden`
+                : "Keine Änderung zum Wiederholen"
+            }
+            type="button"
+          >
+            Wiederholen
+          </button>
          <button
            aria-expanded={isOpen}
            className="btn btn-sm btn-outline-secondary"
@@ -188,6 +278,11 @@ export function ProjectVersionHistory({
          </button>
        </div>
      </div>
+      {error ? (
+        <div className="alert alert-warning m-3 mb-0" role="alert">
+          {error}
+        </div>
+      ) : null}
      {isOpen ? (
        <>
      <div className="card-body border-bottom">
@@ -237,12 +332,6 @@ export function ProjectVersionHistory({
        </form>
      </div>

-      {error ? (
-        <div className="alert alert-warning m-3 mb-0" role="alert">
-          {error}
-        </div>
-      ) : null}
-
      <div className="card-body border-bottom">
        <h2 className="h6">Gespeicherte Sicherungspunkte</h2>
        {isLoading ? (
@@ -6,9 +6,12 @@ import { ProjectVersionHistory } from "../src/frontend/components/project-versio
 import type { ProjectRevisionSummaryDto } from "../src/frontend/types.js";
 import {
  createNamedProjectSnapshot,
+  getProjectHistory,
  listProjectRevisions,
  listProjectSnapshots,
+  redoProjectCommand,
  restoreProjectSnapshot,
+  undoProjectCommand,
 } from "../src/frontend/utils/api.js";
 import {
  getProjectRevisionDescription,
@@ -40,11 +43,13 @@ describe("project version history presentation", () => {
      createElement(ProjectVersionHistory, {
        projectId: "project-1",
        currentRevision: 42,
-        onRestoreComplete: () => undefined,
+        onProjectStateChange: () => undefined,
      })
    );
    assert.match(markup, /Versionen und Sicherungspunkte/);
    assert.match(markup, /Aktuelle Revision 42/);
+    assert.match(markup, /Rückgängig/);
+    assert.match(markup, /Wiederholen/);
    assert.match(markup, /Anzeigen/);
    assert.doesNotMatch(markup, /Stand speichern/);
  });
@@ -108,6 +113,7 @@ describe("project version history API", () => {
    };

    try {
+      await getProjectHistory("project-1");
      await listProjectRevisions("project-1", {
        limit: 10,
        beforeRevision: 21,
@@ -120,11 +126,18 @@ describe("project version history API", () => {
        "Vor Ausführung"
      );
      await restoreProjectSnapshot("project-1", "snapshot-1", 22);
+      await undoProjectCommand("project-1", 23);
+      await redoProjectCommand("project-1", 24);
    } finally {
      globalThis.fetch = originalFetch;
    }

    assert.deepEqual(requests, [
+      {
+        url: "/api/projects/project-1/history",
+        method: "GET",
+        body: null,
+      },
      {
        url: "/api/projects/project-1/history/revisions?limit=10&beforeRevision=21",
        method: "GET",
@@ -149,6 +162,16 @@ describe("project version history API", () => {
        method: "POST",
        body: { expectedRevision: 22 },
      },
+      {
+        url: "/api/projects/project-1/history/undo",
+        method: "POST",
+        body: { expectedRevision: 23 },
+      },
+      {
+        url: "/api/projects/project-1/history/redo",
+        method: "POST",
+        body: { expectedRevision: 24 },
+      },
    ]);
  });
 });