fix(t-paliad-098): row-level click navigates to checklist instance

The .entity-table tbody tr CSS rule sets cursor: pointer on every row,
but the three checklist-instance tables only wired navigation to the
name cell's <a>. Clicks on Vorlage / Fortschritt / Angelegt cells looked
clickable yet did nothing.

Added row-level click handlers (skipping inner <a>/button so the
project-link cell and delete button still work) in:
- checklists.ts (Vorhandene Instanzen tab)
- projects-detail.ts (Checklisten tab on project detail)
- checklists-detail.ts (instance list on template detail)

Search-result anchors (handlers/search.go) already worked since they
are real <a> elements, no row handler needed.
This commit is contained in:
m
2026-05-01 10:55:30 +02:00
parent a5a05b1a66
commit 215d4a465b
3 changed files with 27 additions and 6 deletions

View File

@@ -210,6 +210,15 @@ function renderInstances() {
void deleteInstance(id);
});
});
body.querySelectorAll<HTMLTableRowElement>(".checklist-instance-row").forEach((row) => {
const id = row.dataset.id!;
row.addEventListener("click", (e) => {
const target = e.target as HTMLElement;
if (target.closest("a") || target.closest("button")) return;
window.location.href = `/checklists/instances/${id}`;
});
});
}
function renderAkteOptions() {

View File

@@ -173,7 +173,7 @@ function renderInstances() {
projectCell = `<span class="form-hint" data-i18n="checklisten.instances.all.personal">Pers&ouml;nlich</span>`;
}
return `<tr>
return `<tr class="checklist-instance-row" data-id="${esc(inst.id)}">
<td>${esc(tplName)}</td>
<td><a href="/checklists/instances/${esc(inst.id)}" class="checklist-instance-name">${esc(inst.name)}</a></td>
<td>${projectCell}</td>
@@ -189,10 +189,14 @@ function renderInstances() {
</tr>`;
}).join("");
// Re-translate the "Persönlich" label for the project column on lang change —
// the data-i18n attribute is on a span we just rewrote, so initI18n's
// observer-style sweep covers this naturally on its next pass. Nothing to do
// here.
body.querySelectorAll<HTMLTableRowElement>(".checklist-instance-row").forEach((row) => {
const id = row.dataset.id!;
row.addEventListener("click", (e) => {
// Let inner links (project, instance name) handle their own navigation.
if ((e.target as HTMLElement).closest("a")) return;
window.location.href = `/checklists/instances/${id}`;
});
});
}
function showTab(tab: TabId, opts: { pushHistory?: boolean } = {}) {

View File

@@ -725,7 +725,7 @@ function renderChecklistInstances() {
const total = tpl ? tpl.itemCount : 0;
const done = Object.values(inst.state || {}).filter(Boolean).length;
const pct = total === 0 ? 0 : Math.round((done / total) * 100);
return `<tr>
return `<tr class="checklist-instance-row" data-id="${escapeHtml(inst.id)}">
<td>${escapeHtml(tplName)}</td>
<td><a href="/checklists/instances/${escapeHtml(inst.id)}" class="checklist-instance-name">${escapeHtml(inst.name)}</a></td>
<td>
@@ -739,6 +739,14 @@ function renderChecklistInstances() {
<td>${escapeHtml(fmtDate(inst.created_at))}</td>
</tr>`;
}).join("");
body.querySelectorAll<HTMLTableRowElement>(".checklist-instance-row").forEach((row) => {
const id = row.dataset.id!;
row.addEventListener("click", (e) => {
if ((e.target as HTMLElement).closest("a")) return;
window.location.href = `/checklists/instances/${id}`;
});
});
}
function escapeHtml(s: string): string {