@nauticana/sail 1.1.9 → 1.1.11

package/src/component/table/table_edit.ts

@@ -1,5 +1,6 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, input, linkedSignal, OnInit, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, inject, input, linkedSignal, OnInit, signal, ViewEncapsulation } from "@angular/core";
 import { BaseForm } from "../abstract/base_form";
+import { errorDetail } from "../../util/errors";
 import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 import { MatTabsModule } from "@angular/material/tabs";
 import { TableDetail } from "./table_detail";
@@ -8,6 +9,13 @@ import { MatButtonModule } from "@angular/material/button";
 import { MatIconModule } from "@angular/material/icon";
 import { OpCode } from "../../model/common";
 
+interface TableEditDialogData {
+    record?: Record<string, unknown>;
+    tableName?: string;
+    apiName?: string;
+    isNew?: boolean;
+}
+
 @Component({
     selector: 'sail-table-edit',
     templateUrl: './table_edit.html',
@@ -22,70 +30,66 @@ import { OpCode } from "../../model/common";
     ]
 })
 export class TableEdit extends BaseForm implements OnInit {
-    readonly recordInput    = input<any>({}, { alias: 'record' });
+    readonly recordInput    = input<Record<string, unknown>>({}, { alias: 'record' });
     readonly tableNameInput = input('',      { alias: 'tableName' });
     readonly apiNameInput   = input('',      { alias: 'apiName' });
 
-    readonly record              = linkedSignal<any, any>({       source: () => this.recordInput(),    computation: (v, p) => v ?? p?.value ?? {} });
+    readonly record              = linkedSignal<Record<string, unknown>, Record<string, unknown>>({ source: () => this.recordInput(), computation: (v, p) => v ?? p?.value ?? {} });
     override readonly tableName  = linkedSignal<string, string>({ source: () => this.tableNameInput(), computation: (v, p) => v || p?.value || '' });
     readonly apiName             = linkedSignal<string, string>({ source: () => this.apiNameInput(),   computation: (v, p) => v || p?.value || '' });
 
-    isReadOnlyMode = true;
+    readonly isReadOnlyMode = signal(true);
+    readonly saveError = signal('');
     private readonly dialogRef = inject(MatDialogRef<TableEdit>, {optional: true});
-    private readonly dialogData = inject<{record?: any; tableName?: string; apiName?: string; isNew?: boolean} | null>(MAT_DIALOG_DATA, {optional: true});
-    private readonly cdr = inject(ChangeDetectorRef);
+    private readonly dialogData = inject<TableEditDialogData | null>(MAT_DIALOG_DATA, {optional: true});
+
+    /** Tabs are the table's child relations (rest_api_child metadata). */
+    protected readonly tabFields = computed(() =>
+        (this.cacheService.getTableDefinition(this.tableName())?.Children ?? []).map((child) => child.PascalName));
 
-    protected tabCount = 0;
-    protected tabFields: string[] = [];
     protected get isDialog(): boolean { return !!this.dialogRef; }
     /** Snapshot taken when the user enters edit mode; used for dirty-tracking on save. */
-    private originalSnapshot: any = null;
+    private originalSnapshot: Record<string, unknown> | null = null;
 
     ngOnInit(): void {
         if (this.dialogData) {
             this.record.set(this.dialogData.record ?? {});
             this.tableName.set(this.dialogData.tableName ?? '');
             this.apiName.set(this.dialogData.apiName ?? '');
-            this.isNew = this.dialogData.isNew ?? false;
-            this.isReadOnlyMode = !this.isNew;
+            this.isNew.set(this.dialogData.isNew ?? false);
+            this.isReadOnlyMode.set(!this.isNew());
         }
-        if (this.isNew) {
-            this.initializeNewRecord();
-            this.buildTabs();
+        if (this.isNew()) {
+            this.setEditableRecord(Object.assign(this.emptyRecord(), this.record()));
         } else {
             this.fetchFullRecord();
         }
     }
 
-    private initializeNewRecord() {
-        this.editableRecord = this.emptyRecord();
-        const rec = this.record();
-        if (rec) Object.assign(this.editableRecord, rec);
+    /** Single entry point: seeds an empty array for any child relation the record lacks. */
+    private setEditableRecord(record: Record<string, unknown>) {
+        for (const field of this.tabFields()) {
+            if (!this.isArray(record[field])) record[field] = [];
+        }
+        this.editableRecord.set(record);
     }
 
-    /**
-     * Tabs are the table's child relations (rest_api_child metadata), not just
-     * whatever array fields the backend happened to embed. Seed an empty array
-     * for any child the response omitted so its grid renders (and accepts new rows).
-     */
-    private buildTabs() {
-        const tableDef = this.cacheService.getTableDefinition(this.tableName());
-        this.tabFields = (tableDef?.Children ?? []).map((child) => child.PascalName);
-        for (const field of this.tabFields) {
-            if (!this.isArray(this.editableRecord[field])) this.editableRecord[field] = [];
-        }
-        this.tabCount = this.tabFields.length;
+    /** Child rows for a tab; buildTabs guarantees the array exists. */
+    childRecords(key: string): Record<string, unknown>[] {
+        const value = this.editableRecord()[key];
+        return Array.isArray(value) ? value as Record<string, unknown>[] : [];
     }
 
     /** Re-fetch the row from the backend after a server-side mutation (TableAction success, etc.). */
     protected override onActionSuccess(): void {
-        if (!this.isNew) this.fetchFullRecord();
+        if (!this.isNew()) this.fetchFullRecord();
     }
 
     private fetchFullRecord() {
         const rec = this.record();
-        this.editableRecord = {...rec};
-        this.formatRecordTimeStamp(this.editableRecord);
+        const provisional = {...rec};
+        this.formatRecordTimeStamp(provisional);
+        this.setEditableRecord(provisional);
 
         const filter = this.getKeyFilters(rec);
         if (!filter) {
@@ -93,73 +97,91 @@ export class TableEdit extends BaseForm implements OnInit {
             return;
         }
 
-        this.backendService.get<any>(this.apiName(), filter).subscribe({
+        this.backendService.get<Record<string, unknown> | Record<string, unknown>[]>(this.apiName(), filter).subscribe({
             next: (record) => {
                 if (!record) {
                     console.error('failed to read single record from the backend');
                     return;
                 }
-                this.editableRecord = Array.isArray(record) ? record[0] : record;
-                this.formatRecordTimeStamp(this.editableRecord);
-                this.buildTabs();
-                this.cdr.markForCheck();
+                const full = Array.isArray(record) ? record[0] : record;
+                this.formatRecordTimeStamp(full);
+                this.setEditableRecord(full);
             },
             error: (error) => {
                 console.error('failed to fetch full record details', error);
+                this.saveError.set(errorDetail(error, 'Failed to load record details.'));
             },
         });
     }
 
     override isReadOnly(fieldName: string): boolean {
-        if (this.isReadOnlyMode) return true;
+        if (this.isReadOnlyMode()) return true;
         return super.isReadOnly(fieldName);
     }
 
     onEdit() {
-        this.isReadOnlyMode = false;
-        this.isNew = false;
-        this.isReadOnlyBound = this.isReadOnly.bind(this);
+        this.isReadOnlyMode.set(false);
+        this.isNew.set(false);
         // Snapshot scalar fields only; children arrays are dirty-tracked per row.
-        this.originalSnapshot = { ...this.editableRecord };
+        this.originalSnapshot = { ...this.editableRecord() };
     }
 
     onNew() {
-        this.isReadOnlyMode = false;
-        this.isNew = true;
-        this.editableRecord = this.emptyRecord();
-        this.isReadOnlyBound = this.isReadOnly.bind(this);
+        this.isReadOnlyMode.set(false);
+        this.isNew.set(true);
+        this.originalSnapshot = null;
+        this.setEditableRecord(this.emptyRecord());
     }
 
     onSave() {
-        const result = {...this.editableRecord};
+        const wasNew = this.isNew();
+        const result = {...this.editableRecord()};
         this.readyToSave(result, this.originalSnapshot);
 
         if (this.dialogRef) {
             this.dialogRef.close(result);
-        } else {
-            this.backendService.post(this.apiName(), result).subscribe({
-                next: () => {
-                    this.isReadOnlyMode = true;
-                    this.isNew = false;
-                    this.isReadOnlyBound = this.isReadOnly.bind(this);
-                    this.cdr.markForCheck();
-                },
-                error: (err) => console.error('Save failed', err),
-            });
+            return;
         }
+        this.backendService.post(this.apiName(), result).subscribe({
+            next: () => {
+                this.saveError.set('');
+                this.isReadOnlyMode.set(true);
+                this.isNew.set(false);
+                if (wasNew) {
+                    // Sequence-keyed inserts have no client-side PK to refetch by;
+                    // demote op_code so a second Save can't re-insert a duplicate.
+                    const keys = this.getKeyFilters(result);
+                    const keysComplete = !!keys && Object.values(keys).every((v) => v !== '');
+                    if (keysComplete) {
+                        this.record.set(result);
+                        this.fetchFullRecord();
+                    } else {
+                        this.editableRecord.update((rec) => ({...rec, [this.config.opField]: OpCode.Readonly}));
+                    }
+                } else {
+                    this.fetchFullRecord();
+                }
+            },
+            error: (err) => {
+                console.error('Save failed', err);
+                this.saveError.set(errorDetail(err, 'Save failed.'));
+            },
+        });
     }
 
     onDelete() {
         if (confirm('Are you sure you want to delete this record?')) {
-            const result = {...this.editableRecord};
+            const result = {...this.editableRecord()};
             result[this.config.opField] = OpCode.Delete;
             this.backendService.post(this.apiName(), result).subscribe({
                 next: () => {
-                    this.isReadOnlyMode = true;
-                    this.isReadOnlyBound = this.isReadOnly.bind(this);
-                    this.cdr.markForCheck();
+                    this.saveError.set('');
+                    this.isReadOnlyMode.set(true);
+                },
+                error: (err) => {
+                    console.error('Delete failed', err);
+                    this.saveError.set(errorDetail(err, 'Delete failed.'));
                 },
-                error: (err) => console.error('Delete failed', err),
             });
         }
     }
@@ -169,9 +191,14 @@ export class TableEdit extends BaseForm implements OnInit {
             this.dialogRef.close();
             return;
         }
-        this.isReadOnlyMode = true;
-        this.editableRecord = {...this.record()};
-        this.isNew = false;
-        this.isReadOnlyBound = this.isReadOnly.bind(this);
+        this.saveError.set('');
+        this.isReadOnlyMode.set(true);
+        this.isNew.set(false);
+        // Refetch, not shallow-copy: the source row lacks the child-tab arrays.
+        if (Object.keys(this.record()).length > 0) {
+            this.fetchFullRecord();
+        } else {
+            this.setEditableRecord(this.emptyRecord());
+        }
     }
 }

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>