feat(stamdata): admin stamdata maintenance editor (beheer)
Realizes ADR-0004's "future low-code editor that commits a PR": an
admin-only stamdata maintenance editor built on the stamdata-as-code
foundation.
Backend: `professions` moves from a hardcoded C# dictionary to an embedded
`professions.json` data-file (typed as `ProfessionMapping`) with valid-time
(geldigVan/geldigTot, half-open). A generic, reflection-driven
StamdataCatalog/StamdataTable/StamdataFile describes every table so one
endpoint pair + one grid editor serve all of them; add a table in one line.
Two read-only, admin-gated endpoints (GET /stamdata, GET /stamdata/{table}
?peildatum=) — no runtime write path. Generic build gate
`Every_catalog_table_is_valid` (keys non-blank, no overlapping validity,
well-formed windows).
Frontend: new `beheer` context (route beheer/stamdata, capabilityGuard
'stamdata:edit'). A schema-driven grid editor edits rows locally; download()
emits {table}.json for the admin to commit as a reviewed PR (no mutation
command — the CI build + StamdataValidationTests stay the authority).
Full gate GREEN both sides; gen:api leaves no drift; new stamdata story
passes axe. See WP-29 + ADR-0004.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -0,0 +1,230 @@
|
||||
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()) {
|
||||
<app-button
|
||||
variant="subtle"
|
||||
[attr.aria-label]="removeLabel"
|
||||
(click)="rowRemoved.emit(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="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);
|
||||
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>();
|
||||
|
||||
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 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,61 @@
|
||||
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,83 @@
|
||||
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',
|
||||
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()"
|
||||
[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()"
|
||||
/>
|
||||
}
|
||||
</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();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user