@nauticana/sail 0.5.0

package/src/component/table/table_edit.html

@@ -0,0 +1,58 @@
+<h1 class="mat-h1 table-edit-title">
+    <span class="table-edit-title-text">
+        @if (title) {
+            {{ title }}
+        } @else if (isNew) {
+            New {{ getCaption() }} Record
+        } @else {
+            {{ getCaption() }} Details
+        }
+    </span>
+    @if (isDialog) {
+        <button mat-icon-button type="button" class="table-edit-close"
+                (click)="onCancel()" aria-label="Close dialog">
+            <mat-icon>close</mat-icon>
+        </button>
+    }
+</h1>
+
+<div class="edit-container">
+    <div class="actions-bar">
+        @if (isReadOnlyMode) {
+            @if (canUpdate()) {
+                <button mat-raised-button class="primary" (click)="onEdit()">Edit</button>
+            }
+            @if (canCreate()) {
+                <button mat-raised-button class="accent" (click)="onNew()">New</button>
+            }
+            @if (canDelete()) {
+                <button mat-button class="warn" (click)="onDelete()">Delete</button>
+            }
+        } @else {
+            <button mat-raised-button class="primary" (click)="onSave()">Save</button>
+            <button mat-button (click)="onCancel()">Cancel</button>
+        }
+    </div>
+
+    <record-form [tableName]="tableName" [record]="editableRecord" [isReadOnly]="isReadOnlyBound"></record-form>
+
+    @if (tabCount > 0) {
+        <mat-tab-group>
+        @for (key of tabFields; track key) {
+            @if (cacheService.canRead(getTableName(key))) {
+                <mat-tab [label]="key">
+                    <div class="tab-content">
+                        <table-detail
+                           [records]="editableRecord[key]"
+                           [tableName]="getTableName(key)"
+                           [parentTableName]="tableName"
+                           [parentRecord]="editableRecord"
+                           [parentReadOnly]="isReadOnlyMode">
+                        </table-detail>
+                    </div>
+                </mat-tab>
+            }
+        }
+        </mat-tab-group>
+    }
+</div>

package/src/component/table/table_edit.ts

