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

package/src/lib/gas-admin-ui.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { GasAdminUi } from './gas-admin-ui';
+
+describe('GasAdminUi', () => {
+  let component: GasAdminUi;
+  let fixture: ComponentFixture<GasAdminUi>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GasAdminUi],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GasAdminUi);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/gas-admin-ui.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  imports: [],
+  selector: 'gas-gas-admin-ui',
+  styles: ``,
+  template: ` <p>gas-admin-ui works!</p> `,
+})
+export class GasAdminUi {}

package/src/lib/layouts/descriptors.ts

@@ -0,0 +1,9 @@
+import type { LayoutDescriptor } from '../core/registry/render-registry';
+
+export const layoutDescriptors: readonly LayoutDescriptor[] = [
+  { kind: 'layout', type: 'grid', since: '9.2' },
+  { kind: 'layout', type: 'tabs', since: '9.2' },
+  { kind: 'layout', type: 'sections', since: '9.2' },
+  { kind: 'layout', type: 'steps', since: '9.2' },
+  { kind: 'layout', type: 'columns', since: '9.2' },
+];

package/src/lib/pages/dashboard/dashboard.ts

@@ -0,0 +1,167 @@
+import { Component, computed, inject, input, resource } from '@angular/core';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { catchError, of, switchMap } from 'rxjs';
+
+import type { DataSource, ResourceSchema, WidgetSchema } from '../../core/models/schema.model';
+import { ApiService } from '../../core/services/api.service';
+import { DataSourceService, type SourceRow } from '../../core/services/data-source.service';
+import { EmptyState } from '../../shared/components/empty-state/empty-state';
+import { WidgetHost } from '../../widgets/widget-host/widget-host';
+
+/**
+ * Panel de métricas — tercer `kind` del registry (refactormotor.md F4).
+ *
+ * Sólo lectura: no hay CRUD y los datos llegan de un endpoint declarativo
+ * (Etapa 2, S4). Los widgets se declaran en `widgets` del schema — no en
+ * `fields`, porque un KPI no es un campo (ver `ResourceSchema.widgets`).
+ *
+ * Dos formas de dato, la que declare cada widget (F8 · R6.5):
+ *
+ * - **payload**: el `key` del widget es su clave en la respuesta del
+ *   endpoint; `source: { kind: 'payload' }` lee la respuesta entera.
+ * - **fuente declarada** (`source: { resource, view?, params? }`): el widget
+ *   pide sus filas al `DataSourceService` y deja de depender de que un
+ *   handler haya armado `data[key]`. Acá se piden TODAS juntas, así que un
+ *   panel con seis fuentes iguales hace una vuelta, no seis (la caché del
+ *   servicio es compartida con relations y selects).
+ */
+@Component({
+  selector: 'app-dashboard',
+  imports: [EmptyState, WidgetHost],
+  template: `
+    <header class="mb-6">
+      <h1 class="font-display text-2xl font-semibold">{{ schema().labelPlural }}</h1>
+      <p class="text-sm text-neutral">Dashboard · {{ widgets().length }} widgets</p>
+    </header>
+
+    @if (falloFuentes()) {
+      <!-- Degradación visible (F9): sin este aviso el fallo de una fuente
+           se confundiría con «el panel no tiene datos». -->
+      <p class="mb-4 text-sm text-danger" role="alert">
+        No se pudieron cargar los datos de algunos widgets.
+      </p>
+    }
+
+    @if (widgets().length === 0) {
+      <app-empty-state
+        title="Sin widgets declarados"
+        message="Los widgets se declaran en la propiedad widgets del schema del dashboard."
+      />
+    } @else {
+      <div class="grid grid-cols-12 gap-4">
+        @for (widget of widgets(); track widget.key) {
+          <app-widget-host [widget]="widget" [data]="datum(widget)" [loading]="cargando()" />
+        }
+      </div>
+    }
+  `,
+})
+export class Dashboard {
+  private readonly api = inject(ApiService, { optional: true });
+  private readonly ds = inject(DataSourceService);
+
+  /** Descriptor del dashboard (lo resuelve `ResourcePage` contra el registry). */
+  readonly schema = input.required<ResourceSchema>();
+
+  /**
+   * Respuesta del endpoint de métricas indexada por `key` de widget.
+   * Si se pasa explícitamente (como en tests con fixtures), se usa directamente;
+   * de lo contrario se obtienen los datos de forma reactiva desde el endpoint `get`.
+   */
+  readonly data = input<Record<string, unknown> | null>(null);
+
+  private readonly fetchedData = toSignal(
+    toObservable(this.schema).pipe(
+      switchMap((schema) => {
+        const getEndpoint = schema.endpoint?.get;
+        // `of({})` = SIN get contratado: ya hay respuesta (vacía). El
+        // `null` inicial del signal en cambio marca «todavía viaja».
+        if (!getEndpoint || !this.api) return of<Record<string, unknown>>({});
+        return this.api
+          .request<Record<string, unknown>>('GET', getEndpoint)
+          .pipe(catchError(() => of<Record<string, unknown>>({})));
+      }),
+    ),
+    { initialValue: null },
+  );
+
+  protected readonly effectiveData = computed<Record<string, unknown>>(() => {
+    const override = this.data();
+    if (override !== null && override !== undefined) return override;
+    return this.fetchedData() ?? {};
+  });
+
+  protected readonly widgets = computed(() => this.schema().widgets ?? []);
+
+  // ── Fuentes declaradas (F8 · R6.5) ──────────────────────────────────────
+
+  /**
+   * Claves de los widgets con fuente declarada, en una cadena: es el
+   * `params` del `resource` y sólo cambia cuando cambia el panel. `''`
+   * (ninguna fuente) ⇒ `undefined` ⇒ el resource queda idle y no pide nada.
+   */
+  private readonly clavesFuente = computed(() =>
+    this.widgets()
+      .map((widget) => (esFuente(widget.source) ? widget.key : ''))
+      .filter((key) => key !== '')
+      .join('|'),
+  );
+
+  /**
+   * Filas de todos los widgets con `source`, pedidas de una sola vez.
+   *
+   * Cada fila queda bajo `widget.key`, que es el mismo contrato de lectura
+   * que tiene el payload: `datum()` devuelve filas cuando hay fuente y la
+   * clave de siempre cuando no, y el descriptor del widget traduce la forma
+   * que necesita.
+   */
+  private readonly fuentes = resource({
+    params: () => (this.clavesFuente() === '' ? undefined : this.clavesFuente()),
+    loader: async () => {
+      const filas: Record<string, SourceRow[]> = {};
+      for (const widget of this.widgets()) {
+        if (!esFuente(widget.source)) continue;
+        filas[widget.key] = await this.ds.rows(widget.source);
+      }
+      return filas;
+    },
+  });
+
+  /** ¿Alguna fuente del panel falló? (`status()` no tira; `value()` sí.) */
+  protected readonly falloFuentes = computed(() => this.fuentes.status() === 'error');
+
+  /**
+   * Estado de carga del panel — mientras dure, cada tarjeta reserva su
+   * espacio con skeleton (`cargar ≠ vacío`, doc/ux-ui-mobile.md §estados).
+   * Cubre LOS dos caminos de dato: el payload (`null` inicial = sin
+   * respuesta todavía) y las fuentes declaradas (`resource` en loading;
+   * con params vacíos queda idle, que NO es carga).
+   */
+  protected readonly cargando = computed(() => {
+    const payloadViaja = this.data() === null && this.fetchedData() === null;
+    const fuentesViajan = this.fuentes.status() === 'loading';
+    return payloadViaja || fuentesViajan;
+  });
+
+  /** `null` explícito cuando la clave no vino: el widget muestra su vacío. */
+  protected datum(widget: WidgetSchema): unknown {
+    // Fuente declarada: el dato son SUS filas, no una clave del payload.
+    if (esFuente(widget.source)) {
+      // `value()` del resource TIRA en estado error (contract de Angular):
+      // se mira el estado antes de leerlo. En carga devuelve `null` igual
+      // que el camino de payload, que también arranca vacío.
+      return this.fuentes.status() === 'error'
+        ? null
+        : (this.fuentes.value()?.[widget.key] ?? null);
+    }
+    const allData = this.effectiveData();
+    // `source` lo declara el schema: el orquestador no sabe qué tipo es
+    // ni qué claves compone cada widget.
+    return widget.source?.kind === 'payload' ? allData : (allData[widget.key] ?? null);
+  }
+}
+
+/** ¿Este widget declara una fuente (`{ resource, … }`) y no el payload? */
+function esFuente(source: WidgetSchema['source']): source is DataSource {
+  return source !== undefined && source !== null && 'resource' in source;
+}

