@nauticana/sail 0.6.1 → 0.8.0

package/src/component/security/twofactor_setup.html

@@ -10,7 +10,7 @@
             <mat-label>Confirm your password</mat-label>
             <input matInput type="password" formControlName="password" autocomplete="current-password" required>
           </mat-form-field>
-          <button mat-raised-button class="primary" type="submit" [disabled]="!initForm.valid">Enable 2FA</button>
+          <button matButton="elevated" class="primary" type="submit" [disabled]="!initForm.valid">Enable 2FA</button>
         </form>
       }
       @case ('qr') {
@@ -32,7 +32,7 @@
           </div>
         }
 
-        <button mat-raised-button class="primary" (click)="proceedToVerify()">I've saved my backup codes</button>
+        <button matButton="elevated" class="primary" (click)="proceedToVerify()">I've saved my backup codes</button>
       }
       @case ('verify') {
         <p class="auth-instructions">Enter the 6-digit code from your authenticator app to confirm setup.</p>
@@ -42,7 +42,7 @@
             <input matInput type="text" formControlName="code" maxlength="6" autocomplete="one-time-code" required>
           </mat-form-field>
 
-          <button mat-raised-button class="primary" type="submit" [disabled]="!verifyForm.valid">
+          <button matButton="elevated" class="primary" type="submit" [disabled]="!verifyForm.valid">
             Verify and Enable
           </button>
         </form>
@@ -59,7 +59,7 @@
             <mat-label>Current 6-digit code</mat-label>
             <input matInput type="text" formControlName="code" maxlength="6" autocomplete="one-time-code" required>
           </mat-form-field>
-          <button mat-button class="warn" type="submit" [disabled]="!disableForm.valid">Disable 2FA</button>
+          <button matButton class="warn" type="submit" [disabled]="!disableForm.valid">Disable 2FA</button>
         </form>
       }
     }

package/src/component/security/twofactor_verify.html

@@ -31,7 +31,7 @@
         <div class="auth-error" role="alert">{{ errorMessage() }}</div>
       }
 
-      <button mat-raised-button class="primary" type="submit" [disabled]="!verifyForm.valid">
+      <button matButton="elevated" class="primary" type="submit" [disabled]="!verifyForm.valid">
         Verify
       </button>
     </form>

package/src/component/table/table_detail.html

@@ -2,7 +2,17 @@
 <div class="child-table-header">
     <h3>{{ getCaption() }}</h3>
     @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 matButton="outlined" type="button"
+                    [title]="action.caption"
+                    (click)="executeAction(action)">
+                @if (action.icon) { <mat-icon>{{ action.icon }}</mat-icon> }
+                {{ action.caption }}
+            </button>
+        }
     }
 </div>
 <table class="mat-table">
@@ -23,13 +33,13 @@
                             @if (isReadOnly(col)) {
                                 {{ record[col] }}
                             } @else {
-                                <dynamic-field [tableName]="tableName" [value]="record[col]" [field]="col" (valueChange)="record[col]=$event" subscriptSizing="dynamic"></dynamic-field>
+                                <dynamic-field [tableName]="tableName()" [value]="record[col]" [field]="col" (valueChange)="record[col]=$event" subscriptSizing="dynamic"></dynamic-field>
                             }
                         </td>
                     }
                     <td>
-                        <button mat-icon-button (click)="saveRow()" title="Save"><mat-icon>save</mat-icon></button>
-                        <button mat-icon-button (click)="cancelRow(record)" title="Cancel"><mat-icon>cancel</mat-icon></button>
+                        <button matIconButton (click)="saveRow()" title="Save"><mat-icon>save</mat-icon></button>
+                        <button matIconButton (click)="cancelRow(record)" title="Cancel"><mat-icon>cancel</mat-icon></button>
                     </td>
                 } @else {
                     @for (col of displayedColumns; track col) {
@@ -37,12 +47,23 @@
                     }
                     <td>
                         @if (canUpdate()) {
-                            <button mat-icon-button (click)="editRow(record)" title="Edit"><mat-icon>edit</mat-icon></button>
+                            <button matIconButton (click)="editRow(record)" title="Edit"><mat-icon>edit</mat-icon></button>
                         }
                         @if (record[config.opField] === 'D') {
-                            <button mat-icon-button (click)="unDeleteRow(record)" title="Undelete"><mat-icon>restore_from_trash</mat-icon></button>
+                            <button matIconButton (click)="unDeleteRow(record)" title="Undelete"><mat-icon>restore_from_trash</mat-icon></button>
                         } @else if (canDelete()) {
-                            <button mat-icon-button (click)="deleteRow(record)" title="Delete"><mat-icon>delete</mat-icon></button>
+                            <button matIconButton (click)="deleteRow(record)" title="Delete"><mat-icon>delete</mat-icon></button>
+                        }
+                        @if (record[config.opField] !== 'I') {
+                            @for (action of getActions(true); track action.action) {
+                                @if (canExecuteAction(action)) {
+                                    <button matIconButton type="button"
+                                            [title]="action.caption"
+                                            (click)="executeAction(action, record)">
+                                        <mat-icon>{{ action.icon || 'play_arrow' }}</mat-icon>
+                                    </button>
+                                }
+                            }
                         }
                     </td>
                 }

