refactor: split intake-wizard into three step components (RD-22)

The parent held one @switch with three @case blocks — three screens' markup in one file. Each case is independent and needs only the answers, the errors, and (for two of them) the scholing threshold. Extract buitenland.step.ts, werk.step.ts, and review.step.ts as pure, presentational steps: inputs down, one narrow output up, dispatch never passed down. The parent keeps the store, the shell, and draftSync, and maps each step's output back to a machine message. This is the first *.step.ts in the repo, so it sets the naming convention that RD-23 does the same job with. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-04 22:58:52 +02:00
parent 4b3e6a6cfd
commit 8e1de38c68
7 changed files with 452 additions and 195 deletions
@@ -0,0 +1,84 @@
+import { Component, computed, input, output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { FormFieldComponent } from '@shared/ui/form-field/form-field.component';
+import { TextInputComponent } from '@shared/ui/text-input/text-input.component';
+import { RadioGroupComponent, JA_NEE } from '@shared/ui/radio-group/radio-group.component';
+import { Answers, Errors, lageUren } from '@herregistratie/domain/intake.machine';
+
+/** Step: the intake wizard's second screen (work experience in the Netherlands,
+    with the inline scholing follow-up). Pure & presentational — values in via
+    `answers`/`errors`/`scholingThreshold`, every keystroke out via `answerChange`.
+    No store, no services, no internal state; the parent owns the Model and
+    decides what a change means. */
+@Component({
+  selector: 'app-intake-werk-step',
+  imports: [FormsModule, FormFieldComponent, TextInputComponent, RadioGroupComponent],
+  template: `
+    <fieldset>
+      <app-form-field
+        i18n-label="@@intake.q.urenNl"
+        label="Gewerkte uren in Nederland (afgelopen 5 jaar)"
+        fieldId="uren"
+        required
+        [error]="err('uren')"
+      >
+        <app-text-input
+          inputId="uren"
+          [ngModel]="answers().uren ?? ''"
+          (ngModelChange)="answerChange.emit({ key: 'uren', value: $event })"
+          name="uren"
+          i18n-placeholder="@@intake.q.urenNlPlaceholder"
+          placeholder="bijv. 4160"
+        />
+      </app-form-field>
+    </fieldset>
+    @if (scholingZichtbaar()) {
+      <fieldset>
+        <app-form-field
+          i18n-label="@@intake.q.scholing"
+          label="U werkte relatief weinig uren. Heeft u aanvullende scholing gevolgd?"
+          fieldId="scholingGevolgd"
+          required
+          [error]="err('scholingGevolgd')"
+        >
+          <app-radio-group
+            name="scholingGevolgd"
+            [options]="jaNee"
+            [ngModel]="answers().scholingGevolgd ?? ''"
+            (ngModelChange)="answerChange.emit({ key: 'scholingGevolgd', value: $event })"
+          />
+        </app-form-field>
+      </fieldset>
+    }
+    @if (answers().scholingGevolgd === 'ja') {
+      <fieldset>
+        <app-form-field
+          i18n-label="@@intake.q.punten"
+          label="Behaalde nascholingspunten"
+          fieldId="punten"
+          required
+          [error]="err('punten')"
+        >
+          <app-text-input
+            inputId="punten"
+            [ngModel]="answers().punten ?? ''"
+            (ngModelChange)="answerChange.emit({ key: 'punten', value: $event })"
+            name="punten"
+            i18n-placeholder="@@intake.q.puntenPlaceholder"
+            placeholder="bijv. 200"
+          />
+        </app-form-field>
+      </fieldset>
+    }
+  `,
+})
+export class WerkStep {
+  answers = input.required<Answers>();
+  errors = input.required<Errors>();
+  scholingThreshold = input.required<number>();
+  answerChange = output<{ key: keyof Answers; value: string }>();
+
+  readonly jaNee = JA_NEE;
+  protected err = (k: keyof Answers) => this.errors()[k] ?? '';
+  protected scholingZichtbaar = computed(() => lageUren(this.answers(), this.scholingThreshold()));
+}