remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: Studio bulk ops, perf fixes, bug fixes, confirm dialog visibility
CI / runtime-diagnostics (push) Skipped
Details
CI / check (push) Successful in 34s
Details
CI / release (push) Skipped
Details
CI / deploy (push) Successful in 1m3s
Details

Browse Source 
Confirm Dialog:
- Overlay opacity 80% -> 95% (solid black)
- Card uses bg-surface with glow shadow ring-primary/40
- Added AlertTriangle icon for danger variant
- Removed backdrop-blur for maximum opacity

Studio features:
- Bulk delete: select imported items and delete in batch
- Bulk nitro regen: select items missing .nitro and regenerate all
- Added Trash2 and RefreshCw toolbar buttons for bulk actions

Performance:
- BatchProgress: React.memo + useMemo for entries/total/completed/percent
- BatchProgress: ETA interval uses useRef to avoid re-creation per completed
- CatalogRail: React.memo + useCallback for toggle
- Removed redundant double setBatchProgress calls
- Removed redundant new Map(initial) wrapping

Bug fixes:
- importBatch: stale batchDone closure always cleared progress panel (use ref)
- importBatch: added missing toast.error on HTTP failure
- bulkRegenNitro: now checks per-item results instead of marking all as succeeded
- single deleteItem: now removes classname from selected set
- retryFailed: clears progress panel on HTTP error and stream error
- Removed unused 'done' variable (2x) from cloneAllMissing/retryFailed

