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

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

@@ -1,570 +0,0 @@
-import { Component, computed, inject, input, output, signal } from '@angular/core';
-import { toObservable, toSignal } from '@angular/core/rxjs-interop';
-import { Router } from '@angular/router';
-
-import { ViewNavigationService } from '../../core/view-navigation/view-navigation.service';
-import { catchError, combineLatest, map, of, switchMap } from 'rxjs';
-
-import {
-  LucideArrowLeft,
-  LucideExternalLink,
-  LucidePencil,
-  LucideRotateCw,
-  LucideTrash2,
-} from '@lucide/angular';
-import type {
-  CopyShareAction,
-  DetailViewSchema,
-  FieldSchema,
-  ResourceAction,
-  ResourceSchema,
-  TriggerAction,
-} from '../../core/models/schema.model';
-import {
-  isShareAction,
-  isTriggerAction,
-  resolveShare,
-  type ResolvedShare,
-} from '../../actions/action-registry';
-import { ActionService } from '../../actions/action-service';
-import { RenderHost } from '../../core/registry/render-host';
-import { ApiService } from '../../core/services/api.service';
-import { AuthService } from '../../core/services/auth.service';
-import { ConfigService } from '../../core/services/config.service';
-import { NotificationService } from '../../core/services/notification.service';
-import { Button } from '../../shared/components/button/button';
-import { CopyShare } from '../../shared/components/copy-share/copy-share';
-import { CopyButton } from '../../shared/components/copy-button/copy-button';
-import { EmptyState } from '../../shared/components/empty-state/empty-state';
-import { Skeleton } from '../../shared/components/skeleton/skeleton';
-import { getValue } from '../../shared/utils/field-path';
-
-type Row = Record<string, unknown>;
-
-/**
- * Estado etiquetado del `get` del registro.
- *
- * `pending` distingue «todavía viaja» de «terminó sin datos» (sin
- * `endpoint.get` contratado o sin key): antes ambos eran `null` y el
- * detalle pintaba la fila parcial de la lista como si fuera todo, con los
- * campos pesados en `—` que después mutaban solos (cargar ≠ vacío,
- * doc/ux-ui-mobile.md §estados de UI).
- */
-type FetchState =
-  | { phase: 'pending' }
-  | { phase: 'done'; data: Row | null }
-  /** D4: el error ORIGINAL se retiene para diagnóstico (identity intacta). */
-  | { phase: 'error'; error: unknown };
-
-/**
- * Campo ya resuelto contra el registro, **sin formatear**.
- *
- * Antes de R4.2 este objeto traía `value` + `kind` + `badgeKind`, que era
- * como `detail-view` derivaba a mano qué pintar (`image | badge | text`).
- * Hoy sólo aporta agrupación —clave, etiqueta, campo y valor crudo— y el
- * pintado lo decide el registro vía `<app-render-host mode="display">`.
- */
-interface FieldValue {
-  key: string;
-  label: string;
-  /** Campo del schema (o un `text` sintético si la clave no existe). */
-  field: FieldSchema;
-  /** Valor crudo del registro. */
-  raw: unknown;
-}
-
-interface DetailSection {
-  id: string;
-  label: string;
-  fields: FieldValue[];
-}
-
-/**
- * Vista de detalle genérica: muestra los campos de un registro en modo lectura.
- * Incluye cabecera estilizada, timeline interactivo para listas anidadas
- * (como history) y barra de acciones.
- *
- * **R4.2 · F3 (`refactormotor.md`):** dejó de derivar `kind` a mano y de
- * tener plantilla propia de campo. Agrupa (`sections()`, `resolveFieldValue()`,
- * el `<dt>`/`<dd>`, el bloque de historial y `hasLargeContent()`) y el valor
- * lo pinta el registro con `mode="display"` — la misma tabla por tipo que
- * cualquier otra superficie. Lo único que queda por fuera son las secciones
- * que no son campos: cabecera, `copy-share` y acciones.
- */
-@Component({
-  selector: 'app-detail-view',
-  imports: [
-    Button,
-    CopyShare,
-    CopyButton,
-    EmptyState,
-    LucideArrowLeft,
-    LucideExternalLink,
-    LucidePencil,
-    LucideRotateCw,
-    LucideTrash2,
-    RenderHost,
-    Skeleton,
-  ],
-  template: `
-    <div class="space-y-6">
-      <!-- ── Cabecera Principal ── -->
-      <header
-        class="flex flex-wrap items-start justify-between gap-4 rounded-2xl border border-neutral/15 bg-surface p-6 shadow-xs"
-      >
-        <div class="space-y-2">
-          <div class="flex flex-wrap items-center gap-2.5">
-            <h1 class="font-display text-2xl font-bold tracking-tight text-neutral-light">
-              {{ title() }}
-            </h1>
-            @for (campo of headerFields(); track campo.key) {
-              @if (!vacio(campo.raw)) {
-                <!-- La cabecera siempre mostró los headerFields como chips:
-                     el matiz viaja al host, no un @switch por tipo acá. -->
-                <app-render-host
-                  mode="display"
-                  [chip]="true"
-                  [type]="campo.field.type"
-                  [config]="campo.field"
-                  [value]="campo.raw"
-                />
-              }
-            }
-          </div>
-          <p class="text-sm text-neutral">
-            {{ schema().label }} · Identificador:
-            <span class="font-mono font-medium text-neutral-light">{{ recordKey() }}</span>
-          </p>
-        </div>
-
-        <div class="flex flex-wrap items-center gap-2.5">
-          <button app-button variant="outline" type="button" (click)="back.emit()">
-            <svg lucideArrowLeft size="16" />
-            Volver
-          </button>
-          @if (detail().allowEdit !== false && status() !== 'error') {
-            <button app-button variant="primary" type="button" (click)="edit.emit(record())">
-              <svg lucidePencil size="16" />
-              Editar
-            </button>
-          }
-          @if (detail().allowDelete !== false && status() !== 'error') {
-            <button app-button variant="danger" type="button" (click)="delete.emit(record())">
-              <svg lucideTrash2 size="16" />
-              Eliminar
-            </button>
-          }
-        </div>
-      </header>
-
-      <!-- ── Acciones Destacadas del Registro (si existen) ── -->
-      @if (copyShareActions().length > 0 || triggerActions().length > 0) {
-        <section
-          class="rounded-2xl border border-primary/25 bg-gradient-to-r from-primary/10 via-primary/5 to-transparent p-5 shadow-xs"
-        >
-          <div class="mb-3 flex items-center gap-2">
-            <svg lucideExternalLink size="16" class="text-primary" />
-            <h2 class="text-sm font-semibold text-primary">Acciones del Registro</h2>
-          </div>
-          <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap">
-            @for (action of copyShareActions(); track action.id) {
-              <div class="flex-1 min-w-[280px]">
-                @let share = shareOf(action);
-                <app-copy-share
-                  [url]="share.url"
-                  [shareText]="share.shareText"
-                  [label]="action.label"
-                />
-              </div>
-            }
-            @for (action of triggerActions(); track action.id) {
-              <button app-button variant="outline" type="button" (click)="runTrigger(action)">
-                {{ action.label }}
-              </button>
-            }
-          </div>
-        </section>
-      }
-
-      <!-- ── Secciones de Datos ── -->
-      @switch (status()) {
-        @case ('loading') {
-          <!-- Skeleton con la forma de las tarjetas de sección: reserva el
-               espacio (sin layout jump) y distingue «cargando» de «vacío».
-               La cabecera y las acciones de arriba sí se pintan ya: son la
-               fila de la lista, datos reales que no están en disputa. -->
-          <div aria-busy="true" class="grid grid-cols-1 gap-6 lg:grid-cols-2">
-            @for (placeholder of [0, 1]; track placeholder) {
-              <section
-                class="rounded-2xl border border-neutral/15 bg-surface shadow-xs overflow-hidden"
-              >
-                <header class="border-b border-neutral/10 bg-neutral/5 px-5 py-3.5">
-                  <app-skeleton [lines]="1" [height]="14" width="30%" />
-                </header>
-                <div class="p-5">
-                  <app-skeleton [lines]="6" [height]="44" />
-                </div>
-              </section>
-            }
-          </div>
-        }
-        @case ('error') {
-          <app-empty-state
-            title="No se pudo cargar el registro"
-            message="Revisa tu conexión e intenta de nuevo."
-          >
-            <button app-button variant="outline" type="button" (click)="retry()">
-              <svg lucideRotateCw size="16" />
-              Reintentar
-            </button>
-            <button app-button variant="outline" type="button" (click)="volverDeError()">
-              <svg lucideArrowLeft size="16" />
-              Volver
-            </button>
-          </app-empty-state>
-        }
-        @case ('ready') {
-          <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
-            @for (section of sections(); track section.id) {
-              <section
-                class="rounded-2xl border border-neutral/15 bg-surface shadow-xs overflow-hidden flex flex-col"
-                [class.lg:col-span-2]="hasLargeContent(section)"
-              >
-                <header class="border-b border-neutral/10 bg-neutral/5 px-5 py-3.5">
-                  <h2 class="text-sm font-semibold tracking-wide text-neutral-light uppercase">
-                    {{ section.label }}
-                  </h2>
-                </header>
-
-                <div class="p-5 flex-1 space-y-4">
-                  <!-- Grid para campos regulares -->
-                  @if (regularFields(section).length > 0) {
-                    <dl class="grid grid-cols-1 gap-x-6 gap-y-4 lg:grid-cols-12">
-                      @for (campo of regularFields(section); track campo.key) {
-                        <div class="space-y-1">
-                          <dt class="col-span-12 sm:col-span-12 lg:col-span-3 text-xs font-medium text-neutral">{{ campo.label }}</dt>
-                          <dd class="col-span-12 sm:col-span-12 lg:col-span-{{ colSpanFor(campo.field.width) }} text-sm font-medium text-neutral-light break-words">
-                            <app-render-host
-                              mode="display"
-                              [type]="campo.field.type"
-                              [config]="campo.field"
-                              [value]="campo.raw"
-                            />
-                            @if (isCopyable(campo.field.type) && campo.raw !== null && campo.raw !== undefined && campo.raw !== '') {
-                              <app-copy-button [value]="campo.raw" />
-                            }
-                          </dd>
-                        </div>
-                      }
-                    </dl>
-                  }
-
-                  <!-- Renderizado de listas anidadas (Timeline de eventos / items) -->
-                  @for (campo of listFields(section); track campo.key) {
-                    <div class="pt-2">
-                      <h3 class="mb-3 text-xs font-semibold text-neutral uppercase">
-                        {{ campo.label }}
-                      </h3>
-                      <app-render-host
-                        mode="display"
-                        [type]="campo.field.type"
-                        [config]="campo.field"
-                        [value]="campo.raw"
-                      />
-                    </div>
-                  }
-                </div>
-              </section>
-            }
-          </div>
-        }
-      }
-    </div>
-  `,
-})
-export class DetailView {
-  private readonly api = inject(ApiService, { optional: true });
-  private readonly actionService = inject(ActionService);
-  private readonly auth = inject(AuthService);
-  // R8.8: el trigger (Regenerar PIN) confirma vía toast y dispara la
-  // recarga del detalle — el mismo puerto que ya usa list-view.
-  private readonly router = inject(Router);
-  private readonly nav = inject(ViewNavigationService);
-  private readonly notifications = inject(NotificationService);
-  private readonly configService = inject(ConfigService);
-
-  constructor() {
-    // Este detalle presenta `<app-copy-share>` sin pasar por `ActionService`:
-    // si el load del bootstrap falló, el mensaje resolvería a «sólo la
-    // URL». Reintentamos acá —con la sesión ya iniciada—; `globalConfig` es
-    // signal, así que `shareOf` se recalcula cuando llega.
-    void this.configService.ensureLoaded();
-  }
-
-  readonly schema = input.required<ResourceSchema>();
-  readonly record = input.required<Row>();
-
-  readonly edit = output<Row>();
-  readonly back = output<void>();
-  readonly delete = output<Row>();
-
-  /**
-   * R8.8: contador que fuerza la relectura del registro. Una acción de
-   * dominio muta la fila en el back (el PIN regenerado vive en la hoja);
-   * sin este tick, `toObservable(this.record)` no emite (la referencia no
-   * cambió) y el detalle mostraría el PIN viejo.
-   */
-  private readonly refreshTick = signal(0);
-
-  /**
-   * Obtiene el registro completo desde el endpoint get si existe.
-   * Esto asegura que campos pesados o no proyectados en la lista (como fotos, notas o historial)
-   * se carguen y muestren completos. El resultado va etiquetado (`FetchState`)
-   * para que la vista sepa distinguir «cargando» de «sin datos» de «error».
-   */
-  private readonly fetched = toSignal(
-    combineLatest([toObservable(this.record), toObservable(this.refreshTick)]).pipe(
-      switchMap(([rec]) => {
-        const schema = this.schema();
-        const key = rec ? String(rec[schema.keyField] ?? '') : '';
-        const getEndpoint = schema.endpoint?.get;
-        if (!key || !getEndpoint || typeof this.api?.get !== 'function') {
-          // Sin get contratado la fila de la lista ES todo lo que hay.
-          return of<FetchState>({ phase: 'done', data: null });
-        }
-        return this.api.get<Row>(schema.endpoint, key).pipe(
-          map((data): FetchState => ({ phase: 'done', data })),
-          catchError((error) => of<FetchState>({ phase: 'error', error })),
-        );
-      }),
-    ),
-    { initialValue: { phase: 'pending' } as FetchState },
-  );
-
-  /**
-   * Estados universales del detalle — el mismo trío que `list-view` y
-   * `form-view`. El skeleton reserva el espacio de las secciones mientras
-   * viaja el `get` (Apps Script tarda ~1s): sin él, el operador veía una
-   * pantalla «completa» con campos vacíos que después aparecían solos.
-   */
-  protected readonly status = computed<'loading' | 'ready' | 'error'>(() => {
-    const fetched = this.fetched();
-    if (fetched.phase === 'pending') return 'loading';
-    if (fetched.phase === 'error') return 'error';
-    return 'ready';
-  });
-
-  /** Reintenta el `get` del registro desde el estado de error. */
-  protected retry(): void {
-    this.refreshTick.update((tick) => tick + 1);
-  }
-
-  /**
-   * D4 — el error original con IDENTIDAD intacta (no un string mapeado):
-   * el mensaje mostrado es display-only, el objeto crudo queda aquí para
-   * diagnóstico. `undefined` cuando no hay fallo de carga.
-   */
-  errorDeCarga(): unknown {
-    const fetched = this.fetched();
-    return fetched.phase === 'error' ? fetched.error : undefined;
-  }
-
-  /**
-   * D4 — «way back» desde el estado de error: emite el `back` (el host
-   * embebido sigue gestionando su propia vuelta) Y navega por el servicio
-   * declarado — en la ruta directa (`/:id/:key`) nadie escucha el output,
-   * y un estado de error sin salida es una pantalla muerta.
-   */
-  protected volverDeError(): void {
-    this.back.emit();
-    void this.nav.back();
-  }
-
-  protected readonly effectiveRecord = computed<Row>(() => {
-    const initial = this.record();
-    const fetched = this.fetched();
-    if (
-      fetched.phase === 'done' &&
-      fetched.data &&
-      typeof fetched.data === 'object' &&
-      Object.keys(fetched.data).length > 0
-    ) {
-      return { ...initial, ...fetched.data };
-    }
-    return initial;
-  });
-
-  protected readonly detail = computed<DetailViewSchema>(
-    () => this.schema().detail ?? { enabled: true },
-  );
-
-  protected readonly title = computed(() => {
-    const rec = this.effectiveRecord();
-    const schema = this.schema();
-    const raw = rec[schema.titleField];
-    return raw !== undefined && raw !== null && raw !== '' ? String(raw) : schema.label;
-  });
-
-  protected readonly recordKey = computed(() => {
-    const rec = this.effectiveRecord();
-    const schema = this.schema();
-    return String(rec[schema.keyField] ?? '—');
-  });
-
-  protected readonly headerFields = computed<FieldValue[]>(() => {
-    const headerKeys = this.detail().headerFields ?? [];
-    return headerKeys
-      .map((key) => this.resolveFieldValue(key))
-      .filter((f): f is FieldValue => f !== null);
-  });
-
-  protected readonly sections = computed<DetailSection[]>(() => {
-    const schema = this.schema();
-    const detailConfig = this.detail();
-
-    if (detailConfig.sections && detailConfig.sections.length > 0) {
-      return detailConfig.sections
-        .map((sec) => ({
-          id: sec.id,
-          label: sec.label,
-          fields: sec.fields
-            .map((key) => this.resolveFieldValue(key))
-            .filter((f): f is FieldValue => f !== null),
-        }))
-        .filter((sec) => sec.fields.length > 0);
-    }
-
-    const layoutSections = schema.layout?.sections ?? [];
-    const sectionMap = new Map<string, DetailSection>();
-
-    for (const layoutSection of layoutSections) {
-      sectionMap.set(layoutSection.id, {
-        id: layoutSection.id,
-        label: layoutSection.label,
-        fields: [],
-      });
-    }
-
-    const unsectioned: DetailSection = { id: '_unsectioned', label: schema.label, fields: [] };
-
-    for (const field of schema.fields) {
-      const value = this.resolveFieldValue(field.key);
-      if (value === null) continue; // R7.5: campo oculto por políticas
-      if (field.section && sectionMap.has(field.section)) {
-        sectionMap.get(field.section)!.fields.push(value);
-      } else {
-        unsectioned.fields.push(value);
-      }
-    }
-
-    const result: DetailSection[] = [];
-    if (unsectioned.fields.length > 0) result.push(unsectioned);
-    for (const sec of sectionMap.values()) {
-      if (sec.fields.length > 0) result.push(sec);
-    }
-
-    return result;
-  });
-
-  protected readonly copyShareActions = computed<CopyShareAction[]>(() => {
-    const actions: ResourceAction[] = this.schema().actions ?? this.detail().actions ?? [];
-    return actions.filter(isShareAction);
-  });
-
-  /** R8.8: acciones de dominio del back (trigger) visibles en el detalle. */
-  protected readonly triggerActions = computed<TriggerAction[]>(() => {
-    const actions: ResourceAction[] = this.schema().actions ?? this.detail().actions ?? [];
-    return actions.filter(isTriggerAction);
-  });
-
-  /**
-   * R8.8: dispara un `trigger` y, si tocó datos (`reload`), fuerza la
-   * relectura del registro. La confirmación (si el descriptor la pide) la
-   * resuelve `actionService.run` — este método no decide por tipo.
-   */
-  protected async runTrigger(action: TriggerAction): Promise<void> {
-    if (!this.api) return; // sin API no hay ruta que disparar
-    const result = await this.actionService.run(action, {
-      record: this.effectiveRecord(),
-      resource: this.schema().id,
-      api: this.api,
-      router: this.router,
-      toast: this.notifications,
-      user: this.auth.user(),
-      keyField: this.schema().keyField,
-    });
-    if (result.ok && result.reload) {
-      this.refreshTick.update((tick) => tick + 1);
-    }
-  }
-
-  /**
-   * Agrupación, no formato: devuelve el campo y el valor crudo. El pintado
-   * es cosa del registro (R4.2).
-   *
-   * R7.5: oculta campos según `field.access.read` (sólo UX; el back
-   * vuelve a filtrar la respuesta).
-   */
-  private resolveFieldValue(key: string): FieldValue | null {
-    const schema = this.schema();
-    const rec = this.effectiveRecord();
-    const field = schema.fields.find((f) => f.key === key);
-    const raw = getValue(rec, key);
-
-    // Una clave que ningún schema declara no tiene descriptor: se resuelve
-    // como texto crudo, que era exactamente lo que hacía el `default` del
-    // `formatValue` viejo.
-    const declarado: FieldSchema = field ?? { key, label: key.replace(/_/g, ' '), type: 'text' };
-
-    // R7.5: ocultar si el usuario no tiene permiso de lectura
-    if (!this.auth.canReadField(declarado)) {
-      return null;
-    }
-
-    return {
-      key,
-      label: field?.label ?? declarado.label,
-      field: declarado,
-      raw,
-    };
-  }
-
-  /**
-   * Valor vacío con el criterio de siempre (`null`, `undefined`, `''`): ni
-   * el chip de la cabecera ni el `—` del cuerpo cambian de criterio.
-   */
-  protected vacio(valor: unknown): boolean {
-    return valor === null || valor === undefined || valor === '';
-  }
-
-  /** Un historial sólo es historial si hay valor que recorrer. */
-  private esHistorial(campo: FieldValue): boolean {
-    return campo.field.type === 'list' && !this.vacio(campo.raw);
-  }
-
-  protected regularFields(section: DetailSection): FieldValue[] {
-    return section.fields.filter((f) => !this.esHistorial(f));
-  }
-
-  protected listFields(section: DetailSection): FieldValue[] {
-    return section.fields.filter((f) => this.esHistorial(f));
-  }
-
-  protected hasLargeContent(section: DetailSection): boolean {
-    return section.fields.some((f) => this.esHistorial(f) || f.key === 'description');
-  }
-
-  protected colSpanFor(width: number | undefined): string {
-    const w = width ?? 6;
-    return `lg:col-span-${Math.min(w, 9)}`;
-  }
-
-  protected isCopyable(type: string): boolean {
-    return ['text', 'url', 'email', 'phone', 'readonly-text', 'slug', 'color', 'number', 'currency', 'date', 'time'].includes(type);
-  }
-
-  /** Enlace y mensaje, resueltos por `resolveShare` (R3.10: una sola copia). */
-  protected shareOf(action: CopyShareAction): ResolvedShare {
-    return resolveShare(action, this.actionService.vars(this.effectiveRecord()));
-  }
-}