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,177 @@
|
||||
import { Component, Injector, computed, inject, isDevMode, signal } from '@angular/core';
|
||||
import { JsonPipe } from '@angular/common';
|
||||
import { SessionStore } from '@auth/application/session.store';
|
||||
import { Session } from '@auth/domain/session';
|
||||
import { BigProfileStore } from '@registratie/application/big-profile.store';
|
||||
import { map } from '@shared/application/remote-data';
|
||||
import { Role } from '@shared/domain/role';
|
||||
import { ROLES, currentRole, setRole } from '@shared/infrastructure/role';
|
||||
import { Scenario, SCENARIOS, currentScenario, setScenario } from '@shared/infrastructure/scenario';
|
||||
import { stripDevParams } from '@shared/infrastructure/dev-params';
|
||||
import { maskBsn } from '@shared/kernel/pii';
|
||||
import { redactProfile } from './mask';
|
||||
|
||||
// CIBG-GAP EXTENSION: n/a — devtool, no corresponding CIBG concept; deliberately
|
||||
// off-theme by design (see the ponytail note below), see cibg-gaps.mdx.
|
||||
/**
|
||||
* Dev-only "show the current Model" panel (Elm-debugger style, read-only).
|
||||
* Observes the root singletons and renders them via the json pipe. Never a
|
||||
* product feature: the whole template is gated by isDevMode(), so it does not
|
||||
* render and is unreachable in a production build.
|
||||
*
|
||||
* ponytail: dev tool — intentionally off-theme (a dark code-editor look, not
|
||||
* CIBG). Its palette lives as --app-devpanel-* tokens in styles.scss so this file
|
||||
* stays hex-free (check:tokens has no holes), while still reading as a tool.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-debug-state',
|
||||
imports: [JsonPipe],
|
||||
styles: [
|
||||
`
|
||||
.fab {
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
z-index: 9999;
|
||||
font: 600 12px/1 monospace;
|
||||
background: var(--app-devpanel-bg);
|
||||
color: var(--app-devpanel-accent);
|
||||
border: var(--rhc-border-width-sm) solid var(--app-devpanel-border);
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.panel {
|
||||
position: fixed;
|
||||
bottom: 3.25rem;
|
||||
right: 1rem;
|
||||
z-index: 9999;
|
||||
width: min(90vw, 28rem);
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
background: var(--app-devpanel-bg);
|
||||
color: var(--app-devpanel-fg);
|
||||
border: var(--rhc-border-width-sm) solid var(--app-devpanel-border);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 6px 24px var(--app-devpanel-shadow);
|
||||
}
|
||||
.panel pre {
|
||||
margin: 0;
|
||||
padding: 0.75rem;
|
||||
font: 12px/1.5 monospace;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
.switchers {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
border-bottom: var(--rhc-border-width-sm) solid var(--app-devpanel-border);
|
||||
}
|
||||
.switchers label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
font: 11px/1.3 monospace;
|
||||
color: var(--app-devpanel-accent);
|
||||
}
|
||||
.switchers select {
|
||||
font: 12px/1 monospace;
|
||||
background: var(--app-devpanel-bg);
|
||||
color: var(--app-devpanel-fg);
|
||||
border: var(--rhc-border-width-sm) solid var(--app-devpanel-border);
|
||||
border-radius: 3px;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
@if (isDev) {
|
||||
<button type="button" class="fab" (click)="toggle()">
|
||||
{{ visible() ? '× state' : '⚙ state' }}
|
||||
</button>
|
||||
@if (visible()) {
|
||||
<div class="panel">
|
||||
<div class="switchers">
|
||||
<label
|
||||
>role
|
||||
<select (change)="switchRole($any($event.target).value)">
|
||||
@for (r of roles; track r) {
|
||||
<option [value]="r" [selected]="r === role">{{ r }}</option>
|
||||
}
|
||||
</select>
|
||||
</label>
|
||||
<label
|
||||
>scenario
|
||||
<select (change)="switchScenario($any($event.target).value)">
|
||||
@for (s of scenarios; track s) {
|
||||
<option [value]="s" [selected]="s === scenario">{{ s }}</option>
|
||||
}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<pre>{{ snapshot() | json }}</pre>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class DebugStateComponent {
|
||||
protected readonly isDev = isDevMode();
|
||||
protected readonly visible = signal(false);
|
||||
|
||||
private session = inject(SessionStore);
|
||||
private injector = inject(Injector);
|
||||
// Resolved on first open only — BigProfileStore's httpResources fetch eagerly
|
||||
// on construction, so we must not instantiate it until the dev asks to look.
|
||||
private profileStore?: BigProfileStore;
|
||||
|
||||
// PII is redacted/masked here (see mask.ts): the panel inspects state SHAPE,
|
||||
// never personal data — a deliberate habit for a PII-handling app.
|
||||
protected readonly snapshot = computed(() => ({
|
||||
session: maskSession(this.session.session()),
|
||||
profile: this.profileStore ? map(this.profileStore.profile(), redactProfile) : undefined,
|
||||
decisions: this.profileStore?.decisions(),
|
||||
aantekeningen: this.profileStore?.aantekeningen(),
|
||||
pendingHerregistratie: this.profileStore?.pendingHerregistratie(),
|
||||
}));
|
||||
|
||||
// Dev switchers (WP-33): flip role/scenario without hand-editing the URL. Both are
|
||||
// read per-request in interceptors, so a reload re-runs them and re-fetches decisions.
|
||||
protected readonly roles = ROLES;
|
||||
protected readonly scenarios = SCENARIOS;
|
||||
// Getters so the dropdowns reflect the CURRENT value whenever the panel is opened
|
||||
// (not just the value at component construction).
|
||||
protected get role() {
|
||||
return currentRole();
|
||||
}
|
||||
protected get scenario() {
|
||||
return currentScenario();
|
||||
}
|
||||
|
||||
switchRole(r: Role): void {
|
||||
setRole(r);
|
||||
this.applyAndReload();
|
||||
}
|
||||
switchScenario(s: Scenario): void {
|
||||
setScenario(s);
|
||||
this.applyAndReload();
|
||||
}
|
||||
|
||||
// Strip the dev params from the URL before reloading (WP-37) so a stale ?scenario=/?role=
|
||||
// in the address bar can't override the value the switcher just stored (currentScenario/
|
||||
// currentRole read the URL first) — otherwise a switch to "default"/"drafter" gets stuck.
|
||||
private applyAndReload(): void {
|
||||
history.replaceState({}, '', stripDevParams(window.location.href));
|
||||
location.reload();
|
||||
}
|
||||
|
||||
toggle(): void {
|
||||
if (!this.visible()) this.profileStore ??= this.injector.get(BigProfileStore);
|
||||
this.visible.update((v) => !v);
|
||||
}
|
||||
}
|
||||
|
||||
function maskSession(s: Session | null): Session | null {
|
||||
return s ? { ...s, bsn: maskBsn(s.bsn) } : null;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { DebugStateComponent } from './debug-state.component';
|
||||
|
||||
// Devtools, not a design-system atom — titled accordingly.
|
||||
const meta: Meta<DebugStateComponent> = {
|
||||
title: 'Design System/Devtools/State debug',
|
||||
component: DebugStateComponent,
|
||||
parameters: {
|
||||
cibgGap: true,
|
||||
docs: { description: { component: 'CIBG-gap extension — see Foundations/CIBG Gap Register.' } },
|
||||
},
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<DebugStateComponent>;
|
||||
|
||||
// The floating button; click it to open the read-only state panel. Stores
|
||||
// resolve to their default (empty/loading) state here.
|
||||
export const Default: Story = {};
|
||||
@@ -0,0 +1,25 @@
|
||||
import { BigProfile } from '@registratie/domain/big-profile';
|
||||
import { REDACTED, maskTail } from '@shared/kernel/pii';
|
||||
|
||||
/**
|
||||
* Data minimisation for the dev "show the Model" panel: keep the structural /
|
||||
* decision-relevant fields (status, beroep, dates of registration) but redact
|
||||
* direct personal identifiers (name, address, date of birth) and mask the BIG
|
||||
* number. The panel is for inspecting state SHAPE, never for reading PII. The
|
||||
* generic maskers live in `@shared/kernel/pii`; this stays here because it depends
|
||||
* on the registratie `BigProfile` domain type (debug-state is the sanctioned
|
||||
* cross-context devtool).
|
||||
*/
|
||||
export function redactProfile(p: BigProfile): unknown {
|
||||
return {
|
||||
registration: {
|
||||
bigNummer: maskTail(p.registration.bigNummer, 3),
|
||||
naam: REDACTED,
|
||||
beroep: p.registration.beroep,
|
||||
registratiedatum: p.registration.registratiedatum,
|
||||
geboortedatum: REDACTED,
|
||||
status: p.registration.status,
|
||||
},
|
||||
person: { naam: REDACTED, geboortedatum: REDACTED, adres: REDACTED },
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import { AdminLink, HeaderNavItem } from '@shared/layout/site-header/nav-config';
|
||||
import { FLAG_INSCHRIJVING_OPEN } from '@shared/domain/feature-flag';
|
||||
|
||||
/** This app's primary nav — provided to the shared site header via HEADER_NAV_ITEMS
|
||||
(see app.config.ts). */
|
||||
export const NAV_ITEMS: readonly HeaderNavItem[] = [
|
||||
{ label: $localize`:@@header.nav.overzicht:Overzicht`, to: '/dashboard' },
|
||||
{ label: $localize`:@@header.nav.gegevens:Mijn gegevens`, to: '/registratie' },
|
||||
{ label: $localize`:@@header.nav.herregistratie:Herregistratie`, to: '/herregistratie' },
|
||||
{
|
||||
label: $localize`:@@header.nav.inschrijven:Inschrijven`,
|
||||
to: '/registreren',
|
||||
flag: FLAG_INSCHRIJVING_OPEN,
|
||||
},
|
||||
];
|
||||
|
||||
/** This app's admin pages — provided to the shared site header (+ the dashboard's own
|
||||
Beheer section) via HEADER_ADMIN_LINKS. */
|
||||
export const ADMIN_LINKS: readonly AdminLink[] = [
|
||||
{
|
||||
label: $localize`:@@header.nav.huisstijl:Huisstijl`,
|
||||
description: $localize`:@@admin.link.huisstijl.desc:Organisatiesjablonen voor brieven beheren`,
|
||||
to: '/brief/huisstijl',
|
||||
cap: 'orgtemplate:edit',
|
||||
},
|
||||
{
|
||||
label: $localize`:@@header.nav.stamdata:Stamdata`,
|
||||
description: $localize`:@@admin.link.stamdata.desc:Business-tabellen onderhouden`,
|
||||
to: '/beheer/stamdata',
|
||||
cap: 'stamdata:edit',
|
||||
},
|
||||
{
|
||||
label: $localize`:@@header.nav.zaken:Aanvragen`,
|
||||
description: $localize`:@@admin.link.zaken.desc:Alle aanvragen bekijken en beheren`,
|
||||
to: '/beheer/zaken',
|
||||
cap: 'cases:manage',
|
||||
},
|
||||
{
|
||||
label: $localize`:@@header.nav.audit:Auditlog`,
|
||||
description: $localize`:@@admin.link.audit.desc:Toegangs- en inzagebeslissingen bekijken`,
|
||||
to: '/beheer/audit',
|
||||
cap: 'cases:manage',
|
||||
},
|
||||
{
|
||||
label: $localize`:@@header.nav.functies:Functievlaggen`,
|
||||
description: $localize`:@@admin.link.functies.desc:Functionaliteit aan- of uitzetten`,
|
||||
to: '/beheer/functies',
|
||||
cap: 'flags:manage',
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user