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

package/src/lib/columns/descriptors.ts

@@ -0,0 +1,113 @@
+import type { RenderDescriptor, RenderExtras } from '../core/registry/render-registry';
+
+/**
+ * Manifiesto de descriptores de formato de columna (R4.3 · `kind:
+ * 'column-format'`).
+ *
+ * Es el equivalente a `fields/descriptors.ts` y `widgets/descriptors.ts`:
+ * una línea por formato y ningún import de componente — cada `load()` guarda
+ * el cierre de un `import()` **con literal**, que es lo que permite al
+ * bundler partir el chunk; el registro los recoge al importar este módulo
+ * (`core/registry/render-registry.ts`).
+ *
+ * **Añadir un formato** ⇒ crear `format-<nombre>.ts` + una entrada acá.
+ * `list-view` no se toca: ése es el criterio de éxito de R4.3.
+ *
+ * Todos comparten el cableado: el descriptor sólo expone la celda, que la
+ * vista cuelga de `extras.data`.
+ */
+const inputs = (_config: unknown, extras: RenderExtras): Record<string, unknown> => ({
+  cell: extras.data,
+});
+
+const text: RenderDescriptor = {
+  kind: 'column-format',
+  type: 'text',
+  since: '1.0',
+  surfaces: ['list'],
+  load: () => import('./format-text').then((module) => module.ColumnFormatText),
+  inputs,
+};
+
+const badge: RenderDescriptor = {
+  kind: 'column-format',
+  type: 'badge',
+  since: '1.0',
+  surfaces: ['list'],
+  load: () => import('./format-badge').then((module) => module.ColumnFormatBadge),
+  inputs,
+};
+
+const thumbnail: RenderDescriptor = {
+  kind: 'column-format',
+  type: 'thumbnail',
+  since: '1.0',
+  surfaces: ['list'],
+  load: () => import('./format-thumbnail').then((module) => module.ColumnFormatThumbnail),
+  inputs,
+};
+
+const boolean: RenderDescriptor = {
+  kind: 'column-format',
+  type: 'boolean',
+  since: '1.0',
+  surfaces: ['list'],
+  load: () => import('./format-boolean').then((module) => module.ColumnFormatBoolean),
+  inputs,
+};
+
+const number: RenderDescriptor = {
+  kind: 'column-format',
+  type: 'number',
+  since: '1.0',
+  surfaces: ['list'],
+  load: () => import('./format-number').then((module) => module.ColumnFormatNumber),
+  inputs,
+};
+
+const currency: RenderDescriptor = {
+  kind: 'column-format',
+  type: 'currency',
+  since: '1.0',
+  surfaces: ['list'],
+  load: () => import('./format-currency').then((module) => module.ColumnFormatCurrency),
+  inputs,
+};
+
+const date: RenderDescriptor = {
+  kind: 'column-format',
+  type: 'date',
+  since: '1.0',
+  surfaces: ['list'],
+  load: () => import('./format-date').then((module) => module.ColumnFormatDate),
+  inputs,
+};
+
+/** Los 7 formatos del `@switch` que este registro reemplaza (R4.3). */
+export const columnFormatDescriptors: readonly RenderDescriptor[] = [
+  text,
+  badge,
+  thumbnail,
+  boolean,
+  number,
+  currency,
+  date,
+];
+
+/**
+ * Los 7 nombres, como dato.
+ *
+ * Va en paralelo a `ListColumnFormat` (unión de `schema.model`) y lo vigila
+ * `core/registry/contract.spec.ts`: la unión vive en tipos y el registro en
+ * runtime, y sólo un test reconcilia los dos — el mismo tripwire que ya
+ * existe para los 20 campos y los 6 widgets.
+ */
+export const COLUMN_FORMAT_TYPES = [
+  'text',
+  'badge',
+  'thumbnail',
+  'boolean',
+  'number',
+  'currency',
+  'date',
+] as const;

package/src/lib/columns/format-badge.ts

