feat(WP-67): merge behandelportal into this repo as a monorepo
Restructures into apps/ssp + apps/behandelportal (two Angular projects) plus libs/shared + libs/beheer (cross-app libraries), replacing WP-61's separate sibling repo. That split had already produced real drift: a hand-vendored copy of the backend's OpenAPI doc, a shared/ui+layout tree forked and silently diverging (7 files), and beheer + the styles.scss token bridge duplicated byte-for-byte across both repos. - git mv the SSP's src/app/* into apps/ssp/; fold shared/, beheer/, environments/, the Storybook docs/*.mdx, and styles.scss into libs/shared + libs/beheer (all confirmed identical between the two repos before merging). auth stays deliberately duplicated per ADR-0002 (actor-specific, expected to diverge) - amended there. - One generated API client (libs/shared), no more vendored swagger.json. - .dependency-cruiser split into a base factory + one config per app, and Storybook into .storybook-ssp/.storybook-behandelportal - both forced by the @auth/* alias resolving to different directories per app. - SiteHeaderComponent/ShellComponent gained HEADER_NAV_ITEMS/ HEADER_ADMIN_LINKS/DEBUG_PANEL injection tokens so each app supplies its own nav/admin-links/dev-panel instead of one being hardcoded. - CLAUDE.md, ARCHITECTURE.md, dependencies.md, and ADR-0002 updated; WP-67 backlog entry documents the full decision trail. npm run ci green (lint, dep:check x2, 360 tests across ssp/ behandelportal/shared/beheer, both localized builds, backend tests, snippet + api-client drift); both dev servers, both Storybook instances, and docker compose verified working. The old sibling repo (/home/eho/repos/behandelportal) is left untouched, not deleted. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
@@ -0,0 +1,340 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { describe, it, expect, vi, afterEach } from 'vitest';
|
||||
import { Result } from '@shared/kernel/fp';
|
||||
import { Brief, BriefDecisions, CaseContext, LetterBlock } from '@brief/domain/brief';
|
||||
import { OrgTemplate } from '@brief/domain/org-template';
|
||||
import { BriefAdapter, BriefView } from '@brief/infrastructure/brief.adapter';
|
||||
import { LetterPreviewAdapter } from '@brief/infrastructure/letter-preview.adapter';
|
||||
import { RevealBigNummerAdapter } from '@brief/infrastructure/reveal-bignummer.adapter';
|
||||
import { BriefStore } from './brief.store';
|
||||
|
||||
const decisions: BriefDecisions = {
|
||||
canEdit: true,
|
||||
canApprove: true,
|
||||
canReject: true,
|
||||
canSend: true,
|
||||
canRevealBigNummer: true,
|
||||
};
|
||||
|
||||
const brief: Brief = {
|
||||
briefId: 'b1',
|
||||
beroep: 'arts',
|
||||
templateId: 't1',
|
||||
placeholders: [],
|
||||
sections: [],
|
||||
status: { tag: 'draft' },
|
||||
drafterId: 'u1',
|
||||
};
|
||||
|
||||
const orgTemplate: OrgTemplate = {
|
||||
subOrgId: 'cibg-registers',
|
||||
orgName: 'CIBG — Registers',
|
||||
returnAddress: 'Postbus 00000\n2500 AA Den Haag',
|
||||
footerContact: 'info@voorbeeld.example',
|
||||
footerLegal: 'KvK 00000000',
|
||||
signatureName: 'A. de Vries',
|
||||
signatureRole: 'Hoofd Registratie',
|
||||
signatureClosing: 'Met vriendelijke groet,',
|
||||
margins: { topMm: 25, rightMm: 25, bottomMm: 25, leftMm: 25 },
|
||||
version: 1,
|
||||
};
|
||||
|
||||
const caseContext: CaseContext = {
|
||||
zorgverlenerNaam: 'Dr. A. (Anna) de Vries',
|
||||
bigNummer: '19012345601',
|
||||
beroep: 'arts',
|
||||
aanvraagReferentie: 'HER-2026-000842',
|
||||
};
|
||||
|
||||
const view: BriefView = { brief, availablePassages: [], decisions, orgTemplate, caseContext };
|
||||
|
||||
function setup(adapter: Partial<BriefAdapter>): BriefStore {
|
||||
TestBed.configureTestingModule({ providers: [{ provide: BriefAdapter, useValue: adapter }] });
|
||||
return TestBed.inject(BriefStore);
|
||||
}
|
||||
|
||||
describe('BriefStore action state (Idle | Busy | Failed)', () => {
|
||||
it('is Busy synchronously once a transition starts', async () => {
|
||||
const approved: BriefView = {
|
||||
...view,
|
||||
brief: { ...brief, status: { tag: 'approved', approvedBy: 'u2', approvedAt: 't' } },
|
||||
};
|
||||
const store = setup({
|
||||
load: (): Promise<Result<string, BriefView>> => Promise.resolve({ ok: true, value: view }),
|
||||
save: (): Promise<Result<string, BriefView>> => Promise.resolve({ ok: true, value: view }),
|
||||
approve: (): Promise<Result<string, BriefView>> =>
|
||||
Promise.resolve({ ok: true, value: approved }),
|
||||
});
|
||||
await store.load();
|
||||
|
||||
const pending = store.approve();
|
||||
expect(store.busy()).toBe(true); // set synchronously, before any await resolves
|
||||
|
||||
await pending; // settle before the test ends
|
||||
});
|
||||
|
||||
it('settles to Idle on a successful transition', async () => {
|
||||
const approved: BriefView = {
|
||||
...view,
|
||||
brief: { ...brief, status: { tag: 'approved', approvedBy: 'u2', approvedAt: 't' } },
|
||||
};
|
||||
const store = setup({
|
||||
load: (): Promise<Result<string, BriefView>> => Promise.resolve({ ok: true, value: view }),
|
||||
save: (): Promise<Result<string, BriefView>> => Promise.resolve({ ok: true, value: view }),
|
||||
approve: (): Promise<Result<string, BriefView>> =>
|
||||
Promise.resolve({ ok: true, value: approved }),
|
||||
});
|
||||
await store.load();
|
||||
|
||||
await store.approve();
|
||||
expect(store.busy()).toBe(false);
|
||||
expect(store.lastError()).toBeNull();
|
||||
});
|
||||
|
||||
it('goes Busy then Failed on a failing transition, surfacing the error', async () => {
|
||||
const store = setup({
|
||||
load: (): Promise<Result<string, BriefView>> => Promise.resolve({ ok: true, value: view }),
|
||||
save: (): Promise<Result<string, BriefView>> => Promise.resolve({ ok: true, value: view }),
|
||||
approve: (): Promise<Result<string, BriefView>> =>
|
||||
Promise.resolve({ ok: false, error: 'niet toegestaan' }),
|
||||
});
|
||||
await store.load();
|
||||
|
||||
await store.approve();
|
||||
expect(store.busy()).toBe(false);
|
||||
expect(store.lastError()).toBe('niet toegestaan');
|
||||
});
|
||||
|
||||
it('a subsequent successful transition clears a prior Failed state', async () => {
|
||||
let approveResult: Result<string, BriefView> = { ok: false, error: 'eerste poging mislukt' };
|
||||
const store = setup({
|
||||
load: (): Promise<Result<string, BriefView>> => Promise.resolve({ ok: true, value: view }),
|
||||
save: (): Promise<Result<string, BriefView>> => Promise.resolve({ ok: true, value: view }),
|
||||
approve: (): Promise<Result<string, BriefView>> => Promise.resolve(approveResult),
|
||||
});
|
||||
await store.load();
|
||||
|
||||
await store.approve();
|
||||
expect(store.lastError()).toBe('eerste poging mislukt');
|
||||
|
||||
approveResult = {
|
||||
ok: true,
|
||||
value: {
|
||||
...view,
|
||||
brief: { ...brief, status: { tag: 'approved', approvedBy: 'u2', approvedAt: 't' } },
|
||||
},
|
||||
};
|
||||
await store.approve();
|
||||
expect(store.busy()).toBe(false);
|
||||
expect(store.lastError()).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
// --- WP-27: undo/redo history + rejection diff ---
|
||||
|
||||
function block(id: string, text: string): LetterBlock {
|
||||
return {
|
||||
type: 'freeText',
|
||||
blockId: id,
|
||||
content: { paragraphs: [{ nodes: [{ type: 'text', text }] }] },
|
||||
};
|
||||
}
|
||||
const kern = (blocks: LetterBlock[]) => ({
|
||||
sectionKey: 'kern',
|
||||
title: 'Kern',
|
||||
required: true,
|
||||
locked: false,
|
||||
blocks,
|
||||
});
|
||||
const filledBrief: Brief = { ...brief, sections: [kern([block('local-1', 'x')])] };
|
||||
const filledView: BriefView = { ...view, brief: filledBrief };
|
||||
|
||||
function loadedBrief(store: BriefStore): Brief {
|
||||
const s = store.model();
|
||||
if (s.tag !== 'loaded') throw new Error('not loaded');
|
||||
return s.brief;
|
||||
}
|
||||
|
||||
async function loadedStore(over: Partial<BriefAdapter> = {}): Promise<BriefStore> {
|
||||
const ok = (v: BriefView): Promise<Result<string, BriefView>> =>
|
||||
Promise.resolve({ ok: true, value: v });
|
||||
const store = setup({ load: () => ok(filledView), save: () => ok(filledView), ...over });
|
||||
await store.load();
|
||||
return store;
|
||||
}
|
||||
|
||||
describe('BriefStore undo/redo history', () => {
|
||||
it('records an edit, undoes and redoes it; buttons mirror; a no-op edit is not recorded', async () => {
|
||||
const store = await loadedStore();
|
||||
expect(store.canUndo()).toBe(false);
|
||||
|
||||
store.edit({ tag: 'BlockRemoved', blockId: 'local-1' });
|
||||
expect(loadedBrief(store).sections[0].blocks.length).toBe(0);
|
||||
expect(store.canUndo()).toBe(true);
|
||||
|
||||
store.undo();
|
||||
expect(loadedBrief(store).sections[0].blocks.length).toBe(1);
|
||||
expect(store.canRedo()).toBe(true);
|
||||
|
||||
store.redo();
|
||||
expect(loadedBrief(store).sections[0].blocks.length).toBe(0);
|
||||
|
||||
// A no-op edit (unknown block) changes nothing → leaves no dead history step.
|
||||
store.undo(); // back to 1 block, redo available
|
||||
store.edit({ tag: 'BlockRemoved', blockId: 'does-not-exist' });
|
||||
expect(store.canRedo()).toBe(true); // future NOT cleared by a no-op
|
||||
});
|
||||
|
||||
it('a new edit clears the redo future', async () => {
|
||||
const store = await loadedStore();
|
||||
store.edit({ tag: 'FreeTextBlockAdded', sectionKey: 'kern' });
|
||||
store.undo();
|
||||
expect(store.canRedo()).toBe(true);
|
||||
store.edit({ tag: 'FreeTextBlockAdded', sectionKey: 'kern' });
|
||||
expect(store.canRedo()).toBe(false);
|
||||
});
|
||||
|
||||
it('caps history at 50 snapshots', async () => {
|
||||
const store = await loadedStore();
|
||||
for (let i = 0; i < 55; i++) store.edit({ tag: 'FreeTextBlockAdded', sectionKey: 'kern' });
|
||||
let undos = 0;
|
||||
while (store.canUndo()) {
|
||||
store.undo();
|
||||
undos++;
|
||||
}
|
||||
expect(undos).toBe(50);
|
||||
});
|
||||
});
|
||||
|
||||
describe('BriefStore rejection diff', () => {
|
||||
it('captures the rejected letter and diffs a subsequent edit against it', async () => {
|
||||
const submitted: Brief = {
|
||||
...filledBrief,
|
||||
status: { tag: 'submitted', submittedBy: 'u', submittedAt: 't' },
|
||||
};
|
||||
const rejected: Brief = {
|
||||
...filledBrief,
|
||||
status: { tag: 'rejected', rejectedBy: 'u2', rejectedAt: 't', comments: 'nee' },
|
||||
};
|
||||
const ok = (v: BriefView): Promise<Result<string, BriefView>> =>
|
||||
Promise.resolve({ ok: true, value: v });
|
||||
const store = setup({
|
||||
load: () => ok({ ...filledView, brief: submitted }),
|
||||
save: () => ok(filledView),
|
||||
reject: () => ok({ ...filledView, brief: rejected }),
|
||||
});
|
||||
await store.load();
|
||||
await store.reject('nee');
|
||||
expect(store.hasRejectionDiff()).toBe(false); // nothing changed yet
|
||||
|
||||
store.edit({
|
||||
tag: 'BlockContentEdited',
|
||||
blockId: 'local-1',
|
||||
content: { paragraphs: [{ nodes: [{ type: 'text', text: 'CHANGED' }] }] },
|
||||
});
|
||||
expect(store.blockDiffs().get('local-1')).toBe('changed');
|
||||
expect(store.removedSinceReject()).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('BriefStore.previewLetter', () => {
|
||||
// vi.spyOn reuses an existing spy (and its call history) if one is already on
|
||||
// the property — window.open/URL.createObjectURL must be restored between tests.
|
||||
afterEach(() => vi.restoreAllMocks());
|
||||
|
||||
it('opens the composed letter in a new tab on success', async () => {
|
||||
const store = setup({
|
||||
load: (): Promise<Result<string, BriefView>> => Promise.resolve({ ok: true, value: view }),
|
||||
});
|
||||
await store.load();
|
||||
const blob = new Blob(['<html></html>'], { type: 'text/html' });
|
||||
vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:mock');
|
||||
const open = vi.spyOn(window, 'open').mockImplementation(() => null);
|
||||
vi.spyOn(TestBed.inject(LetterPreviewAdapter), 'preview').mockResolvedValue({
|
||||
ok: true,
|
||||
value: blob,
|
||||
});
|
||||
|
||||
await store.previewLetter();
|
||||
expect(open).toHaveBeenCalledWith('blob:mock', '_blank');
|
||||
expect(store.lastError()).toBeNull();
|
||||
});
|
||||
|
||||
it('surfaces the error without opening a tab on failure', async () => {
|
||||
const store = setup({
|
||||
load: (): Promise<Result<string, BriefView>> => Promise.resolve({ ok: true, value: view }),
|
||||
});
|
||||
await store.load();
|
||||
const open = vi.spyOn(window, 'open').mockImplementation(() => null);
|
||||
vi.spyOn(TestBed.inject(LetterPreviewAdapter), 'preview').mockResolvedValue({
|
||||
ok: false,
|
||||
error: 'De voorvertoning kon niet worden geopend.',
|
||||
});
|
||||
|
||||
await store.previewLetter();
|
||||
expect(open).not.toHaveBeenCalled();
|
||||
expect(store.lastError()).toBe('De voorvertoning kon niet worden geopend.');
|
||||
});
|
||||
});
|
||||
|
||||
describe('BriefStore.revealBigNummer (PRD-0002 §5c)', () => {
|
||||
afterEach(() => vi.restoreAllMocks());
|
||||
|
||||
// Loaded with a MASKED BIG-nummer, as the server ships it by default.
|
||||
const maskedView: BriefView = {
|
||||
...view,
|
||||
caseContext: { ...caseContext, bigNummer: '********601' },
|
||||
};
|
||||
|
||||
it('swaps the masked value for the revealed one on success', async () => {
|
||||
const store = setup({ load: () => Promise.resolve({ ok: true, value: maskedView }) });
|
||||
await store.load();
|
||||
expect(store.caseContext()?.bigNummer).toBe('********601');
|
||||
vi.spyOn(TestBed.inject(RevealBigNummerAdapter), 'reveal').mockResolvedValue({
|
||||
ok: true,
|
||||
value: '19012345601',
|
||||
});
|
||||
|
||||
await store.revealBigNummer();
|
||||
expect(store.caseContext()?.bigNummer).toBe('19012345601');
|
||||
expect(store.lastError()).toBeNull();
|
||||
});
|
||||
|
||||
it('keeps the value masked and surfaces the error on failure', async () => {
|
||||
const store = setup({ load: () => Promise.resolve({ ok: true, value: maskedView }) });
|
||||
await store.load();
|
||||
vi.spyOn(TestBed.inject(RevealBigNummerAdapter), 'reveal').mockResolvedValue({
|
||||
ok: false,
|
||||
error: 'geweigerd',
|
||||
});
|
||||
|
||||
await store.revealBigNummer();
|
||||
expect(store.caseContext()?.bigNummer).toBe('********601'); // unchanged
|
||||
expect(store.lastError()).toBe('geweigerd');
|
||||
});
|
||||
});
|
||||
|
||||
describe('BriefStore.flushPending (CanDeactivate guard / beforeunload)', () => {
|
||||
const okSave = () =>
|
||||
vi.fn(() => Promise.resolve({ ok: true, value: filledView } as Result<string, BriefView>));
|
||||
|
||||
it('flushes a pending debounced edit immediately and clears the pending flag', async () => {
|
||||
const save = okSave();
|
||||
const store = await loadedStore({ save });
|
||||
expect(store.hasPendingSave()).toBe(false);
|
||||
|
||||
store.edit({ tag: 'FreeTextBlockAdded', sectionKey: 'kern' });
|
||||
expect(store.hasPendingSave()).toBe(true); // 600ms debounce armed, not yet fired
|
||||
|
||||
await store.flushPending();
|
||||
expect(save).toHaveBeenCalledTimes(1); // no timer wait needed
|
||||
expect(store.hasPendingSave()).toBe(false); // timer consumed
|
||||
});
|
||||
|
||||
it('is a no-op when no edit is pending', async () => {
|
||||
const save = okSave();
|
||||
const store = await loadedStore({ save });
|
||||
await store.flushPending();
|
||||
expect(save).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,294 @@
|
||||
import { Injectable, computed, inject, signal } from '@angular/core';
|
||||
import { Result } from '@shared/kernel/fp';
|
||||
import { createStore } from '@shared/application/store';
|
||||
import { ActionState, SaveState } from '@shared/application/action-state';
|
||||
import { createHistory } from '@shared/application/history';
|
||||
import { createDebouncedSave } from '@shared/application/debounced-save';
|
||||
import { machineRemoteData } from '@shared/application/machine-remote-data';
|
||||
import {
|
||||
Brief,
|
||||
CaseContext,
|
||||
allDiagnostics,
|
||||
canSubmit,
|
||||
hasBlockingErrors,
|
||||
unresolvedPlaceholders,
|
||||
} from '@brief/domain/brief';
|
||||
import { BriefMsg, BriefState, initial, reduce } from '@brief/domain/brief.machine';
|
||||
import { BlockDiffKind, changedBlocks, diffBlocks } from '@brief/domain/brief-diff';
|
||||
import { OrgTemplate } from '@brief/domain/org-template';
|
||||
import { BriefAdapter, BriefView } from '@brief/infrastructure/brief.adapter';
|
||||
import { LetterPreviewAdapter } from '@brief/infrastructure/letter-preview.adapter';
|
||||
import { RevealBigNummerAdapter } from '@brief/infrastructure/reveal-bignummer.adapter';
|
||||
import { uploadContentUrl } from '@shared/upload/upload.adapter';
|
||||
import { PendingSave, registerPendingSave } from '@shared/application/pending-saves';
|
||||
|
||||
/**
|
||||
* Root singleton for the letter: the Elm store (Model + dispatch), the derived
|
||||
* read-model, and the commands (effects) that call the adapter and dispatch the
|
||||
* outcome. Mirrors `BigProfileStore`. All of `canEdit`/`canApprove`/`canReject`/
|
||||
* `canSend`, `diagnostics`, `unresolved`, `canSubmit` are DERIVED here — never
|
||||
* stored. The permission flags come from the server's decision DTO (PRD-0002 phase
|
||||
* P1) via `BriefState.loaded.decisions` — this store never computes them itself.
|
||||
*/
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class BriefStore implements PendingSave {
|
||||
private adapter = inject(BriefAdapter);
|
||||
private previewAdapter = inject(LetterPreviewAdapter);
|
||||
private revealAdapter = inject(RevealBigNummerAdapter);
|
||||
private store = createStore<BriefState, BriefMsg>(initial, reduce);
|
||||
|
||||
readonly model = this.store.model;
|
||||
|
||||
private actionState = signal<ActionState>({ tag: 'Idle' });
|
||||
readonly busy = computed(() => this.actionState().tag === 'Busy');
|
||||
readonly lastError = computed(() => {
|
||||
const s = this.actionState();
|
||||
return s.tag === 'Failed' ? s.error : null;
|
||||
});
|
||||
|
||||
/** Surfaced autosave state for the indicator + aria-live region. */
|
||||
readonly saveState = signal<SaveState>({ tag: 'Idle' });
|
||||
|
||||
/** Undo/redo is SHELL state, not machine state (WP-27): a `createHistory` stack of
|
||||
`Brief` snapshots (WP-31 extracted the mechanics). Only CONTENT edits are recorded
|
||||
(they flow through `edit()`); status transitions never enter history, or undo would
|
||||
replay workflow state. Restore re-dispatches the existing `Seed` Msg — zero machine
|
||||
changes. */
|
||||
private history = createHistory<Brief>(50);
|
||||
readonly canUndo = this.history.canUndo;
|
||||
readonly canRedo = this.history.canRedo;
|
||||
|
||||
/** The letter as it stood when it was REJECTED, captured shell-side (WP-27). The
|
||||
approver diffs it against the resubmitted letter. POC limit: in-memory only, so a
|
||||
full page reload loses it — a real system would persist the rejected revision. */
|
||||
private rejectionSnapshot = signal<Brief | null>(null);
|
||||
/** Changed/added/removed blocks since rejection — a pure fold over two snapshots. */
|
||||
readonly blockDiffs = computed<ReadonlyMap<string, BlockDiffKind>>(() => {
|
||||
const before = this.rejectionSnapshot();
|
||||
const after = this.brief();
|
||||
return before && after ? changedBlocks(diffBlocks(before, after)) : new Map();
|
||||
});
|
||||
/** Count of blocks removed since rejection — badged as a summary, since a removed
|
||||
block no longer renders inline. */
|
||||
readonly removedSinceReject = computed(
|
||||
() => [...this.blockDiffs().values()].filter((k) => k === 'removed').length,
|
||||
);
|
||||
readonly hasRejectionDiff = computed(() => this.blockDiffs().size > 0);
|
||||
|
||||
/** The org template the letter renders with (WP-24). Server-owned appearance data,
|
||||
not letter state — held beside the machine, never inside it (`brief.machine.ts`
|
||||
stays untouched by design). Set from every server view that carries it. */
|
||||
readonly orgTemplate = signal<OrgTemplate | null>(null);
|
||||
|
||||
/** The case (zorgverlener + aanvraag) this letter concerns — server-joined context for
|
||||
the behandel scherm header, not letter state. Set from every server view. */
|
||||
readonly caseContext = signal<CaseContext | null>(null);
|
||||
|
||||
/** The org logo's content URL for the letterhead, or null when the template has none. */
|
||||
readonly logoUrl = computed<string | null>(() => {
|
||||
const id = this.orgTemplate()?.logoDocumentId;
|
||||
return id ? uploadContentUrl(id) : null;
|
||||
});
|
||||
|
||||
/** The load lifecycle as `RemoteData`, for `<app-async>` — the machine keeps
|
||||
owning the letter's own domain lifecycle (draft/submitted/approved/…); this is
|
||||
purely a projection of its loading/failed tags onto the shared async seam. */
|
||||
readonly remoteData = computed(() => machineRemoteData(this.model()));
|
||||
|
||||
private brief = computed<Brief | null>(() => {
|
||||
const s = this.model();
|
||||
return s.tag === 'loaded' ? s.brief : null;
|
||||
});
|
||||
|
||||
readonly canEdit = computed(() => this.decisions()?.canEdit ?? false);
|
||||
readonly canApprove = computed(() => this.decisions()?.canApprove ?? false);
|
||||
readonly canReject = computed(() => this.decisions()?.canReject ?? false);
|
||||
readonly canSend = computed(() => this.decisions()?.canSend ?? false);
|
||||
/** Field-level PII reveal (PRD-0002 §5c), deny-by-default like the action gates. */
|
||||
readonly canRevealBigNummer = computed(() => this.decisions()?.canRevealBigNummer ?? false);
|
||||
|
||||
private decisions = computed(() => {
|
||||
const s = this.model();
|
||||
return s.tag === 'loaded' ? s.decisions : null;
|
||||
});
|
||||
readonly diagnostics = computed(() => (this.brief() ? allDiagnostics(this.brief()!) : []));
|
||||
readonly unresolved = computed(() => (this.brief() ? unresolvedPlaceholders(this.brief()!) : []));
|
||||
/** Submit is allowed only when required sections are filled AND no blocking errors. */
|
||||
readonly canSubmit = computed(() => {
|
||||
const b = this.brief();
|
||||
return !!b && canSubmit(b) && !hasBlockingErrors(this.diagnostics());
|
||||
});
|
||||
|
||||
async load() {
|
||||
const r = await this.adapter.load();
|
||||
if (r.ok) {
|
||||
this.orgTemplate.set(r.value.orgTemplate);
|
||||
this.caseContext.set(r.value.caseContext);
|
||||
this.history.clear();
|
||||
this.store.dispatch({ tag: 'BriefLoaded', ...r.value });
|
||||
} else {
|
||||
this.store.dispatch({ tag: 'BriefLoadFailed', reason: r.error });
|
||||
}
|
||||
}
|
||||
|
||||
/** An edit: apply it optimistically in the pure reducer, then debounce-save. Records
|
||||
an undo step only when the reducer actually changed the brief (a no-op edit — e.g.
|
||||
a locked section — returns the same value and leaves no dead history step). */
|
||||
edit(msg: BriefMsg) {
|
||||
const before = this.brief();
|
||||
this.store.dispatch(msg);
|
||||
const after = this.brief();
|
||||
// Record only a real change: a no-op edit (e.g. a locked section) returns the same
|
||||
// value and leaves no dead history step.
|
||||
if (before && after && after !== before) this.history.record(before);
|
||||
this.debouncedSave.schedule();
|
||||
}
|
||||
|
||||
/** Undo/redo: restore a snapshot via the existing `Seed` Msg, then autosave. */
|
||||
undo() {
|
||||
this.restore((current) => this.history.undo(current));
|
||||
}
|
||||
redo() {
|
||||
this.restore((current) => this.history.redo(current));
|
||||
}
|
||||
private restore(step: (current: Brief) => Brief | undefined) {
|
||||
const s = this.model();
|
||||
if (s.tag !== 'loaded') return;
|
||||
const target = step(s.brief);
|
||||
if (target === undefined) return;
|
||||
this.store.dispatch({ tag: 'Seed', state: { ...s, brief: target } });
|
||||
this.debouncedSave.schedule();
|
||||
}
|
||||
|
||||
constructor() {
|
||||
// Register so the CanDeactivate guard / beforeunload handler can flush a pending
|
||||
// debounced edit before navigation or unload (see pending-saves.ts).
|
||||
registerPendingSave(this);
|
||||
}
|
||||
|
||||
// 600ms debounced autosave (the server is the store of record). Timer mechanics live in
|
||||
// the shared helper; `flushSave` below is the store-specific write + save-state (WP-31).
|
||||
private debouncedSave = createDebouncedSave({
|
||||
canSave: () => this.canEdit(),
|
||||
flush: () => this.flushSave(),
|
||||
});
|
||||
/** PendingSave: delegate to the debounce helper so the guard/unload can flush. */
|
||||
hasPendingSave = () => this.debouncedSave.hasPendingSave();
|
||||
flushPending = () => this.debouncedSave.flushPending();
|
||||
private async flushSave() {
|
||||
const b = this.brief();
|
||||
if (!b) return;
|
||||
this.saveState.set({ tag: 'Saving' });
|
||||
const r = await this.adapter.save(b.sections);
|
||||
if (r.ok) {
|
||||
this.saveState.set({ tag: 'Saved' });
|
||||
} else {
|
||||
this.actionState.set({ tag: 'Failed', error: r.error });
|
||||
this.saveState.set({ tag: 'Error' });
|
||||
}
|
||||
}
|
||||
|
||||
/** Retry a failed autosave — reuses the existing flush path, no new state (WP-27). */
|
||||
retrySave() {
|
||||
void this.flushSave();
|
||||
}
|
||||
|
||||
/** Demo "start over": recreate the brief server-side and load the fresh view. */
|
||||
async resetDemo() {
|
||||
this.actionState.set({ tag: 'Busy' });
|
||||
this.debouncedSave.cancel();
|
||||
const r = await this.adapter.reset();
|
||||
this.saveState.set({ tag: 'Idle' });
|
||||
if (r.ok) {
|
||||
this.actionState.set({ tag: 'Idle' });
|
||||
this.orgTemplate.set(r.value.orgTemplate);
|
||||
this.caseContext.set(r.value.caseContext);
|
||||
this.history.clear();
|
||||
this.rejectionSnapshot.set(null);
|
||||
this.store.dispatch({ tag: 'BriefLoaded', ...r.value });
|
||||
} else {
|
||||
this.actionState.set({ tag: 'Failed', error: r.error });
|
||||
}
|
||||
}
|
||||
|
||||
submit = () => this.transition(() => this.adapter.submit());
|
||||
approve = () => this.transition(() => this.adapter.approve());
|
||||
reject = (comments: string) => this.transition(() => this.adapter.reject(comments));
|
||||
send = () => this.transition(() => this.adapter.send());
|
||||
|
||||
/** Explicit action, never a live re-render (PRD §8): opens the server-composed
|
||||
letter in a new tab. ponytail: the blob URL is never revoked — it's cheap and
|
||||
the tab outlives this call; not worth a teardown hook for a POC. */
|
||||
async previewLetter() {
|
||||
this.actionState.set({ tag: 'Busy' });
|
||||
const r = await this.previewAdapter.preview();
|
||||
if (!r.ok) {
|
||||
this.actionState.set({ tag: 'Failed', error: r.error });
|
||||
return;
|
||||
}
|
||||
this.actionState.set({ tag: 'Idle' });
|
||||
window.open(URL.createObjectURL(r.value), '_blank');
|
||||
}
|
||||
|
||||
/** Reveal the masked case BIG-nummer (PRD-0002 §5c). Server re-checks the capability
|
||||
+ step-up and audits the attempt; on success we swap the masked value in the
|
||||
already-loaded caseContext (a field update, not a reload). The step-up gesture
|
||||
itself is the UI's concern — this command just runs the audited server call. */
|
||||
async revealBigNummer() {
|
||||
const r = await this.revealAdapter.reveal();
|
||||
if (!r.ok) {
|
||||
this.actionState.set({ tag: 'Failed', error: r.error });
|
||||
return;
|
||||
}
|
||||
this.caseContext.update((c) => (c ? { ...c, bigNummer: r.value } : c));
|
||||
}
|
||||
|
||||
// A transition: flush any pending save, call the server (authoritative), then mirror
|
||||
// the returned status through the pure reducer's guarded transition.
|
||||
private async transition(action: () => Promise<Result<string, BriefView>>) {
|
||||
this.actionState.set({ tag: 'Busy' });
|
||||
this.debouncedSave.cancel();
|
||||
await this.flushSave();
|
||||
const r = await action();
|
||||
if (!r.ok) {
|
||||
this.actionState.set({ tag: 'Failed', error: r.error });
|
||||
return;
|
||||
}
|
||||
this.actionState.set({ tag: 'Idle' });
|
||||
this.applyServerStatus(r.value);
|
||||
}
|
||||
|
||||
private applyServerStatus(view: BriefView) {
|
||||
// `send` pins the org-template version server-side — mirror whatever came back.
|
||||
this.orgTemplate.set(view.orgTemplate);
|
||||
this.caseContext.set(view.caseContext);
|
||||
const { brief, decisions } = view;
|
||||
const s = brief.status;
|
||||
switch (s.tag) {
|
||||
case 'submitted':
|
||||
this.store.dispatch({ tag: 'Submitted', by: s.submittedBy, at: s.submittedAt, decisions });
|
||||
break;
|
||||
case 'approved':
|
||||
this.store.dispatch({ tag: 'Approved', by: s.approvedBy, at: s.approvedAt, decisions });
|
||||
break;
|
||||
case 'rejected':
|
||||
// Capture the letter as-rejected for the resubmission diff (WP-27). This is the
|
||||
// "before" snapshot the approver later compares against.
|
||||
this.rejectionSnapshot.set(brief);
|
||||
this.store.dispatch({
|
||||
tag: 'Rejected',
|
||||
by: s.rejectedBy,
|
||||
at: s.rejectedAt,
|
||||
comments: s.comments,
|
||||
decisions,
|
||||
});
|
||||
break;
|
||||
case 'sent':
|
||||
this.store.dispatch({ tag: 'Sent', at: s.sentAt, decisions });
|
||||
break;
|
||||
case 'draft':
|
||||
// reopened by a save on a rejected letter — reducer already handled it locally.
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,273 @@
|
||||
import { Injectable, computed, effect, inject, signal } from '@angular/core';
|
||||
import { createStore } from '@shared/application/store';
|
||||
import { ActionState, SaveState } from '@shared/application/action-state';
|
||||
import { createDebouncedSave } from '@shared/application/debounced-save';
|
||||
import { machineRemoteData } from '@shared/application/machine-remote-data';
|
||||
import { UploadAdapter } from '@shared/upload/upload.adapter';
|
||||
import { UploadShellService } from '@shared/upload/upload-shell.service';
|
||||
import { UploadMsg, initialUpload, rejectReason } from '@shared/upload/upload.machine';
|
||||
import {
|
||||
MARGIN_MAX_MM,
|
||||
MARGIN_MIN_MM,
|
||||
OrgTemplate,
|
||||
SubOrgSummary,
|
||||
} from '@brief/domain/org-template';
|
||||
import {
|
||||
OrgTemplateMsg,
|
||||
OrgTemplateState,
|
||||
initial,
|
||||
reduce,
|
||||
} from '@brief/domain/org-template.machine';
|
||||
import { OrgTemplateAdapter } from '@brief/infrastructure/org-template.adapter';
|
||||
import { PendingSave, registerPendingSave } from '@shared/application/pending-saves';
|
||||
|
||||
type LoadedState = Extract<OrgTemplateState, { tag: 'loaded' }>;
|
||||
|
||||
const LOGO_CATEGORY = 'org-logo';
|
||||
const NO_SUBORGS = $localize`:@@orgTemplate.noSubOrgs:Er zijn geen organisatiesjablonen om te beheren.`;
|
||||
|
||||
/**
|
||||
* Root singleton for the admin org-template editor (WP-26). The Elm machine owns the
|
||||
* editable draft; commands here do the debounced save, publish (impact-confirm),
|
||||
* rollback and proefbrief, then dispatch the outcome — the reducer stays pure. The
|
||||
* logo upload reuses the shared upload transport; its completion mutates the draft
|
||||
* (in the reducer) and triggers a save (here). Mirrors `BriefStore`.
|
||||
*/
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class OrgTemplateStore implements PendingSave {
|
||||
private adapter = inject(OrgTemplateAdapter);
|
||||
private uploadAdapter = inject(UploadAdapter);
|
||||
private shell = inject(UploadShellService);
|
||||
private store = createStore<OrgTemplateState, OrgTemplateMsg>(initial, reduce);
|
||||
|
||||
readonly model = this.store.model;
|
||||
|
||||
readonly subOrgs = signal<readonly SubOrgSummary[]>([]);
|
||||
readonly selectedSubOrgId = signal<string | null>(null);
|
||||
|
||||
private actionState = signal<ActionState>({ tag: 'Idle' });
|
||||
readonly busy = computed(() => this.actionState().tag === 'Busy');
|
||||
readonly lastError = computed(() => {
|
||||
const s = this.actionState();
|
||||
return s.tag === 'Failed' ? s.error : null;
|
||||
});
|
||||
readonly saveState = signal<SaveState>({ tag: 'Idle' });
|
||||
|
||||
/** The publish impact-confirm gate (PRD §7h: show N affected letters before POST). */
|
||||
readonly pendingPublish = signal(false);
|
||||
|
||||
readonly remoteData = computed(() => machineRemoteData(this.model()));
|
||||
|
||||
private loaded = computed<LoadedState | null>(() => {
|
||||
const s = this.model();
|
||||
return s.tag === 'loaded' ? s : null;
|
||||
});
|
||||
readonly draft = computed<OrgTemplate | null>(() => this.loaded()?.draft ?? null);
|
||||
readonly uploadState = computed(() => this.loaded()?.upload ?? initialUpload);
|
||||
readonly history = computed(() => this.loaded()?.history ?? []);
|
||||
readonly publishedVersion = computed(() => this.loaded()?.publishedVersion ?? 0);
|
||||
readonly unsentBriefs = computed(() => this.loaded()?.unsentBriefs ?? 0);
|
||||
readonly logoUrl = computed<string | null>(() => {
|
||||
const id = this.draft()?.logoDocumentId;
|
||||
return id ? this.uploadAdapter.contentUrl(id) : null;
|
||||
});
|
||||
|
||||
/** Client-side mirror of the server rules (`OrgTemplateRules`) for instant feedback;
|
||||
the server re-validates and stays the authority — publish is gated on this. */
|
||||
readonly draftValid = computed(() => {
|
||||
const d = this.draft();
|
||||
if (!d) return false;
|
||||
const marginsOk = [
|
||||
d.margins.topMm,
|
||||
d.margins.rightMm,
|
||||
d.margins.bottomMm,
|
||||
d.margins.leftMm,
|
||||
].every((v) => v >= MARGIN_MIN_MM && v <= MARGIN_MAX_MM);
|
||||
return d.orgName.trim().length > 0 && d.signatureName.trim().length > 0 && marginsOk;
|
||||
});
|
||||
|
||||
// Live File blobs keyed by localId — needed to retry a failed upload (a reducer can't hold these).
|
||||
private files = new Map<string, File>();
|
||||
private categoriesRes = this.uploadAdapter.categoriesResource('org-template');
|
||||
|
||||
constructor() {
|
||||
// Feed the logo category into the machine's upload sub-state once loaded. Tracks
|
||||
// `model()` so it re-fires after a sub-org switch reseeds an empty upload state;
|
||||
// the length guard makes it idempotent (no dispatch loop).
|
||||
effect(() => {
|
||||
const s = this.model();
|
||||
if (s.tag !== 'loaded' || s.upload.categories.length > 0) return;
|
||||
const status = this.categoriesRes.status();
|
||||
if (status === 'resolved' || status === 'local')
|
||||
this.dispatchUpload({
|
||||
type: 'CategoriesLoaded',
|
||||
categories: this.categoriesRes.value() ?? [],
|
||||
});
|
||||
});
|
||||
// Flush a pending debounced edit before navigation/unload (see pending-saves.ts).
|
||||
registerPendingSave(this);
|
||||
}
|
||||
|
||||
async load() {
|
||||
this.store.dispatch({ tag: 'Loading' });
|
||||
const list = await this.adapter.list();
|
||||
if (!list.ok) {
|
||||
this.store.dispatch({ tag: 'LoadFailed', reason: list.error });
|
||||
return;
|
||||
}
|
||||
this.subOrgs.set(list.value);
|
||||
const first = list.value[0];
|
||||
if (!first) {
|
||||
this.store.dispatch({ tag: 'LoadFailed', reason: NO_SUBORGS });
|
||||
return;
|
||||
}
|
||||
await this.selectSubOrg(first.subOrgId);
|
||||
}
|
||||
|
||||
async selectSubOrg(subOrgId: string) {
|
||||
this.selectedSubOrgId.set(subOrgId);
|
||||
this.saveState.set({ tag: 'Idle' });
|
||||
this.debouncedSave.cancel();
|
||||
this.store.dispatch({ tag: 'Loading' });
|
||||
const r = await this.adapter.load(subOrgId);
|
||||
if (r.ok) this.store.dispatch({ tag: 'DraftLoaded', view: r.value });
|
||||
else this.store.dispatch({ tag: 'LoadFailed', reason: r.error });
|
||||
}
|
||||
|
||||
/** An in-place canvas or margin edit: apply optimistically, then debounce-save. */
|
||||
edit(msg: OrgTemplateMsg) {
|
||||
this.store.dispatch(msg);
|
||||
this.debouncedSave.schedule();
|
||||
}
|
||||
|
||||
// 600ms debounced autosave (same idiom as BriefStore, WP-31). Timer mechanics live in the
|
||||
// shared helper; `flushSave` below is the store-specific write + save-state.
|
||||
private debouncedSave = createDebouncedSave({
|
||||
canSave: () => this.loaded() !== null,
|
||||
flush: () => this.flushSave(),
|
||||
});
|
||||
/** PendingSave: delegate to the debounce helper so the guard/unload can flush. */
|
||||
hasPendingSave = () => this.debouncedSave.hasPendingSave();
|
||||
flushPending = () => this.debouncedSave.flushPending();
|
||||
private async flushSave() {
|
||||
const s = this.loaded();
|
||||
if (!s || !s.dirty) return;
|
||||
const { subOrgId, draft } = s;
|
||||
this.saveState.set({ tag: 'Saving' });
|
||||
const r = await this.adapter.save(subOrgId, draft);
|
||||
if (r.ok) {
|
||||
this.saveState.set({ tag: 'Saved' });
|
||||
this.store.dispatch({ tag: 'DraftSaved', savedDraft: draft });
|
||||
} else {
|
||||
this.saveState.set({ tag: 'Error' });
|
||||
this.actionState.set({ tag: 'Failed', error: r.error });
|
||||
}
|
||||
}
|
||||
|
||||
// --- publish (impact-confirm) / rollback / proefbrief ---
|
||||
|
||||
requestPublish() {
|
||||
this.pendingPublish.set(true);
|
||||
}
|
||||
cancelPublish() {
|
||||
this.pendingPublish.set(false);
|
||||
}
|
||||
async confirmPublish() {
|
||||
const s = this.loaded();
|
||||
if (!s) return;
|
||||
this.pendingPublish.set(false);
|
||||
this.actionState.set({ tag: 'Busy' });
|
||||
this.debouncedSave.cancel();
|
||||
await this.flushSave(); // publish the saved draft — flush any pending edit first
|
||||
const r = await this.adapter.publish(s.subOrgId);
|
||||
if (!r.ok) {
|
||||
this.actionState.set({ tag: 'Failed', error: r.error });
|
||||
return;
|
||||
}
|
||||
this.actionState.set({ tag: 'Idle' });
|
||||
await this.selectSubOrg(s.subOrgId); // reload: new version, history, unsentBriefs = 0
|
||||
}
|
||||
|
||||
async rollback(version: number) {
|
||||
const s = this.loaded();
|
||||
if (!s) return;
|
||||
this.actionState.set({ tag: 'Busy' });
|
||||
this.debouncedSave.cancel();
|
||||
const r = await this.adapter.rollback(s.subOrgId, version);
|
||||
if (!r.ok) {
|
||||
this.actionState.set({ tag: 'Failed', error: r.error });
|
||||
return;
|
||||
}
|
||||
this.actionState.set({ tag: 'Idle' });
|
||||
this.store.dispatch({ tag: 'DraftLoaded', view: r.value }); // old version copied into draft
|
||||
}
|
||||
|
||||
async proefbrief() {
|
||||
const s = this.loaded();
|
||||
if (!s) return;
|
||||
this.actionState.set({ tag: 'Busy' });
|
||||
this.debouncedSave.cancel();
|
||||
await this.flushSave(); // the proefbrief renders the server's draft
|
||||
const r = await this.adapter.proefbrief(s.subOrgId);
|
||||
if (!r.ok) {
|
||||
this.actionState.set({ tag: 'Failed', error: r.error });
|
||||
return;
|
||||
}
|
||||
this.actionState.set({ tag: 'Idle' });
|
||||
window.open(URL.createObjectURL(r.value), '_blank');
|
||||
}
|
||||
|
||||
// --- logo upload (reuses the shared upload transport; single `org-logo` file) ---
|
||||
|
||||
onLogoSelected(files: File[]) {
|
||||
const s = this.loaded();
|
||||
const cat = s?.upload.categories.find((c) => c.categoryId === LOGO_CATEGORY);
|
||||
const file = files[0];
|
||||
if (!s || !cat || !file) return;
|
||||
const reason = rejectReason(cat, { type: file.type, sizeMb: file.size / 1e6 });
|
||||
if (reason) {
|
||||
this.dispatchUpload({ type: 'FileRejected', categoryId: cat.categoryId, reason });
|
||||
return;
|
||||
}
|
||||
const localId = crypto.randomUUID();
|
||||
this.files.set(localId, file);
|
||||
this.dispatchUpload({
|
||||
type: 'FileSelected',
|
||||
categoryId: cat.categoryId,
|
||||
localId,
|
||||
fileName: file.name,
|
||||
fileSizeMb: file.size / 1e6,
|
||||
});
|
||||
this.shell.upload(
|
||||
{ localId, categoryId: cat.categoryId, wizardId: 'org-template', file },
|
||||
(m) => this.onUploadMsg(m),
|
||||
);
|
||||
}
|
||||
|
||||
onLogoRemoved(localId: string) {
|
||||
this.shell.cancel([localId]);
|
||||
this.files.delete(localId);
|
||||
this.onUploadMsg({ type: 'UploadRemoved', localId });
|
||||
}
|
||||
|
||||
onLogoRetry(localId: string) {
|
||||
const file = this.files.get(localId);
|
||||
const up = this.loaded()?.upload.uploads.find((u) => u.localId === localId);
|
||||
if (!file || !up) return;
|
||||
this.dispatchUpload({ type: 'UploadRetried', localId });
|
||||
this.shell.upload({ localId, categoryId: up.categoryId, wizardId: 'org-template', file }, (m) =>
|
||||
this.onUploadMsg(m),
|
||||
);
|
||||
}
|
||||
|
||||
private dispatchUpload(msg: UploadMsg) {
|
||||
this.store.dispatch({ tag: 'Upload', msg });
|
||||
}
|
||||
/** Upload effects arriving from the transport: a finished/removed logo edits the
|
||||
draft (in the reducer) and needs persisting. */
|
||||
private onUploadMsg(msg: UploadMsg) {
|
||||
this.dispatchUpload(msg);
|
||||
if (msg.type === 'UploadComplete' || msg.type === 'UploadRemoved')
|
||||
this.debouncedSave.schedule();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { Besluit, LetterBlock, LibraryPassage } from './brief';
|
||||
import { besluitGuidance, inferSelection, passagesForBesluit, redenenFor } from './besluit';
|
||||
|
||||
const block = (t: string): LibraryPassage['content'] => ({
|
||||
paragraphs: [{ nodes: [{ type: 'text', text: t }] }],
|
||||
});
|
||||
|
||||
const p = (over: Partial<LibraryPassage>): LibraryPassage => ({
|
||||
passageId: over.passageId ?? 'x',
|
||||
scope: 'global',
|
||||
sectionKey: 'kern',
|
||||
label: over.label ?? 'x',
|
||||
content: block('x'),
|
||||
version: 1,
|
||||
...over,
|
||||
});
|
||||
|
||||
const lib: LibraryPassage[] = [
|
||||
p({ passageId: 'intro', besluit: undefined }), // shared, any besluit
|
||||
p({ passageId: 'pos', besluit: 'positief' }),
|
||||
p({ passageId: 'neg', besluit: 'negatief' }),
|
||||
p({
|
||||
passageId: 'neg-scholing',
|
||||
besluit: 'negatief',
|
||||
reason: 'onvoldoende_scholing',
|
||||
label: 'Onvoldoende scholing',
|
||||
}),
|
||||
p({
|
||||
passageId: 'neg-gegevens',
|
||||
besluit: 'negatief',
|
||||
reason: 'onjuiste_gegevens',
|
||||
label: 'Onjuiste gegevens',
|
||||
}),
|
||||
p({ passageId: 'slot-x', sectionKey: 'slot', besluit: undefined }), // not kern → never offered
|
||||
];
|
||||
|
||||
describe('passagesForBesluit', () => {
|
||||
it('positief = shared intro + the positief passage, no negatief/reason passages', () => {
|
||||
const ids = passagesForBesluit(lib, 'positief', []).map((x) => x.passageId);
|
||||
expect(ids).toEqual(['intro', 'pos']);
|
||||
});
|
||||
|
||||
it('negatief without redenen = intro + negatief base, but no reason-specific passages', () => {
|
||||
const ids = passagesForBesluit(lib, 'negatief', []).map((x) => x.passageId);
|
||||
expect(ids).toEqual(['intro', 'neg']);
|
||||
});
|
||||
|
||||
it('negatief with a reden ticked includes that reason-specific passage only', () => {
|
||||
const ids = passagesForBesluit(lib, 'negatief', ['onvoldoende_scholing']).map(
|
||||
(x) => x.passageId,
|
||||
);
|
||||
expect(ids).toEqual(['intro', 'neg', 'neg-scholing']);
|
||||
});
|
||||
|
||||
it('preserves library order (= reading order)', () => {
|
||||
const ids = passagesForBesluit(lib, 'negatief', [
|
||||
'onjuiste_gegevens',
|
||||
'onvoldoende_scholing',
|
||||
]).map((x) => x.passageId);
|
||||
expect(ids).toEqual(['intro', 'neg', 'neg-scholing', 'neg-gegevens']);
|
||||
});
|
||||
|
||||
it('never offers non-kern passages', () => {
|
||||
expect(passagesForBesluit(lib, 'positief', []).some((x) => x.sectionKey !== 'kern')).toBe(
|
||||
false,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('redenenFor', () => {
|
||||
it('derives reason checkboxes (code + label) from the negatief reason passages', () => {
|
||||
expect(redenenFor(lib, 'negatief')).toEqual([
|
||||
{ code: 'onvoldoende_scholing', label: 'Onvoldoende scholing' },
|
||||
{ code: 'onjuiste_gegevens', label: 'Onjuiste gegevens' },
|
||||
]);
|
||||
});
|
||||
|
||||
it('positief has no reason-specific redenen', () => {
|
||||
expect(redenenFor(lib, 'positief')).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('inferSelection', () => {
|
||||
// Build the kern blocks a besluit would produce, then read the selection back off them.
|
||||
const kern = (besluit: Besluit, reasons: string[]): LetterBlock[] =>
|
||||
passagesForBesluit(lib, besluit, reasons).map((p, i) => ({
|
||||
type: 'passage',
|
||||
blockId: `local-${i + 1}`,
|
||||
sourcePassageId: p.passageId,
|
||||
sourceVersion: p.version,
|
||||
content: p.content,
|
||||
edited: false,
|
||||
}));
|
||||
|
||||
it('round-trips a positief selection', () => {
|
||||
expect(inferSelection(kern('positief', []), lib)).toEqual({ besluit: 'positief', reasons: [] });
|
||||
});
|
||||
|
||||
it('round-trips a negatief selection with redenen (in order)', () => {
|
||||
const blocks = kern('negatief', ['onjuiste_gegevens', 'onvoldoende_scholing']);
|
||||
expect(inferSelection(blocks, lib)).toEqual({
|
||||
besluit: 'negatief',
|
||||
reasons: ['onvoldoende_scholing', 'onjuiste_gegevens'], // library order
|
||||
});
|
||||
});
|
||||
|
||||
it('an empty kern (nothing chosen) infers no besluit', () => {
|
||||
expect(inferSelection([], lib)).toEqual({ besluit: null, reasons: [] });
|
||||
});
|
||||
|
||||
it('ignores free-text blocks and unknown passage ids', () => {
|
||||
const blocks: LetterBlock[] = [
|
||||
{ type: 'freeText', blockId: 'local-9', content: block('vrij') },
|
||||
...kern('positief', []),
|
||||
];
|
||||
expect(inferSelection(blocks, lib)).toEqual({ besluit: 'positief', reasons: [] });
|
||||
});
|
||||
});
|
||||
|
||||
describe('besluitGuidance', () => {
|
||||
it('positief: counts inserted passages, no reden needed (positief has no redenen)', () => {
|
||||
expect(besluitGuidance(lib, 'positief', [])).toEqual({ insertedCount: 2, needsReason: false });
|
||||
});
|
||||
|
||||
it('negatief without a reden: flags that a reden must be chosen', () => {
|
||||
expect(besluitGuidance(lib, 'negatief', [])).toEqual({ insertedCount: 2, needsReason: true });
|
||||
});
|
||||
|
||||
it('negatief with a reden: no longer flags, and the reason passage is counted', () => {
|
||||
expect(besluitGuidance(lib, 'negatief', ['onvoldoende_scholing'])).toEqual({
|
||||
insertedCount: 3,
|
||||
needsReason: false,
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,93 @@
|
||||
import { Besluit, LetterBlock, LibraryPassage } from './brief';
|
||||
|
||||
/**
|
||||
* Guided drafting: given the behandelaar's besluit + chosen redenen, which library
|
||||
* passages belong in the kern. This is the "don't make them a detective" logic —
|
||||
* pure, so it's unit-tested directly and the UI just renders the result.
|
||||
*
|
||||
* A passage is offered when:
|
||||
* - it has no besluit tag (a shared intro/toelichting, relevant to any besluit), OR
|
||||
* - its besluit matches AND either it isn't reason-specific, or its reason is ticked.
|
||||
*
|
||||
* Kept in library order (server order = reading order), so an inserted set already
|
||||
* flows as a letter.
|
||||
*/
|
||||
export function passagesForBesluit(
|
||||
passages: readonly LibraryPassage[],
|
||||
besluit: Besluit,
|
||||
reasons: readonly string[],
|
||||
): LibraryPassage[] {
|
||||
return passages.filter((p) => {
|
||||
if (p.sectionKey !== 'kern') return false;
|
||||
if (p.besluit === undefined) return true; // shared, any besluit
|
||||
if (p.besluit !== besluit) return false;
|
||||
if (p.reason === undefined) return true; // besluit-level, not reason-specific
|
||||
return reasons.includes(p.reason);
|
||||
});
|
||||
}
|
||||
|
||||
/** A selectable reden for a besluit, derived from the reason-specific passages — no
|
||||
separate catalog. `code` drives `passagesForBesluit`; `label` is the checkbox text.
|
||||
ponytail: assumes one passage per reason (true for the seed); dedupes on code if not. */
|
||||
export interface Reden {
|
||||
readonly code: string;
|
||||
readonly label: string;
|
||||
}
|
||||
|
||||
/** Visible assistance for the behandelaar on top of the silent auto-insert: how many kern
|
||||
standaardteksten the current besluit+redenen produced, and whether a reden still needs
|
||||
choosing (the besluit has reason-specific motivering passages but none is ticked). Pure
|
||||
DATA — the component maps it to localized copy. */
|
||||
export interface BesluitGuidance {
|
||||
readonly insertedCount: number;
|
||||
readonly needsReason: boolean;
|
||||
}
|
||||
|
||||
export function besluitGuidance(
|
||||
passages: readonly LibraryPassage[],
|
||||
besluit: Besluit,
|
||||
reasons: readonly string[],
|
||||
): BesluitGuidance {
|
||||
return {
|
||||
insertedCount: passagesForBesluit(passages, besluit, reasons).length,
|
||||
needsReason: redenenFor(passages, besluit).length > 0 && reasons.length === 0,
|
||||
};
|
||||
}
|
||||
|
||||
export function redenenFor(passages: readonly LibraryPassage[], besluit: Besluit): Reden[] {
|
||||
const seen = new Set<string>();
|
||||
const out: Reden[] = [];
|
||||
for (const p of passages) {
|
||||
if (p.sectionKey !== 'kern' || p.besluit !== besluit || p.reason === undefined) continue;
|
||||
if (seen.has(p.reason)) continue;
|
||||
seen.add(p.reason);
|
||||
out.push({ code: p.reason, label: p.label });
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
/**
|
||||
* The inverse of `passagesForBesluit`: read the current besluit + redenen back off the
|
||||
* kern's passage blocks (each carries its `sourcePassageId`), so the panel can re-seed
|
||||
* itself on reload/undo without persisting the selection separately. Kern passage blocks
|
||||
* are besluit-derived by construction (the only way passages enter the kern), so this
|
||||
* round-trips: `inferSelection(kern(passagesForBesluit(lib, b, r)), lib) === { b, r }`.
|
||||
* Free-text blocks carry no provenance and are ignored.
|
||||
*/
|
||||
export function inferSelection(
|
||||
kernBlocks: readonly LetterBlock[],
|
||||
passages: readonly LibraryPassage[],
|
||||
): { besluit: Besluit | null; reasons: string[] } {
|
||||
const byId = new Map(passages.map((p) => [p.passageId, p]));
|
||||
let besluit: Besluit | null = null;
|
||||
const reasons: string[] = [];
|
||||
for (const b of kernBlocks) {
|
||||
if (b.type !== 'passage') continue;
|
||||
const source = byId.get(b.sourcePassageId);
|
||||
if (!source) continue;
|
||||
if (source.besluit !== undefined) besluit = source.besluit;
|
||||
if (source.reason !== undefined && !reasons.includes(source.reason))
|
||||
reasons.push(source.reason);
|
||||
}
|
||||
return { besluit, reasons };
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { Brief, LetterBlock } from './brief';
|
||||
import { diffBlocks, changedBlocks } from './brief-diff';
|
||||
|
||||
function block(id: string, text: string): LetterBlock {
|
||||
return {
|
||||
type: 'freeText',
|
||||
blockId: id,
|
||||
content: { paragraphs: [{ nodes: [{ type: 'text', text }] }] },
|
||||
};
|
||||
}
|
||||
|
||||
function brief(blocks: LetterBlock[]): Brief {
|
||||
return {
|
||||
briefId: 'b1',
|
||||
beroep: 'arts',
|
||||
templateId: 't1',
|
||||
placeholders: [],
|
||||
sections: [{ sectionKey: 'kern', title: 'Kern', required: true, locked: false, blocks }],
|
||||
status: { tag: 'draft' },
|
||||
drafterId: 'u1',
|
||||
};
|
||||
}
|
||||
|
||||
describe('diffBlocks', () => {
|
||||
it('marks added, removed, changed and unchanged by blockId', () => {
|
||||
const before = brief([block('local-1', 'a'), block('local-2', 'b'), block('local-3', 'c')]);
|
||||
const after = brief([block('local-1', 'a'), block('local-2', 'B!'), block('local-4', 'd')]);
|
||||
const diffs = diffBlocks(before, after);
|
||||
const byId = new Map(diffs.map((d) => [d.blockId, d.kind]));
|
||||
expect(byId.get('local-1')).toBe('unchanged');
|
||||
expect(byId.get('local-2')).toBe('changed');
|
||||
expect(byId.get('local-3')).toBe('removed'); // gone from after
|
||||
expect(byId.get('local-4')).toBe('added'); // new in after
|
||||
});
|
||||
|
||||
it('changedBlocks drops unchanged and keeps added/removed/changed', () => {
|
||||
const before = brief([block('local-1', 'a'), block('local-2', 'b')]);
|
||||
const after = brief([block('local-1', 'a'), block('local-2', 'B'), block('local-3', 'c')]);
|
||||
const map = changedBlocks(diffBlocks(before, after));
|
||||
expect(map.has('local-1')).toBe(false);
|
||||
expect(map.get('local-2')).toBe('changed');
|
||||
expect(map.get('local-3')).toBe('added');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,50 @@
|
||||
import { Brief, LetterBlock, allBlocks } from './brief';
|
||||
|
||||
/**
|
||||
* The rejection diff as a PURE function over two immutable `Brief` values — the whole
|
||||
* teaching payload of WP-27: because state is one value, "what changed since the letter
|
||||
* was rejected" is just a fold over two snapshots, no change-tracking bookkeeping.
|
||||
*
|
||||
* Blocks are matched by `blockId` (stable `local-N`/seed ids):
|
||||
* - in `after` but not `before` → `added`
|
||||
* - in `before` but not `after` → `removed`
|
||||
* - in both, different content → `changed`
|
||||
* - in both, same content → `unchanged`
|
||||
*/
|
||||
|
||||
export type BlockDiffKind = 'added' | 'removed' | 'changed' | 'unchanged';
|
||||
|
||||
export interface BlockDiff {
|
||||
readonly blockId: string;
|
||||
readonly kind: BlockDiffKind;
|
||||
}
|
||||
|
||||
/** Content equality by value. Blocks are JSON-shaped immutable trees, so a canonical
|
||||
stringify is an honest deep-equal here (no functions, no cycles). */
|
||||
function contentEqual(a: LetterBlock, b: LetterBlock): boolean {
|
||||
return JSON.stringify(a.content) === JSON.stringify(b.content);
|
||||
}
|
||||
|
||||
export function diffBlocks(before: Brief, after: Brief): BlockDiff[] {
|
||||
const beforeById = new Map(allBlocks(before).map((b) => [b.blockId, b]));
|
||||
const afterById = new Map(allBlocks(after).map((b) => [b.blockId, b]));
|
||||
const out: BlockDiff[] = [];
|
||||
for (const a of afterById.values()) {
|
||||
const b = beforeById.get(a.blockId);
|
||||
out.push({
|
||||
blockId: a.blockId,
|
||||
kind: !b ? 'added' : contentEqual(a, b) ? 'unchanged' : 'changed',
|
||||
});
|
||||
}
|
||||
for (const b of beforeById.values()) {
|
||||
if (!afterById.has(b.blockId)) out.push({ blockId: b.blockId, kind: 'removed' });
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
/** Lookup of only the blocks that changed since rejection (drops `unchanged`), for
|
||||
badging the canvas. Keyed by `blockId`; removed ids are present too (the caller
|
||||
surfaces them as a count — a removed block no longer renders inline). */
|
||||
export function changedBlocks(diffs: readonly BlockDiff[]): ReadonlyMap<string, BlockDiffKind> {
|
||||
return new Map(diffs.filter((d) => d.kind !== 'unchanged').map((d) => [d.blockId, d.kind]));
|
||||
}
|
||||
@@ -0,0 +1,288 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { Besluit, Brief, BriefDecisions, BriefStatus, LibraryPassage } from './brief';
|
||||
import { RichTextBlock } from '@shared/kernel/rich-text';
|
||||
import { PlaceholderDef } from './placeholders';
|
||||
import { BriefState, reduce } from './brief.machine';
|
||||
|
||||
const placeholders: PlaceholderDef[] = [
|
||||
{ key: 'naam', label: 'Naam', autoResolvable: true },
|
||||
{ key: 'reden', label: 'Reden', autoResolvable: false },
|
||||
];
|
||||
|
||||
const text = (t: string): RichTextBlock => ({
|
||||
paragraphs: [{ nodes: [{ type: 'text', text: t }] }],
|
||||
});
|
||||
|
||||
const libPassage = (
|
||||
id: string,
|
||||
sectionKey: string,
|
||||
extra: Partial<LibraryPassage> = {},
|
||||
): LibraryPassage => ({
|
||||
passageId: id,
|
||||
scope: 'global',
|
||||
sectionKey,
|
||||
label: `Passage ${id}`,
|
||||
content: text(`inhoud ${id}`),
|
||||
version: 3,
|
||||
...extra,
|
||||
});
|
||||
|
||||
// A besluit-tagged kern library: `intro` is shared (any besluit), `pos`/`neg` are
|
||||
// besluit-level, `neg-r` is reason-specific. This drives every `BesluitSelected` here.
|
||||
const lib: LibraryPassage[] = [
|
||||
libPassage('intro', 'kern'),
|
||||
libPassage('pos', 'kern', { besluit: 'positief' }),
|
||||
libPassage('neg', 'kern', { besluit: 'negatief' }),
|
||||
libPassage('neg-r', 'kern', { besluit: 'negatief', reason: 'r1', label: 'Reden 1' }),
|
||||
];
|
||||
|
||||
const besluit = (b: Besluit | null, reasons: string[] = []) =>
|
||||
({ tag: 'BesluitSelected', besluit: b, reasons }) as const;
|
||||
|
||||
function briefWith(status: BriefStatus, sections?: Brief['sections']): Brief {
|
||||
return {
|
||||
briefId: 'b1',
|
||||
beroep: 'arts',
|
||||
templateId: 't1',
|
||||
placeholders,
|
||||
sections: sections ?? [
|
||||
{ sectionKey: 'kern', title: 'Kern', required: true, locked: false, blocks: [] },
|
||||
{ sectionKey: 'slot', title: 'Slot', required: false, locked: false, blocks: [] },
|
||||
],
|
||||
status,
|
||||
drafterId: 'u1',
|
||||
};
|
||||
}
|
||||
|
||||
// A machine test cares about status transitions, not who may act — a fixed,
|
||||
// unrestrictive fixture keeps every existing assertion focused on that.
|
||||
const decisions: BriefDecisions = {
|
||||
canEdit: true,
|
||||
canApprove: true,
|
||||
canReject: true,
|
||||
canSend: true,
|
||||
canRevealBigNummer: true,
|
||||
};
|
||||
|
||||
const loaded = (
|
||||
status: BriefStatus = { tag: 'draft' },
|
||||
sections?: Brief['sections'],
|
||||
): BriefState => ({
|
||||
tag: 'loaded',
|
||||
brief: briefWith(status, sections),
|
||||
availablePassages: lib,
|
||||
decisions,
|
||||
});
|
||||
|
||||
const sectionBlocks = (s: BriefState, key: string) =>
|
||||
s.tag === 'loaded' ? s.brief.sections.find((x) => x.sectionKey === key)!.blocks : [];
|
||||
|
||||
const passageIds = (s: BriefState, key: string) =>
|
||||
sectionBlocks(s, key)
|
||||
.filter((b) => b.type === 'passage')
|
||||
.map((b) => (b.type === 'passage' ? b.sourcePassageId : ''));
|
||||
|
||||
describe('brief.machine reduce', () => {
|
||||
it('BriefLoaded moves loading to loaded', () => {
|
||||
expect(
|
||||
reduce(initialLoading(), {
|
||||
tag: 'BriefLoaded',
|
||||
brief: briefWith({ tag: 'draft' }),
|
||||
availablePassages: [],
|
||||
decisions,
|
||||
}).tag,
|
||||
).toBe('loaded');
|
||||
});
|
||||
|
||||
it('BriefLoadFailed moves loading to failed with the reason', () => {
|
||||
expect(reduce(initialLoading(), { tag: 'BriefLoadFailed', reason: 'x' })).toEqual({
|
||||
tag: 'failed',
|
||||
reason: 'x',
|
||||
});
|
||||
});
|
||||
|
||||
it('Seed sets the state directly', () => {
|
||||
const seeded = loaded();
|
||||
expect(reduce(initialLoading(), { tag: 'Seed', state: seeded })).toBe(seeded);
|
||||
});
|
||||
|
||||
it('BesluitSelected composes the kern: the besluit passages, in reading order, as frozen local blocks', () => {
|
||||
const s = reduce(loaded(), besluit('positief'));
|
||||
const blocks = sectionBlocks(s, 'kern');
|
||||
expect(blocks.map((b) => b.blockId)).toEqual(['local-1', 'local-2']);
|
||||
expect(blocks.every((b) => b.type === 'passage' && b.edited === false)).toBe(true);
|
||||
expect(passageIds(s, 'kern')).toEqual(['intro', 'pos']);
|
||||
});
|
||||
|
||||
it('BesluitSelected swaps the passages when the selection changes, keeping free text', () => {
|
||||
let s = reduce(loaded(), besluit('positief'));
|
||||
s = reduce(s, { tag: 'FreeTextBlockAdded', sectionKey: 'kern' }); // drafter's own remark
|
||||
s = reduce(s, besluit('negatief', ['r1']));
|
||||
const blocks = sectionBlocks(s, 'kern');
|
||||
expect(blocks.map((b) => b.type)).toEqual(['passage', 'passage', 'passage', 'freeText']);
|
||||
expect(passageIds(s, 'kern')).toEqual(['intro', 'neg', 'neg-r']);
|
||||
// Deselecting the besluit leaves only the free text.
|
||||
s = reduce(s, besluit(null));
|
||||
expect(sectionBlocks(s, 'kern').map((b) => b.type)).toEqual(['freeText']);
|
||||
});
|
||||
|
||||
it('BesluitSelected deep-copies content — later library mutation does not leak in', () => {
|
||||
const passage = libPassage('intro', 'kern'); // shared → offered for any besluit
|
||||
const st: BriefState = {
|
||||
tag: 'loaded',
|
||||
brief: briefWith({ tag: 'draft' }),
|
||||
availablePassages: [passage],
|
||||
decisions,
|
||||
};
|
||||
const s = reduce(st, besluit('positief'));
|
||||
// Mutate the source passage object after composition.
|
||||
(passage.content.paragraphs[0].nodes as { type: 'text'; text: string }[])[0].text = 'HACKED';
|
||||
const block = sectionBlocks(s, 'kern')[0];
|
||||
expect(block.content.paragraphs[0].nodes[0]).toEqual({ type: 'text', text: 'inhoud intro' });
|
||||
});
|
||||
|
||||
it('FreeTextBlockAdded appends an empty free-text block', () => {
|
||||
const s = reduce(loaded(), { tag: 'FreeTextBlockAdded', sectionKey: 'kern' });
|
||||
const blocks = sectionBlocks(s, 'kern');
|
||||
expect(blocks).toHaveLength(1);
|
||||
expect(blocks[0].type).toBe('freeText');
|
||||
});
|
||||
|
||||
it('BlockContentEdited replaces content and marks a passage block edited', () => {
|
||||
let s = reduce(loaded(), besluit('positief'));
|
||||
s = reduce(s, { tag: 'BlockContentEdited', blockId: 'local-1', content: text('aangepast') });
|
||||
const block = sectionBlocks(s, 'kern')[0];
|
||||
expect(block.type === 'passage' && block.edited).toBe(true);
|
||||
expect(block.content).toEqual(text('aangepast'));
|
||||
});
|
||||
|
||||
it('BlockMovedWithinSection reorders blocks within a section', () => {
|
||||
let s = reduce(loaded(), besluit('positief')); // local-1 intro, local-2 pos
|
||||
s = reduce(s, { tag: 'BlockMovedWithinSection', blockId: 'local-1', toIndex: 1 });
|
||||
expect(sectionBlocks(s, 'kern').map((b) => b.blockId)).toEqual(['local-2', 'local-1']);
|
||||
});
|
||||
|
||||
it('BlockRemoved drops a block from a section', () => {
|
||||
let s = reduce(loaded(), besluit('positief')); // local-1 intro, local-2 pos
|
||||
s = reduce(s, { tag: 'BlockRemoved', blockId: 'local-2' });
|
||||
expect(sectionBlocks(s, 'kern').map((b) => b.blockId)).toEqual(['local-1']);
|
||||
});
|
||||
|
||||
it('edits to a locked section are no-ops (besluit, free-text, content, remove, move)', () => {
|
||||
const lockedSections: Brief['sections'] = [
|
||||
{
|
||||
sectionKey: 'kern',
|
||||
title: 'Kern',
|
||||
required: true,
|
||||
locked: true,
|
||||
blocks: [{ type: 'freeText', blockId: 'local-1', content: text('vast') }],
|
||||
},
|
||||
{ sectionKey: 'slot', title: 'Slot', required: false, locked: false, blocks: [] },
|
||||
];
|
||||
const s = loaded({ tag: 'draft' }, lockedSections);
|
||||
// The brief value is left untouched (withEdit reallocates state, but the guard returns
|
||||
// the same brief), so assert on deep equality of the section contents.
|
||||
expect(reduce(s, besluit('positief'))).toEqual(s);
|
||||
expect(reduce(s, { tag: 'FreeTextBlockAdded', sectionKey: 'kern' })).toEqual(s);
|
||||
expect(
|
||||
reduce(s, { tag: 'BlockContentEdited', blockId: 'local-1', content: text('gehackt') }),
|
||||
).toEqual(s);
|
||||
expect(reduce(s, { tag: 'BlockRemoved', blockId: 'local-1' })).toEqual(s);
|
||||
expect(reduce(s, { tag: 'BlockMovedWithinSection', blockId: 'local-1', toIndex: 0 })).toEqual(
|
||||
s,
|
||||
);
|
||||
// the unlocked section still accepts edits
|
||||
const edited = reduce(s, { tag: 'FreeTextBlockAdded', sectionKey: 'slot' });
|
||||
expect(sectionBlocks(edited, 'slot')).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('edits are no-ops once submitted (status invariant)', () => {
|
||||
const s = loaded({ tag: 'submitted', submittedBy: 'u1', submittedAt: 't' });
|
||||
expect(reduce(s, { tag: 'FreeTextBlockAdded', sectionKey: 'slot' })).toBe(s);
|
||||
});
|
||||
|
||||
it('editing a rejected letter reopens it to draft', () => {
|
||||
const s = loaded({
|
||||
tag: 'rejected',
|
||||
rejectedBy: 'u2',
|
||||
rejectedAt: 't',
|
||||
comments: 'graag aanpassen',
|
||||
});
|
||||
const next = reduce(s, { tag: 'FreeTextBlockAdded', sectionKey: 'slot' });
|
||||
expect(next.tag === 'loaded' && next.brief.status.tag).toBe('draft');
|
||||
expect(sectionBlocks(next, 'slot')).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('Submitted fires only from draft and only when required sections are filled', () => {
|
||||
// required 'kern' empty → no-op
|
||||
expect(reduce(loaded(), { tag: 'Submitted', by: 'u1', at: 't', decisions })).toEqual(loaded());
|
||||
// fill the required section via the besluit, then submit
|
||||
const filled = reduce(loaded(), besluit('positief'));
|
||||
const submitted = reduce(filled, { tag: 'Submitted', by: 'u1', at: 't', decisions });
|
||||
expect(submitted.tag === 'loaded' && submitted.brief.status).toEqual({
|
||||
tag: 'submitted',
|
||||
submittedBy: 'u1',
|
||||
submittedAt: 't',
|
||||
});
|
||||
});
|
||||
|
||||
it('approve fires only from submitted', () => {
|
||||
const submitted = loaded({ tag: 'submitted', submittedBy: 'u1', submittedAt: 't' });
|
||||
// approve from draft is a no-op
|
||||
expect(reduce(loaded(), { tag: 'Approved', by: 'u2', at: 't', decisions })).toEqual(loaded());
|
||||
const approved = reduce(submitted, { tag: 'Approved', by: 'u2', at: 't2', decisions });
|
||||
expect(approved.tag === 'loaded' && approved.brief.status).toEqual({
|
||||
tag: 'approved',
|
||||
approvedBy: 'u2',
|
||||
approvedAt: 't2',
|
||||
});
|
||||
});
|
||||
|
||||
it('reject fires from submitted, carrying comments', () => {
|
||||
const submitted = loaded({ tag: 'submitted', submittedBy: 'u1', submittedAt: 't' });
|
||||
const rejected = reduce(submitted, {
|
||||
tag: 'Rejected',
|
||||
by: 'u2',
|
||||
at: 't2',
|
||||
comments: 'nee',
|
||||
decisions,
|
||||
});
|
||||
expect(rejected.tag === 'loaded' && rejected.brief.status).toEqual({
|
||||
tag: 'rejected',
|
||||
rejectedBy: 'u2',
|
||||
rejectedAt: 't2',
|
||||
comments: 'nee',
|
||||
});
|
||||
});
|
||||
|
||||
it('send fires only from approved', () => {
|
||||
const submitted = loaded({ tag: 'submitted', submittedBy: 'u1', submittedAt: 't' });
|
||||
const approved = reduce(submitted, { tag: 'Approved', by: 'u2', at: 't2', decisions });
|
||||
// send from submitted is a no-op
|
||||
expect(reduce(submitted, { tag: 'Sent', at: 't', decisions })).toBe(submitted);
|
||||
const sent = reduce(approved, { tag: 'Sent', at: 't3', decisions });
|
||||
expect(sent.tag === 'loaded' && sent.brief.status).toEqual({ tag: 'sent', sentAt: 't3' });
|
||||
});
|
||||
|
||||
it('a status transition replaces decisions with the fresh server value', () => {
|
||||
const submitted = loaded({ tag: 'submitted', submittedBy: 'u1', submittedAt: 't' });
|
||||
const staleApprover: BriefDecisions = {
|
||||
canEdit: false,
|
||||
canApprove: false,
|
||||
canReject: false,
|
||||
canSend: false,
|
||||
canRevealBigNummer: false,
|
||||
};
|
||||
const approved = reduce(submitted, {
|
||||
tag: 'Approved',
|
||||
by: 'u2',
|
||||
at: 't2',
|
||||
decisions: staleApprover,
|
||||
});
|
||||
expect(approved.tag === 'loaded' && approved.decisions).toEqual(staleApprover);
|
||||
});
|
||||
});
|
||||
|
||||
function initialLoading(): BriefState {
|
||||
return { tag: 'loading' };
|
||||
}
|
||||
@@ -0,0 +1,280 @@
|
||||
import { assertNever } from '@shared/kernel/fp';
|
||||
import {
|
||||
Besluit,
|
||||
Brief,
|
||||
BriefDecisions,
|
||||
BriefStatus,
|
||||
LetterBlock,
|
||||
LetterSection,
|
||||
LibraryPassage,
|
||||
allBlocks,
|
||||
canSubmit,
|
||||
} from './brief';
|
||||
import { RichTextBlock, deepCopyBlock, emptyBlock } from '@shared/kernel/rich-text';
|
||||
import { passagesForBesluit } from './besluit';
|
||||
|
||||
/**
|
||||
* The letter composition state machine (Model + Msg + pure reduce), modeled on
|
||||
* `herregistratie/domain/intake.machine.ts`.
|
||||
*
|
||||
* Two invariants are enforced *here*, not in the UI:
|
||||
* - Status transitions are total and guarded — an out-of-order transition Msg is a
|
||||
* no-op (`draft→submitted→approved/rejected→draft`, `approved→sent`).
|
||||
* - Edits are only possible in `draft`/`rejected`; editing a `rejected` letter flips
|
||||
* it back to `draft`. Sections can never be added, removed, or reordered — there
|
||||
* is no Msg for it, so it is unrepresentable.
|
||||
*
|
||||
* Authorization is NOT a reducer concern: `decisions` (canEdit/canApprove/canReject/
|
||||
* canSend) arrives from the server on every load and every status transition (PRD-0002
|
||||
* phase P1) and is carried through unchanged by the reducer — never recomputed here.
|
||||
* The reducer guards the status invariant; the server is the sole authority on who may
|
||||
* act on it.
|
||||
*
|
||||
* Note: there is no `PlaceholderInserted` Msg. The editor inserts a placeholder NODE
|
||||
* at the caret and emits the whole new block via `BlockContentEdited`; its insert menu
|
||||
* only offers keys from `brief.placeholders`, so inserting an unknown key is
|
||||
* structurally impossible (a pasted `{{…}}` is caught by the linter as `malformed`).
|
||||
*/
|
||||
|
||||
export type BriefState =
|
||||
| { tag: 'loading' }
|
||||
| {
|
||||
tag: 'loaded';
|
||||
brief: Brief;
|
||||
availablePassages: readonly LibraryPassage[];
|
||||
decisions: BriefDecisions;
|
||||
}
|
||||
| { tag: 'failed'; reason: string };
|
||||
|
||||
export const initial: BriefState = { tag: 'loading' };
|
||||
|
||||
export type BriefMsg =
|
||||
| {
|
||||
tag: 'BriefLoaded';
|
||||
brief: Brief;
|
||||
availablePassages: readonly LibraryPassage[];
|
||||
decisions: BriefDecisions;
|
||||
}
|
||||
| { tag: 'BriefLoadFailed'; reason: string }
|
||||
| { tag: 'BesluitSelected'; besluit: Besluit | null; reasons: readonly string[] } // recomposes the kern's passages
|
||||
| { tag: 'FreeTextBlockAdded'; sectionKey: string }
|
||||
| { tag: 'BlockContentEdited'; blockId: string; content: RichTextBlock }
|
||||
| { tag: 'BlockRemoved'; blockId: string }
|
||||
| { tag: 'BlockMovedWithinSection'; blockId: string; toIndex: number }
|
||||
| { tag: 'Submitted'; by: string; at: string; decisions: BriefDecisions } // draft → submitted
|
||||
| { tag: 'Approved'; by: string; at: string; decisions: BriefDecisions } // submitted → approved
|
||||
| { tag: 'Rejected'; by: string; at: string; comments: string; decisions: BriefDecisions } // submitted → rejected
|
||||
| { tag: 'Sent'; at: string; decisions: BriefDecisions } // approved → sent
|
||||
| { tag: 'Seed'; state: BriefState };
|
||||
|
||||
/** Edits are allowed only in these statuses; editing a rejected letter reopens it. */
|
||||
function isEditable(status: BriefStatus): boolean {
|
||||
return status.tag === 'draft' || status.tag === 'rejected';
|
||||
}
|
||||
|
||||
/** Next `local-N` block id — DERIVED from existing ids (max + 1), not a stored counter. */
|
||||
function nextLocalIndex(brief: Brief): number {
|
||||
let max = 0;
|
||||
for (const b of allBlocks(brief)) {
|
||||
const m = /^local-(\d+)$/.exec(b.blockId);
|
||||
if (m) max = Math.max(max, Number(m[1]));
|
||||
}
|
||||
return max + 1;
|
||||
}
|
||||
|
||||
function mapSection(
|
||||
brief: Brief,
|
||||
sectionKey: string,
|
||||
f: (s: LetterSection) => LetterSection,
|
||||
): Brief {
|
||||
return {
|
||||
...brief,
|
||||
sections: brief.sections.map((s) => (s.sectionKey === sectionKey ? f(s) : s)),
|
||||
};
|
||||
}
|
||||
|
||||
/** The section a block currently lives in, or undefined if the block is gone. */
|
||||
function sectionKeyOfBlock(brief: Brief, blockId: string): string | undefined {
|
||||
return brief.sections.find((s) => s.blocks.some((b) => b.blockId === blockId))?.sectionKey;
|
||||
}
|
||||
|
||||
/** A section accepts edits only when it is not a locked (predefined) template section. */
|
||||
function isSectionEditable(brief: Brief, sectionKey: string | undefined): boolean {
|
||||
const section = brief.sections.find((s) => s.sectionKey === sectionKey);
|
||||
return !!section && !section.locked;
|
||||
}
|
||||
|
||||
function mapBlocks(brief: Brief, f: (blocks: readonly LetterBlock[]) => LetterBlock[]): Brief {
|
||||
return { ...brief, sections: brief.sections.map((s) => ({ ...s, blocks: f(s.blocks) })) };
|
||||
}
|
||||
|
||||
/** Apply an edit to the brief, guarded by status. A rejected letter reopens to draft. */
|
||||
function withEdit(s: BriefState, f: (b: Brief) => Brief): BriefState {
|
||||
if (s.tag !== 'loaded' || !isEditable(s.brief.status)) return s;
|
||||
let brief = f(s.brief);
|
||||
if (brief.status.tag === 'rejected') brief = { ...brief, status: { tag: 'draft' } };
|
||||
return { ...s, brief };
|
||||
}
|
||||
|
||||
function buildPassageBlocks(brief: Brief, passages: readonly LibraryPassage[]): LetterBlock[] {
|
||||
let idx = nextLocalIndex(brief);
|
||||
// The freeze happens HERE: each block gets a deep VALUE copy of the library content,
|
||||
// so later library edits can never mutate this letter (frozen snapshot).
|
||||
return passages.map((p) => ({
|
||||
type: 'passage',
|
||||
blockId: `local-${idx++}`,
|
||||
sourcePassageId: p.passageId,
|
||||
sourceVersion: p.version,
|
||||
content: deepCopyBlock(p.content),
|
||||
edited: false,
|
||||
}));
|
||||
}
|
||||
|
||||
/** Recompose the kern for a besluit selection: the besluit-driven passages (in reading
|
||||
order) followed by the drafter's free-text blocks. The kern's `passage` blocks are
|
||||
besluit-derived by construction, so replacing them wholesale is the reactive swap; the
|
||||
`freeText` blocks are the drafter's own remarks and survive.
|
||||
ponytail: free text always trails the besluit passages after a recompute. */
|
||||
function composeKern(
|
||||
brief: Brief,
|
||||
availablePassages: readonly LibraryPassage[],
|
||||
besluit: Besluit | null,
|
||||
reasons: readonly string[],
|
||||
): Brief {
|
||||
const besluitBlocks = besluit
|
||||
? buildPassageBlocks(brief, passagesForBesluit(availablePassages, besluit, reasons))
|
||||
: [];
|
||||
return mapSection(brief, 'kern', (s) => ({
|
||||
...s,
|
||||
blocks: [...besluitBlocks, ...s.blocks.filter((b) => b.type === 'freeText')],
|
||||
}));
|
||||
}
|
||||
|
||||
function addFreeText(brief: Brief, sectionKey: string): Brief {
|
||||
const block: LetterBlock = {
|
||||
type: 'freeText',
|
||||
blockId: `local-${nextLocalIndex(brief)}`,
|
||||
content: emptyBlock(),
|
||||
};
|
||||
return mapSection(brief, sectionKey, (s) => ({ ...s, blocks: [...s.blocks, block] }));
|
||||
}
|
||||
|
||||
function editBlockContent(brief: Brief, blockId: string, content: RichTextBlock): Brief {
|
||||
return mapBlocks(brief, (blocks) =>
|
||||
blocks.map((b) =>
|
||||
b.blockId !== blockId
|
||||
? b
|
||||
: b.type === 'passage'
|
||||
? { ...b, content, edited: true } // editing a snapshot marks it, keeps provenance
|
||||
: { ...b, content },
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
function moveWithinSection(
|
||||
blocks: readonly LetterBlock[],
|
||||
blockId: string,
|
||||
toIndex: number,
|
||||
): LetterBlock[] {
|
||||
const from = blocks.findIndex((b) => b.blockId === blockId);
|
||||
if (from === -1) return [...blocks];
|
||||
const clamped = Math.max(0, Math.min(toIndex, blocks.length - 1));
|
||||
const next = [...blocks];
|
||||
const [moved] = next.splice(from, 1);
|
||||
next.splice(clamped, 0, moved);
|
||||
return next;
|
||||
}
|
||||
|
||||
export function reduce(s: BriefState, m: BriefMsg): BriefState {
|
||||
switch (m.tag) {
|
||||
case 'BriefLoaded':
|
||||
return {
|
||||
tag: 'loaded',
|
||||
brief: m.brief,
|
||||
availablePassages: m.availablePassages,
|
||||
decisions: m.decisions,
|
||||
};
|
||||
case 'BriefLoadFailed':
|
||||
return { tag: 'failed', reason: m.reason };
|
||||
case 'Seed':
|
||||
return m.state;
|
||||
|
||||
// The kern is besluit-driven: (re)compose its passages from the selection, keeping the
|
||||
// drafter's free text. `availablePassages` lives on the loaded state, so this stays pure.
|
||||
case 'BesluitSelected':
|
||||
return withEdit(s, (b) =>
|
||||
s.tag === 'loaded' && isSectionEditable(b, 'kern')
|
||||
? composeKern(b, s.availablePassages, m.besluit, m.reasons)
|
||||
: b,
|
||||
);
|
||||
case 'FreeTextBlockAdded':
|
||||
return withEdit(s, (b) =>
|
||||
isSectionEditable(b, m.sectionKey) ? addFreeText(b, m.sectionKey) : b,
|
||||
);
|
||||
case 'BlockContentEdited':
|
||||
return withEdit(s, (b) =>
|
||||
isSectionEditable(b, sectionKeyOfBlock(b, m.blockId))
|
||||
? editBlockContent(b, m.blockId, m.content)
|
||||
: b,
|
||||
);
|
||||
case 'BlockRemoved':
|
||||
return withEdit(s, (b) =>
|
||||
isSectionEditable(b, sectionKeyOfBlock(b, m.blockId))
|
||||
? mapBlocks(b, (blocks) => blocks.filter((x) => x.blockId !== m.blockId))
|
||||
: b,
|
||||
);
|
||||
case 'BlockMovedWithinSection':
|
||||
return withEdit(s, (b) =>
|
||||
isSectionEditable(b, sectionKeyOfBlock(b, m.blockId))
|
||||
? mapBlocks(b, (blocks) =>
|
||||
blocks.some((x) => x.blockId === m.blockId)
|
||||
? moveWithinSection(blocks, m.blockId, m.toIndex)
|
||||
: [...blocks],
|
||||
)
|
||||
: b,
|
||||
);
|
||||
|
||||
case 'Submitted':
|
||||
// Guard the transition AND the completeness invariant.
|
||||
return transition(
|
||||
s,
|
||||
'draft',
|
||||
() => ({ tag: 'submitted', submittedBy: m.by, submittedAt: m.at }),
|
||||
m.decisions,
|
||||
canSubmit,
|
||||
);
|
||||
case 'Approved':
|
||||
return transition(
|
||||
s,
|
||||
'submitted',
|
||||
() => ({ tag: 'approved', approvedBy: m.by, approvedAt: m.at }),
|
||||
m.decisions,
|
||||
);
|
||||
case 'Rejected':
|
||||
return transition(
|
||||
s,
|
||||
'submitted',
|
||||
() => ({ tag: 'rejected', rejectedBy: m.by, rejectedAt: m.at, comments: m.comments }),
|
||||
m.decisions,
|
||||
);
|
||||
case 'Sent':
|
||||
return transition(s, 'approved', () => ({ tag: 'sent', sentAt: m.at }), m.decisions);
|
||||
|
||||
default:
|
||||
return assertNever(m);
|
||||
}
|
||||
}
|
||||
|
||||
/** A guarded status transition: only fires from `from`, and only if `guard` passes.
|
||||
`decisions` replaces the prior server-computed flags — always fresh from the
|
||||
same response that carried the new status. */
|
||||
function transition(
|
||||
s: BriefState,
|
||||
from: BriefStatus['tag'],
|
||||
next: () => BriefStatus,
|
||||
decisions: BriefDecisions,
|
||||
guard: (b: Brief) => boolean = () => true,
|
||||
): BriefState {
|
||||
if (s.tag !== 'loaded' || s.brief.status.tag !== from || !guard(s.brief)) return s;
|
||||
return { ...s, brief: { ...s.brief, status: next() }, decisions };
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import {
|
||||
Brief,
|
||||
LetterBlock,
|
||||
allDiagnostics,
|
||||
canSubmit,
|
||||
hasBlockingErrors,
|
||||
unresolvedPlaceholders,
|
||||
} from './brief';
|
||||
import { PlaceholderDef } from './placeholders';
|
||||
import { RichTextBlock } from '@shared/kernel/rich-text';
|
||||
|
||||
const placeholders: PlaceholderDef[] = [
|
||||
{ key: 'naam', label: 'Naam', autoResolvable: true },
|
||||
{ key: 'reden', label: 'Reden', autoResolvable: false },
|
||||
];
|
||||
|
||||
const content = (...keys: string[]): RichTextBlock => ({
|
||||
paragraphs: [{ nodes: keys.map((key) => ({ type: 'placeholder', key })) }],
|
||||
});
|
||||
|
||||
const passage = (blockId: string, ...keys: string[]): LetterBlock => ({
|
||||
type: 'freeText',
|
||||
blockId,
|
||||
content: content(...keys),
|
||||
});
|
||||
|
||||
function brief(sections: Brief['sections']): Brief {
|
||||
return {
|
||||
briefId: 'b1',
|
||||
beroep: 'arts',
|
||||
templateId: 't1',
|
||||
placeholders,
|
||||
sections,
|
||||
status: { tag: 'draft' },
|
||||
drafterId: 'u1',
|
||||
};
|
||||
}
|
||||
|
||||
describe('brief selectors', () => {
|
||||
it('unresolvedPlaceholders returns deduped manual keys only (auto excluded)', () => {
|
||||
const b = brief([
|
||||
{
|
||||
sectionKey: 's1',
|
||||
title: 'S1',
|
||||
required: true,
|
||||
locked: false,
|
||||
blocks: [passage('local-1', 'naam', 'reden')],
|
||||
},
|
||||
{
|
||||
sectionKey: 's2',
|
||||
title: 'S2',
|
||||
required: false,
|
||||
locked: false,
|
||||
blocks: [passage('local-2', 'reden')],
|
||||
},
|
||||
]);
|
||||
expect(unresolvedPlaceholders(b)).toEqual(['reden']); // 'naam' is auto; 'reden' deduped
|
||||
});
|
||||
|
||||
it('allDiagnostics flattens across sections and blocks', () => {
|
||||
const b = brief([
|
||||
{
|
||||
sectionKey: 's1',
|
||||
title: 'S1',
|
||||
required: true,
|
||||
locked: false,
|
||||
blocks: [passage('local-1', 'reden', 'onbekend')],
|
||||
},
|
||||
]);
|
||||
const codes = allDiagnostics(b).map((d) => d.code);
|
||||
expect(codes).toContain('unresolved-at-send'); // reden
|
||||
expect(codes).toContain('unknown-placeholder'); // onbekend
|
||||
expect(hasBlockingErrors(allDiagnostics(b))).toBe(true); // unknown is an error
|
||||
});
|
||||
|
||||
it('canSubmit is false when a required section is empty, true otherwise', () => {
|
||||
expect(
|
||||
canSubmit(
|
||||
brief([{ sectionKey: 's1', title: 'S1', required: true, locked: false, blocks: [] }]),
|
||||
),
|
||||
).toBe(false);
|
||||
expect(
|
||||
canSubmit(
|
||||
brief([{ sectionKey: 's1', title: 'S1', required: false, locked: false, blocks: [] }]),
|
||||
),
|
||||
).toBe(true);
|
||||
expect(
|
||||
canSubmit(
|
||||
brief([
|
||||
{
|
||||
sectionKey: 's1',
|
||||
title: 'S1',
|
||||
required: true,
|
||||
locked: false,
|
||||
blocks: [passage('local-1')],
|
||||
},
|
||||
]),
|
||||
),
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,141 @@
|
||||
import { RichTextBlock, placeholderKeysIn } from '@shared/kernel/rich-text';
|
||||
import { Diagnostic, lintPlaceholders, PlaceholderDef } from './placeholders';
|
||||
|
||||
/**
|
||||
* The `Brief` (letter) entity and its derived selectors.
|
||||
*
|
||||
* A letter has a FIXED section structure (from a template, server-instantiated); the
|
||||
* drafter fills a skeleton, never reorders sections. Each block is either a frozen
|
||||
* snapshot of a library passage (provenance kept) or free text. Everything the UI
|
||||
* needs beyond the stored shape — diagnostics, unresolved placeholders, whether it
|
||||
* can be submitted — is DERIVED here, never stored.
|
||||
*/
|
||||
|
||||
export type PassageScope = 'global' | 'beroep';
|
||||
|
||||
/** The decision the behandelaar is communicating. Drives which passages are offered. */
|
||||
export type Besluit = 'positief' | 'negatief';
|
||||
|
||||
// Re-export placeholderKeysIn for one-import convenience at call sites.
|
||||
export { placeholderKeysIn };
|
||||
|
||||
/** A passage in the library (the source). Snapshotted into a letter on insert. */
|
||||
export interface LibraryPassage {
|
||||
readonly passageId: string;
|
||||
readonly scope: PassageScope;
|
||||
readonly beroep?: string; // set when scope === 'beroep'
|
||||
readonly sectionKey: string;
|
||||
readonly label: string;
|
||||
readonly content: RichTextBlock;
|
||||
readonly version: number; // library version, for provenance only
|
||||
// Guided-drafting tags: the behandelaar picks a besluit + reden, and `passagesForBesluit`
|
||||
// (besluit.ts) filters to the matching passages. undefined besluit = shown for any
|
||||
// besluit; undefined reason = not reason-specific. See @brief/domain/besluit.
|
||||
readonly besluit?: Besluit;
|
||||
readonly reason?: string;
|
||||
}
|
||||
|
||||
/** A block inside a letter section: a frozen passage snapshot, or free text. */
|
||||
export type LetterBlock =
|
||||
| {
|
||||
readonly type: 'passage';
|
||||
readonly blockId: string;
|
||||
readonly sourcePassageId: string; // provenance
|
||||
readonly sourceVersion: number; // library version at snapshot time (audit only)
|
||||
readonly content: RichTextBlock; // FROZEN, possibly edited — source of truth for this block
|
||||
readonly edited: boolean; // changed from the snapshot?
|
||||
}
|
||||
| {
|
||||
readonly type: 'freeText';
|
||||
readonly blockId: string;
|
||||
readonly content: RichTextBlock;
|
||||
};
|
||||
|
||||
export interface LetterSection {
|
||||
readonly sectionKey: string;
|
||||
readonly title: string;
|
||||
readonly required: boolean;
|
||||
// Predefined template sections (aanhef, slot) arrive locked and prefilled — the drafter
|
||||
// composes only the unlocked section(s). The reducer refuses edits to locked sections.
|
||||
// These come from the case-type template (`Brief.templateId`), so e.g. the slot's closing
|
||||
// can differ per case type; the drafter never edits it, and it renders only in the preview.
|
||||
readonly locked: boolean;
|
||||
readonly blocks: readonly LetterBlock[];
|
||||
}
|
||||
|
||||
/** The approval state machine as a sum type — transitions are total and guarded in
|
||||
`brief.machine.ts`; illegal transitions are unrepresentable. */
|
||||
export type BriefStatus =
|
||||
| { readonly tag: 'draft' }
|
||||
| { readonly tag: 'submitted'; readonly submittedBy: string; readonly submittedAt: string }
|
||||
| { readonly tag: 'approved'; readonly approvedBy: string; readonly approvedAt: string }
|
||||
| {
|
||||
readonly tag: 'rejected';
|
||||
readonly rejectedBy: string;
|
||||
readonly rejectedAt: string;
|
||||
readonly comments: string;
|
||||
}
|
||||
| { readonly tag: 'sent'; readonly sentAt: string };
|
||||
|
||||
export interface Brief {
|
||||
readonly briefId: string;
|
||||
readonly beroep: string; // drives which beroep-scoped passages apply
|
||||
readonly templateId: string;
|
||||
readonly placeholders: readonly PlaceholderDef[]; // valid fields for this letter
|
||||
readonly sections: readonly LetterSection[]; // instantiated from the template, in order
|
||||
readonly status: BriefStatus;
|
||||
readonly drafterId: string;
|
||||
}
|
||||
|
||||
// --- Derived selectors (pure; recomputed, never stored) ---
|
||||
|
||||
export function allBlocks(brief: Brief): LetterBlock[] {
|
||||
return brief.sections.flatMap((s) => s.blocks);
|
||||
}
|
||||
|
||||
/** Every diagnostic in the letter, in section→block→node order. This is what the
|
||||
diagnostics panel renders and what the send gate checks. */
|
||||
export function allDiagnostics(brief: Brief): Diagnostic[] {
|
||||
return allBlocks(brief).flatMap((b) =>
|
||||
lintPlaceholders(b.content, brief.placeholders, b.blockId),
|
||||
);
|
||||
}
|
||||
|
||||
export function hasBlockingErrors(diagnostics: readonly Diagnostic[]): boolean {
|
||||
return diagnostics.some((d) => d.severity === 'error');
|
||||
}
|
||||
|
||||
/** Manual (non-auto-resolvable) placeholder keys still present, deduped. These are the
|
||||
`unresolved-at-send` warnings, surfaced as a completeness list. */
|
||||
export function unresolvedPlaceholders(brief: Brief): string[] {
|
||||
const auto = new Set(brief.placeholders.filter((p) => p.autoResolvable).map((p) => p.key));
|
||||
const used = allBlocks(brief).flatMap((b) => placeholderKeysIn(b.content));
|
||||
return [...new Set(used.filter((k) => !auto.has(k)))];
|
||||
}
|
||||
|
||||
/** A letter can be submitted only when every REQUIRED section has at least one block. */
|
||||
export function canSubmit(brief: Brief): boolean {
|
||||
return brief.sections.every((s) => !s.required || s.blocks.length > 0);
|
||||
}
|
||||
|
||||
/** The case this letter concerns — the zorgverlener + aanvraag the behandelaar is
|
||||
handling. Server-joined onto the brief view (brief/ stays a shared-only leaf, so it
|
||||
can't read the registratie context directly). Header context only. */
|
||||
export interface CaseContext {
|
||||
readonly zorgverlenerNaam: string;
|
||||
readonly bigNummer: string;
|
||||
readonly beroep: string;
|
||||
readonly aanvraagReferentie: string;
|
||||
}
|
||||
|
||||
/** Server-computed decision flags for the acting principal + this brief's live
|
||||
status (PRD-0002 phase P1) — rendered as-is, never recomputed here. */
|
||||
export interface BriefDecisions {
|
||||
readonly canEdit: boolean;
|
||||
readonly canApprove: boolean;
|
||||
readonly canReject: boolean;
|
||||
readonly canSend: boolean;
|
||||
/** Field-level PII (PRD-0002 §5c): may the acting principal unmask the case
|
||||
BIG-nummer, which the server ships masked? Status-independent. */
|
||||
readonly canRevealBigNummer: boolean;
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { OrgTemplate, OrgTemplateAdminView } from './org-template';
|
||||
import { OrgTemplateState, reduce } from './org-template.machine';
|
||||
import { DocumentCategory } from '@shared/upload/upload.machine';
|
||||
|
||||
const template: OrgTemplate = {
|
||||
subOrgId: 'cibg-registers',
|
||||
orgName: 'CIBG',
|
||||
returnAddress: 'Postbus 1\n2500 AA Den Haag',
|
||||
footerContact: 'info@cibg.nl',
|
||||
footerLegal: 'CIBG is onderdeel van VWS',
|
||||
signatureName: 'A. de Vries',
|
||||
signatureRole: 'Hoofd Registratie',
|
||||
signatureClosing: 'Met vriendelijke groet,',
|
||||
margins: { topMm: 25, rightMm: 20, bottomMm: 25, leftMm: 20 },
|
||||
version: 3,
|
||||
};
|
||||
|
||||
const view = (over: Partial<OrgTemplateAdminView> = {}): OrgTemplateAdminView => ({
|
||||
draft: template,
|
||||
publishedVersion: 3,
|
||||
history: [],
|
||||
unsentBriefs: 2,
|
||||
...over,
|
||||
});
|
||||
|
||||
const loaded = (): OrgTemplateState =>
|
||||
reduce({ tag: 'loading' }, { tag: 'DraftLoaded', view: view() });
|
||||
|
||||
const logoCategory: DocumentCategory = {
|
||||
categoryId: 'org-logo',
|
||||
label: 'Logo',
|
||||
description: '',
|
||||
required: false,
|
||||
acceptedTypes: ['image/png'],
|
||||
maxSizeMb: 2,
|
||||
multiple: false,
|
||||
allowPostDelivery: false,
|
||||
};
|
||||
|
||||
describe('org-template.machine', () => {
|
||||
it('DraftLoaded moves to loaded with the draft, clean', () => {
|
||||
const s = loaded();
|
||||
expect(s.tag).toBe('loaded');
|
||||
if (s.tag !== 'loaded') return;
|
||||
expect(s.draft.orgName).toBe('CIBG');
|
||||
expect(s.subOrgId).toBe('cibg-registers');
|
||||
expect(s.unsentBriefs).toBe(2);
|
||||
expect(s.dirty).toBe(false);
|
||||
});
|
||||
|
||||
it('LoadFailed carries the reason', () => {
|
||||
const s = reduce({ tag: 'loading' }, { tag: 'LoadFailed', reason: 'boom' });
|
||||
expect(s).toEqual({ tag: 'failed', reason: 'boom' });
|
||||
});
|
||||
|
||||
it('FieldEdited edits the draft and marks dirty', () => {
|
||||
const s = reduce(loaded(), { tag: 'FieldEdited', field: 'orgName', value: 'CIBG Nieuw' });
|
||||
expect(s.tag === 'loaded' && s.draft.orgName).toBe('CIBG Nieuw');
|
||||
expect(s.tag === 'loaded' && s.dirty).toBe(true);
|
||||
});
|
||||
|
||||
it('MarginEdited edits one edge and marks dirty', () => {
|
||||
const s = reduce(loaded(), { tag: 'MarginEdited', edge: 'topMm', value: 40 });
|
||||
expect(s.tag === 'loaded' && s.draft.margins.topMm).toBe(40);
|
||||
expect(s.tag === 'loaded' && s.draft.margins.leftMm).toBe(20);
|
||||
expect(s.tag === 'loaded' && s.dirty).toBe(true);
|
||||
});
|
||||
|
||||
it('DraftSaved clears dirty when the saved draft is the current one', () => {
|
||||
const edited = reduce(loaded(), { tag: 'FieldEdited', field: 'orgName', value: 'X' });
|
||||
const savedDraft = edited.tag === 'loaded' ? edited.draft : template;
|
||||
const s = reduce(edited, { tag: 'DraftSaved', savedDraft });
|
||||
expect(s.tag === 'loaded' && s.dirty).toBe(false);
|
||||
expect(s.tag === 'loaded' && s.draft.orgName).toBe('X');
|
||||
});
|
||||
|
||||
it('DraftSaved keeps dirty when an edit landed during the save round-trip', () => {
|
||||
const editing = reduce(loaded(), { tag: 'FieldEdited', field: 'orgName', value: 'X' });
|
||||
const savedDraft = editing.tag === 'loaded' ? editing.draft : template;
|
||||
// a further edit changes the draft reference before the save resolves
|
||||
const raced = reduce(editing, { tag: 'FieldEdited', field: 'orgName', value: 'Y' });
|
||||
const s = reduce(raced, { tag: 'DraftSaved', savedDraft });
|
||||
expect(s.tag === 'loaded' && s.dirty).toBe(true);
|
||||
});
|
||||
|
||||
it('edits are no-ops in non-loaded states', () => {
|
||||
expect(
|
||||
reduce({ tag: 'loading' }, { tag: 'FieldEdited', field: 'orgName', value: 'x' }),
|
||||
).toEqual({
|
||||
tag: 'loading',
|
||||
});
|
||||
});
|
||||
|
||||
it('a completed logo upload sets logoDocumentId + dirty', () => {
|
||||
const withCat = reduce(loaded(), {
|
||||
tag: 'Upload',
|
||||
msg: { type: 'CategoriesLoaded', categories: [logoCategory] },
|
||||
});
|
||||
const selected = reduce(withCat, {
|
||||
tag: 'Upload',
|
||||
msg: {
|
||||
type: 'FileSelected',
|
||||
categoryId: 'org-logo',
|
||||
localId: 'a',
|
||||
fileName: 'l.png',
|
||||
fileSizeMb: 0.1,
|
||||
},
|
||||
});
|
||||
const done = reduce(selected, {
|
||||
tag: 'Upload',
|
||||
msg: { type: 'UploadComplete', localId: 'a', documentId: 'doc-1' },
|
||||
});
|
||||
expect(done.tag === 'loaded' && done.draft.logoDocumentId).toBe('doc-1');
|
||||
expect(done.tag === 'loaded' && done.dirty).toBe(true);
|
||||
});
|
||||
|
||||
it('removing the logo clears logoDocumentId + dirty', () => {
|
||||
const withLogo = reduce(loaded(), {
|
||||
tag: 'Upload',
|
||||
msg: { type: 'UploadComplete', localId: 'a', documentId: 'doc-1' },
|
||||
});
|
||||
const removed = reduce(withLogo, {
|
||||
tag: 'Upload',
|
||||
msg: { type: 'UploadRemoved', localId: 'a' },
|
||||
});
|
||||
expect(removed.tag === 'loaded' && removed.draft.logoDocumentId).toBeUndefined();
|
||||
expect(removed.tag === 'loaded' && removed.dirty).toBe(true);
|
||||
});
|
||||
|
||||
it('DraftLoaded (sub-org switch) keeps the loaded logo category, drops uploads', () => {
|
||||
const withCat = reduce(loaded(), {
|
||||
tag: 'Upload',
|
||||
msg: { type: 'CategoriesLoaded', categories: [logoCategory] },
|
||||
});
|
||||
const switched = reduce(withCat, {
|
||||
tag: 'DraftLoaded',
|
||||
view: view({ draft: { ...template, subOrgId: 'cibg-vakbekwaamheid' } }),
|
||||
});
|
||||
expect(switched.tag === 'loaded' && switched.upload.categories).toHaveLength(1);
|
||||
expect(switched.tag === 'loaded' && switched.upload.uploads).toHaveLength(0);
|
||||
expect(switched.tag === 'loaded' && switched.subOrgId).toBe('cibg-vakbekwaamheid');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,102 @@
|
||||
import { assertNever } from '@shared/kernel/fp';
|
||||
import { Margins, OrgTemplate, OrgTemplateAdminView, OrgTemplateVersion } from './org-template';
|
||||
import { UploadMsg, UploadState, initialUpload, reduceUpload } from '@shared/upload/upload.machine';
|
||||
|
||||
/**
|
||||
* The admin org-template editor as one Elm-style machine (WP-26, PRD Brief v2 §5) —
|
||||
* the same idiom as the wizards. The DRAFT org template is form state (edited in
|
||||
* place on the canvas); publish/rollback are effects that come back as `DraftLoaded`.
|
||||
* `dirty` tracks unsaved edits (the store debounce-saves them). The logo upload is
|
||||
* the composable upload sub-machine folded in, exactly like the wizards fold
|
||||
* `reduceUpload` — its `UploadComplete`/`UploadRemoved` also mutate `draft.logoDocumentId`.
|
||||
*/
|
||||
|
||||
/** The org-identity text fields editable directly on the letter canvas. */
|
||||
export type OrgTemplateTextField =
|
||||
| 'orgName'
|
||||
| 'returnAddress'
|
||||
| 'footerContact'
|
||||
| 'footerLegal'
|
||||
| 'signatureName'
|
||||
| 'signatureRole'
|
||||
| 'signatureClosing';
|
||||
|
||||
export type OrgTemplateState =
|
||||
| { tag: 'loading' }
|
||||
| { tag: 'failed'; reason: string }
|
||||
| {
|
||||
tag: 'loaded';
|
||||
subOrgId: string;
|
||||
draft: OrgTemplate;
|
||||
publishedVersion: number;
|
||||
history: readonly OrgTemplateVersion[];
|
||||
unsentBriefs: number;
|
||||
dirty: boolean;
|
||||
/** Logo upload sub-state (single file, `org-logo` category). */
|
||||
upload: UploadState;
|
||||
};
|
||||
|
||||
export const initial: OrgTemplateState = { tag: 'loading' };
|
||||
|
||||
export type OrgTemplateMsg =
|
||||
| { tag: 'Loading' }
|
||||
| { tag: 'DraftLoaded'; view: OrgTemplateAdminView }
|
||||
| { tag: 'LoadFailed'; reason: string }
|
||||
| { tag: 'FieldEdited'; field: OrgTemplateTextField; value: string }
|
||||
| { tag: 'MarginEdited'; edge: keyof Margins; value: number }
|
||||
/** Carries the draft that was saved: clears `dirty` only if no edit landed during
|
||||
the round-trip (reference-equal), so a concurrent edit keeps its pending save. */
|
||||
| { tag: 'DraftSaved'; savedDraft: OrgTemplate }
|
||||
| { tag: 'Upload'; msg: UploadMsg };
|
||||
|
||||
/** Edit the loaded draft; a no-op in any non-loaded state (illegal by construction). */
|
||||
function editDraft(s: OrgTemplateState, f: (draft: OrgTemplate) => OrgTemplate): OrgTemplateState {
|
||||
return s.tag === 'loaded' ? { ...s, draft: f(s.draft), dirty: true } : s;
|
||||
}
|
||||
|
||||
export function reduce(s: OrgTemplateState, m: OrgTemplateMsg): OrgTemplateState {
|
||||
switch (m.tag) {
|
||||
case 'Loading':
|
||||
return { tag: 'loading' };
|
||||
case 'LoadFailed':
|
||||
return { tag: 'failed', reason: m.reason };
|
||||
case 'DraftLoaded':
|
||||
return {
|
||||
tag: 'loaded',
|
||||
subOrgId: m.view.draft.subOrgId,
|
||||
draft: m.view.draft,
|
||||
publishedVersion: m.view.publishedVersion,
|
||||
history: m.view.history,
|
||||
unsentBriefs: m.view.unsentBriefs,
|
||||
dirty: false,
|
||||
// Keep the loaded logo category across sub-org switches (it's the same
|
||||
// `org-logo` category, loaded once); drop only any in-flight/finished uploads.
|
||||
upload: s.tag === 'loaded' ? { ...s.upload, uploads: [], rejections: {} } : initialUpload,
|
||||
};
|
||||
case 'FieldEdited':
|
||||
return editDraft(s, (d) => ({ ...d, [m.field]: m.value }));
|
||||
case 'MarginEdited':
|
||||
return editDraft(s, (d) => ({ ...d, margins: { ...d.margins, [m.edge]: m.value } }));
|
||||
case 'DraftSaved':
|
||||
return s.tag === 'loaded' && s.draft === m.savedDraft ? { ...s, dirty: false } : s;
|
||||
case 'Upload': {
|
||||
if (s.tag !== 'loaded') return s;
|
||||
const upload = reduceUpload(s.upload, m.msg);
|
||||
// A completed/removed logo upload also updates the draft's logoDocumentId.
|
||||
if (m.msg.type === 'UploadComplete')
|
||||
return {
|
||||
...s,
|
||||
upload,
|
||||
draft: { ...s.draft, logoDocumentId: m.msg.documentId },
|
||||
dirty: true,
|
||||
};
|
||||
if (m.msg.type === 'UploadRemoved') {
|
||||
const { logoDocumentId: _dropped, ...rest } = s.draft;
|
||||
return { ...s, upload, draft: rest, dirty: true };
|
||||
}
|
||||
return { ...s, upload };
|
||||
}
|
||||
default:
|
||||
return assertNever(m);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
/**
|
||||
* The organization template (Brief v2 PRD §3, WP-23/24): the SECOND template axis —
|
||||
* appearance/identity per sub-organization (letterhead, footer, signature, margins).
|
||||
* Orthogonal to the case-type template (sections + placeholders); the two only meet
|
||||
* at render time, on the letter canvas. Server-owned: the FE renders it verbatim,
|
||||
* never edits it here (the admin editor is WP-26).
|
||||
*/
|
||||
|
||||
export interface Margins {
|
||||
readonly topMm: number;
|
||||
readonly rightMm: number;
|
||||
readonly bottomMm: number;
|
||||
readonly leftMm: number;
|
||||
}
|
||||
|
||||
export interface OrgTemplate {
|
||||
readonly subOrgId: string;
|
||||
readonly orgName: string;
|
||||
/** Multiline; rendered above the envelope window. */
|
||||
readonly returnAddress: string;
|
||||
readonly logoDocumentId?: string;
|
||||
/** Multiline contact block in the footer. */
|
||||
readonly footerContact: string;
|
||||
readonly footerLegal: string;
|
||||
readonly signatureName: string;
|
||||
readonly signatureRole: string;
|
||||
readonly signatureClosing: string;
|
||||
readonly margins: Margins;
|
||||
/** 0 = draft; n>0 = the published snapshot this letter renders with. */
|
||||
readonly version: number;
|
||||
}
|
||||
|
||||
// --- admin editor (WP-26) ---
|
||||
|
||||
/** A published snapshot in the version history: who is faked, `publishedAt` is real. */
|
||||
export interface OrgTemplateVersion {
|
||||
readonly version: number;
|
||||
readonly publishedAt: string;
|
||||
readonly template: OrgTemplate;
|
||||
}
|
||||
|
||||
/** The admin editor's view of one sub-org: the editable draft plus publish metadata. */
|
||||
export interface OrgTemplateAdminView {
|
||||
readonly draft: OrgTemplate;
|
||||
readonly publishedVersion: number;
|
||||
readonly history: readonly OrgTemplateVersion[];
|
||||
/** How many not-yet-sent letters a publish would re-render (the impact count). */
|
||||
readonly unsentBriefs: number;
|
||||
}
|
||||
|
||||
/** One row in the sub-org switcher. */
|
||||
export interface SubOrgSummary {
|
||||
readonly subOrgId: string;
|
||||
readonly orgName: string;
|
||||
readonly publishedVersion: number;
|
||||
}
|
||||
|
||||
/** Publish outcome: the new version and how many unsent letters it touched. */
|
||||
export interface PublishResult {
|
||||
readonly version: number;
|
||||
readonly affectedUnsentBriefs: number;
|
||||
}
|
||||
|
||||
/** Margin bounds (server-owned, `OrgTemplateRules`): the FE mirrors them for instant
|
||||
feedback via `<input min max>`; the server re-validates and stays the authority. */
|
||||
export const MARGIN_MIN_MM = 10;
|
||||
export const MARGIN_MAX_MM = 50;
|
||||
@@ -0,0 +1,83 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { RichTextBlock } from '@shared/kernel/rich-text';
|
||||
import { PlaceholderDef, lintPlaceholders, severityOf } from './placeholders';
|
||||
|
||||
const valid: PlaceholderDef[] = [
|
||||
{ key: 'naam', label: 'Naam', autoResolvable: true }, // clean when used
|
||||
{ key: 'reden', label: 'Reden', autoResolvable: false }, // manual → unresolved-at-send
|
||||
{ key: 'oud_veld', label: 'Oud veld', autoResolvable: true, deprecated: true },
|
||||
{ key: 'niet_invulbaar', label: 'Niet invulbaar', autoResolvable: true, fillable: false },
|
||||
];
|
||||
|
||||
const withPlaceholder = (key: string): RichTextBlock => ({
|
||||
paragraphs: [{ nodes: [{ type: 'placeholder', key }] }],
|
||||
});
|
||||
const withText = (text: string): RichTextBlock => ({
|
||||
paragraphs: [{ nodes: [{ type: 'text', text }] }],
|
||||
});
|
||||
|
||||
describe('lintPlaceholders', () => {
|
||||
it('clean content (auto-resolvable, fillable, current key) yields no diagnostics', () => {
|
||||
expect(lintPlaceholders(withPlaceholder('naam'), valid, 'b1')).toEqual([]);
|
||||
expect(lintPlaceholders(withText('gewone tekst'), valid, 'b1')).toEqual([]);
|
||||
});
|
||||
|
||||
it('flags an unknown key as an error', () => {
|
||||
const [d] = lintPlaceholders(withPlaceholder('onbekend'), valid, 'b1');
|
||||
expect(d.code).toBe('unknown-placeholder');
|
||||
expect(d.severity).toBe('error');
|
||||
expect(d.placeholderKey).toBe('onbekend');
|
||||
expect(d.location).toEqual({ blockId: 'b1', paragraphIndex: 0, nodeIndex: 0 });
|
||||
});
|
||||
|
||||
it('flags a not-fillable key as an error', () => {
|
||||
const [d] = lintPlaceholders(withPlaceholder('niet_invulbaar'), valid, 'b1');
|
||||
expect(d.code).toBe('not-fillable');
|
||||
expect(d.severity).toBe('error');
|
||||
});
|
||||
|
||||
it('flags a deprecated key as a warning', () => {
|
||||
const [d] = lintPlaceholders(withPlaceholder('oud_veld'), valid, 'b1');
|
||||
expect(d.code).toBe('deprecated');
|
||||
expect(d.severity).toBe('warning');
|
||||
});
|
||||
|
||||
it('flags a manual placeholder as unresolved-at-send (warning)', () => {
|
||||
const [d] = lintPlaceholders(withPlaceholder('reden'), valid, 'b1');
|
||||
expect(d.code).toBe('unresolved-at-send');
|
||||
expect(d.severity).toBe('warning');
|
||||
});
|
||||
|
||||
it('flags raw braces in text as malformed (paste safety net)', () => {
|
||||
const [d] = lintPlaceholders(withText('Beste {{naam'), valid, 'b1');
|
||||
expect(d.code).toBe('malformed');
|
||||
expect(d.severity).toBe('error');
|
||||
expect(d.placeholderKey).toBeUndefined();
|
||||
});
|
||||
|
||||
it('returns diagnostics in document order across paragraphs/nodes', () => {
|
||||
const content: RichTextBlock = {
|
||||
paragraphs: [
|
||||
{ nodes: [{ type: 'placeholder', key: 'onbekend' }] },
|
||||
{
|
||||
nodes: [
|
||||
{ type: 'text', text: 'ok' },
|
||||
{ type: 'placeholder', key: 'reden' },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
const codes = lintPlaceholders(content, valid, 'b1').map(
|
||||
(d) => `${d.code}@${d.location.paragraphIndex}.${d.location.nodeIndex}`,
|
||||
);
|
||||
expect(codes).toEqual(['unknown-placeholder@0.0', 'unresolved-at-send@1.1']);
|
||||
});
|
||||
|
||||
it('severityOf maps each code to its policy', () => {
|
||||
expect(severityOf('malformed')).toBe('error');
|
||||
expect(severityOf('unknown-placeholder')).toBe('error');
|
||||
expect(severityOf('not-fillable')).toBe('error');
|
||||
expect(severityOf('deprecated')).toBe('warning');
|
||||
expect(severityOf('unresolved-at-send')).toBe('warning');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,121 @@
|
||||
import { RichTextBlock } from '@shared/kernel/rich-text';
|
||||
|
||||
/**
|
||||
* Placeholder fields and the PURE linter over them.
|
||||
*
|
||||
* `lintPlaceholders` is a total, effect-free function of (content, valid set). It
|
||||
* runs identically on the client (for live UX) and could run on the server (for
|
||||
* authority) — same rules, same config, so the two agree by construction. The FE
|
||||
* never STORES its output: diagnostics are a `computed()` over content (see
|
||||
* `brief.ts` selectors), the same "derive, don't store" discipline as wizard step
|
||||
* validity.
|
||||
*/
|
||||
|
||||
/** A placeholder field the template knows about. `fillable`/`deprecated` default to
|
||||
the healthy case; the seed flips them to exercise the not-fillable/deprecated rules. */
|
||||
export interface PlaceholderDef {
|
||||
readonly key: string; // e.g. 'naam_zorgverlener'
|
||||
readonly label: string; // human label for the insert menu, e.g. 'Naam zorgverlener'
|
||||
readonly autoResolvable: boolean; // server can fill from case data (name, date, …)
|
||||
readonly fillable?: boolean; // default true; false → not resolvable for this beroep/case type
|
||||
readonly deprecated?: boolean; // default false; true → retired but still referenceable in old snapshots
|
||||
}
|
||||
|
||||
export type DiagnosticSeverity = 'error' | 'warning';
|
||||
|
||||
export type DiagnosticCode =
|
||||
| 'malformed' // raw braces in a text node (a paste that should have been a chip)
|
||||
| 'unknown-placeholder' // well-formed key not in the valid set
|
||||
| 'not-fillable' // key exists but isn't resolvable for this case type / beroep
|
||||
| 'deprecated' // key was valid once but the template no longer offers it
|
||||
| 'unresolved-at-send'; // manual (non-auto-resolvable) placeholder still to be filled
|
||||
|
||||
export interface DiagnosticLocation {
|
||||
readonly blockId: string;
|
||||
readonly paragraphIndex: number;
|
||||
readonly nodeIndex: number;
|
||||
}
|
||||
|
||||
export interface Diagnostic {
|
||||
readonly severity: DiagnosticSeverity;
|
||||
readonly code: DiagnosticCode;
|
||||
readonly placeholderKey?: string;
|
||||
readonly location: DiagnosticLocation;
|
||||
readonly message: string; // human-readable, Dutch
|
||||
}
|
||||
|
||||
/** `error` blocks save (author time) and send (send time); `warning` is surfaced but allowed. */
|
||||
export function severityOf(code: DiagnosticCode): DiagnosticSeverity {
|
||||
switch (code) {
|
||||
case 'malformed':
|
||||
case 'unknown-placeholder':
|
||||
case 'not-fillable':
|
||||
return 'error';
|
||||
case 'deprecated':
|
||||
case 'unresolved-at-send':
|
||||
return 'warning';
|
||||
}
|
||||
}
|
||||
|
||||
// Raw `{{` or `}}` in text — the only way a malformed placeholder can exist, since
|
||||
// menu insertion always produces a proper placeholder NODE. Paste safety net.
|
||||
const RAW_BRACES = /\{\{|\}\}/;
|
||||
|
||||
function messageFor(code: DiagnosticCode, key?: string): string {
|
||||
switch (code) {
|
||||
case 'malformed':
|
||||
return $localize`:@@brief.lint.malformed:Deze tekst bevat losse accolades ({{ of }}). Voeg een veld toe via het menu in plaats van het te typen.`;
|
||||
case 'unknown-placeholder':
|
||||
return $localize`:@@brief.lint.unknown:Onbekend veld “${key}:key:”. Dit veld hoort niet bij dit sjabloon.`;
|
||||
case 'not-fillable':
|
||||
return $localize`:@@brief.lint.notFillable:Veld “${key}:key:” kan niet worden ingevuld voor dit beroep.`;
|
||||
case 'deprecated':
|
||||
return $localize`:@@brief.lint.deprecated:Veld “${key}:key:” is verouderd en wordt niet meer aangeboden.`;
|
||||
case 'unresolved-at-send':
|
||||
return $localize`:@@brief.lint.unresolved:Veld “${key}:key:” wordt handmatig ingevuld en is nog leeg.`;
|
||||
}
|
||||
}
|
||||
|
||||
function diag(code: DiagnosticCode, location: DiagnosticLocation, key?: string): Diagnostic {
|
||||
return {
|
||||
severity: severityOf(code),
|
||||
code,
|
||||
placeholderKey: key,
|
||||
location,
|
||||
message: messageFor(code, key),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Lint one block against the template's placeholder set. Pure: given the same
|
||||
* content + valid set + blockId it always returns the same diagnostics, in
|
||||
* document order. One diagnostic per node at most (most-severe wins).
|
||||
*/
|
||||
export function lintPlaceholders(
|
||||
content: RichTextBlock,
|
||||
valid: readonly PlaceholderDef[],
|
||||
blockId: string,
|
||||
): Diagnostic[] {
|
||||
const byKey = new Map(valid.map((p) => [p.key, p]));
|
||||
const out: Diagnostic[] = [];
|
||||
|
||||
content.paragraphs.forEach((p, paragraphIndex) => {
|
||||
p.nodes.forEach((n, nodeIndex) => {
|
||||
const location: DiagnosticLocation = { blockId, paragraphIndex, nodeIndex };
|
||||
if (n.type === 'text') {
|
||||
if (RAW_BRACES.test(n.text)) out.push(diag('malformed', location));
|
||||
return;
|
||||
}
|
||||
if (n.type !== 'placeholder') return; // lineBreak — nothing to check
|
||||
|
||||
const def = byKey.get(n.key);
|
||||
if (!def) out.push(diag('unknown-placeholder', location, n.key));
|
||||
else if (def.fillable === false) out.push(diag('not-fillable', location, n.key));
|
||||
else if (def.deprecated) out.push(diag('deprecated', location, n.key));
|
||||
else if (!def.autoResolvable) out.push(diag('unresolved-at-send', location, n.key));
|
||||
// auto-resolvable & fillable & not deprecated → clean (filled by the server at send)
|
||||
});
|
||||
});
|
||||
|
||||
return out;
|
||||
}
|
||||
@@ -0,0 +1,256 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { BriefViewDto } from '@shared/infrastructure/api-client';
|
||||
import {
|
||||
parseBrief,
|
||||
parseBriefView,
|
||||
parseNode,
|
||||
parseOrgTemplate,
|
||||
parseStatus,
|
||||
} from './brief.adapter';
|
||||
|
||||
const view: BriefViewDto = {
|
||||
brief: {
|
||||
briefId: 'b1',
|
||||
beroep: 'arts',
|
||||
templateId: 't1',
|
||||
drafterId: 'demo-drafter',
|
||||
status: { tag: 'submitted', submittedBy: 'demo-drafter', submittedAt: '2026-07-01' },
|
||||
placeholders: [
|
||||
{ key: 'naam', label: 'Naam', autoResolvable: true },
|
||||
{ key: 'code', label: 'Code', autoResolvable: true, fillable: false },
|
||||
],
|
||||
sections: [
|
||||
{
|
||||
sectionKey: 'aanhef',
|
||||
title: 'Aanhef',
|
||||
required: true,
|
||||
blocks: [
|
||||
{
|
||||
type: 'passage',
|
||||
blockId: 'local-1',
|
||||
content: { paragraphs: [{ nodes: [{ type: 'placeholder', key: 'naam' }] }] },
|
||||
sourcePassageId: 'p1',
|
||||
sourceVersion: 2,
|
||||
edited: true,
|
||||
},
|
||||
{
|
||||
type: 'freeText',
|
||||
blockId: 'local-2',
|
||||
content: { paragraphs: [{ nodes: [{ type: 'text', text: 'hoi', marks: ['bold'] }] }] },
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
availablePassages: [
|
||||
{
|
||||
passageId: 'p1',
|
||||
scope: 'global',
|
||||
sectionKey: 'aanhef',
|
||||
label: 'Aanhef',
|
||||
content: { paragraphs: [{ nodes: [] }] },
|
||||
version: 1,
|
||||
},
|
||||
{
|
||||
passageId: 'p-neg-scholing',
|
||||
scope: 'global',
|
||||
sectionKey: 'kern',
|
||||
label: 'Onvoldoende scholing',
|
||||
content: { paragraphs: [{ nodes: [{ type: 'text', text: 'x' }] }] },
|
||||
version: 1,
|
||||
besluit: 'negatief',
|
||||
reason: 'onvoldoende_scholing',
|
||||
},
|
||||
],
|
||||
decisions: {
|
||||
canEdit: false,
|
||||
canApprove: true,
|
||||
canReject: true,
|
||||
canSend: false,
|
||||
canRevealBigNummer: false,
|
||||
},
|
||||
orgTemplate: {
|
||||
subOrgId: 'cibg-registers',
|
||||
orgName: 'CIBG — Registers',
|
||||
returnAddress: 'BIG-register\nPostbus 00000\n2500 AA Den Haag',
|
||||
footerContact: 'www.bigregister.nl\ninfo@voorbeeld.example',
|
||||
footerLegal: 'KvK 00000000',
|
||||
signatureName: 'A. de Vries',
|
||||
signatureRole: 'Hoofd Registratie',
|
||||
signatureClosing: 'Met vriendelijke groet,',
|
||||
margins: { topMm: 25, rightMm: 25, bottomMm: 25, leftMm: 25 },
|
||||
version: 1,
|
||||
},
|
||||
caseContext: {
|
||||
zorgverlenerNaam: 'Dr. A. (Anna) de Vries',
|
||||
bigNummer: '19012345601',
|
||||
beroep: 'arts',
|
||||
aanvraagReferentie: 'HER-2026-000842',
|
||||
},
|
||||
};
|
||||
|
||||
describe('brief.adapter parse boundary', () => {
|
||||
it('parses a well-formed view into the domain unions', () => {
|
||||
const r = parseBriefView(view);
|
||||
expect(r.ok).toBe(true);
|
||||
if (!r.ok) return;
|
||||
expect(r.value.brief.status).toEqual({
|
||||
tag: 'submitted',
|
||||
submittedBy: 'demo-drafter',
|
||||
submittedAt: '2026-07-01',
|
||||
});
|
||||
const [passage, free] = r.value.brief.sections[0].blocks;
|
||||
expect(passage.type === 'passage' && passage.edited).toBe(true);
|
||||
expect(free.type).toBe('freeText');
|
||||
expect(r.value.brief.placeholders[1]).toEqual({
|
||||
key: 'code',
|
||||
label: 'Code',
|
||||
autoResolvable: true,
|
||||
fillable: false,
|
||||
});
|
||||
expect(r.value.decisions).toEqual({
|
||||
canEdit: false,
|
||||
canApprove: true,
|
||||
canReject: true,
|
||||
canSend: false,
|
||||
canRevealBigNummer: false,
|
||||
});
|
||||
// Guided-drafting tags survive the boundary; the untagged passage has neither.
|
||||
expect(r.value.availablePassages[0].besluit).toBeUndefined();
|
||||
expect(r.value.availablePassages[1]).toMatchObject({
|
||||
besluit: 'negatief',
|
||||
reason: 'onvoldoende_scholing',
|
||||
});
|
||||
expect(r.value.caseContext).toEqual({
|
||||
zorgverlenerNaam: 'Dr. A. (Anna) de Vries',
|
||||
bigNummer: '19012345601',
|
||||
beroep: 'arts',
|
||||
aanvraagReferentie: 'HER-2026-000842',
|
||||
});
|
||||
});
|
||||
|
||||
it('rejects a view whose case context is missing or malformed', () => {
|
||||
expect(parseBriefView({ ...view, caseContext: undefined }).ok).toBe(false);
|
||||
expect(
|
||||
parseBriefView({
|
||||
...view,
|
||||
caseContext: { ...view.caseContext!, bigNummer: undefined as never },
|
||||
}).ok,
|
||||
).toBe(false);
|
||||
});
|
||||
|
||||
it('parses the org template and drops a null logoDocumentId', () => {
|
||||
const r = parseOrgTemplate(view.orgTemplate);
|
||||
expect(r.ok).toBe(true);
|
||||
if (!r.ok) return;
|
||||
expect(r.value.orgName).toBe('CIBG — Registers');
|
||||
expect(r.value.margins).toEqual({ topMm: 25, rightMm: 25, bottomMm: 25, leftMm: 25 });
|
||||
expect('logoDocumentId' in r.value).toBe(false);
|
||||
});
|
||||
|
||||
it('rejects a view whose org template is missing or malformed', () => {
|
||||
expect(parseBriefView({ ...view, orgTemplate: undefined }).ok).toBe(false);
|
||||
expect(parseOrgTemplate({ ...view.orgTemplate, signatureName: undefined }).ok).toBe(false);
|
||||
expect(
|
||||
parseOrgTemplate({
|
||||
...view.orgTemplate,
|
||||
margins: { topMm: 25, rightMm: 25, bottomMm: 25 },
|
||||
}).ok,
|
||||
).toBe(false);
|
||||
});
|
||||
|
||||
it('rejects a view whose decisions are missing or malformed', () => {
|
||||
expect(parseBriefView({ ...view, decisions: undefined as never }).ok).toBe(false);
|
||||
expect(
|
||||
parseBriefView({ ...view, decisions: { ...view.decisions, canSend: 'yes' as never } }).ok,
|
||||
).toBe(false);
|
||||
// The PII-reveal flag (PRD-0002 §5c) is required at the boundary too.
|
||||
expect(
|
||||
parseBriefView({
|
||||
...view,
|
||||
decisions: { ...view.decisions, canRevealBigNummer: undefined as never },
|
||||
}).ok,
|
||||
).toBe(false);
|
||||
});
|
||||
|
||||
it('narrows node variants and rejects unknown ones', () => {
|
||||
expect(parseNode({ type: 'text', text: 'x' })).toEqual({
|
||||
ok: true,
|
||||
value: { type: 'text', text: 'x' },
|
||||
});
|
||||
expect(parseNode({ type: 'placeholder', key: 'k' })).toEqual({
|
||||
ok: true,
|
||||
value: { type: 'placeholder', key: 'k' },
|
||||
});
|
||||
expect(parseNode({ type: 'lineBreak' })).toEqual({ ok: true, value: { type: 'lineBreak' } });
|
||||
expect(parseNode({ type: 'text' }).ok).toBe(false); // missing text
|
||||
expect(parseNode({ type: 'bogus' } as never).ok).toBe(false);
|
||||
});
|
||||
|
||||
it('rejects a status DTO missing its required fields', () => {
|
||||
expect(parseStatus({ tag: 'submitted' }).ok).toBe(false); // no submittedBy/At
|
||||
expect(parseStatus({ tag: 'rejected', rejectedBy: 'x', rejectedAt: 't' }).ok).toBe(false); // no comments
|
||||
expect(parseStatus({ tag: 'draft' }).ok).toBe(true);
|
||||
});
|
||||
|
||||
it('reads section.locked (default false) and paragraph.list', () => {
|
||||
const r = parseBrief({
|
||||
...view.brief,
|
||||
sections: [
|
||||
{
|
||||
sectionKey: 'aanhef',
|
||||
title: 'Aanhef',
|
||||
required: true,
|
||||
locked: true,
|
||||
blocks: [
|
||||
{
|
||||
type: 'freeText',
|
||||
blockId: 'b1',
|
||||
content: {
|
||||
paragraphs: [
|
||||
{ nodes: [{ type: 'text', text: 'een' }], list: 'bullet' },
|
||||
{ nodes: [{ type: 'text', text: 'twee' }], list: 'number' },
|
||||
{ nodes: [{ type: 'text', text: 'plat' }] },
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{ sectionKey: 'kern', title: 'Kern', required: true, blocks: [] }, // no `locked` → false
|
||||
],
|
||||
});
|
||||
expect(r.ok).toBe(true);
|
||||
if (!r.ok) return;
|
||||
const [aanhef, kern] = r.value.sections;
|
||||
expect(aanhef.locked).toBe(true);
|
||||
expect(kern.locked).toBe(false);
|
||||
expect(aanhef.blocks[0].content.paragraphs.map((p) => p.list)).toEqual([
|
||||
'bullet',
|
||||
'number',
|
||||
undefined,
|
||||
]);
|
||||
});
|
||||
|
||||
it('rejects a library passage with an unknown scope', () => {
|
||||
const r = parseBriefView({
|
||||
...view,
|
||||
availablePassages: [{ ...view.availablePassages![0], scope: 'bogus' as never }],
|
||||
});
|
||||
expect(r.ok).toBe(false);
|
||||
});
|
||||
|
||||
it('rejects a passage block missing provenance', () => {
|
||||
const r = parseBrief({
|
||||
...view.brief,
|
||||
sections: [
|
||||
{
|
||||
sectionKey: 's',
|
||||
title: 'S',
|
||||
required: false,
|
||||
blocks: [{ type: 'passage', blockId: 'b', content: { paragraphs: [] } }],
|
||||
},
|
||||
],
|
||||
});
|
||||
expect(r.ok).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,437 @@
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { Result, ok, err } from '@shared/kernel/fp';
|
||||
import { runSubmit } from '@shared/application/submit';
|
||||
import {
|
||||
ApiClient,
|
||||
BriefDecisionsDto,
|
||||
BriefDto,
|
||||
BriefStatusDto,
|
||||
BriefViewDto,
|
||||
CaseContextDto,
|
||||
LetterBlockDto,
|
||||
LetterSectionDto,
|
||||
LibraryPassageDto,
|
||||
OrgTemplateDto,
|
||||
PlaceholderDefDto,
|
||||
RichTextBlockDto,
|
||||
RichTextNodeDto,
|
||||
} from '@shared/infrastructure/api-client';
|
||||
import {
|
||||
Brief,
|
||||
BriefDecisions,
|
||||
BriefStatus,
|
||||
CaseContext,
|
||||
LetterBlock,
|
||||
LetterSection,
|
||||
LibraryPassage,
|
||||
} from '@brief/domain/brief';
|
||||
import { OrgTemplate } from '@brief/domain/org-template';
|
||||
import { PlaceholderDef } from '@brief/domain/placeholders';
|
||||
import { Mark, Paragraph, RichTextBlock, RichTextNode } from '@shared/kernel/rich-text';
|
||||
|
||||
/**
|
||||
* The only place brief HTTP lives (ADR-0001 anti-corruption boundary). The wire
|
||||
* uses FLAT unions (a `type`/`tag` string + nullable fields, the repo convention);
|
||||
* the `parse*` boundary narrows them into the domain's proper discriminated unions
|
||||
* and rejects malformed shapes. Mutations go through `runSubmit` (ProblemDetails →
|
||||
* error string), then parse the returned brief.
|
||||
*/
|
||||
|
||||
export interface BriefView {
|
||||
readonly brief: Brief;
|
||||
readonly availablePassages: LibraryPassage[];
|
||||
readonly decisions: BriefDecisions;
|
||||
readonly orgTemplate: OrgTemplate;
|
||||
readonly caseContext: CaseContext;
|
||||
}
|
||||
|
||||
export const BRIEF_LOAD_FAILED = $localize`:@@brief.load.failed:De brief kon niet worden geladen.`;
|
||||
export const BRIEF_ACTION_FAILED = $localize`:@@brief.action.failed:De actie is niet gelukt. Probeer het later opnieuw.`;
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class BriefAdapter {
|
||||
private client = inject(ApiClient);
|
||||
|
||||
async load(): Promise<Result<string, BriefView>> {
|
||||
const r = await runSubmit(() => this.client.briefGET(), BRIEF_LOAD_FAILED);
|
||||
return r.ok ? parseBriefView(r.value) : r;
|
||||
}
|
||||
|
||||
async save(sections: readonly LetterSection[]): Promise<Result<string, BriefView>> {
|
||||
const r = await runSubmit(
|
||||
() => this.client.briefPUT({ sections: sections.map(sectionToDto) }),
|
||||
BRIEF_ACTION_FAILED,
|
||||
);
|
||||
return r.ok ? parseBriefView(r.value) : r;
|
||||
}
|
||||
|
||||
async submit(): Promise<Result<string, BriefView>> {
|
||||
const r = await runSubmit(() => this.client.briefSubmit(), BRIEF_ACTION_FAILED);
|
||||
return r.ok ? parseBriefView(r.value) : r;
|
||||
}
|
||||
|
||||
async approve(): Promise<Result<string, BriefView>> {
|
||||
const r = await runSubmit(() => this.client.approve(), BRIEF_ACTION_FAILED);
|
||||
return r.ok ? parseBriefView(r.value) : r;
|
||||
}
|
||||
|
||||
async reject(comments: string): Promise<Result<string, BriefView>> {
|
||||
const r = await runSubmit(() => this.client.reject({ comments }), BRIEF_ACTION_FAILED);
|
||||
return r.ok ? parseBriefView(r.value) : r;
|
||||
}
|
||||
|
||||
async send(): Promise<Result<string, BriefView>> {
|
||||
const r = await runSubmit(() => this.client.send(), BRIEF_ACTION_FAILED);
|
||||
return r.ok ? parseBriefView(r.value) : r;
|
||||
}
|
||||
|
||||
/** Demo "start over" — recreate a fresh brief server-side and return the new view. */
|
||||
async reset(): Promise<Result<string, BriefView>> {
|
||||
const r = await runSubmit(() => this.client.briefReset(), BRIEF_ACTION_FAILED);
|
||||
return r.ok ? parseBriefView(r.value) : r;
|
||||
}
|
||||
}
|
||||
|
||||
// --- parse: wire (flat) → domain (discriminated unions), validating at the boundary ---
|
||||
|
||||
const MARKS: readonly string[] = ['bold', 'italic', 'underline'];
|
||||
|
||||
export function parseNode(dto: RichTextNodeDto): Result<string, RichTextNode> {
|
||||
switch (dto.type) {
|
||||
case 'text': {
|
||||
if (typeof dto.text !== 'string') return err('node: text missing text');
|
||||
const marks = dto.marks?.filter((m): m is Mark => MARKS.includes(m));
|
||||
return ok(
|
||||
marks && marks.length
|
||||
? { type: 'text', text: dto.text, marks }
|
||||
: { type: 'text', text: dto.text },
|
||||
);
|
||||
}
|
||||
case 'placeholder':
|
||||
return typeof dto.key === 'string'
|
||||
? ok({ type: 'placeholder', key: dto.key })
|
||||
: err('node: placeholder missing key');
|
||||
case 'lineBreak':
|
||||
return ok({ type: 'lineBreak' });
|
||||
default:
|
||||
return err(`node: unknown type ${dto.type}`);
|
||||
}
|
||||
}
|
||||
|
||||
export function parseBlockContent(
|
||||
dto: RichTextBlockDto | undefined,
|
||||
): Result<string, RichTextBlock> {
|
||||
if (!dto || !Array.isArray(dto.paragraphs)) return err('content: paragraphs not an array');
|
||||
const paragraphs: Paragraph[] = [];
|
||||
for (const p of dto.paragraphs) {
|
||||
const nodes: RichTextNode[] = [];
|
||||
for (const n of p.nodes ?? []) {
|
||||
const parsed = parseNode(n);
|
||||
if (!parsed.ok) return parsed;
|
||||
nodes.push(parsed.value);
|
||||
}
|
||||
const list = p.list === 'bullet' || p.list === 'number' ? p.list : undefined;
|
||||
paragraphs.push(list ? { nodes, list } : { nodes });
|
||||
}
|
||||
return ok({ paragraphs });
|
||||
}
|
||||
|
||||
function parseBlock(dto: LetterBlockDto): Result<string, LetterBlock> {
|
||||
if (typeof dto.blockId !== 'string') return err('block: missing blockId');
|
||||
const content = parseBlockContent(dto.content);
|
||||
if (!content.ok) return content;
|
||||
switch (dto.type) {
|
||||
case 'passage':
|
||||
if (typeof dto.sourcePassageId !== 'string' || typeof dto.sourceVersion !== 'number')
|
||||
return err('block: bad passage provenance');
|
||||
return ok({
|
||||
type: 'passage',
|
||||
blockId: dto.blockId,
|
||||
sourcePassageId: dto.sourcePassageId,
|
||||
sourceVersion: dto.sourceVersion,
|
||||
content: content.value,
|
||||
edited: dto.edited ?? false,
|
||||
});
|
||||
case 'freeText':
|
||||
return ok({ type: 'freeText', blockId: dto.blockId, content: content.value });
|
||||
default:
|
||||
return err(`block: unknown type ${dto.type}`);
|
||||
}
|
||||
}
|
||||
|
||||
function parseSection(dto: LetterSectionDto): Result<string, LetterSection> {
|
||||
if (
|
||||
typeof dto.sectionKey !== 'string' ||
|
||||
typeof dto.title !== 'string' ||
|
||||
typeof dto.required !== 'boolean'
|
||||
) {
|
||||
return err('section: bad shape');
|
||||
}
|
||||
const blocks: LetterBlock[] = [];
|
||||
for (const b of dto.blocks ?? []) {
|
||||
const parsed = parseBlock(b);
|
||||
if (!parsed.ok) return parsed;
|
||||
blocks.push(parsed.value);
|
||||
}
|
||||
return ok({
|
||||
sectionKey: dto.sectionKey,
|
||||
title: dto.title,
|
||||
required: dto.required,
|
||||
locked: dto.locked ?? false,
|
||||
blocks,
|
||||
});
|
||||
}
|
||||
|
||||
function parsePlaceholderDef(dto: PlaceholderDefDto): Result<string, PlaceholderDef> {
|
||||
if (
|
||||
typeof dto.key !== 'string' ||
|
||||
typeof dto.label !== 'string' ||
|
||||
typeof dto.autoResolvable !== 'boolean'
|
||||
) {
|
||||
return err('placeholder: bad shape');
|
||||
}
|
||||
return ok({
|
||||
key: dto.key,
|
||||
label: dto.label,
|
||||
autoResolvable: dto.autoResolvable,
|
||||
...(dto.fillable != null ? { fillable: dto.fillable } : {}),
|
||||
...(dto.deprecated != null ? { deprecated: dto.deprecated } : {}),
|
||||
});
|
||||
}
|
||||
|
||||
export function parseStatus(dto: BriefStatusDto | undefined): Result<string, BriefStatus> {
|
||||
switch (dto?.tag) {
|
||||
case 'draft':
|
||||
return ok({ tag: 'draft' });
|
||||
case 'submitted':
|
||||
if (typeof dto.submittedBy !== 'string' || typeof dto.submittedAt !== 'string')
|
||||
return err('status: bad submitted');
|
||||
return ok({ tag: 'submitted', submittedBy: dto.submittedBy, submittedAt: dto.submittedAt });
|
||||
case 'approved':
|
||||
if (typeof dto.approvedBy !== 'string' || typeof dto.approvedAt !== 'string')
|
||||
return err('status: bad approved');
|
||||
return ok({ tag: 'approved', approvedBy: dto.approvedBy, approvedAt: dto.approvedAt });
|
||||
case 'rejected':
|
||||
if (
|
||||
typeof dto.rejectedBy !== 'string' ||
|
||||
typeof dto.rejectedAt !== 'string' ||
|
||||
typeof dto.comments !== 'string'
|
||||
)
|
||||
return err('status: bad rejected');
|
||||
return ok({
|
||||
tag: 'rejected',
|
||||
rejectedBy: dto.rejectedBy,
|
||||
rejectedAt: dto.rejectedAt,
|
||||
comments: dto.comments,
|
||||
});
|
||||
case 'sent':
|
||||
if (typeof dto.sentAt !== 'string') return err('status: bad sent');
|
||||
return ok({ tag: 'sent', sentAt: dto.sentAt });
|
||||
default:
|
||||
return err(`status: unknown tag ${dto?.tag}`);
|
||||
}
|
||||
}
|
||||
|
||||
function parsePassage(dto: LibraryPassageDto): Result<string, LibraryPassage> {
|
||||
if (typeof dto.passageId !== 'string') return err('passage: bad shape');
|
||||
if (dto.scope !== 'global' && dto.scope !== 'beroep')
|
||||
return err(`passage: unknown scope ${dto.scope}`);
|
||||
if (
|
||||
typeof dto.sectionKey !== 'string' ||
|
||||
typeof dto.label !== 'string' ||
|
||||
typeof dto.version !== 'number'
|
||||
)
|
||||
return err('passage: bad shape');
|
||||
const content = parseBlockContent(dto.content);
|
||||
if (!content.ok) return content;
|
||||
return ok({
|
||||
passageId: dto.passageId,
|
||||
scope: dto.scope,
|
||||
sectionKey: dto.sectionKey,
|
||||
label: dto.label,
|
||||
content: content.value,
|
||||
version: dto.version,
|
||||
...(dto.beroep != null ? { beroep: dto.beroep } : {}),
|
||||
...(dto.besluit === 'positief' || dto.besluit === 'negatief' ? { besluit: dto.besluit } : {}),
|
||||
...(dto.reason != null ? { reason: dto.reason } : {}),
|
||||
});
|
||||
}
|
||||
|
||||
function parseCaseContext(dto: CaseContextDto | undefined): Result<string, CaseContext> {
|
||||
if (
|
||||
typeof dto?.zorgverlenerNaam !== 'string' ||
|
||||
typeof dto.bigNummer !== 'string' ||
|
||||
typeof dto.beroep !== 'string' ||
|
||||
typeof dto.aanvraagReferentie !== 'string'
|
||||
) {
|
||||
return err('brief-view: missing/invalid case context');
|
||||
}
|
||||
return ok({
|
||||
zorgverlenerNaam: dto.zorgverlenerNaam,
|
||||
bigNummer: dto.bigNummer,
|
||||
beroep: dto.beroep,
|
||||
aanvraagReferentie: dto.aanvraagReferentie,
|
||||
});
|
||||
}
|
||||
|
||||
export function parseBrief(dto: BriefDto): Result<string, Brief> {
|
||||
if (
|
||||
typeof dto.briefId !== 'string' ||
|
||||
typeof dto.drafterId !== 'string' ||
|
||||
typeof dto.beroep !== 'string' ||
|
||||
typeof dto.templateId !== 'string'
|
||||
) {
|
||||
return err('brief: missing ids');
|
||||
}
|
||||
const status = parseStatus(dto.status);
|
||||
if (!status.ok) return status;
|
||||
|
||||
const placeholders: PlaceholderDef[] = [];
|
||||
for (const p of dto.placeholders ?? []) {
|
||||
const parsed = parsePlaceholderDef(p);
|
||||
if (!parsed.ok) return parsed;
|
||||
placeholders.push(parsed.value);
|
||||
}
|
||||
const sections: LetterSection[] = [];
|
||||
for (const s of dto.sections ?? []) {
|
||||
const parsed = parseSection(s);
|
||||
if (!parsed.ok) return parsed;
|
||||
sections.push(parsed.value);
|
||||
}
|
||||
return ok({
|
||||
briefId: dto.briefId,
|
||||
beroep: dto.beroep,
|
||||
templateId: dto.templateId,
|
||||
placeholders,
|
||||
sections,
|
||||
status: status.value,
|
||||
drafterId: dto.drafterId,
|
||||
});
|
||||
}
|
||||
|
||||
function parseDecisions(dto: BriefDecisionsDto | undefined): Result<string, BriefDecisions> {
|
||||
if (
|
||||
typeof dto?.canEdit !== 'boolean' ||
|
||||
typeof dto.canApprove !== 'boolean' ||
|
||||
typeof dto.canReject !== 'boolean' ||
|
||||
typeof dto.canSend !== 'boolean' ||
|
||||
typeof dto.canRevealBigNummer !== 'boolean'
|
||||
) {
|
||||
return err('brief-view: missing/invalid decisions');
|
||||
}
|
||||
return ok({
|
||||
canEdit: dto.canEdit,
|
||||
canApprove: dto.canApprove,
|
||||
canReject: dto.canReject,
|
||||
canSend: dto.canSend,
|
||||
canRevealBigNummer: dto.canRevealBigNummer,
|
||||
});
|
||||
}
|
||||
|
||||
export function parseOrgTemplate(dto: OrgTemplateDto | undefined): Result<string, OrgTemplate> {
|
||||
if (
|
||||
typeof dto?.subOrgId !== 'string' ||
|
||||
typeof dto.orgName !== 'string' ||
|
||||
typeof dto.returnAddress !== 'string' ||
|
||||
typeof dto.footerContact !== 'string' ||
|
||||
typeof dto.footerLegal !== 'string' ||
|
||||
typeof dto.signatureName !== 'string' ||
|
||||
typeof dto.signatureRole !== 'string' ||
|
||||
typeof dto.signatureClosing !== 'string' ||
|
||||
typeof dto.version !== 'number'
|
||||
) {
|
||||
return err('org-template: bad shape');
|
||||
}
|
||||
const m = dto.margins;
|
||||
if (
|
||||
typeof m?.topMm !== 'number' ||
|
||||
typeof m.rightMm !== 'number' ||
|
||||
typeof m.bottomMm !== 'number' ||
|
||||
typeof m.leftMm !== 'number'
|
||||
) {
|
||||
return err('org-template: bad margins');
|
||||
}
|
||||
return ok({
|
||||
subOrgId: dto.subOrgId,
|
||||
orgName: dto.orgName,
|
||||
returnAddress: dto.returnAddress,
|
||||
...(dto.logoDocumentId != null ? { logoDocumentId: dto.logoDocumentId } : {}),
|
||||
footerContact: dto.footerContact,
|
||||
footerLegal: dto.footerLegal,
|
||||
signatureName: dto.signatureName,
|
||||
signatureRole: dto.signatureRole,
|
||||
signatureClosing: dto.signatureClosing,
|
||||
margins: { topMm: m.topMm, rightMm: m.rightMm, bottomMm: m.bottomMm, leftMm: m.leftMm },
|
||||
version: dto.version,
|
||||
});
|
||||
}
|
||||
|
||||
export function parseBriefView(dto: BriefViewDto): Result<string, BriefView> {
|
||||
if (!dto.brief) return err('brief-view: missing brief');
|
||||
const brief = parseBrief(dto.brief);
|
||||
if (!brief.ok) return brief;
|
||||
const decisions = parseDecisions(dto.decisions);
|
||||
if (!decisions.ok) return decisions;
|
||||
const orgTemplate = parseOrgTemplate(dto.orgTemplate);
|
||||
if (!orgTemplate.ok) return orgTemplate;
|
||||
const caseContext = parseCaseContext(dto.caseContext);
|
||||
if (!caseContext.ok) return caseContext;
|
||||
const availablePassages: LibraryPassage[] = [];
|
||||
for (const p of dto.availablePassages ?? []) {
|
||||
const parsed = parsePassage(p);
|
||||
if (!parsed.ok) return parsed;
|
||||
availablePassages.push(parsed.value);
|
||||
}
|
||||
return ok({
|
||||
brief: brief.value,
|
||||
availablePassages,
|
||||
decisions: decisions.value,
|
||||
orgTemplate: orgTemplate.value,
|
||||
caseContext: caseContext.value,
|
||||
});
|
||||
}
|
||||
|
||||
// --- toDto: domain → wire, for save (collapses the union to the flat shape) ---
|
||||
|
||||
function nodeToDto(n: RichTextNode): RichTextNodeDto {
|
||||
switch (n.type) {
|
||||
case 'text':
|
||||
return { type: 'text', text: n.text, ...(n.marks ? { marks: [...n.marks] } : {}) };
|
||||
case 'placeholder':
|
||||
return { type: 'placeholder', key: n.key };
|
||||
case 'lineBreak':
|
||||
return { type: 'lineBreak' };
|
||||
}
|
||||
}
|
||||
|
||||
function contentToDto(content: RichTextBlock): RichTextBlockDto {
|
||||
return {
|
||||
paragraphs: content.paragraphs.map((p) => ({
|
||||
nodes: p.nodes.map(nodeToDto),
|
||||
...(p.list ? { list: p.list } : {}),
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
function blockToDto(b: LetterBlock): LetterBlockDto {
|
||||
return b.type === 'passage'
|
||||
? {
|
||||
type: 'passage',
|
||||
blockId: b.blockId,
|
||||
content: contentToDto(b.content),
|
||||
sourcePassageId: b.sourcePassageId,
|
||||
sourceVersion: b.sourceVersion,
|
||||
edited: b.edited,
|
||||
}
|
||||
: { type: 'freeText', blockId: b.blockId, content: contentToDto(b.content) };
|
||||
}
|
||||
|
||||
function sectionToDto(s: LetterSection): LetterSectionDto {
|
||||
return {
|
||||
sectionKey: s.sectionKey,
|
||||
title: s.title,
|
||||
required: s.required,
|
||||
locked: s.locked,
|
||||
blocks: s.blocks.map(blockToDto),
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Result, ok, err } from '@shared/kernel/fp';
|
||||
import { currentRole } from '@shared/infrastructure/role';
|
||||
import { problemDetail } from '@shared/infrastructure/api-error';
|
||||
import { environment } from '@shared/environments/environment';
|
||||
|
||||
const PREVIEW_FAILED = $localize`:@@brief.preview.failed:De voorvertoning kon niet worden geopend.`;
|
||||
|
||||
/**
|
||||
* `/brief/preview` returns `text/html`, not JSON, and is `.ExcludeFromDescription()`'d
|
||||
* to keep the NSwag-generated client JSON-only (same seam as uploads) — so this is a
|
||||
* hand-written fetch, not the `ApiClient`. That also means it bypasses `HttpClient`'s
|
||||
* `roleInterceptor`, so `X-Role` is set here explicitly.
|
||||
*/
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class LetterPreviewAdapter {
|
||||
async preview(): Promise<Result<string, Blob>> {
|
||||
let res: Response;
|
||||
try {
|
||||
res = await fetch(`${environment.apiBaseUrl}/api/v1/brief/preview`, {
|
||||
headers: { 'X-Role': currentRole() },
|
||||
});
|
||||
} catch {
|
||||
return err(PREVIEW_FAILED);
|
||||
}
|
||||
if (!res.ok) return err(await errorMessage(res));
|
||||
return ok(await res.blob());
|
||||
}
|
||||
}
|
||||
|
||||
async function errorMessage(res: Response): Promise<string> {
|
||||
try {
|
||||
return problemDetail(await res.json(), PREVIEW_FAILED);
|
||||
} catch {
|
||||
return PREVIEW_FAILED;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { OrgTemplateAdminViewDto, OrgTemplateDto } from '@shared/infrastructure/api-client';
|
||||
import { parseOrgTemplateAdminView } from './org-template.adapter';
|
||||
|
||||
const draft: OrgTemplateDto = {
|
||||
subOrgId: 'cibg-registers',
|
||||
orgName: 'CIBG',
|
||||
returnAddress: 'Postbus 1',
|
||||
footerContact: 'info@cibg.nl',
|
||||
footerLegal: 'onderdeel van VWS',
|
||||
signatureName: 'A. de Vries',
|
||||
signatureRole: 'Hoofd Registratie',
|
||||
signatureClosing: 'Met vriendelijke groet,',
|
||||
margins: { topMm: 25, rightMm: 20, bottomMm: 25, leftMm: 20 },
|
||||
version: 3,
|
||||
};
|
||||
|
||||
const view: OrgTemplateAdminViewDto = {
|
||||
draft,
|
||||
publishedVersion: 3,
|
||||
unsentBriefs: 2,
|
||||
history: [{ version: 2, publishedAt: '2026-06-01', template: draft }],
|
||||
};
|
||||
|
||||
describe('parseOrgTemplateAdminView', () => {
|
||||
it('parses a well-formed admin view', () => {
|
||||
const r = parseOrgTemplateAdminView(view);
|
||||
expect(r.ok).toBe(true);
|
||||
if (!r.ok) return;
|
||||
expect(r.value.draft.orgName).toBe('CIBG');
|
||||
expect(r.value.publishedVersion).toBe(3);
|
||||
expect(r.value.unsentBriefs).toBe(2);
|
||||
expect(r.value.history).toHaveLength(1);
|
||||
expect(r.value.history[0].version).toBe(2);
|
||||
});
|
||||
|
||||
it('rejects a missing draft', () => {
|
||||
const r = parseOrgTemplateAdminView({ ...view, draft: undefined });
|
||||
expect(r.ok).toBe(false);
|
||||
});
|
||||
|
||||
it('rejects a missing count field', () => {
|
||||
const r = parseOrgTemplateAdminView({ ...view, unsentBriefs: undefined });
|
||||
expect(r.ok).toBe(false);
|
||||
});
|
||||
|
||||
it('rejects a malformed history entry', () => {
|
||||
const r = parseOrgTemplateAdminView({
|
||||
...view,
|
||||
history: [
|
||||
{ version: 2, publishedAt: '2026-06-01', template: { ...draft, orgName: undefined } },
|
||||
],
|
||||
});
|
||||
expect(r.ok).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,160 @@
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { Result, ok, err } from '@shared/kernel/fp';
|
||||
import { runSubmit } from '@shared/application/submit';
|
||||
import { currentRole } from '@shared/infrastructure/role';
|
||||
import { problemDetail } from '@shared/infrastructure/api-error';
|
||||
import { environment } from '@shared/environments/environment';
|
||||
import {
|
||||
ApiClient,
|
||||
OrgTemplateAdminViewDto,
|
||||
OrgTemplateDto,
|
||||
OrgTemplateVersionDto,
|
||||
PublishOrgTemplateResponse,
|
||||
SubOrgSummaryDto,
|
||||
} from '@shared/infrastructure/api-client';
|
||||
import {
|
||||
OrgTemplate,
|
||||
OrgTemplateAdminView,
|
||||
OrgTemplateVersion,
|
||||
PublishResult,
|
||||
SubOrgSummary,
|
||||
} from '@brief/domain/org-template';
|
||||
import { parseOrgTemplate } from '@brief/infrastructure/brief.adapter';
|
||||
|
||||
/**
|
||||
* The only place admin org-template HTTP lives (ADR-0001 boundary). CRUD/publish/
|
||||
* rollback go through the generated client (X-Role added by `roleInterceptor`);
|
||||
* `parse*` narrows the untrusted wire shape. The proefbrief is `text/html` and
|
||||
* `ExcludeFromDescription`'d — a hand-written fetch, same seam as `letter-preview.adapter`.
|
||||
*/
|
||||
|
||||
const FAILED = $localize`:@@orgTemplate.action.failed:De actie is niet gelukt. Probeer het later opnieuw.`;
|
||||
const PROEFBRIEF_FAILED = $localize`:@@orgTemplate.proefbrief.failed:De proefbrief kon niet worden geopend.`;
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class OrgTemplateAdapter {
|
||||
private client = inject(ApiClient);
|
||||
|
||||
async list(): Promise<Result<string, SubOrgSummary[]>> {
|
||||
const r = await runSubmit(() => this.client.orgTemplates(), FAILED);
|
||||
if (!r.ok) return r;
|
||||
const out: SubOrgSummary[] = [];
|
||||
for (const s of r.value ?? []) {
|
||||
const parsed = parseSubOrg(s);
|
||||
if (!parsed.ok) return parsed;
|
||||
out.push(parsed.value);
|
||||
}
|
||||
return ok(out);
|
||||
}
|
||||
|
||||
async load(subOrgId: string): Promise<Result<string, OrgTemplateAdminView>> {
|
||||
const r = await runSubmit(() => this.client.orgTemplateGET(subOrgId), FAILED);
|
||||
return r.ok ? parseAdminView(r.value) : r;
|
||||
}
|
||||
|
||||
async save(subOrgId: string, draft: OrgTemplate): Promise<Result<string, OrgTemplateAdminView>> {
|
||||
const r = await runSubmit(
|
||||
() => this.client.orgTemplatePUT(subOrgId, { draft: toDto(draft) }),
|
||||
FAILED,
|
||||
);
|
||||
return r.ok ? parseAdminView(r.value) : r;
|
||||
}
|
||||
|
||||
async publish(subOrgId: string): Promise<Result<string, PublishResult>> {
|
||||
const r = await runSubmit(() => this.client.orgTemplatePublish(subOrgId), FAILED);
|
||||
return r.ok ? parsePublish(r.value) : r;
|
||||
}
|
||||
|
||||
async rollback(subOrgId: string, version: number): Promise<Result<string, OrgTemplateAdminView>> {
|
||||
const r = await runSubmit(() => this.client.orgTemplateRollback(subOrgId, version), FAILED);
|
||||
return r.ok ? parseAdminView(r.value) : r;
|
||||
}
|
||||
|
||||
/** Proefbrief: the unpublished draft rendered over a fixture letter, opened as a Blob. */
|
||||
async proefbrief(subOrgId: string): Promise<Result<string, Blob>> {
|
||||
let res: Response;
|
||||
try {
|
||||
res = await fetch(
|
||||
`${environment.apiBaseUrl}/api/v1/admin/org-template/${encodeURIComponent(subOrgId)}/preview`,
|
||||
{ headers: { 'X-Role': currentRole() } },
|
||||
);
|
||||
} catch {
|
||||
return err(PROEFBRIEF_FAILED);
|
||||
}
|
||||
if (!res.ok) {
|
||||
try {
|
||||
return err(problemDetail(await res.json(), PROEFBRIEF_FAILED));
|
||||
} catch {
|
||||
return err(PROEFBRIEF_FAILED);
|
||||
}
|
||||
}
|
||||
return ok(await res.blob());
|
||||
}
|
||||
}
|
||||
|
||||
// --- parse: wire → domain, validating at the boundary ---
|
||||
|
||||
function parseSubOrg(dto: SubOrgSummaryDto): Result<string, SubOrgSummary> {
|
||||
if (typeof dto.subOrgId !== 'string' || typeof dto.orgName !== 'string')
|
||||
return err('sub-org: bad shape');
|
||||
return ok({
|
||||
subOrgId: dto.subOrgId,
|
||||
orgName: dto.orgName,
|
||||
publishedVersion: dto.publishedVersion ?? 0,
|
||||
});
|
||||
}
|
||||
|
||||
function parseVersion(dto: OrgTemplateVersionDto): Result<string, OrgTemplateVersion> {
|
||||
if (typeof dto.version !== 'number' || typeof dto.publishedAt !== 'string')
|
||||
return err('version: bad shape');
|
||||
const template = parseOrgTemplate(dto.template);
|
||||
if (!template.ok) return template;
|
||||
return ok({ version: dto.version, publishedAt: dto.publishedAt, template: template.value });
|
||||
}
|
||||
|
||||
export function parseOrgTemplateAdminView(
|
||||
dto: OrgTemplateAdminViewDto,
|
||||
): Result<string, OrgTemplateAdminView> {
|
||||
const draft = parseOrgTemplate(dto.draft);
|
||||
if (!draft.ok) return draft;
|
||||
if (typeof dto.publishedVersion !== 'number' || typeof dto.unsentBriefs !== 'number')
|
||||
return err('admin-view: bad shape');
|
||||
const history: OrgTemplateVersion[] = [];
|
||||
for (const v of dto.history ?? []) {
|
||||
const parsed = parseVersion(v);
|
||||
if (!parsed.ok) return parsed;
|
||||
history.push(parsed.value);
|
||||
}
|
||||
return ok({
|
||||
draft: draft.value,
|
||||
publishedVersion: dto.publishedVersion,
|
||||
history,
|
||||
unsentBriefs: dto.unsentBriefs,
|
||||
});
|
||||
}
|
||||
|
||||
const parseAdminView = parseOrgTemplateAdminView;
|
||||
|
||||
function parsePublish(dto: PublishOrgTemplateResponse): Result<string, PublishResult> {
|
||||
if (typeof dto.version !== 'number' || typeof dto.affectedUnsentBriefs !== 'number')
|
||||
return err('publish: bad shape');
|
||||
return ok({ version: dto.version, affectedUnsentBriefs: dto.affectedUnsentBriefs });
|
||||
}
|
||||
|
||||
// --- toDto: domain → wire (for save) ---
|
||||
|
||||
function toDto(t: OrgTemplate): OrgTemplateDto {
|
||||
return {
|
||||
subOrgId: t.subOrgId,
|
||||
orgName: t.orgName,
|
||||
returnAddress: t.returnAddress,
|
||||
...(t.logoDocumentId != null ? { logoDocumentId: t.logoDocumentId } : {}),
|
||||
footerContact: t.footerContact,
|
||||
footerLegal: t.footerLegal,
|
||||
signatureName: t.signatureName,
|
||||
signatureRole: t.signatureRole,
|
||||
signatureClosing: t.signatureClosing,
|
||||
margins: { ...t.margins },
|
||||
version: t.version,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Result, ok, err } from '@shared/kernel/fp';
|
||||
import { currentRole } from '@shared/infrastructure/role';
|
||||
import { problemDetail } from '@shared/infrastructure/api-error';
|
||||
import { environment } from '@shared/environments/environment';
|
||||
|
||||
const REVEAL_FAILED = $localize`:@@brief.reveal.failed:Het BIG-nummer kon niet worden getoond.`;
|
||||
|
||||
/**
|
||||
* Field-level PII reveal (PRD-0002 §5c). The case screen ships the BIG-nummer masked;
|
||||
* this unmasks it, gated server-side by the reveal capability AND a step-up. The
|
||||
* step-up is stubbed as the `X-Step-Up` header — the caller sends it only after the
|
||||
* user's confirm gesture, so a plain call (or a role without the capability) 403s.
|
||||
*
|
||||
* Hand-written fetch (not the `ApiClient`) because the call needs a per-request header;
|
||||
* `.ExcludeFromDescription()` on the endpoint keeps the generated client JSON-only, the
|
||||
* same seam as `/brief/preview` and uploads — which also means `X-Role` is set here.
|
||||
*/
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class RevealBigNummerAdapter {
|
||||
async reveal(): Promise<Result<string, string>> {
|
||||
let res: Response;
|
||||
try {
|
||||
res = await fetch(`${environment.apiBaseUrl}/api/v1/brief/reveal-bignummer`, {
|
||||
method: 'POST',
|
||||
headers: { 'X-Role': currentRole(), 'X-Step-Up': 'true' },
|
||||
});
|
||||
} catch {
|
||||
return err(REVEAL_FAILED);
|
||||
}
|
||||
if (!res.ok) return err(await errorMessage(res));
|
||||
const body: unknown = await res.json().catch(() => null);
|
||||
// Trust boundary: validate the shape before handing back a plain string.
|
||||
if (
|
||||
typeof body === 'object' &&
|
||||
body !== null &&
|
||||
typeof (body as { bigNummer?: unknown }).bigNummer === 'string'
|
||||
) {
|
||||
return ok((body as { bigNummer: string }).bigNummer);
|
||||
}
|
||||
return err(REVEAL_FAILED);
|
||||
}
|
||||
}
|
||||
|
||||
async function errorMessage(res: Response): Promise<string> {
|
||||
try {
|
||||
return problemDetail(await res.json(), REVEAL_FAILED);
|
||||
} catch {
|
||||
return REVEAL_FAILED;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,267 @@
|
||||
import { Component, ElementRef, computed, input, output, viewChild } from '@angular/core';
|
||||
import { PlaceholderOption } from '@shared/ui/rich-text-editor/rich-text-editor.component';
|
||||
import { ButtonComponent } from '@shared/ui/button/button.component';
|
||||
import { HeadingComponent } from '@shared/ui/heading/heading.component';
|
||||
import { MaskedValueComponent } from '@shared/ui/masked-value/masked-value.component';
|
||||
import { AlertComponent } from '@shared/ui/alert/alert.component';
|
||||
import { StepperComponent } from '@shared/ui/stepper/stepper.component';
|
||||
import { Besluit, Brief, CaseContext, LibraryPassage } from '@brief/domain/brief';
|
||||
import { besluitGuidance, inferSelection } from '@brief/domain/besluit';
|
||||
import { Diagnostic } from '@brief/domain/placeholders';
|
||||
import { OrgTemplate } from '@brief/domain/org-template';
|
||||
import { BriefMsg } from '@brief/domain/brief.machine';
|
||||
import { LetterCanvasComponent } from '@brief/ui/letter-canvas/letter-canvas.component';
|
||||
import { DiagnosticsPanelComponent } from '@brief/ui/diagnostics-panel/diagnostics-panel.component';
|
||||
import { RejectionCommentsComponent } from '@brief/ui/rejection-comments/rejection-comments.component';
|
||||
import { LetterEditorComponent } from '@brief/ui/letter-editor/letter-editor.component';
|
||||
import { BesluitPanelComponent } from '@brief/ui/besluit-panel/besluit-panel.component';
|
||||
|
||||
/** Organism: the behandelaar's drafting step. Frames "Brief opstellen" as one step in
|
||||
the case workflow — a case-context header + stepper (Beoordelen → Brief opstellen →
|
||||
Indienen, neighbours stubbed) — with the besluit-driven guidance, the lean letter
|
||||
editor, and an on-demand full-letter preview in a modal. Only ever renders for an
|
||||
editable brief (draft/rejected); the approver's read-only flow stays in
|
||||
letter-composer. Presentational: emits edit/submit/preview intents. */
|
||||
@Component({
|
||||
selector: 'app-behandel-scherm',
|
||||
imports: [
|
||||
ButtonComponent,
|
||||
HeadingComponent,
|
||||
MaskedValueComponent,
|
||||
AlertComponent,
|
||||
StepperComponent,
|
||||
LetterCanvasComponent,
|
||||
DiagnosticsPanelComponent,
|
||||
RejectionCommentsComponent,
|
||||
LetterEditorComponent,
|
||||
BesluitPanelComponent,
|
||||
],
|
||||
styles: [
|
||||
`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
.case-head {
|
||||
margin-block-end: var(--rhc-space-max-lg);
|
||||
padding: var(--rhc-space-max-md) var(--rhc-space-max-lg);
|
||||
border-inline-start: 4px solid var(--rhc-color-primary, var(--rhc-color-border-strong));
|
||||
background: var(--rhc-color-background-subtle, transparent);
|
||||
}
|
||||
.case-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--rhc-space-max-md);
|
||||
color: var(--rhc-color-foreground-subtle);
|
||||
}
|
||||
.step-body {
|
||||
display: grid;
|
||||
gap: var(--rhc-space-max-xl);
|
||||
margin-block-start: var(--rhc-space-max-lg);
|
||||
}
|
||||
.bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--rhc-space-max-md);
|
||||
align-items: center;
|
||||
margin-block-start: var(--rhc-space-max-xl);
|
||||
}
|
||||
dialog {
|
||||
border: none;
|
||||
border-radius: var(--rhc-radius-md, 4px);
|
||||
padding: 0;
|
||||
max-width: min(900px, 95vw);
|
||||
width: 100%;
|
||||
}
|
||||
dialog::backdrop {
|
||||
background: rgb(0 0 0 / 45%); /* token-ok: modal scrim, not a palette colour */
|
||||
}
|
||||
.modal-body {
|
||||
padding: var(--rhc-space-max-lg);
|
||||
max-height: 80vh;
|
||||
overflow: auto;
|
||||
}
|
||||
.modal-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--rhc-space-max-md);
|
||||
padding: var(--rhc-space-max-md) var(--rhc-space-max-lg);
|
||||
border-block-start: 1px solid var(--rhc-color-border);
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
<div class="case-head">
|
||||
<app-heading [level]="2">{{ caseHeading() }}</app-heading>
|
||||
<div class="case-meta">
|
||||
<span>{{ caseContext().aanvraagReferentie }}</span>
|
||||
<span>{{ caseContext().zorgverlenerNaam }}</span>
|
||||
<span>
|
||||
{{ bigLabel() }}
|
||||
<app-masked-value
|
||||
[value]="caseContext().bigNummer"
|
||||
[canReveal]="canRevealBigNummer()"
|
||||
[revealLabel]="revealLabel()"
|
||||
(reveal)="onReveal()"
|
||||
/>
|
||||
</span>
|
||||
<span>{{ caseContext().beroep }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<app-stepper
|
||||
[steps]="steps()"
|
||||
[current]="1"
|
||||
[processName]="processName()"
|
||||
[stepTitle]="stepTitle()"
|
||||
/>
|
||||
|
||||
<div class="step-body">
|
||||
@if (status() === 'rejected') {
|
||||
<app-rejection-comments mode="show" [comments]="rejectComments()" />
|
||||
}
|
||||
|
||||
<app-besluit-panel
|
||||
[passages]="availablePassages()"
|
||||
[besluit]="selection().besluit"
|
||||
[initialRedenen]="selection().reasons"
|
||||
(selectionChange)="onSelection($event)"
|
||||
/>
|
||||
|
||||
@if (guidance(); as g) {
|
||||
@if (g.needsReason) {
|
||||
<app-alert type="warning">{{ needsReasonHint }}</app-alert>
|
||||
} @else {
|
||||
<app-alert type="info">{{ insertedHint(g.insertedCount) }}</app-alert>
|
||||
}
|
||||
}
|
||||
|
||||
<app-letter-editor [brief]="brief()" [placeholders]="menu()" (edit)="edit.emit($event)" />
|
||||
|
||||
<app-diagnostics-panel [diagnostics]="diagnostics()" (locate)="locate.emit($event)" />
|
||||
|
||||
<div class="bar">
|
||||
<app-button variant="subtle" (click)="openPreview()">{{ previewLabel() }}</app-button>
|
||||
<app-button variant="primary" [disabled]="!canSubmit() || busy()" (click)="submit.emit()">{{
|
||||
submitLabel()
|
||||
}}</app-button>
|
||||
@if (!canSubmit()) {
|
||||
<span class="app-text-subtle">{{ submitHint() }}</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dialog #previewDialog>
|
||||
<div class="modal-body">
|
||||
<app-letter-canvas
|
||||
[brief]="brief()"
|
||||
[orgTemplate]="orgTemplate()"
|
||||
[logoUrl]="logoUrl()"
|
||||
[editableRegions]="'none'"
|
||||
[diagnostics]="diagnostics()"
|
||||
/>
|
||||
</div>
|
||||
<div class="modal-bar">
|
||||
<app-button variant="secondary" (click)="preview.emit()">{{
|
||||
openDocumentLabel()
|
||||
}}</app-button>
|
||||
<app-button variant="primary" (click)="closePreview()">{{ closeLabel() }}</app-button>
|
||||
</div>
|
||||
</dialog>
|
||||
`,
|
||||
})
|
||||
export class BehandelSchermComponent {
|
||||
brief = input.required<Brief>();
|
||||
orgTemplate = input.required<OrgTemplate>();
|
||||
logoUrl = input<string | null>(null);
|
||||
availablePassages = input<readonly LibraryPassage[]>([]);
|
||||
diagnostics = input<readonly Diagnostic[]>([]);
|
||||
caseContext = input.required<CaseContext>();
|
||||
canSubmit = input(false);
|
||||
busy = input(false);
|
||||
/** Server decision (PRD-0002 §5c): may this actor unmask the case BIG-nummer? */
|
||||
canRevealBigNummer = input(false);
|
||||
|
||||
edit = output<BriefMsg>();
|
||||
submit = output<void>();
|
||||
preview = output<void>();
|
||||
locate = output<Diagnostic>();
|
||||
revealBigNummer = output<void>();
|
||||
|
||||
/** Step-up (PRD-0002 §5d) stubbed as a native confirm — the extra verification gesture
|
||||
before an audited PII reveal. ponytail: real systems prompt MFA / recent re-auth. */
|
||||
protected onReveal() {
|
||||
if (confirm(this.stepUpPrompt())) this.revealBigNummer.emit();
|
||||
}
|
||||
|
||||
private previewDialog = viewChild<ElementRef<HTMLDialogElement>>('previewDialog');
|
||||
|
||||
protected status = computed(() => this.brief().status.tag);
|
||||
protected rejectComments = computed(() => {
|
||||
const s = this.brief().status;
|
||||
return s.tag === 'rejected' ? s.comments : '';
|
||||
});
|
||||
|
||||
/** The besluit + redenen the letter currently reflects, read back off the kern's
|
||||
passages — this seeds the panel so it survives reload/undo (no separate storage). */
|
||||
protected selection = computed(() => {
|
||||
const kern = this.brief().sections.find((s) => s.sectionKey === 'kern');
|
||||
return inferSelection(kern?.blocks ?? [], this.availablePassages());
|
||||
});
|
||||
|
||||
/** Visible guidance for the current selection — null until a besluit is chosen (the
|
||||
panel's own intro copy prompts that first step). */
|
||||
protected guidance = computed(() => {
|
||||
const s = this.selection();
|
||||
return s.besluit ? besluitGuidance(this.availablePassages(), s.besluit, s.reasons) : null;
|
||||
});
|
||||
protected needsReasonHint = $localize`:@@brief.guidance.needsReason:Kies een reden, zodat de juiste motivering aan de brief wordt toegevoegd.`;
|
||||
protected insertedHint = (n: number) =>
|
||||
$localize`:@@brief.guidance.inserted:${n}:count: standaardtekst(en) toegevoegd op basis van het besluit. Vul aan met vrije tekst waar nodig.`;
|
||||
|
||||
// Same insert menu as the composer: only valid, fillable, non-deprecated fields.
|
||||
protected menu = computed<PlaceholderOption[]>(() =>
|
||||
this.brief()
|
||||
.placeholders.filter((p) => p.fillable !== false && !p.deprecated)
|
||||
.map((p) => ({ key: p.key, label: p.label, autoResolvable: p.autoResolvable })),
|
||||
);
|
||||
|
||||
/** Besluit/redenen changed → recompose the kern as one edit (= one undo step). */
|
||||
protected onSelection(sel: { besluit: Besluit | null; reasons: string[] }) {
|
||||
this.edit.emit({ tag: 'BesluitSelected', besluit: sel.besluit, reasons: sel.reasons });
|
||||
}
|
||||
|
||||
protected openPreview() {
|
||||
this.previewDialog()?.nativeElement.showModal();
|
||||
}
|
||||
protected closePreview() {
|
||||
this.previewDialog()?.nativeElement.close();
|
||||
}
|
||||
|
||||
protected submitLabel = computed(() =>
|
||||
this.status() === 'rejected'
|
||||
? $localize`:@@brief.resubmit:Opnieuw indienen`
|
||||
: $localize`:@@brief.submit:Indienen ter beoordeling`,
|
||||
);
|
||||
|
||||
protected steps = input<string[]>([
|
||||
$localize`:@@brief.step.beoordelen:Beoordelen`,
|
||||
$localize`:@@brief.step.opstellen:Brief opstellen`,
|
||||
$localize`:@@brief.step.indienen:Indienen`,
|
||||
]);
|
||||
protected processName = input($localize`:@@brief.process:Herregistratie behandelen`);
|
||||
protected stepTitle = input($localize`:@@brief.step.opstellen:Brief opstellen`);
|
||||
protected caseHeading = input($localize`:@@brief.case.heading:Aanvraag herregistratie`);
|
||||
protected bigLabel = input($localize`:@@brief.case.big:BIG-nummer`);
|
||||
protected revealLabel = input($localize`:@@brief.case.reveal:Toon BIG-nummer`);
|
||||
protected stepUpPrompt = input(
|
||||
$localize`:@@brief.case.revealConfirm:Extra verificatie vereist. Het tonen van het BIG-nummer wordt vastgelegd. Doorgaan?`,
|
||||
);
|
||||
protected previewLabel = input($localize`:@@brief.preview.open:Voorbeeld`);
|
||||
protected openDocumentLabel = input(
|
||||
$localize`:@@brief.preview.openDocument:Openen als document (PDF)`,
|
||||
);
|
||||
protected closeLabel = input($localize`:@@common.close:Sluiten`);
|
||||
protected submitHint = input(
|
||||
$localize`:@@brief.submitHint:Vul eerst alle verplichte secties en los fouten op.`,
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,174 @@
|
||||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import {
|
||||
Brief,
|
||||
BriefStatus,
|
||||
CaseContext,
|
||||
LibraryPassage,
|
||||
allDiagnostics,
|
||||
} from '@brief/domain/brief';
|
||||
import { OrgTemplate } from '@brief/domain/org-template';
|
||||
import { BehandelSchermComponent } from './behandel-scherm.component';
|
||||
|
||||
const text = (t: string): LibraryPassage['content'] => ({
|
||||
paragraphs: [{ nodes: [{ type: 'text', text: t }] }],
|
||||
});
|
||||
|
||||
const orgTemplate: OrgTemplate = {
|
||||
subOrgId: 'cibg-registers',
|
||||
orgName: 'CIBG — Registers',
|
||||
returnAddress: 'BIG-register\nPostbus 00000\n2500 AA Den Haag',
|
||||
footerContact: 'www.bigregister.nl',
|
||||
footerLegal: 'Ons kenmerk vermelden bij correspondentie.',
|
||||
signatureName: 'A. de Vries',
|
||||
signatureRole: 'Hoofd Registratie',
|
||||
signatureClosing: 'Met vriendelijke groet,',
|
||||
margins: { topMm: 25, rightMm: 25, bottomMm: 25, leftMm: 25 },
|
||||
version: 1,
|
||||
};
|
||||
|
||||
const caseContext: CaseContext = {
|
||||
zorgverlenerNaam: 'Dr. A. (Anna) de Vries',
|
||||
bigNummer: '19012345601',
|
||||
beroep: 'arts',
|
||||
aanvraagReferentie: 'HER-2026-000842',
|
||||
};
|
||||
|
||||
const passages: LibraryPassage[] = [
|
||||
{
|
||||
passageId: 'p-kern-positief',
|
||||
scope: 'global',
|
||||
sectionKey: 'kern',
|
||||
label: 'Toewijzing',
|
||||
version: 1,
|
||||
besluit: 'positief',
|
||||
content: text('Uw aanvraag is toegewezen.'),
|
||||
},
|
||||
{
|
||||
passageId: 'p-kern-negatief',
|
||||
scope: 'global',
|
||||
sectionKey: 'kern',
|
||||
label: 'Afwijzing',
|
||||
version: 1,
|
||||
besluit: 'negatief',
|
||||
content: text('Uw aanvraag is afgewezen.'),
|
||||
},
|
||||
{
|
||||
passageId: 'p-kern-scholing',
|
||||
scope: 'global',
|
||||
sectionKey: 'kern',
|
||||
label: 'Onvoldoende scholing',
|
||||
version: 1,
|
||||
besluit: 'negatief',
|
||||
reason: 'onvoldoende_scholing',
|
||||
content: text('Onvoldoende scholing.'),
|
||||
},
|
||||
];
|
||||
|
||||
function brief(status: BriefStatus, kernBlocks: Brief['sections'][number]['blocks'] = []): Brief {
|
||||
return {
|
||||
briefId: 'b1',
|
||||
beroep: 'arts',
|
||||
templateId: 't1',
|
||||
drafterId: 'demo-drafter',
|
||||
status,
|
||||
placeholders: [
|
||||
{ key: 'naam_zorgverlener', label: 'Naam zorgverlener', autoResolvable: true },
|
||||
{ key: 'reden_besluit', label: 'Reden besluit', autoResolvable: false },
|
||||
],
|
||||
sections: [
|
||||
{
|
||||
sectionKey: 'aanhef',
|
||||
title: 'Aanhef',
|
||||
required: true,
|
||||
locked: true,
|
||||
blocks: [{ type: 'freeText', blockId: 'aanhef-1', content: text('Geachte heer/mevrouw,') }],
|
||||
},
|
||||
{
|
||||
sectionKey: 'kern',
|
||||
title: 'Kern van het besluit',
|
||||
required: true,
|
||||
locked: false,
|
||||
blocks: kernBlocks,
|
||||
},
|
||||
{
|
||||
sectionKey: 'slot',
|
||||
title: 'Slot',
|
||||
required: false,
|
||||
locked: true,
|
||||
blocks: [{ type: 'freeText', blockId: 'slot-1', content: text('Met vriendelijke groet,') }],
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
const meta: Meta<BehandelSchermComponent> = {
|
||||
title: 'Domein/Brief/Behandel Scherm',
|
||||
component: BehandelSchermComponent,
|
||||
args: { orgTemplate, caseContext, availablePassages: passages, busy: false },
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<BehandelSchermComponent>;
|
||||
|
||||
/** Fresh case: no besluit chosen yet, so the kern is empty and only the editable
|
||||
body shows (aanhef/slot appear in the preview). */
|
||||
export const EmptyKern: Story = {
|
||||
args: { brief: brief({ tag: 'draft' }), diagnostics: [], canSubmit: false },
|
||||
};
|
||||
|
||||
// A besluit-sourced kern block (carries provenance), so the panel re-seeds itself from it.
|
||||
const negatiefScholingKern: Brief['sections'][number]['blocks'] = [
|
||||
{
|
||||
type: 'passage',
|
||||
blockId: 'local-1',
|
||||
sourcePassageId: 'p-kern-negatief',
|
||||
sourceVersion: 1,
|
||||
edited: false,
|
||||
content: text('Uw aanvraag is afgewezen.'),
|
||||
},
|
||||
{
|
||||
type: 'passage',
|
||||
blockId: 'local-2',
|
||||
sourcePassageId: 'p-kern-scholing',
|
||||
sourceVersion: 1,
|
||||
edited: false,
|
||||
content: text('Onvoldoende scholing.'),
|
||||
},
|
||||
];
|
||||
|
||||
/** Draft with a negatief besluit: the kern is filled from the selection and the besluit
|
||||
panel reflects it (negatief + "onvoldoende scholing" ticked), read back off the kern. */
|
||||
export const WithContent: Story = {
|
||||
render: (args) => {
|
||||
const b = brief({ tag: 'draft' }, negatiefScholingKern);
|
||||
return { props: { ...args, brief: b, diagnostics: allDiagnostics(b), canSubmit: true } };
|
||||
},
|
||||
};
|
||||
|
||||
/** Field-level PII (PRD-0002 §5c): the case BIG-nummer arrives MASKED, as the server
|
||||
ships it. The behandelaar holds the reveal capability, so the "Toon BIG-nummer"
|
||||
action shows — it runs a step-up confirm and an audited server call before unmasking. */
|
||||
export const MaskedBigNummer: Story = {
|
||||
args: {
|
||||
brief: brief({ tag: 'draft' }),
|
||||
diagnostics: [],
|
||||
canSubmit: false,
|
||||
caseContext: { ...caseContext, bigNummer: '********601' },
|
||||
canRevealBigNummer: true,
|
||||
},
|
||||
};
|
||||
|
||||
/** Rejected: the drafter reopens; the rejection comments show above the editor. */
|
||||
export const Rejected: Story = {
|
||||
render: (args) => {
|
||||
const b = brief(
|
||||
{
|
||||
tag: 'rejected',
|
||||
rejectedBy: 'demo-approver',
|
||||
rejectedAt: '2026-07-01',
|
||||
comments: 'Graag de reden concreter.',
|
||||
},
|
||||
negatiefScholingKern,
|
||||
);
|
||||
return { props: { ...args, brief: b, diagnostics: allDiagnostics(b), canSubmit: true } };
|
||||
},
|
||||
};
|
||||
@@ -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,65 @@
|
||||
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'] },
|
||||
};
|
||||
@@ -0,0 +1,193 @@
|
||||
import { Component, computed, inject } from '@angular/core';
|
||||
import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
|
||||
import { AlertComponent } from '@shared/ui/alert/alert.component';
|
||||
import { ButtonComponent } from '@shared/ui/button/button.component';
|
||||
import { ASYNC } from '@shared/ui/async/async.component';
|
||||
import { BriefStore } from '@brief/application/brief.store';
|
||||
import { LetterComposerComponent } from '@brief/ui/letter-composer/letter-composer.component';
|
||||
import { BehandelSchermComponent } from '@brief/ui/behandel-scherm/behandel-scherm.component';
|
||||
|
||||
/** Page: thin container. Injects the root store, kicks off the load, and passes its
|
||||
derived read-model to the composer. Business/UI logic lives below in pure pieces;
|
||||
this just wires signals to the organism and events back to store commands. */
|
||||
@Component({
|
||||
selector: 'app-brief-page',
|
||||
imports: [
|
||||
PageShellComponent,
|
||||
AlertComponent,
|
||||
ButtonComponent,
|
||||
...ASYNC,
|
||||
LetterComposerComponent,
|
||||
BehandelSchermComponent,
|
||||
],
|
||||
host: { '(document:keydown)': 'onKey($event)' },
|
||||
styles: [
|
||||
`
|
||||
.brief-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--rhc-space-max-md);
|
||||
margin-block-end: var(--rhc-space-max-lg);
|
||||
}
|
||||
.toolbar-start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--rhc-space-max-md);
|
||||
}
|
||||
.save {
|
||||
color: var(--rhc-color-foreground-subtle);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
<app-page-shell [heading]="heading" [intro]="intro" backLink="/dashboard">
|
||||
@if (lastError(); as err) {
|
||||
<app-alert type="error">{{ err }}</app-alert>
|
||||
}
|
||||
|
||||
<app-async [data]="store.remoteData()">
|
||||
<ng-template appAsyncError>
|
||||
<app-alert type="error">{{ failedText }}</app-alert>
|
||||
<app-button variant="secondary" (click)="reload()">{{ retryText }}</app-button>
|
||||
</ng-template>
|
||||
<ng-template appAsyncLoaded>
|
||||
@if (loaded(); as s) {
|
||||
@if (store.orgTemplate(); as orgTemplate) {
|
||||
<div class="brief-toolbar">
|
||||
<div class="toolbar-start">
|
||||
@if (store.canEdit()) {
|
||||
<app-button
|
||||
variant="subtle"
|
||||
[disabled]="!store.canUndo()"
|
||||
[attr.aria-label]="undoLabel"
|
||||
(click)="store.undo()"
|
||||
>{{ undoLabel }}</app-button
|
||||
>
|
||||
<app-button
|
||||
variant="subtle"
|
||||
[disabled]="!store.canRedo()"
|
||||
[attr.aria-label]="redoLabel"
|
||||
(click)="store.redo()"
|
||||
>{{ redoLabel }}</app-button
|
||||
>
|
||||
}
|
||||
<span class="save" role="status" aria-live="polite">{{ saveText() }}</span>
|
||||
@if (store.saveState().tag === 'Error') {
|
||||
<app-button variant="secondary" (click)="store.retrySave()">{{
|
||||
retrySaveLabel
|
||||
}}</app-button>
|
||||
}
|
||||
</div>
|
||||
<app-button variant="subtle" [disabled]="store.busy()" (click)="resetDemo()">{{
|
||||
resetLabel
|
||||
}}</app-button>
|
||||
</div>
|
||||
@if (store.canEdit() && store.caseContext(); as caseContext) {
|
||||
<!-- Drafter (behandelaar): guided drafting step in the case workflow. -->
|
||||
<app-behandel-scherm
|
||||
[brief]="s.brief"
|
||||
[orgTemplate]="orgTemplate"
|
||||
[logoUrl]="store.logoUrl()"
|
||||
[availablePassages]="s.availablePassages"
|
||||
[diagnostics]="store.diagnostics()"
|
||||
[caseContext]="caseContext"
|
||||
[canSubmit]="store.canSubmit()"
|
||||
[busy]="store.busy()"
|
||||
[canRevealBigNummer]="store.canRevealBigNummer()"
|
||||
(edit)="store.edit($event)"
|
||||
(submit)="store.submit()"
|
||||
(preview)="store.previewLetter()"
|
||||
(revealBigNummer)="store.revealBigNummer()"
|
||||
/>
|
||||
} @else {
|
||||
<!-- Approver / read-only: review + approve/reject/send. -->
|
||||
<app-letter-composer
|
||||
[brief]="s.brief"
|
||||
[orgTemplate]="orgTemplate"
|
||||
[logoUrl]="store.logoUrl()"
|
||||
[diagnostics]="store.diagnostics()"
|
||||
[blockDiffs]="store.blockDiffs()"
|
||||
[removedCount]="store.removedSinceReject()"
|
||||
[canApprove]="store.canApprove()"
|
||||
[canReject]="store.canReject()"
|
||||
[canSend]="store.canSend()"
|
||||
[busy]="store.busy()"
|
||||
(approve)="store.approve()"
|
||||
(reject)="store.reject($event)"
|
||||
(send)="store.send()"
|
||||
(preview)="store.previewLetter()"
|
||||
/>
|
||||
}
|
||||
}
|
||||
}
|
||||
</ng-template>
|
||||
</app-async>
|
||||
</app-page-shell>
|
||||
`,
|
||||
})
|
||||
export class BriefPage {
|
||||
protected store = inject(BriefStore);
|
||||
protected model = this.store.model;
|
||||
protected lastError = this.store.lastError;
|
||||
|
||||
protected heading = $localize`:@@brief.page.heading:Brief opstellen`;
|
||||
protected intro = $localize`:@@brief.page.intro:Stel de brief aan de zorgverlener samen uit standaardteksten en vrije tekst.`;
|
||||
protected failedText = $localize`:@@brief.page.failed:De brief kon niet worden geladen.`;
|
||||
protected retryText = $localize`:@@brief.page.retry:Opnieuw proberen`;
|
||||
protected resetLabel = $localize`:@@brief.page.reset:Opnieuw beginnen (demo)`;
|
||||
protected undoLabel = $localize`:@@brief.page.undo:Ongedaan maken`;
|
||||
protected redoLabel = $localize`:@@brief.page.redo:Opnieuw uitvoeren`;
|
||||
protected retrySaveLabel = $localize`:@@brief.page.retrySave:Opnieuw proberen`;
|
||||
|
||||
private savingText = $localize`:@@brief.page.saving:Concept opslaan…`;
|
||||
private savedText = $localize`:@@brief.page.saved:Concept opgeslagen`;
|
||||
private saveErrorText = $localize`:@@brief.page.saveError:Niet opgeslagen — opnieuw proberen`;
|
||||
|
||||
/** Debounced-save state, surfaced in a polite live region. */
|
||||
protected saveText = computed(() => {
|
||||
switch (this.store.saveState().tag) {
|
||||
case 'Saving':
|
||||
return this.savingText;
|
||||
case 'Saved':
|
||||
return this.savedText;
|
||||
case 'Error':
|
||||
return this.saveErrorText;
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
});
|
||||
|
||||
constructor() {
|
||||
void this.store.load();
|
||||
}
|
||||
|
||||
protected resetDemo() {
|
||||
void this.store.resetDemo();
|
||||
}
|
||||
|
||||
/** Typed narrowing for the `<app-async>` loaded slot — see WP-06: a structural
|
||||
directive's context can't inherit a generic from a sibling host input, so the
|
||||
Success value is unwrapped here instead of through `let-`. */
|
||||
protected readonly loaded = computed(() => {
|
||||
const s = this.model();
|
||||
return s.tag === 'loaded' ? s : undefined;
|
||||
});
|
||||
|
||||
protected reload() {
|
||||
void this.store.load();
|
||||
}
|
||||
|
||||
/** Ctrl/Cmd+Z = undo, Ctrl/Cmd+Shift+Z = redo (WP-27). Ignored while focus is in the
|
||||
rich-text editor or a form control, so the browser's own text undo keeps working
|
||||
there — our shell-level undo is for structural edits (add/remove/reorder blocks). */
|
||||
protected onKey(e: KeyboardEvent) {
|
||||
if (!(e.ctrlKey || e.metaKey) || e.key.toLowerCase() !== 'z' || !this.store.canEdit()) return;
|
||||
const t = e.target as HTMLElement | null;
|
||||
if (t && (t.isContentEditable || t.tagName === 'INPUT' || t.tagName === 'TEXTAREA')) return;
|
||||
e.preventDefault();
|
||||
if (e.shiftKey) this.store.redo();
|
||||
else this.store.undo();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
import { Component, computed, input, output } from '@angular/core';
|
||||
import { AlertComponent } from '@shared/ui/alert/alert.component';
|
||||
import { Diagnostic } from '@brief/domain/placeholders';
|
||||
|
||||
/** Molecule: lists all letter diagnostics grouped by severity. Errors block
|
||||
save/send; warnings (deprecated, unresolved-at-send) are surfaced but allowed.
|
||||
Fed by a `computed()` over the letter content — never stored. */
|
||||
@Component({
|
||||
selector: 'app-diagnostics-panel',
|
||||
imports: [AlertComponent],
|
||||
styles: [
|
||||
`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
padding-inline-start: 1.1rem;
|
||||
display: grid;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
button {
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
color: var(--rhc-color-foreground-link);
|
||||
cursor: pointer;
|
||||
text-align: start;
|
||||
text-decoration: underline;
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
@if (errors().length) {
|
||||
<app-alert type="error">
|
||||
<strong>{{ errorsTitle() }}</strong>
|
||||
<ul>
|
||||
@for (d of errors(); track $index) {
|
||||
<li>
|
||||
<button type="button" (click)="locate.emit(d)">{{ d.message }}</button>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</app-alert>
|
||||
}
|
||||
@if (warnings().length) {
|
||||
<app-alert type="warning">
|
||||
<strong>{{ warningsTitle() }}</strong>
|
||||
<ul>
|
||||
@for (d of warnings(); track $index) {
|
||||
<li>
|
||||
<button type="button" (click)="locate.emit(d)">{{ d.message }}</button>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</app-alert>
|
||||
}
|
||||
@if (!errors().length && !warnings().length) {
|
||||
<app-alert type="ok">{{ cleanText() }}</app-alert>
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class DiagnosticsPanelComponent {
|
||||
diagnostics = input<readonly Diagnostic[]>([]);
|
||||
locate = output<Diagnostic>();
|
||||
|
||||
errorsTitle = input($localize`:@@brief.diag.errors:Op te lossen voor indienen/versturen:`);
|
||||
warningsTitle = input($localize`:@@brief.diag.warnings:Aandachtspunten:`);
|
||||
cleanText = input($localize`:@@brief.diag.clean:Geen problemen gevonden in de velden.`);
|
||||
|
||||
protected errors = computed(() => this.diagnostics().filter((d) => d.severity === 'error'));
|
||||
protected warnings = computed(() => this.diagnostics().filter((d) => d.severity === 'warning'));
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { Diagnostic } from '@brief/domain/placeholders';
|
||||
import { DiagnosticsPanelComponent } from './diagnostics-panel.component';
|
||||
|
||||
const location = { blockId: 'local-2', paragraphIndex: 0, nodeIndex: 1 };
|
||||
|
||||
const errorAndWarning: Diagnostic[] = [
|
||||
{
|
||||
severity: 'error',
|
||||
code: 'unknown-placeholder',
|
||||
placeholderKey: 'onbekend_veld',
|
||||
location,
|
||||
message: 'Onbekend veld "onbekend_veld" — controleer de spelling.',
|
||||
},
|
||||
{
|
||||
severity: 'warning',
|
||||
code: 'unresolved-at-send',
|
||||
placeholderKey: 'reden_besluit',
|
||||
location,
|
||||
message: '"Reden besluit" is nog niet ingevuld.',
|
||||
},
|
||||
];
|
||||
|
||||
const meta: Meta<DiagnosticsPanelComponent> = {
|
||||
title: 'Domein/Brief/Diagnostics Panel',
|
||||
component: DiagnosticsPanelComponent,
|
||||
args: { locate: () => {} },
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<DiagnosticsPanelComponent>;
|
||||
|
||||
export const Findings: Story = { args: { diagnostics: errorAndWarning } };
|
||||
export const Clean: Story = { args: { diagnostics: [] } };
|
||||
@@ -0,0 +1,79 @@
|
||||
import { Component, computed, input, output } from '@angular/core';
|
||||
import { RichTextBlock } from '@shared/kernel/rich-text';
|
||||
import {
|
||||
RichTextEditorComponent,
|
||||
PlaceholderOption,
|
||||
} from '@shared/ui/rich-text-editor/rich-text-editor.component';
|
||||
import { ButtonComponent } from '@shared/ui/button/button.component';
|
||||
import { LetterBlock } from '@brief/domain/brief';
|
||||
|
||||
/** Molecule: one block in a section — its editor plus provenance + block controls.
|
||||
Presentational: emits content/remove/move events; the section maps them to messages. */
|
||||
@Component({
|
||||
selector: 'app-letter-block',
|
||||
imports: [RichTextEditorComponent, ButtonComponent],
|
||||
styles: [
|
||||
`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
.block {
|
||||
border-inline-start: var(--rhc-border-width-lg) solid var(--rhc-color-border-subtle);
|
||||
padding-inline-start: var(--rhc-space-max-md);
|
||||
}
|
||||
.meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--rhc-space-max-md);
|
||||
margin-block-end: var(--rhc-space-max-sm);
|
||||
}
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: var(--rhc-space-max-sm);
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
<div class="block">
|
||||
<div class="meta">
|
||||
<span class="app-text-subtle">{{ provenance() }}</span>
|
||||
@if (editable()) {
|
||||
<span class="controls">
|
||||
<app-button variant="subtle" (click)="moved.emit(-1)" i18n="@@brief.block.moveUp"
|
||||
>Omhoog</app-button
|
||||
>
|
||||
<app-button variant="subtle" (click)="moved.emit(1)" i18n="@@brief.block.moveDown"
|
||||
>Omlaag</app-button
|
||||
>
|
||||
<app-button variant="subtle" (click)="removed.emit()" i18n="@@brief.block.remove"
|
||||
>Verwijderen</app-button
|
||||
>
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
<app-rich-text-editor
|
||||
[content]="block().content"
|
||||
[placeholders]="placeholders()"
|
||||
[editable]="editable()"
|
||||
(contentChanged)="contentChanged.emit($event)"
|
||||
/>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class LetterBlockComponent {
|
||||
block = input.required<LetterBlock>();
|
||||
placeholders = input<readonly PlaceholderOption[]>([]);
|
||||
editable = input(false);
|
||||
contentChanged = output<RichTextBlock>();
|
||||
removed = output<void>();
|
||||
moved = output<-1 | 1>();
|
||||
|
||||
protected provenance = computed(() => {
|
||||
const b = this.block();
|
||||
if (b.type === 'freeText') return $localize`:@@brief.provenance.free:Vrije tekst`;
|
||||
return b.edited
|
||||
? $localize`:@@brief.provenance.edited:Aangepaste standaardtekst`
|
||||
: $localize`:@@brief.provenance.standard:Standaardtekst`;
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { LetterBlock } from '@brief/domain/brief';
|
||||
import { LetterBlockComponent } from './letter-block.component';
|
||||
|
||||
const passageBlock: LetterBlock = {
|
||||
type: 'passage',
|
||||
blockId: 'local-1',
|
||||
sourcePassageId: 'p1',
|
||||
sourceVersion: 1,
|
||||
edited: false,
|
||||
content: { paragraphs: [{ nodes: [{ type: 'text', text: 'Geachte heer/mevrouw,' }] }] },
|
||||
};
|
||||
|
||||
const freeTextBlock: LetterBlock = {
|
||||
type: 'freeText',
|
||||
blockId: 'local-2',
|
||||
content: {
|
||||
paragraphs: [
|
||||
{
|
||||
nodes: [
|
||||
{ type: 'text', text: 'Wij hebben besloten om reden ' },
|
||||
{ type: 'placeholder', key: 'reden_besluit' },
|
||||
{ type: 'text', text: '.' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const placeholders = [{ key: 'reden_besluit', label: 'Reden besluit' }];
|
||||
|
||||
const meta: Meta<LetterBlockComponent> = {
|
||||
title: 'Domein/Brief/Letter Block',
|
||||
component: LetterBlockComponent,
|
||||
args: {
|
||||
block: passageBlock,
|
||||
placeholders,
|
||||
contentChanged: () => {},
|
||||
removed: () => {},
|
||||
moved: () => {},
|
||||
},
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<LetterBlockComponent>;
|
||||
|
||||
export const ReadOnlyPassage: Story = { args: { editable: false } };
|
||||
export const EditableFreeText: Story = { args: { block: freeTextBlock, editable: true } };
|
||||
@@ -0,0 +1,463 @@
|
||||
import {
|
||||
Component,
|
||||
DestroyRef,
|
||||
ElementRef,
|
||||
computed,
|
||||
effect,
|
||||
inject,
|
||||
input,
|
||||
linkedSignal,
|
||||
output,
|
||||
signal,
|
||||
viewChild,
|
||||
} from '@angular/core';
|
||||
import { NgTemplateOutlet } from '@angular/common';
|
||||
import { ButtonComponent } from '@shared/ui/button/button.component';
|
||||
import { PlaceholderChipComponent } from '@shared/ui/placeholder-chip/placeholder-chip.component';
|
||||
import { formatDatumNl } from '@shared/kernel/datum';
|
||||
import { Paragraph } from '@shared/kernel/rich-text';
|
||||
import { Brief, LetterBlock } from '@brief/domain/brief';
|
||||
import { OrgTemplate } from '@brief/domain/org-template';
|
||||
import { OrgTemplateTextField } from '@brief/domain/org-template.machine';
|
||||
import { Diagnostic } from '@brief/domain/placeholders';
|
||||
import { BlockDiffKind } from '@brief/domain/brief-diff';
|
||||
|
||||
/** A run of consecutive lines to render together: a list (bullet/number) or a single plain line. */
|
||||
type PreviewSegment = {
|
||||
readonly list: 'bullet' | 'number' | null;
|
||||
readonly items: readonly Paragraph[];
|
||||
};
|
||||
|
||||
function groupParagraphs(paras: readonly Paragraph[]): PreviewSegment[] {
|
||||
const out: { list: 'bullet' | 'number' | null; items: Paragraph[] }[] = [];
|
||||
for (const para of paras) {
|
||||
const kind = para.list ?? null;
|
||||
const last = out[out.length - 1];
|
||||
if (kind && last && last.list === kind) last.items.push(para);
|
||||
else out.push({ list: kind, items: [para] });
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
// Illustrative values for the "Voorbeeld" toggle — what send resolves server-side.
|
||||
const SAMPLE_VALUES: Record<string, string> = {
|
||||
naam_zorgverlener: 'J. Jansen',
|
||||
big_nummer: '12345678901',
|
||||
};
|
||||
|
||||
/** A4 height in CSS px (1in = 96px = 25.4mm) — for the approximate page-break marks. */
|
||||
const A4_HEIGHT_PX = (297 * 96) / 25.4;
|
||||
|
||||
/** Organism: the letter as one surface — the org template's letterhead, signature and
|
||||
footer around the case-type template's sections. `editableRegions` picks who edits
|
||||
what: `'content'` hosts the editable letter-sections in place (drafter), `'none'`
|
||||
renders everything read-only (approver/locked, absorbs the old letter-preview),
|
||||
`'template'` reserves the org-identity regions for the admin editor (WP-26).
|
||||
Letter typography/geometry come from the shared `public/letter.css` contract —
|
||||
the same file the backend preview renderer inlines (WP-25). */
|
||||
@Component({
|
||||
selector: 'app-letter-canvas',
|
||||
imports: [NgTemplateOutlet, ButtonComponent, PlaceholderChipComponent],
|
||||
styles: [
|
||||
`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--rhc-space-max-sm);
|
||||
margin-block-end: var(--rhc-space-max-sm);
|
||||
}
|
||||
.zoom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--rhc-space-max-sm);
|
||||
}
|
||||
.zoom-pct {
|
||||
min-width: 3.5ch;
|
||||
text-align: center;
|
||||
color: var(--rhc-color-foreground-subtle);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
/* Rejection-diff badge (WP-27): a small pill above a changed/added block. */
|
||||
.diff-block.diff-changed {
|
||||
border-inline-start: 3px solid var(--rhc-color-oranje-500);
|
||||
padding-inline-start: var(--rhc-space-max-sm);
|
||||
}
|
||||
.diff-badge {
|
||||
display: inline-block;
|
||||
margin-block-end: 1mm;
|
||||
padding: 0 1.5mm;
|
||||
border-radius: var(--rhc-border-radius-sm);
|
||||
font-size: 7.5pt;
|
||||
/* changed = dark text on oranje-500 (4.79:1); white on oranje-500 fails (3.23:1). */
|
||||
color: var(--rhc-color-foreground-default);
|
||||
background: var(--rhc-color-oranje-500);
|
||||
}
|
||||
.diff-badge.added {
|
||||
/* added = white on groen-700 (6.4:1); dark text on any green fails 4.5:1 (WP-29 axe). */
|
||||
color: var(--rhc-color-wit);
|
||||
background: var(--rhc-color-groen-700);
|
||||
}
|
||||
/* Portal-side chrome around the letter surface (not part of the contract file). */
|
||||
.surface {
|
||||
background: var(--rhc-color-grijs-100);
|
||||
border: var(--rhc-border-width-sm) solid var(--rhc-color-border-default);
|
||||
border-radius: var(--rhc-border-radius-md);
|
||||
padding: var(--rhc-space-max-lg);
|
||||
overflow-x: auto;
|
||||
}
|
||||
.surface .letter {
|
||||
box-shadow: 0 1px 4px rgb(0 0 0 / 0.15); /* token-ok: paper drop-shadow, not a palette colour */
|
||||
}
|
||||
/* Admin edit-in-place (editableRegions='template'): the org-identity fields
|
||||
become controls styled to sit in the letter, with a visible editable affordance. */
|
||||
.tmpl-input,
|
||||
.tmpl-textarea {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: var(--rhc-color-geel-100);
|
||||
border: var(--rhc-border-width-sm) dashed var(--rhc-color-border-strong);
|
||||
border-radius: var(--rhc-border-radius-sm);
|
||||
padding: 0.5mm 1mm;
|
||||
}
|
||||
.tmpl-textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
.org-logo {
|
||||
max-height: 20mm;
|
||||
max-width: 60mm;
|
||||
margin-block-end: 3mm;
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
<ng-template #line let-nodes>
|
||||
@for (node of nodes; track $index) {
|
||||
@switch (node.type) {
|
||||
@case ('text') {
|
||||
<span>{{ node.text }}</span>
|
||||
}
|
||||
@case ('lineBreak') {
|
||||
<br />
|
||||
}
|
||||
@case ('placeholder') {
|
||||
@if (showSample() && autoFor(node.key)) {
|
||||
<span>{{ sampleFor(node.key) }}</span>
|
||||
} @else {
|
||||
<app-placeholder-chip
|
||||
[label]="labelFor(node.key)"
|
||||
[autoResolvable]="autoFor(node.key)"
|
||||
[state]="stateFor(node.key)"
|
||||
/>
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</ng-template>
|
||||
|
||||
@if (editableRegions() !== 'template') {
|
||||
<div class="toolbar">
|
||||
<div class="zoom" role="group" [attr.aria-label]="zoomGroupLabel()">
|
||||
<app-button
|
||||
variant="subtle"
|
||||
[disabled]="zoomLevel() <= 0.5"
|
||||
[attr.aria-label]="zoomOutLabel()"
|
||||
(click)="zoomBy(-0.1)"
|
||||
>−</app-button
|
||||
>
|
||||
<span class="zoom-pct">{{ zoomPct() }}</span>
|
||||
<app-button
|
||||
variant="subtle"
|
||||
[disabled]="zoomLevel() >= 1.5"
|
||||
[attr.aria-label]="zoomInLabel()"
|
||||
(click)="zoomBy(0.1)"
|
||||
>+</app-button
|
||||
>
|
||||
<app-button variant="subtle" (click)="zoomLevel.set(1)">{{
|
||||
zoomResetLabel()
|
||||
}}</app-button>
|
||||
</div>
|
||||
@if (editableRegions() === 'none') {
|
||||
<app-button
|
||||
variant="subtle"
|
||||
(click)="showSample.set(!showSample())"
|
||||
[attr.aria-pressed]="showSample()"
|
||||
>
|
||||
{{ showSample() ? hideSampleLabel() : showSampleLabel() }}
|
||||
</app-button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="surface">
|
||||
<div class="letter" #page [style]="marginStyle()" [style.zoom]="zoomLevel()">
|
||||
<!-- div, not <header>/<footer>: the CIBG huisstijl styles those bare elements
|
||||
(robijn footer background) — the letter surface must stay letter.css-only. -->
|
||||
<div class="letter__letterhead">
|
||||
@if (logoUrl()) {
|
||||
<img class="org-logo" [src]="logoUrl()" [alt]="logoAlt()" />
|
||||
}
|
||||
@if (editing()) {
|
||||
<input
|
||||
class="tmpl-input org-wordmark"
|
||||
[value]="orgTemplate().orgName"
|
||||
[attr.aria-label]="orgNameLabel()"
|
||||
(input)="emitEdit('orgName', $event)"
|
||||
/>
|
||||
<textarea
|
||||
class="tmpl-textarea return-address"
|
||||
rows="2"
|
||||
[value]="orgTemplate().returnAddress"
|
||||
[attr.aria-label]="returnAddressLabel()"
|
||||
(input)="emitEdit('returnAddress', $event)"
|
||||
></textarea>
|
||||
} @else {
|
||||
<p class="org-wordmark">{{ orgTemplate().orgName }}</p>
|
||||
<address class="return-address">{{ orgTemplate().returnAddress }}</address>
|
||||
}
|
||||
<address class="address-window">{{ recipientText() }}</address>
|
||||
<dl class="reference">
|
||||
<div>
|
||||
<dt>{{ referenceLabel() }}</dt>
|
||||
<dd>{{ brief().briefId }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>{{ dateLabel() }}</dt>
|
||||
<dd>{{ letterDate }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="letter__body">
|
||||
@for (section of brief().sections; track section.sectionKey) {
|
||||
<section>
|
||||
<h3>{{ section.title }}</h3>
|
||||
@for (block of section.blocks; track block.blockId) {
|
||||
@let diffKind = showDiff() ? blockDiffs().get(block.blockId) : undefined;
|
||||
<div class="diff-block" [class.diff-changed]="!!diffKind">
|
||||
@if (diffKind) {
|
||||
<span class="diff-badge" [class.added]="diffKind === 'added'">{{
|
||||
diffLabel(diffKind)
|
||||
}}</span>
|
||||
}
|
||||
@for (seg of segmentsOf(block); track $index) {
|
||||
@if (seg.list === 'bullet') {
|
||||
<ul>
|
||||
@for (para of seg.items; track $index) {
|
||||
<li>
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="line"
|
||||
[ngTemplateOutletContext]="{ $implicit: para.nodes }"
|
||||
/>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
} @else if (seg.list === 'number') {
|
||||
<ol>
|
||||
@for (para of seg.items; track $index) {
|
||||
<li>
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="line"
|
||||
[ngTemplateOutletContext]="{ $implicit: para.nodes }"
|
||||
/>
|
||||
</li>
|
||||
}
|
||||
</ol>
|
||||
} @else {
|
||||
<p>
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="line"
|
||||
[ngTemplateOutletContext]="{ $implicit: seg.items[0].nodes }"
|
||||
/>
|
||||
</p>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="letter__signature">
|
||||
@if (editing()) {
|
||||
<input
|
||||
class="tmpl-input"
|
||||
[value]="orgTemplate().signatureClosing"
|
||||
[attr.aria-label]="signatureClosingLabel()"
|
||||
(input)="emitEdit('signatureClosing', $event)"
|
||||
/>
|
||||
<input
|
||||
class="tmpl-input signature-name"
|
||||
[value]="orgTemplate().signatureName"
|
||||
[attr.aria-label]="signatureNameLabel()"
|
||||
(input)="emitEdit('signatureName', $event)"
|
||||
/>
|
||||
<input
|
||||
class="tmpl-input"
|
||||
[value]="orgTemplate().signatureRole"
|
||||
[attr.aria-label]="signatureRoleLabel()"
|
||||
(input)="emitEdit('signatureRole', $event)"
|
||||
/>
|
||||
} @else {
|
||||
<p>{{ orgTemplate().signatureClosing }}</p>
|
||||
<p class="signature-name">{{ orgTemplate().signatureName }}</p>
|
||||
<p>{{ orgTemplate().signatureRole }}</p>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="letter__footer">
|
||||
@if (editing()) {
|
||||
<textarea
|
||||
class="tmpl-textarea footer-contact"
|
||||
rows="2"
|
||||
[value]="orgTemplate().footerContact"
|
||||
[attr.aria-label]="footerContactLabel()"
|
||||
(input)="emitEdit('footerContact', $event)"
|
||||
></textarea>
|
||||
<input
|
||||
class="tmpl-input footer-legal"
|
||||
[value]="orgTemplate().footerLegal"
|
||||
[attr.aria-label]="footerLegalLabel()"
|
||||
(input)="emitEdit('footerLegal', $event)"
|
||||
/>
|
||||
} @else {
|
||||
<div class="footer-contact">{{ orgTemplate().footerContact }}</div>
|
||||
<div class="footer-legal">{{ orgTemplate().footerLegal }}</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@for (top of pageBreaks(); track $index) {
|
||||
<div class="letter__page-break" [style.top.px]="top" aria-hidden="true">
|
||||
<span>{{ pageBreakCaption() }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class LetterCanvasComponent {
|
||||
brief = input.required<Brief>();
|
||||
orgTemplate = input.required<OrgTemplate>();
|
||||
/** Who edits what on the surface: read-only ('none', the drafter preview + approver
|
||||
view) or admin editor ('template', WP-26). Authoring moved to letter-editor. */
|
||||
editableRegions = input<'template' | 'none'>('none');
|
||||
diagnostics = input<readonly Diagnostic[]>([]);
|
||||
/** Initial zoom; the in-canvas controls take over from here (WP-27). */
|
||||
zoom = input(1);
|
||||
/** Blocks changed/added/removed since the letter was rejected (WP-27); badged when
|
||||
`showDiff` is on. Removed blocks aren't in the map's rendered set — they no longer
|
||||
exist in the letter — the composer surfaces them as a count. */
|
||||
blockDiffs = input<ReadonlyMap<string, BlockDiffKind>>(new Map());
|
||||
showDiff = input(false);
|
||||
/** The org logo's content URL (letterhead), or null when none is set. */
|
||||
logoUrl = input<string | null>(null);
|
||||
/** An in-place edit to an org-identity field (only in `editableRegions='template'`). */
|
||||
templateEdit = output<{ field: OrgTemplateTextField; value: string }>();
|
||||
|
||||
showSampleLabel = input($localize`:@@brief.preview.showSample:Voorbeeld met testwaarden`);
|
||||
hideSampleLabel = input($localize`:@@brief.preview.hideSample:Testwaarden verbergen`);
|
||||
pageBreakCaption = input(
|
||||
$localize`:@@brief.canvas.pageBreak:±pagina-einde — afdrukvoorbeeld is leidend`,
|
||||
);
|
||||
recipientText = input(
|
||||
$localize`:@@brief.canvas.recipient:Adres van de geadresseerde\n(wordt ingevuld bij verzending)`,
|
||||
);
|
||||
referenceLabel = input($localize`:@@brief.canvas.reference:Ons kenmerk`);
|
||||
dateLabel = input($localize`:@@brief.canvas.date:Datum`);
|
||||
logoAlt = input($localize`:@@brief.canvas.logoAlt:Logo van de organisatie`);
|
||||
orgNameLabel = input($localize`:@@brief.canvas.orgName:Organisatienaam`);
|
||||
returnAddressLabel = input($localize`:@@brief.canvas.returnAddress:Retouradres`);
|
||||
signatureClosingLabel = input($localize`:@@brief.canvas.signatureClosing:Afsluiting`);
|
||||
signatureNameLabel = input($localize`:@@brief.canvas.signatureName:Naam ondertekenaar`);
|
||||
signatureRoleLabel = input($localize`:@@brief.canvas.signatureRole:Functie ondertekenaar`);
|
||||
footerContactLabel = input($localize`:@@brief.canvas.footerContact:Contactgegevens (voettekst)`);
|
||||
footerLegalLabel = input($localize`:@@brief.canvas.footerLegal:Juridische voettekst`);
|
||||
zoomGroupLabel = input($localize`:@@brief.canvas.zoom:Zoomniveau`);
|
||||
zoomInLabel = input($localize`:@@brief.canvas.zoomIn:Inzoomen`);
|
||||
zoomOutLabel = input($localize`:@@brief.canvas.zoomOut:Uitzoomen`);
|
||||
zoomResetLabel = input($localize`:@@brief.canvas.zoomReset:100%`);
|
||||
addedLabel = input($localize`:@@brief.diff.added:nieuw`);
|
||||
changedLabel = input($localize`:@@brief.diff.changed:gewijzigd sinds afwijzing`);
|
||||
|
||||
protected showSample = signal(false);
|
||||
protected letterDate = formatDatumNl(new Date());
|
||||
|
||||
/** Zoom seeded from the input; the +/−/reset controls drive it from there. */
|
||||
protected zoomLevel = linkedSignal(() => this.zoom());
|
||||
protected zoomPct = computed(() => `${Math.round(this.zoomLevel() * 100)}%`);
|
||||
protected zoomBy(delta: number) {
|
||||
// clamp 0.5–1.5; round to avoid float drift accumulating on repeated clicks.
|
||||
this.zoomLevel.update((z) => Math.round(Math.min(1.5, Math.max(0.5, z + delta)) * 10) / 10);
|
||||
}
|
||||
protected diffLabel = (kind: BlockDiffKind) =>
|
||||
kind === 'added' ? this.addedLabel() : this.changedLabel();
|
||||
|
||||
/** Admin edit-in-place: the org-identity regions render as controls. */
|
||||
protected editing = computed(() => this.editableRegions() === 'template');
|
||||
|
||||
protected emitEdit(field: OrgTemplateTextField, event: Event) {
|
||||
this.templateEdit.emit({
|
||||
field,
|
||||
value: (event.target as HTMLInputElement | HTMLTextAreaElement).value,
|
||||
});
|
||||
}
|
||||
|
||||
protected marginStyle = computed(() => {
|
||||
const m = this.orgTemplate().margins;
|
||||
return {
|
||||
'--letter-margin-top': `${m.topMm}mm`,
|
||||
'--letter-margin-right': `${m.rightMm}mm`,
|
||||
'--letter-margin-bottom': `${m.bottomMm}mm`,
|
||||
'--letter-margin-left': `${m.leftMm}mm`,
|
||||
};
|
||||
});
|
||||
|
||||
// --- read-only rendering helpers (migrated from the superseded letter-preview) ---
|
||||
|
||||
private defs = computed(() => new Map(this.brief().placeholders.map((p) => [p.key, p])));
|
||||
private worst = computed(() => {
|
||||
const m = new Map<string, 'error' | 'warning'>();
|
||||
for (const d of this.diagnostics()) {
|
||||
if (!d.placeholderKey) continue;
|
||||
if (d.severity === 'error') m.set(d.placeholderKey, 'error');
|
||||
else if (!m.has(d.placeholderKey)) m.set(d.placeholderKey, 'warning');
|
||||
}
|
||||
return m;
|
||||
});
|
||||
|
||||
protected segmentsOf = (block: LetterBlock) => groupParagraphs(block.content.paragraphs);
|
||||
protected labelFor = (key: string) => this.defs().get(key)?.label ?? key;
|
||||
protected autoFor = (key: string) => this.defs().get(key)?.autoResolvable ?? false;
|
||||
protected stateFor = (key: string): 'ok' | 'warning' | 'error' => this.worst().get(key) ?? 'ok';
|
||||
protected sampleFor = (key: string) =>
|
||||
SAMPLE_VALUES[key] ?? (key === 'datum' ? this.letterDate : this.labelFor(key));
|
||||
|
||||
// --- approximate page-break marks (PRD §2b: honest "±", print preview is leading) ---
|
||||
|
||||
private page = viewChild<ElementRef<HTMLElement>>('page');
|
||||
protected pageBreaks = signal<readonly number[]>([]);
|
||||
|
||||
constructor() {
|
||||
// ponytail: whole-surface height / A4-interval — ignores that a break never truly
|
||||
// falls mid-line; the caption says "±" and WP-25's server preview is authoritative.
|
||||
const observer = new ResizeObserver(([entry]) => {
|
||||
// ~1cm tolerance so a letter ending on a page boundary gets no edge-hugging mark.
|
||||
const pages = Math.ceil((entry.target.scrollHeight - 40) / A4_HEIGHT_PX);
|
||||
this.pageBreaks.set(
|
||||
Array.from({ length: Math.max(0, pages - 1) }, (_, i) => (i + 1) * A4_HEIGHT_PX),
|
||||
);
|
||||
});
|
||||
effect((onCleanup) => {
|
||||
const el = this.page()?.nativeElement;
|
||||
if (!el) return;
|
||||
observer.observe(el);
|
||||
onCleanup(() => observer.unobserve(el));
|
||||
});
|
||||
inject(DestroyRef).onDestroy(() => observer.disconnect());
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { Brief, allDiagnostics } from '@brief/domain/brief';
|
||||
import { OrgTemplate } from '@brief/domain/org-template';
|
||||
import { LetterCanvasComponent } from './letter-canvas.component';
|
||||
|
||||
const orgTemplate: OrgTemplate = {
|
||||
subOrgId: 'cibg-registers',
|
||||
orgName: 'CIBG — Registers',
|
||||
returnAddress: 'BIG-register\nPostbus 00000\n2500 AA Den Haag',
|
||||
footerContact: 'www.bigregister.nl\ninfo@voorbeeld.example\n070 000 00 00',
|
||||
footerLegal: 'Ons kenmerk vermelden bij correspondentie.',
|
||||
signatureName: 'A. de Vries',
|
||||
signatureRole: 'Hoofd Registratie',
|
||||
signatureClosing: 'Met vriendelijke groet,',
|
||||
margins: { topMm: 25, rightMm: 25, bottomMm: 25, leftMm: 25 },
|
||||
version: 1,
|
||||
};
|
||||
|
||||
const brief: Brief = {
|
||||
briefId: 'b1',
|
||||
beroep: 'arts',
|
||||
templateId: 't1',
|
||||
drafterId: 'demo-drafter',
|
||||
status: { tag: 'draft' },
|
||||
placeholders: [
|
||||
{ key: 'naam_zorgverlener', label: 'Naam zorgverlener', autoResolvable: true },
|
||||
{ key: 'reden_besluit', label: 'Reden besluit', autoResolvable: false },
|
||||
],
|
||||
sections: [
|
||||
{
|
||||
sectionKey: 'aanhef',
|
||||
title: 'Aanhef',
|
||||
required: true,
|
||||
locked: true,
|
||||
blocks: [
|
||||
{
|
||||
type: 'passage',
|
||||
blockId: 'local-1',
|
||||
sourcePassageId: 'p1',
|
||||
sourceVersion: 1,
|
||||
edited: false,
|
||||
content: {
|
||||
paragraphs: [
|
||||
{
|
||||
nodes: [
|
||||
{ type: 'text', text: 'Geachte heer/mevrouw ' },
|
||||
{ type: 'placeholder', key: 'naam_zorgverlener' },
|
||||
{ type: 'text', text: ',' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
sectionKey: 'kern',
|
||||
title: 'Kern van het besluit',
|
||||
required: true,
|
||||
locked: false,
|
||||
blocks: [
|
||||
{
|
||||
type: 'freeText',
|
||||
blockId: 'local-2',
|
||||
content: {
|
||||
paragraphs: [
|
||||
{
|
||||
nodes: [
|
||||
{ type: 'text', text: 'Wij hebben besloten om reden ' },
|
||||
{ type: 'placeholder', key: 'reden_besluit' },
|
||||
{ type: 'text', text: '.' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
/** Enough repeated body text to push the surface past one A4 page. */
|
||||
const longBrief: Brief = {
|
||||
...brief,
|
||||
sections: brief.sections.map((s) =>
|
||||
s.sectionKey === 'kern'
|
||||
? {
|
||||
...s,
|
||||
blocks: [
|
||||
{
|
||||
type: 'freeText',
|
||||
blockId: 'local-long',
|
||||
content: {
|
||||
paragraphs: Array.from({ length: 40 }, (_, i) => ({
|
||||
nodes: [
|
||||
{
|
||||
type: 'text' as const,
|
||||
text: `Alinea ${i + 1}: de beoordeling van uw aanvraag is uitgevoerd volgens de geldende regels voor herregistratie in het BIG-register.`,
|
||||
},
|
||||
],
|
||||
})),
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
: s,
|
||||
),
|
||||
};
|
||||
|
||||
const meta: Meta<LetterCanvasComponent> = {
|
||||
title: 'Domein/Brief/Letter Canvas',
|
||||
component: LetterCanvasComponent,
|
||||
args: {
|
||||
brief,
|
||||
orgTemplate,
|
||||
diagnostics: allDiagnostics(brief),
|
||||
},
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<LetterCanvasComponent>;
|
||||
|
||||
/** Read-only rendered letter: the drafter's preview modal and the approver view, with the
|
||||
sample-values toggle and diagnostic placeholder chips (absorbs the old Letter Preview). */
|
||||
export const ReadOnly: Story = { args: { editableRegions: 'none' } };
|
||||
|
||||
export const ReadOnlyZonderBevindingen: Story = {
|
||||
args: { editableRegions: 'none', diagnostics: [] },
|
||||
};
|
||||
|
||||
/** Admin editor focus (consumer arrives in WP-26): body read-only, no "not yours" tint. */
|
||||
export const TemplateMode: Story = { args: { editableRegions: 'template' } };
|
||||
|
||||
export const Zoomed: Story = { args: { editableRegions: 'none', zoom: 0.6 } };
|
||||
|
||||
/** Approver's "Toon wijzigingen": blocks changed/added since rejection are badged (WP-27). */
|
||||
export const WithDiff: Story = {
|
||||
args: {
|
||||
editableRegions: 'none',
|
||||
diagnostics: [],
|
||||
showDiff: true,
|
||||
blockDiffs: new Map([
|
||||
['local-1', 'added'],
|
||||
['local-2', 'changed'],
|
||||
]),
|
||||
},
|
||||
};
|
||||
|
||||
/** Long letter: the approximate ±page-break marks appear per A4 interval. */
|
||||
export const PageBreak: Story = {
|
||||
args: { editableRegions: 'none', brief: longBrief, diagnostics: [] },
|
||||
};
|
||||
|
||||
// Inline SVG so the story needs no backend/upload round-trip (WP-26 logo upload).
|
||||
const sampleLogo =
|
||||
'data:image/svg+xml;utf8,' +
|
||||
encodeURIComponent(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40"><rect width="120" height="40" fill="#003366"/><text x="60" y="25" font-size="14" fill="white" text-anchor="middle">CIBG</text></svg>',
|
||||
);
|
||||
|
||||
/** Published org logo (WP-26 AC2): the letterhead shows it above the org name. */
|
||||
export const MetLogo: Story = {
|
||||
args: { editableRegions: 'none', diagnostics: [], logoUrl: sampleLogo },
|
||||
};
|
||||
@@ -0,0 +1,210 @@
|
||||
import { Component, computed, input, output, signal } from '@angular/core';
|
||||
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 { AlertComponent } from '@shared/ui/alert/alert.component';
|
||||
import { Brief } from '@brief/domain/brief';
|
||||
import { OrgTemplate } from '@brief/domain/org-template';
|
||||
import { Diagnostic } from '@brief/domain/placeholders';
|
||||
import { BlockDiffKind } from '@brief/domain/brief-diff';
|
||||
import { LetterCanvasComponent } from '@brief/ui/letter-canvas/letter-canvas.component';
|
||||
import { DiagnosticsPanelComponent } from '@brief/ui/diagnostics-panel/diagnostics-panel.component';
|
||||
import { RejectionCommentsComponent } from '@brief/ui/rejection-comments/rejection-comments.component';
|
||||
|
||||
/** Organism: the whole letter flow — status badge, the letter canvas (editable in
|
||||
place for the drafter, read-only for approver/locked), the diagnostics panel, and
|
||||
the action bar appropriate to status × permission. Presentational: emits edit +
|
||||
transition intents; the canEdit/canApprove/canReject/canSend inputs are
|
||||
server-computed decision flags (PRD-0002 phase P1) — this component never derives them. */
|
||||
@Component({
|
||||
selector: 'app-letter-composer',
|
||||
imports: [
|
||||
HeadingComponent,
|
||||
StatusBadgeComponent,
|
||||
ButtonComponent,
|
||||
AlertComponent,
|
||||
LetterCanvasComponent,
|
||||
DiagnosticsPanelComponent,
|
||||
RejectionCommentsComponent,
|
||||
],
|
||||
styles: [
|
||||
`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--rhc-space-max-md);
|
||||
flex-wrap: wrap;
|
||||
margin-block-end: var(--rhc-space-max-lg);
|
||||
}
|
||||
.head-end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--rhc-space-max-md);
|
||||
}
|
||||
.panel {
|
||||
margin-block: var(--rhc-space-max-xl);
|
||||
}
|
||||
.bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--rhc-space-max-md);
|
||||
align-items: center;
|
||||
margin-block-start: var(--rhc-space-max-xl);
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
<div class="head">
|
||||
<app-heading [level]="2">{{ title() }}</app-heading>
|
||||
<div class="head-end">
|
||||
@if (hasRejectionDiff()) {
|
||||
<app-button
|
||||
variant="subtle"
|
||||
[attr.aria-pressed]="showDiff()"
|
||||
(click)="showDiff.set(!showDiff())"
|
||||
>{{ showDiff() ? hideDiffLabel() : showDiffLabel() }}</app-button
|
||||
>
|
||||
}
|
||||
<app-button variant="subtle" [disabled]="busy()" (click)="preview.emit()">{{
|
||||
previewLabel()
|
||||
}}</app-button>
|
||||
<app-status-badge [label]="statusLabel()" [color]="statusColor()" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (status() === 'rejected') {
|
||||
<app-rejection-comments mode="show" [comments]="rejectComments()" />
|
||||
}
|
||||
|
||||
@if (pureViewer()) {
|
||||
<app-alert type="info">{{ readonlyNotice() }}</app-alert>
|
||||
}
|
||||
|
||||
@if (showDiff() && removedCount() > 0) {
|
||||
<app-alert type="info">{{ removedText() }}</app-alert>
|
||||
}
|
||||
|
||||
<app-letter-canvas
|
||||
[brief]="brief()"
|
||||
[orgTemplate]="orgTemplate()"
|
||||
[logoUrl]="logoUrl()"
|
||||
[editableRegions]="'none'"
|
||||
[diagnostics]="diagnostics()"
|
||||
[blockDiffs]="blockDiffs()"
|
||||
[showDiff]="showDiff()"
|
||||
/>
|
||||
|
||||
<div class="panel">
|
||||
<app-diagnostics-panel [diagnostics]="diagnostics()" (locate)="locate.emit($event)" />
|
||||
</div>
|
||||
|
||||
<div class="bar">
|
||||
@switch (status()) {
|
||||
@case ('submitted') {
|
||||
@if (canApprove() || canReject()) {
|
||||
<app-button variant="primary" [disabled]="busy()" (click)="approve.emit()">{{
|
||||
approveLabel()
|
||||
}}</app-button>
|
||||
<app-rejection-comments mode="entry" [busy]="busy()" (reject)="reject.emit($event)" />
|
||||
} @else {
|
||||
<app-alert type="info">{{ awaitingText() }}</app-alert>
|
||||
}
|
||||
}
|
||||
@case ('approved') {
|
||||
@if (canSend()) {
|
||||
<app-button variant="primary" [disabled]="busy()" (click)="send.emit()">{{
|
||||
sendLabel()
|
||||
}}</app-button>
|
||||
}
|
||||
}
|
||||
@case ('sent') {
|
||||
<app-alert type="ok">{{ sentText() }}</app-alert>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class LetterComposerComponent {
|
||||
brief = input.required<Brief>();
|
||||
orgTemplate = input.required<OrgTemplate>();
|
||||
logoUrl = input<string | null>(null);
|
||||
diagnostics = input<readonly Diagnostic[]>([]);
|
||||
canApprove = input(false);
|
||||
canReject = input(false);
|
||||
canSend = input(false);
|
||||
busy = input(false);
|
||||
/** Rejection diff (WP-27): the changed/added/removed blocks and their count. The
|
||||
"Toon wijzigingen" toggle only appears when there's something to show. */
|
||||
blockDiffs = input<ReadonlyMap<string, BlockDiffKind>>(new Map());
|
||||
removedCount = input(0);
|
||||
protected hasRejectionDiff = computed(() => this.blockDiffs().size > 0);
|
||||
protected showDiff = signal(false);
|
||||
|
||||
approve = output<void>();
|
||||
reject = output<string>();
|
||||
send = output<void>();
|
||||
preview = output<void>();
|
||||
locate = output<Diagnostic>();
|
||||
|
||||
title = input($localize`:@@brief.title:Brief aan de zorgverlener`);
|
||||
previewLabel = input($localize`:@@brief.preview.open:Voorbeeld`);
|
||||
showDiffLabel = input($localize`:@@brief.diff.show:Toon wijzigingen`);
|
||||
hideDiffLabel = input($localize`:@@brief.diff.hide:Verberg wijzigingen`);
|
||||
removedText = computed(
|
||||
() =>
|
||||
$localize`:@@brief.diff.removed:${this.removedCount()}:count: blok(ken) verwijderd sinds afwijzing.`,
|
||||
);
|
||||
approveLabel = input($localize`:@@brief.approve:Goedkeuren`);
|
||||
sendLabel = input($localize`:@@brief.send:Versturen`);
|
||||
awaitingText = input(
|
||||
$localize`:@@brief.awaiting:De brief wacht op beoordeling door een collega.`,
|
||||
);
|
||||
sentText = input($localize`:@@brief.sent:De brief is verzonden.`);
|
||||
|
||||
protected status = computed(() => this.brief().status.tag);
|
||||
|
||||
/** A pure viewer has no action on this letter (not the behandelaar, not an approver with
|
||||
approve/reject/send) — e.g. an admin. Show a notice so the read-only letter isn't
|
||||
mistaken for a broken editor. */
|
||||
protected pureViewer = computed(() => !this.canApprove() && !this.canReject() && !this.canSend());
|
||||
readonlyNotice = input(
|
||||
$localize`:@@brief.readonlyNotice:Alleen-lezen weergave. De behandelaar stelt de brief op.`,
|
||||
);
|
||||
protected rejectComments = computed(() => {
|
||||
const s = this.brief().status;
|
||||
return s.tag === 'rejected' ? s.comments : '';
|
||||
});
|
||||
|
||||
protected statusLabel = computed(() => {
|
||||
switch (this.status()) {
|
||||
case 'draft':
|
||||
return $localize`:@@brief.status.draft:Concept`;
|
||||
case 'submitted':
|
||||
return $localize`:@@brief.status.submitted:Ter beoordeling`;
|
||||
case 'approved':
|
||||
return $localize`:@@brief.status.approved:Goedgekeurd`;
|
||||
case 'rejected':
|
||||
return $localize`:@@brief.status.rejected:Afgewezen`;
|
||||
case 'sent':
|
||||
return $localize`:@@brief.status.sent:Verzonden`;
|
||||
}
|
||||
});
|
||||
|
||||
protected statusColor = computed(() => {
|
||||
switch (this.status()) {
|
||||
case 'draft':
|
||||
return 'var(--rhc-color-border-strong)';
|
||||
case 'submitted':
|
||||
return 'var(--rhc-color-oranje-500)';
|
||||
case 'approved':
|
||||
case 'sent':
|
||||
return 'var(--rhc-color-groen-500)';
|
||||
case 'rejected':
|
||||
return 'var(--rhc-color-rood-500)';
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { LetterComposerComponent } from './letter-composer.component';
|
||||
import { Brief, BriefDecisions, BriefStatus, LibraryPassage } from '@brief/domain/brief';
|
||||
import { allDiagnostics } from '@brief/domain/brief';
|
||||
import { OrgTemplate } from '@brief/domain/org-template';
|
||||
import { BlockDiffKind } from '@brief/domain/brief-diff';
|
||||
|
||||
const orgTemplate: OrgTemplate = {
|
||||
subOrgId: 'cibg-registers',
|
||||
orgName: 'CIBG — Registers',
|
||||
returnAddress: 'BIG-register\nPostbus 00000\n2500 AA Den Haag',
|
||||
footerContact: 'www.bigregister.nl\ninfo@voorbeeld.example',
|
||||
footerLegal: 'Ons kenmerk vermelden bij correspondentie.',
|
||||
signatureName: 'A. de Vries',
|
||||
signatureRole: 'Hoofd Registratie',
|
||||
signatureClosing: 'Met vriendelijke groet,',
|
||||
margins: { topMm: 25, rightMm: 25, bottomMm: 25, leftMm: 25 },
|
||||
version: 1,
|
||||
};
|
||||
|
||||
const passages: LibraryPassage[] = [
|
||||
{
|
||||
passageId: 'p1',
|
||||
scope: 'global',
|
||||
sectionKey: 'aanhef',
|
||||
label: 'Standaard aanhef',
|
||||
version: 1,
|
||||
content: {
|
||||
paragraphs: [
|
||||
{
|
||||
nodes: [
|
||||
{ type: 'text', text: 'Geachte heer/mevrouw ' },
|
||||
{ type: 'placeholder', key: 'naam_zorgverlener' },
|
||||
{ type: 'text', text: ',' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
passageId: 'p2',
|
||||
scope: 'beroep',
|
||||
beroep: 'arts',
|
||||
sectionKey: 'kern',
|
||||
label: 'Toelichting arts',
|
||||
version: 1,
|
||||
content: { paragraphs: [{ nodes: [{ type: 'text', text: 'Als arts ...' }] }] },
|
||||
},
|
||||
];
|
||||
|
||||
function brief(status: BriefStatus): Brief {
|
||||
return {
|
||||
briefId: 'b1',
|
||||
beroep: 'arts',
|
||||
templateId: 't1',
|
||||
drafterId: 'demo-drafter',
|
||||
status,
|
||||
placeholders: [
|
||||
{ key: 'naam_zorgverlener', label: 'Naam zorgverlener', autoResolvable: true },
|
||||
{ key: 'reden_besluit', label: 'Reden besluit', autoResolvable: false },
|
||||
],
|
||||
sections: [
|
||||
{
|
||||
sectionKey: 'aanhef',
|
||||
title: 'Aanhef',
|
||||
required: true,
|
||||
locked: true,
|
||||
blocks: [
|
||||
{
|
||||
type: 'passage',
|
||||
blockId: 'local-1',
|
||||
sourcePassageId: 'p1',
|
||||
sourceVersion: 1,
|
||||
edited: false,
|
||||
content: passages[0].content,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
sectionKey: 'kern',
|
||||
title: 'Kern van het besluit',
|
||||
required: true,
|
||||
locked: false,
|
||||
blocks: [
|
||||
{
|
||||
type: 'freeText',
|
||||
blockId: 'local-2',
|
||||
content: {
|
||||
paragraphs: [
|
||||
{
|
||||
nodes: [
|
||||
{ type: 'text', text: 'Wij hebben besloten om reden ' },
|
||||
{ type: 'placeholder', key: 'reden_besluit' },
|
||||
{ type: 'text', text: '.' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
sectionKey: 'slot',
|
||||
title: 'Slot',
|
||||
required: false,
|
||||
locked: true,
|
||||
blocks: [
|
||||
{
|
||||
type: 'freeText',
|
||||
blockId: 'local-3',
|
||||
content: {
|
||||
paragraphs: [{ nodes: [{ type: 'text', text: 'Met vriendelijke groet,' }] }],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
const render = (
|
||||
b: Brief,
|
||||
decisions: BriefDecisions,
|
||||
extra: {
|
||||
blockDiffs?: ReadonlyMap<string, BlockDiffKind>;
|
||||
removedCount?: number;
|
||||
logoUrl?: string | null;
|
||||
} = {},
|
||||
) => ({
|
||||
props: {
|
||||
brief: b,
|
||||
orgTemplate,
|
||||
diagnostics: allDiagnostics(b),
|
||||
...decisions,
|
||||
busy: false,
|
||||
blockDiffs: extra.blockDiffs ?? new Map<string, BlockDiffKind>(),
|
||||
removedCount: extra.removedCount ?? 0,
|
||||
logoUrl: extra.logoUrl ?? null,
|
||||
},
|
||||
template: `<app-letter-composer [brief]="brief" [orgTemplate]="orgTemplate" [logoUrl]="logoUrl"
|
||||
[diagnostics]="diagnostics" [canApprove]="canApprove" [canReject]="canReject"
|
||||
[canSend]="canSend" [busy]="busy" [blockDiffs]="blockDiffs"
|
||||
[removedCount]="removedCount"></app-letter-composer>`,
|
||||
});
|
||||
|
||||
const meta: Meta<LetterComposerComponent> = {
|
||||
title: 'Domein/Brief/Letter Composer',
|
||||
component: LetterComposerComponent,
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<LetterComposerComponent>;
|
||||
|
||||
export const SubmittedApprover: Story = {
|
||||
render: () =>
|
||||
render(brief({ tag: 'submitted', submittedBy: 'demo-drafter', submittedAt: '2026-07-01' }), {
|
||||
canEdit: false,
|
||||
canApprove: true,
|
||||
canReject: true,
|
||||
canSend: false,
|
||||
canRevealBigNummer: false,
|
||||
}),
|
||||
};
|
||||
export const ApprovedSender: Story = {
|
||||
render: () =>
|
||||
render(brief({ tag: 'approved', approvedBy: 'demo-approver', approvedAt: '2026-07-01' }), {
|
||||
canEdit: false,
|
||||
canApprove: false,
|
||||
canReject: false,
|
||||
canSend: true,
|
||||
canRevealBigNummer: false,
|
||||
}),
|
||||
};
|
||||
export const Sent: Story = {
|
||||
render: () =>
|
||||
render(brief({ tag: 'sent', sentAt: '2026-07-01' }), {
|
||||
canEdit: false,
|
||||
canApprove: false,
|
||||
canReject: false,
|
||||
canSend: false,
|
||||
canRevealBigNummer: false,
|
||||
}),
|
||||
};
|
||||
|
||||
/** Approver's "Toon wijzigingen" (WP-27): a resubmitted letter with blocks changed,
|
||||
added and removed since the last rejection. */
|
||||
export const RejectionDiff: Story = {
|
||||
render: () =>
|
||||
render(
|
||||
brief({
|
||||
tag: 'submitted',
|
||||
submittedBy: 'demo-drafter',
|
||||
submittedAt: '2026-07-02',
|
||||
}),
|
||||
{
|
||||
canEdit: false,
|
||||
canApprove: true,
|
||||
canReject: true,
|
||||
canSend: false,
|
||||
canRevealBigNummer: false,
|
||||
},
|
||||
{
|
||||
blockDiffs: new Map<string, BlockDiffKind>([
|
||||
['local-2', 'changed'],
|
||||
['local-3', 'added'],
|
||||
]),
|
||||
removedCount: 1,
|
||||
},
|
||||
),
|
||||
};
|
||||
|
||||
/** A pure viewer (e.g. admin) has no approve/reject/send capability on this letter —
|
||||
the read-only notice, not a broken-looking editor. */
|
||||
export const AlleenLezen: Story = {
|
||||
render: () =>
|
||||
render(brief({ tag: 'submitted', submittedBy: 'demo-drafter', submittedAt: '2026-07-01' }), {
|
||||
canEdit: false,
|
||||
canApprove: false,
|
||||
canReject: false,
|
||||
canSend: false,
|
||||
canRevealBigNummer: false,
|
||||
}),
|
||||
};
|
||||
@@ -0,0 +1,40 @@
|
||||
import { Component, computed, input, output } from '@angular/core';
|
||||
import { PlaceholderOption } from '@shared/ui/rich-text-editor/rich-text-editor.component';
|
||||
import { Brief } from '@brief/domain/brief';
|
||||
import { BriefMsg } from '@brief/domain/brief.machine';
|
||||
import { LetterSectionComponent } from '@brief/ui/letter-section/letter-section.component';
|
||||
|
||||
/** Organism: the lean authoring surface — just the editable letter sections and their
|
||||
add/edit controls, no letterhead/signature/footer/zoom. The full rendered letter
|
||||
(including the locked aanhef/slot) lives in the preview modal (see behandel-scherm),
|
||||
so the drafter stays focused on composing the body they actually own. */
|
||||
@Component({
|
||||
selector: 'app-letter-editor',
|
||||
imports: [LetterSectionComponent],
|
||||
styles: [
|
||||
`
|
||||
:host {
|
||||
display: grid;
|
||||
gap: var(--rhc-space-max-xl);
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
@for (section of editableSections(); track section.sectionKey) {
|
||||
<app-letter-section
|
||||
[section]="section"
|
||||
[placeholders]="placeholders()"
|
||||
[editable]="true"
|
||||
(edit)="edit.emit($event)"
|
||||
/>
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class LetterEditorComponent {
|
||||
brief = input.required<Brief>();
|
||||
placeholders = input<readonly PlaceholderOption[]>([]);
|
||||
edit = output<BriefMsg>();
|
||||
|
||||
/** Only unlocked sections are authored here; locked aanhef/slot appear in the preview. */
|
||||
protected editableSections = computed(() => this.brief().sections.filter((s) => !s.locked));
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { Brief } from '@brief/domain/brief';
|
||||
import { LetterEditorComponent } from './letter-editor.component';
|
||||
|
||||
const brief: Brief = {
|
||||
briefId: 'b1',
|
||||
beroep: 'arts',
|
||||
templateId: 't1',
|
||||
drafterId: 'demo-drafter',
|
||||
status: { tag: 'draft' },
|
||||
placeholders: [{ key: 'reden_besluit', label: 'Reden besluit', autoResolvable: false }],
|
||||
sections: [
|
||||
{
|
||||
sectionKey: 'aanhef',
|
||||
title: 'Aanhef',
|
||||
required: true,
|
||||
locked: true,
|
||||
blocks: [
|
||||
{
|
||||
type: 'freeText',
|
||||
blockId: 'aanhef-1',
|
||||
content: { paragraphs: [{ nodes: [{ type: 'text', text: 'Geachte heer/mevrouw,' }] }] },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
sectionKey: 'kern',
|
||||
title: 'Kern van het besluit',
|
||||
required: true,
|
||||
locked: false,
|
||||
blocks: [
|
||||
{
|
||||
type: 'freeText',
|
||||
blockId: 'kern-1',
|
||||
content: { paragraphs: [{ nodes: [{ type: 'text', text: 'Wij hebben besloten...' }] }] },
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const meta: Meta<LetterEditorComponent> = {
|
||||
title: 'Domein/Brief/Letter Editor',
|
||||
component: LetterEditorComponent,
|
||||
args: { brief, placeholders: [] },
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<LetterEditorComponent>;
|
||||
|
||||
/** The lean authoring surface: only the editable sections (the kern); the locked
|
||||
aanhef/slot are hidden here and appear only in the preview. */
|
||||
export const Default: Story = {};
|
||||
|
||||
/** Empty kern: shows the empty-state hint plus the free-text action, no starter content. */
|
||||
export const EmptyKern: Story = {
|
||||
args: {
|
||||
brief: {
|
||||
...brief,
|
||||
sections: brief.sections.map((s) => (s.sectionKey === 'kern' ? { ...s, blocks: [] } : s)),
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,93 @@
|
||||
import { Component, input, output } from '@angular/core';
|
||||
import { RichTextBlock } from '@shared/kernel/rich-text';
|
||||
import { PlaceholderOption } from '@shared/ui/rich-text-editor/rich-text-editor.component';
|
||||
import { ButtonComponent } from '@shared/ui/button/button.component';
|
||||
import { HeadingComponent } from '@shared/ui/heading/heading.component';
|
||||
import { LetterSection } from '@brief/domain/brief';
|
||||
import { BriefMsg } from '@brief/domain/brief.machine';
|
||||
import { LetterBlockComponent } from '@brief/ui/letter-block/letter-block.component';
|
||||
|
||||
/** Organism: one template section — its ordered blocks plus (when editable) the
|
||||
add-free-text action. Standaardteksten enter the kern via the besluit panel, not a
|
||||
per-section picker, so this only offers free text. Maps child events to `BriefMsg`s;
|
||||
sections themselves can never be added/removed/reordered (no message exists for it). */
|
||||
@Component({
|
||||
selector: 'app-letter-section',
|
||||
imports: [ButtonComponent, HeadingComponent, LetterBlockComponent],
|
||||
styles: [
|
||||
`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
.blocks {
|
||||
display: grid;
|
||||
gap: var(--rhc-space-max-lg);
|
||||
margin-block: var(--rhc-space-max-md);
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--rhc-space-max-sm);
|
||||
}
|
||||
.required {
|
||||
color: var(--rhc-color-foreground-subtle);
|
||||
}
|
||||
.empty {
|
||||
color: var(--rhc-color-foreground-subtle);
|
||||
font-style: italic;
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
<app-heading [level]="3">
|
||||
{{ section().title }}
|
||||
@if (section().required) {
|
||||
<span class="required">· {{ requiredLabel() }}</span>
|
||||
}
|
||||
</app-heading>
|
||||
|
||||
<div class="blocks">
|
||||
@for (block of section().blocks; track block.blockId) {
|
||||
<app-letter-block
|
||||
[block]="block"
|
||||
[placeholders]="placeholders()"
|
||||
[editable]="editable()"
|
||||
(contentChanged)="onContent(block.blockId, $event)"
|
||||
(removed)="edit.emit({ tag: 'BlockRemoved', blockId: block.blockId })"
|
||||
(moved)="onMove(block.blockId, $event)"
|
||||
/>
|
||||
} @empty {
|
||||
<p class="empty">{{ emptyLabel() }}</p>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (editable()) {
|
||||
<div class="actions">
|
||||
<app-button
|
||||
variant="subtle"
|
||||
(click)="edit.emit({ tag: 'FreeTextBlockAdded', sectionKey: section().sectionKey })"
|
||||
>{{ addFreeLabel() }}</app-button
|
||||
>
|
||||
</div>
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class LetterSectionComponent {
|
||||
section = input.required<LetterSection>();
|
||||
placeholders = input<readonly PlaceholderOption[]>([]);
|
||||
editable = input(false);
|
||||
edit = output<BriefMsg>();
|
||||
|
||||
requiredLabel = input($localize`:@@brief.section.required:verplicht`);
|
||||
emptyLabel = input($localize`:@@brief.section.empty:Nog geen tekst in deze sectie.`);
|
||||
addFreeLabel = input($localize`:@@brief.section.addFree:Vrije tekst toevoegen`);
|
||||
|
||||
protected onContent(blockId: string, content: RichTextBlock) {
|
||||
this.edit.emit({ tag: 'BlockContentEdited', blockId, content });
|
||||
}
|
||||
|
||||
protected onMove(blockId: string, direction: -1 | 1) {
|
||||
const i = this.section().blocks.findIndex((b) => b.blockId === blockId);
|
||||
this.edit.emit({ tag: 'BlockMovedWithinSection', blockId, toIndex: i + direction });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { LetterSection } from '@brief/domain/brief';
|
||||
import { LetterSectionComponent } from './letter-section.component';
|
||||
|
||||
const section: LetterSection = {
|
||||
sectionKey: 'kern',
|
||||
title: 'Kern van het besluit',
|
||||
required: true,
|
||||
locked: false,
|
||||
blocks: [
|
||||
{
|
||||
type: 'freeText',
|
||||
blockId: 'local-2',
|
||||
content: {
|
||||
paragraphs: [
|
||||
{
|
||||
nodes: [
|
||||
{ type: 'text', text: 'Wij hebben besloten om reden ' },
|
||||
{ type: 'placeholder', key: 'reden_besluit' },
|
||||
{ type: 'text', text: '.' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const emptySection: LetterSection = { ...section, blocks: [] };
|
||||
|
||||
const placeholders = [{ key: 'reden_besluit', label: 'Reden besluit' }];
|
||||
|
||||
const meta: Meta<LetterSectionComponent> = {
|
||||
title: 'Domein/Brief/Letter Section',
|
||||
component: LetterSectionComponent,
|
||||
args: { section, placeholders, edit: () => {} },
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<LetterSectionComponent>;
|
||||
|
||||
export const ReadOnly: Story = { args: { editable: false } };
|
||||
export const Editable: Story = { args: { editable: true } };
|
||||
/** Empty section: shows the empty-state hint plus the free-text action. */
|
||||
export const EditableEmpty: Story = { args: { section: emptySection, editable: true } };
|
||||
@@ -0,0 +1,353 @@
|
||||
import { Component, computed, input, output } from '@angular/core';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { HeadingComponent } from '@shared/ui/heading/heading.component';
|
||||
import { ButtonComponent } from '@shared/ui/button/button.component';
|
||||
import { AlertComponent } from '@shared/ui/alert/alert.component';
|
||||
import { FileInputComponent } from '@shared/ui/upload/file-input/file-input.component';
|
||||
import { SingleUploadComponent } from '@shared/ui/upload/single-upload/single-upload.component';
|
||||
import { UploadState } from '@shared/upload/upload.machine';
|
||||
import { Brief } from '@brief/domain/brief';
|
||||
import {
|
||||
MARGIN_MAX_MM,
|
||||
MARGIN_MIN_MM,
|
||||
Margins,
|
||||
OrgTemplate,
|
||||
OrgTemplateVersion,
|
||||
SubOrgSummary,
|
||||
} from '@brief/domain/org-template';
|
||||
import { OrgTemplateTextField } from '@brief/domain/org-template.machine';
|
||||
import { LetterCanvasComponent } from '@brief/ui/letter-canvas/letter-canvas.component';
|
||||
|
||||
const LOGO_CATEGORY = 'org-logo';
|
||||
const EDGES: readonly (keyof Margins)[] = ['topMm', 'rightMm', 'bottomMm', 'leftMm'];
|
||||
|
||||
/** A minimal read-only sample letter, so the admin sees the org identity in context
|
||||
while editing (content itself is not the admin's to change). */
|
||||
export const SAMPLE_LETTER_BRIEF: Brief = {
|
||||
briefId: 'VOORBEELD-0001',
|
||||
beroep: 'arts',
|
||||
templateId: 'sample',
|
||||
drafterId: 'sample',
|
||||
status: { tag: 'draft' },
|
||||
placeholders: [
|
||||
{ key: 'naam_zorgverlener', label: 'Naam zorgverlener', autoResolvable: true },
|
||||
{ key: 'datum', label: 'Datum', autoResolvable: true },
|
||||
],
|
||||
sections: [
|
||||
{
|
||||
sectionKey: 'body',
|
||||
title: 'Voorbeeldinhoud',
|
||||
required: true,
|
||||
locked: true,
|
||||
blocks: [
|
||||
{
|
||||
type: 'freeText',
|
||||
blockId: 'sample-1',
|
||||
content: {
|
||||
paragraphs: [
|
||||
{
|
||||
nodes: [
|
||||
{ type: 'text', text: 'Geachte ' },
|
||||
{ type: 'placeholder', key: 'naam_zorgverlener' },
|
||||
{ type: 'text', text: ',' },
|
||||
],
|
||||
},
|
||||
{
|
||||
nodes: [
|
||||
{
|
||||
type: 'text',
|
||||
text: 'Dit is voorbeeldinhoud. Alleen de huisstijl-onderdelen (logo, afzender, ondertekening en voettekst) zijn hier bewerkbaar.',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
/**
|
||||
* Organism (WP-26): the admin org-template editor. The mirror of the drafter's
|
||||
* composer — the letter canvas runs in `editableRegions='template'` so the
|
||||
* letterhead/signature/footer are edited in place, while the content is a read-only
|
||||
* sample. Margins, logo upload, version history and the publish bar sit around it.
|
||||
* Presentational: every mutation is an output the store turns into a command.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-org-template-editor',
|
||||
imports: [
|
||||
DatePipe,
|
||||
HeadingComponent,
|
||||
ButtonComponent,
|
||||
AlertComponent,
|
||||
FileInputComponent,
|
||||
SingleUploadComponent,
|
||||
LetterCanvasComponent,
|
||||
],
|
||||
styles: [
|
||||
`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
gap: var(--rhc-space-max-md);
|
||||
flex-wrap: wrap;
|
||||
margin-block-end: var(--rhc-space-max-lg);
|
||||
}
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--rhc-space-max-2xs);
|
||||
}
|
||||
.save {
|
||||
color: var(--rhc-color-foreground-subtle);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.section {
|
||||
margin-block-start: var(--rhc-space-max-xl);
|
||||
}
|
||||
.margins {
|
||||
display: flex;
|
||||
gap: var(--rhc-space-max-md);
|
||||
flex-wrap: wrap;
|
||||
border: var(--rhc-border-width-sm) solid var(--rhc-color-border-default);
|
||||
border-radius: var(--rhc-border-radius-md);
|
||||
padding: var(--rhc-space-max-md);
|
||||
}
|
||||
.margins input {
|
||||
width: 6rem;
|
||||
}
|
||||
.history-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--rhc-space-max-sm);
|
||||
}
|
||||
.history-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--rhc-space-max-md);
|
||||
border-block-end: var(--rhc-border-width-sm) solid var(--rhc-color-border-default);
|
||||
padding-block-end: var(--rhc-space-max-sm);
|
||||
}
|
||||
.bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--rhc-space-max-md);
|
||||
align-items: center;
|
||||
margin-block-start: var(--rhc-space-max-xl);
|
||||
}
|
||||
.published {
|
||||
color: var(--rhc-color-foreground-subtle);
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
<div class="toolbar">
|
||||
<label class="field">
|
||||
<span>{{ subOrgLabel() }}</span>
|
||||
<select class="form-select" (change)="onSelectSubOrg($event)">
|
||||
@for (o of subOrgs(); track o.subOrgId) {
|
||||
<option [value]="o.subOrgId" [selected]="o.subOrgId === selectedSubOrgId()">
|
||||
{{ o.orgName }}
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
</label>
|
||||
<span class="save" role="status" aria-live="polite">{{ saveText() }}</span>
|
||||
</div>
|
||||
|
||||
<app-letter-canvas
|
||||
[brief]="sampleBrief()"
|
||||
[orgTemplate]="draft()"
|
||||
[logoUrl]="logoUrl()"
|
||||
editableRegions="template"
|
||||
(templateEdit)="templateEdit.emit($event)"
|
||||
/>
|
||||
|
||||
<fieldset class="section margins">
|
||||
<legend>{{ marginsLegend() }}</legend>
|
||||
@for (edge of edges; track edge) {
|
||||
<label class="field">
|
||||
<span>{{ edgeLabel(edge) }}</span>
|
||||
<input
|
||||
class="form-control"
|
||||
type="number"
|
||||
[min]="MIN"
|
||||
[max]="MAX"
|
||||
[value]="draft().margins[edge]"
|
||||
(input)="onMargin(edge, $event)"
|
||||
/>
|
||||
</label>
|
||||
}
|
||||
</fieldset>
|
||||
|
||||
<section class="section">
|
||||
<app-heading [level]="3">{{ logoHeading() }}</app-heading>
|
||||
@if (logoCategory()) {
|
||||
<app-file-input
|
||||
inputId="org-logo-input"
|
||||
[accept]="logoCategory()!.acceptedTypes"
|
||||
[maxSizeMb]="logoCategory()!.maxSizeMb"
|
||||
[label]="logoHeading()"
|
||||
(filesSelected)="logoSelected.emit($event)"
|
||||
/>
|
||||
}
|
||||
@if (logoRejection()) {
|
||||
<app-alert type="error">{{ logoRejection() }}</app-alert>
|
||||
}
|
||||
@if (logoUploads().length) {
|
||||
<ul class="file-list">
|
||||
@for (u of logoUploads(); track u.localId) {
|
||||
<li
|
||||
app-single-upload
|
||||
[upload]="u"
|
||||
[previewUrlFor]="previewUrlFor()"
|
||||
(remove)="logoRemoved.emit(u.localId)"
|
||||
(retry)="logoRetry.emit(u.localId)"
|
||||
></li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<app-heading [level]="3">{{ historyHeading() }}</app-heading>
|
||||
@if (history().length === 0) {
|
||||
<p class="published">{{ noHistory() }}</p>
|
||||
} @else {
|
||||
<ul class="history-list">
|
||||
@for (v of history(); track v.version) {
|
||||
<li class="history-row">
|
||||
<span
|
||||
>{{ versionLabel() }} {{ v.version }} · {{ v.publishedAt | date: 'longDate' }}</span
|
||||
>
|
||||
<app-button variant="subtle" [disabled]="busy()" (click)="rollback.emit(v.version)">
|
||||
{{ rollbackLabel() }}
|
||||
</app-button>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
</section>
|
||||
|
||||
<div class="bar">
|
||||
<span class="published">{{ publishedLabel() }} {{ publishedVersion() }}</span>
|
||||
@if (pendingPublish()) {
|
||||
<app-alert type="warning">{{ impactText() }}</app-alert>
|
||||
<app-button variant="primary" [disabled]="busy()" (click)="confirmPublish.emit()">
|
||||
{{ confirmLabel() }}
|
||||
</app-button>
|
||||
<app-button variant="subtle" [disabled]="busy()" (click)="cancelPublish.emit()">
|
||||
{{ cancelLabel() }}
|
||||
</app-button>
|
||||
} @else {
|
||||
<app-button
|
||||
variant="primary"
|
||||
[disabled]="!draftValid() || busy()"
|
||||
(click)="requestPublish.emit()"
|
||||
>
|
||||
{{ publishLabel() }}
|
||||
</app-button>
|
||||
@if (!draftValid()) {
|
||||
<span class="published">{{ invalidHint() }}</span>
|
||||
}
|
||||
}
|
||||
<app-button variant="secondary" [disabled]="busy()" (click)="proefbrief.emit()">
|
||||
{{ proefbriefLabel() }}
|
||||
</app-button>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class OrgTemplateEditorComponent {
|
||||
draft = input.required<OrgTemplate>();
|
||||
logoUrl = input<string | null>(null);
|
||||
uploadState = input.required<UploadState>();
|
||||
subOrgs = input<readonly SubOrgSummary[]>([]);
|
||||
selectedSubOrgId = input<string | null>(null);
|
||||
history = input<readonly OrgTemplateVersion[]>([]);
|
||||
publishedVersion = input(0);
|
||||
unsentBriefs = input(0);
|
||||
draftValid = input(false);
|
||||
busy = input(false);
|
||||
pendingPublish = input(false);
|
||||
saveText = input('');
|
||||
sampleBrief = input<Brief>(SAMPLE_LETTER_BRIEF);
|
||||
previewUrlFor = input<(documentId: string) => string | undefined>();
|
||||
|
||||
selectSubOrg = output<string>();
|
||||
templateEdit = output<{ field: OrgTemplateTextField; value: string }>();
|
||||
marginEdit = output<{ edge: keyof Margins; value: number }>();
|
||||
logoSelected = output<File[]>();
|
||||
logoRemoved = output<string>();
|
||||
logoRetry = output<string>();
|
||||
requestPublish = output<void>();
|
||||
confirmPublish = output<void>();
|
||||
cancelPublish = output<void>();
|
||||
rollback = output<number>();
|
||||
proefbrief = output<void>();
|
||||
|
||||
protected readonly edges = EDGES;
|
||||
protected readonly MIN = MARGIN_MIN_MM;
|
||||
protected readonly MAX = MARGIN_MAX_MM;
|
||||
|
||||
protected logoCategory = computed(() =>
|
||||
this.uploadState().categories.find((c) => c.categoryId === LOGO_CATEGORY),
|
||||
);
|
||||
protected logoUploads = computed(() =>
|
||||
this.uploadState().uploads.filter((u) => u.categoryId === LOGO_CATEGORY),
|
||||
);
|
||||
protected logoRejection = computed(() => this.uploadState().rejections[LOGO_CATEGORY]);
|
||||
|
||||
protected onSelectSubOrg(event: Event) {
|
||||
this.selectSubOrg.emit((event.target as HTMLSelectElement).value);
|
||||
}
|
||||
protected onMargin(edge: keyof Margins, event: Event) {
|
||||
const value = (event.target as HTMLInputElement).valueAsNumber;
|
||||
if (Number.isFinite(value)) this.marginEdit.emit({ edge, value });
|
||||
}
|
||||
|
||||
protected edgeLabel(edge: keyof Margins): string {
|
||||
switch (edge) {
|
||||
case 'topMm':
|
||||
return $localize`:@@orgTemplate.margin.top:Boven (mm)`;
|
||||
case 'rightMm':
|
||||
return $localize`:@@orgTemplate.margin.right:Rechts (mm)`;
|
||||
case 'bottomMm':
|
||||
return $localize`:@@orgTemplate.margin.bottom:Onder (mm)`;
|
||||
case 'leftMm':
|
||||
return $localize`:@@orgTemplate.margin.left:Links (mm)`;
|
||||
}
|
||||
}
|
||||
|
||||
protected impactText = computed(
|
||||
() =>
|
||||
$localize`:@@orgTemplate.publish.impact:Dit raakt ${this.unsentBriefs()}:count: nog niet verzonden brieven. Publiceren?`,
|
||||
);
|
||||
|
||||
protected subOrgLabel = input($localize`:@@orgTemplate.subOrg:Organisatieonderdeel`);
|
||||
protected marginsLegend = input(
|
||||
$localize`:@@orgTemplate.margins:Marges (mm, tussen ${MARGIN_MIN_MM}:min: en ${MARGIN_MAX_MM}:max:)`,
|
||||
);
|
||||
protected logoHeading = input($localize`:@@orgTemplate.logo:Logo`);
|
||||
protected historyHeading = input($localize`:@@orgTemplate.history:Versiegeschiedenis`);
|
||||
protected noHistory = input($localize`:@@orgTemplate.history.none:Nog niets gepubliceerd.`);
|
||||
protected versionLabel = input($localize`:@@orgTemplate.version:Versie`);
|
||||
protected rollbackLabel = input($localize`:@@orgTemplate.rollback:Terugzetten in concept`);
|
||||
protected publishedLabel = input($localize`:@@orgTemplate.published:Gepubliceerde versie:`);
|
||||
protected publishLabel = input($localize`:@@orgTemplate.publish:Publiceren`);
|
||||
protected confirmLabel = input($localize`:@@orgTemplate.publish.confirm:Bevestigen`);
|
||||
protected cancelLabel = input($localize`:@@orgTemplate.publish.cancel:Annuleren`);
|
||||
protected proefbriefLabel = input($localize`:@@orgTemplate.proefbrief:Proefbrief`);
|
||||
protected invalidHint = input(
|
||||
$localize`:@@orgTemplate.invalid:Vul organisatienaam en ondertekenaar in; marges tussen ${MARGIN_MIN_MM}:min: en ${MARGIN_MAX_MM}:max: mm.`,
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { OrgTemplateEditorComponent } from './org-template-editor.component';
|
||||
import { OrgTemplate, OrgTemplateVersion, SubOrgSummary } from '@brief/domain/org-template';
|
||||
import { UploadState, initialUpload } from '@shared/upload/upload.machine';
|
||||
|
||||
const draft: OrgTemplate = {
|
||||
subOrgId: 'cibg-registers',
|
||||
orgName: 'CIBG — Registers',
|
||||
returnAddress: 'BIG-register\nPostbus 00000\n2500 AA Den Haag',
|
||||
footerContact: 'www.bigregister.nl\ninfo@voorbeeld.example',
|
||||
footerLegal: 'Ons kenmerk vermelden bij correspondentie.',
|
||||
signatureName: 'A. de Vries',
|
||||
signatureRole: 'Hoofd Registratie',
|
||||
signatureClosing: 'Met vriendelijke groet,',
|
||||
margins: { topMm: 25, rightMm: 25, bottomMm: 25, leftMm: 25 },
|
||||
version: 3,
|
||||
};
|
||||
|
||||
const subOrgs: SubOrgSummary[] = [
|
||||
{ subOrgId: 'cibg-registers', orgName: 'CIBG — Registers', publishedVersion: 3 },
|
||||
{ subOrgId: 'cibg-vakbekwaamheid', orgName: 'CIBG — Vakbekwaamheid', publishedVersion: 1 },
|
||||
];
|
||||
|
||||
const history: OrgTemplateVersion[] = [
|
||||
{ version: 3, publishedAt: '2026-06-20', template: draft },
|
||||
{ version: 2, publishedAt: '2026-05-11', template: draft },
|
||||
];
|
||||
|
||||
const uploadWithCategory: UploadState = {
|
||||
...initialUpload,
|
||||
categories: [
|
||||
{
|
||||
categoryId: 'org-logo',
|
||||
label: 'Logo',
|
||||
description: 'Logo van de organisatie',
|
||||
required: false,
|
||||
acceptedTypes: ['image/png', 'image/jpeg'],
|
||||
maxSizeMb: 2,
|
||||
multiple: false,
|
||||
allowPostDelivery: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const meta: Meta<OrgTemplateEditorComponent> = {
|
||||
title: 'Domein/Brief/Org Template Editor',
|
||||
component: OrgTemplateEditorComponent,
|
||||
args: {
|
||||
draft,
|
||||
logoUrl: null,
|
||||
uploadState: uploadWithCategory,
|
||||
subOrgs,
|
||||
selectedSubOrgId: 'cibg-registers',
|
||||
history,
|
||||
publishedVersion: 3,
|
||||
unsentBriefs: 4,
|
||||
draftValid: true,
|
||||
busy: false,
|
||||
pendingPublish: false,
|
||||
saveText: '',
|
||||
},
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<OrgTemplateEditorComponent>;
|
||||
|
||||
export const Editing: Story = {};
|
||||
|
||||
export const PublishConfirm: Story = {
|
||||
args: { pendingPublish: true },
|
||||
};
|
||||
|
||||
export const Invalid: Story = {
|
||||
args: {
|
||||
draft: { ...draft, orgName: '', margins: { ...draft.margins, topMm: 5 } },
|
||||
draftValid: false,
|
||||
},
|
||||
};
|
||||
|
||||
export const NoHistory: Story = {
|
||||
args: { history: [], publishedVersion: 0 },
|
||||
};
|
||||
|
||||
// Inline SVG so the story needs no backend/upload round-trip.
|
||||
const sampleLogo =
|
||||
'data:image/svg+xml;utf8,' +
|
||||
encodeURIComponent(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40"><rect width="120" height="40" fill="#003366"/><text x="60" y="25" font-size="14" fill="white" text-anchor="middle">CIBG</text></svg>',
|
||||
);
|
||||
|
||||
/** Published logo (WP-26 AC2): the letterhead canvas shows it above the org name. */
|
||||
export const MetLogo: Story = {
|
||||
args: { logoUrl: sampleLogo },
|
||||
};
|
||||
|
||||
/** Client-side upload rejection (existing `rejectReason`, WP-26 AC5) — type/size caught
|
||||
before the file ever reaches the backend. */
|
||||
export const LogoUploadFout: Story = {
|
||||
args: {
|
||||
uploadState: {
|
||||
...uploadWithCategory,
|
||||
rejections: { 'org-logo': 'Alleen PNG of JPEG, maximaal 2 MB.' },
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,132 @@
|
||||
import { Component, computed, effect, inject } from '@angular/core';
|
||||
import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
|
||||
import { AlertComponent } from '@shared/ui/alert/alert.component';
|
||||
import { ButtonComponent } from '@shared/ui/button/button.component';
|
||||
import { ASYNC } from '@shared/ui/async/async.component';
|
||||
import { AccessStore } from '@shared/application/access.store';
|
||||
import { UploadAdapter } from '@shared/upload/upload.adapter';
|
||||
import { OrgTemplateStore } from '@brief/application/org-template.store';
|
||||
import { OrgTemplateEditorComponent } from '@brief/ui/org-template-editor/org-template-editor.component';
|
||||
|
||||
/** Page: thin container for the admin org-template editor (WP-26). Deny-by-default
|
||||
capability gate (`orgtemplate:edit`) — a denial alert for non-admins, the editor
|
||||
for admins. Loads once the capability resolves; wires store commands to the organism. */
|
||||
@Component({
|
||||
selector: 'app-org-template-page',
|
||||
imports: [
|
||||
PageShellComponent,
|
||||
AlertComponent,
|
||||
ButtonComponent,
|
||||
...ASYNC,
|
||||
OrgTemplateEditorComponent,
|
||||
],
|
||||
styles: [
|
||||
`
|
||||
.save {
|
||||
color: var(--rhc-color-foreground-subtle);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
<app-page-shell [heading]="heading" [intro]="intro" backLink="/brief">
|
||||
@if (store.lastError(); as err) {
|
||||
<app-alert type="error">{{ err }}</app-alert>
|
||||
}
|
||||
|
||||
@if (!access.ready()) {
|
||||
<!-- wait for /me before deciding — avoids flashing the denial to an admin -->
|
||||
} @else if (!canEdit()) {
|
||||
<app-alert type="error">{{ deniedText }}</app-alert>
|
||||
} @else {
|
||||
<app-async [data]="store.remoteData()">
|
||||
<ng-template appAsyncError>
|
||||
<app-alert type="error">{{ failedText }}</app-alert>
|
||||
<app-button variant="secondary" (click)="reload()">{{ retryText }}</app-button>
|
||||
</ng-template>
|
||||
<ng-template appAsyncLoaded>
|
||||
@if (store.draft(); as draft) {
|
||||
<app-org-template-editor
|
||||
[draft]="draft"
|
||||
[logoUrl]="store.logoUrl()"
|
||||
[uploadState]="store.uploadState()"
|
||||
[subOrgs]="store.subOrgs()"
|
||||
[selectedSubOrgId]="store.selectedSubOrgId()"
|
||||
[history]="store.history()"
|
||||
[publishedVersion]="store.publishedVersion()"
|
||||
[unsentBriefs]="store.unsentBriefs()"
|
||||
[draftValid]="store.draftValid()"
|
||||
[busy]="store.busy()"
|
||||
[pendingPublish]="store.pendingPublish()"
|
||||
[saveText]="saveText()"
|
||||
[previewUrlFor]="previewUrlFor"
|
||||
(selectSubOrg)="store.selectSubOrg($event)"
|
||||
(templateEdit)="
|
||||
store.edit({ tag: 'FieldEdited', field: $event.field, value: $event.value })
|
||||
"
|
||||
(marginEdit)="
|
||||
store.edit({ tag: 'MarginEdited', edge: $event.edge, value: $event.value })
|
||||
"
|
||||
(logoSelected)="store.onLogoSelected($event)"
|
||||
(logoRemoved)="store.onLogoRemoved($event)"
|
||||
(logoRetry)="store.onLogoRetry($event)"
|
||||
(requestPublish)="store.requestPublish()"
|
||||
(confirmPublish)="store.confirmPublish()"
|
||||
(cancelPublish)="store.cancelPublish()"
|
||||
(rollback)="store.rollback($event)"
|
||||
(proefbrief)="store.proefbrief()"
|
||||
/>
|
||||
}
|
||||
</ng-template>
|
||||
</app-async>
|
||||
}
|
||||
</app-page-shell>
|
||||
`,
|
||||
})
|
||||
export class OrgTemplatePage {
|
||||
protected store = inject(OrgTemplateStore);
|
||||
protected access = inject(AccessStore);
|
||||
private uploadAdapter = inject(UploadAdapter);
|
||||
|
||||
protected canEdit = computed(() => this.access.can('orgtemplate:edit'));
|
||||
protected previewUrlFor = (documentId: string) => this.uploadAdapter.contentUrl(documentId);
|
||||
|
||||
protected heading = $localize`:@@orgTemplate.page.heading:Huisstijl beheren`;
|
||||
protected intro = $localize`:@@orgTemplate.page.intro:Beheer per organisatieonderdeel het uiterlijk van de brief: logo, afzender, ondertekening, voettekst en marges.`;
|
||||
protected deniedText = $localize`:@@orgTemplate.page.denied:U hebt geen rechten om organisatiesjablonen te beheren.`;
|
||||
protected failedText = $localize`:@@orgTemplate.page.failed:Het sjabloon kon niet worden geladen.`;
|
||||
protected retryText = $localize`:@@orgTemplate.page.retry:Opnieuw proberen`;
|
||||
|
||||
private savingText = $localize`:@@orgTemplate.page.saving:Concept opslaan…`;
|
||||
private savedText = $localize`:@@orgTemplate.page.saved:Concept opgeslagen`;
|
||||
private saveErrorText = $localize`:@@orgTemplate.page.saveError:Opslaan mislukt`;
|
||||
protected saveText = computed(() => {
|
||||
switch (this.store.saveState().tag) {
|
||||
case 'Saving':
|
||||
return this.savingText;
|
||||
case 'Saved':
|
||||
return this.savedText;
|
||||
case 'Error':
|
||||
return this.saveErrorText;
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
});
|
||||
|
||||
private loadRequested = false;
|
||||
constructor() {
|
||||
// Load once the capability resolves to `allowed` (a 403 GET would be wasted
|
||||
// otherwise). Depends only on `canEdit()` + a plain flag — never on the store
|
||||
// model, so dispatching `Loading` inside `load()` can't retrigger this effect.
|
||||
effect(() => {
|
||||
if (this.canEdit() && !this.loadRequested) {
|
||||
this.loadRequested = true;
|
||||
void this.store.load();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
protected reload() {
|
||||
void this.store.load();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
import { Component, computed, input, output, signal } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { CheckboxComponent } from '@shared/ui/checkbox/checkbox.component';
|
||||
import { ButtonComponent } from '@shared/ui/button/button.component';
|
||||
import { TextInputComponent } from '@shared/ui/text-input/text-input.component';
|
||||
import { textOf } from '@shared/kernel/rich-text';
|
||||
import { LibraryPassage } from '@brief/domain/brief';
|
||||
|
||||
/** Molecule: multi-select list of the section's library passages. One "Voeg toe"
|
||||
inserts ALL checked passages at once (a single message upstream) — there is no
|
||||
single-insert path. Presentational: emits the chosen passages in list order.
|
||||
|
||||
Superseded by `besluit-panel` (WP-27's guided drafting): no consumer left in
|
||||
`src/app` outside its own story (WP-28 audit). Kept for now rather than deleted
|
||||
in-flight of an unrelated WP; a future cleanup can remove it. */
|
||||
@Component({
|
||||
selector: 'app-passage-picker',
|
||||
imports: [FormsModule, CheckboxComponent, ButtonComponent, TextInputComponent],
|
||||
styles: [
|
||||
`
|
||||
:host {
|
||||
display: block;
|
||||
background: var(--rhc-color-wit);
|
||||
border: var(--rhc-border-width-sm) solid var(--rhc-color-border-default);
|
||||
border-radius: var(--rhc-border-radius-md);
|
||||
padding: var(--rhc-space-max-md);
|
||||
}
|
||||
.search {
|
||||
margin-block-end: var(--rhc-space-max-md);
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0 0 var(--rhc-space-max-md);
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: var(--rhc-space-max-sm);
|
||||
}
|
||||
.scope {
|
||||
color: var(--rhc-color-foreground-subtle);
|
||||
}
|
||||
.empty {
|
||||
color: var(--rhc-color-foreground-subtle);
|
||||
font-style: italic;
|
||||
margin: 0 0 var(--rhc-space-max-md);
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
<div class="search">
|
||||
<app-text-input
|
||||
[placeholder]="searchLabel()"
|
||||
[attr.aria-label]="searchLabel()"
|
||||
[ngModel]="query()"
|
||||
(ngModelChange)="query.set($event)"
|
||||
/>
|
||||
</div>
|
||||
<ul>
|
||||
@for (p of filtered(); track p.passageId) {
|
||||
<li>
|
||||
<app-checkbox
|
||||
[checkboxId]="'passage-' + p.passageId"
|
||||
[label]="p.label"
|
||||
[ngModel]="!!checked()[p.passageId]"
|
||||
(ngModelChange)="set(p.passageId, $event)"
|
||||
/>
|
||||
<span class="scope"> · {{ p.scope === 'beroep' ? beroepLabel() : globalLabel() }}</span>
|
||||
</li>
|
||||
} @empty {
|
||||
<li class="empty">{{ noMatchLabel() }}</li>
|
||||
}
|
||||
</ul>
|
||||
<app-button variant="secondary" [disabled]="count() === 0" (click)="add()"
|
||||
>{{ addLabel() }} ({{ count() }})</app-button
|
||||
>
|
||||
`,
|
||||
})
|
||||
export class PassagePickerComponent {
|
||||
passages = input.required<readonly LibraryPassage[]>();
|
||||
insert = output<LibraryPassage[]>();
|
||||
|
||||
addLabel = input($localize`:@@brief.picker.add:Voeg toe`);
|
||||
globalLabel = input($localize`:@@brief.picker.global:algemeen`);
|
||||
beroepLabel = input($localize`:@@brief.picker.beroep:beroepsspecifiek`);
|
||||
searchLabel = input($localize`:@@brief.picker.search:Zoek in standaardteksten…`);
|
||||
noMatchLabel = input($localize`:@@brief.picker.noMatch:Geen standaardteksten gevonden.`);
|
||||
|
||||
protected checked = signal<Record<string, boolean>>({});
|
||||
protected query = signal('');
|
||||
/** Client-side filter on label + rendered content text — the library is small, so no
|
||||
server search (WP-27). Placeholder keys are searchable too (see `textOf`). */
|
||||
protected filtered = computed(() => {
|
||||
const q = this.query().trim().toLowerCase();
|
||||
if (!q) return this.passages();
|
||||
return this.passages().filter(
|
||||
(p) => p.label.toLowerCase().includes(q) || textOf(p.content).includes(q),
|
||||
);
|
||||
});
|
||||
protected count = () => Object.values(this.checked()).filter(Boolean).length;
|
||||
|
||||
protected set(id: string, on: boolean) {
|
||||
this.checked.update((c) => ({ ...c, [id]: on }));
|
||||
}
|
||||
|
||||
protected add() {
|
||||
const chosen = this.passages().filter((p) => this.checked()[p.passageId]);
|
||||
if (chosen.length) {
|
||||
this.insert.emit(chosen);
|
||||
this.checked.set({});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { LibraryPassage } from '@brief/domain/brief';
|
||||
import { PassagePickerComponent } from './passage-picker.component';
|
||||
|
||||
const passages: LibraryPassage[] = [
|
||||
{
|
||||
passageId: 'p1',
|
||||
scope: 'global',
|
||||
sectionKey: 'aanhef',
|
||||
label: 'Standaard aanhef',
|
||||
version: 1,
|
||||
content: { paragraphs: [{ nodes: [{ type: 'text', text: 'Geachte heer/mevrouw,' }] }] },
|
||||
},
|
||||
{
|
||||
passageId: 'p2',
|
||||
scope: 'beroep',
|
||||
beroep: 'arts',
|
||||
sectionKey: 'aanhef',
|
||||
label: 'Aanhef, arts-specifiek',
|
||||
version: 1,
|
||||
content: { paragraphs: [{ nodes: [{ type: 'text', text: 'Geachte collega,' }] }] },
|
||||
},
|
||||
];
|
||||
|
||||
const meta: Meta<PassagePickerComponent> = {
|
||||
title: 'Domein/Brief/Passage Picker',
|
||||
component: PassagePickerComponent,
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: `<app-passage-picker [passages]="passages" (insert)="insert($event)" />`,
|
||||
}),
|
||||
args: { passages, insert: () => {} },
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<PassagePickerComponent>;
|
||||
|
||||
export const Default: Story = {};
|
||||
@@ -0,0 +1,57 @@
|
||||
import { Component, input, output, signal } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { AlertComponent } from '@shared/ui/alert/alert.component';
|
||||
import { ButtonComponent } from '@shared/ui/button/button.component';
|
||||
|
||||
/** Molecule: shows the rejection comments (drafter view) or collects them from the
|
||||
approver. The approver rejects WITH comments; they never edit the letter. */
|
||||
@Component({
|
||||
selector: 'app-rejection-comments',
|
||||
imports: [FormsModule, AlertComponent, ButtonComponent],
|
||||
styles: [
|
||||
`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
textarea {
|
||||
inline-size: 100%;
|
||||
box-sizing: border-box;
|
||||
min-block-size: 4rem;
|
||||
margin-block: var(--rhc-space-max-sm);
|
||||
}
|
||||
label {
|
||||
font-weight: 600;
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
@if (mode() === 'show') {
|
||||
<app-alert type="warning"
|
||||
><strong>{{ rejectedTitle() }}</strong> {{ comments() }}</app-alert
|
||||
>
|
||||
} @else {
|
||||
<label for="reject-comments">{{ entryLabel() }}</label>
|
||||
<textarea id="reject-comments" [(ngModel)]="draft"></textarea>
|
||||
<app-button variant="danger" [disabled]="!draft().trim() || busy()" (click)="submit()">{{
|
||||
rejectLabel()
|
||||
}}</app-button>
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class RejectionCommentsComponent {
|
||||
mode = input<'show' | 'entry'>('show');
|
||||
comments = input('');
|
||||
busy = input(false);
|
||||
reject = output<string>();
|
||||
|
||||
rejectedTitle = input($localize`:@@brief.reject.title:Afgewezen:`);
|
||||
entryLabel = input($localize`:@@brief.reject.entryLabel:Reden van afwijzing`);
|
||||
rejectLabel = input($localize`:@@brief.reject.button:Afwijzen`);
|
||||
|
||||
protected draft = signal('');
|
||||
|
||||
protected submit() {
|
||||
const c = this.draft().trim();
|
||||
if (c) this.reject.emit(c);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { RejectionCommentsComponent } from './rejection-comments.component';
|
||||
|
||||
const meta: Meta<RejectionCommentsComponent> = {
|
||||
title: 'Domein/Brief/Rejection Comments',
|
||||
component: RejectionCommentsComponent,
|
||||
args: { reject: () => {} },
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<RejectionCommentsComponent>;
|
||||
|
||||
export const Show: Story = {
|
||||
args: { mode: 'show', comments: 'Graag de aanhef formeler.' },
|
||||
};
|
||||
export const Entry: Story = { args: { mode: 'entry' } };
|
||||
export const EntryBusy: Story = { args: { mode: 'entry', busy: true } };
|
||||
Reference in New Issue
Block a user