@@ -0,0 +1,163 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnInit, ViewEncapsulation } from "@angular/core";
+import { BaseForm } from "../abstract/base_form";
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import { MatTabsModule } from "@angular/material/tabs";
+import { TableDetail } from "./table_detail";
+import { BackendService } from "../../service/rest_service";
+import { RecordForm } from "../form/form_record";
+import { MatButtonModule } from "@angular/material/button";
+import { MatIconModule } from "@angular/material/icon";
+
+@Component({
+    selector: 'table-edit',
+    templateUrl: './table_edit.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    imports: [
+        RecordForm,
+        MatButtonModule,
+        MatIconModule,
+        MatTabsModule,
+        TableDetail,
+    ]
+})
+export class TableEdit extends BaseForm implements OnInit {
+    @Input() record: any = {};
+    @Input() override tableName = '';
+    @Input() apiName = '';
+    isReadOnlyMode = true;
+    private readonly backendService = inject(BackendService);
+    private readonly dialogRef = inject(MatDialogRef<TableEdit>, {optional: true});
+    private readonly dialogData = inject<{record?: any; tableName?: string; apiName?: string; isNew?: boolean} | null>(MAT_DIALOG_DATA, {optional: true});
+    private readonly cdr = inject(ChangeDetectorRef);
+
+    protected tabCount = 0;
+    protected tabFields: string[] = [];
+    protected get isDialog(): boolean { return !!this.dialogRef; }
+    /** Snapshot taken when the user enters edit mode; used for dirty-tracking on save. */
+    private originalSnapshot: any = null;
+
+    ngOnInit(): void {
+        if (this.dialogData) {
+            this.record = this.dialogData.record ?? {};
+            this.tableName = this.dialogData.tableName ?? '';
+            this.apiName = this.dialogData.apiName ?? '';
+            this.isNew = this.dialogData.isNew ?? false;
+            this.isReadOnlyMode = !this.isNew;
+        }
+        if (this.isNew) {
+            this.initializeNewRecord();
+            this.buildTabs();
+        } else {
+            this.fetchFullRecord();
+        }
+    }
+
+    private initializeNewRecord() {
+        this.editableRecord = this.emptyRecord();
+        if (this.record) Object.assign(this.editableRecord, this.record);
+    }
+
+    private buildTabs() {
+        this.tabCount = 0;
+        this.tabFields = [];
+        for (const field of Object.keys(this.editableRecord)) {
+            if (this.isArray(this.editableRecord[field])) {
+                this.tabCount++;
+                this.tabFields.push(field);
+            }
+        }
+    }
+
+    private fetchFullRecord() {
+        this.editableRecord = {...this.record};
+        this.formatRecordTimeStamp(this.editableRecord);
+
+        const filter = this.getKeyFilters(this.record);
+        if (!filter) {
+            console.warn('Key definition could not be found');
+            return;
+        }
+
+        this.backendService.get<any>(this.apiName, filter).subscribe({
+            next: (record) => {
+                if (!record) {
+                    console.error('failed to read single record from the backend');
+                    return;
+                }
+                this.editableRecord = Array.isArray(record) ? record[0] : record;
+                this.formatRecordTimeStamp(this.editableRecord);
+                this.buildTabs();
+                this.cdr.markForCheck();
+            },
+            error: (error) => {
+                console.error('failed to fetch full record details', error);
+            },
+        });
+    }
+
+    override isReadOnly(fieldName: string): boolean {
+        if (this.isReadOnlyMode) return true;
+        return super.isReadOnly(fieldName);
+    }
+
+    onEdit() {
+        this.isReadOnlyMode = false;
+        this.isNew = false;
+        this.isReadOnlyBound = this.isReadOnly.bind(this);
+        // Snapshot scalar fields only; children arrays are dirty-tracked per row.
+        this.originalSnapshot = { ...this.editableRecord };
+    }
+
+    onNew() {
+        this.isReadOnlyMode = false;
+        this.isNew = true;
+        this.editableRecord = this.emptyRecord();
+        this.isReadOnlyBound = this.isReadOnly.bind(this);
+    }
+
+    onSave() {
+        const result = {...this.editableRecord};
+        this.readyToSave(result, this.originalSnapshot);
+
+        if (this.dialogRef) {
+            this.dialogRef.close(result);
+        } else {
+            this.backendService.post(this.apiName, result).subscribe({
+                next: () => {
+                    this.isReadOnlyMode = true;
+                    this.isNew = false;
+                    this.isReadOnlyBound = this.isReadOnly.bind(this);
+                    this.cdr.markForCheck();
+                },
+                error: (err) => console.error('Save failed', err),
+            });
+        }
+    }
+
+    onDelete() {
+        if (confirm('Are you sure you want to delete this record?')) {
+            const result = {...this.editableRecord};
+            result[this.config.opField] = 'D';
+            this.backendService.post(this.apiName, result).subscribe({
+                next: () => {
+                    this.isReadOnlyMode = true;
+                    this.isReadOnlyBound = this.isReadOnly.bind(this);
+                    this.cdr.markForCheck();
+                },
+                error: (err) => console.error('Delete failed', err),
+            });
+        }
+    }
+
+    onCancel() {
+        if (this.dialogRef) {
+            this.dialogRef.close();
+            return;
+        }
+        this.isReadOnlyMode = true;
+        this.editableRecord = {...this.record};
+        this.isNew = false;
+        this.isReadOnlyBound = this.isReadOnly.bind(this);
+    }
+}

package/src/component/table/table_list.html

