Architect-review remediation: enforce conventions, prod-safe tooling, one form idiom, resilience seams
Acts on the showcase review. Four workstreams; all tests green (npm run lint, 70 FE tests, ng build, 33 backend tests). Enforcement + CI: - eslint.config.mjs bans `any` and enforces layer/context boundaries (domain ≠ Angular; herregistratie → registratie → shared, auth → shared); `npm run lint` added; ajv 6 scoped to ESLint via nested override. - .github/workflows/ci.yml: FE lint+check:tokens+test+build, backend dotnet test, and an API-client drift check. One form idiom (the headline finding): - change-request-form converged onto the wizard pattern — change-request.machine.ts (Model/Msg/reduce + value objects) + submit-change-request.ts (Result) + a real POST /api/v1/change-requests (server re-validates). Spec + story added; the detail page no longer holds an ad-hoc success signal. Resilience/observability seam: - api-client.provider.ts: request timeout, X-Correlation-Id, Idempotency-Key for writes; comments naming the retry/auth seams. - Backend logs correlation id + a no-PII submit-audit line; /api/v1 prefix + backward-compat note; client regenerated. Quick wins: - Dev tooling excluded from prod: scenario.interceptor wired only under isDevMode() (?scenario= inert in prod); debug panel @if(isDev) (tree-shaken out). - src/environments + apiBaseUrl into provideApiClient (angular.json fileReplacements). - Backend /health + /health/ready. - Debug view PII-minimised (redactProfile: name/address/DOB redacted, BIG masked). - IntakePolicyAdapter (removes inline resource in the intake wizard). - README de-staled; CLAUDE.md gains EN/NL + forms-one-idiom + lint/CI notes. - Stories: text-input, link, data-row, site-header, site-footer, change-request-form. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,60 +1,93 @@
|
||||
import { Component, output, signal } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Component, computed, inject, input } from '@angular/core';
|
||||
import { ButtonComponent } from '@shared/ui/button/button.component';
|
||||
import { HeadingComponent } from '@shared/ui/heading/heading.component';
|
||||
import { AddressFieldsComponent, AdresValue } from '@registratie/ui/address-fields/address-fields.component';
|
||||
import { Postcode, parsePostcode } from '@registratie/domain/value-objects/postcode';
|
||||
import { AlertComponent } from '@shared/ui/alert/alert.component';
|
||||
import { AddressFieldsComponent, AdresValue, AdresErrors } from '@registratie/ui/address-fields/address-fields.component';
|
||||
import { createStore } from '@shared/application/store';
|
||||
import { State, Msg, initial, reduce } from '@registratie/domain/change-request.machine';
|
||||
import { submitChangeRequest } from '@registratie/application/submit-change-request';
|
||||
import { ApiClient } from '@shared/infrastructure/api-client';
|
||||
|
||||
/** A submitted change request carries a *parsed* postcode (branded Postcode),
|
||||
not a raw string — downstream code can't receive an unvalidated one. */
|
||||
export interface ChangeRequest {
|
||||
street: string;
|
||||
zip: Postcode;
|
||||
city: string;
|
||||
}
|
||||
|
||||
/** Organism: change-request (adreswijziging) form. Reuses the same form-field
|
||||
molecule + text-input/button atoms as the login form. Field errors come
|
||||
straight from the parser's Result — no parallel "is it valid" flag to drift. */
|
||||
/**
|
||||
* Organism: change-request (adreswijziging) form. Uses the SAME idiom as the
|
||||
* wizards — all state in one signal driven by the pure `reduce`
|
||||
* (change-request.machine.ts), submitted via a `submit-*` command returning
|
||||
* `Result`. Renders the shared `<app-address-fields>`; the server re-validates.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-change-request-form',
|
||||
imports: [FormsModule, ButtonComponent, HeadingComponent, AddressFieldsComponent],
|
||||
imports: [ButtonComponent, HeadingComponent, AlertComponent, AddressFieldsComponent],
|
||||
template: `
|
||||
<app-heading [level]="2">Adreswijziging doorgeven</app-heading>
|
||||
<form (ngSubmit)="onSubmit()" style="max-width:28rem">
|
||||
<app-address-fields
|
||||
idPrefix="cr"
|
||||
[value]="{ straat: street, postcode: zip, woonplaats: city }"
|
||||
[errors]="{ straat: streetError(), postcode: zipError() }"
|
||||
(fieldChange)="onAdres($event)" />
|
||||
@if (state().tag === 'Submitted') {
|
||||
<app-alert type="ok">
|
||||
Uw adreswijziging is ontvangen (referentie {{ referentie() }}). U ontvangt binnen 5 werkdagen bericht.
|
||||
</app-alert>
|
||||
<div style="margin-top:1rem">
|
||||
<app-button type="submit" variant="primary">Wijziging indienen</app-button>
|
||||
<app-button variant="secondary" (click)="dispatch({ tag: 'Reset' })">Nieuwe wijziging doorgeven</app-button>
|
||||
</div>
|
||||
</form>
|
||||
} @else {
|
||||
<app-heading [level]="2">Adreswijziging doorgeven</app-heading>
|
||||
<form (ngSubmit)="onSubmit()" style="max-width:28rem">
|
||||
<app-address-fields
|
||||
idPrefix="cr"
|
||||
[value]="adres()"
|
||||
[errors]="errors()"
|
||||
(fieldChange)="dispatch({ tag: 'SetField', key: $event.key, value: $event.value })" />
|
||||
|
||||
@if (failedError()) {
|
||||
<div style="margin-top:1rem"><app-alert type="error">Het indienen is niet gelukt: {{ failedError() }}</app-alert></div>
|
||||
}
|
||||
|
||||
<div style="margin-top:1rem">
|
||||
<app-button type="submit" variant="primary" [disabled]="state().tag === 'Submitting'">
|
||||
{{ state().tag === 'Submitting' ? 'Bezig met indienen…' : 'Wijziging indienen' }}
|
||||
</app-button>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class ChangeRequestFormComponent {
|
||||
street = '';
|
||||
zip = '';
|
||||
city = '';
|
||||
streetError = signal('');
|
||||
zipError = signal('');
|
||||
submitted = output<ChangeRequest>();
|
||||
private apiClient = inject(ApiClient);
|
||||
private store = createStore<State, Msg>(initial, reduce);
|
||||
|
||||
onAdres(e: { key: keyof AdresValue; value: string }) {
|
||||
if (e.key === 'straat') this.street = e.value;
|
||||
else if (e.key === 'postcode') this.zip = e.value;
|
||||
else this.city = e.value;
|
||||
/** Optional seed so Storybook / tests can mount any state directly. */
|
||||
seed = input<State>(initial);
|
||||
|
||||
readonly state = this.store.model;
|
||||
protected dispatch = this.store.dispatch;
|
||||
|
||||
private editing = computed(() => (this.state().tag === 'Editing' ? (this.state() as Extract<State, { tag: 'Editing' }>) : null));
|
||||
protected errors = computed<AdresErrors>(() => this.editing()?.errors ?? {});
|
||||
protected failedError = computed(() => (this.state().tag === 'Failed' ? (this.state() as Extract<State, { tag: 'Failed' }>).error : ''));
|
||||
protected referentie = computed(() => (this.state().tag === 'Submitted' ? (this.state() as Extract<State, { tag: 'Submitted' }>).referentie : ''));
|
||||
|
||||
/** The address shown in the fields — the live draft while editing, the parsed
|
||||
data while submitting/failed (so the user sees what they sent). */
|
||||
protected adres = computed<AdresValue>(() => {
|
||||
const s = this.state();
|
||||
if (s.tag === 'Editing') return s.draft;
|
||||
if (s.tag === 'Submitting' || s.tag === 'Failed') {
|
||||
return { straat: s.data.straat, postcode: s.data.postcode, woonplaats: s.data.woonplaats };
|
||||
}
|
||||
return { straat: '', postcode: '', woonplaats: '' }; // Submitted shows the success alert, not the fields
|
||||
});
|
||||
|
||||
constructor() {
|
||||
queueMicrotask(() => this.dispatch({ tag: 'Seed', state: this.seed() }));
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
const street = this.street.trim();
|
||||
this.streetError.set(street ? '' : 'Vul straat en huisnummer in.');
|
||||
this.dispatch({ tag: 'Submit' });
|
||||
this.runIfSubmitting();
|
||||
}
|
||||
|
||||
const postcode = parsePostcode(this.zip);
|
||||
this.zipError.set(postcode.ok ? '' : postcode.error);
|
||||
|
||||
if (!street || !postcode.ok) return;
|
||||
this.submitted.emit({ street, zip: postcode.value, city: this.city.trim() });
|
||||
/** Effect: when we entered Submitting, call the command, then dispatch the outcome. */
|
||||
private async runIfSubmitting() {
|
||||
const s = this.state();
|
||||
if (s.tag !== 'Submitting') return;
|
||||
const r = await submitChangeRequest(this.apiClient, s.data);
|
||||
if (r.ok) this.dispatch({ tag: 'SubmitConfirmed', referentie: r.value });
|
||||
else this.dispatch({ tag: 'SubmitFailed', error: r.error });
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user