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

Add toggle for Designer/Viewer modes on dashboard page

Browse Source 
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.
This commit is contained in:
OlgunR
2026-02-03 16:43:16 +01:00
parent 940df826f7
commit 32b6d30ba1
2 changed files with 36 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
DbFirst.BlazorWasm/Pages/Dashboard.razor
View File

@@ -48,16 +48,27 @@
<div class="dashboard-shell"> <div class="dashboard-shell">
<aside class="dashboard-nav"> <aside class="dashboard-nav">
<div class="dashboard-nav-title">Dashboards</div> <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> </aside>
<section class="dashboard-content"> <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> </DxDashboard>
</section> </section>
</div> </div>
@code { @code {
[Parameter] public string? DashboardId { get; set; } [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"; private string DashboardEndpoint => $"{Configuration["ApiBaseUrl"]?.TrimEnd('/')}/api/dashboard";
@@ -68,4 +79,10 @@
Navigation.NavigateTo("dashboards/default", replace: true); Navigation.NavigateTo("dashboards/default", replace: true);
} }
} }
private void ToggleMode()
{
var targetMode = IsDesigner ? "viewer" : "designer";
Navigation.NavigateTo($"dashboards/default?mode={targetMode}", replace: true);
}
} }

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

@@ -48,17 +48,26 @@
<div class="dashboard-shell"> <div class="dashboard-shell">
<aside class="dashboard-nav"> <aside class="dashboard-nav">
<div class="dashboard-nav-title">Dashboards</div> <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> </aside>
<section class="dashboard-content"> <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> </DxDashboard>
</section> </section>
</div> </div>
@code { @code {
[Parameter] public string? DashboardId { get; set; } [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"; private string DashboardEndpoint => $"{Configuration["ApiBaseUrl"]?.TrimEnd('/')}/api/dashboard";
protected override void OnParametersSet() protected override void OnParametersSet()
@@ -68,4 +77,10 @@
Navigation.NavigateTo("dashboards/default", replace: true); Navigation.NavigateTo("dashboards/default", replace: true);
} }
} }
private void ToggleMode()
{
var targetMode = IsDesigner ? "viewer" : "designer";
Navigation.NavigateTo($"dashboards/default?mode={targetMode}", replace: true);
}
} }