Expose project-wide history controls

This commit is contained in:
2026-07-25 23:16:46 +02:00
parent b2763f72d5
commit 59d442593f
8 changed files with 146 additions and 86 deletions
+1 -62
View File
@@ -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 ? (