@tinya-code/gas-admin-ui 0.2.0-alpha.12 → 0.2.0-alpha.15

package/src/lib/views/kanban-view/kanban-view.ts

@@ -0,0 +1,327 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  inject,
+  signal,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ActivatedRoute } from '@angular/router';
+
+import type {
+  KanbanViewConfig,
+  ResourceSchema,
+  SelectionBinding,
+} from '../../core/models/schema.model';
+import { ErrorMapperService } from '../../core/services/error-mapper.service';
+import { DataSourceService, type SourceRow } from '../../core/services/data-source.service';
+import type { SelectionEmitter } from '../composer/view-context';
+import { getSchema } from '../../core/registry/schema-catalog';
+import { Button } from '../../shared/components/button/button';
+import { EmptyState } from '../../shared/components/empty-state/empty-state';
+import { Skeleton } from '../../shared/components/skeleton/skeleton';
+import {
+  cardSubtitle,
+  cardTitle,
+  mapKanbanRows,
+  type KanbanColumnBucket,
+  type KanbanMapping,
+} from './kanban-model';
+
+/**
+ * Narrowing helper: `UiViewBase` keeps `type: string` open, so comparing
+ * `view.type === 'kanban'` alone does not remove the base member from the
+ * union. Requiring `config` in the value is what actually proves the view is
+ * a `UiViewKanban` at runtime.
+ */
+function kanbanConfigOf(view: unknown): KanbanViewConfig | undefined {
+  if (!view || typeof view !== 'object') return undefined;
+  const candidate = view as { type?: unknown; config?: unknown };
+  return candidate.type === 'kanban' && candidate.config !== undefined
+    ? (candidate.config as KanbanViewConfig)
+    : undefined;
+}
+
+type Status = 'loading' | 'ready' | 'error';
+
+/** Label of the bucket for rows without a group value (Spanish UI copy). */
+const UNKNOWN_LABEL = 'Sin valor';
+
+/**
+ * Synthetic `value` of that bucket: a real group value can never collide
+ * with it (a declared `value` is non-empty and the grouping never produces
+ * this literal), so `@for` tracking stays unique.
+ */
+const UNKNOWN_VALUE = '__sin_valor__';
+
+/**
+ * Generic kanban view (R9.8.4): rows of the declared
+ * `KanbanViewConfig.source` (or the resource's own listing) grouped by
+ * `groupField` into the declared columns, client-side.
+ *
+ * Data flow: ONE fetcher (`DataSourceService.rows`) — there is no dynamic
+ * context here, so `ctx` is `undefined`; the 30 s cache of the service is
+ * what keeps repeated visits free.
+ *
+ * Read-only by design (R9.8.1): no drag-and-drop, no move buttons, no
+ * mutation path at all. Colour never carries meaning alone — every count is
+ * text — and an empty column is a visible «Sin tarjetas», never a gap.
+ */
+@Component({
+  selector: 'app-kanban-view',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [Button, EmptyState, Skeleton],
+  template: `
+    @if (config(); as cfg) {
+      <section class="space-y-4" aria-label="Tablero" [attr.aria-busy]="status() === 'loading'">
+        <header class="flex flex-wrap items-center justify-between gap-3">
+          <h2 class="font-display text-xl font-semibold">Tablero</h2>
+          <p class="text-sm text-neutral">
+            Agrupado por <code>{{ cfg.groupField }}</code>
+          </p>
+        </header>
+
+        @switch (status()) {
+          @case ('loading') {
+            <app-skeleton [lines]="6" [height]="32" />
+          }
+          @case ('error') {
+            <app-empty-state title="No se pudo cargar el tablero" [message]="errorMessage()">
+              <button app-button variant="outline" type="button" (click)="retry()">
+                Reintentar
+              </button>
+            </app-empty-state>
+          }
+          @case ('ready') {
+            <div class="flex gap-3 overflow-x-auto pb-2">
+              @for (column of columns(); track column.value) {
+                <section
+                  class="flex w-64 shrink-0 flex-col gap-3 rounded-xl border border-neutral/20 bg-surface p-3"
+                  [attr.data-column]="column.value"
+                  [attr.aria-label]="columnAria(column)"
+                >
+                  <header class="flex items-center justify-between gap-2">
+                    <h3 class="text-sm font-semibold">{{ column.label }}</h3>
+                    <span class="rounded-full bg-neutral/10 px-2 py-0.5 text-xs text-neutral">
+                      {{ column.rows.length }}<span class="sr-only"> tarjetas</span>
+                    </span>
+                  </header>
+                  @if (column.rows.length === 0) {
+                    <p class="text-sm text-neutral">Sin tarjetas</p>
+                  } @else {
+                    <ul class="flex flex-col gap-2">
+                      @for (row of column.rows; track $index) {
+                        <li
+                          class="rounded-lg border border-neutral/15 p-2"
+                          [attr.tabindex]="seleccionable() ? '0' : null"
+                          [attr.role]="seleccionable() ? 'button' : null"
+                          [class.cursor-pointer]="seleccionable()"
+                          [class.ring-2]="esSeleccionada(row)"
+                          [attr.data-selectable]="seleccionable() ? 'true' : null"
+                          (click)="seleccionar(row)"
+                          (keydown.enter)="activar($event, row)"
+                          (keydown.space)="activar($event, row)"
+                        >
+                          <p class="text-sm font-medium">{{ cardTitleOf(row) }}</p>
+                          @if (cardSubtitleOf(row); as subtitle) {
+                            <p class="mt-0.5 text-xs text-neutral">{{ subtitle }}</p>
+                          }
+                        </li>
+                      }
+                    </ul>
+                  }
+                </section>
+              }
+            </div>
+          }
+        }
+      </section>
+    } @else {
+      <app-empty-state
+        title="Configuración inválida"
+        message="Esta vista no declara una configuración de kanban válida."
+      />
+    }
+  `,
+})
+export class KanbanView {
+  private readonly route = inject(ActivatedRoute);
+  // The shell mounts views via `loadComponent` (no input bindings), so the
+  // schema is resolved from route data exactly like CalendarView does.
+  private readonly routeData = toSignal(this.route.data, { requireSync: true });
+  private readonly dataSource = inject(DataSourceService);
+  private readonly errorMapper = inject(ErrorMapperService);
+
+  /**
+   * Resource schema for this view. The shell mounts views via
+   * `loadComponent` (no input bindings), so the schema is resolved from
+   * route data: either an explicit `schema` object (fixtures), or a
+   * `resourceId` looked up in the registry (the production route shape).
+   */
+  readonly schema = computed<ResourceSchema | undefined>(() => {
+    const data = this.routeData();
+    const explicit = data['schema'];
+    if (explicit !== undefined) return explicit as ResourceSchema;
+    const resourceId = data['resourceId'];
+    return typeof resourceId === 'string' ? getSchema(resourceId) : undefined;
+  });
+
+  /**
+   * Config resolved from `schema.uiViews[<route uiView>]`; `undefined` when
+   * the route does not name a kanban view with a usable config — the
+   * template then renders the invalid-config empty state and NOTHING is
+   * fetched (the effect below bails out on `undefined`).
+   */
+  readonly config = computed<KanbanViewConfig | undefined>(() => {
+    const schema = this.schema();
+    const viewName = this.routeData()['uiView'];
+    if (schema === undefined || typeof viewName !== 'string') return undefined;
+    const cfg = kanbanConfigOf(schema.uiViews?.[viewName]);
+    if (cfg === undefined) return undefined;
+    // Usable = the two references the board cannot render without: a
+    // non-empty `groupField` and at least one column with a non-empty value.
+    const usable =
+      typeof cfg.groupField === 'string' &&
+      cfg.groupField !== '' &&
+      Array.isArray(cfg.columns) &&
+      cfg.columns.length > 0 &&
+      cfg.columns.every((column) => typeof column?.value === 'string' && column.value !== '');
+    return usable ? cfg : undefined;
+  });
+
+  readonly status = signal<Status>('loading');
+  readonly rows = signal<SourceRow[]>([]);
+  readonly errorMessage = signal('');
+  /** Clave seleccionada localmente cuando el binding declara `mode:'inline'`. */
+  readonly seleccionada = signal<string | null>(null);
+
+  /** Guards against a slow response overwriting a newer load's rows. */
+  private loadEpoch = 0;
+
+  constructor() {
+    effect(() => {
+      const cfg = this.config();
+      if (cfg === undefined) return;
+      void this.load(cfg);
+    });
+  }
+
+  /** Rows grouped onto columns + the visible `unknown` bucket (pure model). */
+  readonly mapping = computed<KanbanMapping>(() => {
+    const cfg = this.config();
+    const schema = this.schema();
+    if (cfg === undefined || schema === undefined) return { columns: [], unknown: [] };
+    return mapKanbanRows(this.rows(), cfg);
+  });
+
+  /**
+   * Columns to paint: the model's buckets plus the `unknown` bucket at the
+   * END — but only when it actually has rows, otherwise the board would show
+   * an empty column nobody declared.
+   */
+  readonly columns = computed<readonly KanbanColumnBucket[]>(() => {
+    const { columns, unknown } = this.mapping();
+    if (unknown.length === 0) return columns;
+    return [...columns, { value: UNKNOWN_VALUE, label: UNKNOWN_LABEL, rows: unknown }];
+  });
+
+  retry(): void {
+    const cfg = this.config();
+    if (cfg !== undefined) void this.load(cfg);
+  }
+
+  /** Clave estable de la fila (mismo campo que el resto del motor). */
+  private keyOf(row: SourceRow): string {
+    const schema = this.schema();
+    const key = schema ? row[schema.keyField] : undefined;
+    return key === undefined || key === null ? '' : String(key);
+  }
+
+  /** Binding `select` declarado por la vista (R9.9.4 · decision table). */
+  private binding(): SelectionBinding | undefined {
+    return this.routeData()['select'] as SelectionBinding | undefined;
+  }
+
+  /**
+   * Clic de tarjeta. Sin declaración ⇒ inerte (el tablero no navegaba);
+   * con declaración ⇒ sólo el contrato declarado corre: `route` emite al
+   * dispatcher, `inline` selecciona en local, `none` es no-op explícito.
+   */
+  /**
+   * R9.8.7 — la misma selección que el clic, operable con teclado (Enter y
+   * Space sobre la tarjeta focusable). Sólo tiene sentido con `select`
+   * declarado: sin binding la tarjeta no es focusable y esto nunca corre.
+   */
+  activar(event: Event, row: SourceRow): void {
+    if (!this.seleccionable()) return;
+    event.preventDefault(); // Space no debe desplazar la página
+    this.seleccionar(row);
+  }
+
+  seleccionar(row: SourceRow): void {
+    const binding = this.binding();
+    if (binding === undefined) return;
+    if (binding.mode === 'inline') {
+      this.seleccionada.set(this.keyOf(row));
+      return;
+    }
+    if (binding.mode === 'none') return;
+    const schema = this.schema();
+    const emit = this.routeData()['emit'] as SelectionEmitter | undefined;
+    emit?.({
+      resource: schema?.id ?? String(this.routeData()['resourceId'] ?? ''),
+      key: this.keyOf(row),
+      action: binding.on,
+    });
+  }
+
+  /** El DOM declara clicable sólo si hay contrato que responder. */
+  seleccionable(): boolean {
+    const binding = this.binding();
+    return binding !== undefined && binding.mode !== 'none';
+  }
+
+  esSeleccionada(row: SourceRow): boolean {
+    return this.seleccionable() && this.seleccionada() === this.keyOf(row);
+  }
+
+  /** «Por hacer: 2 tarjetas» — the count is text, never colour alone. */
+  columnAria(column: KanbanColumnBucket): string {
+    const count = column.rows.length;
+    return `${column.label}: ${count} ${count === 1 ? 'tarjeta' : 'tarjetas'}`;
+  }
+
+  cardTitleOf(row: SourceRow): string {
+    const cfg = this.config();
+    const schema = this.schema();
+    if (cfg === undefined || schema === undefined) return '';
+    return cardTitle(row, cfg, schema);
+  }
+
+  cardSubtitleOf(row: SourceRow): string {
+    const cfg = this.config();
+    const schema = this.schema();
+    if (cfg === undefined || schema === undefined) return '';
+    return cardSubtitle(row, cfg, schema);
+  }
+
+  private async load(cfg: KanbanViewConfig): Promise<void> {
+    const schema = this.schema();
+    if (schema === undefined) return;
+    const epoch = ++this.loadEpoch;
+    this.status.set('loading');
+    const source = cfg.source ?? { resource: schema.id };
+    try {
+      const rows = await this.dataSource.rows(source, undefined);
+      if (epoch !== this.loadEpoch) return;
+      this.rows.set(rows);
+      this.errorMessage.set('');
+      this.status.set('ready');
+    } catch (error) {
+      if (epoch !== this.loadEpoch) return;
+      this.errorMessage.set(this.errorMapper.map(error).general ?? 'No se pudo cargar el tablero.');
+      this.status.set('error');
+    }
+  }
+}

