From 32b6d30ba1377fc1f8dca75b2731be6dfdfe3b4b Mon Sep 17 00:00:00 2001
From: OlgunR <OlgunR@DD-PC-ENT05N>
Date: Tue, 3 Feb 2026 16:43:16 +0100
Subject: [PATCH] Add toggle for Designer/Viewer modes on dashboard page

Added a button to switch between Designer and Viewer modes for the dashboard. The mode is controlled via a query parameter and updates the dashboard's WorkingMode accordingly. The dashboard component is re-rendered when the mode changes. Also updated the navigation link label to remove the "(Designer)" suffix.
---
 DbFirst.BlazorWasm/Pages/Dashboard.razor      | 21 +++++++++++++++++--
 .../Components/Pages/Dashboard.razor          | 19 +++++++++++++++--
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/DbFirst.BlazorWasm/Pages/Dashboard.razor b/DbFirst.BlazorWasm/Pages/Dashboard.razor
index eb0a3b9..0890078 100644
--- a/DbFirst.BlazorWasm/Pages/Dashboard.razor
+++ b/DbFirst.BlazorWasm/Pages/Dashboard.razor
@@ -48,16 +48,27 @@
 <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 (Designer)</NavLink>
+        <NavLink class="dashboard-nav-link" href="dashboards/default">Default Dashboard</NavLink>
     </aside>
     <section class="dashboard-content">
-        <DxDashboard Endpoint="@DashboardEndpoint" InitialDashboardId="DefaultDashboard" WorkingMode="WorkingMode.Designer" style="width: 100%; height: 800px;">
+        <div class="mb-3">
+            <DxButton RenderStyle="ButtonRenderStyle.Primary" Click="@ToggleMode">
+                @(IsDesigner ? "Zum Viewer wechseln" : "Zum Designer wechseln")
+            </DxButton>
+        </div>
+        <DxDashboard @key="DashboardKey" Endpoint="@DashboardEndpoint" InitialDashboardId="DefaultDashboard" WorkingMode="@CurrentMode" style="width: 100%; height: 800px;">
         </DxDashboard>
     </section>
 </div>
 
 @code {
     [Parameter] public string? DashboardId { get; set; }
+    [SupplyParameterFromQuery] public string? Mode { get; set; }
+
+    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 DashboardEndpoint => $"{Configuration["ApiBaseUrl"]?.TrimEnd('/')}/api/dashboard";
 
@@ -68,4 +79,10 @@
             Navigation.NavigateTo("dashboards/default", replace: true);
         }
     }
+
+    private void ToggleMode()
+    {
+        var targetMode = IsDesigner ? "viewer" : "designer";
+        Navigation.NavigateTo($"dashboards/default?mode={targetMode}", replace: true);
+    }
 }
\ No newline at end of file
diff --git a/DbFirst.BlazorWebApp/Components/Pages/Dashboard.razor b/DbFirst.BlazorWebApp/Components/Pages/Dashboard.razor
index eb0a3b9..b1295e5 100644
--- a/DbFirst.BlazorWebApp/Components/Pages/Dashboard.razor
+++ b/DbFirst.BlazorWebApp/Components/Pages/Dashboard.razor
@@ -48,17 +48,26 @@
 <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 (Designer)</NavLink>
+        <NavLink class="dashboard-nav-link" href="dashboards/default">Default Dashboard</NavLink>
     </aside>
     <section class="dashboard-content">
-        <DxDashboard Endpoint="@DashboardEndpoint" InitialDashboardId="DefaultDashboard" WorkingMode="WorkingMode.Designer" style="width: 100%; height: 800px;">
+        <div class="mb-3">
+            <DxButton RenderStyle="ButtonRenderStyle.Primary" Click="@ToggleMode">
+                @(IsDesigner ? "Zum Viewer wechseln" : "Zum Designer wechseln")
+            </DxButton>
+        </div>
+        <DxDashboard @key="DashboardKey" Endpoint="@DashboardEndpoint" InitialDashboardId="DefaultDashboard" WorkingMode="@CurrentMode" style="width: 100%; height: 800px;">
         </DxDashboard>
     </section>
 </div>
 
 @code {
     [Parameter] public string? DashboardId { get; set; }
+    [SupplyParameterFromQuery] public string? Mode { get; set; }
 
+    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 DashboardEndpoint => $"{Configuration["ApiBaseUrl"]?.TrimEnd('/')}/api/dashboard";
 
     protected override void OnParametersSet()
@@ -68,4 +77,10 @@
             Navigation.NavigateTo("dashboards/default", replace: true);
         }
     }
+
+    private void ToggleMode()
+    {
+        var targetMode = IsDesigner ? "viewer" : "designer";
+        Navigation.NavigateTo($"dashboards/default?mode={targetMode}", replace: true);
+    }
 }
\ No newline at end of file