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,128 @@
|
||||
import { Component, computed, effect, inject } from '@angular/core';
|
||||
import { DatePipe } from '@angular/common';
|
||||
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 { AuditStore } from '@beheer/application/audit.store';
|
||||
|
||||
/**
|
||||
* Admin page: the persisted authz/PII-reveal audit trail (WP-41/42) — data-minimised, no PII.
|
||||
* Deny-by-default capability gate (`cases:manage`, reused for admin audit read). Read-only table.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-audit-page',
|
||||
imports: [PageShellComponent, AlertComponent, ButtonComponent, DatePipe, ...ASYNC],
|
||||
styles: [
|
||||
`
|
||||
.scroll {
|
||||
overflow-x: auto;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--rhc-text-font-size-sm);
|
||||
}
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: var(--rhc-space-max-sm) var(--rhc-space-max-md);
|
||||
border-block-end: var(--rhc-border-width-sm) solid var(--rhc-color-cool-grey-200);
|
||||
white-space: nowrap;
|
||||
}
|
||||
th {
|
||||
font-weight: var(--rhc-text-font-weight-semi-bold);
|
||||
}
|
||||
.deny {
|
||||
color: var(--rhc-color-rood-600, #a30000);
|
||||
font-weight: var(--rhc-text-font-weight-semi-bold);
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
<app-page-shell [heading]="heading" [intro]="intro" backLink="/dashboard">
|
||||
@if (!access.ready()) {
|
||||
<!-- wait for /me before deciding — avoids flashing the denial to an admin -->
|
||||
} @else if (!canRead()) {
|
||||
<app-alert type="error">{{ deniedText }}</app-alert>
|
||||
} @else {
|
||||
<app-async [data]="store.entries()">
|
||||
<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 (entries().length === 0) {
|
||||
<app-alert type="info">{{ emptyText }}</app-alert>
|
||||
} @else {
|
||||
<div class="scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ colTijd }}</th>
|
||||
<th>{{ colActie }}</th>
|
||||
<th>{{ colResource }}</th>
|
||||
<th>{{ colBesluit }}</th>
|
||||
<th>{{ colRol }}</th>
|
||||
<th>{{ colCid }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (e of entries(); track e.at + e.action + e.correlationId) {
|
||||
<tr>
|
||||
<td>{{ e.at | date: 'short' }}</td>
|
||||
<td>{{ e.action }}</td>
|
||||
<td>{{ e.resource }}</td>
|
||||
<td [class.deny]="e.decision === 'deny'">{{ e.decision }}</td>
|
||||
<td>{{ e.role }}</td>
|
||||
<td>{{ e.correlationId }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
</ng-template>
|
||||
</app-async>
|
||||
}
|
||||
</app-page-shell>
|
||||
`,
|
||||
})
|
||||
export class AuditPage {
|
||||
protected store = inject(AuditStore);
|
||||
protected access = inject(AccessStore);
|
||||
|
||||
protected canRead = computed(() => this.access.can('cases:manage'));
|
||||
protected entries = computed(() => {
|
||||
const rd = this.store.entries();
|
||||
return rd.tag === 'Success' ? rd.value : [];
|
||||
});
|
||||
|
||||
protected heading = $localize`:@@audit.heading:Auditlog`;
|
||||
protected intro = $localize`:@@audit.intro:Toegangs- en inzagebeslissingen (autorisatie en het tonen van afgeschermde gegevens). Vastgelegd zonder persoonsgegevens.`;
|
||||
protected deniedText = $localize`:@@audit.denied:U hebt geen rechten om de auditlog te bekijken.`;
|
||||
protected failedText = $localize`:@@audit.failed:De auditlog kon niet worden geladen.`;
|
||||
protected emptyText = $localize`:@@audit.empty:Nog geen auditregels.`;
|
||||
protected retryText = $localize`:@@audit.retry:Opnieuw proberen`;
|
||||
protected colTijd = $localize`:@@audit.col.tijd:Tijd`;
|
||||
protected colActie = $localize`:@@audit.col.actie:Actie`;
|
||||
protected colResource = $localize`:@@audit.col.resource:Resource`;
|
||||
protected colBesluit = $localize`:@@audit.col.besluit:Besluit`;
|
||||
protected colRol = $localize`:@@audit.col.rol:Rol`;
|
||||
protected colCid = $localize`:@@audit.col.cid:Correlatie-id`;
|
||||
|
||||
private loadRequested = false;
|
||||
constructor() {
|
||||
effect(() => {
|
||||
if (this.canRead() && !this.loadRequested) {
|
||||
this.loadRequested = true;
|
||||
void this.store.load();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
protected reload() {
|
||||
void this.store.load();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
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 { AccessStore } from '@shared/application/access.store';
|
||||
import { FeatureFlagStore } from '@shared/application/feature-flags.store';
|
||||
|
||||
/**
|
||||
* Admin page: toggle runtime feature flags (WP-47). Deny-by-default capability gate
|
||||
* (`flags:manage`). The catalog is server-owned (code); this only flips the on/off state, which
|
||||
* the whole app reads via the same `FeatureFlagStore`.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-feature-flags-page',
|
||||
imports: [PageShellComponent, AlertComponent, ButtonComponent, ...ASYNC],
|
||||
styles: [
|
||||
`
|
||||
.flag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--rhc-space-max-lg);
|
||||
padding: var(--rhc-space-max-md) 0;
|
||||
border-block-end: var(--rhc-border-width-sm) solid var(--rhc-color-cool-grey-200);
|
||||
}
|
||||
.flag .meta {
|
||||
min-inline-size: 0;
|
||||
}
|
||||
.flag .key {
|
||||
font-family: monospace;
|
||||
font-size: var(--rhc-text-font-size-sm);
|
||||
color: var(--rhc-color-grijs-700);
|
||||
}
|
||||
.state {
|
||||
font-weight: var(--rhc-text-font-weight-semi-bold);
|
||||
margin-inline-end: var(--rhc-space-max-md);
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
<app-page-shell [heading]="heading" [intro]="intro" backLink="/dashboard">
|
||||
@if (!access.ready()) {
|
||||
<!-- wait for /me before deciding -->
|
||||
} @else if (!canManage()) {
|
||||
<app-alert type="error">{{ deniedText }}</app-alert>
|
||||
} @else {
|
||||
<app-async [data]="store.flags()">
|
||||
<ng-template appAsyncError>
|
||||
<app-alert type="error">{{ failedText }}</app-alert>
|
||||
<app-button variant="secondary" (click)="reload()">{{ retryText }}</app-button>
|
||||
</ng-template>
|
||||
<ng-template appAsyncLoaded>
|
||||
@for (f of store.all(); track f.key) {
|
||||
<div class="flag">
|
||||
<div class="meta">
|
||||
<div>{{ f.description }}</div>
|
||||
<div class="key">{{ f.key }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="state">{{ f.enabled ? onText : offText }}</span>
|
||||
<app-button
|
||||
[variant]="f.enabled ? 'secondary' : 'primary'"
|
||||
(click)="toggle(f.key, !f.enabled)"
|
||||
>{{ f.enabled ? disableText : enableText }}</app-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</ng-template>
|
||||
</app-async>
|
||||
}
|
||||
</app-page-shell>
|
||||
`,
|
||||
})
|
||||
export class FeatureFlagsPage {
|
||||
protected store = inject(FeatureFlagStore);
|
||||
protected access = inject(AccessStore);
|
||||
|
||||
protected canManage = computed(() => this.access.can('flags:manage'));
|
||||
|
||||
protected heading = $localize`:@@flags.heading:Functievlaggen`;
|
||||
protected intro = $localize`:@@flags.intro:Zet functionaliteit aan of uit tijdens runtime. De catalogus staat vast in code; hier beheert u de status.`;
|
||||
protected deniedText = $localize`:@@flags.denied:U hebt geen rechten om functievlaggen te beheren.`;
|
||||
protected failedText = $localize`:@@flags.failed:De functievlaggen konden niet worden geladen.`;
|
||||
protected retryText = $localize`:@@flags.retry:Opnieuw proberen`;
|
||||
protected onText = $localize`:@@flags.on:Aan`;
|
||||
protected offText = $localize`:@@flags.off:Uit`;
|
||||
protected enableText = $localize`:@@flags.enable:Aanzetten`;
|
||||
protected disableText = $localize`:@@flags.disable:Uitzetten`;
|
||||
|
||||
protected toggle(key: string, enabled: boolean) {
|
||||
void this.store.set(key, enabled);
|
||||
}
|
||||
protected reload() {
|
||||
void this.store.load();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,262 @@
|
||||
import { Component, computed, input, output } from '@angular/core';
|
||||
import { ButtonComponent } from '@shared/ui/button/button.component';
|
||||
import { ChangeCounts, StamColumn, StamRow, StamTable, activeOn } from '@beheer/domain/stamdata';
|
||||
|
||||
interface DisplayRow {
|
||||
row: StamRow;
|
||||
index: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Organism: the GENERIC stamdata grid. It renders entirely from the reflected column
|
||||
* schema — one input per column type (native `date`/`number`, `enum` select, text) — so a
|
||||
* new stamdata table needs zero UI code here. The "geldig op" control filters to the rows
|
||||
* valid on a date (read-only preview); edits and download work on the full set. Emits
|
||||
* intent; the store owns state (CLAUDE.md §1).
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-stamdata-table-editor',
|
||||
imports: [ButtonComponent],
|
||||
styles: [
|
||||
`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
align-items: end;
|
||||
margin-block-end: 1rem;
|
||||
}
|
||||
.field label {
|
||||
display: block;
|
||||
font-size: 0.85em;
|
||||
color: var(--rhc-color-foreground-subtle);
|
||||
}
|
||||
table {
|
||||
inline-size: 100%;
|
||||
}
|
||||
.err {
|
||||
color: var(--rhc-color-rood-500);
|
||||
font-size: 0.85em;
|
||||
}
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
margin-block-start: 1rem;
|
||||
}
|
||||
.counts {
|
||||
color: var(--rhc-color-foreground-subtle);
|
||||
}
|
||||
.hint {
|
||||
margin-block-start: 0.5rem;
|
||||
color: var(--rhc-color-foreground-subtle);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
<div class="toolbar">
|
||||
@if (tables().length > 1) {
|
||||
<div class="field">
|
||||
<label for="stamdata-table">{{ tableLabel }}</label>
|
||||
<select
|
||||
id="stamdata-table"
|
||||
class="form-select"
|
||||
[value]="selectedTableId()"
|
||||
(change)="selectTable.emit(asValue($event))"
|
||||
>
|
||||
@for (t of tables(); track t.id) {
|
||||
<option [value]="t.id">{{ t.label }}</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (table().temporal) {
|
||||
<div class="field">
|
||||
<label for="stamdata-peildatum">{{ peildatumLabel }}</label>
|
||||
<input
|
||||
id="stamdata-peildatum"
|
||||
type="date"
|
||||
class="form-control"
|
||||
[value]="previewDate()"
|
||||
(input)="previewDateChanged.emit(asValue($event))"
|
||||
/>
|
||||
</div>
|
||||
@if (previewing()) {
|
||||
<app-button variant="subtle" (click)="previewDateChanged.emit('')">{{
|
||||
showAll
|
||||
}}</app-button>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (previewing()) {
|
||||
<p class="hint">{{ previewNote }}</p>
|
||||
}
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
@for (col of table().columns; track col.name) {
|
||||
<th scope="col">{{ col.name }}</th>
|
||||
}
|
||||
<th scope="col">{{ previewing() ? '' : actionsLabel }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (item of display(); track item.index) {
|
||||
<tr>
|
||||
@for (col of table().columns; track col.name) {
|
||||
<td>
|
||||
@if (col.type === 'enum') {
|
||||
<select
|
||||
class="form-select"
|
||||
[value]="item.row[col.name]"
|
||||
[disabled]="previewing()"
|
||||
[attr.aria-label]="cellLabel(col, item.index)"
|
||||
(change)="
|
||||
cellEdited.emit({ row: item.index, column: col.name, value: asValue($event) })
|
||||
"
|
||||
>
|
||||
<option value=""></option>
|
||||
@for (opt of col.options; track opt) {
|
||||
<option [value]="opt">{{ opt }}</option>
|
||||
}
|
||||
</select>
|
||||
} @else {
|
||||
<input
|
||||
class="form-control"
|
||||
[type]="inputType(col)"
|
||||
[value]="item.row[col.name]"
|
||||
[class.is-invalid]="!!errors()[item.index]"
|
||||
[disabled]="previewing()"
|
||||
[attr.aria-label]="cellLabel(col, item.index)"
|
||||
(input)="
|
||||
cellEdited.emit({ row: item.index, column: col.name, value: asValue($event) })
|
||||
"
|
||||
/>
|
||||
}
|
||||
</td>
|
||||
}
|
||||
<td>
|
||||
@if (!previewing()) {
|
||||
@if (table().temporal) {
|
||||
<app-button variant="subtle" (click)="onExpire(item.index)">{{
|
||||
expireLabel
|
||||
}}</app-button>
|
||||
}
|
||||
<app-button
|
||||
variant="subtle"
|
||||
[attr.aria-label]="removeLabel"
|
||||
(click)="onRemove(item.index)"
|
||||
>{{ removeLabel }}</app-button
|
||||
>
|
||||
}
|
||||
@if (errors()[item.index]) {
|
||||
<span class="err">{{ errors()[item.index] }}</span>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@if (!previewing()) {
|
||||
<div class="footer">
|
||||
<app-button variant="subtle" [disabled]="!canUndo()" (click)="undo.emit()">{{
|
||||
undoLabel
|
||||
}}</app-button>
|
||||
<app-button variant="subtle" [disabled]="!canRedo()" (click)="redo.emit()">{{
|
||||
redoLabel
|
||||
}}</app-button>
|
||||
<app-button variant="secondary" (click)="rowAdded.emit()">{{ addRowLabel }}</app-button>
|
||||
<span class="counts">{{ countsLabel() }}</span>
|
||||
<app-button variant="primary" [disabled]="!canDownload()" (click)="download.emit()">{{
|
||||
downloadLabel
|
||||
}}</app-button>
|
||||
</div>
|
||||
<p class="hint">{{ applyHint }}</p>
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class StamdataTableEditorComponent {
|
||||
table = input.required<StamTable>();
|
||||
rows = input.required<readonly StamRow[]>();
|
||||
errors = input.required<readonly string[]>();
|
||||
counts = input.required<ChangeCounts>();
|
||||
previewDate = input('');
|
||||
canDownload = input(false);
|
||||
canUndo = input(false);
|
||||
canRedo = input(false);
|
||||
tables = input<readonly StamTable[]>([]);
|
||||
selectedTableId = input<string | null>(null);
|
||||
|
||||
selectTable = output<string>();
|
||||
cellEdited = output<{ row: number; column: string; value: string }>();
|
||||
rowAdded = output<void>();
|
||||
rowRemoved = output<number>();
|
||||
previewDateChanged = output<string>();
|
||||
download = output<void>();
|
||||
undo = output<void>();
|
||||
redo = output<void>();
|
||||
|
||||
protected previewing = computed(() => this.previewDate() !== '');
|
||||
|
||||
protected display = computed<DisplayRow[]>(() =>
|
||||
this.rows()
|
||||
.map((row, index) => ({ row, index }))
|
||||
.filter(({ row }) => !this.previewing() || activeOn(this.table(), row, this.previewDate())),
|
||||
);
|
||||
|
||||
protected inputType(col: StamColumn): string {
|
||||
return col.type === 'date' ? 'date' : col.type === 'number' ? 'number' : 'text';
|
||||
}
|
||||
|
||||
protected cellLabel(col: StamColumn, index: number): string {
|
||||
return `${col.name} — rij ${index + 1}`;
|
||||
}
|
||||
|
||||
protected asValue(e: Event): string {
|
||||
return (e.target as HTMLInputElement | HTMLSelectElement).value;
|
||||
}
|
||||
|
||||
private addedWord = $localize`:@@beheer.added:toegevoegd`;
|
||||
private editedWord = $localize`:@@beheer.edited:gewijzigd`;
|
||||
private removedWord = $localize`:@@beheer.removed:verwijderd`;
|
||||
protected countsLabel = computed(() => {
|
||||
const c = this.counts();
|
||||
return `${c.added} ${this.addedWord} · ${c.edited} ${this.editedWord} · ${c.removed} ${this.removedWord}`;
|
||||
});
|
||||
|
||||
protected tableLabel = $localize`:@@beheer.table:Tabel`;
|
||||
protected peildatumLabel = $localize`:@@beheer.peildatum:Toon geldig op`;
|
||||
protected showAll = $localize`:@@beheer.showAll:Toon alles`;
|
||||
protected previewNote = $localize`:@@beheer.previewNote:Voorbeeld: alleen de rijen die op deze datum geldig zijn. Bewerken staat uit.`;
|
||||
protected actionsLabel = $localize`:@@beheer.actions:Acties`;
|
||||
protected removeLabel = $localize`:@@beheer.remove:Verwijderen`;
|
||||
protected expireLabel = $localize`:@@beheer.expire:Sluiten per vandaag`;
|
||||
private removeConfirm = $localize`:@@beheer.removeConfirm:Rij verwijderen? Als andere gegevens ernaar verwijzen, faalt de build-controle (CI). Bij een tabel met een geldigheidsperiode kunt u de rij beter sluiten (geldig tot) in plaats van verwijderen.`;
|
||||
|
||||
/** Deletions can orphan a reference (the CI gate catches it); confirm first (WP-48). */
|
||||
protected onRemove(index: number) {
|
||||
if (confirm(this.removeConfirm)) this.rowRemoved.emit(index);
|
||||
}
|
||||
|
||||
/** Steer temporal tables toward expiring (close the validity per today) over hard delete —
|
||||
preserves history and can't orphan a reference that was valid earlier (WP-48). */
|
||||
protected onExpire(index: number) {
|
||||
const col = this.table().columns.find((c) => /geldigtot/i.test(c.name));
|
||||
if (col) this.cellEdited.emit({ row: index, column: col.name, value: this.today });
|
||||
}
|
||||
private today = new Date().toISOString().slice(0, 10);
|
||||
protected undoLabel = $localize`:@@beheer.undo:Ongedaan maken`;
|
||||
protected redoLabel = $localize`:@@beheer.redo:Opnieuw uitvoeren`;
|
||||
protected addRowLabel = $localize`:@@beheer.addRow:Rij toevoegen`;
|
||||
protected downloadLabel = $localize`:@@beheer.download:Download JSON`;
|
||||
protected applyHint = $localize`:@@beheer.applyHint:Wijzigingen worden als JSON-bestand gedownload en via een pull request toegepast — de build (CI) controleert ze.`;
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { StamdataTableEditorComponent } from './stamdata-table-editor.component';
|
||||
import { StamRow, StamTable, changeCounts, rowErrors } from '@beheer/domain/stamdata';
|
||||
|
||||
const table: StamTable = {
|
||||
id: 'professions',
|
||||
label: 'Opleiding → beroep',
|
||||
temporal: true,
|
||||
columns: [
|
||||
{ name: 'program', type: 'text', isKey: true, options: [] },
|
||||
{ name: 'beroep', type: 'text', isKey: false, options: [] },
|
||||
{ name: 'geldigVan', type: 'date', isKey: false, options: [] },
|
||||
{ name: 'geldigTot', type: 'date', isKey: false, options: [] },
|
||||
],
|
||||
};
|
||||
|
||||
const rows: StamRow[] = [
|
||||
{ program: 'geneeskunde', beroep: 'Arts', geldigVan: '2000-01-01', geldigTot: '' },
|
||||
{ program: 'verpleegkunde', beroep: 'Verpleegkundige', geldigVan: '2000-01-01', geldigTot: '' },
|
||||
{
|
||||
program: 'fysiotherapie',
|
||||
beroep: 'Fysiotherapeut',
|
||||
geldigVan: '2000-01-01',
|
||||
geldigTot: '2020-01-01',
|
||||
},
|
||||
];
|
||||
|
||||
const meta: Meta<StamdataTableEditorComponent> = {
|
||||
title: 'Domein/Beheer/Stamdata Table Editor',
|
||||
component: StamdataTableEditorComponent,
|
||||
args: {
|
||||
table,
|
||||
rows,
|
||||
errors: rowErrors(table, rows),
|
||||
counts: changeCounts(table, rows, rows),
|
||||
previewDate: '',
|
||||
canDownload: false,
|
||||
tables: [table],
|
||||
selectedTableId: 'professions',
|
||||
},
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<StamdataTableEditorComponent>;
|
||||
|
||||
export const Editing: Story = {};
|
||||
|
||||
export const Dirty: Story = {
|
||||
args: {
|
||||
counts: { added: 1, edited: 1, removed: 0 },
|
||||
canDownload: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const Invalid: Story = {
|
||||
args: {
|
||||
rows: [
|
||||
{ program: '', beroep: 'Arts', geldigVan: '2000-01-01', geldigTot: '' },
|
||||
...rows.slice(1),
|
||||
],
|
||||
errors: rowErrors(table, [
|
||||
{ program: '', beroep: 'Arts', geldigVan: '2000-01-01', geldigTot: '' },
|
||||
...rows.slice(1),
|
||||
]),
|
||||
},
|
||||
};
|
||||
|
||||
export const PeildatumPreview: Story = {
|
||||
args: { previewDate: '2021-01-01' },
|
||||
};
|
||||
@@ -0,0 +1,105 @@
|
||||
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 { StamdataStore } from '@beheer/application/stamdata.store';
|
||||
import { StamdataTableEditorComponent } from '@beheer/ui/stamdata-table-editor/stamdata-table-editor.component';
|
||||
|
||||
/**
|
||||
* Page: thin container for the stamdata maintenance editor (ADR-0004). Deny-by-default
|
||||
* capability gate (`stamdata:edit`) — a denial alert for non-admins, the generic grid for
|
||||
* admins. Loads once the capability resolves; wires store commands to the organism.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-stamdata-page',
|
||||
host: { '(document:keydown)': 'onKeydown($event)' },
|
||||
imports: [
|
||||
PageShellComponent,
|
||||
AlertComponent,
|
||||
ButtonComponent,
|
||||
...ASYNC,
|
||||
StamdataTableEditorComponent,
|
||||
],
|
||||
template: `
|
||||
<app-page-shell [heading]="heading" [intro]="intro" backLink="/dashboard">
|
||||
@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.table(); as table) {
|
||||
<app-stamdata-table-editor
|
||||
[table]="table"
|
||||
[rows]="store.rows()"
|
||||
[errors]="store.errors()"
|
||||
[counts]="store.counts()"
|
||||
[previewDate]="store.previewDate()"
|
||||
[canDownload]="store.canDownload()"
|
||||
[canUndo]="store.canUndo()"
|
||||
[canRedo]="store.canRedo()"
|
||||
[tables]="store.tables()"
|
||||
[selectedTableId]="store.selectedTableId()"
|
||||
(selectTable)="store.selectTable($event)"
|
||||
(cellEdited)="store.editCell($event.row, $event.column, $event.value)"
|
||||
(rowAdded)="store.addRow()"
|
||||
(rowRemoved)="store.removeRow($event)"
|
||||
(previewDateChanged)="store.setPreviewDate($event)"
|
||||
(download)="store.download()"
|
||||
(undo)="store.undo()"
|
||||
(redo)="store.redo()"
|
||||
/>
|
||||
}
|
||||
</ng-template>
|
||||
</app-async>
|
||||
}
|
||||
</app-page-shell>
|
||||
`,
|
||||
})
|
||||
export class StamdataPage {
|
||||
protected store = inject(StamdataStore);
|
||||
protected access = inject(AccessStore);
|
||||
|
||||
protected canEdit = computed(() => this.access.can('stamdata:edit'));
|
||||
|
||||
protected heading = $localize`:@@beheer.page.heading:Stamdata onderhouden`;
|
||||
protected intro = $localize`:@@beheer.page.intro:Beheer de business-tabellen die de registratie stuurt. Wijzigingen worden als JSON gedownload en via een pull request toegepast; de build blijft de bewaker.`;
|
||||
protected deniedText = $localize`:@@beheer.page.denied:U hebt geen rechten om stamdata te onderhouden.`;
|
||||
protected failedText = $localize`:@@beheer.page.failed:De stamdata kon niet worden geladen.`;
|
||||
protected retryText = $localize`:@@beheer.page.retry:Opnieuw proberen`;
|
||||
|
||||
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 (the WP-26 runaway-loop lesson).
|
||||
effect(() => {
|
||||
if (this.canEdit() && !this.loadRequested) {
|
||||
this.loadRequested = true;
|
||||
void this.store.load();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
protected reload() {
|
||||
void this.store.load();
|
||||
}
|
||||
|
||||
/** Ctrl/Cmd+Z undo, Ctrl/Cmd+Shift+Z redo (WP-32). Ignored while focus is in a grid
|
||||
cell input so the browser's native text-undo still works there (mirrors brief.page). */
|
||||
protected onKeydown(e: KeyboardEvent) {
|
||||
if (!this.canEdit() || !(e.ctrlKey || e.metaKey) || (e.key !== 'z' && e.key !== 'Z')) return;
|
||||
const t = e.target as HTMLElement | null;
|
||||
if (t && (t.isContentEditable || ['INPUT', 'SELECT', 'TEXTAREA'].includes(t.tagName))) return;
|
||||
e.preventDefault();
|
||||
if (e.shiftKey) this.store.redo();
|
||||
else this.store.undo();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user