AppStd/DbFirst
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update dashboard navigation and dynamic loading

Browse Source 
- Changed NavMenu to link to /dashboards instead of /dashboards/default
- Refactored Dashboard.razor to list dashboards from API
- Dashboard viewer/designer now loads by selected dashboard ID
- Mode toggle preserves selected dashboard and mode
- Added DashboardApiClient and DashboardInfoDto for API integration
- Registered DashboardApiClient for DI and HTTP client setup in Program.cs
This commit is contained in:
OlgunR
2026-02-03 17:23:04 +01:00
parent 32b6d30ba1
commit dc2cccac1f
10 changed files with 149 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
DbFirst.BlazorWebApp/Components/Layout/NavMenu.razor
View File

@@ -32,7 +32,7 @@
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="dashboards/default">
<NavLink class="nav-link" href="dashboards">
<span class="oi oi-list-rich" aria-hidden="true"></span> Dashboards
</NavLink>
</div>

50
DbFirst.BlazorWebApp/Components/Pages/Dashboard.razor
View File

@@ -2,6 +2,7 @@
@page "/dashboards/{DashboardId?}"
@inject Microsoft.Extensions.Configuration.IConfiguration Configuration
@inject NavigationManager Navigation
@inject DashboardApiClient DashboardApi
<style>
.dashboard-shell {
@@ -48,7 +49,17 @@
<div class="dashboard-shell">
<aside class="dashboard-nav">
<div class="dashboard-nav-title">Dashboards</div>
<NavLink class="dashboard-nav-link" href="dashboards/default">Default Dashboard</NavLink>
@if (dashboards.Count == 0)
{
<div class="px-3 py-2 text-muted">Keine Dashboards vorhanden.</div>
}
else
{
@foreach (var dashboard in dashboards)
{
<NavLink class="dashboard-nav-link" href="@($"dashboards/{dashboard.Id}")">@dashboard.Name</NavLink>
}
}
</aside>
<section class="dashboard-content">
<div class="mb-3">
@@ -56,7 +67,7 @@
@(IsDesigner ? "Zum Viewer wechseln" : "Zum Designer wechseln")
</DxButton>
</div>
<DxDashboard @key="DashboardKey" Endpoint="@DashboardEndpoint" InitialDashboardId="DefaultDashboard" WorkingMode="@CurrentMode" style="width: 100%; height: 800px;">
<DxDashboard @key="DashboardKey" Endpoint="@DashboardEndpoint" InitialDashboardId="@SelectedDashboardId" WorkingMode="@CurrentMode" style="width: 100%; height: 800px;">
</DxDashboard>
</section>
</div>
@@ -65,22 +76,47 @@
[Parameter] public string? DashboardId { get; set; }
[SupplyParameterFromQuery] public string? Mode { get; set; }
private readonly List<DashboardInfoDto> dashboards = new();
private bool IsDesigner => !string.Equals(Mode, "viewer", StringComparison.OrdinalIgnoreCase);
private WorkingMode CurrentMode => IsDesigner ? WorkingMode.Designer : WorkingMode.ViewerOnly;
private string DashboardKey => $"DefaultDashboard-{(IsDesigner ? "designer" : "viewer")}";
private string SelectedDashboardId { get; set; } = "";
private string DashboardKey => $"{SelectedDashboardId}-{(IsDesigner ? "designer" : "viewer")}";
private string DashboardEndpoint => $"{Configuration["ApiBaseUrl"]?.TrimEnd('/')}/api/dashboard";
protected override void OnParametersSet()
protected override async Task OnParametersSetAsync()
{
if (!string.Equals(DashboardId, "default", StringComparison.OrdinalIgnoreCase))
if (dashboards.Count == 0)
{
Navigation.NavigateTo("dashboards/default", replace: true);
dashboards.AddRange(await DashboardApi.GetAllAsync());
}
var requestedId = string.IsNullOrWhiteSpace(DashboardId) || string.Equals(DashboardId, "default", StringComparison.OrdinalIgnoreCase)
? null
: DashboardId;
var resolved = !string.IsNullOrWhiteSpace(requestedId)
? dashboards.FirstOrDefault(d => string.Equals(d.Id, requestedId, StringComparison.OrdinalIgnoreCase))
: dashboards.FirstOrDefault(d => string.Equals(d.Id, "DefaultDashboard", StringComparison.OrdinalIgnoreCase))
?? dashboards.FirstOrDefault();
if (resolved == null)
{
return;
}
SelectedDashboardId = resolved.Id;
if (!string.Equals(DashboardId, resolved.Id, StringComparison.OrdinalIgnoreCase))
{
Navigation.NavigateTo($"dashboards/{resolved.Id}?mode={(IsDesigner ? "designer" : "viewer")}", replace: true);
}
}
private void ToggleMode()
{
var targetMode = IsDesigner ? "viewer" : "designer";
Navigation.NavigateTo($"dashboards/default?mode={targetMode}", replace: true);
Navigation.NavigateTo($"dashboards/{SelectedDashboardId}?mode={targetMode}", replace: true);
}
}