@nauticana/sail 1.1.9 → 1.1.10

package/src/component/table/table_list.html

@@ -4,7 +4,7 @@
     @if (canCreate()) {
         <button matButton="elevated" class="accent" (click)="addRecord()">New Record</button>
     }
-    @for (action of getActions(false); track action.action) {
+    @for (action of tableActions(); track action.action) {
         @if (canExecuteAction(action)) {
             <button matButton="outlined" type="button"
                     [title]="action.caption"
@@ -16,33 +16,56 @@
     }
 </div>
 
+@if (viewError()) {
+    <p class="table-list__error" role="alert">{{ viewError() }}</p>
+}
+
 <table>
     <thead>
         <tr>
-            @for (column of displayedColumns; track column) {
-                <th>{{ colCaption(column) }}</th>
+            @for (column of displayedColumns(); track column) {
+                <th scope="col">
+                    @if (column !== 'actions') {
+                        <button type="button" class="table-list__sort" (click)="onSortColumn(column)"
+                                [attr.aria-sort]="sortColumn() === column ? (sortAscending() ? 'ascending' : 'descending') : null">
+                            {{ colCaption(column) }}
+                            @if (sortColumn() === column) {
+                                <mat-icon>{{ sortAscending() ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>
+                            }
+                        </button>
+                    } @else {
+                        {{ colCaption(column) }}
+                    }
+                </th>
             }
         </tr>
     </thead>
-@if (records.length > 0) {
+@if (sortedRecords().length > 0) {
     <tbody>
-    @for (record of records; track trackByRecord($index, record)) {
+    @for (record of sortedRecords(); track trackByRecord($index, record)) {
         <tr>
-        @for (column of displayedColumns; track column) {
+        @for (column of displayedColumns(); track column) {
             <td>
             @if (isLinkColumn(column)) {
-                <a tabindex="0" role="button" (click)="editRecord(record)" (keydown.enter)="editRecord(record)">{{ displayValue(column, record[column]) }}</a>
+                <a tabindex="0" role="button" (click)="editRecord(record)"
+                   (keydown.enter)="editRecord(record)"
+                   (keydown.space)="$event.preventDefault(); editRecord(record)">{{ displayValue(column, record[column]) }}</a>
             } @else if (isBoolean(column)) {
-                <mat-checkbox [checked]="record[column] === true || record[column] === 'T'" disabled></mat-checkbox>
+                <mat-checkbox [checked]="record[column] === true || record[column] === 'T'" disabled [aria-label]="colCaption(column)"></mat-checkbox>
             } @else if (column !== 'actions') {
                 {{ displayValue(column, record[column]) }}
             } @else {
-                <button matIconButton type="button" (click)="editRecord(record)" title="Edit"><mat-icon>edit</mat-icon></button>
-                <button matIconButton type="button" (click)="deleteRecord(record)" title="Delete"><mat-icon>delete</mat-icon></button>
-                @for (action of getActions(true); track action.action) {
+                @if (canUpdate() || canRead()) {
+                    <button matIconButton type="button" (click)="editRecord(record)" title="Edit" aria-label="Edit"><mat-icon>edit</mat-icon></button>
+                }
+                @if (canDelete()) {
+                    <button matIconButton type="button" (click)="deleteRecord(record)" title="Delete" aria-label="Delete"><mat-icon>delete</mat-icon></button>
+                }
+                @for (action of recordActions(); track action.action) {
                     @if (canExecuteAction(action)) {
                         <button matIconButton type="button"
                                 [title]="action.caption"
+                                [attr.aria-label]="action.caption"
                                 (click)="executeAction(action, record)">
                             <mat-icon>{{ action.icon || 'play_arrow' }}</mat-icon>
                         </button>
@@ -57,6 +80,16 @@
 }
 </table>
 
-@if (records.length === 0 && displayedColumns.length > 0) {
+@if (total() > pageSizeOptions[0]) {
+    <mat-paginator [length]="total()"
+                   [pageIndex]="pageIndex()"
+                   [pageSize]="pageSize()"
+                   [pageSizeOptions]="pageSizeOptions"
+                   (page)="onPage($event)"
+                   aria-label="Select page">
+    </mat-paginator>
+}
+
+@if (records().length === 0 && displayedColumns().length > 0 && !viewError()) {
     <p class="empty-state">No records found.</p>
 }

package/src/component/table/table_list.ts

@@ -1,34 +1,61 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, input, linkedSignal, OnInit, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, input, linkedSignal, OnInit, signal, Type, ViewEncapsulation } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { ActivatedRoute, Params } from "@angular/router";
-import { BaseView } from "../abstract/base_view";
+import { catchError, EMPTY, Observable, switchMap, take, tap } from "rxjs";
+import { errorDetail } from "../../util/errors";
+import { AbstractEditableView } from "../abstract/base_view";
 import { TableEdit } from "./table_edit";
 import { MatButtonModule } from "@angular/material/button";
 import { MatCheckboxModule } from "@angular/material/checkbox";
 import { MatIconModule } from "@angular/material/icon";
+import { MatPaginatorModule, PageEvent } from "@angular/material/paginator";
 
 @Component({
     selector: 'sail-table-list',
     templateUrl: './table_list.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
-    imports: [MatButtonModule, MatCheckboxModule, MatIconModule],
+    imports: [MatButtonModule, MatCheckboxModule, MatIconModule, MatPaginatorModule],
 })
-export class TableList extends BaseView implements OnInit {
+export class TableList extends AbstractEditableView implements OnInit {
     override dialogWidth = '400px';
     readonly tableNameInput       = input('',          { alias: 'tableName' });
     readonly apiNameInput          = input('',          { alias: 'apiName' });
-    readonly dialogComponentInput  = input<any>(undefined, { alias: 'dialogComponent' });
+    readonly dialogComponentInput  = input<Type<unknown> | undefined>(undefined, { alias: 'dialogComponent' });
 
     // linkedSignal: defaults to the consumer's input, but ngOnInit / route data
     // can override with `.set()`. The `computation` preserves the last
     // non-empty value when the input transiently becomes empty.
     override readonly tableName       = linkedSignal<string, string>({ source: () => this.tableNameInput(),      computation: (v, p) => v || p?.value || '' });
     override readonly apiName         = linkedSignal<string, string>({ source: () => this.apiNameInput(),        computation: (v, p) => v || p?.value || '' });
-    override readonly dialogComponent = linkedSignal<any, any>({       source: () => this.dialogComponentInput(), computation: (v, p) => v ?? p?.value });
+    override readonly dialogComponent = linkedSignal<Type<unknown> | undefined, Type<unknown> | undefined>({ source: () => this.dialogComponentInput(), computation: (v, p) => v ?? p?.value });
+
+    // Server-side paging (keel list caps at the requested _limit; total from the envelope).
+    readonly pageIndex = signal(0);
+    readonly pageSize = signal(25);
+    readonly total = signal(0);
+    readonly pageSizeOptions = [10, 25, 50, 100];
+
+    // Client-side sort of the CURRENT page — keel's list endpoint has no order
+    // parameter, so cross-page ordering isn't possible from the frontend.
+    readonly sortColumn = signal('');
+    readonly sortAscending = signal(true);
+    readonly sortedRecords = computed(() => {
+        const rows = this.records();
+        const column = this.sortColumn();
+        if (!column) return rows;
+        const dir = this.sortAscending() ? 1 : -1;
+        return [...rows].sort((a, b) => {
+            const av = a[column], bv = b[column];
+            if (av == null && bv == null) return 0;
+            if (av == null) return dir;
+            if (bv == null) return -dir;
+            if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * dir;
+            return String(av).localeCompare(String(bv), undefined, { numeric: true }) * dir;
+        });
+    });
 
     private readonly route = inject(ActivatedRoute);
-    private readonly cdr = inject(ChangeDetectorRef);
     private readonly destroyRef = inject(DestroyRef);
 
     ngOnInit() {
@@ -36,40 +63,80 @@ export class TableList extends BaseView implements OnInit {
         if (!this.tableName() && data['tableName']) this.tableName.set(data['tableName']);
         if (!this.apiName() && data['apiName']) this.apiName.set(data['apiName']);
         if (!this.dialogComponent()) this.dialogComponent.set(data['dialogComponent'] ?? TableEdit);
-        this.route.queryParams.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params) => this.handleQueryParams(params));
+        // switchMap: a stale slow response must not overwrite a newer one.
+        this.route.queryParams.pipe(
+            takeUntilDestroyed(this.destroyRef),
+            switchMap((params) => this.handleQueryParams(params)),
+        ).subscribe();
     }
 
-    protected handleDelete(record: {[key: string]: any}): void {
+    protected handleDelete(record: Record<string, unknown>): void {
         if (!this.requireAuth(() => this.canDelete(), 'delete')) return;
         if (confirm('Are you sure you want to delete this record?')) {
             const keyFilter = this.getKeyFilters(record);
             this.backendService.delete(this.apiName(), keyFilter).subscribe({
                 next: () => this.fetchRecords(),
-                error: (err) => console.error('Delete failed', err),
+                error: (err) => {
+                    console.error('Delete failed', err);
+                    this.viewError.set(errorDetail(err, 'Delete failed.'));
+                },
             });
         }
     }
 
-    protected handleUpdate(result: {[key: string]: any}, isNew: boolean, _original: {[key: string]: any}): void {
+    protected handleUpdate(result: Record<string, unknown>, isNew: boolean, _original: Record<string, unknown>): void {
         if (!this.requireAuth(() => isNew ? this.canCreate() : this.canUpdate(), isNew ? 'create' : 'update')) return;
         if (confirm('Are you sure you want to save this record?')) {
             this.backendService.post(this.apiName(), result).subscribe({
                 next: () => this.fetchRecords(),
-                error: (err) => console.error('Save failed', err),
+                error: (err) => {
+                    console.error('Save failed', err);
+                    this.viewError.set(errorDetail(err, 'Save failed.'));
+                },
             });
         }
     }
 
     fetchRecords() {
         if (!this.requireAuth(() => this.canRead(), 'read')) return;
-        this.backendService.list<{[key: string]: any}>(this.apiName(), this.searchTerms).subscribe({
-            next: (records) => {
-                this.records = records;
-                this.updateDisplayedColumns(records);
-                this.cdr.markForCheck();
-            },
-            error: (err) => console.error('Fetch failed', err),
-        });
+        this.loadPage().subscribe();
+    }
+
+    private loadPage(): Observable<unknown> {
+        const filter = {
+            ...this.searchTerms(),
+            _limit: String(this.pageSize()),
+            _offset: String(this.pageIndex() * this.pageSize()),
+        };
+        return this.backendService.listPaginated<Record<string, unknown>>(this.apiName(), filter).pipe(
+            tap((page) => {
+                this.records.set(page.items ?? []);
+                this.total.set(page.total ?? page.items?.length ?? 0);
+                this.updateDisplayedColumns(page.items ?? []);
+                this.viewError.set('');
+            }),
+            catchError((err) => {
+                console.error('Fetch failed', err);
+                this.viewError.set(errorDetail(err, 'Failed to load records.'));
+                return EMPTY;
+            }),
+        );
+    }
+
+    onPage(event: PageEvent) {
+        this.pageIndex.set(event.pageIndex);
+        this.pageSize.set(event.pageSize);
+        this.fetchRecords();
+    }
+
+    onSortColumn(column: string) {
+        if (column === 'actions') return;
+        if (this.sortColumn() === column) {
+            this.sortAscending.update((asc) => !asc);
+        } else {
+            this.sortColumn.set(column);
+            this.sortAscending.set(true);
+        }
     }
 
     /** Refresh the row list on successful action — most actions mutate visible state (set_default flipping defaults, etc.). */
@@ -77,9 +144,9 @@ export class TableList extends BaseView implements OnInit {
         this.fetchRecords();
     }
 
-    handleQueryParams(params: Params) {
+    /** Every params emission REPLACES searchTerms, so a bare list URL clears stale filters. */
+    private handleQueryParams(params: Params): Observable<unknown> {
         const newSearchTerms: {[key: string]: string} = {};
-        let hasSearchTerms = false;
         let action = '';
         for (const key in params) {
             if (Object.prototype.hasOwnProperty.call(params, key)) {
@@ -87,14 +154,19 @@ export class TableList extends BaseView implements OnInit {
                     action = params[key];
                 } else {
                     newSearchTerms[key] = params[key];
-                    hasSearchTerms = true;
                 }
             }
         }
-        if (hasSearchTerms) this.searchTerms = newSearchTerms;
-        this.fetchRecords();
+        this.searchTerms.set(newSearchTerms);
+        this.pageIndex.set(0);
         if (action === 'create') {
-            setTimeout(() => this.addRecord(), 500);
+            // Gate on appdata so the create dialog gets real column metadata.
+            this.cacheService.getAppData().pipe(
+                take(1),
+                takeUntilDestroyed(this.destroyRef),
+            ).subscribe(() => this.addRecord());
         }
+        if (!this.requireAuth(() => this.canRead(), 'read')) return EMPTY;
+        return this.loadPage();
     }
 }

package/src/component/table/table_lookup.html

@@ -1,25 +1,28 @@
 <h2 mat-dialog-title>{{ getCaption() }} Search</h2>
 <div mat-dialog-content>
-    <sail-record-form [tableName]="tableName()" [record]="searchRecord" [fields]="searchColumns" [isReadOnly]="isReadOnlyBound"></sail-record-form>
+    <sail-record-form [tableName]="tableName()" [record]="searchRecord()" (recordChange)="searchRecord.set($event)" [fields]="searchColumns()" [isReadOnly]="isReadOnlyFn"></sail-record-form>
     <div class="search-actions">
         <button matButton="elevated" class="primary" (click)="onSearch()">Search</button>
         <button matButton (click)="onClear()">Clear</button>
     </div>
-    @if (records.length > 0) {
+    @if (viewError()) {
+        <p role="alert">{{ viewError() }}</p>
+    }
+    @if (records().length > 0) {
         <table>
             <thead>
                 <tr>
-                    <th>Select</th>
-                    @for (column of displayedColumns; track column) {
-                        <th>{{ colCaption(column) }}</th>
+                    <th scope="col">Select</th>
+                    @for (column of displayedColumns(); track column) {
+                        <th scope="col">{{ colCaption(column) }}</th>
                     }
                 </tr>
             </thead>
             <tbody>
-                @for (record of records; track trackByRecord($index, record)) {
+                @for (record of records(); track trackByRecord($index, record)) {
                     <tr>
-                        <td><button class="select-btn" (click)="onSelect(record)">Select</button></td>
-                        @for (column of displayedColumns; track column) {
+                        <td><button matButton type="button" (click)="onSelect(record)">Select</button></td>
+                        @for (column of displayedColumns(); track column) {
                             <td>{{ displayValue(column, record[column]) }}</td>
                         }
                     </tr>

package/src/component/table/table_lookup.ts

@@ -1,9 +1,10 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnInit, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, inject, OnInit, signal, ViewEncapsulation } from "@angular/core";
 import { MatButtonModule } from "@angular/material/button";
 import { MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent, MatDialogRef, MatDialogTitle } from "@angular/material/dialog";
 import { MatIconModule } from "@angular/material/icon";
-import { take } from "rxjs";
+import { map, Observable, of, switchMap, take } from "rxjs";
 import { RecordForm } from "../form/form_record";
+import { errorDetail } from "../../util/errors";
 import { BaseView } from "../abstract/base_view";
 
 @Component({
@@ -22,67 +23,74 @@ import { BaseView } from "../abstract/base_view";
     ],
 })
 export class TableLookup extends BaseView implements OnInit {
-    searchRecord: any = {};
-    searchColumns: string[] = [];
+    override readonly tableName = signal('');
+    readonly searchRecord = signal<Record<string, unknown>>({});
+    readonly searchColumns = this.metadataColumns;
 
     private readonly dialogRef = inject(MatDialogRef<TableLookup>);
     private readonly data = inject<{tableName?: string; apiName?: string}>(MAT_DIALOG_DATA);
-    protected readonly cdr = inject(ChangeDetectorRef);
+
+    /** A lookup only selects — no edit/delete, so no appended "actions" column. */
+    protected override includeActionsColumn(): boolean {
+        return false;
+    }
 
     ngOnInit() {
         if (this.data) {
             this.tableName.set(this.data.tableName ?? '');
             this.apiName.set(this.data.apiName   ?? '');
         }
-        this.searchColumns = this.getDisplayedColumns();
-        this.searchRecord  = this.emptyRecord();
-        this.resolveApi();
+        this.searchRecord.set(this.emptyRecord());
+        this.resolveApi().subscribe();
     }
 
-    private resolveApi() {
+    /** Resolve (and cache) the api serving this table; '' when none matches. */
+    private resolveApi(): Observable<string> {
+        const apiName = this.apiName();
+        if (apiName) return of(apiName);
         const tableName = this.tableName();
-        if (!this.apiName() && tableName) {
-            this.cacheService.getAppData().pipe(take(1)).subscribe((data) => {
-                if (data.Apis) {
-                    for (const api in data.Apis) {
-                        const entry = data.Apis[api];
-                        if (entry.Table.TableName === tableName) {
-                            this.apiName.set(api); // bare RestUri; BackendService.crudUrl resolves the version
-                            break;
-                        }
+        return this.cacheService.getAppData().pipe(
+            take(1),
+            map((data) => {
+                for (const api in data.Apis ?? {}) {
+                    if (data.Apis[api].Table?.TableName === tableName) {
+                        this.apiName.set(api); // bare RestUri; BackendService.crudUrl resolves the version
+                        return api;
                     }
                 }
-            });
-        }
+                return '';
+            }),
+        );
     }
 
     onSearch() {
-        this.resolveApi();
-        const apiName = this.apiName();
-        if (!apiName) {
-            console.error('API name not found for table ' + this.tableName());
-            return;
-        }
-        this.backendService.list<{[key: string]: any}>(apiName, this.buildSearchTerms(this.searchRecord)).subscribe({
+        // Chained on resolveApi so an early click waits instead of silently no-oping.
+        this.resolveApi().pipe(
+            switchMap((apiName) => {
+                if (!apiName) {
+                    this.viewError.set(`No API found for table ${this.tableName()}`);
+                    return of<Record<string, unknown>[]>([]);
+                }
+                return this.backendService.list<Record<string, unknown>>(apiName, this.buildSearchTerms(this.searchRecord()));
+            }),
+        ).subscribe({
             next: (records) => {
-                this.records = records;
+                this.records.set(records);
                 this.updateDisplayedColumns(records);
-                this.cdr.markForCheck();
             },
-            error: (err) => console.error('Lookup search failed', err),
+            error: (err) => {
+                console.error('Lookup search failed', err);
+                this.viewError.set(errorDetail(err, 'Search failed.'));
+            },
         });
     }
 
-    onSelect(record: any) {
+    onSelect(record: Record<string, unknown>) {
         this.dialogRef.close(record);
     }
 
     onClear() {
-        this.searchRecord = this.emptyRecord();
-        this.records = [];
+        this.searchRecord.set(this.emptyRecord());
+        this.records.set([]);
     }
-
-    protected handleDelete(_record: {[key: string]: any}): void {}
-
-    protected handleUpdate(_result: {[key: string]: any}, _isNew: boolean, _original: {[key: string]: any}): void {}
 }

package/src/component/table/table_report.html

@@ -1,7 +1,7 @@
 <h2>{{ reportTitle() }}</h2>
 
 @if (params().length > 0) {
-    <form class="report-params" (ngSubmit)="runReport()">
+    <form class="report-params" (submit)="onSubmit($event)">
         @for (param of params(); track param.Name) {
             @let opts = optionsFor(param);
             @if (opts) {
@@ -23,7 +23,7 @@
                     <mat-label>{{ titleCase(param.Name) }}</mat-label>
                     <input matInput [type]="inputTypeFor(param)"
                            [value]="paramValue(param.Name)"
-                           (input)="setParam(param.Name, $any($event.target).value)">
+                           (input)="onParamInput(param.Name, $event)">
                 </mat-form-field>
             }
         }

package/src/component/table/table_report.ts

@@ -1,23 +1,21 @@
-import { ChangeDetectionStrategy, Component, computed, effect, inject, input, signal } from "@angular/core";
-import { HttpParams } from "@angular/common/http";
-import { FormsModule } from "@angular/forms";
+import { ChangeDetectionStrategy, Component, computed, effect, inject, input, signal, untracked } from "@angular/core";
 import { MatCheckboxModule } from "@angular/material/checkbox";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatInputModule } from "@angular/material/input";
 import { MatSelectModule } from "@angular/material/select";
 import { MatButtonModule } from "@angular/material/button";
 import { BaseAuthService } from "../../service/auth.service";
-import { BaseRestService } from "../../service/base_rest.service";
+import { BackendService } from "../../service/rest_service";
 import { ConstantValue } from "../../model/common";
 import { ReportParam } from "../../model/appdata";
 import { titleCase } from "../../util/text";
+import { errorDetail } from "../../util/errors";
 
 @Component({
     selector: 'sail-table-report',
     templateUrl: './table_report.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [
-        FormsModule,
         MatCheckboxModule,
         MatFormFieldModule,
         MatInputModule,
@@ -25,11 +23,12 @@ import { titleCase } from "../../util/text";
         MatButtonModule,
     ],
 })
-export class TableReport extends BaseRestService {
+export class TableReport {
     readonly apiName = input('');
     readonly tableName = input('');
 
     private readonly auth = inject(BaseAuthService);
+    private readonly backend = inject(BackendService);
 
     readonly records = signal<Record<string, unknown>[]>([]);
     readonly displayedColumns = signal<string[]>([]);
@@ -50,11 +49,7 @@ export class TableReport extends BaseRestService {
      */
     readonly reportId = computed(() => this.apiName().split('/').pop() ?? '');
 
-    /**
-     * Report header text — long-form description from rest_report_header.
-     * Falls back to the title-cased table name only if the lookup misses
-     * (e.g. a brand-new report whose row hasn't been seeded yet).
-     */
+    /** Long-form header from rest_report_header; falls back to the title-cased table name. */
     readonly reportTitle = computed(() => {
         return this.auth.getReport(this.reportId())?.Description || titleCase(this.tableName());
     });
@@ -62,26 +57,36 @@ export class TableReport extends BaseRestService {
     /**
      * Param definitions for the current report. Empty when the report has
      * no rest_report_param rows — in that case we fetch immediately. With
-     * params we render an input form and wait for the user to click "Run",
-     * preserving the standard "filter then fetch" UX for parameterized
-     * reports.
+     * params we render an input form and wait for the user to click "Run".
      */
     readonly params = computed<ReportParam[]>(() => {
         return this.auth.getReport(this.reportId())?.Params ?? [];
     });
 
+    private lastApi: string | null = null;
+
     constructor() {
-        super();
+        // Re-runs on apiName changes AND appdata (re)loads via params()/canReport;
+        // report state is only reset when the report actually changed, so an
+        // appdata refresh never wipes half-typed parameters.
         effect(() => {
             const api = this.apiName();
             if (!api) return;
+            const apiChanged = api !== this.lastApi;
+            this.lastApi = api;
+            if (apiChanged) {
+                this.records.set([]);
+                this.displayedColumns.set([]);
+                this.paramValues.set({});
+            }
+            this.errorMessage.set('');
 
             if (!this.auth.canReport(this.reportId())) {
                 this.errorMessage.set('You do not have permission to view this report.');
                 return;
             }
-            // Auto-fetch only when the report takes no inputs.
-            if (this.params().length === 0) {
+            // Auto-fetch only when the report takes no inputs and nothing is shown yet.
+            if (this.params().length === 0 && (apiChanged || untracked(this.records).length === 0)) {
                 this.fetchReport(api, {});
             }
         });
@@ -122,36 +127,37 @@ export class TableReport extends BaseRestService {
         this.paramValues.update((current) => ({ ...current, [name]: value }));
     }
 
+    onParamInput(name: string, event: Event) {
+        this.setParam(name, (event.target as HTMLInputElement).value);
+    }
+
     paramValue(name: string): string {
         return this.paramValues()[name] ?? '';
     }
 
+    onSubmit(event: Event) {
+        event.preventDefault();
+        this.runReport();
+    }
+
     runReport() {
         this.fetchReport(this.apiName(), this.paramValues());
     }
 
     private fetchReport(api: string, params: Record<string, string>) {
-        let httpParams = new HttpParams();
+        const filled: Record<string, string> = {};
         for (const [k, v] of Object.entries(params)) {
-            // Drop empty values so the URL doesn't carry `?param=` for
-            // unset fields — backends should treat absent and empty-string
-            // the same, sending neither is the cleanest signal.
-            if (v !== '' && v != null) {
-                httpParams = httpParams.set(k, v);
-            }
+            // Drop empty values so the URL doesn't carry `?param=` for unset fields.
+            if (v !== '' && v != null) filled[k] = v;
         }
-        this.http.get<Record<string, unknown>[]>(this.url('/api/' + api), { params: httpParams }).subscribe({
+        this.backend.report(api, filled).subscribe({
             next: (rows) => {
                 this.records.set(rows ?? []);
-                if (rows?.length) {
-                    this.displayedColumns.set(Object.keys(rows[0]));
-                } else {
-                    this.displayedColumns.set([]);
-                }
+                this.displayedColumns.set(rows?.length ? Object.keys(rows[0]) : []);
                 this.errorMessage.set('');
             },
             error: (err) => {
-                this.errorMessage.set(err?.error?.detail ?? err?.error?.message ?? 'Failed to load report data.');
+                this.errorMessage.set(errorDetail(err, 'Failed to load report data.'));
             },
         });
     }

package/src/component/table/table_search.html

@@ -1,12 +1,12 @@
 <h1>
-    @if (title) {
-        {{ title }}
+    @if (title()) {
+        {{ title() }}
     } @else {
         {{ getCaption() }} Search
     }
 </h1>
 <div class="page-container">
-    <sail-record-form [tableName]="tableName()" [record]="editableRecord" [fields]="searchColumns" [isReadOnly]="isReadOnlyBound"></sail-record-form>
+    <sail-record-form [tableName]="tableName()" [record]="editableRecord()" (recordChange)="editableRecord.set($event)" [fields]="searchColumns()" [isReadOnly]="isReadOnlyFn"></sail-record-form>
 </div>
 <div class="search-actions">
     <button matButton="elevated" class="primary" (click)="onSearch()">Search</button>
@@ -14,7 +14,7 @@
     @if (canCreate()) {
         <button matButton="elevated" class="accent" (click)="onAddRecord()">New Record</button>
     }
-    @for (action of getActions(false); track action.action) {
+    @for (action of tableActions(); track action.action) {
         @if (canExecuteAction(action)) {
             <button matButton="outlined" type="button"
                     [title]="action.caption"