@@ -0,0 +1,51 @@
+import { Component, computed, input } from '@angular/core';
+
+import { Badge, type BadgeKind } from '../shared/components/badge/badge';
+import { resolveBadgeKind } from '../fields/display/display-badge';
+import type { SelectField } from '../core/models/schema.model';
+import { getValue } from '../shared/utils/field-path';
+import type { ColumnCell } from './column-cell';
+
+/**
+ * Formato `badge` (R4.3, afinado en R4.4).
+ *
+ * Un booleano usa `trueLabel`/`falseLabel` del campo (o «Sí»/«No») con
+ * `success`/`danger` — el vocabulario de la lista para el control que
+ * permite escribir. El vacío sigue siendo «Sin dato»/`danger`.
+ *
+ * El resto alinea el chip con el display del detalle (D41): un `select`
+ * pinta la **etiqueta** de la opción y los estados se clasifican con
+ * `resolveBadgeKind`, el mismo criterio que la cabecera de la ficha —
+ * antes, toda columna declarada `badge` salía verde sin mirar el valor.
+ */
+@Component({
+  selector: 'app-column-format-badge',
+  imports: [Badge],
+  template: `<app-badge [label]="badge().label" [kind]="badge().kind" />`,
+})
+export class ColumnFormatBadge {
+  readonly cell = input.required<ColumnCell>();
+
+  protected readonly badge = computed(() => badgeInfo(this.cell()));
+}
+
+export function badgeInfo(cell: ColumnCell): { label: string; kind: BadgeKind } {
+  const value = getValue(cell.row, cell.column.key);
+  const field = cell.fields.find((candidate) => candidate.key === cell.column.key);
+  if (typeof value === 'boolean') {
+    const label =
+      value === true
+        ? ((field?.type === 'boolean' ? field.trueLabel : undefined) ?? 'Sí')
+        : ((field?.type === 'boolean' ? field.falseLabel : undefined) ?? 'No');
+    return { label, kind: value ? 'success' : 'danger' };
+  }
+  const text = value == null ? '' : String(value);
+  if (text === '') {
+    return { label: 'Sin dato', kind: 'danger' };
+  }
+  const etiqueta =
+    field?.type === 'select'
+      ? ((field as SelectField).options?.find((option) => option.value === text)?.label ?? text)
+      : text;
+  return { label: etiqueta, kind: resolveBadgeKind(text) };
+}

package/src/lib/columns/format-boolean.ts

@@ -0,0 +1,58 @@
+import { Component, computed, input } from '@angular/core';
+
+import { Badge } from '../shared/components/badge/badge';
+import { getValue } from '../shared/utils/field-path';
+import type { ColumnCell } from './column-cell';
+import { badgeInfo } from './format-badge';
+
+/**
+ * Formato `boolean` (R4.3): interruptor o badge.
+ *
+ * Es la rama `@case ('boolean')` de `list-view`, con una sola diferencia de
+ * domicilio: hoy sólo monta este componente si el formato efectivo ya es
+ * `boolean`, así que la comprobación `column.format === 'boolean'` que hacía
+ * `isSwitchColumn` sobra. El criterio restante — `active` booleano y con
+ * permiso de edición (base.md §10) — vive acá, que es quien dibuja el control.
+ */
+@Component({
+  selector: 'app-column-format-boolean',
+  imports: [Badge],
+  template: `
+    @if (esInterruptor()) {
+      <input
+        type="checkbox"
+        class="size-5 cursor-pointer accent-primary"
+        [checked]="valor()"
+        [disabled]="cell().saving"
+        [attr.aria-label]="cell().column.label + ': ' + cell().title"
+        (click)="$event.stopPropagation()"
+        (change)="alternar($event)"
+      />
+    } @else {
+      <app-badge [label]="badge().label" [kind]="badge().kind" />
+    }
+  `,
+})
+export class ColumnFormatBoolean {
+  readonly cell = input.required<ColumnCell>();
+
+  protected readonly badge = computed(() => badgeInfo(this.cell()));
+
+  protected readonly valor = computed(() => {
+    const value = getValue(this.cell().row, this.cell().column.key);
+    return value === true || value === 'true';
+  });
+
+  /** `active` declarado como boolean en el schema → interruptor (base.md §10). */
+  protected readonly esInterruptor = computed(() => {
+    const cell = this.cell();
+    if (cell.column.key !== 'active' || !cell.canUpdate) {
+      return false;
+    }
+    return cell.fields.some((field) => field.type === 'boolean' && field.key === 'active');
+  });
+
+  protected alternar(event: Event): void {
+    this.cell().toggle?.((event.target as HTMLInputElement).checked);
+  }
+}

package/src/lib/columns/format-currency.ts

@@ -0,0 +1,30 @@
+import { Component, computed, input } from '@angular/core';
+
+import { getValue } from '../shared/utils/field-path';
+import type { ColumnCell } from './column-cell';
+
+/**
+ * Formato `currency` (R4.3). Igual que el helper de `list-view`: `es-PE`,
+ * moneda tomada del schema (se pasaba desde la vista porque sólo ella la
+ * conoce) y texto crudo si el valor no es número.
+ */
+@Component({
+  selector: 'app-column-format-currency',
+  template: `{{ precio() }}`,
+})
+export class ColumnFormatCurrency {
+  readonly cell = input.required<ColumnCell>();
+
+  protected readonly precio = computed(() => {
+    const cell = this.cell();
+    const value = getValue(cell.row, cell.column.key);
+    const number = Number(value);
+    if (!Number.isFinite(number)) {
+      return value == null ? '' : String(value);
+    }
+    return new Intl.NumberFormat('es-PE', {
+      style: 'currency',
+      currency: cell.currency,
+    }).format(number);
+  });
+}

