DbFirst/DbFirst.BlazorWebApp/Components/Pages/Dashboard.razor

@page "/dashboard"
@page "/dashboards/{DashboardId?}"
@inject Microsoft.Extensions.Configuration.IConfiguration Configuration
@inject NavigationManager Navigation
@inject DashboardApiClient DashboardApi

<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>
        @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">
            <DxButton RenderStyle="ButtonRenderStyle.Primary" Click="@ToggleMode">
                @(IsDesigner ? "Zum Viewer wechseln" : "Zum Designer wechseln")
            </DxButton>
        </div>
        <DxDashboard @key="DashboardKey" Endpoint="@DashboardEndpoint" InitialDashboardId="@SelectedDashboardId" WorkingMode="@CurrentMode" style="width: 100%; height: 800px;">
        </DxDashboard>
    </section>
</div>

@code {
    [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 SelectedDashboardId { get; set; } = "";
    private string DashboardKey => $"{SelectedDashboardId}-{(IsDesigner ? "designer" : "viewer")}";

    private string DashboardEndpoint => $"{Configuration["ApiBaseUrl"]?.TrimEnd('/')}/api/dashboard";

    protected override async Task OnParametersSetAsync()
    {
        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/{resolved.Id}?mode={(IsDesigner ? "designer" : "viewer")}", replace: true);
        }
    }

    private void ToggleMode()
    {
        var targetMode = IsDesigner ? "viewer" : "designer";
        Navigation.NavigateTo($"dashboards/{SelectedDashboardId}?mode={targetMode}", replace: true);
    }
}