@nauticana/sail 0.7.0 → 0.8.1

package/src/component/table/table_search.html

@@ -6,17 +6,17 @@
     }
 </h1>
 <div class="page-container">
-    <record-form [tableName]="tableName" [record]="editableRecord" [fields]="searchColumns" [isReadOnly]="isReadOnlyBound"></record-form>
+    <sail-record-form [tableName]="tableName()" [record]="editableRecord" [fields]="searchColumns" [isReadOnly]="isReadOnlyBound"></sail-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 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> }

package/src/component/table/table_search.ts

@@ -1,15 +1,13 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnInit, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, input, linkedSignal, 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',
+    selector: 'sail-table-search',
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
     templateUrl: './table_search.html',
@@ -20,53 +18,45 @@ import { BackendService } from "../../service/rest_service";
     ],
 })
 export class TableSearch extends BaseForm implements OnInit {
-    @Input() override tableName = '';
-    @Input() apiName: string = '';
-    @Input() targetRoute: string = '';
+    protected readonly tableNameInput   = input('', { alias: 'tableName' });
+    protected readonly apiNameInput     = input('', { alias: 'apiName' });
+    protected readonly targetRouteInput = input('', { alias: 'targetRoute' });
+
+    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 || '' });
+    readonly targetRoute          = linkedSignal<string, string>({ source: () => this.targetRouteInput(), computation: (v, p) => v || p?.value || '' });
+
     searchColumns: string[] = [];
 
     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.
+     * Search screen surfaces only table-level actions; record-specific actions
+     * never appear here (no row context). `executeAction()` is inherited from
+     * BaseTable; no per-screen refresh needed since search has no row list.
      */
-    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;
-        if (!this.tableName && data['tableName']) this.tableName = data['tableName'];
-        if (!this.apiName && data['apiName']) this.apiName = data['apiName'];
-        if (!this.targetRoute && data['targetRoute']) this.targetRoute = data['targetRoute'];
+        if (!this.tableName() && data['tableName']) this.tableName.set(data['tableName']);
+        if (!this.apiName() && data['apiName']) this.apiName.set(data['apiName']);
+        if (!this.targetRoute() && data['targetRoute']) this.targetRoute.set(data['targetRoute']);
         this.title = this.getCaption() + ' Search';
