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

package/src/lib/fields/image/image.ts

@@ -0,0 +1,281 @@
+import { HttpEventType } from '@angular/common/http';
+import {
+  Component,
+  computed,
+  DestroyRef,
+  ElementRef,
+  inject,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import type { FormValueControl } from '@angular/forms/signals';
+
+import type { ImageField } from '../../core/models/schema.model';
+import { ApiError } from '../../core/models/api.model';
+import { NotificationService } from '../../core/services/notification.service';
+import { Button } from '../../shared/components/button/button';
+import { UploadService } from '../../core/services/upload.service';
+
+/**
+ * Carga de imagen (base.md §7): el valor es SOLO la URL pública.
+ *
+ * Control propio `FormValueControl<string>`: el nodo llega con `[formField]`
+ * desde el despachador y el `id` lo pone el host sobre este elemento (mismo
+ * patrón que `multiselect`), para que el `<label for>` del campo exista.
+ *
+ * Estados: vacío (zona punteada + arrastrar-soltar), subiendo (progreso; el
+ * valor no cambia hasta la respuesta), con imagen (preview + Reemplazar /
+ * Quitar / Ver en grande, y drop sobre el preview para reemplazar) y error
+ * (conserva la imagen anterior).
+ */
+@Component({
+  selector: 'app-field-image',
+  imports: [Button],
+  template: ` @if (error(); as message) {
+      <p
+        class="mb-2 rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-xs text-danger"
+        role="alert"
+      >
+        {{ message }}
+      </p>
+    }
+    @if (uploading()) {
+      <div class="rounded-xl border border-neutral/20 bg-surface p-3" data-testid="image-uploading">
+        <div class="h-1.5 w-full overflow-hidden rounded-full bg-neutral/20">
+          <div
+            class="h-full rounded-full bg-primary transition-all"
+            [style.width.%]="progress()"
+          ></div>
+        </div>
+        <p class="mt-1 text-xs text-neutral">Subiendo… {{ progress() }}%</p>
+      </div>
+    } @else if (value()) {
+      <div
+        class="rounded-xl border border-neutral/20 bg-surface p-3"
+        data-testid="image-preview"
+        (dragover)="$event.preventDefault()"
+        (drop)="onDrop($event)"
+      >
+        <img
+          [src]="value()"
+          [alt]="''"
+          [class]="previewClass()"
+          [style.aspect-ratio]="aspectRatio()"
+        />
+        <div class="mt-2 flex flex-wrap items-center gap-2">
+          <button
+            type="button"
+            app-button
+            variant="outline"
+            [disabled]="disabled()"
+            (click)="pickFile()"
+          >
+            Reemplazar
+          </button>
+          @if (!field().required) {
+            <button
+              type="button"
+              app-button
+              variant="outline"
+              [disabled]="disabled()"
+              (click)="clear()"
+            >
+              Quitar
+            </button>
+          }
+          <a
+            class="text-sm font-medium text-primary hover:underline"
+            [href]="value()"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Ver en grande
+          </a>
+        </div>
+      </div>
+    } @else {
+      <div
+        class="rounded-xl border-2 border-dashed border-neutral/30 p-6 text-center"
+        data-testid="image-dropzone"
+        (dragover)="$event.preventDefault()"
+        (drop)="onDrop($event)"
+      >
+        <p class="text-sm text-neutral">Arrastrá una imagen acá</p>
+        <button
+          type="button"
+          app-button
+          variant="outline"
+          class="mt-2"
+          [disabled]="disabled()"
+          (click)="pickFile()"
+        >
+          Subir imagen
+        </button>
+      </div>
+    }
+
+    <input
+      #fileInput
+      type="file"
+      class="sr-only"
+      [accept]="acceptAttr()"
+      [disabled]="disabled()"
+      (change)="onFileSelected($event)"
+    />`,
+})
+export class FieldImage implements FormValueControl<string> {
+  readonly field = input.required<ImageField>();
+  /** Recurso dueño de la imagen (firma de subida: carpeta de Cloudinary, §11.2). */
+  readonly resource = input('');
+
+  /** Sincronizado por el directive `FormField` del host. */
+  readonly value = model.required<string>();
+  readonly disabled = input(false);
+  /** Marca el campo como tocado (upload/clear/error), como el `blur` nativo. */
+  readonly touch = output<void>();
+
+  private readonly upload = inject(UploadService);
+  private readonly notifications = inject(NotificationService);
+  private readonly destroyRef = inject(DestroyRef);
+
+  protected readonly uploading = signal(false);
+  protected readonly progress = signal(0);
+  protected readonly error = signal<string | null>(null);
+
+  /** Literal en el código: Tailwind v4 genera las clases al escanearlo. */
+  protected readonly previewClass = computed(
+    () => `${this.field().previewSize ?? 'w-48'} rounded-lg object-cover`,
+  );
+  protected readonly aspectRatio = computed(() => this.field().aspectRatio ?? null);
+  protected readonly acceptAttr = computed(() => this.field().accept ?? 'image/*');
+
+  /**
+   * Template ref `#fileInput`: Angular NO auto-asigna las template refs a
+   * propiedades de clase (el campo `fileInput` quedaba `undefined` y
+   * `pickFile()` no hacía nada — el selector no se abría). Igual que en
+   * `modal.ts`: el tipo se expresa como genérico (`ElementRef<T>`).
+   */
+  private readonly fileInput = viewChild.required<ElementRef<HTMLInputElement>>('fileInput');
+  private uploadSub?: { unsubscribe(): void };
+
+  protected pickFile(): void {
+    this.fileInput().nativeElement.click();
+  }
+
+  protected clear(): void {
+    this.value.set('');
+    this.error.set(null);
+    this.touch.emit();
+  }
+
+  protected onFileSelected(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+    // Permite volver a elegir el mismo archivo tras un error.
+    input.value = '';
+    if (file) {
+      this.startUpload(file);
+    }
+  }
+
+  protected onDrop(event: Event): void {
+    event.preventDefault();
+    const file = (event as DragEvent).dataTransfer?.files?.[0];
+    if (file) {
+      this.startUpload(file);
+    }
+  }
+
+  /** Valida en cliente (accept + maxSizeMB) y sube con progreso. */
+  private startUpload(file: File): void {
+    if (this.disabled()) {
+      return;
+    }
+    const problem = this.validate(file);
+    if (problem !== null) {
+      this.error.set(problem);
+      this.touch.emit();
+      return;
+    }
+    this.error.set(null);
+    this.uploading.set(true);
+    this.progress.set(0);
+    this.touch.emit();
+
+    this.uploadSub?.unsubscribe();
+    // El nombre del campo viaja siempre: si declara `formats`, el backend
+    // firma ESA lista; sin formatos firma la lista global (R9.5.3).
+    this.uploadSub = this.upload
+      .uploadWithProgress(file, this.resource(), this.field().key)
+      .subscribe({
+        next: (event) => {
+          if (event.type === HttpEventType.UploadProgress) {
+            if (event.total) {
+              this.progress.set(Math.round((event.loaded / event.total) * 100));
+            }
+            return;
+          }
+          if (event.type === HttpEventType.Response) {
+            const url = event.body ?? '';
+            this.uploading.set(false);
+            if (url === '') {
+              this.error.set('No se pudo subir la imagen.');
+              return;
+            }
+            this.value.set(url);
+            this.notifications.success('Imagen subida.');
+          }
+        },
+        error: (err: unknown) => {
+          this.uploading.set(false);
+          // El backend explica el motivo (firma inválida, 429 rate-limit…).
+          this.error.set(
+            err instanceof ApiError
+              ? err.message
+              : 'No se pudo subir la imagen. Revisa la conexión e inténtalo de nuevo.',
+          );
+        },
+      });
+    this.destroyRef.onDestroy(() => this.uploadSub?.unsubscribe());
+  }
+
+  private validate(file: File): string | null {
+    if (!file.type.startsWith('image/')) {
+      return 'El archivo debe ser una imagen.';
+    }
+    const accept = this.field().accept;
+    if (accept !== undefined && !acceptMatches(accept, file)) {
+      return 'Formato no permitido para este campo.';
+    }
+    const maxSizeMB = this.field().maxSizeMB;
+    if (maxSizeMB !== undefined && file.size > maxSizeMB * 1024 * 1024) {
+      return `La imagen supera ${maxSizeMB} MB.`;
+    }
+    return null;
+  }
+}
+
+/** `accept` de `<input type=file>`: lista, `image/*` o extensión `.png`. */
+function acceptMatches(accept: string, file: File): boolean {
+  for (const raw of accept.split(',')) {
+    const entry = raw.trim().toLowerCase();
+    if (entry === '') {
+      continue;
+    }
+    if (entry.startsWith('.')) {
+      if (file.name.toLowerCase().endsWith(entry)) {
+        return true;
+      }
+    } else if (entry.endsWith('/*')) {
+      if (file.type.startsWith(entry.slice(0, -1))) {
+        return true;
+      }
+    } else if (file.type === entry) {
+      return true;
+    }
+  }
+  return false;
+}

package/src/lib/fields/key-value/key-value.descriptor.ts

@@ -0,0 +1,11 @@
+import type { RenderDescriptor } from '../../core/registry/render-registry';
+
+/** Descriptor del campo `key-value` (R3.3). */
+export const descriptor: RenderDescriptor = {
+  kind: 'field',
+  type: 'key-value',
+  since: '1.0',
+  load: () => import('./key-value').then((module) => module.FieldKeyValue),
+  seed: 'array',
+  surfaces: ['form', 'display'],
+};

package/src/lib/fields/key-value/key-value.ts

@@ -0,0 +1,283 @@
+import { Component, computed, inject, input } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import {
+  CdkDrag,
+  CdkDragDrop,
+  CdkDragHandle,
+  CdkDropList,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop';
+
+import { LucideArrowDown, LucideArrowUp, LucideGripVertical, LucideTrash2 } from '@lucide/angular';
+import type { KeyValueField, KeyValueItem } from '../../core/models/schema.model';
+import { NotificationService } from '../../core/services/notification.service';
+import { Button } from '../../shared/components/button/button';
+import {
+  appendPosition,
+  computeMove,
+  GAP,
+  type PositionedItem,
+} from '../../shared/utils/gap-sorting';
+import { FieldAria } from '../field-aria';
+import { childTree, itemTree, listTree, type RootTree } from '../field-node';
+
+/**
+ * Pares clave→valor (base.md §9 «ficha técnica»). Hoja: tabla con sus
+ * propios `<input [formField]>` (nodos `key`/`value` del ítem) y no toca
+ * FieldHost. `position` se calcula con gap-sorting igual que en `list`.
+ */
+@Component({
+  selector: 'app-field-key-value',
+  imports: [
+    FieldAria,
+    Button,
+    CdkDrag,
+    CdkDragHandle,
+    CdkDropList,
+    FormField,
+    LucideArrowDown,
+    LucideArrowUp,
+    LucideGripVertical,
+    LucideTrash2,
+  ],
+  template: `
+    @if (items().length === 0) {
+      <p
+        class="rounded-lg border border-dashed border-neutral/30 px-4 py-6 text-center text-sm text-neutral"
+      >
+        {{ field().emptyText ?? 'Sin elementos.' }}
+      </p>
+    } @else {
+      <div class="overflow-x-auto rounded-xl border border-neutral/20 bg-surface">
+        <table class="w-full text-sm">
+          <thead>
+            <tr class="border-b border-neutral/20 text-left text-xs font-medium text-neutral">
+              <th class="w-10 px-3 py-2" scope="col"><span class="sr-only">Orden</span></th>
+              <th class="px-3 py-2" scope="col">Clave</th>
+              <th class="px-3 py-2" scope="col">Valor</th>
+              <th class="w-28 px-3 py-2" scope="col"><span class="sr-only">Acciones</span></th>
+            </tr>
+          </thead>
+          <tbody
+            cdkDropList
+            [cdkDropListData]="items()"
+            [cdkDropListDisabled]="!sortable()"
+            (cdkDropListDropped)="onDrop($event)"
+          >
+            @for (item of items(); track $index; let i = $index) {
+              <tr
+                class="border-b border-neutral/10 last:border-b-0"
+                cdkDrag
+                [cdkDragDisabled]="!sortable()"
+              >
+                <td class="px-3 py-2 align-middle">
+                  @if (sortable()) {
+                    <button
+                      type="button"
+                      app-button
+                      variant="ghost"
+                      size="icon"
+                      class="cursor-grab"
+                      cdkDragHandle
+                      [attr.aria-label]="'Reordenar fila ' + (i + 1)"
+                      title="Arrastrar para reordenar"
+                    >
+                      <svg lucideGripVertical size="16" />
+                    </button>
+                  }
+                </td>
+                <td class="px-3 py-2">
+                  <input
+                    class="field-input"
+                    type="text"
+                    placeholder="Clave"
+                    [attr.aria-label]="'Clave, fila ' + (i + 1)"
+                    [id]="idPrefix() + '-key-' + i"
+                    [formField]="fieldNode(i, 'key')"
+                  />
+                </td>
+                <td class="px-3 py-2">
+                  <input
+                    class="field-input"
+                    type="text"
+                    placeholder="Valor"
+                    [attr.aria-label]="'Valor, fila ' + (i + 1)"
+                    [id]="idPrefix() + '-value-' + i"
+                    [formField]="fieldNode(i, 'value')"
+                  />
+                </td>
+                <td class="px-3 py-2">
+                  <span class="flex items-center justify-end gap-2 lg:gap-1">
+                    <button
+                      type="button"
+                      app-button
+                      variant="ghost"
+                      size="icon"
+                      [disabled]="i === 0"
+                      [attr.aria-label]="'Subir fila ' + (i + 1)"
+                      (click)="move(i, -1)"
+                    >
+                      <svg lucideArrowUp size="16" />
+                    </button>
+                    <button
+                      type="button"
+                      app-button
+                      variant="ghost"
+                      size="icon"
+                      [disabled]="i === items().length - 1"
+                      [attr.aria-label]="'Bajar fila ' + (i + 1)"
+                      (click)="move(i, 1)"
+                    >
+                      <svg lucideArrowDown size="16" />
+                    </button>
+                    <button
+                      type="button"
+                      app-button
+                      variant="ghost"
+                      size="icon"
+                      [disabled]="!canRemove()"
+                      [attr.aria-label]="'Eliminar fila ' + (i + 1)"
+                      (click)="remove(i)"
+                    >
+                      <svg lucideTrash2 size="16" />
+                    </button>
+                  </span>
+                </td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    }
+
+    <div class="mt-3">
+      <button app-button variant="outline" type="button" [disabled]="!canAdd()" (click)="add()">
+        + {{ field().addLabel ?? 'Agregar especificación' }}
+      </button>
+    </div>
+  `,
+})
+export class FieldKeyValue {
+  readonly field = input.required<KeyValueField>();
+  readonly tree = input.required<RootTree>();
+
+  private readonly notifications = inject(NotificationService);
+
+  private readonly itemsNode = computed(() =>
+    listTree<KeyValueItem>(this.tree(), this.field().key),
+  );
+  private readonly state = computed(() => this.itemsNode()());
+  /** Prefijo estable del campo para los id de cada celda (§8). */
+  protected readonly idPrefix = computed(() => this.state().name());
+  protected readonly items = computed(() => this.state().value() ?? []);
+
+  protected readonly sortable = computed(() => this.field().sortable ?? true);
+
+  /** Nodo de `key`/`value` del ítem; se llama fresco en cada render (NG01904). */
+  protected fieldNode(
+    index: number,
+    column: 'key' | 'value',
+  ): ReturnType<typeof childTree<string>> {
+    return childTree<string>(itemTree(this.itemsNode(), index), column);
+  }
+
+  protected canAdd(): boolean {
+    const max = this.field().max;
+    return max === undefined || this.items().length < max;
+  }
+
+  protected canRemove(): boolean {
+    return this.items().length > (this.field().min ?? 0);
+  }
+
+  protected add(): void {
+    if (!this.canAdd()) {
+      return;
+    }
+    const positionKey = this.field().positionField;
+    const row: KeyValueItem & Record<string, unknown> = { key: '', value: '' };
+    if (positionKey !== undefined) {
+      row[positionKey] = appendPosition(this.positioned());
+    }
+    this.updateItems((next) => {
+      next.push(row);
+    });
+  }
+
+  protected move(index: number, direction: -1 | 1): void {
+    const target = index + direction;
+    if (target < 0 || target >= this.items().length) {
+      return;
+    }
+    this.applyMove(index, target);
+  }
+
+  protected onDrop(event: CdkDragDrop<KeyValueItem[]>): void {
+    if (event.previousIndex === event.currentIndex) {
+      return;
+    }
+    this.applyMove(event.previousIndex, event.currentIndex);
+  }
+
+  protected async remove(index: number): Promise<void> {
+    if (!this.canRemove()) {
+      return;
+    }
+    const row = this.items()[index];
+    if (row !== undefined && (row.key.trim() !== '' || row.value.trim() !== '')) {
+      const accepted = await this.notifications.confirm({
+        title: `Eliminar fila ${index + 1}`,
+        message: 'Esta acción no se puede deshacer.',
+        confirmLabel: 'Eliminar',
+        cancelLabel: 'Cancelar',
+      });
+      if (!accepted) {
+        return;
+      }
+    }
+    this.updateItems((next) => {
+      next.splice(index, 1);
+    });
+  }
+
+  /** Mueve y recalcula `position` (base.md §8): cambios antes del splice. */
+  private applyMove(from: number, to: number): void {
+    const positionKey = this.field().positionField;
+    this.updateItems((next) => {
+      if (positionKey !== undefined) {
+        const result = computeMove(this.positioned(), String(from), to);
+        for (const change of result.changes) {
+          const row = next[Number(change.key)] as
+            (KeyValueItem & Record<string, unknown>) | undefined;
+          if (row !== undefined) {
+            row[positionKey] = change.position;
+          }
+        }
+      }
+      moveItemInArray(next, from, to);
+    });
+  }
+
+  private positioned(): PositionedItem[] {
+    const positionKey = this.field().positionField;
+    return this.items().map((item, index) => {
+      const raw =
+        positionKey !== undefined
+          ? (item as unknown as Record<string, unknown>)[positionKey]
+          : undefined;
+      // Fallback: un registro viejo sin `position` se numera como rebalanceo.
+      return {
+        key: String(index),
+        position: typeof raw === 'number' ? raw : (index + 1) * GAP,
+      };
+    });
+  }
+
+  private updateItems(mutator: (next: KeyValueItem[]) => void): void {
+    this.state().controlValue.update((current) => {
+      const next = [...current];
+      mutator(next);
+      return next;
+    });
+  }
+}

package/src/lib/fields/list/list.descriptor.ts

@@ -0,0 +1,21 @@
+import type { RenderDescriptor } from '../../core/registry/render-registry';
+
+/** Descriptor del campo `list` (R3.3). */
+export const descriptor: RenderDescriptor = {
+  kind: 'field',
+  type: 'list',
+  since: '1.0',
+  load: () => import('./list').then((module) => module.FieldList),
+  seed: 'array',
+  surfaces: ['form', 'display'],
+  // Compuesto: además de su árbol dibuja el template de cada hijo y hereda
+  // el `exists` del nivel para no reactivar el borrado de filas (R3.6).
+  inputs: (config, extras) => ({
+    field: config,
+    tree: extras.ctx.tree,
+    childTemplate: extras.childTemplate,
+    serverErrors: extras.ctx.serverErrors,
+    pathPrefix: extras.ctx.pathPrefix,
+    exists: extras.ctx.exists,
+  }),
+};