m/paliad
1
0
Fork 0
Code Issues 146 Pull Requests 8 Actions 1 Packages Projects Releases Wiki Activity

fix(admin/approval-policies): preserve <details> open state across re-renders

Browse Source 
Changing any required_role cell saves the policy and re-renders the units
list to refresh the attribution chips, but the re-render rebuilt every
<details> closed — collapsing the accordion the admin was actively
editing (m, 2026-05-08 11:19).

Capture the set of open data-unit-ids before innerHTML overwrites them,
then re-apply the open attribute on the rendered nodes for those ids.
Adds data-unit-id to the <details> as the stable identity. No behavior
change for first render or for units the admin hadn't expanded.
This commit is contained in:
m
2026-05-08 11:20:39 +02:00
parent 82faa3d8bd
commit d519363c8d
1 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/client/admin-approval-policies.ts
View File

@@ -208,12 +208,19 @@ function renderUnitMatrix(unit: PartnerUnit): string {
function renderUnits(): void {
const host = document.getElementById("ap-units-list");
if (!host) return;
// Preserve which unit blocks were expanded across re-renders. Without this,
// changing any cell's required_role saves and re-renders, collapsing the
// accordion the admin was working in (m, 2026-05-08).
const openUnitIDs = new Set<string>();
host.querySelectorAll<HTMLDetailsElement>("details.ap-unit-block").forEach((d) => {
if (d.open && d.dataset.unitId) openUnitIDs.add(d.dataset.unitId);
});
if (partnerUnits.length === 0) {
host.innerHTML = `<p class="form-hint">${esc(t("admin.approval_policies.units.empty") || "Keine Partner Units vorhanden.")}</p>`;
return;
}
host.innerHTML = partnerUnits.map((u) => `
<details class="ap-unit-block">
<details class="ap-unit-block" data-unit-id="${esc(u.id)}"${openUnitIDs.has(u.id) ? " open" : ""}>
<summary class="ap-unit-summary">
<span class="ap-unit-name">${esc(u.name)}</span>
<span class="office-chip office-${esc(u.office)}">${esc(u.office)}</span>