-        if (!this.targetRoute && (this.apiName || this.tableName)) {
+        if (!this.targetRoute() && (this.apiName() || this.tableName())) {
             this.cacheService.getMenus().subscribe((menus: ApplicationMenu[]) => {
+                const apiName = this.apiName();
+                const tableName = this.tableName();
                 for (const menu of menus) {
                     for (const page of menu.ApplicationMenuItems!) {
-                        if (this.apiName.endsWith(page.RestUri!) ||
-                            (this.tableName && page.RestUri!.includes(this.tableName))
+                        if (apiName.endsWith(page.RestUri!) ||
+                            (tableName && page.RestUri!.includes(tableName))
                         ) {
                             if (page.FilterOnList) {
-                                this.targetRoute = '/' + menu.Id!.toLowerCase() + '/' + page.ItemId!;
+                                this.targetRoute.set('/' + menu.Id!.toLowerCase() + '/' + page.ItemId!);
                             } else {
-                                this.targetRoute = '/' + menu.Id!.toLowerCase() + '/' + page.ItemId! + '/list';
+                                this.targetRoute.set('/' + menu.Id!.toLowerCase() + '/' + page.ItemId! + '/list');
                             }
                             this.cdr.markForCheck();
                             return;
@@ -80,11 +70,12 @@ export class TableSearch extends BaseForm implements OnInit {
     }
 
     onSearch() {
-        if (!this.targetRoute) {
+        const targetRoute = this.targetRoute();
+        if (!targetRoute) {
             alert('Navigation target not found for this table');
             return;
         }
-        this.router.navigate([this.targetRoute], {queryParams: this.buildSearchTerms(this.editableRecord)});
+        this.router.navigate([targetRoute], {queryParams: this.buildSearchTerms(this.editableRecord)});
     }
 
     onClear() {
@@ -106,7 +97,7 @@ export class TableSearch extends BaseForm implements OnInit {
      */
     private emptySearchRecord(): any {
         const rec = this.emptyRecord();
-        const tableDef = this.cacheService.getTableDefinition(this.tableName);
+        const tableDef = this.cacheService.getTableDefinition(this.tableName());
         if (tableDef?.Columns) {
             for (const col of tableDef.Columns) {
                 if (col.DataType === 'boolean') {
@@ -118,14 +109,12 @@ export class TableSearch extends BaseForm implements OnInit {
     }
 
     onAddRecord() {
-        if (!this.canCreate()) {
-            alert('Missing authorization to create records');
-            return;
-        }
-        if (!this.targetRoute) {
+        if (!this.requireAuth(() => this.canCreate(), 'create')) return;
+        const targetRoute = this.targetRoute();
+        if (!targetRoute) {
             alert('Navigation target not found for this table');
             return;
         }
-        this.router.navigate([this.targetRoute], {queryParams: {'_action': 'create'}});
+        this.router.navigate([targetRoute], {queryParams: {'_action': 'create'}});
     }
 }

package/src/index.ts

@@ -45,3 +45,5 @@ export * from './service/api-response.interceptor';
 export * from './service/rest_service';
 export * from './service/rest_url';
 export * from './service/label.service';
+export * from './service/base_rest.service';
+export * from './util/text';

package/src/model/appdata.ts

@@ -197,7 +197,7 @@ export interface PartnerRegistration {
 }
 
 // PublicPlan — shape returned by GET /public/plans. Used on the registration
-// page to render the plan picker and to drive `<app-checkout-button>` flows.
+// page to render the plan picker and to drive `<sail-checkout-button>` flows.
 export interface PublicPlan {
 	id:          string;
 	caption:     string;
@@ -206,7 +206,7 @@ export interface PublicPlan {
 	// Stripe price ID (or provider-equivalent). Optional because keel only
 	// populates it when a plan is wired to a billing provider; FREE plans and
 	// not-yet-priced tiers leave it empty. Pass straight to
-	// `<app-checkout-button [priceId]>` / `BillingService.createCheckout({ priceId })`.
+	// `<sail-checkout-button [priceId]>` / `BillingService.createCheckout({ priceId })`.
 	priceId?:    string;
 }
 

package/src/model/common.ts

@@ -1,7 +1,45 @@
 import { IsString, IsNumeric } from './decorator';
 
+/**
+ * SIUD operation codes that travel on every row through keel's generic CRUD.
+ * Sail tags records with these so the backend knows what to do with each row
+ * inside a bulk POST. Mirror of keel's `data.SiudOpCode` constants.
+ *
+ *   S = Select-only (default for fetched rows — no change)
+ *   I = Insert (locally created, not yet persisted)
+ *   U = Update (existing row, scalar fields changed)
+ *   D = Delete (existing row, mark for removal)
+ *   R = Read-only (existing row, no change after dirty-check)
+ *
+ * Always reference via `OpCode.Insert` etc. — never the bare string. The
+ * `OpCodeValue` union type lets TS catch typos at compile time.
+ */
+export const OpCode = {
+  Select:   'S',
+  Insert:   'I',
+  Update:   'U',
+  Delete:   'D',
+  Readonly: 'R',
+} as const;
+
+export type OpCodeValue = typeof OpCode[keyof typeof OpCode];
+
+/**
+ * Lookup-style values on `TableColumn.LookupStyle` — controls how the lookup
+ * renders in the form. Mirror of keel's basis `column.lookup_style` enum.
+ *
+ *   D = Dropdown (constant_value rows preloaded)
+ *   S = Search   (TableLookup dialog with full search UI)
+ */
+export const LookupStyle = {
+  Dropdown: 'D',
+  Search:   'S',
+} as const;
+
+export type LookupStyleValue = typeof LookupStyle[keyof typeof LookupStyle];
+
 export class SiudAction {
-  op_code = 'S';
+  op_code: OpCodeValue = OpCode.Select;
 }
 
 export class UserAccountPolicy extends SiudAction {

package/src/service/auth.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, WritableSignal, inject, signal } from '@angular/core';
-import { HttpClient, HttpParams } from '@angular/common/http';
+import { HttpParams } from '@angular/common/http';
 import { map, take, tap } from 'rxjs/operators';
 import { ApplicationData, AuthSummary, ConfirmRegisterResponse, DictionaryPath, LoginResponse2FA, PartnerRegistration, RestReport, TableDefinition, TrustedDevice, TwoFactorSetupResponse, TwoFactorVerifyRequest, TwoFactorVerifyResponse } from '../model/appdata';
 import {
@@ -14,39 +14,39 @@ import { Observable, ReplaySubject } from 'rxjs';
 import { ApplicationMenu, ConstantValue } from '../model/common';
 import { CanActivateFn, Router, Routes } from '@angular/router';
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../config';
+import { BaseRestService } from './base_rest.service';
 
 @Injectable()
-export abstract class BaseAuthService {
-  private readonly http = inject(HttpClient);
+export abstract class BaseAuthService extends BaseRestService {
   protected readonly router = inject(Router);
   protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
   protected cache!: ApplicationData;
   private readonly appData$ = new ReplaySubject<ApplicationData>(1);
   private readonly authIndex = new Map<string, AuthSummary[]>();
 
-  protected get appdataUrl() { return RestURL.httpHost + RestURL.appdataURL; }
-  protected get loginUrl() { return RestURL.httpHost + RestURL.loginURL; }
-  protected get registerUrl() { return RestURL.httpHost + RestURL.registerURL; }
-  protected get chpassUrl() { return RestURL.httpHost + RestURL.chpassURL; }
-  protected get confirmRegisterUrl() { return RestURL.httpHost + RestURL.confirmRegisterURL; }
-  protected get confirmChpassUrl() { return RestURL.httpHost + RestURL.confirmChpassURL; }
-  protected get loginGoogleUrl() { return RestURL.httpHost + RestURL.loginGoogleURL; }
-  protected get twoFactorSetupUrl() { return RestURL.httpHost + RestURL.twoFactorSetupURL; }
-  protected get twoFactorVerifyUrl() { return RestURL.httpHost + RestURL.twoFactorVerifyURL; }
-  protected get twoFactorDisableUrl() { return RestURL.httpHost + RestURL.twoFactorDisableURL; }
-  protected get twoFactorLoginVerifyUrl() { return RestURL.httpHost + RestURL.twoFactorLoginVerifyURL; }
-  protected get twoFactorBackupVerifyUrl() { return RestURL.httpHost + RestURL.twoFactorBackupVerifyURL; }
-  protected get trustedDeviceListUrl() { return RestURL.httpHost + RestURL.trustedDeviceListURL; }
-  protected get trustedDeviceRegisterUrl() { return RestURL.httpHost + RestURL.trustedDeviceRegisterURL; }
-  protected get trustedDeviceRevokeUrl() { return RestURL.httpHost + RestURL.trustedDeviceRevokeURL; }
-  protected get otpSendUrl()          { return RestURL.httpHost + RestURL.otpSendURL; }
-  protected get otpVerifyUrl()        { return RestURL.httpHost + RestURL.otpVerifyURL; }
-  protected get otpResendUrl()        { return RestURL.httpHost + RestURL.otpResendURL; }
-  protected get loginSocialUrl()      { return RestURL.httpHost + RestURL.loginSocialURL; }
-  protected get logoutEverywhereUrl() { return RestURL.httpHost + RestURL.logoutEverywhereURL; }
-  protected get deleteAccountUrl()    { return RestURL.httpHost + RestURL.deleteAccountURL; }
-  protected get pushRegisterUrl()     { return RestURL.httpHost + RestURL.pushRegisterURL; }
-  protected get pushRevokeUrl()       { return RestURL.httpHost + RestURL.pushRevokeURL; }
+  protected readonly appdataUrl                = this.url(RestURL.appdataURL);
+  protected readonly loginUrl                  = this.url(RestURL.loginURL);
+  protected readonly registerUrl               = this.url(RestURL.registerURL);
+  protected readonly chpassUrl                 = this.url(RestURL.chpassURL);
+  protected readonly confirmRegisterUrl        = this.url(RestURL.confirmRegisterURL);
+  protected readonly confirmChpassUrl          = this.url(RestURL.confirmChpassURL);
+  protected readonly loginGoogleUrl            = this.url(RestURL.loginGoogleURL);
+  protected readonly twoFactorSetupUrl         = this.url(RestURL.twoFactorSetupURL);
+  protected readonly twoFactorVerifyUrl        = this.url(RestURL.twoFactorVerifyURL);
+  protected readonly twoFactorDisableUrl       = this.url(RestURL.twoFactorDisableURL);
+  protected readonly twoFactorLoginVerifyUrl   = this.url(RestURL.twoFactorLoginVerifyURL);
+  protected readonly twoFactorBackupVerifyUrl  = this.url(RestURL.twoFactorBackupVerifyURL);
+  protected readonly trustedDeviceListUrl      = this.url(RestURL.trustedDeviceListURL);
+  protected readonly trustedDeviceRegisterUrl  = this.url(RestURL.trustedDeviceRegisterURL);
+  protected readonly trustedDeviceRevokeUrl    = this.url(RestURL.trustedDeviceRevokeURL);
+  protected readonly otpSendUrl                = this.url(RestURL.otpSendURL);
+  protected readonly otpVerifyUrl              = this.url(RestURL.otpVerifyURL);
+  protected readonly otpResendUrl              = this.url(RestURL.otpResendURL);
+  protected readonly loginSocialUrl            = this.url(RestURL.loginSocialURL);
+  protected readonly logoutEverywhereUrl       = this.url(RestURL.logoutEverywhereURL);
+  protected readonly deleteAccountUrl          = this.url(RestURL.deleteAccountURL);
+  protected readonly pushRegisterUrl           = this.url(RestURL.pushRegisterURL);
+  protected readonly pushRevokeUrl             = this.url(RestURL.pushRevokeURL);
 
   token: string | null = null;
   readonly isLoggedIn = signal(false);

package/src/service/base_rest.service.ts

@@ -0,0 +1,20 @@
+import { HttpClient } from '@angular/common/http';
+import { inject } from '@angular/core';
+import { RestURL } from './rest_url';
+
+/**
+ * Foundation for sail's REST API clients. Owns the shared `http` injection
+ * and the `host + path` URL builder so subclasses don't repeat them.
+ *
+ * Subclasses set `providedIn: 'root'` on their own `@Injectable` decorator
+ * (this class itself stays unannotated — Angular resolves it through the
+ * subclass).
+ */
+export abstract class BaseRestService {
+  protected readonly http = inject(HttpClient);
+
+  /** Prefix any `RestURL.*URL` path with the configured backend host. */
+  protected url(path: string): string {
+    return RestURL.httpHost + path;
+  }
+}

package/src/service/billing.service.ts

@@ -1,7 +1,7 @@
-import { Injectable, inject } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { RestURL } from './rest_url';
+import { BaseRestService } from './base_rest.service';
 import {
   CheckoutRequest,
   CheckoutResponse,
@@ -19,13 +19,7 @@ import {
  * keel/SHARED_PAYMENT.md for the backend contract.
  */
 @Injectable({ providedIn: 'root' })
-export class BillingService {
-  private readonly http = inject(HttpClient);
-
-  private url(path: string): string {
-    return RestURL.httpHost + path;
-  }
-
+export class BillingService extends BaseRestService {
   /** Public catalog — safe to call before login. */
   listPlans(): Observable<PublicPlan[]> {
     return this.http.get<PublicPlan[]>(this.url(RestURL.plansURL));

package/src/service/payout.service.ts

@@ -1,7 +1,7 @@
-import { inject, Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { RestURL } from './rest_url';
+import { BaseRestService } from './base_rest.service';
 import {
   PayoutOnboardingSession,
   ReusableAccount,
@@ -19,13 +19,7 @@ import {
  * RestURL.payout*URL.
  */
 @Injectable({ providedIn: 'root' })
-export class PayoutService {
-  private readonly http = inject(HttpClient);
-
-  private url(path: string): string {
-    return RestURL.httpHost + path;
-  }
-
+export class PayoutService extends BaseRestService {
   /** Launch the hosted-KYC flow. Returns a URL to open + provider-side handle. */
   startOnboarding(): Observable<PayoutOnboardingSession> {
     return this.http.post<PayoutOnboardingSession>(this.url(RestURL.payoutOnboardStartURL), {});

package/src/service/rest_service.ts

@@ -1,13 +1,13 @@
-import { HttpClient, HttpErrorResponse, HttpParams } from "@angular/common/http";
-import { inject, Injectable } from "@angular/core";
+import { HttpErrorResponse, HttpParams } from "@angular/common/http";
+import { Injectable } from "@angular/core";
 import { catchError, map, Observable, throwError } from "rxjs";
 import { PaginatedList } from "../model/appdata";
 import { RestURL } from "./rest_url";
+import { BaseRestService } from "./base_rest.service";
 
 @Injectable({providedIn: 'root'})
-export class BackendService {
-    protected readonly prefix = RestURL.httpHost + RestURL.api_prefix;
-    protected readonly http = inject(HttpClient);
+export class BackendService extends BaseRestService {
+    protected readonly prefix = this.url(RestURL.api_prefix);
 
     protected handleError(error: HttpErrorResponse) {
         if (error.status === 0) {

package/src/service/user_payment_method.service.ts

@@ -1,8 +1,8 @@
-import { inject, Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { Injectable, inject } from '@angular/core';
 import { Observable } from 'rxjs';
 import { RestURL } from './rest_url';
 import { BackendService } from './rest_service';
+import { BaseRestService } from './base_rest.service';
 import { UserPaymentMethod } from '../model/appdata';
 
 /**
@@ -17,8 +17,7 @@ import { UserPaymentMethod } from '../model/appdata';
  * single-row CRUD can't express.
  */
 @Injectable({ providedIn: 'root' })
-export class UserPaymentMethodService {
-  private readonly http = inject(HttpClient);
+export class UserPaymentMethodService extends BaseRestService {
   private readonly backend = inject(BackendService);
 
   /**
@@ -40,9 +39,6 @@ export class UserPaymentMethodService {
    * Custom endpoint — see service-class doc for the rationale.
    */
   setDefault(id: number): Observable<{ message: string }> {
-    return this.http.post<{ message: string }>(
-      RestURL.httpHost + RestURL.paymentMethodSetDefaultURL,
-      { id },
-    );
+    return this.http.post<{ message: string }>(this.url(RestURL.paymentMethodSetDefaultURL), { id });
   }
 }

package/src/util/text.ts

@@ -0,0 +1,19 @@
+/**
+ * Convert a snake_case / lower_case identifier to Title Case.
+ *
+ *   titleCase('user_payment_method') -> 'User Payment Method'
+ *   titleCase('UserId')              -> 'Userid'   (no camelCase split)
+ *
+ * Used as the fallback label for tables and columns when no explicit
+ * caption is set in `basis.table_header.Caption` / `basis.column.Caption`.
+ * Mirrors keel's `common.PascalCase`-style helpers on the frontend side
+ * so caption rendering is consistent across consumers.
+ */
+export function titleCase(str: string): string {
+  return str
+    .replaceAll('_', ' ')
+    .toLowerCase()
+    .split(' ')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+}