@nauticana/sail 0.9.1 → 0.9.3

package/README.md

@@ -623,6 +623,31 @@ INSERT INTO authorization_role_permission (role_id, authorization_object_id, act
 - **Snake_case fields** — keel marshals PascalCase, so a snake_case `address` field on the wire serializes as `Address` from keel but your client TS expects `address`. Mixed payloads break in subtle ways (read paths show data, write paths look like no-ops).
 - **Forgetting to restart httpsrv after seeding `rest_api_header`** — the route table is built once at startup. New rows = 404 until restart.
 
+## Tuning edit-form fields (column_display_attribute)
+
+The generic edit form renders each column from keel's metadata. By default:
+
+- **Textarea vs input** follows the column's `InputType` — keel sets
+  `textarea` for `TEXT`, `text` for `VARCHAR`. (Earlier builds keyed off
+  `Size > 80`, which turned long `VARCHAR`s into textareas; it now trusts
+  `InputType`.)
+- **Read-only** applies only to primary keys (and FK columns in child rows).
+
+To override per column without changing the schema, seed keel's
+`column_display_attribute` table (`table_name, column_name, read_only,
+display_width, display_rows`). sail honours three optional `TableColumn`
+fields it produces:
+
+| Field          | Effect |
+|----------------|--------|
+| `read_only`    | Field renders display-only (use for `*_at` audit timestamps, system-managed status). |
+| `display_rows` | Textarea height. `1` forces a single-line input — keep a column `TEXT` (so bulk-loaded values don't overflow) yet render it on one line. |
+| `display_width`| Field max-width in px. |
+
+No rows seeded = unchanged behaviour. Requires keel with the
+`column_display_attribute` feature; rebuild httpsrv after seeding (metadata
+is read once at startup).
+
 ## Account deletion / logout everywhere / push tokens
 
 These are App Store / Play Store compliance primitives from keel. All are opt-in.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nauticana/sail",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "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": [
@@ -50,6 +50,7 @@
     "@angular/core": "^21.2.8",
     "@angular/forms": "^21.2.8",
     "@angular/material": "^21.2.6",
+    "@angular/platform-browser": "^21.2.8",
     "@angular/router": "^21.2.8",
     "class-validator": "^0.15.1",
     "rxjs": "~7.8.0",

package/src/component/form/form_field.html

@@ -1,12 +1,12 @@
 @if (isLookupTableSearch()) {
     <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
         <mat-label>{{ colCaption(field()) }}</mat-label>
-        <input matInput [value]="readonlyField() ? displayCaption : value()" [required]="required" [readonly]="readonlyField()">
-        <button matIconButton matSuffix (click)="openLookup()" [disabled]="readonlyField()">
+        <input matInput [value]="isReadonly ? displayCaption : value()" [required]="required" [readonly]="isReadonly">
+        <button matIconButton matSuffix (click)="openLookup()" [disabled]="isReadonly">
             <mat-icon>search</mat-icon>
         </button>
     </mat-form-field>
-} @else if (inputType === 'select' && readonlyField()) {
+} @else if (inputType === 'select' && isReadonly) {
     <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
         <mat-label>{{ colCaption(field()) }}</mat-label>
         <input matInput [value]="displayCaption" readonly>
@@ -21,8 +21,8 @@
         </mat-select>
     </mat-form-field>
 } @else if (inputType === 'checkbox') {
-    <mat-checkbox [checked]="value() === true || value() === '1'" (change)="onCheckboxChange($event);" [disabled]="readonlyField()">{{ colCaption(field()) }}</mat-checkbox>
-} @else if (readonlyField() && isDateLike && !value()) {
+    <mat-checkbox [checked]="value() === true || value() === '1'" (change)="onCheckboxChange($event);" [disabled]="isReadonly">{{ colCaption(field()) }}</mat-checkbox>
+} @else if (isReadonly && isDateLike && !value()) {
     <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
         <mat-label>{{ colCaption(field()) }}</mat-label>
         <input matInput value="" readonly>
@@ -33,7 +33,7 @@
         <textarea matInput
          [value]="value()"
          (input)="onInputChange($event);"
-         [disabled]="readonlyField()"
+         [disabled]="isReadonly"
          [required]="required"
          [attr.maxLength]="maxLength"
          [rows]="textAreaRows">
@@ -46,7 +46,7 @@
          [type]="inputType"
          [value]="value()"
          (input)="onInputChange($event);"
-         [disabled]="readonlyField()"
+         [disabled]="isReadonly"
          [required]="required"
          [attr.maxLength]="maxLength"
          [attr.step]="step">

package/src/component/form/form_field.ts

@@ -17,8 +17,8 @@ import { TableLookup } from "../table/table_lookup";
     encapsulation: ViewEncapsulation.None,
     host: {
         '[class.field-wide]': 'isTextArea',
-        '[class.field-editable]': '!readonlyField()',
-        '[class.field-readonly]': 'readonlyField()',
+        '[class.field-editable]': '!isReadonly',
+        '[class.field-readonly]': 'isReadonly',
         '[style.max-width.px]': 'fieldMaxWidth',
     },
     imports: [
@@ -54,9 +54,19 @@ export class DynamicField extends BaseTable {
         return this.col.InputType;
     }
 
+    /** Effective read-only: explicit [readonly] input OR the column's own
+     *  Readonly flag from keel's column_display_attribute. */
+    get isReadonly(): boolean {
+        return this.readonlyField() || !!this.col?.Readonly;
+    }
+
     get isTextArea(): boolean {
         if (!this.col) return false;
-        return this.col.Size > 80;
+        // Explicit display_rows override wins; otherwise trust keel's InputType
+        // (TEXT columns → 'textarea', VARCHAR → 'text') rather than guessing
+        // from Size — a long VARCHAR is still a single-line field.
+        if (this.col.DisplayRows) return this.col.DisplayRows > 1;
+        return this.col.InputType === 'textarea';
     }
 
     get isDateLike(): boolean {
@@ -71,6 +81,7 @@ export class DynamicField extends BaseTable {
      * `null` = no cap (field fills its container — used for text areas / long fields).
      */
     get fieldMaxWidth(): number | null {
+        if (this.col?.DisplayWidth) return this.col.DisplayWidth;
         if (this.isTextArea) return null;
         const size = this.col?.Size ?? 0;
         if (size === 0) return 240;
@@ -81,6 +92,7 @@ export class DynamicField extends BaseTable {
     }
 
     get textAreaRows(): number {
+        if (this.col?.DisplayRows) return this.col.DisplayRows;
         if (!this.col) return 3;
         if (this.col.Size > 500) return 4;
         return 2;

package/src/model/appdata.ts

@@ -54,6 +54,11 @@ export interface TableColumn {
   HasDefault:   boolean;
   DefaultValue: string;
   Validators?:  AbstractControlOptions['validators'];
+  // Optional per-column UI overrides from keel's column_display_attribute.
+  // Absent/0 means "no override" — fall back to the Size/InputType heuristics.
+  Readonly?:     boolean;
+  DisplayWidth?: number;
+  DisplayRows?:  number;
 }
 
 // One custom button registered against a table via the basis

package/src/service/rest_service.ts

@@ -1,7 +1,7 @@
 import { HttpErrorResponse, HttpParams } from "@angular/common/http";
 import { inject, Injectable } from "@angular/core";
-import { catchError, map, Observable, throwError } from "rxjs";
-import { PaginatedList } from "../model/appdata";
+import { catchError, map, Observable, switchMap, take, throwError } from "rxjs";
+import { ApplicationData, PaginatedList } from "../model/appdata";
 import { RestURL } from "./rest_url";
 import { BaseAuthService } from "./auth.service";
 import { BaseRestService } from "./base_rest.service";
@@ -56,28 +56,45 @@ export class BackendService extends BaseRestService {
         return params;
     }
 
+    /** Gates a CRUD call on appdata being loaded — `appData$` is a ReplaySubject(1) so this resolves synchronously once the cache is populated, and blocks the call (instead of throwing) when a component fires CRUD before loadAppData() finishes. */
+    private appDataReady(): Observable<ApplicationData> {
+        return this.auth.getAppData().pipe(take(1));
+    }
+
     /** Unwraps `{items, limit, offset, total}` to the items array. Pass `_limit` / `_offset` in `filter` to control paging (defaults: 100 / 0). */
     list<T>(apiName: string, filter?: {[key: string]: string}) : Observable<T[]> {
         return this.listPaginated<T>(apiName, filter).pipe(map((page) => page.items));
     }
 
     listPaginated<T>(apiName: string, filter?: {[key: string]: string}) : Observable<PaginatedList<T>> {
-        return this.http.get<PaginatedList<T>>(
-            this.crudUrl(apiName, 'list'),
-            {params: this.toParams(filter)},
-        ).pipe(catchError(this.handleError));
+        return this.appDataReady().pipe(
+            switchMap(() => this.http.get<PaginatedList<T>>(
+                this.crudUrl(apiName, 'list'),
+                {params: this.toParams(filter)},
+            )),
+            catchError(this.handleError),
+        );
     }
 
     get<T>(apiName: string, filter?: {[key: string]: string}) : Observable<T> {
-        return this.http.get<T>(this.crudUrl(apiName, 'get'), {params: this.toParams(filter)}).pipe(catchError(this.handleError));
+        return this.appDataReady().pipe(
+            switchMap(() => this.http.get<T>(this.crudUrl(apiName, 'get'), {params: this.toParams(filter)})),
+            catchError(this.handleError),
+        );
     }
 
     post<T>(apiName: string, items: T | T[]) : Observable<{message: string}> {
-        return this.http.post<{message: string}>(this.crudUrl(apiName, 'post'), items).pipe(catchError(this.handleError));
+        return this.appDataReady().pipe(
+            switchMap(() => this.http.post<{message: string}>(this.crudUrl(apiName, 'post'), items)),
+            catchError(this.handleError),
+        );
     }
 
     delete(apiName: string, filter?: {[key: string]: string}): Observable<{message: string}> {
-        return this.http.delete<{message: string}>(this.crudUrl(apiName, 'delete'), {params: this.toParams(filter)}).pipe(catchError(this.handleError));
+        return this.appDataReady().pipe(
+            switchMap(() => this.http.delete<{message: string}>(this.crudUrl(apiName, 'delete'), {params: this.toParams(filter)})),
+            catchError(this.handleError),
+        );
     }
 
     /**