pixelon 0.5.1 → 0.5.3

package/dist/components/molecules/chat/StructuredContent/components/ReactiveCrud/ContextoDeLaAccion.d.ts

@@ -0,0 +1,8 @@
+import type { ChatEventBus } from '../../../../../../core/eventBus/chatEventBus';
+import type { RowActionContexto } from './types';
+export interface ContextoDeLaAccionProps {
+    contexto: RowActionContexto;
+    row: Record<string, unknown>;
+    eventBus?: ChatEventBus;
+}
+export declare function ContextoDeLaAccion({ contexto, row, eventBus }: ContextoDeLaAccionProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/molecules/chat/StructuredContent/components/ReactiveCrud/types.d.ts

@@ -48,6 +48,15 @@ export interface ReactiveCrudField {
     showInModes?: Array<'create' | 'edit' | 'view'>;
     required?: boolean;
     placeholder?: string;
+    /** SPEC-137 — con qué nace el campo cuando el formulario se abre desde una fila.
+     *
+     *  Acepta un literal o un `$campo`, que se resuelve contra la fila igual que en `payloadMap`.
+     *  Es para cuando el sistema YA SABE la respuesta y preguntarla otra vez es hacer teclear lo que
+     *  está en pantalla: el motivo de un rechazo que el propio sistema acaba de explicar, por
+     *  ejemplo. Mismo principio que SPEC-095 — el botón ya lo dijo.
+     *
+     *  Sigue siendo editable: es un punto de partida, no una respuesta impuesta. */
+    defaultValue?: string;
     options?: Array<{
         value: string;
         label: string;
@@ -140,10 +149,37 @@ export interface RowActionDef {
     /** SPEC-002: varias llamadas en orden (ej. inspección = register-inspection foto + video). Si
      * se define, tiene prioridad sobre `endpoint`; todos comparten el mismo contexto del form. */
     endpoints?: EndpointRef[];
-    /** Sub-form declarativo para acciones con input (asignar→grúa, completar→precio). SPEC-001 T2. */
+    /** Sub-form declarativo para acciones con input (asignar→grúa, completar→precio). SPEC-001 T2.
+     *
+     * SPEC-132 T5 — `contexto` es lo que se está decidiendo, en solo lectura y arriba del todo.
+     * Nació del drawer de «Confirmar pago»: pedía el medio y la referencia sin enseñar **ni el
+     * importe ni el comprobante** que el cliente acababa de subir. Para ver lo que estaba dando por
+     * bueno, la operadora tenía que cancelar, pulsar «Ver», mirar y volver a empezar. Confirmar un
+     * ingreso de dinero sin el dinero delante es firmar a ciegas. */
     form?: {
         fields: ReactiveCrudField[];
         payloadMap?: Record<string, string>;
+        contexto?: RowActionContexto;
+    };
+}
+/** SPEC-132 T5 — lo que hay que tener delante para decidir. */
+export interface RowActionContexto {
+    /** Campos de la FILA (no del formulario) que se enseñan como pares etiqueta/valor. */
+    campos?: Array<{
+        field: string;
+        label: string;
+        moleculeType?: string;
+    }>;
+    /** El archivo que se está dando por bueno: se resuelve su URL y se enseña. */
+    adjunto?: {
+        /** Campo de la fila con el id del documento. */
+        idField: string;
+        label?: string;
+        /** Endpoint que traduce ese id a una URL mirable. Igual que en la vista de detalle. */
+        media: {
+            service: string;
+            urlPath: string;
+        };
     };
 }
 /** Vista de detalle ("Ver"): campos read-only + galería de archivos (fotos/videos/docs). */

package/dist/index.esm.js

@@ -13359,7 +13359,7 @@ function etiquetaDeOpcion(valor, uiProps) {
 function esNumerico(moleculeType) {
   return moleculeType === "INPUT_CURRENCY" || moleculeType === "INPUT_NUMBER";
 }
-function aTexto(valor, uiProps, moleculeType) {
+function aTexto$1(valor, uiProps, moleculeType) {
   if (valor == null || valor === "") return "";
   if (typeof valor === "boolean") return valor ? "S\xED" : "No";
   if (esNumerico(moleculeType)) {
@@ -13368,7 +13368,7 @@ function aTexto(valor, uiProps, moleculeType) {
   }
   if (typeof File !== "undefined" && valor instanceof File) return valor.name;
   if (Array.isArray(valor)) {
-    const partes = valor.map((v) => aTexto(v, uiProps, moleculeType)).filter(Boolean);
+    const partes = valor.map((v) => aTexto$1(v, uiProps, moleculeType)).filter(Boolean);
     return partes.join(", ");
   }
   if (typeof valor === "object") {
@@ -13384,7 +13384,7 @@ function resumenParaConfirmar(campos, datos) {
   if (!datos) return [];
   const lineas = [];
   for (const campo of campos) {
-    const valor = aTexto(datos[campo.name], campo.uiProps, campo.moleculeType);
+    const valor = aTexto$1(datos[campo.name], campo.uiProps, campo.moleculeType);
     if (!valor) continue;
     lineas.push({ label: campo.label ?? campo.name, valor });
   }
@@ -14156,7 +14156,7 @@ function getFormatter(key) {
 }
 
 const OPTIONS_LOAD_ERROR = "No se pudieron cargar las opciones. Int\xE9ntalo de nuevo.";
-function unwrap$4(raw) {
+function unwrap$5(raw) {
   if (raw && typeof raw === "object" && "response" in raw) {
     return raw.response;
   }
@@ -14177,7 +14177,7 @@ function resolveBody(body, ctx) {
 }
 async function loadOptions(eventBus, ep, ctx) {
   const raw = await fetchViaEventBus(eventBus, ep.service, ep.url, ep.method, resolveBody(ep.body, ctx));
-  let data = unwrap$4(raw);
+  let data = unwrap$5(raw);
   if (ep.response_path && data && typeof data === "object" && !Array.isArray(data)) {
     data = data[ep.response_path];
   }
@@ -14215,7 +14215,7 @@ const mensajeDeError = (e, respaldo) => {
 };
 
 const REFRESH_INTERVAL_MS = 2e4;
-function unwrap$3(raw) {
+function unwrap$4(raw) {
   if (raw && typeof raw === "object" && "response" in raw) {
     return raw.response;
   }
@@ -14264,7 +14264,7 @@ function useReactiveCrud(config, eventBus) {
         filters
       });
       assertOk(raw);
-      const data = unwrap$3(raw);
+      const data = unwrap$4(raw);
       let rows = [];
       let total = 0;
       if (Array.isArray(data)) {
@@ -14468,6 +14468,72 @@ const FileField = ({
   ] });
 };
 
+function unwrap$3(raw) {
+  if (raw && typeof raw === "object" && "response" in raw) {
+    return raw.response;
+  }
+  return raw;
+}
+function aTexto(valor, locale, moleculeType) {
+  if (valor == null || valor === "") return "";
+  if (moleculeType === "INPUT_CURRENCY" || moleculeType === "INPUT_NUMBER") {
+    const n = Number(valor);
+    if (!Number.isNaN(n)) return n.toLocaleString(locale || "es-CO");
+  }
+  if (typeof valor === "object") {
+    const o = valor;
+    for (const clave of ["label", "address", "name", "text", "value"]) {
+      if (typeof o[clave] === "string" && o[clave]) return o[clave];
+    }
+    return "";
+  }
+  return String(valor);
+}
+function ContextoDeLaAccion({ contexto, row, eventBus }) {
+  const { locale } = useChatConfig();
+  const [urlAdjunto, setUrlAdjunto] = useState("");
+  const [estadoAdjunto, setEstadoAdjunto] = useState("idle");
+  const adjunto = contexto.adjunto;
+  const idAdjunto = adjunto ? String(row[adjunto.idField] ?? "") : "";
+  useEffect(() => {
+    if (!adjunto || !idAdjunto || !eventBus) return;
+    let vivo = true;
+    setEstadoAdjunto("cargando");
+    void (async () => {
+      try {
+        const crudo = unwrap$3(
+          await fetchViaEventBus(eventBus, adjunto.media.service, adjunto.media.urlPath.replace("{id}", idAdjunto), "GET")
+        );
+        const url = typeof crudo === "string" ? crudo : String(crudo?.url ?? "");
+        if (!vivo) return;
+        setUrlAdjunto(url);
+        setEstadoAdjunto(url ? "idle" : "error");
+      } catch {
+        if (vivo) setEstadoAdjunto("error");
+      }
+    })();
+    return () => {
+      vivo = false;
+    };
+  }, [adjunto, idAdjunto, eventBus]);
+  const lineas = (contexto.campos ?? []).map((c) => ({ label: c.label, valor: aTexto(row[c.field], locale, c.moleculeType) })).filter((l) => l.valor);
+  if (lineas.length === 0 && !adjunto) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "px-chat-reactive-crud__contexto", children: [
+    lineas.length > 0 && /* @__PURE__ */ jsx("dl", { className: "px-chat-reactive-crud__contexto-datos", children: lineas.map((l) => /* @__PURE__ */ jsxs("div", { className: "px-chat-reactive-crud__contexto-linea", children: [
+      /* @__PURE__ */ jsx("dt", { children: l.label }),
+      /* @__PURE__ */ jsx("dd", { children: l.valor })
+    ] }, l.label)) }),
+    adjunto && /* @__PURE__ */ jsxs("div", { className: "px-chat-reactive-crud__contexto-adjunto", children: [
+      adjunto.label && /* @__PURE__ */ jsx("span", { className: "px-chat-reactive-crud__contexto-adjunto-label", children: adjunto.label }),
+      estadoAdjunto === "cargando" && /* @__PURE__ */ jsx("span", { className: "px-chat-reactive-crud__contexto-nota", children: "Cargando\u2026" }),
+      estadoAdjunto === "error" && /* @__PURE__ */ jsx("span", { role: "alert", className: "px-chat-reactive-crud__contexto-nota", children: "No se pudo cargar el archivo. M\xEDralo en \xABVer\xBB antes de confirmar." }),
+      urlAdjunto && estadoAdjunto === "idle" && // Se abre aparte porque el comprobante de una transferencia puede ser un PDF o una
+      // captura larga, y aquí solo cabe un vistazo.
+      /* @__PURE__ */ jsx("a", { href: urlAdjunto, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx("img", { src: urlAdjunto, alt: adjunto.label ?? "Archivo adjunto", className: "px-chat-reactive-crud__contexto-imagen" }) })
+    ] })
+  ] });
+}
+
 const RESPALDO = { miles: ".", decimal: "," };
 function separadoresDelLocale(locale) {
   if (!locale) return RESPALDO;
@@ -14540,6 +14606,14 @@ function ActionFormDrawer({ action, row, idField, eventBus, onExecute, onClose }
   }, [eventBus, action.key, normalFields]);
   const { locale } = useChatConfig();
   const separadores = useMemo(() => separadoresDelLocale(locale), [locale]);
+  const defaultValues = useMemo(() => {
+    const out = {};
+    for (const f of normalFields) {
+      if (f.defaultValue === void 0) continue;
+      out[f.name] = typeof f.defaultValue === "string" && f.defaultValue.startsWith("$") ? row[f.defaultValue.slice(1)] : f.defaultValue;
+    }
+    return out;
+  }, [normalFields, row]);
   const fields = useMemo(
     () => normalFields.map((f) => ({
       name: f.name,
@@ -14623,6 +14697,7 @@ function ActionFormDrawer({ action, row, idField, eventBus, onExecute, onClose }
   };
   const uploading = Object.values(fileEntries).some((list) => list.some((e) => e.status === "uploading"));
   return /* @__PURE__ */ jsx(Drawer$1, { isOpen: true, onClose, title: action.label, placement: "right", children: loadingOptions ? /* @__PURE__ */ jsx("div", { className: "px-chat-reactive-crud__action-loading", children: "Cargando\u2026" }) : /* @__PURE__ */ jsxs("div", { className: "px-chat-reactive-crud__action-form", children: [
+    action.form?.contexto && /* @__PURE__ */ jsx(ContextoDeLaAccion, { contexto: action.form.contexto, row, eventBus }),
     fileFields.map((f) => /* @__PURE__ */ jsx(
       FileField,
       {
@@ -14642,6 +14717,7 @@ function ActionFormDrawer({ action, row, idField, eventBus, onExecute, onClose }
       DynamicForm,
       {
         fields,
+        defaultValues,
         validationSchema,
         onSubmit: (values) => void runSubmit(values),
         onCancel: onClose,

package/dist/index.js

@@ -13380,7 +13380,7 @@ function etiquetaDeOpcion(valor, uiProps) {
 function esNumerico(moleculeType) {
   return moleculeType === "INPUT_CURRENCY" || moleculeType === "INPUT_NUMBER";
 }
-function aTexto(valor, uiProps, moleculeType) {
+function aTexto$1(valor, uiProps, moleculeType) {
   if (valor == null || valor === "") return "";
   if (typeof valor === "boolean") return valor ? "S\xED" : "No";
   if (esNumerico(moleculeType)) {
@@ -13389,7 +13389,7 @@ function aTexto(valor, uiProps, moleculeType) {
   }
   if (typeof File !== "undefined" && valor instanceof File) return valor.name;
   if (Array.isArray(valor)) {
-    const partes = valor.map((v) => aTexto(v, uiProps, moleculeType)).filter(Boolean);
+    const partes = valor.map((v) => aTexto$1(v, uiProps, moleculeType)).filter(Boolean);
     return partes.join(", ");
   }
   if (typeof valor === "object") {
@@ -13405,7 +13405,7 @@ function resumenParaConfirmar(campos, datos) {
   if (!datos) return [];
   const lineas = [];
   for (const campo of campos) {
-    const valor = aTexto(datos[campo.name], campo.uiProps, campo.moleculeType);
+    const valor = aTexto$1(datos[campo.name], campo.uiProps, campo.moleculeType);
     if (!valor) continue;
     lineas.push({ label: campo.label ?? campo.name, valor });
   }
@@ -14177,7 +14177,7 @@ function getFormatter(key) {
 }
 
 const OPTIONS_LOAD_ERROR = "No se pudieron cargar las opciones. Int\xE9ntalo de nuevo.";
-function unwrap$4(raw) {
+function unwrap$5(raw) {
   if (raw && typeof raw === "object" && "response" in raw) {
     return raw.response;
   }
@@ -14198,7 +14198,7 @@ function resolveBody(body, ctx) {
 }
 async function loadOptions(eventBus, ep, ctx) {
   const raw = await fetchViaEventBus(eventBus, ep.service, ep.url, ep.method, resolveBody(ep.body, ctx));
-  let data = unwrap$4(raw);
+  let data = unwrap$5(raw);
   if (ep.response_path && data && typeof data === "object" && !Array.isArray(data)) {
     data = data[ep.response_path];
   }
@@ -14236,7 +14236,7 @@ const mensajeDeError = (e, respaldo) => {
 };
 
 const REFRESH_INTERVAL_MS = 2e4;
-function unwrap$3(raw) {
+function unwrap$4(raw) {
   if (raw && typeof raw === "object" && "response" in raw) {
     return raw.response;
   }
@@ -14285,7 +14285,7 @@ function useReactiveCrud(config, eventBus) {
         filters
       });
       assertOk(raw);
-      const data = unwrap$3(raw);
+      const data = unwrap$4(raw);
       let rows = [];
       let total = 0;
       if (Array.isArray(data)) {
@@ -14489,6 +14489,72 @@ const FileField = ({
   ] });
 };
 
+function unwrap$3(raw) {
+  if (raw && typeof raw === "object" && "response" in raw) {
+    return raw.response;
+  }
+  return raw;
+}
+function aTexto(valor, locale, moleculeType) {
+  if (valor == null || valor === "") return "";
+  if (moleculeType === "INPUT_CURRENCY" || moleculeType === "INPUT_NUMBER") {
+    const n = Number(valor);
+    if (!Number.isNaN(n)) return n.toLocaleString(locale || "es-CO");
+  }
+  if (typeof valor === "object") {
+    const o = valor;
+    for (const clave of ["label", "address", "name", "text", "value"]) {
+      if (typeof o[clave] === "string" && o[clave]) return o[clave];
+    }
+    return "";
+  }
+  return String(valor);
+}
+function ContextoDeLaAccion({ contexto, row, eventBus }) {
+  const { locale } = useChatConfig();
+  const [urlAdjunto, setUrlAdjunto] = React.useState("");
+  const [estadoAdjunto, setEstadoAdjunto] = React.useState("idle");
+  const adjunto = contexto.adjunto;
+  const idAdjunto = adjunto ? String(row[adjunto.idField] ?? "") : "";
+  React.useEffect(() => {
+    if (!adjunto || !idAdjunto || !eventBus) return;
+    let vivo = true;
+    setEstadoAdjunto("cargando");
+    void (async () => {
+      try {
+        const crudo = unwrap$3(
+          await fetchViaEventBus(eventBus, adjunto.media.service, adjunto.media.urlPath.replace("{id}", idAdjunto), "GET")
+        );
+        const url = typeof crudo === "string" ? crudo : String(crudo?.url ?? "");
+        if (!vivo) return;
+        setUrlAdjunto(url);
+        setEstadoAdjunto(url ? "idle" : "error");
+      } catch {
+        if (vivo) setEstadoAdjunto("error");
+      }
+    })();
+    return () => {
+      vivo = false;
+    };
+  }, [adjunto, idAdjunto, eventBus]);
+  const lineas = (contexto.campos ?? []).map((c) => ({ label: c.label, valor: aTexto(row[c.field], locale, c.moleculeType) })).filter((l) => l.valor);
+  if (lineas.length === 0 && !adjunto) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-reactive-crud__contexto", children: [
+    lineas.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "px-chat-reactive-crud__contexto-datos", children: lineas.map((l) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-reactive-crud__contexto-linea", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("dt", { children: l.label }),
+      /* @__PURE__ */ jsxRuntime.jsx("dd", { children: l.valor })
+    ] }, l.label)) }),
+    adjunto && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-reactive-crud__contexto-adjunto", children: [
+      adjunto.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-reactive-crud__contexto-adjunto-label", children: adjunto.label }),
+      estadoAdjunto === "cargando" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-reactive-crud__contexto-nota", children: "Cargando\u2026" }),
+      estadoAdjunto === "error" && /* @__PURE__ */ jsxRuntime.jsx("span", { role: "alert", className: "px-chat-reactive-crud__contexto-nota", children: "No se pudo cargar el archivo. M\xEDralo en \xABVer\xBB antes de confirmar." }),
+      urlAdjunto && estadoAdjunto === "idle" && // Se abre aparte porque el comprobante de una transferencia puede ser un PDF o una
+      // captura larga, y aquí solo cabe un vistazo.
+      /* @__PURE__ */ jsxRuntime.jsx("a", { href: urlAdjunto, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: urlAdjunto, alt: adjunto.label ?? "Archivo adjunto", className: "px-chat-reactive-crud__contexto-imagen" }) })
+    ] })
+  ] });
+}
+
 const RESPALDO = { miles: ".", decimal: "," };
 function separadoresDelLocale(locale) {
   if (!locale) return RESPALDO;
@@ -14561,6 +14627,14 @@ function ActionFormDrawer({ action, row, idField, eventBus, onExecute, onClose }
   }, [eventBus, action.key, normalFields]);
   const { locale } = useChatConfig();
   const separadores = React.useMemo(() => separadoresDelLocale(locale), [locale]);
+  const defaultValues = React.useMemo(() => {
+    const out = {};
+    for (const f of normalFields) {
+      if (f.defaultValue === void 0) continue;
+      out[f.name] = typeof f.defaultValue === "string" && f.defaultValue.startsWith("$") ? row[f.defaultValue.slice(1)] : f.defaultValue;
+    }
+    return out;
+  }, [normalFields, row]);
   const fields = React.useMemo(
     () => normalFields.map((f) => ({
       name: f.name,
@@ -14644,6 +14718,7 @@ function ActionFormDrawer({ action, row, idField, eventBus, onExecute, onClose }
   };
   const uploading = Object.values(fileEntries).some((list) => list.some((e) => e.status === "uploading"));
   return /* @__PURE__ */ jsxRuntime.jsx(Drawer$1, { isOpen: true, onClose, title: action.label, placement: "right", children: loadingOptions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-reactive-crud__action-loading", children: "Cargando\u2026" }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-reactive-crud__action-form", children: [
+    action.form?.contexto && /* @__PURE__ */ jsxRuntime.jsx(ContextoDeLaAccion, { contexto: action.form.contexto, row, eventBus }),
     fileFields.map((f) => /* @__PURE__ */ jsxRuntime.jsx(
       FileField,
       {
@@ -14663,6 +14738,7 @@ function ActionFormDrawer({ action, row, idField, eventBus, onExecute, onClose }
       DynamicForm,
       {
         fields,
+        defaultValues,
         validationSchema,
         onSubmit: (values) => void runSubmit(values),
         onCancel: onClose,