package/src/lib/widgets/bar-chart/bar-chart.descriptor.ts

@@ -0,0 +1,17 @@
+import type { BarChartWidget } from '../../core/models/schema.model';
+import type { RenderDescriptor } from '../../core/registry/render-registry';
+
+import { toSeries } from '../series';
+
+/** Descriptor del widget `bar-chart` (R3.6). */
+export const descriptor: RenderDescriptor = {
+  kind: 'widget',
+  type: 'bar-chart',
+  since: '1.0',
+  load: () => import('./bar-chart').then((module) => module.BarChart),
+  surfaces: ['display'],
+  inputs: (config, extras) => {
+    const cfg = config as BarChartWidget;
+    return { label: cfg.label, data: toSeries(extras.data), unit: cfg.unit ?? '' };
+  },
+};

package/src/lib/widgets/bar-chart/bar-chart.spec.ts

@@ -0,0 +1,66 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BarChart, type BarDatum } from './bar-chart';
+
+const DATA: BarDatum[] = [
+  { label: 'Lun', value: 3 },
+  { label: 'Mar', value: 5 },
+  { label: 'Mié', value: 1 },
+];
+
+describe('BarChart', () => {
+  let fixture: ComponentFixture<BarChart>;
+
+  const root = (): HTMLElement => fixture.nativeElement as HTMLElement;
+  const bars = (): HTMLElement[] => [...root().querySelectorAll<HTMLElement>('[role="img"] > div')];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [BarChart] }).compileComponents();
+    fixture = TestBed.createComponent(BarChart);
+    fixture.componentRef.setInput('label', 'Entregas');
+  });
+
+  it('renderiza N barras con el resumen en aria-label', () => {
+    fixture.componentRef.setInput('data', DATA);
+    fixture.detectChanges();
+
+    expect(bars().length).toBe(3);
+    expect(root().textContent).toContain('Entregas');
+    expect(root().textContent).toContain('Lun');
+
+    const chart = root().querySelector('[role="img"]');
+    expect(chart?.getAttribute('aria-label')).toContain('3 categorías');
+    expect(chart?.getAttribute('aria-label')).toContain('Mayor: Mar con 5');
+  });
+
+  it('data vacía ⇒ «Sin datos» y sin grilla accesible', () => {
+    fixture.componentRef.setInput('data', []);
+    fixture.detectChanges();
+
+    expect(root().querySelector('[data-testid="empty"]')?.textContent).toContain('Sin datos');
+    expect(root().querySelector('[role="img"]')).toBeNull();
+    expect(bars().length).toBe(0);
+  });
+
+  it('el unit se añade a las cifras del resumen', () => {
+    fixture.componentRef.setInput('data', DATA);
+    fixture.componentRef.setInput('unit', ' u.');
+    fixture.detectChanges();
+
+    expect(root().querySelector('[role="img"]')?.getAttribute('aria-label')).toContain('con 5 u.');
+  });
+
+  it('con todos los valores en 0 no divide entre cero', () => {
+    fixture.componentRef.setInput('data', [
+      { label: 'A', value: 0 },
+      { label: 'B', value: 0 },
+    ]);
+    fixture.detectChanges();
+
+    expect(bars().length).toBe(2);
+    const heights = bars().map(
+      (bar) => bar.querySelector<HTMLElement>('div[style*="height"]')?.style.height,
+    );
+    expect(heights).toEqual(['0%', '0%']);
+  });
+});

