@nauticana/sail 1.1.44 → 1.1.45

package/src/component/table/table_list.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, input, linkedSignal, OnInit, signal, Type, ViewEncapsulation } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { ActivatedRoute, Params } from "@angular/router";
-import { catchError, EMPTY, Observable, switchMap, take, tap } from "rxjs";
+import { ActivatedRoute, Params, Router } from "@angular/router";
+import { catchError, EMPTY, finalize, Observable, switchMap, take, tap } from "rxjs";
 import { errorDetail } from "../../util/errors";
 import { AbstractEditableView } from "../abstract/base_view";
 import { TableEdit } from "./table_edit";
@@ -9,13 +9,18 @@ import { MatButtonModule } from "@angular/material/button";
 import { MatCheckboxModule } from "@angular/material/checkbox";
 import { MatIconModule } from "@angular/material/icon";
 import { MatPaginatorModule, PageEvent } from "@angular/material/paginator";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+
+const DEFAULT_PAGE_SIZE = 25;
+// keel list controls; every other query parameter is a column filter.
+const RESERVED_PARAMS = new Set(['_action', '_order', '_limit', '_offset']);
 
 @Component({
     selector: 'sail-table-list',
     templateUrl: './table_list.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
-    imports: [MatButtonModule, MatCheckboxModule, MatIconModule, MatPaginatorModule],
+    imports: [MatButtonModule, MatCheckboxModule, MatIconModule, MatPaginatorModule, MatProgressBarModule],
 })
 export class TableList extends AbstractEditableView implements OnInit {
     override dialogWidth = '400px';
@@ -30,32 +35,23 @@ export class TableList extends AbstractEditableView implements OnInit {
     override readonly apiName         = linkedSignal<string, string>({ source: () => this.apiNameInput(),        computation: (v, p) => v || p?.value || '' });
     override readonly dialogComponent = linkedSignal<Type<unknown> | undefined, Type<unknown> | undefined>({ source: () => this.dialogComponentInput(), computation: (v, p) => v ?? p?.value });
 
-    // Server-side paging (keel list caps at the requested _limit; total from the envelope).
+    readonly emptyMessage = input('');
+
+    // Paging and sort live in the URL (_limit, _offset, _order) and run on the server.
     readonly pageIndex = signal(0);
-    readonly pageSize = signal(25);
+    readonly pageSize = signal(DEFAULT_PAGE_SIZE);
     readonly total = signal(0);
-    readonly pageSizeOptions = [10, 25, 50, 100];
-
-    // Client-side sort of the CURRENT page — keel's list endpoint has no order
-    // parameter, so cross-page ordering isn't possible from the frontend.
+    readonly pageSizeOptions = [10, DEFAULT_PAGE_SIZE, 50, 100];
     readonly sortColumn = signal('');
     readonly sortAscending = signal(true);
-    readonly sortedRecords = computed(() => {
-        const rows = this.records();
-        const column = this.sortColumn();
-        if (!column) return rows;
-        const dir = this.sortAscending() ? 1 : -1;
-        return [...rows].sort((a, b) => {
-            const av = a[column], bv = b[column];
-            if (av == null && bv == null) return 0;
-            if (av == null) return dir;
-            if (bv == null) return -dir;
-            if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * dir;
-            return String(av).localeCompare(String(bv), undefined, { numeric: true }) * dir;
-        });
-    });
+    readonly loading = signal(false);
+    private request = 0;
+
+    readonly activeFilters = computed(() => Object.entries(this.searchTerms())
+        .map(([key, value]) => ({ label: this.colCaption(key), value: this.displayValue(key, value) })));
 
     private readonly route = inject(ActivatedRoute);
+    private readonly router = inject(Router);
     private readonly destroyRef = inject(DestroyRef);
 
     ngOnInit() {
@@ -72,29 +68,25 @@ export class TableList extends AbstractEditableView implements OnInit {
 
     protected handleDelete(record: Record<string, unknown>): void {
         if (!this.requireAuth(() => this.canDelete(), 'delete')) return;
-        if (confirm('Are you sure you want to delete this record?')) {
-            const keyFilter = this.getKeyFilters(record);
-            this.backendService.delete(this.apiName(), keyFilter).subscribe({
+        this.prompt.ask({ title: `Delete this ${this.getCaption()} record?`, action: 'Delete record', destructive: true }, () =>
+            this.backendService.delete(this.apiName(), this.getKeyFilters(record)).subscribe({
                 next: () => this.fetchRecords(),
                 error: (err) => {
                     console.error('Delete failed', err);
                     this.viewError.set(errorDetail(err, 'Delete failed.'));
                 },
-            });
-        }
+            }));
     }
 
     protected handleUpdate(result: Record<string, unknown>, isNew: boolean, _original: Record<string, unknown>): void {
         if (!this.requireAuth(() => isNew ? this.canCreate() : this.canUpdate(), isNew ? 'create' : 'update')) 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);
-                    this.viewError.set(errorDetail(err, 'Save failed.'));
-                },
-            });
-        }
+        this.backendService.post(this.apiName(), result).subscribe({
+            next: () => this.fetchRecords(),
+            error: (err) => {
+                console.error('Save failed', err);
+                this.viewError.set(errorDetail(err, 'Save failed.'));
+            },
+        });
     }
 
     fetchRecords() {
@@ -102,13 +94,20 @@ export class TableList extends AbstractEditableView implements OnInit {
         this.loadPage().subscribe();
     }
 
+    /** Only the latest request may change rows or clear `loading`; older responses are dropped. */
     private loadPage(): Observable<unknown> {
-        return this.backendService.listPaginated<Record<string, unknown>>(
-            this.apiName(),
-            this.searchTerms(),
-            { limit: this.pageSize(), offset: this.pageIndex() * this.pageSize() },
-        ).pipe(
+        const id = ++this.request;
+        const size = this.pageSize();
+        const column = this.sortColumn();
+        this.records.set([]);
+        this.loading.set(true);
+        return this.backendService.listPaginated<Record<string, unknown>>(this.apiName(), this.searchTerms(), {
+            limit: size,
+            offset: this.pageIndex() * size,
+            orderBy: column ? `${column} ${this.sortAscending() ? 'ASC' : 'DESC'}` : undefined,
+        }).pipe(
             tap((page) => {
+                if (id !== this.request) return;
                 this.records.set(page.items ?? []);
                 this.total.set(page.total ?? page.items?.length ?? 0);
                 this.updateDisplayedColumns(page.items ?? []);
@@ -116,49 +115,57 @@ export class TableList extends AbstractEditableView implements OnInit {
             }),
             catchError((err) => {
                 console.error('Fetch failed', err);
-                this.viewError.set(errorDetail(err, 'Failed to load records.'));
+                if (id === this.request) this.viewError.set(errorDetail(err, 'Failed to load records.'));
                 return EMPTY;
             }),
+            finalize(() => { if (id === this.request) this.loading.set(false); }),
         );
     }
 
     onPage(event: PageEvent) {
-        this.pageIndex.set(event.pageIndex);
-        this.pageSize.set(event.pageSize);
-        this.fetchRecords();
+        const offset = event.pageIndex * event.pageSize;
+        this.navigate({ _limit: event.pageSize === DEFAULT_PAGE_SIZE ? null : event.pageSize, _offset: offset || null });
     }
 
     onSortColumn(column: string) {
         if (column === 'actions') return;
-        if (this.sortColumn() === column) {
-            this.sortAscending.update((asc) => !asc);
-        } else {
-            this.sortColumn.set(column);
-            this.sortAscending.set(true);
-        }
+        const descending = this.sortColumn() === column && this.sortAscending();
+        this.navigate({ _order: descending ? column + ' DESC' : column, _offset: null });
+    }
+
+    /** Drops the filters and the page; keeps sort and page size. */
+    clearSearch() {
+        const { _order, _limit } = this.route.snapshot.queryParams;
+        this.router.navigate([], { relativeTo: this.route, queryParams: { _order, _limit } });
+    }
+
+    private navigate(controls: Params) {
+        this.router.navigate([], { relativeTo: this.route, queryParams: { ...controls, _action: null }, queryParamsHandling: 'merge' });
     }
 
-    /** Refresh the row list on successful action — most actions mutate visible state (set_default flipping defaults, etc.). */
     protected override onActionSuccess(): void {
         this.fetchRecords();
     }
 
-    /** Every params emission REPLACES searchTerms, so a bare list URL clears stale filters. */
+    /** Every params emission replaces the filters, so a bare list URL clears them. */
     private handleQueryParams(params: Params): Observable<unknown> {
-        const newSearchTerms: {[key: string]: string} = {};
-        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];
-                }
-            }
+        const filters: {[key: string]: string} = {};
+        for (const [key, value] of Object.entries(params)) {
+            if (!RESERVED_PARAMS.has(key)) filters[key] = String(value);
         }
-        this.searchTerms.set(newSearchTerms);
-        this.pageIndex.set(0);
-        if (action === 'create') {
+        this.searchTerms.set(filters);
+        const limit = Number(params['_limit']);
+        const size = this.pageSizeOptions.includes(limit) ? limit : DEFAULT_PAGE_SIZE;
+        const offset = Number(params['_offset']);
+        this.pageSize.set(size);
+        this.pageIndex.set(Number.isInteger(offset) && offset >= 0 && offset % size === 0 ? offset / size : 0);
+        const order = String(params['_order'] ?? '').trim().split(/\s+/).filter(Boolean);
+        const [column = '', direction = 'ASC'] = order;
+        const columns = this.metadataColumns();
+        const valid = order.length <= 2 && /^\w+$/.test(column) && columns.includes(column) && /^(ASC|DESC)$/i.test(direction);
+        this.sortColumn.set(valid ? column : '');
+        this.sortAscending.set(!valid || direction.toUpperCase() === 'ASC');
+        if (params['_action'] === 'create') {
             // Gate on appdata so the create dialog gets real column metadata.
             this.cacheService.getAppData().pipe(
                 take(1),

package/src/component/table/table_search.ts

@@ -75,7 +75,7 @@ export class TableSearch extends BaseForm implements OnInit {
     onSearch() {
         const targetRoute = this.targetRoute();
         if (!targetRoute) {
-            alert('Navigation target not found for this table');
+            this.reportError('Navigation target not found for this table.');
             return;
         }
         this.router.navigate([targetRoute], {queryParams: this.buildSearchTerms(this.editableRecord())});
@@ -103,7 +103,7 @@ export class TableSearch extends BaseForm implements OnInit {
         if (!this.requireAuth(() => this.canCreate(), 'create')) return;
         const targetRoute = this.targetRoute();
         if (!targetRoute) {
-            alert('Navigation target not found for this table');
+            this.reportError('Navigation target not found for this table.');
             return;
         }
         this.router.navigate([targetRoute], {queryParams: {'_action': 'create'}});

package/src/index.ts

@@ -37,6 +37,8 @@ export * from './component/table/table_report';
 export * from './component/table/grouped_bulk_action';
 export * from './component/table/before_after_diff';
 export * from './component/navigation/navigation';
+export * from './component/dialog/confirm_dialog';
+export * from './component/form/field_error';
 export * from './component/login/login_component';
 export * from './component/login/register_component';
 export * from './component/login/chpass_component';
@@ -83,6 +85,7 @@ export * from './component/document/document_upload';
 export * from './component/document/partner_documents';
 export * from './component/document/document_review_queue';
 export * from './service/auth.service';
+export * from './service/prompt.service';
 export * from './service/sca_confirmer';
 export * from './service/domain_verifier';
 export * from './service/billing.service';
@@ -107,5 +110,6 @@ export * from './service/base_rest.service';
 export * from './util/text';
 export * from './util/money';
 export * from './util/errors';
+export * from './util/forms';
 export * from './util/password_policy';
 export * from './util/sso';

package/src/model/appdata.ts

@@ -411,6 +411,9 @@ export interface Subscription {
 	scheduledAt?:     string;
 }
 
+// The offer a plan change moves to; a `PlanPrice` fits. Omitted, keel keeps the current terms.
+export type PlanOffer = Pick<PlanPrice, 'billingCycle' | 'termType' | 'termCount'>;
+
 // keel's plan-change outcome: applied now, or at the period end.
 export interface PlanChangeResult {
 	status: 'changed' | 'scheduled';

package/src/service/auth.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, WritableSignal, inject, signal } from '@angular/core';
+import { Injectable, Injector, WritableSignal, inject, signal } from '@angular/core';
 import { HttpErrorResponse, HttpParams } from '@angular/common/http';
 import { filter, finalize, map, mergeMap, shareReplay, take, tap } from 'rxjs/operators';
 import { PasswordRules } from '../util/password_policy';
@@ -19,6 +19,7 @@ import { CanActivateFn, CanDeactivateFn, Router, Routes } from '@angular/router'
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../config';
 import { BaseRestService } from './base_rest.service';
 import { resetAuthCircuit } from './auth.interceptor';
+import { PromptService } from './prompt.service';
 
 /** Thrown by refreshSession() when the session changed while the rotation was in
  *  flight; the result was discarded and the current session is untouched. */
@@ -65,6 +66,7 @@ interface PermissionRow {
 export abstract class BaseAuthService extends BaseRestService {
   protected readonly router = inject(Router);
   protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
+  private readonly injector = inject(Injector);
 
   // Reactive cache: computed()s that read metadata through `cache` (via
   // getTableDefinition etc.) recompute automatically when appdata loads/clears.
@@ -850,12 +852,17 @@ 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;
+    if (!component?.hasUnsavedChanges?.()) return true;
+    return this.injector.get(PromptService).confirm({
+      title: 'Leave without saving?', message: 'Your changes on this page are not saved.', action: 'Leave page', destructive: true,
+    });
   };
 
+  /** Route title: the page caption suffixed with `appTitle`. */
+  private pageTitle(caption?: string): string | undefined {
+    return [caption, this.guiConfig.appTitle].filter(Boolean).join(' | ') || undefined;
+  }
+
   /** Override in subclasses to add project-specific routes */
   protected buildExtraRoutes(data: ApplicationData): Routes {
     if (this.guiConfig.extraRoutes) {
@@ -919,7 +926,7 @@ export abstract class BaseAuthService extends BaseRestService {
             ];
 
             if (dashboardComponent) {
-                newRoutes.push({ path: 'dashboard', component: dashboardComponent });
+                newRoutes.push({ path: 'dashboard', component: dashboardComponent, title: this.pageTitle('Dashboard') });
             }
 
             for (const menu of menus) {
@@ -933,12 +940,14 @@ export abstract class BaseAuthService extends BaseRestService {
                     const api = apis?.[restUri];
                     const apiName = restUri; // bare RestUri; BackendService.crudUrl resolves the version
                     const tableName = api?.Table?.TableName ?? restUri;
+                    const title = this.pageTitle(page.Caption);
 
                     const overrideComponent = this.getRouteOverride(restUri);
                     if (overrideComponent) {
                         children.push({
                             path: page.ItemId,
                             component: overrideComponent,
+                            title,
                             canActivate: [this.canActivate],
                             data: { tableName, apiName },
                         });
@@ -950,6 +959,7 @@ export abstract class BaseAuthService extends BaseRestService {
                         children.push({
                             path: page.ItemId,
                             component: TableReport,
+                            title,
                             canActivate: [this.canActivate],
                             data: { tableName, apiName },
                         });
@@ -957,6 +967,7 @@ export abstract class BaseAuthService extends BaseRestService {
                         children.push({
                             path: page.ItemId,
                             component: TableSearch,
+                            title,
                             canActivate: [this.canActivate],
                             data: {
                                 tableName,
@@ -967,6 +978,7 @@ export abstract class BaseAuthService extends BaseRestService {
                         children.push({
                             path: page.ItemId + '/list',
                             component: TableList,
+                            title,
                             canActivate: [this.canActivate],
                             data: { tableName, apiName },
                         });
@@ -974,6 +986,7 @@ export abstract class BaseAuthService extends BaseRestService {
                         children.push({
                             path: page.ItemId,
                             component: TableList,
+                            title,
                             canActivate: [this.canActivate],
                             data: { tableName, apiName },
                         });

package/src/service/billing.service.ts

@@ -8,6 +8,7 @@ import {
   Invoice,
   PaymentMethod,
   PlanChangeResult,
+  PlanOffer,
   PlanOverage,
   PortalResponse,
   PublicPlan,
@@ -53,13 +54,14 @@ export class BillingService extends BaseRestService {
   }
 
   /**
-   * Upgrade / downgrade the current subscription to `planId` — distinct from
-   * first-time checkout. keel applies it now (`changed`) or at the period end
-   * (`scheduled`); the current plan resumes renewal. 403 without
-   * PARTNER_PLAN_SUBSCRIPTION / CHANGE.
+   * Move the current subscription to `planId` on `offer` (one of the plan's `prices`;
+   * omitted keeps the current terms) — distinct from first-time checkout. keel applies it
+   * now (`changed`) or at the period end (`scheduled`); the same plan on the same terms
+   * resumes renewal. 403 without PARTNER_PLAN_SUBSCRIPTION / CHANGE.
    */
-  changePlan(planId: string): Observable<PlanChangeResult> {
-    return this.http.post<PlanChangeResult>(this.url(RestURL.changePlanURL), { planId });
+  changePlan(planId: string, offer?: PlanOffer): Observable<PlanChangeResult> {
+    const terms = offer && { billingCycle: offer.billingCycle, termType: offer.termType, termCount: offer.termCount };
+    return this.http.post<PlanChangeResult>(this.url(RestURL.changePlanURL), { planId, ...terms });
   }
 
   /** What to remove before changing to `planId`; empty when the change is allowed.

package/src/service/prompt.service.ts

@@ -0,0 +1,27 @@
+import { inject, Injectable } from "@angular/core";
+import { MatDialog } from "@angular/material/dialog";
+import { MatSnackBar } from "@angular/material/snack-bar";
+import { map, Observable } from "rxjs";
+import { ConfirmDialog, ConfirmOptions } from "../component/dialog/confirm_dialog";
+
+/** Shared confirmation and failure notice, in place of native confirm() and alert(). */
+@Injectable({ providedIn: 'root' })
+export class PromptService {
+    private readonly dialog = inject(MatDialog);
+    private readonly snack = inject(MatSnackBar);
+
+    /** Emits true when the action was chosen; false on Cancel, Escape, or backdrop. */
+    confirm(options: ConfirmOptions): Observable<boolean> {
+        return this.dialog.open(ConfirmDialog, { data: options, role: 'alertdialog', width: '400px' })
+            .afterClosed().pipe(map((result) => result === true));
+    }
+
+    /** Runs `then` once, only when the action was chosen. */
+    ask(options: ConfirmOptions, then: () => void): void {
+        this.confirm(options).subscribe((ok) => { if (ok) then(); });
+    }
+
+    notify(message: string): void {
+        this.snack.open(message, 'Dismiss', { politeness: 'assertive' });
+    }
+}

package/src/util/forms.ts

@@ -0,0 +1,12 @@
+import { AbstractControl } from "@angular/forms";
+
+const INVALID = 'input.ng-invalid, textarea.ng-invalid, select.ng-invalid, mat-select.ng-invalid';
+
+/** True when `control` may submit; otherwise marks it touched and focuses the first invalid field in `scope`. */
+export function submittable(control: AbstractControl, scope?: Element | null): boolean {
+    if (!control.invalid) return true;
+    control.markAllAsTouched();
+    const field = scope?.matches(INVALID) ? scope : scope?.querySelector(INVALID);
+    (field as HTMLElement | null | undefined)?.focus();
+    return false;
+}