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

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

@@ -1,21 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,167 +0,0 @@
-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

@@ -1,333 +0,0 @@
-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);
-  });
-});