@nauticana/sail 0.6.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nauticana/sail",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Metadata-driven Angular component library for CRUD admin frontends backed by the keel Go backend. Tables, forms, navigation, OTP/2FA/social auth, billing, payout onboarding.",
   "main": "src/index.ts",
   "files": [

package/src/component/abstract/base_table.ts

@@ -1,5 +1,5 @@
 import { inject } from "@angular/core";
-import { ForeignKey, TableColumn, TableDefinition } from "../../model/appdata";
+import { ForeignKey, TableAction, TableColumn, TableDefinition } from "../../model/appdata";
 import { ConstantValue } from "../../model/common";
 import { BaseAuthService } from "../../service/auth.service";
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from "../../config";
@@ -56,6 +56,48 @@ export abstract class BaseTable {
         return this.cacheService.canDelete(this.tableName);
     }
 
+    /**
+     * Returns the table's registered TableAction list — populated by
+     * keel's REST engine from the basis `table_action` table. Empty
+     * when the table has no custom actions.
+     */
+    getActions(recordSpecific?: boolean): TableAction[] {
+        const tableDef = this.cacheService.getTableDefinition(this.tableName);
+        const actions = tableDef?.Actions ?? [];
+        if (recordSpecific === undefined) return [...actions].sort(this.sortActions);
+        return actions.filter((a) => a.recordSpecific === recordSpecific).sort(this.sortActions);
+    }
+
+    private sortActions = (a: TableAction, b: TableAction) =>
+        (a.displayOrder ?? 0) - (b.displayOrder ?? 0);
+
+    /**
+     * Authorization gate for a TableAction. Mirrors canRead/canCreate
+     * etc. — looks up the caller's grant against (authorityObject,
+     * authorityCheck) scoped to the table name. Returns true when the
+     * action button should render.
+     */
+    canExecuteAction(action: TableAction): boolean {
+        return this.cacheService.canExecute(action.authorityObject, action.authorityCheck, this.tableName);
+    }
+
+    /**
+     * Pulls the primary-key column values off a record into a plain
+     * object keyed by the columns' PascalName. Used as the request
+     * body when a record-specific TableAction fires — the backend
+     * handler receives the row's PK exactly the way generic CRUD
+     * does for get / delete.
+     */
+    primaryKeyValues(record: Record<string, unknown>): Record<string, unknown> {
+        const tableDef = this.cacheService.getTableDefinition(this.tableName);
+        const pk: Record<string, unknown> = {};
+        if (!tableDef?.Keys) return pk;
+        for (const key of tableDef.Keys) {
+            pk[key.PascalName] = record[key.PascalName];
+        }
+        return pk;
+    }
+
     emptyRecord(): any {
         const record : any = {[this.config.opField]: 'I'}
         const tableDef = this.cacheService.getTableDefinition(this.tableName);

package/src/component/table/table_detail.html

@@ -4,6 +4,16 @@
     @if (canCreate()) {
         <button mat-raised-button class="accent" (click)="addRecord()">New Record</button>
     }
+    @for (action of getActions(false); track action.action) {
+        @if (canExecuteAction(action)) {
+            <button mat-stroked-button 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">
     <thead>
@@ -44,6 +54,17 @@
                         } @else if (canDelete()) {
                             <button mat-icon-button (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 mat-icon-button type="button"
+                                            [title]="action.caption"
+                                            (click)="executeAction(action, record)">
+                                        <mat-icon>{{ action.icon || 'play_arrow' }}</mat-icon>
+                                    </button>
+                                }
+                            }
+                        }
                     </td>
                 }
             </tr>

package/src/component/table/table_detail.ts

@@ -5,6 +5,8 @@ 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',
@@ -31,6 +33,34 @@ export class TableDetail extends BaseForm implements OnInit {
     fkColumns: string[] = [];
 
     private readonly dialog = inject(MatDialog);
+    private readonly backendService = inject(BackendService);
+
+    /**
+     * 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_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 mat-raised-button class="accent" (click)="addRecord()">New Record</button>
+    }
+    @for (action of getActions(false); track action.action) {
+        @if (canExecuteAction(action)) {
+            <button mat-stroked-button type="button"
+                    [title]="action.caption"
+                    (click)="executeAction(action)">
+                @if (action.icon) { <mat-icon>{{ action.icon }}</mat-icon> }
+                {{ action.caption }}
+            </button>
+        }
+    }
+</div>
 
 <table>
     <thead>
@@ -27,6 +39,15 @@
             } @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>
+                @for (action of getActions(true); track action.action) {
+                    @if (canExecuteAction(action)) {
+                        <button mat-icon-button 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

@@ -4,6 +4,7 @@ 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";
@@ -77,6 +78,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_search.html

@@ -14,4 +14,14 @@
     @if (canCreate()) {
         <button mat-raised-button class="accent" (click)="onAddRecord()">New Record</button>
     }
+    @for (action of getActions(false); track action.action) {
+        @if (canExecuteAction(action)) {
+            <button mat-stroked-button type="button"
+                    [title]="action.caption"
+                    (click)="executeAction(action)">
+                @if (action.icon) { <mat-icon>{{ action.icon }}</mat-icon> }
+                {{ action.caption }}
+            </button>
+        }
+    }
 </div>

package/src/component/table/table_search.ts

@@ -1,9 +1,12 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnInit, ViewEncapsulation } from "@angular/core";
 import { MatButtonModule } from "@angular/material/button";
+import { MatIconModule } from "@angular/material/icon";
 import { ActivatedRoute, Router } from "@angular/router";
 import { BaseForm } from "../abstract/base_form";
 import { RecordForm } from "../form/form_record";
 import { ApplicationMenu } from "../../model/common";
+import { TableAction } from "../../model/appdata";
+import { BackendService } from "../../service/rest_service";
 
 @Component({
     selector: 'table-search',
@@ -12,6 +15,7 @@ import { ApplicationMenu } from "../../model/common";
     templateUrl: './table_search.html',
     imports: [
         MatButtonModule,
+        MatIconModule,
         RecordForm,
     ],
 })
@@ -24,6 +28,27 @@ export class TableSearch extends BaseForm implements OnInit {
     private readonly router = inject(Router);
     private readonly route = inject(ActivatedRoute);
     private readonly cdr = inject(ChangeDetectorRef);
+    private readonly backendService = inject(BackendService);
+
+    /**
+     * Fire a table-level TableAction from the search-screen toolbar.
+     * Record-specific actions never show up here — search has no
+     * row context.
+     */
+    executeAction(action: TableAction): void {
+        if (!this.canExecuteAction(action)) {
+            alert(`Missing authorization for action ${action.authorityObject}/${action.authorityCheck}`);
+            return;
+        }
+        if (action.confirmMessage && !confirm(action.confirmMessage)) return;
+        this.backendService.executeAction(action.method, {}).subscribe({
+            next: () => {/* no-op — search screen has no list to refresh */},
+            error: (err) => {
+                console.error(`Action ${action.action} failed`, err);
+                alert(err?.error?.detail ?? `Failed to ${action.caption}`);
+            },
+        });
+    }
 
     ngOnInit() {
         const data = this.route.snapshot.data;

package/src/model/appdata.ts

@@ -56,13 +56,27 @@ export interface TableColumn {
   Validators?:  AbstractControlOptions['validators'];
 }
 
+// One custom button registered against a table via the basis
+// table_action seed. Auth gating uses the existing
+// authorization_role_permission path against (authorityObject,
+// authorityCheck, low_limit=tableName) — see canExecute() in
+// BaseAuthService.
+//
+// recordSpecific=true  → button renders next to per-row edit/delete.
+// recordSpecific=false → button renders next to the "New Record" toolbar.
+//
+// `method` is the URL POST target the click should hit (resolved by
+// keel from table_name + action_name + optional method_name override).
 export interface TableAction {
-  action:         string;
-  caption:        string;
-  method:         string;
-  enable:         string;
-  authorityCheck: string;
-  recordSpecific: string;
+  action:           string;   // lowercase action_name
+  caption:          string;
+  method:           string;   // resolved URL path (POST target)
+  icon?:            string;   // Material icon name; falsy → label-only
+  recordSpecific:   boolean;
+  displayOrder?:    number;
+  confirmMessage?:  string;
+  authorityObject:  string;   // uppercased table_name — for canExecute()
+  authorityCheck:   string;   // uppercased action_name — for canExecute()
 }
 
 export interface ForeignKey {

package/src/service/auth.service.ts

@@ -471,6 +471,15 @@ export abstract class BaseAuthService {
   canCreate(tableName: string) { return this.checkPermission('TABLE', 'INSERT', tableName); }
   canUpdate(tableName: string) { return this.checkPermission('TABLE', 'UPDATE', tableName); }
   canDelete(tableName: string) { return this.checkPermission('TABLE', 'DELETE', tableName); }
+  /**
+   * Authorization check for a custom TableAction. authorityObject is the
+   * uppercased table_name; activity is the uppercased action_name. The
+   * grant's low_limit is checked against the table_name (lowercase) —
+   * matching the convention populated by keel's loadTableActions.
+   */
+  canExecute(authorityObject: string, activity: string, tableName: string): boolean {
+    return this.checkPermission(authorityObject, activity, tableName);
+  }
   canAccess(pageName: string)  { return this.checkPermission('PAGE', 'ACCESS', pageName); }
   canReport(reportName: string) { return this.checkPermission('REPORT', 'ACCESS', reportName); }
 

package/src/service/rest_service.ts

@@ -91,4 +91,16 @@ export class BackendService {
     delete(apiName: string, filter?: {[key: string]: string}): Observable<{message: string}> {
         return this.http.delete<{message: string}>(this.apiUrl(apiName + '/delete'), {params: this.toParams(filter)}).pipe(catchError(this.handleError));
     }
+
+    /**
+     * Fire a TableAction button. `actionPath` is the resolved URL path
+     * the keel REST engine pre-computed onto TableAction.method
+     * (e.g. "/user_payment_method/set_default"); pass it verbatim and
+     * the call will POST to {host}{api_prefix}{actionPath} with the
+     * supplied body. For record-specific actions the body carries the
+     * primary key values; for table-level actions it is typically `{}`.
+     */
+    executeAction<T = unknown>(actionPath: string, body: Record<string, unknown> = {}): Observable<T> {
+        return this.http.post<T>(this.apiUrl(actionPath), body).pipe(catchError(this.handleError));
+    }
 }

package/src/service/rest_url.ts

@@ -37,9 +37,10 @@ export const RestURL = {
   payoutReusableLinkURL: '/api/v1/payout/reusable/link',
   payoutStatusURL:       '/api/v1/payout/status',
   // User payment methods — list/delete go through keel's generic REST
-  // CRUD against the UserSpecific basis table; only set-default has a
-  // custom endpoint (atomic multi-row UPDATE).
-  paymentMethodSetDefaultURL: '/api/v1/payment-methods/set-default',
+  // CRUD against the UserSpecific basis table; set-default is a
+  // TableAction (basis table_action row), mounted at the conventional
+  // URL POST /api/v1/user_payment_method/set_default.
+  paymentMethodSetDefaultURL: '/api/v1/user_payment_method/set_default',
 };
 
 /** Call this at app startup to set the backend host URL */