package/src/component/table/table_detail.ts

@@ -1,10 +1,12 @@
-import { ChangeDetectionStrategy, Component, inject, Input, input, OnInit, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, effect, inject, input, 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";
 
 @Component({
     selector: 'table-detail',
@@ -18,19 +20,54 @@ import { MatIconModule } from "@angular/material/icon";
     ],
 })
 export class TableDetail extends BaseForm implements OnInit {
-    @Input() override tableName = '';
-    @Input() records: any[] = [];
+    readonly tableNameInput = input('', { alias: 'tableName' });
+    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);
 
+    records: any[] = [];
     editingRecord: any = null;
     originalRecord: any = null;
     displayedColumns: string[] = [];
     fkColumns: string[] = [];
 
     private readonly dialog = inject(MatDialog);
+    private readonly backendService = inject(BackendService);
+
+    constructor() {
+        super();
+        effect(() => { const v = this.tableNameInput(); if (v) this.tableName.set(v); });
+        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.
+     */
+    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') {
+            alert('Save the record first before running this action.');
+            return;
+        }
+        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}`);
+            },
+        });
+    }
 
     override canCreate() { return !this.parentReadOnly() && super.canCreate(); }
     override canUpdate() { return !this.parentReadOnly() && super.canUpdate(); }

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,21 @@
     <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>
             }
         } @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>
+    <record-form [tableName]="tableName()" [record]="editableRecord" [isReadOnly]="isReadOnlyBound"></record-form>
 
     @if (tabCount > 0) {
         <mat-tab-group>
@@ -45,7 +45,7 @@
                         <table-detail
                            [records]="editableRecord[key]"
                            [tableName]="getTableName(key)"
-                           [parentTableName]="tableName"
+                           [parentTableName]="tableName()"
                            [parentRecord]="editableRecord"
                            [parentReadOnly]="isReadOnlyMode">
                         </table-detail>

package/src/component/table/table_edit.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnInit, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, effect, inject, input, OnInit, signal, 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";
@@ -22,9 +22,11 @@ import { MatIconModule } from "@angular/material/icon";
     ]
 })
 export class TableEdit extends BaseForm implements OnInit {
-    @Input() record: any = {};
-    @Input() override tableName = '';
-    @Input() apiName = '';
+    readonly recordInput = input<any>({}, { alias: 'record' });
+    readonly tableNameInput = input('', { alias: 'tableName' });
+    readonly apiNameInput = input('', { alias: 'apiName' });
+    readonly record = signal<any>({});
+    readonly apiName = signal('');
     isReadOnlyMode = true;
     private readonly backendService = inject(BackendService);
     private readonly dialogRef = inject(MatDialogRef<TableEdit>, {optional: true});
@@ -37,11 +39,18 @@ export class TableEdit extends BaseForm implements OnInit {
     /** Snapshot taken when the user enters edit mode; used for dirty-tracking on save. */
     private originalSnapshot: any = null;
 
+    constructor() {
+        super();
+        effect(() => { const v = this.recordInput();    if (v) this.record.set(v); });
+        effect(() => { const v = this.tableNameInput(); if (v) this.tableName.set(v); });
+        effect(() => { const v = this.apiNameInput();   if (v) this.apiName.set(v); });
+    }
+
     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 +64,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() {
@@ -70,16 +80,17 @@ export class TableEdit extends BaseForm implements OnInit {
     }
 
     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;
@@ -139,7 +150,7 @@ export class TableEdit extends BaseForm implements OnInit {
         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({
+            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

@@ -1,8 +1,20 @@
 <h2>{{ getCaption() }}</h2>
 
-@if (canCreate()) {
-    <button mat-raised-button class="accent" (click)="addRecord()">New Record</button>
-}
+<div class="table-list__toolbar">
+    @if (canCreate()) {
+        <button matButton="elevated" class="accent" (click)="addRecord()">New Record</button>
+    }
+    @for (action of getActions(false); track action.action) {
+        @if (canExecuteAction(action)) {
+            <button matButton="outlined" type="button"
+                    [title]="action.caption"
+                    (click)="executeAction(action)">
+                @if (action.icon) { <mat-icon>{{ action.icon }}</mat-icon> }
+                {{ action.caption }}
+            </button>
+        }
+    }
+</div>
 
 <table>
     <thead>
@@ -25,8 +37,17 @@
             } @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 matIconButton type="button"
+                                [title]="action.caption"
+                                (click)="executeAction(action, record)">
+                            <mat-icon>{{ action.icon || 'play_arrow' }}</mat-icon>
+                        </button>
+                    }
+                }
             }
             </td>
         }

package/src/component/table/table_list.ts

@@ -1,9 +1,10 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, OnInit, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, effect, inject, input, 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";
@@ -17,17 +18,27 @@ import { MatIconModule } from "@angular/material/icon";
 })
 export class TableList extends BaseView implements OnInit {
     override dialogWidth = '400px';
+    readonly tableNameInput = input('', { alias: 'tableName' });
+    readonly apiNameInput = input('', { alias: 'apiName' });
+    readonly dialogComponentInput = input<any>(undefined, { alias: 'dialogComponent' });
 
     private readonly route = inject(ActivatedRoute);
     private readonly backendService = inject(BackendService);
     private readonly cdr = inject(ChangeDetectorRef);
     private readonly destroyRef = inject(DestroyRef);
 
+    constructor() {
+        super();
+        effect(() => { const v = this.tableNameInput();      if (v) this.tableName.set(v); });
+        effect(() => { const v = this.apiNameInput();        if (v) this.apiName.set(v); });
+        effect(() => { const v = this.dialogComponentInput();if (v) this.dialogComponent.set(v); });
+    }
+
     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));
     }
 
@@ -38,7 +49,7 @@ export class TableList extends BaseView implements OnInit {
         }
         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),
             });
@@ -55,7 +66,7 @@ export class TableList extends BaseView implements OnInit {
             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),
             });
@@ -67,7 +78,7 @@ export class TableList extends BaseView implements OnInit {
             alert('Missing authorization to read records');
             return;
         }
-        this.backendService.list<{[key: string]: any}>(this.apiName, this.searchTerms).subscribe({
+        this.backendService.list<{[key: string]: any}>(this.apiName(), this.searchTerms).subscribe({
             next: (records) => {
                 this.records = records;
                 this.updateDisplayedColumns(records);
@@ -77,6 +88,29 @@ 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}`);
+            },
+        });
+    }
+
     handleQueryParams(params: Params) {
         const newSearchTerms: {[key: string]: string} = {};
         let hasSearchTerms = false;

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>
+    <record-form [tableName]="tableName()" [record]="searchRecord" [fields]="searchColumns" [isReadOnly]="isReadOnlyBound"></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

@@ -22,7 +22,6 @@ import { BackendService } from "../../service/rest_service";
     ],
 })
 export class TableLookup extends BaseView implements OnInit {
-    override apiName = '';
     searchRecord: any = {};
     searchColumns: string[] = [];
 
@@ -33,8 +32,8 @@ export class TableLookup extends BaseView implements OnInit {
 
     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 +41,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 +59,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_search.html

@@ -6,12 +6,22 @@
     }
 </h1>
 <div class="page-container">
-    <record-form [tableName]="tableName" [record]="editableRecord" [fields]="searchColumns" [isReadOnly]="isReadOnlyBound"></record-form>
+    <record-form [tableName]="tableName()" [record]="editableRecord" [fields]="searchColumns" [isReadOnly]="isReadOnlyBound"></record-form>
 </div>
 <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>
     @if (canCreate()) {
-        <button mat-raised-button class="accent" (click)="onAddRecord()">New Record</button>
+        <button matButton="elevated" class="accent" (click)="onAddRecord()">New Record</button>
+    }
+    @for (action of getActions(false); track action.action) {
+        @if (canExecuteAction(action)) {
+            <button matButton="outlined" type="button"
+                    [title]="action.caption"
+                    (click)="executeAction(action)">
+                @if (action.icon) { <mat-icon>{{ action.icon }}</mat-icon> }
+                {{ action.caption }}
+            </button>
+        }
     }
 </div>