@@ -0,0 +1,41 @@
+<h2>{{ getCaption() }}</h2>
+
+@if (canCreate()) {
+    <button mat-raised-button class="accent" (click)="addRecord()">New Record</button>
+}
+
+<table>
+    <thead>
+        <tr>
+            @for (column of displayedColumns; track column) {
+                <th>{{ colCaption(column) }}</th>
+            }
+        </tr>
+    </thead>
+@if (records.length > 0) {
+    <tbody>
+    @for (record of records; track trackByRecord($index, record)) {
+        <tr>
+        @for (column of displayedColumns; track column) {
+            <td>
+            @if (isLinkColumn(column)) {
+                <a tabindex="0" role="button" (click)="editRecord(record)" (keydown.enter)="editRecord(record)">{{ displayValue(column, record[column]) }}</a>
+            } @else if (isBoolean(column)) {
+                <mat-checkbox [checked]="record[column] === true || record[column] === 'T'" disabled></mat-checkbox>
+            } @else if (column !== 'actions') {
+                {{ displayValue(column, record[column]) }}
+            } @else {
+                <button mat-icon-button type="button" (click)="editRecord(record)" title="Edit"><mat-icon>edit</mat-icon></button>
+                <button mat-icon-button type="button" (click)="deleteRecord(record)" title="Delete"><mat-icon>delete</mat-icon></button>
+            }
+            </td>
+        }
+        </tr>
+    }
+    </tbody>
+}
+</table>
+
+@if (records.length === 0 && displayedColumns.length > 0) {
+    <p class="empty-state">No records found.</p>
+}

package/src/component/table/table_list.ts

@@ -0,0 +1,100 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, OnInit, ViewEncapsulation } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { ActivatedRoute, Params } from "@angular/router";
+import { BaseView } from "../abstract/base_view";
+import { TableEdit } from "./table_edit";
+import { BackendService } from "../../service/rest_service";
+import { MatButtonModule } from "@angular/material/button";
+import { MatCheckboxModule } from "@angular/material/checkbox";
+import { MatIconModule } from "@angular/material/icon";
+
+@Component({
+    selector: 'table-list',
+    templateUrl: './table_list.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    imports: [MatButtonModule, MatCheckboxModule, MatIconModule],
+})
+export class TableList extends BaseView implements OnInit {
+    override dialogWidth = '400px';
+
+    private readonly route = inject(ActivatedRoute);
+    private readonly backendService = inject(BackendService);
+    private readonly cdr = inject(ChangeDetectorRef);
+    private readonly destroyRef = inject(DestroyRef);
+
+    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.dialogComponent) this.dialogComponent = data['dialogComponent'] ?? TableEdit;
+        this.route.queryParams.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params) => this.handleQueryParams(params));
+    }
+
+    protected handleDelete(record: {[key: string]: any}): void {
+        if (!this.canDelete()) {
+            alert('Missing authorization to delete records');
+            return;
+        }
+        if (confirm('Are you sure you want to delete this record?')) {
+            const keyFilter = this.getKeyFilters(record);
+            this.backendService.delete(this.apiName, keyFilter).subscribe({
+                next: () => this.fetchRecords(),
+                error: (err) => console.error('Delete failed', err),
+            });
+        }
+    }
+
+    protected handleUpdate(result: {[key: string]: any}, isNew: boolean, _original: {[key: string]: any}): void {
+        if (isNew && !this.canCreate()) {
+            alert('Missing authorization to create records');
+            return;
+        }
+        if (!isNew && !this.canUpdate()) {
+            alert('Missing authorization to update records');
+            return;
+        }
+        if (confirm('Are you sure you want to save this record?')) {
+            this.backendService.post(this.apiName, result).subscribe({
+                next: () => this.fetchRecords(),
+                error: (err) => console.error('Save failed', err),
+            });
+        }
+    }
+
+    fetchRecords() {
+        if (!this.canRead()) {
+            alert('Missing authorization to read records');
+            return;
+        }
+        this.backendService.list<{[key: string]: any}>(this.apiName, this.searchTerms).subscribe({
+            next: (records) => {
+                this.records = records;
+                this.updateDisplayedColumns(records);
+                this.cdr.markForCheck();
+            },
+            error: (err) => console.error('Fetch failed', err),
+        });
+    }
+
+    handleQueryParams(params: Params) {
+        const newSearchTerms: {[key: string]: string} = {};
+        let hasSearchTerms = false;
+        let action = '';
+        for (const key in params) {
+            if (Object.prototype.hasOwnProperty.call(params, key)) {
+                if (key === '_action') {
+                    action = params[key];
+                } else {
+                    newSearchTerms[key] = params[key];
+                    hasSearchTerms = true;
+                }
+            }
+        }
+        if (hasSearchTerms) this.searchTerms = newSearchTerms;
+        this.fetchRecords();
+        if (action === 'create') {
+            setTimeout(() => this.addRecord(), 500);
+        }
+    }
+}