package/src/lib/widgets/bar-chart/bar-chart.ts

@@ -0,0 +1,76 @@
+import { Component, computed, input } from '@angular/core';
+
+export interface BarDatum {
+  label: string;
+  value: number;
+}
+
+/**
+ * Barras por categoría, sin librería: se dibujan con CSS y un `@for` de
+ * Angular (~1 K gz frente a los 61,4 K de Chart.js — viabilidad B2.1).
+ *
+ * Accesibilidad (plan 3.2): la grilla es `role="img"` con un `aria-label`
+ * que resume los datos, de modo que un lector de pantalla no recorra cada
+ * barra suelta sino que escuche «8 categorías. Mayor: …».
+ */
+@Component({
+  selector: 'app-bar-chart',
+  template: `
+    <div class="rounded-lg border border-neutral/20 bg-surface p-4">
+      <p class="mb-3 text-sm text-neutral">{{ label() }}</p>
+
+      @if (data().length === 0) {
+        <p class="text-sm text-neutral/60" data-testid="empty">Sin datos.</p>
+      } @else {
+        <div role="img" [attr.aria-label]="summary()" class="flex h-32 items-end gap-2">
+          @for (row of data(); track row.label) {
+            <div class="flex min-w-0 flex-1 flex-col items-center justify-end gap-1">
+              <span class="text-xs tabular-nums text-neutral"> {{ row.value }}{{ unit() }} </span>
+              <div class="w-full rounded-t bg-primary" [style.height.%]="height(row.value)"></div>
+              <span class="w-full truncate text-center text-xs text-neutral">{{ row.label }}</span>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `,
+})
+export class BarChart {
+  /** Título del gráfico. */
+  readonly label = input.required<string>();
+  /** Series a dibujar; vacío ⇒ estado «Sin datos». */
+  readonly data = input<BarDatum[]>([]);
+  /** Sufijo de las cifras del eje («unidades», «S/»). */
+  readonly unit = input('');
+
+  private readonly max = computed(() => Math.max(0, ...this.data().map((row) => row.value)));
+
+  /**
+   * Altura relativa de una barra. `max = 0` ⇒ 0 % (nada de división por
+   * cero); un valor de 0 se queda en 0, y los demás bajan a un 2 % mínimo
+   * para que la barra siga siendo visible.
+   */
+  protected height(value: number): number {
+    if (value === 0) {
+      return 0;
+    }
+    const max = this.max();
+    if (max === 0) {
+      return 0;
+    }
+    return Math.max(2, (value / max) * 100);
+  }
+
+  protected readonly summary = computed(() => {
+    const rows = this.data();
+    if (rows.length === 0) {
+      return 'Sin datos.';
+    }
+    const top = rows.reduce((best, row) => (row.value > best.value ? row : best), rows[0]);
+    const unit = this.unit();
+    return (
+      `${rows.length} categorías. Mayor: ${top.label} con ${top.value}${unit}. ` +
+      `Menor: ${rows.reduce((low, row) => (row.value < low.value ? row : low), rows[0]).label}.`
+    );
+  });
+}

