From 28fd4ca9646d475bb9e55b9f35e75a28d2415c35 Mon Sep 17 00:00:00 2001
From: Niek Otten <not@respellion.nl>
Date: Mon, 13 Jul 2026 16:11:19 +0200
Subject: [PATCH] feat(portal-openbaar): render the public register with search
 + empty state (refs #10)

Implement RegisterPage: load the full public register from the BFF on open, filter
by the search term via /openbaar/register?q=, and show a results table (referentie +
status), a loading indicator, and an empty-state message. Anonymous, same-origin
relative calls. Adds the app-shell spec. All openbaar lint/test/build green.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/openbaar/src/app/app.spec.ts             | 14 ++++++
 .../src/app/register/register-page.html       | 49 +++++++++++++++++++
 .../src/app/register/register-page.ts         | 20 +++++++-
 3 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 apps/openbaar/src/app/app.spec.ts

diff --git a/apps/openbaar/src/app/app.spec.ts b/apps/openbaar/src/app/app.spec.ts
new file mode 100644
index 0000000..133f47b
--- /dev/null
+++ b/apps/openbaar/src/app/app.spec.ts
@@ -0,0 +1,14 @@
+import { provideRouter } from '@angular/router';
+import { render } from '@testing-library/angular';
+import { App } from './app';
+
+describe('App', () => {
+  it('renders the router outlet shell', async () => {
+    const { container } = await render(App, {
+      providers: [provideRouter([])],
+    });
+
+    // The shell is a thin host for routed pages (the RegisterPage owns the heading).
+    expect(container.querySelector('router-outlet')).toBeTruthy();
+  });
+});
diff --git a/apps/openbaar/src/app/register/register-page.html b/apps/openbaar/src/app/register/register-page.html
index c6745e4..2051621 100644
--- a/apps/openbaar/src/app/register/register-page.html
+++ b/apps/openbaar/src/app/register/register-page.html
@@ -1,5 +1,54 @@
 <main utrecht-document class="utrecht-theme">
   <utrecht-article>
     <utrecht-heading-1>Openbaar BIG-register</utrecht-heading-1>
+    <p utrecht-paragraph>
+      Zoek in het openbare register van BIG-registraties. Alleen publieke gegevens worden getoond.
+    </p>
+
+    <div role="search">
+      <label for="register-search" utrecht-form-label>Zoek op referentie</label>
+      <input
+        id="register-search"
+        type="search"
+        utrecht-textbox
+        [ngModel]="query()"
+        (ngModelChange)="query.set($event)"
+        [ngModelOptions]="{ standalone: true }"
+        (keyup.enter)="search()"
+      />
+      <button
+        utrecht-button
+        appearance="primary-action-button"
+        type="button"
+        [disabled]="loading()"
+        (click)="search()"
+      >
+        Zoeken
+      </button>
+    </div>
+
+    @if (loading()) {
+      <p utrecht-paragraph role="status">Bezig met laden…</p>
+    } @else if (searched() && entries().length === 0) {
+      <p utrecht-paragraph role="status">Geen inschrijvingen gevonden.</p>
+    } @else if (entries().length > 0) {
+      <table utrecht-table>
+        <caption>Inschrijvingen in het openbaar register</caption>
+        <thead>
+          <tr>
+            <th scope="col">Referentie</th>
+            <th scope="col">Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (entry of entries(); track entry.id) {
+            <tr>
+              <td>{{ entry.id }}</td>
+              <td>{{ entry.status }}</td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    }
   </utrecht-article>
 </main>
diff --git a/apps/openbaar/src/app/register/register-page.ts b/apps/openbaar/src/app/register/register-page.ts
index 83276af..0f94d66 100644
--- a/apps/openbaar/src/app/register/register-page.ts
+++ b/apps/openbaar/src/app/register/register-page.ts
@@ -21,7 +21,25 @@ export class RegisterPage {
   protected readonly loading = signal(false);
   protected readonly searched = signal(false);
 
+  constructor() {
+    // Show the full register on open; the search box narrows it.
+    this.search();
+  }
+
   search(): void {
-    // TODO(#10): query the BFF and render the results.
+    const q = this.query().trim();
+    this.loading.set(true);
+    this.bff.getOpenbaarRegister(q ? { q } : {}).subscribe({
+      next: (rows: OpenbaarEntry[]) => {
+        this.entries.set(rows);
+        this.loading.set(false);
+        this.searched.set(true);
+      },
+      error: () => {
+        this.entries.set([]);
+        this.loading.set(false);
+        this.searched.set(true);
+      },
+    });
   }
 }