feat(centralui): column resize and reorder for the audit results grid
Adds drag-to-resize and drag-to-reorder column UX to AuditResultsGrid, with chosen widths + column order persisted in browser sessionStorage. - wwwroot/js/audit-grid.js: dependency-free helper — pointer-driven resize handles, native HTML5 drag-and-drop reorder, and a sessionStorage save/load wrapper (mirrors treeview-storage.js). - AuditResultsGrid: renders a resize handle per <th>, makes headers draggable, applies persisted widths via a --audit-col-width custom property, and wires reorder into the existing ColumnOrder / OrderedColumns() mechanism. JS-invokable OnColumnResized / OnColumnReordered persist + re-render. A stored order naming an unknown column degrades gracefully (drops unknown keys, appends missing columns in default order); widths clamp to a 64px minimum. - AuditResultsGrid.razor.css: subtle scoped styling for the resize handle affordance and the reorder drop-target highlight. - App.razor references audit-grid.js alongside the other scripts. - Tests: 6 new bUnit tests for the load/apply/persist logic and graceful degradation; a new AuditGridColumnTests Playwright suite for the drag UX + reload persistence. Audit page bUnit tests set loose JSInterop mode since the grid now calls into audit-grid.js.
This commit is contained in:
@@ -12,12 +12,20 @@
|
||||
}
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm table-hover align-middle">
|
||||
<table class="table table-sm table-hover align-middle" @ref="_tableRef">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
@foreach (var col in OrderedColumns())
|
||||
{
|
||||
<th data-test="col-header-@col.Key">@col.Label</th>
|
||||
<th class="audit-grid-th"
|
||||
data-test="col-header-@col.Key"
|
||||
data-col-key="@col.Key"
|
||||
style="@ColumnWidthStyle(col.Key)">
|
||||
@col.Label
|
||||
<span class="audit-grid-resize-handle"
|
||||
data-test="col-resize-@col.Key"
|
||||
aria-hidden="true"></span>
|
||||
</th>
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -48,7 +56,7 @@
|
||||
@onclick="() => HandleRowClick(row)">
|
||||
@foreach (var col in OrderedColumns())
|
||||
{
|
||||
<td>
|
||||
<td class="audit-grid-td" style="@ColumnWidthStyle(col.Key)">
|
||||
@RenderCell(col.Key, row)
|
||||
</td>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user