32b6d30ba1
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.
88 lines
2.7 KiB
Plaintext
88 lines
2.7 KiB
Plaintext
@page "/dashboard"
|
|
@page "/dashboards/{DashboardId?}"
|
|
@inject Microsoft.Extensions.Configuration.IConfiguration Configuration
|
|
@inject NavigationManager Navigation
|
|
|
|
<style>
|
|
.dashboard-shell {
|
|
display: flex;
|
|
gap: 0;
|
|
min-height: 800px;
|
|
border: 1px solid #e6e6e6;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
}
|
|
.dashboard-nav {
|
|
width: 220px;
|
|
border-right: 1px solid #e6e6e6;
|
|
background: #fafafa;
|
|
}
|
|
.dashboard-nav-title {
|
|
padding: 0.75rem 1rem 0.5rem;
|
|
font-size: 0.7rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: #6c757d;
|
|
font-weight: 600;
|
|
}
|
|
.dashboard-nav-link {
|
|
display: block;
|
|
padding: 0.55rem 1rem;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
.dashboard-nav-link.active {
|
|
background: #e9ecef;
|
|
font-weight: 600;
|
|
}
|
|
.dashboard-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 1rem;
|
|
}
|
|
</style>
|
|
|
|
<PageTitle>Dashboards</PageTitle>
|
|
|
|
<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>
|
|
</aside>
|
|
<section class="dashboard-content">
|
|
<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()
|
|
{
|
|
if (!string.Equals(DashboardId, "default", StringComparison.OrdinalIgnoreCase))
|
|
{
|
|
Navigation.NavigateTo("dashboards/default", replace: true);
|
|
}
|
|
}
|
|
|
|
private void ToggleMode()
|
|
{
|
|
var targetMode = IsDesigner ? "viewer" : "designer";
|
|
Navigation.NavigateTo($"dashboards/default?mode={targetMode}", replace: true);
|
|
}
|
|
} |