angular-my-report 0.0.0-stage → 0.1.0

package/src/lib/model/types.ts

@@ -0,0 +1,281 @@
+// Report definition model. This JSON shape is the contract between the
+// designer and any renderer (the browser preview here, or a server engine later).
+
+export type BandType =
+  | 'reportHeader'
+  | 'pageHeader'
+  | 'groupHeader'
+  | 'detail'
+  | 'groupFooter'
+  | 'pageFooter'
+  | 'reportFooter';
+
+export type ElementKind = 'text' | 'field' | 'line' | 'rect' | 'image' | 'table' | 'chart' | 'barcode' | 'qrcode' | 'crosstab';
+export type HAlign = 'left' | 'center' | 'right';
+export type VAlign = 'top' | 'middle' | 'bottom';
+
+export interface ElementStyle {
+  fontFamily: string;
+  fontSize: number;
+  bold: boolean;
+  italic: boolean;
+  underline: boolean;
+  color: string;
+  background: string; // css color or 'transparent'
+  align: HAlign;
+  vAlign: VAlign;
+  borderWidth: number;
+  borderColor: string;
+  padding: number;
+}
+
+export type FormatKind = 'none' | 'number' | 'currency' | 'percent' | 'date' | 'datetime' | 'time';
+
+export interface FormatSpec {
+  kind: FormatKind;
+  decimals: number;
+  currency: string;
+}
+
+export interface ReportElement {
+  id: string;
+  kind: ElementKind;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  /** Template text. `{Field}`, `{sum(Amount)}`, `{PageNumber}`… For images: the URL (may contain {Field}). */
+  text: string;
+  format: FormatSpec;
+  style: ElementStyle;
+  /** Text/field grows taller to fit its content (pushing elements below down). Default true. */
+  canGrow?: boolean;
+  /** Only for kind 'table'. */
+  table?: TableSpec;
+  /** Only for kind 'chart'. */
+  chart?: ChartSpec;
+  /** Only for kind 'barcode' (the value is the `text` template). */
+  barcode?: BarcodeSpec;
+  /** Only for kind 'qrcode' (the value is the `text` template). */
+  qr?: QrSpec;
+  /** Only for kind 'crosstab'. */
+  crosstab?: CrossTabSpec;
+  /** Expression; the element is hidden when it evaluates to false, e.g. "Amount > 100". */
+  visibleWhen?: string;
+  /** Extra options for labels and fields. */
+  fieldOptions?: FieldOptions;
+  /** Lines and rectangles: stroke style. */
+  dash?: 'solid' | 'dashed' | 'dotted';
+  /** Images: how the picture fits its box. */
+  imageFit?: 'contain' | 'cover' | 'fill';
+}
+
+export interface FieldOptions {
+  /** Shown when the text evaluates to empty. */
+  nullText: string;
+  /** In repeating bands, leave the box empty when the value equals the previous row's (per page). */
+  hideDuplicates: boolean;
+  /** Conditional formatting: first matching rule wins. */
+  rules: StyleRule[];
+}
+
+export interface StyleRule {
+  /** Expression, e.g. "Amount > 1000". */
+  when: string;
+  color: string;
+  /** '' = unchanged */
+  background: string;
+  bold: boolean;
+}
+
+export interface TableColumn {
+  id: string;
+  header: string;
+  /** Cell template evaluated per row, e.g. "{Amount}". */
+  text: string;
+  /** Optional footer (totals) template, e.g. "{sum(Amount)}". */
+  footer: string;
+  /** Relative width; columns share the table width in proportion. */
+  width: number;
+  align: HAlign;
+  format: FormatSpec;
+}
+
+/**
+ * A table lists the rows in its band's scope: all rows in Report Header/Footer, the group's
+ * rows in Group Header/Footer, the current record in Detail. It flows across pages.
+ */
+export interface TableSpec {
+  columns: TableColumn[];
+  showHeader: boolean;
+  repeatHeader: boolean;
+  showFooter: boolean;
+  headerHeight: number;
+  rowHeight: number;
+  headerBackground: string;
+  headerColor: string;
+  /** Alternate-row background or 'transparent'. */
+  stripeBackground: string;
+  /** Grid line color or 'transparent'. */
+  gridColor: string;
+}
+
+export interface Band {
+  id: string;
+  type: BandType;
+  height: number;
+  visible: boolean;
+  groupId?: string;
+  elements: ReportElement[];
+}
+
+export interface Group {
+  id: string;
+  field: string;
+  direction: 'asc' | 'desc';
+}
+
+export interface SortSpec {
+  field: string;
+  direction: 'asc' | 'desc';
+}
+
+export interface PageSettings {
+  width: number; // px @ 96dpi
+  height: number;
+  marginTop: number;
+  marginBottom: number;
+  marginLeft: number;
+  marginRight: number;
+  /** Receipt roll: one page as long as its content, no page breaks; the page footer follows the content. */
+  continuous?: boolean;
+}
+
+export type DataSourceType = 'json' | 'odata';
+
+export interface DataSourceDef {
+  type: DataSourceType;
+  /** JSON: file/API URL. OData: service root URL (or full entity-set URL). */
+  url: string;
+  /** JSON only: pasted JSON used instead of the URL when non-empty. */
+  inline: string;
+  /** JSON only: dot path to the array inside the response, e.g. "data.items". */
+  dataPath: string;
+  /** Extra request headers, one "Name: value" per line. */
+  headers: string;
+  // OData query options
+  entitySet: string;
+  select: string;
+  filter: string;
+  orderby: string;
+  expand: string;
+  top: number | null;
+  /** Safety cap when following OData nextLink paging. */
+  maxRows: number;
+}
+
+export interface ReportDefinition {
+  version: 1;
+  name: string;
+  page: PageSettings;
+  dataSource: DataSourceDef;
+  groups: Group[];
+  sort: SortSpec[];
+  bands: Band[];
+  /** Values the user supplies at run time; used as @Name in formulas and {@Name} in the data source. */
+  parameters?: ReportParameter[];
+  /** Expression applied to every data row; rows where it is false are left out, e.g. "Country == @Country". */
+  filter?: string;
+  watermark?: Watermark;
+  background?: PageBackground;
+}
+
+export type ParameterType = 'string' | 'number' | 'date' | 'boolean';
+
+export interface ReportParameter {
+  name: string;
+  label: string;
+  type: ParameterType;
+  defaultValue: string;
+  /** Comma-separated choices; empty = free input. */
+  options: string;
+}
+
+export interface Watermark {
+  enabled: boolean;
+  kind: 'text' | 'image';
+  text: string;
+  /** URL or data: URL. */
+  image: string;
+  /** 0–1 */
+  opacity: number;
+  /** Degrees, e.g. -45. */
+  angle: number;
+  fontSize: number;
+  color: string;
+  bold: boolean;
+  /** Image width as % of the page width. */
+  imageScale: number;
+  layer: 'behind' | 'front';
+  pages: 'all' | 'first';
+}
+
+export interface PageBackground {
+  enabled: boolean;
+  /** URL or data: URL. */
+  image: string;
+  fit: 'cover' | 'contain' | 'stretch' | 'center';
+  pages: 'all' | 'first';
+}
+
+export type AggregateKind = 'sum' | 'count' | 'avg' | 'min' | 'max';
+export type ChartType = 'bar' | 'hbar' | 'line' | 'area' | 'pie' | 'doughnut';
+
+/** A chart over the rows in its band's scope, grouped by a category field. */
+export interface ChartSpec {
+  type: ChartType;
+  title: string;
+  categoryField: string;
+  /** One series per value field (pie/doughnut use the first). */
+  valueFields: string[];
+  aggregate: AggregateKind;
+  sort: 'none' | 'category' | 'valueDesc' | 'valueAsc';
+  /** Extra categories fold into "Other". */
+  maxCategories: number;
+  showLegend: boolean;
+  showValues: boolean;
+  showGrid: boolean;
+  valueFormat: FormatSpec;
+}
+
+export type BarcodeSymbology = 'code128' | 'ean13';
+
+export interface BarcodeSpec {
+  symbology: BarcodeSymbology;
+  showText: boolean;
+  color: string;
+}
+
+export interface QrSpec {
+  errorCorrection: 'L' | 'M' | 'Q' | 'H';
+  color: string;
+}
+
+/** Pivot: one row per rowField value, one column per columnField value, cells = aggregate(valueField). */
+export interface CrossTabSpec {
+  rowField: string;
+  columnField: string;
+  valueField: string;
+  aggregate: AggregateKind;
+  cornerText: string;
+  showRowTotals: boolean;
+  showColumnTotals: boolean;
+  valueFormat: FormatSpec;
+  headerHeight: number;
+  rowHeight: number;
+  headerBackground: string;
+  headerColor: string;
+  stripeBackground: string;
+  gridColor: string;
+  repeatHeader: boolean;
+}

