From dc2cccac1fc7f3b6887d06b98f057aac53c4ccd6 Mon Sep 17 00:00:00 2001
From: OlgunR <OlgunR@DD-PC-ENT05N>
Date: Tue, 3 Feb 2026 17:23:04 +0100
Subject: [PATCH] Update dashboard navigation and dynamic loading

- 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
---
 DbFirst.BlazorWasm/Layout/NavMenu.razor       |  2 +-
 DbFirst.BlazorWasm/Models/DashboardInfoDto.cs |  7 +++
 DbFirst.BlazorWasm/Pages/Dashboard.razor      | 50 ++++++++++++++++---
 DbFirst.BlazorWasm/Program.cs                 |  1 +
 .../Services/DashboardApiClient.cs            | 21 ++++++++
 .../Components/Layout/NavMenu.razor           |  2 +-
 .../Components/Pages/Dashboard.razor          | 50 ++++++++++++++++---
 .../Models/DashboardInfoDto.cs                |  7 +++
 DbFirst.BlazorWebApp/Program.cs               |  5 ++
 .../Services/DashboardApiClient.cs            | 21 ++++++++
 10 files changed, 149 insertions(+), 17 deletions(-)
 create mode 100644 DbFirst.BlazorWasm/Models/DashboardInfoDto.cs
 create mode 100644 DbFirst.BlazorWasm/Services/DashboardApiClient.cs
 create mode 100644 DbFirst.BlazorWebApp/Models/DashboardInfoDto.cs
 create mode 100644 DbFirst.BlazorWebApp/Services/DashboardApiClient.cs

diff --git a/DbFirst.BlazorWasm/Layout/NavMenu.razor b/DbFirst.BlazorWasm/Layout/NavMenu.razor
index 56037f9..7a576d8 100644
--- a/DbFirst.BlazorWasm/Layout/NavMenu.razor
+++ b/DbFirst.BlazorWasm/Layout/NavMenu.razor
@@ -22,7 +22,7 @@
             </NavLink>
         </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>
diff --git a/DbFirst.BlazorWasm/Models/DashboardInfoDto.cs b/DbFirst.BlazorWasm/Models/DashboardInfoDto.cs
new file mode 100644
index 0000000..5e209ee
--- /dev/null
+++ b/DbFirst.BlazorWasm/Models/DashboardInfoDto.cs
@@ -0,0 +1,7 @@
+namespace DbFirst.BlazorWasm.Models;
+
+public class DashboardInfoDto
+{
+    public string Id { get; set; } = string.Empty;
+    public string Name { get; set; } = string.Empty;
+}
diff --git a/DbFirst.BlazorWasm/Pages/Dashboard.razor b/DbFirst.BlazorWasm/Pages/Dashboard.razor
index 0890078..dad0efe 100644
--- a/DbFirst.BlazorWasm/Pages/Dashboard.razor
+++ b/DbFirst.BlazorWasm/Pages/Dashboard.razor
@@ -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,24 +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)
+        {
+            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/default", replace: true);
+            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);
     }
 }
\ No newline at end of file
diff --git a/DbFirst.BlazorWasm/Program.cs b/DbFirst.BlazorWasm/Program.cs
index 31f94e6..fa74d9d 100644
--- a/DbFirst.BlazorWasm/Program.cs
+++ b/DbFirst.BlazorWasm/Program.cs
@@ -17,5 +17,6 @@ builder.Services.AddDevExpressBlazor();
 var apiBaseUrl = builder.Configuration["ApiBaseUrl"] ?? builder.HostEnvironment.BaseAddress;
 builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(apiBaseUrl) });
 builder.Services.AddScoped<CatalogApiClient>();
+builder.Services.AddScoped<DashboardApiClient>();
 
 await builder.Build().RunAsync();