package/src/component/table/table_lookup.html

@@ -0,0 +1,35 @@
+<h2 mat-dialog-title>{{ getCaption() }} Search</h2>
+<div mat-dialog-content>
+    <record-form [tableName]="tableName" [record]="searchRecord" [fields]="searchColumns" [isReadOnly]="isReadOnlyBound"></record-form>
+    <div class="search-actions">
+        <button mat-raised-button class="primary" (click)="onSearch()">Search</button>
+        <button mat-button (click)="onClear()">Clear</button>
+    </div>
+    @if (records.length > 0) {
+        <table>
+            <thead>
+                <tr>
+                    <th>Select</th>
+                    @for (column of displayedColumns; track column) {
+                        <th>{{ colCaption(column) }}</th>
+                    }
+                </tr>
+            </thead>
+            <tbody>
+                @for (record of records; track trackByRecord($index, record)) {
+                    <tr>
+                        <td><button class="select-btn" (click)="onSelect(record)">Select</button></td>
+                        @for (column of displayedColumns; track column) {
+                            <td>{{ displayValue(column, record[column]) }}</td>
+                        }
+                    </tr>
+                }
+            </tbody>
+        </table>
+    } @else {
+        <p>No records found</p>
+    }
+</div>
+<div mat-dialog-actions>
+    <button mat-button [mat-dialog-close]>Cancel</button>
+</div>

package/src/component/table/table_lookup.ts

@@ -0,0 +1,88 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnInit, ViewEncapsulation } from "@angular/core";
+import { MatButtonModule } from "@angular/material/button";
+import { MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent, MatDialogRef, MatDialogTitle } from "@angular/material/dialog";
+import { MatIconModule } from "@angular/material/icon";
+import { RecordForm } from "../form/form_record";
+import { BaseView } from "../abstract/base_view";
+import { BackendService } from "../../service/rest_service";
+
+@Component({
+    selector: 'table-lookup',
+    templateUrl: './table_lookup.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    imports: [
+        MatButtonModule,
+        MatDialogActions,
+        MatDialogClose,
+        MatDialogContent,
+        MatDialogTitle,
+        MatIconModule,
+        RecordForm,
+    ],
+})
+export class TableLookup extends BaseView implements OnInit {
+    override apiName = '';
+    searchRecord: any = {};
+    searchColumns: string[] = [];
+
+    private readonly backendService = inject(BackendService);
+    private readonly dialogRef = inject(MatDialogRef<TableLookup>);
+    private readonly data = inject<{tableName?: string; apiName?: string}>(MAT_DIALOG_DATA);
+    protected readonly cdr = inject(ChangeDetectorRef);
+
+    ngOnInit() {
+        if (this.data) {
+            this.tableName = this.data.tableName ?? '';
+            this.apiName   = this.data.apiName   ?? '';
+        }
+        this.searchColumns = this.getDisplayedColumns();
+        this.searchRecord  = this.emptyRecord();
+        this.resolveApi();
+    }
+
+    private resolveApi() {
+        if (!this.apiName && this.tableName) {
+            this.cacheService.getAppData().subscribe((data) => {
+                if (data.Apis) {
+                    for (const api in data.Apis) {
+                        const entry = data.Apis[api];
+                        if (entry.Table.TableName === this.tableName) {
+                            this.apiName = entry.Version ? entry.Version + '/' + api : api;
+                            break;
+                        }
+                    }
+                }
+            });
+        }
+    }
+
+    onSearch() {
+        this.resolveApi();
+        if (!this.apiName) {
+            console.error('API name not found for table ' + this.tableName);
+            return;
+        }
+        this.backendService.list<{[key: string]: any}>(this.apiName, this.buildSearchTerms(this.searchRecord)).subscribe({
+            next: (records) => {
+                this.records = records;
+                this.updateDisplayedColumns(records);
+                this.cdr.markForCheck();
+            },
+            error: (err) => console.error('Lookup search failed', err),
+        });
+    }
+
+    onSelect(record: any) {
+        this.dialogRef.close(record);
+    }
+
+    onClear() {
+        this.searchRecord = this.emptyRecord();
+        this.records = [];
+    }
+
+    protected handleDelete(_record: {[key: string]: any}): void {}
+
+    protected handleUpdate(_result: {[key: string]: any}, _isNew: boolean, _original: {[key: string]: any}): void {}
+}