Lint:
- biome format fixes for selectedMissingNitro and setItems
This commit is contained in:
openhands committed 2026-09-01 19:07:20 +02:00
1 parent 4863f78795
commit 93601e58e0
4 files changed
+214 -45
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/admin/studio/studio-client.tsx
+165 -13
View File
@@ -151,6 +151,11 @@ export function StudioClient({
BatchItemStatus
> | null>(null);
const [batchDone, setBatchDone] = useState(false);
const batchDoneRef = useRef(false);
const markBatchDone = useCallback(() => {
batchDoneRef.current = true;
markBatchDone();
}, []);
const [batchSucceeded, setBatchSucceeded] = useState(0);
const [batchFailed, setBatchFailed] = useState(0);
const [batchCancelling, setBatchCancelling] = useState(false);
@@ -424,7 +429,7 @@ export function StudioClient({
for (const cn of classnames) {
initial.set(cn, { classname: cn, status: "pending" });
}
setBatchProgress(new Map(initial));
setBatchProgress(initial);
setBatchDone(false);
setBatchSucceeded(0);
setBatchFailed(0);
@@ -436,7 +441,6 @@ export function StudioClient({
cloneAllAbortRef.current = abort;
const CHUNK = 400;
let done = 0;
let okCount = 0;
let failCount = 0;
@@ -479,7 +483,6 @@ export function StudioClient({
return next;
});
if (evt.status === "done" || evt.status === "failed") {
done++;
if (evt.status === "failed") {
setFailedClassnames((prev) =>
prev.includes(cn) ? prev : [...prev, cn],
@@ -504,7 +507,7 @@ export function StudioClient({
if (!abort.signal.aborted) {
setBatchSucceeded(okCount);
setBatchFailed(failCount);
setBatchDone(true);
markBatchDone();
if (okCount > 0) {
toast.success(
@@ -690,7 +693,6 @@ export function StudioClient({
return;
}
setBatchProgress(new Map());
setBatchDone(false);
setBatchSucceeded(0);
setBatchFailed(0);
@@ -702,7 +704,7 @@ export function StudioClient({
for (const i of toImport) {
initial.set(i.classname, { classname: i.classname, status: "pending" });
}
setBatchProgress(new Map(initial));
setBatchProgress(initial);
const abort = new AbortController();
batchAbortRef.current = abort;
@@ -731,6 +733,7 @@ export function StudioClient({
});
if (!res.ok || !res.body) {
toast.error(`Batch import mislukt (${res.status})`);
setBatchProgress(null);
return;
}
@@ -789,7 +792,7 @@ export function StudioClient({
iconsSynced: event.iconsSynced ?? [],
ownershipFixed: event.ownershipFixed ?? [],
});
setBatchDone(true);
markBatchDone();
}
} catch {
/* skip malformed */
@@ -807,7 +810,7 @@ export function StudioClient({
setBatchCancelling(false);
setSelected(new Set());
fetchStats();
if (!batchDone) setBatchProgress(null);
if (!batchDoneRef.current) setBatchProgress(null);
}
}
@@ -828,7 +831,6 @@ export function StudioClient({
async function retryFailed(failed: string[]) {
if (!activeSource || failed.length === 0) return;
// For clone sources, re-run cloneAllMissing with only the failed classnames
setBatchProgress(new Map());
setBatchDone(false);
setBatchSucceeded(0);
setBatchFailed(0);
@@ -839,11 +841,10 @@ export function StudioClient({
for (const cn of failed) {
initial.set(cn, { classname: cn, status: "pending" });
}
setBatchProgress(new Map(initial));
setBatchProgress(initial);
const abort = new AbortController();
cloneAllAbortRef.current = abort;
let done = 0;
let okCount = 0;
let failCount = 0;
@@ -862,6 +863,7 @@ export function StudioClient({
if (!res.ok || !res.body) {
toast.error(`Retry mislukt (${res.status})`);
setBatchProgress(null);
return;
}
@@ -881,7 +883,6 @@ export function StudioClient({
return next;
});
if (evt.status === "done" || evt.status === "failed") {
done++;
if (evt.status === "failed") {
setFailedClassnames((prev) =>
prev.includes(cn) ? prev : [...prev, cn],
@@ -899,7 +900,7 @@ export function StudioClient({
setBatchSucceeded(okCount);
setBatchFailed(failCount);
setBatchDone(true);
markBatchDone();
if (okCount > 0) {
toast.success(`${okCount} items opnieuw geïmporteerd`);
@@ -910,6 +911,7 @@ export function StudioClient({
} catch (err) {
if ((err as Error)?.name !== "AbortError") {
toast.error("Verbindingsfout tijdens retry");
setBatchProgress(null);
}
} finally {
cloneAllAbortRef.current = null;
@@ -926,6 +928,11 @@ export function StudioClient({
errors?: string[];
};
setItems((prev) => prev.filter((i) => i.classname !== deleting));
setSelected((prev) => {
const next = new Set(prev);
next.delete(deleting);
return next;
});
if (detail?.classname === deleting) setDetail(null);
fetchStats();
toast.success(
@@ -976,6 +983,104 @@ export function StudioClient({
}
}
const [bulkDeleting, setBulkDeleting] = useState(false);
const [bulkRegenning, setBulkRegenning] = useState(false);
async function bulkDeleteSelected() {
if (selectedImported.length === 0) return;
const confirmed = await confirm({
title: `${selectedImported.length} items verwijderen?`,
description: `Alle ${selectedImported.length} geselecteerde geïmporteerde items worden permanent verwijderd uit de database en het bestandssysteem.`,
confirmLabel: "Verwijderen",
variant: "danger",
});
if (!confirmed) return;
setBulkDeleting(true);
let deleted = 0;
let failed = 0;
try {
for (const item of selectedImported) {
try {
const result = await deleteImportedFurni({
classname: item.classname,
});
if (result.ok) {
deleted++;
} else {
failed++;
}
} catch {
failed++;
}
}
setItems((prev) => prev.filter((i) => !selected.has(i.classname)));
setSelected(new Set());
fetchStats();
toast.success(
`Verwijderd: ${deleted}${failed > 0 ? `, mislukt: ${failed}` : ""}`,
);
} catch {
toast.error("Bulk delete mislukt");
} finally {
setBulkDeleting(false);
}
}
async function bulkRegenNitro() {
if (selectedMissingNitro.length === 0) return;
setBulkRegenning(true);
const cns = selectedMissingNitro.map((i) => i.classname);
setRegeneratingNitro((prev) => {
const next = new Set(prev);
for (const cn of cns) next.add(cn);
return next;
});
try {
const res = await adminFetch("/api/admin/import/furni", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
items: selectedMissingNitro.map((i) => ({
classname: i.classname,
revision: i.revision,
})),
}),
});
const data = await res.json();
if (res.ok) {
const succeededClassnames = new Set<string>(
(data.results ?? [])
.filter((r: { ok: boolean }) => r.ok)
.map((r: { classname: string }) => r.classname),
);
setItems((prev) =>
prev.map((i) =>
succeededClassnames.has(i.classname)
? { ...i, nitroExists: true }
: i,
),
);
const succeeded = Number(data.succeeded ?? 0);
const failed = Number(data.failed ?? 0);
toast.success(
`Nitro geregenereerd: ${succeeded}${failed > 0 ? `, mislukt: ${failed}` : ""}`,
);
} else {
toast.error(data.error || "Regeneratie mislukt");
}
} catch {
toast.error("Network error");
} finally {
setRegeneratingNitro((prev) => {
const next = new Set(prev);
for (const cn of cns) next.delete(cn);
return next;
});
setBulkRegenning(false);
}
}
const detailPreview = useMemo<AutoCatalogPreview | null>(() => {
if (!detail) return null;
return previewAutoCatalog(
@@ -998,6 +1103,19 @@ export function StudioClient({
[filteredItems],
);
const selectedImported = useMemo(
() =>
filteredItems.filter(
(i) => selected.has(i.classname) && i.alreadyImported,
),
[filteredItems, selected],
);
const selectedMissingNitro = useMemo(
() => selectedImported.filter((i) => !i.nitroExists),
[selectedImported],
);
const notImportedCount = useMemo(
() =>
activeSource && cloneStats
@@ -1404,6 +1522,40 @@ export function StudioClient({
Import {selectedNonImported} auto
</Button>
)}
{selectedMissingNitro.length > 0 && !batchProgress && (
<Button
size="sm"
variant="outline"
className="gap-1.5"
disabled={bulkRegenning}
onClick={bulkRegenNitro}
>
{bulkRegenning ? (
<Loader2 size={14} className="animate-spin" />
) : (
<RefreshCw size={14} />
)}
Nitro regeneren ({selectedMissingNitro.length})
</Button>
)}
{selectedImported.length > 0 && !batchProgress && (
<Button
size="sm"
variant="destructive"
className="gap-1.5"
disabled={bulkDeleting}
onClick={bulkDeleteSelected}
>
{bulkDeleting ? (
<Loader2 size={14} className="animate-spin" />
) : (
<Trash2 size={14} />
)}
Verwijder ({selectedImported.length})
</Button>
)}
</div>
{/* ── Body: rail + grid + drawer ────────────────────── */}