package/src/lib/pages/detail-view/detail-view.spec.ts

@@ -0,0 +1,333 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter, Router } from '@angular/router';
+import { NEVER, of, throwError } from 'rxjs';
+import { describe, expect, it, beforeEach, vi } from 'vitest';
+
+import type { ResourceSchema } from '../../core/models/schema.model';
+import { ActionService } from '../../actions/action-service';
+import { ApiService } from '../../core/services/api.service';
+import { API_URL } from '../../core/tokens';
+import { DetailView } from './detail-view';
+
+describe('DetailView', () => {
+  let fixture: ComponentFixture<DetailView>;
+
+  const mockSchema: ResourceSchema = {
+    id: 'orders',
+    label: 'Pedido',
+    labelPlural: 'Pedidos',
+    kind: 'collection',
+    endpoint: { list: '/admin/orders', get: '/admin/orders/{key}' },
+    keyField: 'ref',
+    titleField: 'customer_name',
+    listColumns: [],
+    fields: [
+      { key: 'ref', label: 'Referencia', type: 'text' },
+      { key: 'customer_name', label: 'Cliente', type: 'text' },
+      { key: 'pickup_date', label: 'Fecha Retiro', type: 'date' },
+      {
+        key: 'status',
+        label: 'Estado',
+        type: 'select',
+        options: [
+          { value: 'PENDIENTE', label: 'Pendiente' },
+          { value: 'ENTREGADO', label: 'Entregado' },
+        ],
+      },
+    ],
+    detail: {
+      enabled: true,
+      headerFields: ['ref', 'status'],
+      allowEdit: true,
+      allowDelete: false,
+    },
+  };
+
+  const mockRecord = {
+    ref: 'ORD-42',
+    customer_name: 'Ana García',
+    pickup_date: '2026-10-10',
+    status: 'PENDIENTE',
+  };
+
+  const getSpy = vi.fn();
+
+  beforeEach(async () => {
+    getSpy.mockReset();
+    getSpy.mockImplementation(() => of(null));
+    await TestBed.configureTestingModule({
+      imports: [DetailView],
+      providers: [
+        {
+          provide: ApiService,
+          useValue: {
+            get: getSpy,
+            request: () => of(null),
+          },
+        },
+        // `AuthService` pide `API_URL` (convención de specs, R7.5)
+        { provide: API_URL, useValue: '/api' },
+        // R8.8: `DetailView` inyecta `Router` (trigger → confirmación +
+        // ruta) — convención de list-view.quick-edit.spec.
+        provideRouter([]),
+      ],
+    }).compileComponents();
+    fixture = TestBed.createComponent(DetailView);
+  });
+
+  /**
+   * Monta la vista y espera los display del registro.
+   *
+   * `fixture.whenStable()` no basta: el `load()` de cada descriptor es un
+   * `import()` ajeno al rastreo de Angular. Se espera acotadamente mientras
+   * quede algún `<app-skeleton>`; si un componente nunca monta, la espera se
+   * agota y falla la aserción del test (acotación, no espera infinita).
+   */
+  async function montar(fixture: ComponentFixture<DetailView>): Promise<void> {
+    fixture.detectChanges();
+    await fixture.whenStable();
+    for (
+      let intento = 0;
+      intento < 100 && fixture.nativeElement.querySelector('app-skeleton');
+      intento++
+    ) {
+      fixture.detectChanges();
+      await new Promise((resolve) => setTimeout(resolve, 1));
+    }
+    fixture.detectChanges();
+  }
+
+  it('1. renderiza la cabecera con el título del registro y los badges de headerFields', async () => {
+    fixture.componentRef.setInput('schema', mockSchema);
+    fixture.componentRef.setInput('record', mockRecord);
+    await montar(fixture);
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(root.querySelector('h1')?.textContent?.trim()).toBe('Ana García');
+    // badge de ref y status en la cabecera
+    expect(root.textContent).toContain('ORD-42');
+    expect(root.textContent).toContain('Pendiente');
+    // Los headerFields salen como chips (R4.2): `ref` en neutral y
+    // `status` en la clase de estado que ya usaba la ficha.
+    const cabeceras = root.querySelectorAll('header app-badge');
+    expect(cabeceras.length, 'deben ser 2 los chips de la cabecera').toBe(2);
+    expect(cabeceras[0].className).toContain('bg-neutral');
+    expect(cabeceras[1].className).toContain('bg-accent/20');
+  });
+
+  it('2. renderiza las secciones de campos con sus valores', async () => {
+    fixture.componentRef.setInput('schema', mockSchema);
+    fixture.componentRef.setInput('record', mockRecord);
+    await montar(fixture);
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(root.textContent).toContain('Ana García');
+    expect(root.textContent).toContain('2026');
+    // label del campo
+    expect(root.textContent).toContain('Referencia');
+    expect(root.textContent).toContain('Cliente');
+  });
+
+  it('3. emite el evento edit al hacer clic en el botón Editar', () => {
+    fixture.componentRef.setInput('schema', mockSchema);
+    fixture.componentRef.setInput('record', mockRecord);
+    fixture.detectChanges();
+
+    let emitted: Record<string, unknown> | null = null;
+    fixture.componentInstance.edit.subscribe((rec) => {
+      emitted = rec as Record<string, unknown>;
+    });
+
+    const root = fixture.nativeElement as HTMLElement;
+    const editBtn = Array.from(root.querySelectorAll<HTMLButtonElement>('button[app-button]')).find(
+      (b) => b.textContent?.trim().includes('Editar'),
+    );
+    expect(editBtn, 'debe existir el botón Editar').toBeDefined();
+    editBtn!.click();
+    fixture.detectChanges();
+
+    expect(emitted).toEqual(mockRecord);
+  });
+
+  it('4. emite el evento back al hacer clic en el botón Volver', () => {
+    fixture.componentRef.setInput('schema', mockSchema);
+    fixture.componentRef.setInput('record', mockRecord);
+    fixture.detectChanges();
+
+    let emitted = false;
+    fixture.componentInstance.back.subscribe(() => {
+      emitted = true;
+    });
+
+    const root = fixture.nativeElement as HTMLElement;
+    const backBtn = Array.from(root.querySelectorAll<HTMLButtonElement>('button[app-button]')).find(
+      (b) => b.textContent?.trim().includes('Volver'),
+    );
+    expect(backBtn, 'debe existir el botón Volver').toBeDefined();
+    backBtn!.click();
+    fixture.detectChanges();
+
+    expect(emitted).toBe(true);
+  });
+
+  it('5. renderiza secciones de historial (tipo list) cuando existen', async () => {
+    const listSchema: ResourceSchema = {
+      ...mockSchema,
+      fields: [
+        ...mockSchema.fields,
+        {
+          key: 'history',
+          label: 'Historial',
+          type: 'list',
+          itemFields: [
+            { key: 'action', label: 'Acción', type: 'text' },
+            { key: 'detail', label: 'Detalle', type: 'text' },
+          ],
+        },
+      ],
+    };
+    const recordWithHistory = {
+      ...mockRecord,
+      history: [{ action: 'PEDIDO_CREADO', detail: 'Pedido registrado' }],
+    };
+    fixture.componentRef.setInput('schema', listSchema);
+    fixture.componentRef.setInput('record', recordWithHistory);
+    await montar(fixture);
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(root.textContent).toContain('Pedido registrado');
+  });
+
+  it('6. R8.8: renderiza el botón de un trigger y lo dispara vía actionService', async () => {
+    const triggerSchema: ResourceSchema = {
+      ...mockSchema,
+      actions: [
+        {
+          id: 'regenerate_pin',
+          type: 'trigger',
+          name: 'regenerate-pin',
+          label: 'Regenerar PIN',
+        },
+      ],
+    };
+    fixture.componentRef.setInput('schema', triggerSchema);
+    fixture.componentRef.setInput('record', mockRecord);
+    await montar(fixture);
+
+    const root = fixture.nativeElement as HTMLElement;
+    const triggerBtn = Array.from(
+      root.querySelectorAll<HTMLButtonElement>('button[app-button]'),
+    ).find((b) => b.textContent?.trim() === 'Regenerar PIN');
+    expect(triggerBtn, 'debe existir el botón Regenerar PIN').toBeDefined();
+
+    // El clic delega en actionService.run (la confirmación y la ruta son
+    // cosa del descriptor, no de la vista — R3.11).
+    const runSpy = vi
+      .spyOn(TestBed.inject(ActionService), 'run')
+      .mockResolvedValue({ ok: true, reload: true });
+    triggerBtn!.click();
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(runSpy).toHaveBeenCalledTimes(1);
+    const [action, request] = runSpy.mock.calls[0];
+    expect(action).toMatchObject({ id: 'regenerate_pin', name: 'regenerate-pin' });
+    expect(request.resource).toBe('orders');
+    expect(request.keyField).toBe('ref');
+  });
+
+  it('7. mientras viaja el get, reserva el espacio con skeleton (cargar ≠ vacío)', () => {
+    // Regresión del «renderizado completo pero vacío»: con el get lento
+    // (Apps Script ~1s) el detalle pintaba la fila parcial con los campos
+    // pesados en `—`. Ahora la región de secciones queda en busy con
+    // skeletons con la forma de las tarjetas.
+    getSpy.mockImplementation(() => NEVER);
+
+    fixture.componentRef.setInput('schema', mockSchema);
+    fixture.componentRef.setInput('record', mockRecord);
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(root.querySelector('[aria-busy="true"] app-skeleton'), 'skeleton visible').toBeTruthy();
+    // Las etiquetas de las secciones NO se pintan hasta que llegue el registro.
+    expect(root.textContent).not.toContain('Fecha Retiro');
+    // La cabecera sí: son datos reales de la fila de la lista.
+    expect(root.textContent).toContain('ORD-42');
+  });
+
+  it('8. estado de error: ofrece reintento y al reintentar pinta el registro', async () => {
+    getSpy.mockImplementationOnce(() => throwError(() => new Error('500')));
+    getSpy.mockImplementationOnce(() => of({ ...mockRecord, pickup_date: '2026-10-12' }));
+
+    fixture.componentRef.setInput('schema', mockSchema);
+    fixture.componentRef.setInput('record', mockRecord);
+    await montar(fixture);
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(root.textContent).toContain('No se pudo cargar el registro');
+
+    const retryBtn = Array.from(
+      root.querySelectorAll<HTMLButtonElement>('button[app-button]'),
+    ).find((b) => b.textContent?.trim().includes('Reintentar'));
+    expect(retryBtn, 'debe existir el botón Reintentar').toBeDefined();
+    retryBtn!.click();
+    await montar(fixture);
+
+    // El date se pinta formateado por render-host, no en crudo.
+    expect(root.textContent).toContain('12 oct. 2026');
+    expect(root.textContent).not.toContain('No se pudo cargar el registro');
+  });
+
+  // ── R9.9 · D4 — target load error recovery ──
+
+  it('9. D4: el estado de error ofrece «Volver» junto a «Reintentar» y navega de vuelta', async () => {
+    getSpy.mockImplementationOnce(() => throwError(() => new Error('boom')));
+    fixture.componentRef.setInput('schema', mockSchema);
+    fixture.componentRef.setInput('record', mockRecord);
+    await montar(fixture);
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(root.textContent).toContain('No se pudo cargar el registro');
+    // El estado de error es un `app-empty-state` con ambas salidas DENTRO
+    // (el header también tiene «Volver», así que se busca dentro del slot).
+    const volver = Array.from(
+      root.querySelectorAll<HTMLButtonElement>('app-empty-state button[app-button]'),
+    ).find((b) => b.textContent?.trim().includes('Volver'));
+    expect(volver, 'debe existir el botón Volver en el estado de error').toBeDefined();
+
+    const router = TestBed.inject(Router);
+    const navegar = vi.spyOn(router, 'navigate');
+    volver!.click();
+    await fixture.whenStable();
+    expect(navegar).toHaveBeenCalled();
+  });
+
+  it('10. D4: la cabecera oculta Editar/Eliminar mientras el registro está en error', async () => {
+    getSpy.mockImplementationOnce(() => throwError(() => new Error('boom')));
+    fixture.componentRef.setInput('schema', mockSchema);
+    fixture.componentRef.setInput('record', mockRecord);
+    await montar(fixture);
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(root.textContent).toContain('No se pudo cargar el registro');
+    expect(root.textContent).not.toContain('Editar');
+    // Reintentar ⇒ éxito ⇒ la acción vuelve a existir
+    getSpy.mockImplementationOnce(() => of({ ...mockRecord }));
+    Array.from(root.querySelectorAll<HTMLButtonElement>('button[app-button]'))
+      .find((b) => b.textContent?.trim().includes('Reintentar'))!
+      .click();
+    await montar(fixture);
+    expect((fixture.nativeElement as HTMLElement).textContent).toContain('Editar');
+  });
+
+  it('11. D4: el error original queda retenido con identidad intacta (diagnóstico)', async () => {
+    const fallo = new Error('boom de red');
+    getSpy.mockImplementationOnce(() => throwError(() => fallo));
+    fixture.componentRef.setInput('schema', mockSchema);
+    fixture.componentRef.setInput('record', mockRecord);
+    await montar(fixture);
+
+    // Identity assert: el MISMO objeto, no una copia ni un string mapeado.
+    expect(fixture.componentInstance.errorDeCarga()).toBe(fallo);
+  });
+});