Wrap every user-facing Dutch string in Angular's first-party i18n — `i18n`/ `i18n-<attr>` in templates, `$localize` in TS (value-objects, machines, commands, label constants, shared-component defaults). Source locale stays nl; a second locale is now a translation file, not a code change. - M3: ~145 strings localized with stable @@ ids across registratie, herregistratie, auth, shared/ui, shared/layout. Skipped: showcase, debug-state, scenario interceptor, generated client, specs/stories, raw status enum tags, internal parse* diagnostics. - M4: single shared JA_NEE (localized labels) in radio-group; both wizard copies removed. Gate green: lint, check:tokens, build, test 77/77. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
46 lines
2.4 KiB
TypeScript
46 lines
2.4 KiB
TypeScript
import { Component, input } from '@angular/core';
|
|
import { DatePipe } from '@angular/common';
|
|
import { Registration } from '@registratie/domain/registration';
|
|
import { statusColor, statusLabel } from '@registratie/domain/registration.policy';
|
|
import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
|
|
import { StatusBadgeComponent } from '@shared/ui/status-badge/status-badge.component';
|
|
import { CardComponent } from '@shared/ui/card/card.component';
|
|
|
|
/** Organism: registration summary card. Composes data-row molecules + status-badge atom. */
|
|
@Component({
|
|
selector: 'app-registration-summary',
|
|
imports: [DatePipe, DataRowComponent, StatusBadgeComponent, CardComponent],
|
|
template: `
|
|
<app-card>
|
|
<dl class="rhc-data-summary rhc-data-summary--row">
|
|
<app-data-row i18n-key="@@summary.bigNummer" key="BIG-nummer" [value]="reg().bigNummer" />
|
|
<app-data-row i18n-key="@@summary.naam" key="Naam" [value]="reg().naam" />
|
|
<app-data-row i18n-key="@@summary.beroep" key="Beroep" [value]="reg().beroep" />
|
|
<app-data-row i18n-key="@@summary.status" key="Status">
|
|
<app-status-badge [label]="label()" [color]="color()" />
|
|
</app-data-row>
|
|
<app-data-row i18n-key="@@summary.registratiedatum" key="Registratiedatum" [value]="reg().registratiedatum | date:'longDate'" />
|
|
<!-- Each status variant renders only the row its own data supports. -->
|
|
@switch (reg().status.tag) {
|
|
@case ('Geregistreerd') {
|
|
<app-data-row i18n-key="@@summary.uiterste" key="Uiterste herregistratie" [value]="$any(reg().status).herregistratieDatum | date:'longDate'" />
|
|
}
|
|
@case ('Geschorst') {
|
|
<app-data-row i18n-key="@@summary.geschorstTot" key="Geschorst tot" [value]="$any(reg().status).geschorstTot | date:'longDate'" />
|
|
<app-data-row i18n-key="@@summary.reden" key="Reden" [value]="$any(reg().status).reden" />
|
|
}
|
|
@case ('Doorgehaald') {
|
|
<app-data-row i18n-key="@@summary.doorgehaaldOp" key="Doorgehaald op" [value]="$any(reg().status).doorgehaaldOp | date:'longDate'" />
|
|
<app-data-row i18n-key="@@summary.reden" key="Reden" [value]="$any(reg().status).reden" />
|
|
}
|
|
}
|
|
</dl>
|
|
</app-card>
|
|
`,
|
|
})
|
|
export class RegistrationSummaryComponent {
|
|
reg = input.required<Registration>();
|
|
protected label = () => statusLabel(this.reg().status.tag);
|
|
protected color = () => statusColor(this.reg().status.tag);
|
|
}
|