package/src/component/table/table_search.html

@@ -0,0 +1,17 @@
+<h1>
+    @if (title) {
+        {{ title }}
+    } @else {
+        {{ getCaption() }} Search
+    }
+</h1>
+<div class="page-container">
+    <record-form [tableName]="tableName" [record]="editableRecord" [fields]="searchColumns" [isReadOnly]="isReadOnlyBound"></record-form>
+</div>
+<div class="search-actions">
+    <button mat-raised-button class="primary" (click)="onSearch()">Search</button>
+    <button mat-button (click)="onClear()">Clear</button>
+    @if (canCreate()) {
+        <button mat-raised-button class="accent" (click)="onAddRecord()">New Record</button>
+    }
+</div>

package/src/component/table/table_search.ts

@@ -0,0 +1,80 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnInit, ViewEncapsulation } from "@angular/core";
+import { MatButtonModule } from "@angular/material/button";
+import { ActivatedRoute, Router } from "@angular/router";
+import { BaseForm } from "../abstract/base_form";
+import { RecordForm } from "../form/form_record";
+import { ApplicationMenu } from "../../model/common";
+
+@Component({
+    selector: 'table-search',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    templateUrl: './table_search.html',
+    imports: [
+        MatButtonModule,
+        RecordForm,
+    ],
+})
+export class TableSearch extends BaseForm implements OnInit {
+    @Input() override tableName = '';
+    @Input() apiName: string = '';
+    @Input() targetRoute: string = '';
+    searchColumns: string[] = [];
+
+    private readonly router = inject(Router);
+    private readonly route = inject(ActivatedRoute);
+    private readonly cdr = inject(ChangeDetectorRef);
+
+    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'];
+        this.title = this.getCaption() + ' Search';
+        if (!this.targetRoute && (this.apiName || this.tableName)) {
+            this.cacheService.getMenus().subscribe((menus: ApplicationMenu[]) => {
+                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 (page.FilterOnList) {
+                                this.targetRoute = '/' + menu.Id!.toLowerCase() + '/' + page.ItemId!;
+                            } else {
+                                this.targetRoute = '/' + menu.Id!.toLowerCase() + '/' + page.ItemId! + '/list';
+                            }
+                            this.cdr.markForCheck();
+                            return;
+                        }
+                    }
+                }
+            });
+        }
+        this.editableRecord = this.emptyRecord();
+        this.searchColumns = this.getDisplayedColumns();
+    }
+
+    onSearch() {
+        if (!this.targetRoute) {
+            alert('Navigation target not found for this table');
+            return;
+        }
+        this.router.navigate([this.targetRoute], {queryParams: this.buildSearchTerms(this.editableRecord)});
+    }
+
+    onClear() {
+        this.editableRecord = this.emptyRecord();
+    }
+
+    onAddRecord() {
+        if (!this.canCreate()) {
+            alert('Missing authorization to create records');
+            return;
+        }
+        if (!this.targetRoute) {
+            alert('Navigation target not found for this table');
+            return;
+        }
+        this.router.navigate([this.targetRoute], {queryParams: {'_action': 'create'}});
+    }
+}

