Each dashboard section (Mijn aanvragen, Wat moet ik regelen, Mijn registratie, Specialismen, Wat wilt u doen, Beheer) now owns its own store access, async state, and template. DashboardPage becomes pure composition. Extract the repeated RemoteData Success-narrowing pattern into successOf() and the dashboard sort/split logic into sortForDashboard/concepten/ingediend, both with tests. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
36 lines
1.5 KiB
TypeScript
36 lines
1.5 KiB
TypeScript
import { Component, computed, inject } from '@angular/core';
|
|
import { HeadingComponent } from '@shared/ui/heading/heading.component';
|
|
import { ApplicationListComponent } from '@shared/ui/application-list/application-list.component';
|
|
import { ApplicationLinkComponent } from '@shared/ui/application-link/application-link.component';
|
|
import { AccessStore } from '@shared/application/access.store';
|
|
import { ADMIN_LINKS } from '../../../shell/nav.config';
|
|
|
|
/** Section: "Beheer" — the admin pages the current principal may reach, capability-
|
|
gated (never role-derived), the same source + filter the site header uses.
|
|
Empty for a non-admin → the section renders nothing (see the page). */
|
|
@Component({
|
|
selector: 'app-beheer-links-section',
|
|
imports: [HeadingComponent, ApplicationListComponent, ApplicationLinkComponent],
|
|
template: `
|
|
@if (adminLinks().length) {
|
|
<section>
|
|
<app-heading [level]="2" i18n="@@dashboard.beheer">Beheer</app-heading>
|
|
<app-application-list class="app-section">
|
|
@for (link of adminLinks(); track link.to) {
|
|
<li
|
|
app-application-link
|
|
[heading]="link.label"
|
|
[subtitle]="link.description"
|
|
[to]="link.to"
|
|
></li>
|
|
}
|
|
</app-application-list>
|
|
</section>
|
|
}
|
|
`,
|
|
})
|
|
export class BeheerLinksSection {
|
|
private access = inject(AccessStore);
|
|
protected adminLinks = computed(() => ADMIN_LINKS.filter((l) => this.access.can(l.cap)));
|
|
}
|