package/src/lib/columns/format-date.ts

@@ -0,0 +1,35 @@
+import { Component, computed, input } from '@angular/core';
+
+import { getValue } from '../shared/utils/field-path';
+import type { ColumnCell } from './column-cell';
+
+function formatDate(value: unknown): string {
+  if (typeof value !== 'string' || value === '') {
+    return value == null ? '' : String(value);
+  }
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+  // Fechas `YYYY-MM-DD`: forzar UTC para no desfasar un día.
+  return date.toLocaleDateString('es-PE', { timeZone: 'UTC' });
+}
+
+/**
+ * Formato `date` (R4.3). Corto (`toLocaleDateString`), a diferencia del
+ * display de la ficha, que va con `dateStyle: 'medium'`: cada superficie
+ * con su formato, pero ambos desde su propio componente.
+ */
+@Component({
+  selector: 'app-column-format-date',
+  template: `{{ fecha() }}`,
+})
+export class ColumnFormatDate {
+  readonly cell = input.required<ColumnCell>();
+
+  protected readonly fecha = computed(() => formatDate(this.valor()));
+
+  private valor(): unknown {
+    return getValue(this.cell().row, this.cell().column.key);
+  }
+}

package/src/lib/columns/format-number.ts

@@ -0,0 +1,32 @@
+import { Component, computed, input } from '@angular/core';
+
+import { getValue } from '../shared/utils/field-path';
+import type { ColumnCell } from './column-cell';
+
+const NUMBER_FORMAT = new Intl.NumberFormat('es-PE');
+
+function formatNumber(value: unknown): string {
+  const number = Number(value);
+  if (!Number.isFinite(number)) {
+    return value == null ? '' : String(value);
+  }
+  return NUMBER_FORMAT.format(number);
+}
+
+/**
+ * Formato `number` (R4.3). Misma fórmula que el helper de `list-view`:
+ * miles con separador `es-PE` y texto crudo si el valor no es número.
+ */
+@Component({
+  selector: 'app-column-format-number',
+  template: `{{ numero() }}`,
+})
+export class ColumnFormatNumber {
+  readonly cell = input.required<ColumnCell>();
+
+  protected readonly numero = computed(() => formatNumber(this.valor()));
+
+  private valor(): unknown {
+    return getValue(this.cell().row, this.cell().column.key);
+  }
+}

package/src/lib/columns/format-text.ts

@@ -0,0 +1,23 @@
+import { Component, computed, input } from '@angular/core';
+
+import { getValue } from '../shared/utils/field-path';
+import type { ColumnCell } from './column-cell';
+
+/**
+ * Formato `text` (R4.3 · el `@default` del `@switch` viejo).
+ *
+ * `cellText` de `list-view`: `null`/`undefined` se pintan vacíos y el resto
+ * pasa por `String()` — un objeto sale `[object Object]`, igual que antes.
+ */
+@Component({
+  selector: 'app-column-format-text',
+  template: `{{ texto() }}`,
+})
+export class ColumnFormatText {
+  readonly cell = input.required<ColumnCell>();
+
+  protected readonly texto = computed(() => {
+    const value = getValue(this.cell().row, this.cell().column.key);
+    return value == null ? '' : String(value);
+  });
+}

package/src/lib/columns/format-thumbnail.ts

