@nauticana/sail 1.0.8 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nauticana/sail",
-  "version": "1.0.8",
+  "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/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/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 });
             }