package/src/lib/ui/css.ts

@@ -0,0 +1,12 @@
+const UNITLESS = new Set(['fontWeight', 'lineHeight', 'flex', 'zIndex', 'opacity']);
+
+/** Builds an inline style string from a camelCase map; numbers get "px" unless unitless. */
+export function css(o: Record<string, string | number | undefined | null | false>): string {
+  let s = '';
+  for (const [k, v] of Object.entries(o)) {
+    if (v == null || v === '' || v === false) continue;
+    const key = k.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
+    s += `${key}:${typeof v === 'number' && !UNITLESS.has(k) ? `${v}px` : v};`;
+  }
+  return s;
+}

package/src/lib/ui/designer/banded-table-dialog.component.ts

@@ -0,0 +1,127 @@
+import { ChangeDetectionStrategy, Component, computed, inject, output, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { addBandedTable, type BandedTableOptions } from '../../model/factories';
+import { DesignerStore } from '../designer.store';
+
+/**
+ * Header/Detail table wizard: titles go in a header band, one field per column in Detail.
+ * Everything it creates is ordinary labels/fields, editable afterwards.
+ */
+@Component({
+  selector: 'rpt-banded-table-dialog',
+  standalone: true,
+  imports: [FormsModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="modal-backdrop" (pointerdown)="onBackdropDown($event)">
+      <div class="modal">
+        <header>
+          <h2>Header / Detail table</h2>
+          <button class="link" (click)="closed.emit()">✕</button>
+        </header>
+        <div class="modal-body">
+          @if (!fields().length) {
+            <p class="error">Load a data source first — the columns are made from its fields.</p>
+          } @else {
+            <div class="field">
+              Columns ({{ selectedCount() }} selected)
+              <div class="wizard-fields">
+                @for (f of fields(); track f.name) {
+                  <label class="check">
+                    <input type="checkbox" [ngModel]="picked()[f.name]" (ngModelChange)="toggle(f.name, $event)" />
+                    {{ f.name }} <span class="muted">({{ f.type }})</span>
+                  </label>
+                }
+              </div>
+              <div class="inline">
+                <button class="small" (click)="all(true)">All</button>
+                <button class="small" (click)="all(false)">None</button>
+              </div>
+            </div>
+            <div class="grid2">
+              <label class="field">
+                Column titles in
+                <select [(ngModel)]="titleBand">
+                  <option value="pageHeader">Page Header (every page)</option>
+                  <option value="reportHeader">Report Header (first page)</option>
+                  @if (hasGroups()) {
+                    <option value="groupHeader">Group Header (every group)</option>
+                  }
+                </select>
+              </label>
+              <label class="field">
+                Row height
+                <input type="number" min="12" [(ngModel)]="rowHeight" />
+              </label>
+              <label class="field">
+                Title background
+                <input type="color" [(ngModel)]="headerBackground" />
+              </label>
+              <label class="field">
+                Title text
+                <input type="color" [(ngModel)]="headerColor" />
+              </label>
+            </div>
+            <label class="check"><input type="checkbox" [(ngModel)]="grid" /> Grid borders around cells</label>
+            <label class="check"><input type="checkbox" [(ngModel)]="totals" /> Totals of number columns in Report Footer</label>
+            <label class="check"><input type="checkbox" [(ngModel)]="replace" /> Replace what is in the title band and Detail band now</label>
+          }
+        </div>
+        <footer>
+          <button (click)="closed.emit()">Cancel</button>
+          <button class="primary" [disabled]="!selectedCount()" (click)="create()">Create table</button>
+        </footer>
+      </div>
+    </div>
+  `,
+})
+export class BandedTableDialogComponent {
+  private readonly store = inject(DesignerStore);
+  readonly closed = output<void>();
+
+  protected readonly fields = computed(() => this.store.data().fields.filter((f) => f.type !== 'object'));
+  protected readonly hasGroups = computed(() => this.store.report().groups.length > 0);
+  protected readonly picked = signal<Record<string, boolean>>(
+    Object.fromEntries(this.store.data().fields.filter((f) => f.type !== 'object').map((f, i) => [f.name, i < 8])),
+  );
+  protected readonly selectedCount = computed(() => this.fields().filter((f) => this.picked()[f.name]).length);
+
+  protected titleBand: BandedTableOptions['titleBand'] = 'pageHeader';
+  protected rowHeight = 22;
+  protected headerBackground = '#1f3a68';
+  protected headerColor = '#ffffff';
+  protected grid = true;
+  protected totals = true;
+  protected replace = true;
+
+  protected onBackdropDown(e: PointerEvent): void {
+    if (e.target === e.currentTarget) this.closed.emit();
+  }
+
+  protected toggle(name: string, on: boolean): void {
+    this.picked.update((p) => ({ ...p, [name]: on }));
+  }
+
+  protected all(on: boolean): void {
+    this.picked.set(Object.fromEntries(this.fields().map((f) => [f.name, on])));
+  }
+
+  protected create(): void {
+    const opts: BandedTableOptions = {
+      fields: this.fields().filter((f) => this.picked()[f.name]),
+      titleBand: this.titleBand,
+      grid: this.grid,
+      headerBackground: this.headerBackground,
+      headerColor: this.headerColor,
+      totals: this.totals,
+      rowHeight: Math.max(12, Number(this.rowHeight) || 22),
+      replace: this.replace,
+    };
+    let ids: string[] = [];
+    this.store.update((r) => (ids = addBandedTable(r, opts)));
+    const detail = this.store.report().bands.find((b) => b.type === 'detail');
+    this.store.select({ elementIds: [], bandId: detail?.id ?? null });
+    void ids;
+    this.closed.emit();
+  }
+}