@@ -0,0 +1,63 @@
+import { Component, computed, input } from '@angular/core';
+
+import { getValue } from '../shared/utils/field-path';
+import type { ColumnCell } from './column-cell';
+
+/**
+ * Formato `thumbnail` (R4.3): miniatura de la fila.
+ *
+ * Tanto `thumbnailSrc` como `thumbnailAlt` se mudan desde `list-view`: la
+ * columna puede apuntar a `image_url`, al primer elemento de `images[]` o a
+ * un objeto con `image_url`, y el texto alternativo sale del item o de la
+ * fila. Sin URL se pinta el `—` de siempre.
+ */
+@Component({
+  selector: 'app-column-format-thumbnail',
+  template: `
+    @if (src(); as url) {
+      <img [src]="url" [alt]="alt()" class="size-9 rounded-md object-cover" loading="lazy" />
+    } @else {
+      <span class="text-neutral" aria-hidden="true">—</span>
+    }
+  `,
+})
+export class ColumnFormatThumbnail {
+  readonly cell = input.required<ColumnCell>();
+
+  protected readonly src = computed(() => {
+    const value = this.valor();
+    if (typeof value === 'string') {
+      return value !== '' ? value : null;
+    }
+    if (Array.isArray(value)) {
+      const first = value[0];
+      const url = typeof first === 'string' ? first : getValue(first, 'image_url');
+      return typeof url === 'string' && url !== '' ? url : null;
+    }
+    if (value && typeof value === 'object') {
+      const url = getValue(value, 'image_url');
+      return typeof url === 'string' && url !== '' ? url : null;
+    }
+    return null;
+  });
+
+  protected readonly alt = computed(() => {
+    const value = this.valor();
+    let item: unknown = this.cell().row;
+    if (Array.isArray(value)) {
+      item = value[0] ?? null;
+    } else if (value && typeof value === 'object') {
+      item = value;
+    }
+    const alt = item == null ? null : getValue(item, 'image_alt');
+    if (typeof alt === 'string' && alt !== '') {
+      return alt;
+    }
+    const rootAlt = this.cell().row['image_alt'];
+    return typeof rootAlt === 'string' ? rootAlt : '';
+  });
+
+  private valor(): unknown {
+    return getValue(this.cell().row, this.cell().column.key);
+  }
+}

package/src/lib/core/adapters/firebase-auth.adapter.ts

@@ -0,0 +1,6 @@
+/**
+ * Re-exporta `FirebaseAuthAdapter` desde `tokens.ts` (única fuente de verdad).
+ * Mantiene este archivo como punto de importación estable para consumidores
+ * que ya referencian esta ruta, sin duplicar la definición de la interfaz.
+ */
+export type { FirebaseAuthAdapter } from '../tokens';

package/src/lib/core/guards/auth.guard.spec.ts

@@ -0,0 +1,88 @@
+import { provideHttpClient } from '@angular/common/http';
+import { TestBed } from '@angular/core/testing';
+import { ActivatedRouteSnapshot, Router, UrlTree, provideRouter } from '@angular/router';
+
+import { API_URL } from '../tokens';
+import { SESSION_TOKEN_KEY, SESSION_USER_KEY } from '../services/auth.service';
+import { authGuard, roleGuard } from './auth.guard';
+
+/**
+ * R2.10 — guards de sesión (auth.md §5.3).
+ *
+ * No son una barrera (el back re-verifica desde R2.6): son el filtro de
+ * pantalla. Por eso aquí sólo se comprueba HACIA DÓNDE mandan, no qué
+ * protegen.
+ */
+describe('authGuard / roleGuard — filtro de pantalla (R2.10)', () => {
+  afterEach(() => sessionStorage.clear());
+
+  /** `role === null` ⇒ sin sesión: no se siembra nada en el storage. */
+  function setup(role: string | null = 'admin') {
+    sessionStorage.clear();
+    if (role !== null) {
+      sessionStorage.setItem(SESSION_TOKEN_KEY, 'tok');
+      sessionStorage.setItem(SESSION_USER_KEY, JSON.stringify({ id: 'u_1', role }));
+    }
+
+    TestBed.configureTestingModule({
+      providers: [provideHttpClient(), provideRouter([]), { provide: API_URL, useValue: '/api' }],
+    });
+    return { authGuard, roleGuard, router: TestBed.inject(Router) };
+  }
+
+  /** `route` mínimo con un solo parámetro de ruta. */
+  function routeWithId(id: string | null): ActivatedRouteSnapshot {
+    return {
+      paramMap: {
+        get: (key: string) => (key === 'id' ? id : null),
+      },
+    } as unknown as ActivatedRouteSnapshot;
+  }
+
+  const isUrlTree = (r: unknown): r is UrlTree => r instanceof UrlTree;
+
+  /**
+   * El router invoca un guard DENTRO de un contexto de inyección; una llamada
+   * directa desde el spec no lo tiene, y `inject(AuthService)` revienta.
+   * `runInInjectionContext` reproducía el contexto real del router.
+   */
+  function run(guard: typeof authGuard, route: ActivatedRouteSnapshot): boolean | UrlTree {
+    const result = TestBed.runInInjectionContext(() => guard(route, {} as never));
+    // Los dos guards son síncronos: `MaybeAsync` sólo es ruido de tipos acá.
+    return result as boolean | UrlTree;
+  }
+
+  it('con sesión deja pasar', () => {
+    const { authGuard: guard } = setup();
+    expect(run(guard, {} as ActivatedRouteSnapshot)).toBe(true);
+  });
+
+  it('sin sesión manda a /login', () => {
+    const { authGuard: guard, router } = setup(null);
+    const result = run(guard, {} as ActivatedRouteSnapshot);
+    expect(isUrlTree(result)).toBe(true);
+    expect(router.serializeUrl(result as UrlTree)).toBe('/login');
+  });
+
+  it('sin sesión, un `:id` también manda a /login (redundancia barata)', () => {
+    const { roleGuard: guard, router } = setup(null);
+    const result = run(guard, routeWithId('orders'));
+    expect(isUrlTree(result)).toBe(true);
+    expect(router.serializeUrl(result as UrlTree)).toBe('/login');
+  });
+
+  it('un `:id` desconocido deja que responda el back (no inventamos política)', () => {
+    const { roleGuard: guard } = setup();
+    expect(run(guard, routeWithId('no-existe'))).toBe(true);
+  });
+
+  it('una ruta sin `:id` no decide nada', () => {
+    const { roleGuard: guard } = setup();
+    expect(run(guard, routeWithId(null))).toBe(true);
+  });
+
+  it('un recurso sin `access` declarado se ve con sesión', () => {
+    const { roleGuard: guard } = setup('staff');
+    expect(run(guard, routeWithId('dashboard'))).toBe(true);
+  });
+});

