f1f4f982a6
- Fix full-bleed header/footer (align-items:stretch + block hosts; centered content column via shared --app-content-max). - New templates/page-shell (back-link + heading + intro + content, narrow mode); all pages refactored to compose it. - Async state management with native httpResource + <app-async> wrapper that renders exactly one of loading/empty/error/loaded (impossible states unrepresentable); delayed spinner + skeleton atoms for slow/fast connections. - Scenario interceptor (?scenario=slow|loading|empty|error) to demo every state. - Storybook: spinner/skeleton/page-shell/async-states stories. - README rewritten as a guide (atomic design, reuse benefits, state handling). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
55 lines
2.2 KiB
TypeScript
55 lines
2.2 KiB
TypeScript
import { Component, signal } from '@angular/core';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { PageShellComponent } from '../../templates/page-shell/page-shell.component';
|
|
import { AlertComponent } from '../../atoms/alert/alert.component';
|
|
import { ButtonComponent } from '../../atoms/button/button.component';
|
|
import { FormFieldComponent } from '../../molecules/form-field/form-field.component';
|
|
import { TextInputComponent } from '../../atoms/text-input/text-input.component';
|
|
|
|
/** A whole new page built from existing building blocks — no new components.
|
|
This is the atomic-design payoff: a new flow is just composition. */
|
|
@Component({
|
|
selector: 'app-herregistratie-page',
|
|
imports: [
|
|
FormsModule, PageShellComponent, AlertComponent,
|
|
ButtonComponent, FormFieldComponent, TextInputComponent,
|
|
],
|
|
template: `
|
|
<app-page-shell heading="Herregistratie aanvragen" backLink="/dashboard">
|
|
<app-alert type="info">
|
|
Uw huidige registratie verloopt op 1 september 2027. Vraag tijdig herregistratie aan.
|
|
</app-alert>
|
|
|
|
@if (submitted()) {
|
|
<div style="margin-top:1.5rem">
|
|
<app-alert type="ok">Uw aanvraag tot herregistratie is ontvangen.</app-alert>
|
|
</div>
|
|
} @else {
|
|
<form (ngSubmit)="onSubmit()" style="max-width:28rem;margin-top:1.5rem">
|
|
<app-form-field label="Gewerkte uren (afgelopen 5 jaar)" fieldId="uren" [error]="urenError()">
|
|
<app-text-input inputId="uren" [(ngModel)]="uren" name="uren" [invalid]="!!urenError()" placeholder="bijv. 4160" />
|
|
</app-form-field>
|
|
<app-form-field label="Behaalde nascholingspunten" fieldId="punten">
|
|
<app-text-input inputId="punten" [(ngModel)]="punten" name="punten" placeholder="bijv. 200" />
|
|
</app-form-field>
|
|
<div style="margin-top:1rem">
|
|
<app-button type="submit" variant="primary">Herregistratie aanvragen</app-button>
|
|
</div>
|
|
</form>
|
|
}
|
|
</app-page-shell>
|
|
`,
|
|
})
|
|
export class HerregistratiePage {
|
|
uren = '';
|
|
punten = '';
|
|
urenError = signal('');
|
|
submitted = signal(false);
|
|
|
|
onSubmit() {
|
|
if (!this.uren.trim()) { this.urenError.set('Vul het aantal gewerkte uren in.'); return; }
|
|
this.urenError.set('');
|
|
this.submitted.set(true);
|
|
}
|
|
}
|