Files
ScadaBridge/src/ScadaLink.CentralUI/Components/Shared/DataTable.razor
T
Joseph Doherty f7b10f2ff7 refactor(ui/shared): scroll-lock, escape, aria-live, responsive sidebar
ConfirmDialog locks body scroll via IJSRuntime + Bootstrap's
modal-open class on show, restores on hide. Escape key now closes
the dialog; default ConfirmButtonClass flipped from btn-danger to
btn-primary so non-destructive confirms aren't red. Destructive
callsites (Delete, Discard) get explicit ConfirmButtonClass="btn-danger".

ToastNotification adds aria-live="polite" + aria-atomic="true" on the
container and an optional autoDismissMs parameter on every Show* method.

LoadingSpinner text-muted -> text-secondary for contrast.

DataTable gains a clear (x) button on the search input and applies
disabled / aria-disabled directly to the pagination buttons.

NewFolderDialog splits backdrop and modal markup to match ConfirmDialog.

NavMenu wraps the nav list in an overflow-y scroll container so the
username/sign-out footer stays anchored, and section headers convert
from <li> to <div role="presentation">.

MainLayout adds a hamburger toggle for <lg viewports; sidebar collapses
via Bootstrap collapse data attributes.

App.razor extracts inline <style> block to a shared site.css; adds a
left-border accent on the active nav link; switches the reconnect
modal to modal-dialog-centered.

Login uses d-flex / min-vh-100 centering. NotAuthorizedView gets the
same centered layout plus the ScadaLink brand heading.

Sites.razor: only the new ConfirmButtonClass="btn-danger" follow-up.
2026-05-12 03:32:07 -04:00

148 lines
4.7 KiB
Plaintext

@* Reusable data table with sorting, filtering, and pagination *@
@typeparam TItem
<div class="mb-2">
@if (ShowSearch)
{
<div class="row mb-2">
<div class="col-md-4">
<div class="input-group input-group-sm">
<input type="text" class="form-control form-control-sm" placeholder="Search..."
@bind="_searchTerm" @bind:event="oninput" @bind:after="ApplyFilter" />
@if (!string.IsNullOrEmpty(_searchTerm))
{
<button type="button" class="btn btn-outline-secondary"
aria-label="Clear search" @onclick="ClearSearch">&times;</button>
}
</div>
</div>
@if (FilterContent != null)
{
<div class="col-md-8 d-flex gap-2 align-items-center">
@FilterContent
</div>
}
</div>
}
</div>
<table class="table table-sm table-striped table-hover">
<thead class="table-dark">
<tr>
@HeaderContent
</tr>
</thead>
<tbody>
@if (_pagedItems.Count == 0)
{
<tr>
<td colspan="100" class="text-muted text-center">@EmptyMessage</td>
</tr>
}
else
{
@foreach (var item in _pagedItems)
{
@RowContent(item)
}
}
</tbody>
</table>
@if (_totalPages > 1)
{
<nav>
<ul class="pagination pagination-sm justify-content-end">
<li class="page-item @(_currentPage <= 1 ? "disabled" : "")">
<button class="page-link" type="button"
disabled="@(_currentPage <= 1)"
aria-disabled="@((_currentPage <= 1).ToString().ToLowerInvariant())"
@onclick="() => GoToPage(_currentPage - 1)">Previous</button>
</li>
@for (int i = 1; i <= _totalPages; i++)
{
var page = i;
<li class="page-item @(page == _currentPage ? "active" : "")">
<button class="page-link" @onclick="() => GoToPage(page)">@(page)</button>
</li>
}
<li class="page-item @(_currentPage >= _totalPages ? "disabled" : "")">
<button class="page-link" type="button"
disabled="@(_currentPage >= _totalPages)"
aria-disabled="@((_currentPage >= _totalPages).ToString().ToLowerInvariant())"
@onclick="() => GoToPage(_currentPage + 1)">Next</button>
</li>
</ul>
</nav>
}
<div class="text-muted small">
Showing @((_currentPage - 1) * PageSize + 1)&ndash;@Math.Min(_currentPage * PageSize, _filteredItems.Count) of @_filteredItems.Count items
</div>
@code {
private string _searchTerm = string.Empty;
private int _currentPage = 1;
private List<TItem> _filteredItems = new();
private List<TItem> _pagedItems = new();
private int _totalPages;
[Parameter, EditorRequired] public IReadOnlyList<TItem> Items { get; set; } = [];
[Parameter, EditorRequired] public RenderFragment HeaderContent { get; set; } = default!;
[Parameter, EditorRequired] public RenderFragment<TItem> RowContent { get; set; } = default!;
[Parameter] public RenderFragment? FilterContent { get; set; }
[Parameter] public int PageSize { get; set; } = 25;
[Parameter] public bool ShowSearch { get; set; } = true;
[Parameter] public string EmptyMessage { get; set; } = "No items found.";
[Parameter] public Func<TItem, string, bool>? SearchFilter { get; set; }
protected override void OnParametersSet()
{
ApplyFilter();
}
private void ApplyFilter()
{
if (!string.IsNullOrWhiteSpace(_searchTerm) && SearchFilter != null)
{
_filteredItems = Items.Where(i => SearchFilter(i, _searchTerm)).ToList();
}
else
{
_filteredItems = Items.ToList();
}
_totalPages = Math.Max(1, (int)Math.Ceiling(_filteredItems.Count / (double)PageSize));
if (_currentPage > _totalPages) _currentPage = 1;
UpdatePage();
}
private void GoToPage(int page)
{
if (page < 1 || page > _totalPages) return;
_currentPage = page;
UpdatePage();
}
private void ClearSearch()
{
_searchTerm = string.Empty;
ApplyFilter();
}
private void UpdatePage()
{
_pagedItems = _filteredItems
.Skip((_currentPage - 1) * PageSize)
.Take(PageSize)
.ToList();
}
public void Refresh()
{
ApplyFilter();
StateHasChanged();
}
}