feat(fp): brief v3 — besluit-driven guided drafting

Compose the herregistratie letter from the besluit instead of a library hunt: the behandelaar picks positief/negatief (+ reden-checkboxes for a negatief) and the kern's standaardteksten follow the selection live. Front-end (this increment): - Kern is recomposed reactively from the besluit selection (new BesluitSelected machine msg + composeKern); the "Genereer conceptbrief" button is gone. The drafter's free text is preserved across a selection change. - The editor shows only the editable sections; the locked aanhef/slot render in the preview, not the authoring surface. Slot is a case-type template section (per templateId), documented as such. - The panel re-seeds from the letter via inferSelection() — the besluit + redenen are read back off the kern's passage blocks, so the selection survives reload with no new wire fields (derive, don't store). - letter-section drops the now-redundant per-section passage picker (besluit owns standaardteksten); keeps free-text + block edit/move/remove. Fix: app-checkbox now falls back to a unique per-instance id when checkboxId is omitted. The CIBG styled checkbox routes clicks through the label, so the shared id="undefined" made every reason label toggle the first input — the second checkbox could never be checked. Verified live (Playwright): each reason toggles independently. Backend/seam (brief v3 WIP): besluit/reason passage tags on the wire + seed, carried through the adapter parse boundary. Specs updated (besluit, brief.machine) and the affected stories re-pointed at the new API. FE lint + build + 253 vitest specs green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-20 18:53:53 +02:00
parent 62ba0b98c4
commit ba32e3dd9f
31 changed files with 4900 additions and 2878 deletions
@@ -0,0 +1,109 @@
+import { Component, computed, input, linkedSignal, output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CheckboxComponent } from '@shared/ui/checkbox/checkbox.component';
+import { RadioGroupComponent, RadioOption } from '@shared/ui/radio-group/radio-group.component';
+import { HeadingComponent } from '@shared/ui/heading/heading.component';
+import { Besluit, LibraryPassage } from '@brief/domain/brief';
+import { redenenFor } from '@brief/domain/besluit';
+
+/** Organism: the guided-drafting selector. The behandelaar picks the besluit
+    (positief/negatief) and — for a negatief besluit — the reden(en); the kern's
+    standaardteksten follow the selection LIVE (`selectionChange` → the store recomposes
+    the kern). This is the "no detective work" step: which passages belong is decided by
+    the besluit, not by the drafter hunting the library.
+
+    ponytail: view-state signals, not a form-machine — no validation/submission of its own;
+    it just reports the selection. `besluit`/`redenen` inputs re-seed it (via linkedSignal)
+    from the persisted letter on reload/undo, so it always reflects the letter's real state. */
+@Component({
+  selector: 'app-besluit-panel',
+  imports: [FormsModule, CheckboxComponent, RadioGroupComponent, HeadingComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+        padding: var(--rhc-space-max-lg);
+        border: 1px solid var(--rhc-color-border);
+        border-radius: var(--rhc-radius-md, 4px);
+        background: var(--rhc-color-background-subtle, transparent);
+      }
+      .redenen {
+        display: grid;
+        gap: var(--rhc-space-max-sm);
+        margin-block-start: var(--rhc-space-max-md);
+      }
+    `,
+  ],
+  template: `
+    <app-heading [level]="3">{{ heading() }}</app-heading>
+    <p class="app-text-subtle">{{ intro() }}</p>
+
+    <app-radio-group
+      name="besluit"
+      [options]="besluitOptions()"
+      [ngModel]="selected()"
+      (ngModelChange)="onBesluit($event)"
+    />
+
+    @if (redenen().length > 0) {
+      <div class="redenen" role="group" [attr.aria-label]="redenenLabel()">
+        @for (r of redenen(); track r.code) {
+          <app-checkbox
+            [checkboxId]="'reden-' + r.code"
+            [label]="r.label"
+            [ngModel]="checked().has(r.code)"
+            (ngModelChange)="toggle(r.code, $event)"
+          />
+        }
+      </div>
+    }
+  `,
+})
+export class BesluitPanelComponent {
+  /** The passage library — the redenen checkboxes are derived from its negatief tags. */
+  passages = input<readonly LibraryPassage[]>([]);
+  /** The letter's current selection, inferred from its kern passages — re-seeds the panel. */
+  besluit = input<Besluit | null>(null);
+  initialRedenen = input<readonly string[]>([]);
+
+  selectionChange = output<{ besluit: Besluit | null; reasons: string[] }>();
+
+  protected selected = linkedSignal<Besluit | ''>(() => this.besluit() ?? '');
+  protected checked = linkedSignal<ReadonlySet<string>>(() => new Set(this.initialRedenen()));
+
+  /** The reden checkboxes for the chosen besluit — derived from the reason-tagged passages. */
+  protected redenen = computed(() =>
+    this.selected() === '' ? [] : redenenFor(this.passages(), this.selected() as Besluit),
+  );
+
+  protected onBesluit(value: string) {
+    this.selected.set(value === 'positief' || value === 'negatief' ? value : '');
+    this.checked.set(new Set()); // redenen only apply to the chosen besluit
+    this.emit();
+  }
+
+  protected toggle(code: string, on: boolean) {
+    const next = new Set(this.checked());
+    if (on) next.add(code);
+    else next.delete(code);
+    this.checked.set(next);
+    this.emit();
+  }
+
+  private emit() {
+    this.selectionChange.emit({
+      besluit: this.selected() === '' ? null : (this.selected() as Besluit),
+      reasons: [...this.checked()],
+    });
+  }
+
+  protected besluitOptions = input<RadioOption[]>([
+    { value: 'positief', label: $localize`:@@brief.besluit.positief:Positief besluit (toewijzen)` },
+    { value: 'negatief', label: $localize`:@@brief.besluit.negatief:Negatief besluit (afwijzen)` },
+  ]);
+  protected heading = input($localize`:@@brief.besluit.heading:Besluit`);
+  protected intro = input(
+    $localize`:@@brief.besluit.intro:Kies het besluit; de juiste standaardteksten verschijnen meteen in de brief.`,
+  );
+  protected redenenLabel = input($localize`:@@brief.besluit.redenen:Reden(en) voor afwijzing`);
+}
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { LibraryPassage } from '@brief/domain/brief';
+import { BesluitPanelComponent } from './besluit-panel.component';
+
+const text = (t: string): LibraryPassage['content'] => ({ paragraphs: [{ nodes: [{ type: 'text', text: t }] }] });
+
+const passages: LibraryPassage[] = [
+  { passageId: 'p-kern-positief', scope: 'global', sectionKey: 'kern', label: 'Toewijzing', version: 1, besluit: 'positief', content: text('Toegewezen.') },
+  { passageId: 'p-kern-negatief', scope: 'global', sectionKey: 'kern', label: 'Afwijzing', version: 1, besluit: 'negatief', content: text('Afgewezen.') },
+  { passageId: 'p-kern-scholing', scope: 'global', sectionKey: 'kern', label: 'Onvoldoende scholing', version: 1, besluit: 'negatief', reason: 'onvoldoende_scholing', content: text('Onvoldoende scholing.') },
+  { passageId: 'p-kern-gegevens', scope: 'global', sectionKey: 'kern', label: 'Onjuiste gegevens', version: 1, besluit: 'negatief', reason: 'onjuiste_gegevens', content: text('Onjuiste gegevens.') },
+];
+
+const meta: Meta<BesluitPanelComponent> = {
+  title: 'Domein/Brief/Besluit Panel',
+  component: BesluitPanelComponent,
+  args: { passages },
+};
+export default meta;
+type Story = StoryObj<BesluitPanelComponent>;
+
+/** Pick a besluit; a negatief besluit reveals the reason checkboxes. Each change emits
+    `selectionChange` and the kern's standaardteksten follow live — no generate button. */
+export const Default: Story = {};
+
+/** Re-seeded from a persisted letter: a negatief besluit with a reden already ticked. */
+export const NegatiefMetReden: Story = {
+  args: { besluit: 'negatief', initialRedenen: ['onvoldoende_scholing'] },
+};