ehoandClaude Sonnet 5
43dc3210cd
The folder now equals the layer, as CLAUDE.md decision 2 requires. 33 directories move by git mv (25 flat, plus upload/'s 8 subfolders split across all three layers). 28 distinct @shared/ui/* specifiers rewrite across 73 files, longest-first. Five relative imports inside upload/ become @shared/ui aliases because their sibling now lives in a different layer; two stay relative because both ends stay in the same layer. Four .mdx docs get their seven broken story imports fixed; atomic-design.mdx's page-shell import is untouched, because layout/ does not move. No component, template, story title, or layer-tag comment changes. That is RD-28's job. Verified against the ticket's acceptance commands: the 26 flat directories become exactly 3 layer folders with the counts the ticket names, only three @shared/ui/* prefixes remain (atoms, molecules, organisms), the .mdx import count holds at 7, and the relative-import count inside ui/ drops from 7 to 2 as decision 4 requires. The @shared/ui/ occurrence count moves from 200 to 205: decision 4 mandates turning 5 of those 7 relative imports into @shared/ui/* aliases, which decision 3's "200 before, 200 after" check does not account for. The 5-occurrence gap is exactly the 5 conversions decision 4 names, not a lost or duplicated specifier. npm run ci --full passes: lint, typecheck, dep:check, format, tokens, seam, both apps' + both libraries' tests, both apps' localized build, audit, backend tests, all three generated-artifact drift checks, and both Storybook instances' build + axe-core a11y suite (67+45 suites, 198+112 tests, all green). Co-Authored-By: Claude Sonnet 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;
|
|
});
|
|
}
|