ehoandClaude Sonnet 5
5977efe044
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>
72 lines
2.6 KiB
TypeScript
72 lines
2.6 KiB
TypeScript
import { Component, inject } from '@angular/core';
|
|
import { successOf } from '@shared/application/remote-data';
|
|
import { HeadingComponent } from '@shared/ui/heading/heading.component';
|
|
import { SkeletonComponent } from '@shared/ui/skeleton/skeleton.component';
|
|
import { DataBlockComponent } from '@shared/ui/data-block/data-block.component';
|
|
import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
|
|
import { ASYNC } from '@shared/ui/async/async.component';
|
|
import { BigProfileStore } from '@registratie/application/big-profile.store';
|
|
import { RegistrationSummaryComponent } from '@registratie/ui/registration-summary/registration-summary.component';
|
|
|
|
/** Section: "Mijn registratie" — the BIG-register summary plus the BRP
|
|
persoonsgegevens, both from the one screen-shaped dashboard call
|
|
(BigProfileStore). */
|
|
@Component({
|
|
selector: 'app-mijn-registratie-section',
|
|
imports: [
|
|
HeadingComponent,
|
|
SkeletonComponent,
|
|
DataBlockComponent,
|
|
DataRowComponent,
|
|
RegistrationSummaryComponent,
|
|
...ASYNC,
|
|
],
|
|
template: `
|
|
<app-async [data]="store.profile()" (retryClicked)="store.reloadProfile()">
|
|
<ng-template appAsyncLoaded>
|
|
@if (profile(); as p) {
|
|
<section>
|
|
<app-heading [level]="2" i18n="@@dashboard.mijnRegistratie"
|
|
>Mijn registratie</app-heading
|
|
>
|
|
<div class="app-section">
|
|
<app-registration-summary [reg]="p.registration" />
|
|
</div>
|
|
<app-data-block
|
|
class="app-section"
|
|
i18n-heading="@@dashboard.persoonsgegevens"
|
|
heading="Persoonsgegevens (BRP)"
|
|
>
|
|
<div
|
|
app-data-row
|
|
i18n-key="@@dashboard.straat"
|
|
key="Straat"
|
|
[value]="p.person.adres.straat"
|
|
></div>
|
|
<div
|
|
app-data-row
|
|
i18n-key="@@dashboard.postcode"
|
|
key="Postcode"
|
|
[value]="p.person.adres.postcode"
|
|
></div>
|
|
<div
|
|
app-data-row
|
|
i18n-key="@@dashboard.woonplaats"
|
|
key="Woonplaats"
|
|
[value]="p.person.adres.woonplaats"
|
|
></div>
|
|
</app-data-block>
|
|
</section>
|
|
}
|
|
</ng-template>
|
|
<ng-template appAsyncLoading>
|
|
<app-skeleton height="2.5rem" [count]="4" />
|
|
</ng-template>
|
|
</app-async>
|
|
`,
|
|
})
|
|
export class MijnRegistratieSection {
|
|
protected store = inject(BigProfileStore);
|
|
protected profile = () => successOf(this.store.profile());
|
|
}
|