@nauticana/sail 0.9.2 → 0.9.4

package/README.md

@@ -623,6 +623,32 @@ 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, display_mode,
+display_width, display_rows`). sail honours three optional `TableColumn`
+fields it produces:
+
+| Field          | Effect |
+|----------------|--------|
+| `DisplayMode`  | `R` read-only (shown display-only; **hidden when empty**, so a new record's audit fields disappear and on edit only populated ones show). `H` hidden everywhere — the new-record builder omits it so the DB default/sequence/trigger fills it. `D` editable, prefilled with the column default on a new record. `I` insert-only — editable while creating, locked once it exists. `U` update-stamp — display-only like `R` in the UI, but keel auto-sets it on every UPDATE (`now()` for timestamps, `user_id` for integers), so `updated_at`/`updated_by` need no DB trigger. Empty/NULL = editable. |
+| `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. |
+
+`R`/`H`/`I` are also enforced server-side by keel (excluded from generic
+INSERT/UPDATE), so the modes are real, not just cosmetic. 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.2",
+  "version": "0.9.4",
   "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/abstract/base_form.ts

@@ -6,6 +6,11 @@ export abstract class BaseForm extends BaseTable {
     title = '';
 
     override isReadOnly(fieldName: string): boolean {
+        // keel column_display_attribute: 'R' is always display-only; 'I'
+        // (insert-only) is editable while creating, locked once it exists.
+        const mode = this.getColumn(fieldName)?.DisplayMode;
+        if (mode === 'R' || mode === 'U') return true; // 'U' = keel-set audit stamp
+        if (mode === 'I') return !this.isNew;
         return !this.isNew && this.isKey(fieldName);
     }
 }

package/src/component/abstract/base_table.ts

@@ -169,7 +169,20 @@ export abstract class BaseTable {
                     if (field.SequenceName) {
                         return; // auto-generated by database sequence
                     }
-                    if (field.HasDefault && field.DataType === 'timestamp'
+                    // column_display_attribute modes (explicit, win over the
+                    // timestamp heuristic). H/R/U are server-managed — omit so the
+                    // DB default/keel stamp fills them. D = seed the column default.
+                    if (field.DisplayMode === 'H' || field.DisplayMode === 'R'
+                        || field.DisplayMode === 'U') {
+                        return;
+                    }
+                    if (field.DisplayMode === 'D') {
+                        record[field.PascalName] = field.DataType === 'boolean'
+                            ? field.DefaultValue === 'true'
+                            : (field.DefaultValue ?? '');
+                        return;
+                    }
+                    if (!field.DisplayMode && field.HasDefault && field.DataType === 'timestamp'
                         && !editableTimestamps.has(field.PascalName)) {
                         return; // audit column — server-managed, don't include
                     }

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;
     }
 
+    /** Read-only state for this field. The parent form computes it (keys,
+     *  FK columns, and column_display_attribute modes R/I) and feeds it in. */
+    get isReadonly(): boolean {
+        return this.readonlyField();
+    }
+
     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/component/form/form_record.ts

@@ -36,9 +36,17 @@ export class RecordForm {
             this.guiConfig.tableOverrides?.[this.tableName()]?.editableTimestamps ?? []
         );
         if (tableDef && tableDef.Columns && tableDef.Columns.length > 0) {
+            const record = this.record();
             return tableDef.Columns
                 .filter(col => !(col.HasDefault && col.DataType === 'timestamp'
                                  && !editableTimestamps.has(col.PascalName)))
+                // column_display_attribute: 'H' is never shown; 'R'/'U' (read-only
+                // and keel-set audit stamp) show display-only but hide when empty —
+                // so a new record's audit fields disappear and on edit only
+                // populated ones show.
+                .filter(col => col.DisplayMode !== 'H')
+                .filter(col => !((col.DisplayMode === 'R' || col.DisplayMode === 'U')
+                                 && this.isEmpty(record[col.PascalName])))
                 .sort((a, b) => a.Order - b.Order)
                 .map(col => col.PascalName)
                 .filter(key => !hidden.has(key) && recordKeys.has(key));
@@ -50,6 +58,10 @@ export class RecordForm {
         return Array.isArray(value);
     }
 
+    private isEmpty(value: any): boolean {
+        return value === null || value === undefined || value === '';
+    }
+
     onRecordUpdate(updates: {[key: string]: any}) {
         Object.assign(this.record(), updates);
     }

package/src/model/appdata.ts

@@ -54,6 +54,12 @@ export interface TableColumn {
   HasDefault:   boolean;
   DefaultValue: string;
   Validators?:  AbstractControlOptions['validators'];
+  // Optional per-column UI/CRUD overrides from keel's column_display_attribute.
+  // DisplayMode: 'R' read-only, 'H' hidden, 'D' default-seeded, 'I' insert-only;
+  // absent/'' = editable default. Absent width/rows = fall back to heuristics.
+  DisplayMode?:  string;
+  DisplayWidth?: number;
+  DisplayRows?:  number;
 }
 
 // One custom button registered against a table via the basis