ehoandClaude Opus 5
44dcc69811
RD-03 moved the dashboard page to overzicht/ui/overzicht.page.ts and left four sections in registratie/ui/dashboard/. The folder was named after a page that lives in another context. A reader who opened it found four sections that are not the dashboard. The folder is now overzicht-secties/ — registratie's sections for the overzicht page. The alias does not change, because the sections stay in the registratie context. The story titles do not change, because they name the context. Five documents cited registratie/ui/dashboard.page.ts, a file that RD-03 renamed. They now name overzicht.page.ts, or the section that owns the behaviour they describe. The /dashboard route keeps its path. It is a user-visible URL. npm run ci --full passes: 67 and 45 storybook suites, 306 axe tests. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
64 lines
2.6 KiB
TypeScript
64 lines
2.6 KiB
TypeScript
import { Component, computed, inject } from '@angular/core';
|
|
import { successOf } from '@shared/application/remote-data';
|
|
import { HeadingComponent } from '@shared/ui/atoms/heading/heading.component';
|
|
import { AlertComponent } from '@shared/ui/atoms/alert/alert.component';
|
|
import { SkeletonComponent } from '@shared/ui/atoms/skeleton/skeleton.component';
|
|
import { TaskListComponent } from '@shared/ui/molecules/task-list/task-list.component';
|
|
import { ASYNC } from '@shared/ui/molecules/async/async.component';
|
|
import { BigProfileStore } from '@registratie/application/big-profile.store';
|
|
import { tasksFromProfile } from '@registratie/domain/tasks';
|
|
|
|
/** Section: "Wat moet ik regelen" — the open tasks derived from the registration
|
|
+ the server-computed herregistratie eligibility (rendered, never recomputed;
|
|
ADR-0001). Empty task list → a plain "niets openstaan" message, not an empty
|
|
async state (the registration itself did load). */
|
|
@Component({
|
|
selector: 'app-wat-moet-ik-regelen-section',
|
|
imports: [HeadingComponent, AlertComponent, SkeletonComponent, TaskListComponent, ...ASYNC],
|
|
template: `
|
|
@if (store.pendingHerregistratie()) {
|
|
<app-alert type="info" i18n="@@dashboard.pendingHerregistratie"
|
|
>Uw herregistratie-aanvraag is in behandeling.</app-alert
|
|
>
|
|
}
|
|
<app-async [data]="store.profile()" (retryClicked)="store.reloadProfile()">
|
|
<ng-template appAsyncLoaded>
|
|
@if (tasks(); as t) {
|
|
<section>
|
|
@if (t.length) {
|
|
<app-task-list
|
|
i18n-listHeading="@@dashboard.watMoetIkRegelen"
|
|
listHeading="Wat moet ik regelen"
|
|
[tasks]="t"
|
|
/>
|
|
} @else {
|
|
<app-heading [level]="2" i18n="@@dashboard.watMoetIkRegelen"
|
|
>Wat moet ik regelen</app-heading
|
|
>
|
|
<p class="app-text-subtle" i18n="@@dashboard.nietsOpenstaan">
|
|
U heeft op dit moment niets openstaan.
|
|
</p>
|
|
}
|
|
</section>
|
|
}
|
|
</ng-template>
|
|
<ng-template appAsyncLoading>
|
|
<app-skeleton height="2.5rem" [count]="2" />
|
|
</ng-template>
|
|
</app-async>
|
|
`,
|
|
})
|
|
export class WatMoetIkRegelenSection {
|
|
protected store = inject(BigProfileStore);
|
|
|
|
private eligible = computed(() => {
|
|
const d = successOf(this.store.decisions());
|
|
return d?.eligibleForHerregistratie ?? false;
|
|
});
|
|
|
|
protected tasks = computed(() => {
|
|
const p = successOf(this.store.profile());
|
|
return p ? tasksFromProfile(p.registration, this.eligible()) : undefined;
|
|
});
|
|
}
|