angular-my-report 0.1.0 → 0.1.1

package/src/lib/ui/designer.component.ts

@@ -1,296 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  HostListener,
-  ViewEncapsulation,
-  booleanAttribute,
-  effect,
-  inject,
-  input,
-  output,
-  signal,
-  untracked,
-} from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import type { DataSourceType, ReportDefinition, ReportElement } from '../model/types';
-import { receiptReport } from '../model/factories';
-import { newReport, uid } from '../model/defaults';
-import { DesignerStore, fetchReport, validateReport } from './designer.store';
-import { CanvasComponent } from './designer/canvas.component';
-import { LeftPanelComponent } from './designer/left-panel.component';
-import { DataSourceDialogComponent } from './designer/data-source-dialog.component';
-import { ViewerComponent } from './viewer/viewer.component';
-import { BandedTableDialogComponent } from './designer/banded-table-dialog.component';
-import { PropertiesPanelComponent } from './properties/properties-panel.component';
-import { parseParams, parseReport } from './inputs';
-
-/**
- * The report designer.
- *
- * ```html
- * <myreport-designer path="/reports/sales.report.json" (save)="store($event)" />
- * ```
- */
-@Component({
-  selector: 'myreport-designer',
-  standalone: true,
-  imports: [FormsModule, CanvasComponent, LeftPanelComponent, PropertiesPanelComponent, DataSourceDialogComponent, ViewerComponent, BandedTableDialogComponent],
-  providers: [DesignerStore],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  styleUrl: './myreport.css',
-  // A class binding (not a static host class) so classes the host page set on the element are kept.
-  host: { '[class.myreport]': 'true' },
-  template: `
-    <div class="app">
-      <header class="toolbar">
-        <span class="brand">{{ brand() }}</span>
-        <select class="new-menu" title="New report from a template" [ngModel]="''" (ngModelChange)="newFrom($event)">
-          <option value="" disabled>New ▾</option>
-          <option value="blank">Blank report</option>
-          <option value="receipt80">Receipt — 80 mm roll</option>
-          <option value="receipt58">Receipt — 58 mm roll</option>
-        </select>
-        <button (click)="fileInput.click()">Open…</button>
-        <button (click)="saveReport()">Save</button>
-        <input #fileInput type="file" accept=".json,application/json" hidden (change)="open($event)" />
-        <span class="sep"></span>
-        <button [disabled]="!store.canUndo()" title="Undo (Ctrl+Z)" (click)="store.undo()">↶ Undo</button>
-        <button [disabled]="!store.canRedo()" title="Redo (Ctrl+Y)" (click)="store.redo()">↷ Redo</button>
-        <span class="sep"></span>
-        <button (click)="showData.set(true)">Data source…</button>
-        <span class="sep"></span>
-        <label class="check">
-          <input type="checkbox" [ngModel]="store.snap()" (ngModelChange)="store.snap.set($event)" /> Snap
-        </label>
-        <select title="Zoom" [ngModel]="store.zoom()" (ngModelChange)="store.zoom.set(+$event)">
-          @for (z of zooms; track z) {
-            <option [value]="z">{{ z * 100 }}%</option>
-          }
-        </select>
-        <span class="spacer"></span>
-        @if (status()) {
-          <span class="muted" [class.error]="status()!.error">{{ status()!.text }}</span>
-        }
-        @if (viewerUrl()) {
-          <a class="btn-link" [href]="viewerUrl()" target="_blank" title="Open the report in the full viewer (new tab)">Viewer ↗</a>
-        }
-        <button class="primary" (click)="showPreview.set(true)">▶ Preview</button>
-      </header>
-      <main class="workspace">
-        <rpt-left-panel (openDataSource)="showData.set(true)" (openBandedTable)="showBanded.set(true)" />
-        <rpt-canvas />
-        <rpt-properties-panel />
-      </main>
-    </div>
-    @if (showData()) {
-      <rpt-data-source-dialog (closed)="showData.set(false)" />
-    }
-    @if (showBanded()) {
-      <rpt-banded-table-dialog (closed)="showBanded.set(false)" />
-    }
-    @if (showPreview()) {
-      <rpt-viewer [embedded]="true" (closed)="showPreview.set(false)" />
-    }
-  `,
-})
-export class MyReportDesignerComponent {
-  protected readonly store = inject(DesignerStore);
-  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
-
-  /** URL of a .report.json to open. */
-  readonly path = input<string | null | undefined>(null);
-  /** A report definition to open (object or JSON string); used when `path` is empty. */
-  readonly report = input<ReportDefinition | string | null | undefined>(null);
-  /** Replaces the report's data source while designing: a URL, a JSON string, or the data itself. */
-  readonly datasource = input<unknown>(null);
-  /** How `datasource` is read: `json` (default) or `odata`. */
-  readonly type = input<DataSourceType | null | undefined>('json');
-  /** Parameter values (object, JSON string or query string `a=1&b=2`). */
-  readonly params = input<Record<string, unknown> | string | null | undefined>(null);
-  /** localStorage key to autosave the report to (and restore from when no path/report is given). */
-  readonly persistKey = input<string | null | undefined>(null);
-  /** Shows a "Viewer ↗" link in the toolbar pointing at this URL. */
-  readonly viewerUrl = input<string | null | undefined>(null);
-  /** Save downloads a .report.json file (default true). The `save` event fires either way. */
-  readonly download = input(true, { transform: booleanAttribute });
-  /** Toolbar title. */
-  readonly brand = input<string | null | undefined>('My Report');
-
-  /** Fires with the report when the user clicks Save. */
-  readonly save = output<ReportDefinition>();
-  /** Fires with the report after every change. */
-  readonly reportChange = output<ReportDefinition>();
-  /** Fires with the report after it was loaded from `path`. */
-  readonly loaded = output<ReportDefinition>();
-  /** Fires with a message when `path` could not be loaded. */
-  readonly loadError = output<string>();
-
-  protected readonly status = signal<{ text: string; error?: boolean } | null>(null);
-  protected readonly showData = signal(false);
-  protected readonly showPreview = signal(false);
-  protected readonly showBanded = signal(false);
-  protected readonly zooms = [0.5, 0.75, 1, 1.25, 1.5, 2];
-  private clipboard: ReportElement[] = [];
-
-  constructor() {
-    // Open the report from `path`, else `report`, else the autosaved one, else a blank report.
-    effect((onCleanup) => {
-      const path = this.path()?.trim();
-      const report = this.report();
-      const key = this.persistKey()?.trim() || null;
-      untracked(() => {
-        this.store.persistKey.set(null);
-        if (path) {
-          const ac = new AbortController();
-          onCleanup(() => ac.abort());
-          this.status.set({ text: 'Loading report…' });
-          fetchReport(path, ac.signal)
-            .then((r) => {
-              this.store.load(r);
-              this.store.persistKey.set(key);
-              this.status.set(null);
-              this.loaded.emit(r);
-            })
-            .catch((e) => {
-              if (ac.signal.aborted) return;
-              const msg = `Could not load ${path}: ${(e as Error).message}`;
-              this.status.set({ text: msg, error: true });
-              this.loadError.emit(msg);
-            });
-          return;
-        }
-        this.status.set(null);
-        const def = parseReport(report);
-        if (def) {
-          this.store.load(def);
-          this.store.persistKey.set(key);
-        } else if (!(key && this.store.restore(key))) {
-          this.store.load(newReport());
-          this.store.persistKey.set(key);
-        }
-      });
-    });
-
-    effect(() => this.store.dataOverride.set(this.datasource() == null || this.datasource() === '' ? null : { source: this.datasource(), type: this.type() === 'odata' ? 'odata' : 'json' }));
-    effect(() => this.store.externalParams.set(parseParams(this.params())));
-
-    // Report changes → (reportChange)
-    let first = true;
-    effect(() => {
-      const r = this.store.report();
-      if (first) {
-        first = false;
-        return;
-      }
-      untracked(() => this.reportChange.emit(r));
-    });
-  }
-
-  /** Starts a new report from a template (the select resets itself to "New ▾"). */
-  protected newFrom(kind: string): void {
-    const make: Record<string, () => ReportDefinition> = {
-      blank: newReport,
-      receipt80: () => receiptReport(80),
-      receipt58: () => receiptReport(58),
-    };
-    if (make[kind] && confirm('Start a new report? Unsaved changes to the current one are lost (Save first if needed).')) {
-      this.store.load(make[kind]());
-    }
-  }
-
-  protected saveReport(): void {
-    const r = this.store.report();
-    this.save.emit(r);
-    if (!this.download()) return;
-    const blob = new Blob([JSON.stringify(r, null, 2)], { type: 'application/json' });
-    const a = document.createElement('a');
-    a.href = URL.createObjectURL(blob);
-    a.download = `${r.name.replace(/[^\w\- ]+/g, '').trim() || 'report'}.report.json`;
-    a.click();
-    setTimeout(() => URL.revokeObjectURL(a.href), 1000);
-  }
-
-  protected async open(e: Event): Promise<void> {
-    const input = e.target as HTMLInputElement;
-    const file = input.files?.[0];
-    input.value = '';
-    if (!file) return;
-    try {
-      this.store.load(validateReport(JSON.parse(await file.text())));
-    } catch (err) {
-      alert('Could not open file: ' + (err as Error).message);
-    }
-  }
-
-  /** Keys belong to the designer only when focus is inside it (or nowhere in particular). */
-  private ownsKey(e: KeyboardEvent): boolean {
-    const t = e.target as HTMLElement | null;
-    return !t || t === document.body || t === document.documentElement || this.host.nativeElement.contains(t);
-  }
-
-  @HostListener('window:keydown', ['$event'])
-  protected onKey(e: KeyboardEvent): void {
-    const target = e.target as HTMLElement;
-    if (!this.ownsKey(e)) return;
-    if (this.showData() || this.showPreview() || this.showBanded() || target.closest?.('input, textarea, select, [contenteditable]')) return;
-    const store = this.store;
-    const sel = store.selection();
-    const report = store.report();
-    const ids = sel.elementIds;
-    const ctrl = e.ctrlKey || e.metaKey;
-    const key = e.key.toLowerCase();
-
-    if (ctrl && key === 'z' && !e.shiftKey) {
-      e.preventDefault();
-      store.undo();
-      return;
-    }
-    if (ctrl && (key === 'y' || (key === 'z' && e.shiftKey))) {
-      e.preventDefault();
-      store.redo();
-      return;
-    }
-    if (ctrl && key === 'a' && sel.bandId) {
-      e.preventDefault();
-      const band = report.bands.find((b) => b.id === sel.bandId);
-      if (band) store.select({ elementIds: band.elements.map((x) => x.id), bandId: band.id });
-      return;
-    }
-    if (!ids.length && !(ctrl && key === 'v')) return;
-
-    const selectedEls = () => report.bands.flatMap((b) => b.elements.filter((x) => ids.includes(x.id)));
-
-    if (key === 'delete' || key === 'backspace') {
-      e.preventDefault();
-      store.update((r) => r.bands.forEach((b) => (b.elements = b.elements.filter((x) => !ids.includes(x.id)))));
-    } else if (ctrl && key === 'c') {
-      this.clipboard = structuredClone(selectedEls());
-    } else if (ctrl && (key === 'v' || key === 'd')) {
-      e.preventDefault();
-      const source = key === 'd' ? selectedEls() : this.clipboard;
-      if (!source.length) return;
-      const bandId = sel.bandId ?? report.bands.find((b) => b.type === 'detail')?.id ?? report.bands[0].id;
-      const copies = source.map((x) => ({ ...structuredClone(x), id: uid('el'), x: x.x + 8, y: x.y + 8 }));
-      store.update((r) => r.bands.find((b) => b.id === bandId)!.elements.push(...copies));
-      store.select({ elementIds: copies.map((c) => c.id), bandId });
-    } else if (key.startsWith('arrow')) {
-      e.preventDefault();
-      const step = e.shiftKey ? 10 : store.snap() ? 8 : 1;
-      const dx = key === 'arrowleft' ? -step : key === 'arrowright' ? step : 0;
-      const dy = key === 'arrowup' ? -step : key === 'arrowdown' ? step : 0;
-      store.update((r) =>
-        r.bands.forEach((b) =>
-          b.elements.forEach((x) => {
-            if (!ids.includes(x.id)) return;
-            x.x = Math.max(0, x.x + dx);
-            x.y = Math.max(0, x.y + dy);
-          }),
-        ),
-      );
-    } else if (key === 'escape') {
-      store.select({ elementIds: [], bandId: sel.bandId });
-    }
-  }
-}