package/src/lib/widgets/chart-line/chart-line.descriptor.ts

@@ -0,0 +1,17 @@
+import type { ChartLineWidget } from '../../core/models/schema.model';
+import type { RenderDescriptor } from '../../core/registry/render-registry';
+
+import { toSeries } from '../series';
+
+/** Descriptor del widget `chart-line` (R3.6). */
+export const descriptor: RenderDescriptor = {
+  kind: 'widget',
+  type: 'chart-line',
+  since: '1.0',
+  load: () => import('./chart-line').then((module) => module.ChartLine),
+  surfaces: ['display'],
+  inputs: (config, extras) => {
+    const cfg = config as ChartLineWidget;
+    return { label: cfg.label, data: toSeries(extras.data), unit: cfg.unit ?? '' };
+  },
+};

package/src/lib/widgets/chart-line/chart-line.spec.ts

@@ -0,0 +1,113 @@
+import {
+  DeferBlockBehavior,
+  DeferBlockState,
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+
+import { ChartLine } from './chart-line';
+
+/**
+ * jsdom no implementa el lienzo 2D: `getContext('2d')` devuelve `null` y
+ * Chart.js revienta al primer trazo. Se stubbea por `beforeAll` para poder
+ * montar el componente de verdad y se restaura en `afterAll`.
+ */
+const canvasStub = { width: 300, height: 150 } as HTMLCanvasElement;
+
+const ctxStub = new Proxy({} as unknown as CanvasRenderingContext2D, {
+  get(_target, prop) {
+    if (prop === 'canvas') {
+      return canvasStub;
+    }
+    if (prop === 'measureText') {
+      return () => ({ width: 10 });
+    }
+    if (prop === 'createLinearGradient') {
+      return () => ({ addColorStop: () => undefined });
+    }
+    return () => undefined;
+  },
+  set() {
+    return true;
+  },
+});
+
+describe('ChartLine', () => {
+  let fixture: ComponentFixture<ChartLine>;
+
+  const root = (): HTMLElement => fixture.nativeElement as HTMLElement;
+  const originalGetContext = HTMLCanvasElement.prototype.getContext;
+
+  /**
+   * `on viewport` necesita `IntersectionObserver`, que jsdom no implementa:
+   * con `Manual` el bloque no evalúa su condición y lo pintamos a mano.
+   */
+  const pintarDefer = async (estado: DeferBlockState): Promise<void> => {
+    const blocks = await fixture.getDeferBlocks();
+    await blocks[0].render(estado);
+    fixture.detectChanges();
+  };
+
+  beforeAll(() => {
+    HTMLCanvasElement.prototype.getContext = (() =>
+      ctxStub) as unknown as typeof originalGetContext;
+  });
+
+  afterAll(() => {
+    HTMLCanvasElement.prototype.getContext = originalGetContext;
+  });
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ChartLine],
+      deferBlockBehavior: DeferBlockBehavior.Manual,
+    }).compileComponents();
+    fixture = TestBed.createComponent(ChartLine);
+  });
+
+  it('sin datos muestra el estado vacío y no toca el lienzo', async () => {
+    fixture.componentRef.setInput('label', 'Entregas por día');
+    fixture.componentRef.setInput('data', []);
+    fixture.detectChanges();
+
+    expect(root().querySelector('[data-testid="empty"]')?.textContent?.trim()).toBe('Sin datos.');
+    expect(root().querySelector('canvas')).toBeNull();
+    // Sin datos no hay bloque que diferir: sólo existe el estado vacío.
+    expect(await fixture.getDeferBlocks()).toHaveLength(0);
+  });
+
+  it('en placeholder dibuja la miniatura SVG y no monta el lienzo', async () => {
+    fixture.componentRef.setInput('label', 'Entregas por día');
+    fixture.componentRef.setInput('data', [
+      { label: 'Lun', value: 2 },
+      { label: 'Mar', value: 5 },
+    ]);
+    fixture.detectChanges();
+
+    await pintarDefer(DeferBlockState.Placeholder);
+
+    expect(root().querySelector('canvas')).toBeNull();
+    expect(root().querySelector('[role="img"]')).toBeNull();
+    expect(root().querySelector('polyline')?.getAttribute('points')?.split(' ')).toHaveLength(2);
+    expect(root().textContent).toContain('Entregas por día');
+  });
+
+  it('completado el defer dibuja el lienzo y resume la serie en el aria-label', async () => {
+    fixture.componentRef.setInput('label', 'Entregas por día');
+    fixture.componentRef.setInput('unit', ' u.');
+    fixture.componentRef.setInput('data', [
+      { label: 'Lun', value: 2 },
+      { label: 'Mar', value: 5 },
+    ]);
+    fixture.detectChanges();
+
+    await pintarDefer(DeferBlockState.Complete);
+
+    const chart = root().querySelector('[role="img"]');
+    expect(root().querySelector('canvas')).not.toBeNull();
+    expect(chart?.getAttribute('aria-label')).toBe(
+      'Serie de 2 puntos, de Lun (2 u.) a Mar (5 u.): sube.',
+    );
+    expect(root().textContent).toContain('Entregas por día');
+  });
+});