feat(design): adopt CIBG component patterns (header, forms, wizards, dashboard)
Re-skins the app's layout on top of the CIBG Huisstijl theme (previous commit) so it
matches designsystem.cibg.nl, not just its colour tokens — magenta ("robijn") header,
horizontal nav, and the CIBG component markup for forms/wizards/dashboard.
- Header: logo block + robijn titlebar (breadcrumb + user menu) + grey horizontal nav
(4 links) replacing the dashboard side-nav; breadcrumb restyled for the titlebar
(no background of its own — CIBG's global `header nav` rule otherwise bleeds a grey
fill into it, fixed by scoping an override inside BreadcrumbComponent).
- Forms: form-field/radio-group/checkbox rebuilt on CIBG's horizontal `form-group row`
/ `form-check.styled` markup (label col-md-4, control col-md-8); same input() APIs.
- Wizards: stepper rebuilt as the CIBG "stappenindicator" (numbered circles, visited
steps clickable for back-nav, title merged in); wizard-shell adopts the CIBG
procesnavigatie button row. Back-navigation wired into all three wizard machines
(registratie-wizard already had it; added `GaNaarStap` to intake/herregistratie
machines, pure + spec'd).
- New shared/ui molecules: confirmation (animated bevestiging checkmark, replaces
plain alerts on submit), review-section (controlestap sections with "Wijzigen"),
application-list/application-link (CIBG "aanvragen" rows, replace the dashboard's
card grid and aanvraag-block).
- Cleanup: delete side-nav and now-unused styles.scss utilities (.app-overview,
.app-form-panel, .app-card-grid); correct design-tokens.mdx (it referenced tokens
that no longer exist) and document the CIBG-value token bridge.
Verified: build/lint/check:tokens green, 178 tests pass (4 new GaNaarStap cases), and
manually driven end-to-end (dashboard, a full herregistratie submission through to the
confirmation screen, mobile width, keyboard focus).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,9 +1,6 @@
|
||||
import { Component, computed, input, output } from '@angular/core';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { HeadingComponent } from '@shared/ui/heading/heading.component';
|
||||
import { StatusBadgeComponent } from '@shared/ui/status-badge/status-badge.component';
|
||||
import { ButtonComponent } from '@shared/ui/button/button.component';
|
||||
import { CardComponent } from '@shared/ui/card/card.component';
|
||||
import { ApplicationLinkComponent } from '@shared/ui/application-link/application-link.component';
|
||||
import { Aanvraag, AanvraagType } from '@registratie/domain/aanvraag';
|
||||
import { blockActions } from '@registratie/domain/block-actions';
|
||||
|
||||
@@ -13,53 +10,30 @@ const TYPE_LABELS: Record<AanvraagType, string> = {
|
||||
intake: $localize`:@@aanvraagBlock.type.intake:Herregistratie-intake`,
|
||||
};
|
||||
|
||||
/** Organism: one application on the dashboard's"Mijn aanvragen" list. Which badge
|
||||
+ actions it shows is driven by the pure `blockActions(status)` and the status
|
||||
tag; the block only renders. Composes card + status-badge + button. */
|
||||
/** Organism: one application on the dashboard's "Mijn aanvragen" list, rendered as
|
||||
a CIBG Huisstijl "aanvragen" row (application-link). Which text/actions it shows
|
||||
is driven by the pure `blockActions(status)` and the status tag; the block only
|
||||
renders. Only a resumable Concept is clickable — a resolved status has nothing
|
||||
to navigate to, so it renders as a plain (non-anchor) row. */
|
||||
@Component({
|
||||
selector: 'app-aanvraag-block',
|
||||
imports: [DatePipe, HeadingComponent, StatusBadgeComponent, ButtonComponent, CardComponent],
|
||||
styles: [`
|
||||
.head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rhc-space-max-md); flex-wrap: wrap; }
|
||||
.actions { display: flex; gap: var(--rhc-space-max-md); margin-block-start: var(--rhc-space-max-md); }
|
||||
`],
|
||||
imports: [ButtonComponent, ApplicationLinkComponent],
|
||||
// display:contents — see application-link.component.ts (keeps <li> a direct <ul> child).
|
||||
styles: [`:host{display:contents}`],
|
||||
template: `
|
||||
<app-card>
|
||||
<div class="head">
|
||||
<app-heading [level]="3">{{ typeLabel() }}</app-heading>
|
||||
<app-status-badge [label]="badgeLabel()" [color]="badgeColor()" />
|
||||
</div>
|
||||
|
||||
@switch (aanvraag().status.tag) {
|
||||
@case ('Concept') {
|
||||
<p i18n="@@aanvraagBlock.stap">Stap {{ stap().index }} van {{ stap().count }}</p>
|
||||
}
|
||||
@case ('InBehandeling') {
|
||||
<p i18n="@@aanvraagBlock.inBehandeling">Referentie {{ ref() }} · ingediend op {{ aanvraag().submittedAt | date: 'longDate' }}</p>
|
||||
@if (manual()) {
|
||||
<p class="app-text-subtle" i18n="@@aanvraagBlock.manual">Uw aanvraag wordt handmatig beoordeeld in de backoffice.</p>
|
||||
}
|
||||
}
|
||||
@case ('Goedgekeurd') {
|
||||
<p i18n="@@aanvraagBlock.goedgekeurd">Referentie {{ ref() }}</p>
|
||||
}
|
||||
@case ('Afgewezen') {
|
||||
<p i18n="@@aanvraagBlock.afgewezen">Referentie {{ ref() }}</p>
|
||||
<p class="app-text-subtle">{{ reden() }}</p>
|
||||
}
|
||||
}
|
||||
|
||||
@if (actions().length) {
|
||||
<div class="actions">
|
||||
@if (actions().includes('resume')) {
|
||||
<app-button (click)="resume.emit()" i18n="@@aanvraagBlock.verderGaan">Verder gaan</app-button>
|
||||
}
|
||||
@if (actions().includes('cancel')) {
|
||||
<app-button variant="subtle" (click)="cancel.emit()" i18n="@@aanvraagBlock.annuleren">Annuleren</app-button>
|
||||
}
|
||||
<app-application-link
|
||||
[heading]="typeLabel()"
|
||||
[status]="statusText()"
|
||||
[subtitle]="subtitle()"
|
||||
[cta]="actions().includes('resume') ? verderGaan : ''"
|
||||
[clickable]="actions().includes('resume')"
|
||||
(activate)="resume.emit()">
|
||||
@if (actions().includes('cancel')) {
|
||||
<div applicationActions>
|
||||
<app-button variant="subtle" (click)="cancel.emit()" i18n="@@aanvraagBlock.annuleren">Annuleren</app-button>
|
||||
</div>
|
||||
}
|
||||
</app-card>
|
||||
</app-application-link>
|
||||
`,
|
||||
})
|
||||
export class AanvraagBlockComponent {
|
||||
@@ -68,42 +42,30 @@ export class AanvraagBlockComponent {
|
||||
resume = output<void>();
|
||||
cancel = output<void>();
|
||||
|
||||
protected readonly verderGaan = $localize`:@@aanvraagBlock.verderGaan:Verder gaan`;
|
||||
|
||||
protected typeLabel = computed(() => TYPE_LABELS[this.aanvraag().type]);
|
||||
protected actions = computed(() => blockActions(this.aanvraag().status));
|
||||
|
||||
// Status-tag → badge presentation (the UI's mapping, not a domain rule).
|
||||
protected badgeLabel = computed(() => {
|
||||
switch (this.aanvraag().status.tag) {
|
||||
case 'Concept': return $localize`:@@aanvraagBlock.badge.concept:Concept`;
|
||||
case 'InBehandeling': return $localize`:@@aanvraagBlock.badge.inBehandeling:In behandeling`;
|
||||
case 'Goedgekeurd': return $localize`:@@aanvraagBlock.badge.goedgekeurd:Goedgekeurd`;
|
||||
case 'Afgewezen': return $localize`:@@aanvraagBlock.badge.afgewezen:Afgewezen`;
|
||||
// Status-tag → row text (the UI's mapping, not a domain rule).
|
||||
protected statusText = computed(() => {
|
||||
const s = this.aanvraag().status;
|
||||
switch (s.tag) {
|
||||
case 'Concept': return $localize`:@@aanvraagBlock.stap:Stap ${s.stepIndex + 1}:index: van ${s.stepCount}:count:`;
|
||||
case 'InBehandeling': return $localize`:@@aanvraagBlock.inBehandeling:Referentie ${s.referentie}:ref: · ingediend op ${formatNL(this.aanvraag().submittedAt)}:datum:`;
|
||||
case 'Goedgekeurd': return $localize`:@@aanvraagBlock.goedgekeurd:Referentie ${s.referentie}:ref:`;
|
||||
case 'Afgewezen': return $localize`:@@aanvraagBlock.afgewezen:Referentie ${s.referentie}:ref:`;
|
||||
}
|
||||
});
|
||||
protected badgeColor = computed(() => {
|
||||
switch (this.aanvraag().status.tag) {
|
||||
case 'Concept': return 'var(--rhc-color-cool-grey-300)';
|
||||
case 'InBehandeling': return 'var(--rhc-color-oranje-500)';
|
||||
case 'Goedgekeurd': return 'var(--rhc-color-groen-500)';
|
||||
case 'Afgewezen': return 'var(--rhc-color-rood-500)';
|
||||
}
|
||||
});
|
||||
|
||||
// Field accessors per tag (the template @switch guarantees the right shape).
|
||||
protected stap = computed(() => {
|
||||
// Secondary note under the status line, when there's one to show.
|
||||
protected subtitle = computed(() => {
|
||||
const s = this.aanvraag().status;
|
||||
return s.tag === 'Concept' ? { index: s.stepIndex + 1, count: s.stepCount } : { index: 0, count: 0 };
|
||||
});
|
||||
protected ref = computed(() => {
|
||||
const s = this.aanvraag().status;
|
||||
return s.tag !== 'Concept' ? s.referentie : '';
|
||||
});
|
||||
protected manual = computed(() => {
|
||||
const s = this.aanvraag().status;
|
||||
return s.tag === 'InBehandeling' && s.manual;
|
||||
});
|
||||
protected reden = computed(() => {
|
||||
const s = this.aanvraag().status;
|
||||
return s.tag === 'Afgewezen' ? s.reden : '';
|
||||
if (s.tag === 'InBehandeling' && s.manual) return $localize`:@@aanvraagBlock.manual:Uw aanvraag wordt handmatig beoordeeld in de backoffice.`;
|
||||
if (s.tag === 'Afgewezen') return s.reden;
|
||||
return '';
|
||||
});
|
||||
}
|
||||
|
||||
function formatNL(iso?: string): string {
|
||||
return iso ? new Date(iso).toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' }) : '';
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { applicationConfig } from '@storybook/angular';
|
||||
import { provideRouter } from '@angular/router';
|
||||
import { AanvraagBlockComponent } from './aanvraag-block.component';
|
||||
import { Aanvraag } from '@registratie/domain/aanvraag';
|
||||
|
||||
@@ -14,6 +16,12 @@ const base = {
|
||||
const meta: Meta<AanvraagBlockComponent> = {
|
||||
title: 'Organisms/Aanvraag Block',
|
||||
component: AanvraagBlockComponent,
|
||||
decorators: [applicationConfig({ providers: [provideRouter([])] })],
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
// A row is an <li> — the "applications" list styling needs the real list context.
|
||||
template: `<ul class="list-unstyled"><app-aanvraag-block [aanvraag]="aanvraag" /></ul>`,
|
||||
}),
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<AanvraagBlockComponent>;
|
||||
|
||||
@@ -22,7 +22,6 @@ export type AdresErrors = Partial<Record<keyof AdresValue, string>>;
|
||||
styles: [`
|
||||
fieldset{border:0;margin:0;padding:0;min-inline-size:0}
|
||||
legend{padding:0;font-weight:var(--rhc-text-font-weight-semi-bold);margin-block-end:var(--rhc-space-max-md)}
|
||||
app-form-field + app-form-field{display:block;margin-block-start:var(--rhc-space-max-lg)}
|
||||
`],
|
||||
template: `
|
||||
<fieldset>
|
||||
|
||||
@@ -28,7 +28,10 @@ import { ApiClient } from '@shared/infrastructure/api-client';
|
||||
</div>
|
||||
} @else {
|
||||
<app-heading [level]="2" i18n="@@changeRequest.heading">Adreswijziging doorgeven</app-heading>
|
||||
<form (ngSubmit)="onSubmit()" class="app-form app-form-panel app-section">
|
||||
<form (ngSubmit)="onSubmit()" class="form-horizontal app-section">
|
||||
<div class="form-header">
|
||||
<div class="form-action"><span class="meta" i18n="@@form.verplichteVelden">* verplichte velden</span></div>
|
||||
</div>
|
||||
<app-address-fields
|
||||
idPrefix="cr"
|
||||
[value]="adres()"
|
||||
|
||||
@@ -2,13 +2,13 @@ import { Component, computed, inject } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
|
||||
import { HeadingComponent } from '@shared/ui/heading/heading.component';
|
||||
import { LinkComponent } from '@shared/ui/link/link.component';
|
||||
import { AlertComponent } from '@shared/ui/alert/alert.component';
|
||||
import { SkeletonComponent } from '@shared/ui/skeleton/skeleton.component';
|
||||
import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
|
||||
import { CardComponent } from '@shared/ui/card/card.component';
|
||||
import { TaskListComponent } from '@shared/ui/task-list/task-list.component';
|
||||
import { SideNavComponent, NavItem } from '@shared/layout/side-nav/side-nav.component';
|
||||
import { ApplicationListComponent } from '@shared/ui/application-list/application-list.component';
|
||||
import { ApplicationLinkComponent } from '@shared/ui/application-link/application-link.component';
|
||||
import { ASYNC } from '@shared/ui/async/async.component';
|
||||
import { RegistrationSummaryComponent } from '@registratie/ui/registration-summary/registration-summary.component';
|
||||
import { RegistrationTableComponent } from '@registratie/ui/registration-table/registration-table.component';
|
||||
@@ -24,24 +24,21 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
|
||||
@Component({
|
||||
selector: 'app-dashboard-page',
|
||||
imports: [
|
||||
PageShellComponent, HeadingComponent, LinkComponent, AlertComponent, SkeletonComponent,
|
||||
DataRowComponent, CardComponent, TaskListComponent, SideNavComponent, ...ASYNC,
|
||||
PageShellComponent, HeadingComponent, AlertComponent, SkeletonComponent,
|
||||
DataRowComponent, CardComponent, TaskListComponent, ApplicationListComponent, ApplicationLinkComponent, ...ASYNC,
|
||||
RegistrationSummaryComponent, RegistrationTableComponent, AanvraagBlockComponent,
|
||||
],
|
||||
template: `
|
||||
<app-page-shell i18n-heading="@@dashboard.heading" heading="Mijn overzicht" i18n-intro="@@dashboard.intro" intro="Welkom in uw persoonlijke omgeving van het BIG-register. Hier ziet u uw registratie en regelt u uw zaken.">
|
||||
<div class="app-overview">
|
||||
<app-side-nav [items]="nav" />
|
||||
|
||||
<div class="app-stack">
|
||||
@if (aanvragen().length) {
|
||||
<section>
|
||||
<app-heading [level]="2" i18n="@@dashboard.mijnAanvragen">Mijn aanvragen</app-heading>
|
||||
<div class="app-stack app-section">
|
||||
<app-application-list class="app-section">
|
||||
@for (a of aanvragen(); track a.id) {
|
||||
<app-aanvraag-block animate.enter="app-item-enter" animate.leave="app-item-leave" [aanvraag]="a" (resume)="resume(a)" (cancel)="cancelAanvraag(a)" />
|
||||
}
|
||||
</div>
|
||||
</app-application-list>
|
||||
</section>
|
||||
}
|
||||
|
||||
@@ -68,7 +65,7 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
|
||||
<app-registration-summary [reg]="$any(p).registration" />
|
||||
</div>
|
||||
<app-card class="app-section" i18n-heading="@@dashboard.persoonsgegevens" heading="Persoonsgegevens (BRP)">
|
||||
<dl>
|
||||
<dl class="row mb-0">
|
||||
<app-data-row i18n-key="@@dashboard.straat" key="Straat" [value]="$any(p).person.adres.straat" />
|
||||
<app-data-row i18n-key="@@dashboard.postcode" key="Postcode" [value]="$any(p).person.adres.postcode" />
|
||||
<app-data-row i18n-key="@@dashboard.woonplaats" key="Woonplaats" [value]="$any(p).person.adres.woonplaats" />
|
||||
@@ -100,19 +97,13 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
|
||||
|
||||
<section>
|
||||
<app-heading [level]="2" i18n="@@dashboard.watWiltUDoen">Wat wilt u doen?</app-heading>
|
||||
<ul class="app-card-grid app-section">
|
||||
<app-application-list class="app-section">
|
||||
@for (a of acties; track a.to) {
|
||||
<li>
|
||||
<app-card [heading]="a.titel">
|
||||
<p>{{ a.tekst }}</p>
|
||||
<app-link [to]="a.to">{{ a.actie }} →</app-link>
|
||||
</app-card>
|
||||
</li>
|
||||
<app-application-link [heading]="a.titel" [subtitle]="a.tekst" [cta]="a.actie" [to]="a.to" />
|
||||
}
|
||||
</ul>
|
||||
</app-application-list>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</app-page-shell>
|
||||
`,
|
||||
})
|
||||
@@ -158,21 +149,15 @@ export class DashboardPage {
|
||||
return tasksFromProfile(reg, this.eligible());
|
||||
}
|
||||
|
||||
/** Portal sections (navigation, not actions). */
|
||||
protected readonly nav: NavItem[] = [
|
||||
{ label: $localize`:@@dashboard.nav.overzicht:Overzicht`, to: '/dashboard' },
|
||||
{ label: $localize`:@@dashboard.nav.gegevens:Mijn gegevens`, to: '/registratie' },
|
||||
{ label: $localize`:@@dashboard.nav.herregistratie:Herregistratie`, to: '/herregistratie' },
|
||||
{ label: $localize`:@@dashboard.nav.inschrijven:Inschrijven`, to: '/registreren' },
|
||||
{ label: $localize`:@@dashboard.nav.concepten:Functionele patronen`, to: '/concepts' },
|
||||
{ label: $localize`:@@dashboard.nav.brief:Brief opstellen`, to: '/brief' },
|
||||
];
|
||||
|
||||
/** Primary transactional actions, as a card grid. */
|
||||
/** Primary transactional actions, as an "aanvragen" list (see CIBG's
|
||||
componenten/aanvragen). The core portal sections live in the header nav now;
|
||||
the teaching pages (concepts/brief) are only reachable from here. */
|
||||
protected readonly acties = [
|
||||
{ to: '/registreren', titel: $localize`:@@dashboard.actie.inschrijven.titel:Inschrijven`, tekst: $localize`:@@dashboard.actie.inschrijven.tekst:Schrijf u in in het BIG-register via de registratiewizard.`, actie: $localize`:@@dashboard.actie.inschrijven.actie:Start inschrijving` },
|
||||
{ to: '/herregistratie', titel: $localize`:@@dashboard.actie.herregistratie.titel:Herregistratie aanvragen`, tekst: $localize`:@@dashboard.actie.herregistratie.tekst:Verleng uw registratie voor de komende periode.`, actie: $localize`:@@dashboard.actie.herregistratie.actie:Vraag aan` },
|
||||
{ to: '/intake', titel: $localize`:@@dashboard.actie.intake.titel:Herregistratie-intake`, tekst: $localize`:@@dashboard.actie.intake.tekst:Vragenlijst met vertakkingen.`, actie: $localize`:@@dashboard.actie.intake.actie:Start intake` },
|
||||
{ to: '/registratie', titel: $localize`:@@dashboard.actie.wijzigen.titel:Gegevens wijzigen`, tekst: $localize`:@@dashboard.actie.wijzigen.tekst:Bekijk uw gegevens of geef een wijziging door.`, actie: $localize`:@@dashboard.actie.wijzigen.actie:Bekijk gegevens` },
|
||||
{ to: '/concepts', titel: $localize`:@@dashboard.actie.concepten.titel:Functionele patronen`, tekst: $localize`:@@dashboard.actie.concepten.tekst:Bekijk de FP/TEA-bouwstenen van deze POC.`, actie: $localize`:@@dashboard.actie.concepten.actie:Bekijk patronen` },
|
||||
{ to: '/brief', titel: $localize`:@@dashboard.actie.brief.titel:Brief opstellen`, tekst: $localize`:@@dashboard.actie.brief.tekst:Stel een brief samen uit vaste en vrije onderdelen.`, actie: $localize`:@@dashboard.actie.brief.actie:Start brief` },
|
||||
];
|
||||
}
|
||||
|
||||
@@ -7,7 +7,9 @@ import { ButtonComponent } from '@shared/ui/button/button.component';
|
||||
import { AlertComponent } from '@shared/ui/alert/alert.component';
|
||||
import { SkeletonComponent } from '@shared/ui/skeleton/skeleton.component';
|
||||
import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
|
||||
import { WizardShellComponent, WizardError, WizardStatus } from '@shared/layout/wizard-shell/wizard-shell.component';
|
||||
import { ReviewSectionComponent } from '@shared/ui/review-section/review-section.component';
|
||||
import { ConfirmationComponent } from '@shared/ui/confirmation/confirmation.component';
|
||||
import { WizardShellComponent, WizardError, WizardStatus, naarStapLabel } from '@shared/layout/wizard-shell/wizard-shell.component';
|
||||
import { ASYNC } from '@shared/ui/async/async.component';
|
||||
import { AddressFieldsComponent } from '@registratie/ui/address-fields/address-fields.component';
|
||||
import { createStore } from '@shared/application/store';
|
||||
@@ -54,7 +56,7 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
|
||||
selector: 'app-registratie-wizard',
|
||||
imports: [
|
||||
FormsModule, FormFieldComponent, TextInputComponent, RadioGroupComponent, ButtonComponent,
|
||||
AlertComponent, SkeletonComponent, DataRowComponent, WizardShellComponent,
|
||||
AlertComponent, SkeletonComponent, DataRowComponent, ReviewSectionComponent, ConfirmationComponent, WizardShellComponent,
|
||||
AddressFieldsComponent, DocumentUploadComponent, ...ASYNC,
|
||||
],
|
||||
template: `
|
||||
@@ -62,6 +64,7 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
|
||||
[steps]="stepLabels"
|
||||
[current]="cursor()"
|
||||
[stepTitle]="stepTitle()"
|
||||
i18n-processName="@@regWizard.processName" processName="Inschrijven in het BIG-register"
|
||||
[status]="shellStatus()"
|
||||
[primaryLabel]="primaryLabel()"
|
||||
[canGoBack]="cursor() > 0"
|
||||
@@ -71,7 +74,8 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
|
||||
(primary)="onPrimary()"
|
||||
(back)="dispatch({ tag: 'Back' })"
|
||||
(cancel)="restart()"
|
||||
(retry)="onRetry()">
|
||||
(retry)="onRetry()"
|
||||
(goToStep)="dispatch({ tag: 'GaNaarStap', cursor: $event })">
|
||||
|
||||
@switch (step()) {
|
||||
@case ('adres') {
|
||||
@@ -119,7 +123,7 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
|
||||
[ngModel]="draft().beroep ?? ''" (ngModelChange)="dispatch({ tag: 'DeclareerBeroep', beroep: $event })" />
|
||||
</app-form-field>
|
||||
} @else if (draft().beroep) {
|
||||
<dl class="app-section">
|
||||
<dl class="row mb-0 app-section">
|
||||
<app-data-row i18n-key="@@regWizard.beroepAfgeleid" key="Beroep (afgeleid uit diploma)" [value]="draft().beroep ?? ''" />
|
||||
</dl>
|
||||
}
|
||||
@@ -156,31 +160,35 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
|
||||
}
|
||||
@case ('controle') {
|
||||
<app-alert type="info" i18n="@@regWizard.controleer">Controleer uw gegevens en dien de registratie in.</app-alert>
|
||||
<dl class="app-section">
|
||||
<app-review-section i18n-heading="@@regWizard.sectie.adres" heading="Adres en correspondentie"
|
||||
i18n-editAriaLabel="@@regWizard.adresWijzigenAria" editAriaLabel="Wijzigen adresgegevens"
|
||||
(edit)="dispatch({ tag: 'GaNaarStap', cursor: 0 })">
|
||||
<app-data-row i18n-key="@@regWizard.summary.adres" key="Adres" [value]="adresSamenvatting()" />
|
||||
<app-data-row i18n-key="@@regWizard.summary.herkomstAdres" key="Herkomst adres" [value]="adresHerkomstLabel()" />
|
||||
<app-data-row i18n-key="@@regWizard.summary.correspondentie" key="Correspondentie" [value]="correspondentieLabel()" />
|
||||
@if (draft().correspondentie === 'email') {
|
||||
<app-data-row i18n-key="@@regWizard.summary.email" key="E-mailadres" [value]="draft().email ?? ''" />
|
||||
}
|
||||
</app-review-section>
|
||||
<app-review-section class="app-section" i18n-heading="@@regWizard.sectie.beroep" heading="Beroep en diploma"
|
||||
i18n-editAriaLabel="@@regWizard.diplomaWijzigenAria" editAriaLabel="Wijzigen beroep en diploma"
|
||||
(edit)="dispatch({ tag: 'GaNaarStap', cursor: 1 })">
|
||||
<app-data-row i18n-key="@@regWizard.summary.beroep" key="Beroep" [value]="draft().beroep ?? ''" />
|
||||
<app-data-row i18n-key="@@regWizard.summary.herkomstDiploma" key="Herkomst diploma" [value]="diplomaHerkomstLabel()" />
|
||||
@for (item of samenvattingVragen(); track item.vraag) {
|
||||
<app-data-row [key]="item.vraag" [value]="item.antwoord" />
|
||||
}
|
||||
</dl>
|
||||
<div class="app-button-row app-section">
|
||||
<app-button type="button" variant="subtle" (click)="dispatch({ tag: 'GaNaarStap', cursor: 0 })" i18n="@@regWizard.adresWijzigen">Adres wijzigen</app-button>
|
||||
<app-button type="button" variant="subtle" (click)="dispatch({ tag: 'GaNaarStap', cursor: 1 })" i18n="@@regWizard.diplomaWijzigen">Diploma wijzigen</app-button>
|
||||
</div>
|
||||
</app-review-section>
|
||||
}
|
||||
}
|
||||
|
||||
<div wizardSuccess>
|
||||
<app-alert type="ok" i18n="@@regWizard.success">Uw registratie is ontvangen. Uw referentienummer is {{ referentie() }}. Bewaar dit nummer voor uw administratie.</app-alert>
|
||||
<div class="app-section">
|
||||
<app-button variant="secondary" (click)="restart()" i18n="@@regWizard.nieuweRegistratie">Nieuwe registratie starten</app-button>
|
||||
</div>
|
||||
<app-confirmation i18n-title="@@regWizard.success.title" title="Uw registratie is ontvangen">
|
||||
<p class="app-section" i18n="@@regWizard.success.referentie">Uw referentienummer is {{ referentie() }}. Bewaar dit nummer voor uw administratie.</p>
|
||||
<div class="app-section">
|
||||
<app-button variant="secondary" (click)="restart()" i18n="@@regWizard.nieuweRegistratie">Nieuwe registratie starten</app-button>
|
||||
</div>
|
||||
</app-confirmation>
|
||||
</div>
|
||||
</app-wizard-shell>
|
||||
`,
|
||||
@@ -243,7 +251,11 @@ export class RegistratieWizardComponent {
|
||||
protected failedError = computed(() => whenTag(this.state(), 'Mislukt')?.error ?? '');
|
||||
|
||||
// --- Presentational wiring for the shared wizard shell ---------------------
|
||||
protected primaryLabel = computed(() => (this.step() === 'controle' ? $localize`:@@regWizard.indienen:Registratie indienen` : $localize`:@@wizard.volgende:Volgende`));
|
||||
protected primaryLabel = computed(() => {
|
||||
if (this.step() === 'controle') return $localize`:@@regWizard.indienen:Registratie indienen`;
|
||||
const next = this.cursor() + 1;
|
||||
return naarStapLabel(next + 1, this.stepLabels[next]);
|
||||
});
|
||||
protected errorMessage = computed(() => $localize`:@@regWizard.indienenMislukt:Het indienen is niet gelukt:` + ` ${this.failedError()}`);
|
||||
protected shellStatus = computed<WizardStatus>(() => {
|
||||
switch (this.state().tag) {
|
||||
|
||||
@@ -12,7 +12,7 @@ import { CardComponent } from '@shared/ui/card/card.component';
|
||||
imports: [DatePipe, DataRowComponent, StatusBadgeComponent, CardComponent],
|
||||
template: `
|
||||
<app-card>
|
||||
<dl>
|
||||
<dl class="row mb-0">
|
||||
<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" />
|
||||
|
||||
Reference in New Issue
Block a user