refactor: split dashboard.page.ts into per-concern sections

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>
2026-09-04 15:17:02 +02:00
parent 42e7a1e927
commit 5977efe044
17 changed files with 725 additions and 334 deletions
@@ -0,0 +1,71 @@
+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());
+}