aaru-dps/Aaru.Server
1
0
Fork 0
mirror of https://github.com/aaru-dps/Aaru.Server.git synced 2026-09-24 23:54:29 +00:00
Code Issues 7 Packages Projects Releases Wiki Activity

Revamp Block Descriptors View UI with improved loading experience, enhanced layout, and search functionality

Browse Source
This commit is contained in:
Natalia Portillo
2026-01-01 17:26:30 +00:00
parent 90313b9be5
commit 4a861d6903
2 changed files with 129 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
Aaru.Server/Components/Admin/Pages/BlockDescriptors/View.razor
View File

@@ -30,51 +30,125 @@
@page "/admin/block-descriptors"
@attribute [Authorize]
@layout AdminLayout
@rendermode InteractiveServer
@inject Microsoft.EntityFrameworkCore.IDbContextFactory<DbContext> DbContextFactory
<PageTitle>Block descriptors</PageTitle>
<PageTitle>Block Descriptors</PageTitle>
@if(!_initialized)
{
<div class="stats-section">
<h1 style="color: red; align-content: center; padding: 2rem">Loading...</h1>
<div class="d-flex justify-content-center align-items-center" style="min-height: 60vh;">
<div class="text-center">
<div class="spinner-border text-info" role="status" style="width: 3rem; height: 3rem;">
<span class="visually-hidden">Loading...</span>
</div>
<h3 class="mt-3 text-light">Loading block descriptors...</h3>
</div>
</div>
return;
}
<section class="stats-section">
<h4>Block descriptors</h4>
<table class="table table-dark table-striped table-bordered mt-4 mb-4">
<thead class="thead-dark">
<tr>
<th class="fw-bold bg-secondary text-light">
@DisplayNameHelper.GetDisplayName(typeof(BlockDescriptor), nameof(BlockDescriptor.Density))
</th>
<th class="fw-bold bg-secondary text-light">
@DisplayNameHelper.GetDisplayName(typeof(BlockDescriptor), nameof(BlockDescriptor.Blocks))
</th>
<th class="fw-bold bg-secondary text-light">
@DisplayNameHelper.GetDisplayName(typeof(BlockDescriptor), nameof(BlockDescriptor.BlockLength))
</th>
</tr>
</thead>
<tbody>
@foreach(BlockDescriptor item in _items)
{
<tr>
<td>
@item.Density
</td>
<td>
@item.Blocks
</td>
<td>
@item.BlockLength
</td>
</tr>
}
</tbody>
</table>
</section>
<div class="container-fluid px-4 py-4">
<!-- Header Section -->
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<h1 class="h2 mb-1 text-light">
<i class="bi bi-grid-3x3-gap text-info"></i> Block Descriptors
</h1>
<p class="text-secondary mb-0">Manage block descriptor database for tape media</p>
</div>
</div>
<!-- Search and Filter Bar -->
<div class="card bg-dark shadow-sm mb-4 border-secondary">
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-text bg-secondary text-light border-secondary">
<i class="bi bi-search"></i>
</span>
<input type="text"
class="form-control bg-dark text-light border-secondary"
placeholder="Search by density, blocks, or block length..."
@bind="_searchTerm"
@bind:event="oninput" />
</div>
</div>
<div class="col-md-6 text-end">
<span class="badge bg-info text-dark fs-6 py-2 px-3">
<i class="bi bi-database"></i> Total: @FilteredItems.Count() / @_items.Count
</span>
</div>
</div>
</div>
</div>
<!-- Data Table -->
<div class="card bg-dark shadow-sm border-secondary">
<div class="card-header bg-info text-dark">
<h5 class="mb-0">
<i class="bi bi-list-ul"></i> Block Descriptor Database
</h5>
</div>
<div class="card-body p-0">
@if(FilteredItems.Any())
{
<div class="table-responsive">
<table class="table table-dark table-hover table-striped mb-0">
<thead class="table-secondary">
<tr>
<th style="width: 80px;">
<i class="bi bi-hash"></i> ID
</th>
<th style="width: 150px;">
<i class="bi bi-grid-3x3"></i> Density
</th>
<th style="width: 150px;">
<i class="bi bi-collection"></i> Blocks
</th>
<th style="width: 150px;">
<i class="bi bi-rulers"></i> Block Length
</th>
</tr>
</thead>
<tbody>
@foreach(BlockDescriptor item in FilteredItems)
{
<tr>
<td class="align-middle">
<span class="badge bg-info text-dark text-center"
style="min-width: 60px; display: inline-block;">@item.Id</span>
</td>
<td class="align-middle">
<span class="badge bg-warning text-dark text-center"
style="min-width: 100px; display: inline-block;">@item.Density</span>
</td>
<td class="align-middle">
<span class="badge bg-success text-center"
style="min-width: 100px; display: inline-block;">@(((long)item.Blocks).ToString("N0"))</span>
</td>
<td class="align-middle">
<span class="badge bg-primary text-center"
style="min-width: 100px; display: inline-block;">@item.BlockLength</span>
</td>
</tr>
}
</tbody>
</table>
</div>
}
else
{
<div class="text-center py-5">
<i class="bi bi-inbox text-secondary" style="font-size: 4rem;"></i>
<h4 class="text-secondary mt-3">No block descriptors found</h4>
<p class="text-secondary">@(string.IsNullOrWhiteSpace(_searchTerm) ? "No data available" : "Try adjusting your search criteria")</p>
</div>
}
</div>
</div>
</div>

20
Aaru.Server/Components/Admin/Pages/BlockDescriptors/View.razor.cs
View File

@@ -34,8 +34,24 @@ namespace Aaru.Server.Components.Admin.Pages.BlockDescriptors;
public partial class View
{
bool _initialized;
List<BlockDescriptor> _items;
private bool _initialized;
private List<BlockDescriptor> _items = new();
private string _searchTerm = string.Empty;
private IEnumerable<BlockDescriptor> FilteredItems
{
get
{
if(string.IsNullOrWhiteSpace(_searchTerm)) return _items;
return _items.Where(item =>
item.Density.ToString().Contains(_searchTerm, StringComparison.OrdinalIgnoreCase) ||
item.Blocks.ToString().Contains(_searchTerm, StringComparison.OrdinalIgnoreCase) ||
item.BlockLength.ToString()
.Contains(_searchTerm, StringComparison.OrdinalIgnoreCase) ||
item.Id.ToString().Contains(_searchTerm, StringComparison.OrdinalIgnoreCase));
}
}
/// <inheritdoc />
protected override async Task OnInitializedAsync()