@nauticana/sail 0.7.0 → 0.8.1

package/src/component/table/table_detail.ts

@@ -1,15 +1,15 @@
-import { ChangeDetectionStrategy, Component, inject, Input, input, OnInit, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, effect, inject, input, linkedSignal, OnInit, ViewEncapsulation } from "@angular/core";
 import { DynamicField } from "../form/form_field";
 import { MatButtonModule } from "@angular/material/button";
 import { BaseForm } from "../abstract/base_form";
 import { MatDialog } from "@angular/material/dialog";
 import { TableForm } from "../form/form_table";
 import { MatIconModule } from "@angular/material/icon";
-import { BackendService } from "../../service/rest_service";
 import { TableAction } from "../../model/appdata";
+import { OpCode } from "../../model/common";
 
 @Component({
-    selector: 'table-detail',
+    selector: 'sail-table-detail',
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
     templateUrl: './table_detail.html',
@@ -20,46 +20,41 @@ import { TableAction } from "../../model/appdata";
     ],
 })
 export class TableDetail extends BaseForm implements OnInit {
-    @Input() override tableName = '';
-    @Input() records: any[] = [];
+    protected readonly tableNameInput = input('', { alias: 'tableName' });
+    protected readonly recordsInput   = input<any[]>([], { alias: 'records' });
     readonly parentTableName = input('');
     readonly parentRecord = input<any>({});
     /** When true, the parent view is in read-only mode — disable all child row editing. */
     readonly parentReadOnly = input(false);
 
+    override readonly tableName = linkedSignal<string, string>({ source: () => this.tableNameInput(), computation: (v, p) => v || p?.value || '' });
+
+    records: any[] = [];
     editingRecord: any = null;
     originalRecord: any = null;
     displayedColumns: string[] = [];
     fkColumns: string[] = [];
 
     private readonly dialog = inject(MatDialog);
-    private readonly backendService = inject(BackendService);
+
+    constructor() {
+        super();
+        // records is a writable array (push/splice in event handlers); keep it in sync with the input
+        // via effect rather than linkedSignal so mutations work on the consumer's array reference.
+        effect(() => { this.records = this.recordsInput(); });
+    }
 
     /**
-     * Fire a TableAction. Per-row actions require the record to be
-     * server-side (not 'I' inserted-locally-not-saved); table-level
-     * actions only need the parent to be writable. Action POSTs hit
-     * the resolved URL directly — no need to round-trip through the
-     * parent form.
+     * Per-row actions require the record to be server-side (not 'I'
+     * inserted-locally-not-saved); the keel action POST would hit a record
+     * that doesn't exist yet. Table-level actions are always allowed.
      */
-    executeAction(action: TableAction, record?: {[key: string]: unknown}): void {
-        if (!this.canExecuteAction(action)) {
-            alert(`Missing authorization for action ${action.authorityObject}/${action.authorityCheck}`);
-            return;
-        }
-        if (action.recordSpecific && record && record[this.config.opField] === 'I') {
+    protected override beforeExecuteAction(action: TableAction, record?: Record<string, unknown>): boolean {
+        if (action.recordSpecific && record && record[this.config.opField] === OpCode.Insert) {
             alert('Save the record first before running this action.');
-            return;
+            return false;
         }
-        if (action.confirmMessage && !confirm(action.confirmMessage)) return;
-        const body = action.recordSpecific && record ? this.primaryKeyValues(record) : {};
-        this.backendService.executeAction(action.method, body).subscribe({
-            next: () => {/* parent form re-fetches on its own save */},
-            error: (err) => {
-                console.error(`Action ${action.action} failed`, err);
-                alert(err?.error?.detail ?? `Failed to ${action.caption}`);
-            },
-        });
+        return true;
     }
 
     override canCreate() { return !this.parentReadOnly() && super.canCreate(); }
@@ -99,7 +94,7 @@ export class TableDetail extends BaseForm implements OnInit {
 
     addRecord() {
         const newRecord = this.emptyRecord();
-        newRecord[this.config.opField] = 'I';
+        newRecord[this.config.opField] = OpCode.Insert;
         this.initializeForeignKeys(newRecord, this.parentTableName(), this.parentRecord());
 
         if (this.displayedColumns.length > 6) {
@@ -117,7 +112,7 @@ export class TableDetail extends BaseForm implements OnInit {
             this.openEditDialog(record, false, this.fkColumns);
         } else {
             this.editingRecord = record;
-            this.isNew = record[this.config.opField] === 'I';
+            this.isNew = record[this.config.opField] === OpCode.Insert;
             this.originalRecord = {...record};
             this.formatRecordTimeStamp(record);
         }
@@ -145,19 +140,19 @@ export class TableDetail extends BaseForm implements OnInit {
     }
 
     deleteRow(record: any) {
-        if (record[this.config.opField] === 'I') {
+        if (record[this.config.opField] === OpCode.Insert) {
             const index = this.records.indexOf(record);
             if (index > -1) {
                 this.records.splice(index, 1);
             }
         } else {
-            record[this.config.opField] = 'D';
+            record[this.config.opField] = OpCode.Delete;
         }
     }
 
     unDeleteRow(record: any) {
-        if (record[this.config.opField] === 'D') {
-            record[this.config.opField] = 'U';
+        if (record[this.config.opField] === OpCode.Delete) {
+            record[this.config.opField] = OpCode.Update;
         }
     }
 }

package/src/component/table/table_edit.html

@@ -9,7 +9,7 @@
         }
     </span>
     @if (isDialog) {
-        <button mat-icon-button type="button" class="table-edit-close"
+        <button matIconButton type="button" class="table-edit-close"
                 (click)="onCancel()" aria-label="Close dialog">
             <mat-icon>close</mat-icon>
         </button>
@@ -20,21 +20,31 @@
     <div class="actions-bar">
         @if (isReadOnlyMode) {
             @if (canUpdate()) {
-                <button mat-raised-button class="primary" (click)="onEdit()">Edit</button>
+                <button matButton="elevated" class="primary" (click)="onEdit()">Edit</button>
             }
             @if (canCreate()) {
-                <button mat-raised-button class="accent" (click)="onNew()">New</button>
+                <button matButton="elevated" class="accent" (click)="onNew()">New</button>
             }
             @if (canDelete()) {
-                <button mat-button class="warn" (click)="onDelete()">Delete</button>
+                <button matButton class="warn" (click)="onDelete()">Delete</button>
+            }
+            @for (action of getActions(true); track action.action) {
+                @if (canExecuteAction(action)) {
+                    <button matButton="outlined" type="button"
+                            [title]="action.caption"
+                            (click)="executeAction(action, record())">
+                        @if (action.icon) { <mat-icon>{{ action.icon }}</mat-icon> }
+                        {{ action.caption }}
+                    </button>
+                }
             }
         } @else {
-            <button mat-raised-button class="primary" (click)="onSave()">Save</button>
-            <button mat-button (click)="onCancel()">Cancel</button>
+            <button matButton="elevated" class="primary" (click)="onSave()">Save</button>
+            <button matButton (click)="onCancel()">Cancel</button>
         }
     </div>
 
-    <record-form [tableName]="tableName" [record]="editableRecord" [isReadOnly]="isReadOnlyBound"></record-form>
+    <sail-record-form [tableName]="tableName()" [record]="editableRecord" [isReadOnly]="isReadOnlyBound"></sail-record-form>
 
     @if (tabCount > 0) {
         <mat-tab-group>
@@ -42,13 +52,13 @@
             @if (cacheService.canRead(getTableName(key))) {
                 <mat-tab [label]="key">
                     <div class="tab-content">
-                        <table-detail
+                        <sail-table-detail
                            [records]="editableRecord[key]"
                            [tableName]="getTableName(key)"
-                           [parentTableName]="tableName"
+                           [parentTableName]="tableName()"
                            [parentRecord]="editableRecord"
                            [parentReadOnly]="isReadOnlyMode">
-                        </table-detail>
+                        </sail-table-detail>
                     </div>
                 </mat-tab>
             }

package/src/component/table/table_edit.ts

@@ -1,15 +1,15 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnInit, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, input, linkedSignal, OnInit, ViewEncapsulation } from "@angular/core";
 import { BaseForm } from "../abstract/base_form";
 import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 import { MatTabsModule } from "@angular/material/tabs";
 import { TableDetail } from "./table_detail";
-import { BackendService } from "../../service/rest_service";
 import { RecordForm } from "../form/form_record";
 import { MatButtonModule } from "@angular/material/button";
 import { MatIconModule } from "@angular/material/icon";
+import { OpCode } from "../../model/common";
 
 @Component({
-    selector: 'table-edit',
+    selector: 'sail-table-edit',
     templateUrl: './table_edit.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
@@ -22,11 +22,15 @@ import { MatIconModule } from "@angular/material/icon";
     ]
 })
 export class TableEdit extends BaseForm implements OnInit {
-    @Input() record: any = {};
-    @Input() override tableName = '';
-    @Input() apiName = '';
+    protected readonly recordInput    = input<any>({}, { alias: 'record' });
+    protected readonly tableNameInput = input('',      { alias: 'tableName' });
+    protected readonly apiNameInput   = input('',      { alias: 'apiName' });
+
+    readonly record              = linkedSignal<any, any>({       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;
-    private readonly backendService = inject(BackendService);
     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);
@@ -39,9 +43,9 @@ export class TableEdit extends BaseForm implements OnInit {
 
     ngOnInit(): void {
         if (this.dialogData) {
-            this.record = this.dialogData.record ?? {};
-            this.tableName = this.dialogData.tableName ?? '';
-            this.apiName = this.dialogData.apiName ?? '';
+            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;
         }
@@ -55,7 +59,8 @@ export class TableEdit extends BaseForm implements OnInit {
 
     private initializeNewRecord() {
         this.editableRecord = this.emptyRecord();
-        if (this.record) Object.assign(this.editableRecord, this.record);
+        const rec = this.record();
+        if (rec) Object.assign(this.editableRecord, rec);
     }
 
     private buildTabs() {
@@ -69,17 +74,23 @@ export class TableEdit extends BaseForm implements OnInit {
         }
     }
 
+    /** Re-fetch the row from the backend after a server-side mutation (TableAction success, etc.). */
+    protected override onActionSuccess(): void {
+        if (!this.isNew) this.fetchFullRecord();
+    }
+
     private fetchFullRecord() {
-        this.editableRecord = {...this.record};
+        const rec = this.record();
+        this.editableRecord = {...rec};
         this.formatRecordTimeStamp(this.editableRecord);
 
-        const filter = this.getKeyFilters(this.record);
+        const filter = this.getKeyFilters(rec);
         if (!filter) {
             console.warn('Key definition could not be found');
             return;
         }
 
-        this.backendService.get<any>(this.apiName, filter).subscribe({
+        this.backendService.get<any>(this.apiName(), filter).subscribe({
             next: (record) => {
                 if (!record) {
                     console.error('failed to read single record from the backend');
@@ -123,7 +134,7 @@ export class TableEdit extends BaseForm implements OnInit {
         if (this.dialogRef) {
             this.dialogRef.close(result);
         } else {
-            this.backendService.post(this.apiName, result).subscribe({
+            this.backendService.post(this.apiName(), result).subscribe({
                 next: () => {
                     this.isReadOnlyMode = true;
                     this.isNew = false;
@@ -138,8 +149,8 @@ export class TableEdit extends BaseForm implements OnInit {
     onDelete() {
         if (confirm('Are you sure you want to delete this record?')) {
             const result = {...this.editableRecord};
-            result[this.config.opField] = 'D';
-            this.backendService.post(this.apiName, result).subscribe({
+            result[this.config.opField] = OpCode.Delete;
+            this.backendService.post(this.apiName(), result).subscribe({
                 next: () => {
                     this.isReadOnlyMode = true;
                     this.isReadOnlyBound = this.isReadOnly.bind(this);
@@ -156,7 +167,7 @@ export class TableEdit extends BaseForm implements OnInit {
             return;
         }
         this.isReadOnlyMode = true;
-        this.editableRecord = {...this.record};
+        this.editableRecord = {...this.record()};
         this.isNew = false;
         this.isReadOnlyBound = this.isReadOnly.bind(this);
     }

package/src/component/table/table_list.html

@@ -2,11 +2,11 @@
 
 <div class="table-list__toolbar">
     @if (canCreate()) {
-        <button mat-raised-button class="accent" (click)="addRecord()">New Record</button>
+        <button matButton="elevated" class="accent" (click)="addRecord()">New Record</button>
     }
     @for (action of getActions(false); track action.action) {
         @if (canExecuteAction(action)) {
-            <button mat-stroked-button type="button"
+            <button matButton="outlined" type="button"
                     [title]="action.caption"
                     (click)="executeAction(action)">
                 @if (action.icon) { <mat-icon>{{ action.icon }}</mat-icon> }
@@ -37,11 +37,11 @@
             } @else if (column !== 'actions') {
                 {{ displayValue(column, record[column]) }}
             } @else {
-                <button mat-icon-button type="button" (click)="editRecord(record)" title="Edit"><mat-icon>edit</mat-icon></button>
-                <button mat-icon-button type="button" (click)="deleteRecord(record)" title="Delete"><mat-icon>delete</mat-icon></button>
+                <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 (canExecuteAction(action)) {
-                        <button mat-icon-button type="button"
+                        <button matIconButton type="button"
                                 [title]="action.caption"
                                 (click)="executeAction(action, record)">
                             <mat-icon>{{ action.icon || 'play_arrow' }}</mat-icon>

package/src/component/table/table_list.ts

@@ -1,16 +1,14 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, OnInit, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, input, linkedSignal, OnInit, ViewEncapsulation } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { ActivatedRoute, Params } from "@angular/router";
 import { BaseView } from "../abstract/base_view";
 import { TableEdit } from "./table_edit";
-import { BackendService } from "../../service/rest_service";
-import { TableAction } from "../../model/appdata";
 import { MatButtonModule } from "@angular/material/button";
 import { MatCheckboxModule } from "@angular/material/checkbox";
 import { MatIconModule } from "@angular/material/icon";
 
 @Component({
-    selector: 'table-list',
+    selector: 'sail-table-list',
     templateUrl: './table_list.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
@@ -18,28 +16,34 @@ import { MatIconModule } from "@angular/material/icon";
 })
 export class TableList extends BaseView implements OnInit {
     override dialogWidth = '400px';
+    protected readonly tableNameInput      = input('',          { alias: 'tableName' });
+    protected readonly apiNameInput        = input('',          { alias: 'apiName' });
+    protected readonly dialogComponentInput = input<any>(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 });
 
     private readonly route = inject(ActivatedRoute);
-    private readonly backendService = inject(BackendService);
     private readonly cdr = inject(ChangeDetectorRef);
     private readonly destroyRef = inject(DestroyRef);
 
     ngOnInit() {
         const data = this.route.snapshot.data;
-        if (!this.tableName && data['tableName']) this.tableName = data['tableName'];
-        if (!this.apiName && data['apiName']) this.apiName = data['apiName'];
-        if (!this.dialogComponent) this.dialogComponent = data['dialogComponent'] ?? TableEdit;
+        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));
     }
 
     protected handleDelete(record: {[key: string]: any}): void {
-        if (!this.canDelete()) {
-            alert('Missing authorization to delete records');
-            return;
-        }
+        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({
+            this.backendService.delete(this.apiName(), keyFilter).subscribe({
                 next: () => this.fetchRecords(),
                 error: (err) => console.error('Delete failed', err),
             });
@@ -47,16 +51,9 @@ export class TableList extends BaseView implements OnInit {
     }
 
     protected handleUpdate(result: {[key: string]: any}, isNew: boolean, _original: {[key: string]: any}): void {
-        if (isNew && !this.canCreate()) {
-            alert('Missing authorization to create records');
-            return;
-        }
-        if (!isNew && !this.canUpdate()) {
-            alert('Missing authorization to update records');
-            return;
-        }
+        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({
+            this.backendService.post(this.apiName(), result).subscribe({
                 next: () => this.fetchRecords(),
                 error: (err) => console.error('Save failed', err),
             });
@@ -64,11 +61,8 @@ export class TableList extends BaseView implements OnInit {
     }
 
     fetchRecords() {
-        if (!this.canRead()) {
-            alert('Missing authorization to read records');
-            return;
-        }
-        this.backendService.list<{[key: string]: any}>(this.apiName, this.searchTerms).subscribe({
+        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);
@@ -78,27 +72,9 @@ export class TableList extends BaseView implements OnInit {
         });
     }
 
-    /**
-     * Fire a TableAction. For record-specific actions, `record` carries
-     * the row's primary key columns (lifted via BaseTable.primaryKeyValues).
-     * For table-level actions, `record` is undefined and the body is empty.
-     * Refreshes the row list on success — most actions mutate visible
-     * state (set_default flipping defaults, etc.).
-     */
-    executeAction(action: TableAction, record?: {[key: string]: unknown}): void {
-        if (!this.canExecuteAction(action)) {
-            alert(`Missing authorization for action ${action.authorityObject}/${action.authorityCheck}`);
-            return;
-        }
-        if (action.confirmMessage && !confirm(action.confirmMessage)) return;
-        const body = action.recordSpecific && record ? this.primaryKeyValues(record) : {};
-        this.backendService.executeAction(action.method, body).subscribe({
-            next: () => this.fetchRecords(),
-            error: (err) => {
-                console.error(`Action ${action.action} failed`, err);
-                alert(err?.error?.detail ?? `Failed to ${action.caption}`);
-            },
-        });
+    /** Refresh the row list on successful action — most actions mutate visible state (set_default flipping defaults, etc.). */
+    protected override onActionSuccess(): void {
+        this.fetchRecords();
     }
 
     handleQueryParams(params: Params) {

package/src/component/table/table_lookup.html

@@ -1,9 +1,9 @@
 <h2 mat-dialog-title>{{ getCaption() }} Search</h2>
 <div mat-dialog-content>
-    <record-form [tableName]="tableName" [record]="searchRecord" [fields]="searchColumns" [isReadOnly]="isReadOnlyBound"></record-form>
+    <sail-record-form [tableName]="tableName()" [record]="searchRecord" [fields]="searchColumns" [isReadOnly]="isReadOnlyBound"></sail-record-form>
     <div class="search-actions">
-        <button mat-raised-button class="primary" (click)="onSearch()">Search</button>
-        <button mat-button (click)="onClear()">Clear</button>
+        <button matButton="elevated" class="primary" (click)="onSearch()">Search</button>
+        <button matButton (click)="onClear()">Clear</button>
     </div>
     @if (records.length > 0) {
         <table>
@@ -31,5 +31,5 @@
     }
 </div>
 <div mat-dialog-actions>
-    <button mat-button [mat-dialog-close]>Cancel</button>
+    <button matButton [mat-dialog-close]>Cancel</button>
 </div>

package/src/component/table/table_lookup.ts

@@ -4,10 +4,9 @@ import { MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent, Ma
 import { MatIconModule } from "@angular/material/icon";
 import { RecordForm } from "../form/form_record";
 import { BaseView } from "../abstract/base_view";
-import { BackendService } from "../../service/rest_service";
 
 @Component({
-    selector: 'table-lookup',
+    selector: 'sail-table-lookup',
     templateUrl: './table_lookup.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
@@ -22,19 +21,17 @@ import { BackendService } from "../../service/rest_service";
     ],
 })
 export class TableLookup extends BaseView implements OnInit {
-    override apiName = '';
     searchRecord: any = {};
     searchColumns: string[] = [];
 
-    private readonly backendService = inject(BackendService);
     private readonly dialogRef = inject(MatDialogRef<TableLookup>);
     private readonly data = inject<{tableName?: string; apiName?: string}>(MAT_DIALOG_DATA);
     protected readonly cdr = inject(ChangeDetectorRef);
 
     ngOnInit() {
         if (this.data) {
-            this.tableName = this.data.tableName ?? '';
-            this.apiName   = this.data.apiName   ?? '';
+            this.tableName.set(this.data.tableName ?? '');
+            this.apiName.set(this.data.apiName   ?? '');
         }
         this.searchColumns = this.getDisplayedColumns();
         this.searchRecord  = this.emptyRecord();
@@ -42,13 +39,14 @@ export class TableLookup extends BaseView implements OnInit {
     }
 
     private resolveApi() {
-        if (!this.apiName && this.tableName) {
+        const tableName = this.tableName();
+        if (!this.apiName() && tableName) {
             this.cacheService.getAppData().subscribe((data) => {
                 if (data.Apis) {
                     for (const api in data.Apis) {
                         const entry = data.Apis[api];
-                        if (entry.Table.TableName === this.tableName) {
-                            this.apiName = entry.Version ? entry.Version + '/' + api : api;
+                        if (entry.Table.TableName === tableName) {
+                            this.apiName.set(entry.Version ? entry.Version + '/' + api : api);
                             break;
                         }
                     }
@@ -59,11 +57,12 @@ export class TableLookup extends BaseView implements OnInit {
 
     onSearch() {
         this.resolveApi();
-        if (!this.apiName) {
-            console.error('API name not found for table ' + this.tableName);
+        const apiName = this.apiName();
+        if (!apiName) {
+            console.error('API name not found for table ' + this.tableName());
             return;
         }
-        this.backendService.list<{[key: string]: any}>(this.apiName, this.buildSearchTerms(this.searchRecord)).subscribe({
+        this.backendService.list<{[key: string]: any}>(apiName, this.buildSearchTerms(this.searchRecord)).subscribe({
             next: (records) => {
                 this.records = records;
                 this.updateDisplayedColumns(records);

package/src/component/table/table_report.html

@@ -27,7 +27,7 @@
                 </mat-form-field>
             }
         }
-        <button mat-raised-button color="primary" type="submit">Run</button>
+        <button matButton="elevated" class="primary" type="submit">Run</button>
     </form>
 }
 

package/src/component/table/table_report.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, effect, inject, input, signal } from "@angular/core";
-import { HttpClient, HttpParams } from "@angular/common/http";
+import { HttpParams } from "@angular/common/http";
 import { FormsModule } from "@angular/forms";
 import { MatCheckboxModule } from "@angular/material/checkbox";
 import { MatFormFieldModule } from "@angular/material/form-field";
@@ -7,12 +7,13 @@ 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 { RestURL } from "../../service/rest_url";
+import { BaseRestService } from "../../service/base_rest.service";
 import { ConstantValue } from "../../model/common";
 import { ReportParam } from "../../model/appdata";
+import { titleCase } from "../../util/text";
 
 @Component({
-    selector: 'table-report',
+    selector: 'sail-table-report',
     templateUrl: './table_report.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [
@@ -24,11 +25,10 @@ import { ReportParam } from "../../model/appdata";
         MatButtonModule,
     ],
 })
-export class TableReport {
+export class TableReport extends BaseRestService {
     readonly apiName = input('');
     readonly tableName = input('');
 
-    private readonly http = inject(HttpClient);
     private readonly auth = inject(BaseAuthService);
 
     readonly records = signal<Record<string, unknown>[]>([]);
@@ -49,7 +49,7 @@ export class TableReport {
      */
     readonly reportTitle = computed(() => {
         const reportId = this.apiName().split('/').pop() ?? '';
-        return this.auth.getReport(reportId)?.Description || this.titleCase(this.tableName());
+        return this.auth.getReport(reportId)?.Description || titleCase(this.tableName());
     });
 
     /**
@@ -65,6 +65,7 @@ export class TableReport {
     });
 
     constructor() {
+        super();
         effect(() => {
             const api = this.apiName();
             if (!api) return;
@@ -133,8 +134,7 @@ export class TableReport {
                 httpParams = httpParams.set(k, v);
             }
         }
-        const url = RestURL.httpHost + '/api/' + api;
-        this.http.get<Record<string, unknown>[]>(url, { params: httpParams }).subscribe({
+        this.http.get<Record<string, unknown>[]>(this.url('/api/' + api), { params: httpParams }).subscribe({
             next: (rows) => {
                 this.records.set(rows ?? []);
                 if (rows?.length) {
@@ -145,14 +145,11 @@ export class TableReport {
                 this.errorMessage.set('');
             },
             error: (err) => {
-                this.errorMessage.set(err?.error ?? 'Failed to load report data.');
+                this.errorMessage.set(err?.error?.detail ?? err?.error?.message ?? 'Failed to load report data.');
             },
         });
     }
 
-    titleCase(str: string): string {
-        return str.replaceAll('_', ' ').toLowerCase().split(' ')
-            .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))
-            .join(' ');
-    }
+    /** Re-exported for templates; same as the shared util. */
+    titleCase(str: string): string { return titleCase(str); }
 }