package/src/lib/core/guards/auth.guard.ts

@@ -0,0 +1,48 @@
+import { inject } from '@angular/core';
+import type { CanActivateFn } from '@angular/router';
+import { Router } from '@angular/router';
+
+import { getSchema } from '../registry/schema-catalog';
+import { AuthService, LOGIN_PATH } from '../services/auth.service';
+
+/**
+ * Guards de sesión (auth.md §5.3).
+ *
+ * Dos puertas y ninguna es una barrera de seguridad: el back re-verifica
+ * `accessLevel` en **cada** petición desde R2.6. Éstas sólo evitan pintar
+ * una pantalla que no le toca al usuario — enseñarle un formulario que va
+ * a recibir 403 es mala UX, no un agujero.
+ *
+ * `authGuard` va en la ruta madre (todo el shell); `roleGuard` en cada
+ * `:id`, que es donde aparece el recurso que puede tener `access`.
+ */
+
+/** Sin sesión → login. Corre ANTES que cualquier ruta del shell. */
+export const authGuard: CanActivateFn = () => {
+  const auth = inject(AuthService);
+  if (auth.isAuthenticated()) return true;
+  return inject(Router).createUrlTree([LOGIN_PATH]);
+};
+
+/**
+ * El recurso declara `access` y esta sesión no lo cumple → se cancela la
+ * navegación. No hay pantalla de 403 (tampoco la pide §5.3) y el menú ya
+ * oculta la entrada, así que queda sólo el caso de alguien tecleando la URL.
+ */
+export const roleGuard: CanActivateFn = (route) => {
+  const auth = inject(AuthService);
+  const router = inject(Router);
+
+  // Redundante con `authGuard` (la madre ya filtra) pero barato: un hijo
+  // nunca debe dejar una sesión muerta navegando sola.
+  if (!auth.isAuthenticated()) return router.createUrlTree([LOGIN_PATH]);
+
+  const id = route.data?.['resourceId'] ?? route.paramMap.get('id');
+  // Ruta sin recurso declarado, o id que no existe en el registry → que
+  // responda el back (404). No inventar una política sobre datos ajenos.
+  if (id === null) return true;
+  const schema = getSchema(String(id));
+  if (schema === undefined) return true;
+
+  return auth.canAccess(schema.access);
+};

package/src/lib/core/guards/unsaved-changes.guard.ts

@@ -0,0 +1,16 @@
+import { CanDeactivateFn } from '@angular/router';
+
+/** Componente que expone si se puede salir (base.md §13.9: cambios sin guardar). */
+export interface CanLeaveWhenDirty {
+  canDeactivate(): boolean | Promise<boolean>;
+}
+
+/**
+ * Avisa antes de salir con cambios sin guardar. El componente decide:
+ * `canDeactivate()` devuelve `true` para salir limpio o una `Promise` que
+ * resuelve según la respuesta del usuario (vía `NotificationService.confirm`).
+ */
+export const unsavedChangesGuard: CanDeactivateFn<unknown> = (component) => {
+  const candidate = component as Partial<CanLeaveWhenDirty> | null | undefined;
+  return candidate?.canDeactivate?.() ?? true;
+};