feat(registratie): WP-36 — admin cases page + admin delete

Admin-only overview of all cases across owners + an admin delete, gated by a new `cases:manage` capability (Authz role→cap + CanManageCases + CasesAdmin gate; FE capability + guard + nav + role.interceptor prefix — the org-template/stamdata recipe). Backend adds ApplicationStore.ListAll()/DeleteAny() and GET /admin/cases + DELETE /admin/cases/{id}; admin delete removes ANY case incl. submitted. Page lives in registratie/ui (owns the Aanvraag aggregate; reuses aanvraag-view + parse), routed /beheer/zaken; delete guarded by a native confirm, optimistic with rollback. Typed client regenerated (documents the new endpoints + owner field). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-23 12:23:34 +02:00
parent d1abd35b0d
commit 446ea9474b
23 changed files with 786 additions and 9 deletions
@@ -0,0 +1,129 @@
+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 { DataBlockComponent } from '@shared/ui/data-block/data-block.component';
+import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
+import { ASYNC } from '@shared/ui/async/async.component';
+import { AccessStore } from '@shared/application/access.store';
+import { formatDatumNl } from '@shared/kernel/datum';
+import { Aanvraag } from '@registratie/domain/aanvraag';
+import { TYPE_LABELS, statusLabel, referentie } from '@registratie/domain/aanvraag-view';
+import { AdminCasesStore } from '@registratie/application/admin-cases.store';
+
+/**
+ * Admin page: every case across all owners, with an admin delete (WP-36). Lives in
+ * `registratie` (which owns the Aanvraag aggregate) — the back-office counterpart of the
+ * user's dashboard, reusing the same view labels + trust-boundary parse. Deny-by-default
+ * capability gate (`cases:manage`): a denial alert for non-admins, the list for admins.
+ * Delete is guarded by a native confirm — it is irreversible and may remove submitted cases.
+ */
+@Component({
+  selector: 'app-admin-cases-page',
+  imports: [
+    PageShellComponent,
+    AlertComponent,
+    ButtonComponent,
+    DataBlockComponent,
+    DataRowComponent,
+    ...ASYNC,
+  ],
+  styles: [
+    `
+      .case {
+        margin-block-end: var(--rhc-space-max-lg);
+      }
+    `,
+  ],
+  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 (!canManage()) {
+        <app-alert type="error">{{ deniedText }}</app-alert>
+      } @else {
+        <app-async [data]="store.cases()">
+          <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 (cases().length === 0) {
+              <app-alert type="info">{{ emptyText }}</app-alert>
+            } @else {
+              @for (c of cases(); track c.id) {
+                <div class="case">
+                  <app-data-block [heading]="typeLabel(c)" [level]="2">
+                    @for (row of rows(c); track row.key) {
+                      <div app-data-row [key]="row.key" [value]="row.value"></div>
+                    }
+                  </app-data-block>
+                  <app-button variant="secondary" (click)="confirmDelete(c)">{{
+                    deleteText
+                  }}</app-button>
+                </div>
+              }
+            }
+          </ng-template>
+        </app-async>
+      }
+    </app-page-shell>
+  `,
+})
+export class AdminCasesPage {
+  protected store = inject(AdminCasesStore);
+  protected access = inject(AccessStore);
+
+  protected canManage = computed(() => this.access.can('cases:manage'));
+  protected cases = computed(() => {
+    const rd = this.store.cases();
+    return rd.tag === 'Success' ? rd.value : [];
+  });
+
+  protected heading = $localize`:@@adminCases.heading:Aanvragen beheren`;
+  protected intro = $localize`:@@adminCases.intro:Alle aanvragen in het register. Een aanvraag verwijderen kan niet ongedaan worden gemaakt.`;
+  protected deniedText = $localize`:@@adminCases.denied:U hebt geen rechten om aanvragen te beheren.`;
+  protected failedText = $localize`:@@adminCases.failed:De aanvragen konden niet worden geladen.`;
+  protected emptyText = $localize`:@@adminCases.empty:Er zijn geen aanvragen.`;
+  protected retryText = $localize`:@@adminCases.retry:Opnieuw proberen`;
+  protected deleteText = $localize`:@@adminCases.delete:Verwijderen`;
+
+  private ownerKey = $localize`:@@adminCases.owner:Eigenaar (BSN)`;
+  private statusKey = $localize`:@@adminCases.status:Status`;
+  private refKey = $localize`:@@adminCases.referentie:Referentie`;
+  private ingediendKey = $localize`:@@adminCases.ingediend:Ingediend op`;
+
+  protected typeLabel = (c: Aanvraag) => TYPE_LABELS[c.type];
+
+  /** Key/value rows for one case (owner + lifecycle facts; the type is the block heading). */
+  protected rows(c: Aanvraag): { key: string; value: string }[] {
+    return [
+      { key: this.ownerKey, value: c.owner ?? '—' },
+      { key: this.statusKey, value: statusLabel(c.status) },
+      { key: this.refKey, value: referentie(c.status) || '—' },
+      { key: this.ingediendKey, value: c.submittedAt ? formatDatumNl(c.submittedAt) : '—' },
+    ];
+  }
+
+  private loadRequested = false;
+  constructor() {
+    // Load once the capability resolves to allowed (a 403 GET would be wasted otherwise).
+    // Depends only on canManage() + a plain flag — never the store model (WP-26 loop lesson).
+    effect(() => {
+      if (this.canManage() && !this.loadRequested) {
+        this.loadRequested = true;
+        void this.store.load();
+      }
+    });
+  }
+
+  protected reload() {
+    void this.store.load();
+  }
+
+  /** Native confirm — no dialog component exists, and admin delete is irreversible. */
+  protected confirmDelete(c: Aanvraag) {
+    const msg = $localize`:@@adminCases.confirm:Deze aanvraag definitief verwijderen?`;
+    if (confirm(msg)) void this.store.delete(c.id);
+  }
+}