package/src/config.ts

@@ -0,0 +1,67 @@
+import { InjectionToken, Type } from '@angular/core';
+import { Routes } from '@angular/router';
+import { ApplicationData } from './model/appdata';
+
+export interface RouteLink {
+  label: string;
+  routerLink: string;
+}
+
+export interface TableOverride {
+  /** Fields to hide from edit forms in addition to global hiddenFields. Use PascalName. */
+  hiddenFields?: string[];
+  /**
+   * Default values applied to new records. Use PascalName.
+   * Values may be a literal or a zero-arg function (evaluated at record creation).
+   * Use a function for time-sensitive defaults like `() => new Date().toISOString()`.
+   */
+  defaultValues?: { [field: string]: unknown | (() => unknown) };
+  /**
+   * Timestamp columns that look auto-managed (HasDefault + DataType=timestamp)
+   * but are actually user-meaningful (e.g. begda, start_date, end_date).
+   * Listing them here keeps them visible and editable in forms;
+   * they're otherwise filtered out as audit columns.
+   */
+  editableTimestamps?: string[];
+}
+
+export interface SailGuiConfig {
+  opField: string;
+  hiddenFields: string[];
+  restUrls?: { [key: string]: string };
+  publicRoutes?: Routes;
+  extraRoutes?: (data: ApplicationData) => Routes;
+  dashboardComponent?: Type<any>;
+  appTitle?: string;
+  googleMapsApiKey?: string;
+  loginFooterLinks?: RouteLink[];
+  /** Links shown in navigation toolbar when not logged in (e.g., Login, Register) */
+  publicRouteLinks?: RouteLink[];
+  /** Map RestUri (or prefix pattern like 'analytic/*') to a custom component */
+  menuItemRouteOverrides?: { [restUriPattern: string]: Type<unknown> };
+  /** Per-table overrides for hiding fields / seeding defaults. Keyed by table PascalName. */
+  tableOverrides?: { [tableName: string]: TableOverride };
+
+  // ── Social / consent / account-deletion config ──
+  /** Google Identity Services client ID. Required to render the Google button in SocialLoginComponent. */
+  googleClientId?: string;
+  /** Apple Services ID (Apple Developer → Identifier → Services ID). Required for the Apple button. */
+  appleServiceId?: string;
+  /** Apple Sign-In redirect URI. Must match the Services ID configuration. */
+  appleRedirectUri?: string;
+  /** Public URL of your privacy policy. Shown as a link in ConsentGateComponent. */
+  privacyPolicyUrl?: string;
+  /** Content hash / version of the currently-deployed privacy policy. */
+  defaultPolicyVersion?: string;
+  /** ISO 639-1 language code of the policy variant shown ('en', 'fr', ...). */
+  defaultPolicyLanguage?: string;
+  /** Route to navigate to after account deletion. Defaults to '/login/local'. */
+  accountDeletedRoute?: string;
+}
+
+export const SAIL_GUI_CONFIG = new InjectionToken<SailGuiConfig>('SailGuiConfig');
+
+export const DEFAULT_CONFIG: SailGuiConfig = {
+  opField: 'op_code',
+  hiddenFields: ['op_code', 'PartnerId'],
+};