diff --git a/DbFirst.BlazorWasm/Services/DashboardApiClient.cs b/DbFirst.BlazorWasm/Services/DashboardApiClient.cs
new file mode 100644
index 0000000..8095117
--- /dev/null
+++ b/DbFirst.BlazorWasm/Services/DashboardApiClient.cs
@@ -0,0 +1,21 @@
+using System.Net.Http.Json;
+using DbFirst.BlazorWasm.Models;
+
+namespace DbFirst.BlazorWasm.Services;
+
+public class DashboardApiClient
+{
+    private readonly HttpClient _httpClient;
+    private const string Endpoint = "api/dashboard/dashboards";
+
+    public DashboardApiClient(HttpClient httpClient)
+    {
+        _httpClient = httpClient;
+    }
+
+    public async Task<List<DashboardInfoDto>> GetAllAsync()
+    {
+        var result = await _httpClient.GetFromJsonAsync<List<DashboardInfoDto>>(Endpoint);
+        return result ?? new List<DashboardInfoDto>();
+    }
+}
diff --git a/DbFirst.BlazorWebApp/Components/Layout/NavMenu.razor b/DbFirst.BlazorWebApp/Components/Layout/NavMenu.razor
index 4d4a741..0f5b8e8 100644
--- a/DbFirst.BlazorWebApp/Components/Layout/NavMenu.razor
+++ b/DbFirst.BlazorWebApp/Components/Layout/NavMenu.razor
@@ -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>
diff --git a/DbFirst.BlazorWebApp/Components/Pages/Dashboard.razor b/DbFirst.BlazorWebApp/Components/Pages/Dashboard.razor
index b1295e5..dad0efe 100644
--- a/DbFirst.BlazorWebApp/Components/Pages/Dashboard.razor
+++ b/DbFirst.BlazorWebApp/Components/Pages/Dashboard.razor
@@ -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)
+        {
+            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/default", replace: true);
+            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);
     }
 }
\ No newline at end of file
diff --git a/DbFirst.BlazorWebApp/Models/DashboardInfoDto.cs b/DbFirst.BlazorWebApp/Models/DashboardInfoDto.cs
new file mode 100644
index 0000000..e3df704
--- /dev/null
+++ b/DbFirst.BlazorWebApp/Models/DashboardInfoDto.cs
@@ -0,0 +1,7 @@
+namespace DbFirst.BlazorWebApp.Models;
+
+public class DashboardInfoDto
+{
+    public string Id { get; set; } = string.Empty;
+    public string Name { get; set; } = string.Empty;
+}
diff --git a/DbFirst.BlazorWebApp/Program.cs b/DbFirst.BlazorWebApp/Program.cs
index 3a2095c..b08475c 100644
--- a/DbFirst.BlazorWebApp/Program.cs
+++ b/DbFirst.BlazorWebApp/Program.cs
@@ -17,10 +17,15 @@ if (!string.IsNullOrWhiteSpace(apiBaseUrl))
     {
         client.BaseAddress = new Uri(apiBaseUrl);
     });
+    builder.Services.AddHttpClient<DashboardApiClient>(client =>
+    {
+        client.BaseAddress = new Uri(apiBaseUrl);
+    });
 }
 else
 {
     builder.Services.AddHttpClient<CatalogApiClient>();
+    builder.Services.AddHttpClient<DashboardApiClient>();
 }
 
 var app = builder.Build();
diff --git a/DbFirst.BlazorWebApp/Services/DashboardApiClient.cs b/DbFirst.BlazorWebApp/Services/DashboardApiClient.cs
new file mode 100644
index 0000000..cfc0773
--- /dev/null
+++ b/DbFirst.BlazorWebApp/Services/DashboardApiClient.cs
@@ -0,0 +1,21 @@
+using System.Net.Http.Json;
+using DbFirst.BlazorWebApp.Models;
+
+namespace DbFirst.BlazorWebApp.Services;
+
+public class DashboardApiClient
+{
+    private readonly HttpClient _httpClient;
+    private const string Endpoint = "api/dashboard/dashboards";
+
+    public DashboardApiClient(HttpClient httpClient)
+    {
+        _httpClient = httpClient;
+    }
+
+    public async Task<List<DashboardInfoDto>> GetAllAsync()
+    {
+        var result = await _httpClient.GetFromJsonAsync<List<DashboardInfoDto>>(Endpoint);
+        return result ?? new List<DashboardInfoDto>();
+    }
+}