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.
This commit is contained in:
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user