@nauticana/sail 1.0.7 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nauticana/sail",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "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",
   "scripts": {

package/src/component/abstract/base_table.ts

@@ -267,12 +267,26 @@ export abstract class BaseTable {
         return String(rawValue);
     }
 
-    isTimeStamp(fieldName: string): boolean {
+    /**
+     * Temporal input kind for a field, or null if not temporal. Drives both the
+     * load-format and save-restore so TIME/DATE columns aren't given the
+     * datetime-local (seconds + 'Z') treatment a Postgres TIME/DATE rejects.
+     */
+    temporalKind(fieldName: string): 'time' | 'date' | 'datetime-local' | null {
         const col = this.getColumn(fieldName)
-        if (col) {
-            return col.DataType === 'timestamp';
+        if (col?.InputType === 'time') return 'time'
+        if (col?.InputType === 'date') return 'date'
+        if (col?.InputType === 'datetime-local') return 'datetime-local'
+        // Fallback for column metadata predating keel's time/date split.
+        if (col ? col.DataType === 'timestamp'
+                : (fieldName.endsWith('Time') || fieldName.endsWith('time'))) {
+            return 'datetime-local'
         }
-        return fieldName.endsWith('Time') || fieldName.endsWith('time');
+        return null
+    }
+
+    isTimeStamp(fieldName: string): boolean {
+        return this.temporalKind(fieldName) !== null
     }
 
     isNumber(fieldName: string): boolean {
@@ -303,9 +317,11 @@ export abstract class BaseTable {
         return Array.isArray(value);
     }
 
-    formatTimeStamp(val: string): string {
+    formatTimeStamp(val: string, kind: 'time' | 'date' | 'datetime-local' = 'datetime-local'): string {
         if (val && typeof val === 'string') {
-            return val.slice(0, 16);
+            if (kind === 'time') return val.slice(0, 5);    // HH:MM
+            if (kind === 'date') return val.slice(0, 10);   // YYYY-MM-DD
+            return val.slice(0, 16);                         // YYYY-MM-DDTHH:MM
         }
         return val;
     }
@@ -313,16 +329,20 @@ export abstract class BaseTable {
     formatRecordTimeStamp(record: any) {
         if (record) {
             for (const key of Object.keys(record)) {
-                if (this.isTimeStamp(key)) {
-                    record[key] = this.formatTimeStamp(record[key]);
+                const kind = this.temporalKind(key);
+                if (kind) {
+                    record[key] = this.formatTimeStamp(record[key], kind);
                 }
             }
         }
     }
 
-    restoreTimeStamp(val: any): any {
-        // PostgreSQL can't cast '' to TIMESTAMP — normalize empty to null.
+    restoreTimeStamp(val: any, kind: 'time' | 'date' | 'datetime-local' = 'datetime-local'): any {
+        // PostgreSQL can't cast '' to a temporal type — normalize empty to null.
         if (val === '' || val === undefined || val === null) return null;
+        // TIME/DATE values are sent verbatim ('08:45', '2026-06-15'); only
+        // datetime-local needs the seconds + UTC marker the picker omits.
+        if (kind === 'time' || kind === 'date') return val;
         if (typeof val === 'string' && !val.endsWith('Z')) {
             return val + ':00Z';
         }
@@ -332,8 +352,9 @@ export abstract class BaseTable {
     restoreRecordTimeStamp(record: any) {
         if (record) {
             for (const key of Object.keys(record)) {
-                if (this.isTimeStamp(key)) {
-                    record[key] = this.restoreTimeStamp(record[key]);
+                const kind = this.temporalKind(key);
+                if (kind) {
+                    record[key] = this.restoreTimeStamp(record[key], kind);
                 }
             }
         }

package/src/component/form/form_field.ts

@@ -72,6 +72,7 @@ export class DynamicField extends BaseTable {
     get isDateLike(): boolean {
         if (!this.col) return false;
         return this.col.InputType === 'date'
+            || this.col.InputType === 'time'
             || this.col.InputType === 'datetime'
             || this.col.InputType === 'datetime-local';
     }

package/src/component/table/table_detail.html

@@ -38,7 +38,7 @@
                         </td>
                     }
                     <td>
-                        <button matIconButton (click)="saveRow()" title="Save"><mat-icon>save</mat-icon></button>
+                        <button matIconButton (click)="saveRow()" [title]="isNew ? 'Add' : 'Update'"><mat-icon>{{ isNew ? 'add' : 'check' }}</mat-icon></button>
                         <button matIconButton (click)="cancelRow(record)" title="Cancel"><mat-icon>cancel</mat-icon></button>
                     </td>
                 } @else {

package/src/component/table/table_detail.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, effect, inject, input, linkedSignal, OnInit, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, effect, inject, input, linkedSignal, OnInit, output, ViewEncapsulation } from "@angular/core";
 import { DynamicField } from "../form/form_field";
 import { MatButtonModule } from "@angular/material/button";
 import { BaseForm } from "../abstract/base_form";
@@ -26,6 +26,9 @@ export class TableDetail extends BaseForm implements OnInit {
     readonly parentRecord = input<any>({});
     /** When true, the parent view is in read-only mode — disable all child row editing. */
     readonly parentReadOnly = input(false);
+    /** Fires after any grid mutation (add/edit/delete/undelete/cancel) so a parent
+     *  can re-evaluate unsaved-changes state. Local only — no server call. */
+    readonly changed = output<void>();
 
     override readonly tableName = linkedSignal<string, string>({ source: () => this.tableNameInput(), computation: (v, p) => v || p?.value || '' });
 
@@ -88,6 +91,7 @@ export class TableDetail extends BaseForm implements OnInit {
                 } else {
                     Object.assign(record, result);
                 }
+                this.changed.emit();
             }
         });
     }
@@ -123,6 +127,7 @@ export class TableDetail extends BaseForm implements OnInit {
         this.editingRecord = null;
         this.originalRecord = null;
         this.isNew = false;
+        this.changed.emit();
     }
 
     cancelRow(record: any) {
@@ -137,6 +142,7 @@ export class TableDetail extends BaseForm implements OnInit {
         this.editingRecord = null;
         this.originalRecord = null;
         this.isNew = false;
+        this.changed.emit();
     }
 
     deleteRow(record: any) {
@@ -148,11 +154,13 @@ export class TableDetail extends BaseForm implements OnInit {
         } else {
             record[this.config.opField] = OpCode.Delete;
         }
+        this.changed.emit();
     }
 
     unDeleteRow(record: any) {
         if (record[this.config.opField] === OpCode.Delete) {
             record[this.config.opField] = OpCode.Update;
         }
+        this.changed.emit();
     }
 }

package/src/model/appdata.ts

@@ -40,7 +40,7 @@ export interface TableColumn {
   PascalName:   string;
   Caption:      string;
   DataType:     string;
-  InputType:    'text' | 'password' | 'number' | 'date' | 'datetime' | 'datetime-local' | 'textarea' | 'select' | 'checkbox';
+  InputType:    'text' | 'password' | 'number' | 'date' | 'time' | 'datetime' | 'datetime-local' | 'textarea' | 'select' | 'checkbox';
   Size:         number;
   Scale:        number;
   Step:         string;

package/src/service/auth.service.ts

@@ -12,7 +12,7 @@ import {
 import { RestURL } from './rest_url';
 import { Observable, ReplaySubject } from 'rxjs';
 import { ApplicationMenu, ConstantValue } from '../model/common';
-import { CanActivateFn, Router, Routes } from '@angular/router';
+import { CanActivateFn, CanDeactivateFn, Router, Routes } from '@angular/router';
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../config';
 import { BaseRestService } from './base_rest.service';
 
@@ -500,6 +500,15 @@ export abstract class BaseAuthService extends BaseRestService {
     );
   };
 
+  // Confirms navigation away when the routed component reports unsaved changes.
+  // Opt in by implementing hasUnsavedChanges(): boolean on the component.
+  readonly canDeactivate: CanDeactivateFn<{ hasUnsavedChanges?: () => boolean }> = (component) => {
+    if (component && typeof component.hasUnsavedChanges === 'function' && component.hasUnsavedChanges()) {
+      return window.confirm('You have unsaved changes. Leave this page without saving?');
+    }
+    return true;
+  };
+
   /** Override in subclasses to add project-specific routes */
   protected buildExtraRoutes(data: ApplicationData): Routes {
     if (this.guiConfig.extraRoutes) {
@@ -615,6 +624,13 @@ export abstract class BaseAuthService extends BaseRestService {
                     }
                 }
 
+                // Guard navigation away from any component-backed page that
+                // tracks unsaved changes (opt-in via hasUnsavedChanges()).
+                for (const r of children) {
+                    if ((r as { component?: unknown }).component) {
+                        (r as { canDeactivate?: unknown[] }).canDeactivate = [this.canDeactivate];
+                    }
+                }
                 newRoutes.push({ path: menuPath, children });
             }