@nauticana/sail 0.5.4 → 0.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nauticana/sail",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "Metadata-driven Angular component library for CRUD admin frontends backed by the keel Go backend. Tables, forms, navigation, OTP/2FA/social auth, billing.",
   "main": "src/index.ts",
   "files": [

package/src/component/table/table_report.html

@@ -1,5 +1,36 @@
 <h2>{{ reportTitle() }}</h2>
 
+@if (params().length > 0) {
+    <form class="report-params" (ngSubmit)="runReport()">
+        @for (param of params(); track param.Name) {
+            @let opts = optionsFor(param);
+            @if (opts) {
+                <mat-form-field appearance="outline">
+                    <mat-label>{{ titleCase(param.Name) }}</mat-label>
+                    <mat-select [value]="paramValue(param.Name)"
+                                (valueChange)="setParam(param.Name, $event)">
+                        <!-- Empty option lets the user clear the filter — the empty
+                             value is dropped before the request is built so the
+                             backend sees no constraint on this param. -->
+                        <mat-option [value]="''">Any</mat-option>
+                        @for (opt of opts; track opt.Value) {
+                            <mat-option [value]="opt.Value">{{ opt.Caption }}</mat-option>
+                        }
+                    </mat-select>
+                </mat-form-field>
+            } @else {
+                <mat-form-field appearance="outline">
+                    <mat-label>{{ titleCase(param.Name) }}</mat-label>
+                    <input matInput [type]="inputTypeFor(param)"
+                           [value]="paramValue(param.Name)"
+                           (input)="setParam(param.Name, $any($event.target).value)">
+                </mat-form-field>
+            }
+        }
+        <button mat-raised-button color="primary" type="submit">Run</button>
+    </form>
+}
+
 @if (errorMessage()) {
     <p class="empty-state">{{ errorMessage() }}</p>
 } @else if (records().length === 0) {

package/src/component/table/table_report.ts

@@ -1,14 +1,28 @@
 import { ChangeDetectionStrategy, Component, computed, effect, inject, input, signal } from "@angular/core";
-import { HttpClient } from "@angular/common/http";
+import { HttpClient, HttpParams } from "@angular/common/http";
+import { FormsModule } from "@angular/forms";
 import { MatCheckboxModule } from "@angular/material/checkbox";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInputModule } from "@angular/material/input";
+import { MatSelectModule } from "@angular/material/select";
+import { MatButtonModule } from "@angular/material/button";
 import { BaseAuthService } from "../../service/auth.service";
 import { RestURL } from "../../service/rest_url";
+import { ConstantValue } from "../../model/common";
+import { ReportParam } from "../../model/appdata";
 
 @Component({
     selector: 'table-report',
     templateUrl: './table_report.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [MatCheckboxModule],
+    imports: [
+        FormsModule,
+        MatCheckboxModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule,
+        MatButtonModule,
+    ],
 })
 export class TableReport {
     readonly apiName = input('');
@@ -21,6 +35,13 @@ export class TableReport {
     readonly displayedColumns = signal<string[]>([]);
     readonly errorMessage = signal('');
 
+    /**
+     * Per-parameter input bindings, keyed by param name. Empty string when
+     * the user hasn't entered a value yet — fetchReport drops empties so
+     * the URL doesn't carry `?param=` for unset fields.
+     */
+    readonly paramValues = signal<Record<string, string>>({});
+
     /**
      * Report header text — long-form description from rest_report_header.
      * Falls back to the title-cased table name only if the lookup misses
@@ -31,6 +52,18 @@ export class TableReport {
         return this.auth.getReport(reportId)?.Description || this.titleCase(this.tableName());
     });
 
+    /**
+     * Param definitions for the current report. Empty when the report has
+     * no rest_report_param rows — in that case we fetch immediately. With
+     * params we render an input form and wait for the user to click "Run",
+     * preserving the standard "filter then fetch" UX for parameterized
+     * reports.
+     */
+    readonly params = computed<ReportParam[]>(() => {
+        const reportId = this.apiName().split('/').pop() ?? '';
+        return this.auth.getReport(reportId)?.Params ?? [];
+    });
+
     constructor() {
         effect(() => {
             const api = this.apiName();
@@ -40,18 +73,76 @@ export class TableReport {
                 this.errorMessage.set('You do not have permission to view this report.');
                 return;
             }
-            this.fetchReport(api);
+            // Auto-fetch only when the report takes no inputs.
+            if (this.params().length === 0) {
+                this.fetchReport(api, {});
+            }
         });
     }
 
-    private fetchReport(api: string) {
+    /**
+     * Look up the constant_value options for a parameter's domain.
+     * Returns undefined when the parameter has no ConstantId — caller
+     * renders a plain input in that case.
+     */
+    optionsFor(param: ReportParam): ConstantValue[] | undefined {
+        if (!param.ConstantId) return undefined;
+        return this.auth.getDomainValues(param.ConstantId);
+    }
+
+    /**
+     * Native HTML input type derived from a parameter's data_type. Used
+     * only when the parameter has no constant domain.
+     */
+    inputTypeFor(param: ReportParam): string {
+        switch ((param.DataType || '').toLowerCase()) {
+            case 'int':
+            case 'integer':
+            case 'number':
+            case 'numeric':
+                return 'number';
+            case 'date':
+                return 'date';
+            case 'datetime':
+            case 'timestamp':
+                return 'datetime-local';
+            default:
+                return 'text';
+        }
+    }
+
+    setParam(name: string, value: string) {
+        this.paramValues.update((current) => ({ ...current, [name]: value }));
+    }
+
+    paramValue(name: string): string {
+        return this.paramValues()[name] ?? '';
+    }
+
+    runReport() {
+        this.fetchReport(this.apiName(), this.paramValues());
+    }
+
+    private fetchReport(api: string, params: Record<string, string>) {
+        let httpParams = new HttpParams();
+        for (const [k, v] of Object.entries(params)) {
+            // Drop empty values so the URL doesn't carry `?param=` for
+            // unset fields — backends should treat absent and empty-string
+            // the same, sending neither is the cleanest signal.
+            if (v !== '' && v != null) {
+                httpParams = httpParams.set(k, v);
+            }
+        }
         const url = RestURL.httpHost + '/api/' + api;
-        this.http.get<Record<string, unknown>[]>(url).subscribe({
+        this.http.get<Record<string, unknown>[]>(url, { params: httpParams }).subscribe({
             next: (rows) => {
                 this.records.set(rows ?? []);
                 if (rows?.length) {
                     this.displayedColumns.set(Object.keys(rows[0]));
+                } else {
+                    this.displayedColumns.set([]);
                 }
+                this.errorMessage.set('');
             },
             error: (err) => {
                 this.errorMessage.set(err?.error ?? 'Failed to load report data.');

package/src/model/appdata.ts

@@ -101,8 +101,15 @@ export interface DictionaryPath {
 }
 
 export interface ReportParam {
-  Name:     string;
-  DataType: string;
+  Name:       string;
+  DataType:   string;
+  /**
+   * When set, the parameter input renders as a dropdown populated from
+   * the matching constant_value rows (Pass/Fail/etc.) instead of a free-text
+   * input. Empty string / undefined means no domain — render a plain input
+   * typed by DataType.
+   */
+  ConstantId?: string;
 }
 
 export interface RestReport {