70e5cbc19f
- Add sidebar dashboard navigation and support multiple dashboards - Extract catalog grid/form logic to reusable CatalogsGrid component - Add CatalogApiClient and DTOs for catalog CRUD operations - Define dashboards with JSON data sources (Default, CatalogsGrid) - Update configuration for dashboard and API endpoints - Improve styling and imports for modularity and maintainability
87 lines
2.7 KiB
Plaintext
87 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 (Designer)</NavLink>
|
|
<NavLink class="dashboard-nav-link" href="dashboards/catalog-grid">Catalogs (Dashboard Grid)</NavLink>
|
|
<NavLink class="dashboard-nav-link" href="dashboards/custom-grid">Catalogs (Custom Grid)</NavLink>
|
|
</aside>
|
|
<section class="dashboard-content">
|
|
@if (SelectedDashboardId == "default")
|
|
{
|
|
<DxDashboard Endpoint="@DashboardEndpoint" InitialDashboardId="DefaultDashboard" WorkingMode="WorkingMode.Designer" style="width: 100%; height: 800px;">
|
|
</DxDashboard>
|
|
}
|
|
else if (SelectedDashboardId == "catalog-grid")
|
|
{
|
|
<DxDashboard Endpoint="@DashboardEndpoint" InitialDashboardId="CatalogsGrid" WorkingMode="WorkingMode.ViewerOnly" style="width: 100%; height: 800px;">
|
|
</DxDashboard>
|
|
}
|
|
else if (SelectedDashboardId == "custom-grid")
|
|
{
|
|
<h3>Catalogs (Custom Grid)</h3>
|
|
<CatalogsGrid />
|
|
}
|
|
</section>
|
|
</div>
|
|
|
|
@code {
|
|
[Parameter] public string? DashboardId { get; set; }
|
|
|
|
private string DashboardEndpoint => $"{Configuration["ApiBaseUrl"]?.TrimEnd('/')}/api/dashboard";
|
|
private string SelectedDashboardId => string.IsNullOrWhiteSpace(DashboardId) ? "default" : DashboardId;
|
|
|
|
protected override void OnParametersSet()
|
|
{
|
|
if (string.IsNullOrWhiteSpace(DashboardId))
|
|
{
|
|
Navigation.NavigateTo("dashboards/default", replace: true);
|
|
}
|
|
}
|
|
} |