package/src/lib/ui/designer.store.ts

@@ -1,230 +0,0 @@
-import { Injectable, computed, effect, signal, untracked } from '@angular/core';
-import type { Band, DataSourceDef, DataSourceType, ReportDefinition, ReportElement } from '../model/types';
-import { newReport } from '../model/defaults';
-import { hasSource, loadData, type FieldInfo } from '../engine/dataSources';
-import { documentFields, type Row } from '../engine/expressions';
-import { applyParamsToDataSource, resolveParams } from '../engine/parameters';
-
-export interface Selection {
-  elementIds: string[];
-  bandId: string | null;
-}
-
-export interface DataState {
-  rows: Row[];
-  /** The whole loaded document (root.x in formulas) and its scalar fields. */
-  root?: unknown;
-  docFields?: { name: string; type: string }[];
-  fields: FieldInfo[];
-  status: 'idle' | 'loading' | 'ready' | 'error';
-  error?: string;
-}
-
-export const GRID = 8;
-const HISTORY_LIMIT = 100;
-
-/**
- * Data the host page supplies instead of the report's own data source:
- * a URL (JSON file/API, or OData service / entity-set URL), a JSON string, or the data itself.
- */
-export interface DataOverride {
-  source: unknown;
-  type: DataSourceType;
-}
-
-/** Applies a host-supplied data source on top of the report's data source definition. */
-export function overrideDataSource(ds: DataSourceDef, o: DataOverride | null): DataSourceDef {
-  if (!o || o.source == null || o.source === '') return ds;
-  const src = o.source;
-  if (typeof src === 'string' && !/^\s*[[{]/.test(src)) {
-    const url = src.trim();
-    if (o.type === 'odata') {
-      // A full entity-set URL (…/Orders) already names the set; don't append the report's entitySet again.
-      const path = url.split('?')[0].replace(/\/+$/, '').toLowerCase();
-      const set = ds.entitySet.trim().toLowerCase();
-      const entitySet = set && path.endsWith('/' + set) ? '' : ds.entitySet;
-      return { ...ds, type: 'odata', url, inline: '', entitySet };
-    }
-    return { ...ds, type: 'json', url, inline: '' };
-  }
-  // Inline data: a JSON string, or an array/object passed as a property.
-  return { ...ds, type: 'json', url: '', inline: typeof src === 'string' ? src : JSON.stringify(src) };
-}
-
-function prune(r: ReportDefinition, s: Selection): Selection {
-  const ids = new Set(r.bands.flatMap((b) => b.elements.map((e) => e.id)));
-  return {
-    elementIds: s.elementIds.filter((id) => ids.has(id)),
-    bandId: r.bands.some((b) => b.id === s.bandId) ? s.bandId : null,
-  };
-}
-
-export function findElement(r: ReportDefinition, id: string): { band: Band; el: ReportElement } | null {
-  for (const band of r.bands) {
-    const el = band.elements.find((e) => e.id === id);
-    if (el) return { band, el };
-  }
-  return null;
-}
-
-/**
- * All designer/viewer state: the report (with undo/redo), selection, view options and loaded data.
- * Provided per component (myreport-designer / myreport-viewer), so several can live on one page.
- */
-@Injectable()
-export class DesignerStore {
-  readonly report = signal<ReportDefinition>(newReport());
-  readonly selection = signal<Selection>({ elementIds: [], bandId: null });
-  readonly zoom = signal(1);
-  readonly snap = signal(true);
-  readonly data = signal<DataState>({ rows: [], fields: [], status: 'idle' });
-  /** localStorage key the report is autosaved to; null = no autosave. */
-  readonly persistKey = signal<string | null>(null);
-  /** Data supplied by the host page, replacing the report's data source. */
-  readonly dataOverride = signal<DataOverride | null>(null);
-  /** Parameter values supplied by the host page (below values typed in the parameter bar). */
-  readonly externalParams = signal<Record<string, unknown>>({});
-
-  private readonly past = signal<ReportDefinition[]>([]);
-  private readonly future = signal<ReportDefinition[]>([]);
-  readonly canUndo = computed(() => this.past().length > 0);
-  readonly canRedo = computed(() => this.future().length > 0);
-
-  private readonly reloadToken = signal(0);
-  /** Values typed in the preview's parameter bar (raw text), on top of host values and defaults. */
-  readonly paramInput = signal<Record<string, unknown>>({});
-  /** Effective, typed parameter values. */
-  readonly params = computed(() => resolveParams(this.report(), { ...this.externalParams(), ...this.paramInput() }));
-  /** The data source actually used: the report's own, or the host's override. */
-  readonly effectiveDataSource = computed(() => overrideDataSource(this.report().dataSource, this.dataOverride()));
-  /** Data source with {@Param} placeholders filled in; reloads when they change. */
-  private readonly dsKey = computed(() => JSON.stringify(applyParamsToDataSource(this.effectiveDataSource(), this.params())));
-
-  constructor() {
-    // Autosave to the browser (only when a persist key is set).
-    effect((onCleanup) => {
-      const r = this.report();
-      const key = this.persistKey();
-      if (!key) return;
-      const t = setTimeout(() => {
-        try {
-          localStorage.setItem(key, JSON.stringify(r));
-        } catch {
-          /* ignore */
-        }
-      }, 400);
-      onCleanup(() => clearTimeout(t));
-    });
-
-    // (Re)load data whenever the data source definition changes.
-    effect((onCleanup) => {
-      const ds = JSON.parse(this.dsKey());
-      this.reloadToken();
-      untracked(() => {
-        if (!hasSource(ds)) {
-          this.data.set({ rows: [], fields: [], status: 'idle' });
-          return;
-        }
-        const ac = new AbortController();
-        this.data.update((d) => ({ ...d, status: 'loading', error: undefined }));
-        const t = setTimeout(() => {
-          loadData(ds, ac.signal)
-            .then((res) => this.data.set({ rows: res.rows, fields: res.fields, status: 'ready', root: res.root, docFields: documentFields(res.root) }))
-            .catch((e) => {
-              if (!ac.signal.aborted) this.data.set({ rows: [], fields: [], status: 'error', error: String(e?.message ?? e) });
-            });
-        }, 300);
-        onCleanup(() => {
-          clearTimeout(t);
-          ac.abort();
-        });
-      });
-    });
-  }
-
-  /** Applies a change to a copy of the report. `history=false` for live drag updates (after `checkpoint()`). */
-  update(recipe: (r: ReportDefinition) => void, history = true): void {
-    const cur = this.report();
-    const next = structuredClone(cur);
-    recipe(next);
-    if (history) {
-      this.past.update((p) => [...p.slice(-HISTORY_LIMIT), cur]);
-      this.future.set([]);
-    }
-    this.report.set(next);
-    this.selection.update((s) => prune(next, s));
-  }
-
-  checkpoint(): void {
-    const cur = this.report();
-    this.past.update((p) => [...p.slice(-HISTORY_LIMIT), cur]);
-    this.future.set([]);
-  }
-
-  undo(): void {
-    const p = this.past();
-    if (!p.length) return;
-    const prev = p[p.length - 1];
-    this.future.update((f) => [this.report(), ...f]);
-    this.past.set(p.slice(0, -1));
-    this.report.set(prev);
-    this.selection.update((s) => prune(prev, s));
-  }
-
-  redo(): void {
-    const [next, ...rest] = this.future();
-    if (!next) return;
-    this.past.update((p) => [...p, this.report()]);
-    this.future.set(rest);
-    this.report.set(next);
-    this.selection.update((s) => prune(next, s));
-  }
-
-  load(r: ReportDefinition): void {
-    this.report.set(r);
-    this.past.set([]);
-    this.future.set([]);
-    this.selection.set({ elementIds: [], bandId: null });
-  }
-
-  /** Loads the report autosaved under `key` (if any) and keeps autosaving there. */
-  restore(key: string): boolean {
-    let ok = false;
-    try {
-      const saved = localStorage.getItem(key);
-      if (saved) {
-        this.load(JSON.parse(saved));
-        ok = true;
-      }
-    } catch {
-      /* ignore */
-    }
-    this.persistKey.set(key);
-    return ok;
-  }
-
-  select(s: Selection): void {
-    this.selection.set(s);
-  }
-
-  snapValue(v: number): number {
-    return this.snap() ? Math.round(v / GRID) * GRID : Math.round(v);
-  }
-
-  reloadData(): void {
-    this.reloadToken.update((n) => n + 1);
-  }
-}
-
-/** Fetches a .report.json and checks it looks like a report definition. */
-export async function fetchReport(path: string, signal?: AbortSignal): Promise<ReportDefinition> {
-  const res = await fetch(path, { headers: { Accept: 'application/json' }, signal });
-  if (!res.ok) throw new Error(`HTTP ${res.status} ${res.statusText} — ${path}`);
-  return validateReport(await res.json());
-}
-
-export function validateReport(r: unknown): ReportDefinition {
-  const def = r as ReportDefinition;
-  if (!def || def.version !== 1 || !Array.isArray(def.bands)) throw new Error('Not a report definition (expected version 1 with bands)');
-  return def;
-}

package/src/lib/ui/inputs.ts

@@ -1,34 +0,0 @@
-import type { ReportDefinition } from '../model/types';
-import { validateReport } from './designer.store';
-
-/**
- * Normalizes a report given as an object or a JSON string (Web Component attributes are strings).
- * Returns null when nothing usable was given.
- */
-export function parseReport(v: ReportDefinition | string | null | undefined): ReportDefinition | null {
-  if (v == null || v === '') return null;
-  try {
-    return validateReport(typeof v === 'string' ? JSON.parse(v) : structuredClone(v));
-  } catch (e) {
-    console.error('[myreport] invalid report:', (e as Error).message);
-    return null;
-  }
-}
-
-/** Parameter values as an object, a JSON string, or a query string ("Country=Egypt&Year=2024"). */
-export function parseParams(v: Record<string, unknown> | string | null | undefined): Record<string, unknown> {
-  if (v == null || v === '') return {};
-  if (typeof v !== 'string') return { ...v };
-  const s = v.trim();
-  if (s.startsWith('{')) {
-    try {
-      return JSON.parse(s);
-    } catch {
-      console.error('[myreport] params is not valid JSON:', s);
-      return {};
-    }
-  }
-  const out: Record<string, unknown> = {};
-  new URLSearchParams(s.replace(/^\?/, '')).forEach((val, k) => (out[k.replace(/^(param|p)\./i, '')] = val));
-  return out;
-}