pixelon 0.3.81 → 0.3.83

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

@@ -15,6 +15,7 @@ export interface ReactiveCrudProps {
 }
 export declare function matchesVisibleWhen(a: RowActionDef, row: Record<string, unknown>): boolean;
 export declare function matchesDisabledWhen(a: RowActionDef, row: Record<string, unknown>): boolean;
+export declare function disabledReasonFor(a: RowActionDef, row: Record<string, unknown>): string | undefined;
 export declare function matchesDoneWhen(a: RowActionDef, row: Record<string, unknown>): boolean;
 export declare function ReactiveCrud({ config, eventBus, autoOpenCreate, prefill, onCreated, onCreateClose, googleMapsApiKey: apiKeyProp }: ReactiveCrudProps): import("react/jsx-runtime").JSX.Element;
 export default ReactiveCrud;

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

@@ -1,6 +1,7 @@
 import type { SelectOption } from '../../../../../organisms/lumi/DynamicForm/types';
 import type { ChatEventBus } from '../../../../../../core/eventBus/chatEventBus';
 import type { CrudFieldOptionsEndpoint } from './types';
+export declare const OPTIONS_LOAD_ERROR = "No se pudieron cargar las opciones. Int\u00E9ntalo de nuevo.";
 export declare function unwrap(raw: unknown): unknown;
 export declare function resolveBody(body: Record<string, unknown> | undefined, ctx?: Record<string, unknown>): Record<string, unknown>;
 export declare function loadOptions(eventBus: ChatEventBus, ep: CrudFieldOptionsEndpoint, ctx?: Record<string, unknown>): Promise<SelectOption[]>;

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

@@ -84,6 +84,14 @@ export interface RowActionVisibleWhen {
     field: string;
     in: string[];
 }
+/** SPEC-113 — una condición que apaga la acción, con SU motivo.
+ *
+ * Un botón deshabilitado que no dice cuál de dos motivos lo apaga enseña a ignorarlo. Fundir dos
+ * situaciones opuestas —«falta el comprobante del cliente» y «todavía no has llegado»— en un
+ * «no puedes todavía» es la validación muda de SPEC-074 con otra cara. */
+export interface RowActionDisabledWhen extends RowActionVisibleWhen {
+    reason?: string;
+}
 export interface RowActionDef {
     key: string;
     label: string;
@@ -97,9 +105,13 @@ export interface RowActionDef {
      * aceptado el precio—, que con condiciones unidas por «y» no se pueden escribir. */
     hiddenWhen?: RowActionVisibleWhen | RowActionVisibleWhen[];
     /** SPEC-007: la acción se muestra pero queda DESHABILITADA cuando `String(row[field])` está en
-     * `in` (ej. "Iniciar" deshabilitado hasta que `has_inspection` sea true). */
-    disabledWhen?: RowActionVisibleWhen;
-    /** SPEC-007: tooltip cuando la acción está deshabilitada (ej. "Registra la inspección primero"). */
+     * `in` (ej. "Iniciar" deshabilitado hasta que `has_inspection` sea true).
+     *
+     * SPEC-113: admite VARIAS, cada una con su motivo. Se apaga con la primera que se cumple, y esa
+     * es la que habla. Una sola condición sigue valiendo igual que siempre. */
+    disabledWhen?: RowActionDisabledWhen | RowActionDisabledWhen[];
+    /** SPEC-007: tooltip cuando la acción está deshabilitada (ej. "Registra la inspección primero").
+     * SPEC-113: es el respaldo — una condición con `reason` propio manda sobre este. */
     disabledReason?: string;
     /** SPEC-007: muestra un ✓ al final cuando `String(row[field])` está en `in` (ej. inspección ya
      * registrada). Indicador de "hecho"; no bloquea reejecutar la acción. */

package/dist/index.esm.js

@@ -14111,6 +14111,7 @@ function getFormatter(key) {
   return key ? CRUD_FORMATTERS[key] : void 0;
 }
 
+const OPTIONS_LOAD_ERROR = "No se pudieron cargar las opciones. Int\xE9ntalo de nuevo.";
 function unwrap$3(raw) {
   if (raw && typeof raw === "object" && "response" in raw) {
     return raw.response;
@@ -14448,6 +14449,7 @@ function ActionFormDrawer({ action, row, idField, eventBus, onExecute, onClose }
   const fileFields = useMemo(() => formFields.filter((f) => f.moleculeType === "FILE"), [formFields]);
   const normalFields = useMemo(() => formFields.filter((f) => f.moleculeType !== "FILE"), [formFields]);
   const [optionsByField, setOptionsByField] = useState({});
+  const [optionsErrorByField, setOptionsErrorByField] = useState({});
   const [loadingOptions, setLoadingOptions] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [fileEntries, setFileEntries] = useState({});
@@ -14461,14 +14463,17 @@ function ActionFormDrawer({ action, row, idField, eventBus, onExecute, onClose }
       toLoad.map(async (f) => {
         try {
           const opts = await loadOptions(eventBus, f.optionsEndpoint, { ...row, id: row[idField] });
-          return [f.name, opts];
+          return [f.name, opts, null];
         } catch {
-          return [f.name, []];
+          return [f.name, [], OPTIONS_LOAD_ERROR];
         }
       })
     ).then((entries) => {
       if (!alive) return;
-      setOptionsByField(Object.fromEntries(entries));
+      setOptionsByField(Object.fromEntries(entries.map(([n, o]) => [n, o])));
+      setOptionsErrorByField(
+        Object.fromEntries(entries.filter(([, , e]) => e).map(([n, , e]) => [n, e]))
+      );
       setLoadingOptions(false);
     });
     return () => {
@@ -14482,9 +14487,12 @@ function ActionFormDrawer({ action, row, idField, eventBus, onExecute, onClose }
       moleculeType: CRUD_TO_FORM_MOLECULE[f.moleculeType] ?? "INPUT",
       required: f.required,
       placeholder: f.placeholder,
-      options: f.options ?? optionsByField[f.name]
+      options: f.options ?? optionsByField[f.name],
+      // SPEC-106 T8 — `uiProps` llega tal cual a la molécula, así que el desplegable dice lo
+      // que pasó de verdad en vez del «no hay» de siempre. Sin error, se queda el de siempre.
+      ...optionsErrorByField[f.name] ? { uiProps: { notFoundContent: optionsErrorByField[f.name] } } : {}
     })),
-    [normalFields, optionsByField]
+    [normalFields, optionsByField, optionsErrorByField]
   );
   const validationSchema = useMemo(() => buildCrudYupSchema(normalFields), [normalFields]);
   const uploadOne = async (f, file, idx) => {
@@ -15919,7 +15927,7 @@ function chatLinkFormatter(field, eventBus) {
     return createElement(ChatLinkCell, { targets, eventBus });
   };
 }
-function toRenderField(f, loaded, eventBus, mapsApiKey) {
+function toRenderField(f, loaded, eventBus, mapsApiKey, loadError) {
   const fmt = getFormatter(f.format);
   const options = f.options ?? loaded[f.name];
   if (f.moleculeType === "LOCATION") {
@@ -15964,7 +15972,9 @@ function toRenderField(f, loaded, eventBus, mapsApiKey) {
     columnWidth: f.columnWidth,
     fixed: f.fixed,
     align: f.align,
-    uiProps: options ? { options } : void 0,
+    // SPEC-106 T8 — con un fallo de carga, el desplegable dice que no se pudo preguntar en vez
+    // de «no hay opciones disponibles», que es una respuesta y no la tenemos.
+    uiProps: loadError ? { options: options ?? [], notFoundContent: loadError } : options ? { options } : void 0,
     formatValue
   };
 }
@@ -15975,9 +15985,20 @@ function matchesVisibleWhen(a, row) {
   if (!a.visibleWhen) return true;
   return cumplenTodas(a.visibleWhen, row);
 }
+function condicionesDeshabilitado(a) {
+  if (!a.disabledWhen) return [];
+  return Array.isArray(a.disabledWhen) ? a.disabledWhen : [a.disabledWhen];
+}
+function primeraQueApaga(a, row) {
+  return condicionesDeshabilitado(a).find((c) => c.in.includes(String(row[c.field])));
+}
 function matchesDisabledWhen(a, row) {
-  if (!a.disabledWhen) return false;
-  return a.disabledWhen.in.includes(String(row[a.disabledWhen.field]));
+  return primeraQueApaga(a, row) !== void 0;
+}
+function disabledReasonFor(a, row) {
+  const c = primeraQueApaga(a, row);
+  if (!c) return void 0;
+  return c.reason ?? a.disabledReason;
 }
 function matchesDoneWhen(a, row) {
   if (!a.doneWhen) return false;
@@ -16014,6 +16035,7 @@ function ReactiveCrud({ config, eventBus, autoOpenCreate, prefill, onCreated, on
   const [activeAction, setActiveAction] = useState(null);
   const [detailRow, setDetailRow] = useState(null);
   const [optionsByField, setOptionsByField] = useState({});
+  const [optionsErrorByField, setOptionsErrorByField] = useState({});
   useEffect(() => {
     let alive = true;
     const toLoad = config.fields.filter((f) => f.optionsEndpoint);
@@ -16021,21 +16043,25 @@ function ReactiveCrud({ config, eventBus, autoOpenCreate, prefill, onCreated, on
     void Promise.all(
       toLoad.map(async (f) => {
         try {
-          return [f.name, await loadOptions(eventBus, f.optionsEndpoint)];
+          return [f.name, await loadOptions(eventBus, f.optionsEndpoint), null];
         } catch {
-          return [f.name, []];
+          return [f.name, [], OPTIONS_LOAD_ERROR];
         }
       })
     ).then((entries) => {
-      if (alive) setOptionsByField(Object.fromEntries(entries));
+      if (!alive) return;
+      setOptionsByField(Object.fromEntries(entries.map(([n, o]) => [n, o])));
+      setOptionsErrorByField(
+        Object.fromEntries(entries.filter(([, , e]) => e).map(([n, , e]) => [n, e]))
+      );
     });
     return () => {
       alive = false;
     };
   }, [eventBus, config.fields]);
   const renderByFields = useMemo(
-    () => config.fields.map((f) => toRenderField(f, optionsByField, eventBus, googleMapsApiKey)),
-    [config.fields, optionsByField, eventBus]
+    () => config.fields.map((f) => toRenderField(f, optionsByField, eventBus, googleMapsApiKey, optionsErrorByField[f.name])),
+    [config.fields, optionsByField, optionsErrorByField, eventBus]
   );
   const validationSchema = useMemo(() => buildCrudYupSchema(config.fields), [config.fields]);
   const rowActions = useMemo(() => {
@@ -16047,7 +16073,8 @@ function ReactiveCrud({ config, eventBus, autoOpenCreate, prefill, onCreated, on
       // SPEC-090 T3 — el `disabledReason` de la config ya existía, pero solo lo pintaba el panel
       // del chat; en la tabla el botón se apagaba mudo. Afecta también al de la inspección
       // («Falta el comprobante de pago del cliente», SPEC-066 T7), que tampoco se veía aquí.
-      disabledReason: (row) => matchesDisabledWhen(a, row) ? a.disabledReason : void 0,
+      // SPEC-113 — el motivo sale de la condición que apagó el botón, no de la acción entera.
+      disabledReason: (row) => disabledReasonFor(a, row),
       onClick: (row) => a.form ? setActiveAction({ action: a, row }) : crud.runEndpoints(a.endpoints ?? [a.endpoint], { ...row, id: row[config.idField] })
     }));
     if (config.detail) {
@@ -16371,6 +16398,7 @@ function ServiceActionsPanel({ config, recordId, recordLabel, allowed, eventBus
       config.detail && /* @__PURE__ */ jsx("button", { type: "button", className: "px-chat-crud-item__action", onClick: () => setDetailRow(row), children: "Ver" }),
       actions.map((a) => {
         const disabled = matchesDisabledWhen(a, row);
+        const motivo = disabledReasonFor(a, row);
         const done = matchesDoneWhen(a, row);
         return /* @__PURE__ */ jsxs(
           "button",
@@ -16379,14 +16407,14 @@ function ServiceActionsPanel({ config, recordId, recordLabel, allowed, eventBus
             className: [
               "px-chat-crud-item__action",
               a.intent === "danger" ? "is-danger" : "",
-              disabled && a.disabledReason ? "is-con-motivo" : ""
+              disabled && motivo ? "is-con-motivo" : ""
             ].filter(Boolean).join(" "),
             disabled,
             onClick: () => a.form ? setActiveAction({ action: a, row }) : crud.runEndpoints(a.endpoints ?? [a.endpoint], { ...row, id: row[config.idField] }),
             children: [
               /* @__PURE__ */ jsxs("span", { className: "px-chat-crud-item__action-texts", children: [
                 /* @__PURE__ */ jsx("span", { children: a.label }),
-                disabled && a.disabledReason && /* @__PURE__ */ jsx("span", { className: "px-chat-crud-item__action-reason", children: a.disabledReason })
+                disabled && motivo && /* @__PURE__ */ jsx("span", { className: "px-chat-crud-item__action-reason", children: motivo })
               ] }),
               done && /* @__PURE__ */ jsx(Icon$1, { type: "check-circle", width: 18, height: 18, className: "px-chat-crud-item__done", "aria-label": "Hecho" })
             ]

package/dist/index.js

@@ -14132,6 +14132,7 @@ function getFormatter(key) {
   return key ? CRUD_FORMATTERS[key] : void 0;
 }
 
+const OPTIONS_LOAD_ERROR = "No se pudieron cargar las opciones. Int\xE9ntalo de nuevo.";
 function unwrap$3(raw) {
   if (raw && typeof raw === "object" && "response" in raw) {
     return raw.response;
@@ -14469,6 +14470,7 @@ function ActionFormDrawer({ action, row, idField, eventBus, onExecute, onClose }
   const fileFields = React.useMemo(() => formFields.filter((f) => f.moleculeType === "FILE"), [formFields]);
   const normalFields = React.useMemo(() => formFields.filter((f) => f.moleculeType !== "FILE"), [formFields]);
   const [optionsByField, setOptionsByField] = React.useState({});
+  const [optionsErrorByField, setOptionsErrorByField] = React.useState({});
   const [loadingOptions, setLoadingOptions] = React.useState(false);
   const [submitting, setSubmitting] = React.useState(false);
   const [fileEntries, setFileEntries] = React.useState({});
@@ -14482,14 +14484,17 @@ function ActionFormDrawer({ action, row, idField, eventBus, onExecute, onClose }
       toLoad.map(async (f) => {
         try {
           const opts = await loadOptions(eventBus, f.optionsEndpoint, { ...row, id: row[idField] });
-          return [f.name, opts];
+          return [f.name, opts, null];
         } catch {
-          return [f.name, []];
+          return [f.name, [], OPTIONS_LOAD_ERROR];
         }
       })
     ).then((entries) => {
       if (!alive) return;
-      setOptionsByField(Object.fromEntries(entries));
+      setOptionsByField(Object.fromEntries(entries.map(([n, o]) => [n, o])));
+      setOptionsErrorByField(
+        Object.fromEntries(entries.filter(([, , e]) => e).map(([n, , e]) => [n, e]))
+      );
       setLoadingOptions(false);
     });
     return () => {
@@ -14503,9 +14508,12 @@ function ActionFormDrawer({ action, row, idField, eventBus, onExecute, onClose }
       moleculeType: CRUD_TO_FORM_MOLECULE[f.moleculeType] ?? "INPUT",
       required: f.required,
       placeholder: f.placeholder,
-      options: f.options ?? optionsByField[f.name]
+      options: f.options ?? optionsByField[f.name],
+      // SPEC-106 T8 — `uiProps` llega tal cual a la molécula, así que el desplegable dice lo
+      // que pasó de verdad en vez del «no hay» de siempre. Sin error, se queda el de siempre.
+      ...optionsErrorByField[f.name] ? { uiProps: { notFoundContent: optionsErrorByField[f.name] } } : {}
     })),
-    [normalFields, optionsByField]
+    [normalFields, optionsByField, optionsErrorByField]
   );
   const validationSchema = React.useMemo(() => buildCrudYupSchema(normalFields), [normalFields]);
   const uploadOne = async (f, file, idx) => {
@@ -15940,7 +15948,7 @@ function chatLinkFormatter(field, eventBus) {
     return React.createElement(ChatLinkCell, { targets, eventBus });
   };
 }
-function toRenderField(f, loaded, eventBus, mapsApiKey) {
+function toRenderField(f, loaded, eventBus, mapsApiKey, loadError) {
   const fmt = getFormatter(f.format);
   const options = f.options ?? loaded[f.name];
   if (f.moleculeType === "LOCATION") {
@@ -15985,7 +15993,9 @@ function toRenderField(f, loaded, eventBus, mapsApiKey) {
     columnWidth: f.columnWidth,
     fixed: f.fixed,
     align: f.align,
-    uiProps: options ? { options } : void 0,
+    // SPEC-106 T8 — con un fallo de carga, el desplegable dice que no se pudo preguntar en vez
+    // de «no hay opciones disponibles», que es una respuesta y no la tenemos.
+    uiProps: loadError ? { options: options ?? [], notFoundContent: loadError } : options ? { options } : void 0,
     formatValue
   };
 }
@@ -15996,9 +16006,20 @@ function matchesVisibleWhen(a, row) {
   if (!a.visibleWhen) return true;
   return cumplenTodas(a.visibleWhen, row);
 }
+function condicionesDeshabilitado(a) {
+  if (!a.disabledWhen) return [];
+  return Array.isArray(a.disabledWhen) ? a.disabledWhen : [a.disabledWhen];
+}
+function primeraQueApaga(a, row) {
+  return condicionesDeshabilitado(a).find((c) => c.in.includes(String(row[c.field])));
+}
 function matchesDisabledWhen(a, row) {
-  if (!a.disabledWhen) return false;
-  return a.disabledWhen.in.includes(String(row[a.disabledWhen.field]));
+  return primeraQueApaga(a, row) !== void 0;
+}
+function disabledReasonFor(a, row) {
+  const c = primeraQueApaga(a, row);
+  if (!c) return void 0;
+  return c.reason ?? a.disabledReason;
 }
 function matchesDoneWhen(a, row) {
   if (!a.doneWhen) return false;
@@ -16035,6 +16056,7 @@ function ReactiveCrud({ config, eventBus, autoOpenCreate, prefill, onCreated, on
   const [activeAction, setActiveAction] = React.useState(null);
   const [detailRow, setDetailRow] = React.useState(null);
   const [optionsByField, setOptionsByField] = React.useState({});
+  const [optionsErrorByField, setOptionsErrorByField] = React.useState({});
   React.useEffect(() => {
     let alive = true;
     const toLoad = config.fields.filter((f) => f.optionsEndpoint);
@@ -16042,21 +16064,25 @@ function ReactiveCrud({ config, eventBus, autoOpenCreate, prefill, onCreated, on
     void Promise.all(
       toLoad.map(async (f) => {
         try {
-          return [f.name, await loadOptions(eventBus, f.optionsEndpoint)];
+          return [f.name, await loadOptions(eventBus, f.optionsEndpoint), null];
         } catch {
-          return [f.name, []];
+          return [f.name, [], OPTIONS_LOAD_ERROR];
         }
       })
     ).then((entries) => {
-      if (alive) setOptionsByField(Object.fromEntries(entries));
+      if (!alive) return;
+      setOptionsByField(Object.fromEntries(entries.map(([n, o]) => [n, o])));
+      setOptionsErrorByField(
+        Object.fromEntries(entries.filter(([, , e]) => e).map(([n, , e]) => [n, e]))
+      );
     });
     return () => {
       alive = false;
     };
   }, [eventBus, config.fields]);
   const renderByFields = React.useMemo(
-    () => config.fields.map((f) => toRenderField(f, optionsByField, eventBus, googleMapsApiKey)),
-    [config.fields, optionsByField, eventBus]
+    () => config.fields.map((f) => toRenderField(f, optionsByField, eventBus, googleMapsApiKey, optionsErrorByField[f.name])),
+    [config.fields, optionsByField, optionsErrorByField, eventBus]
   );
   const validationSchema = React.useMemo(() => buildCrudYupSchema(config.fields), [config.fields]);
   const rowActions = React.useMemo(() => {
@@ -16068,7 +16094,8 @@ function ReactiveCrud({ config, eventBus, autoOpenCreate, prefill, onCreated, on
       // SPEC-090 T3 — el `disabledReason` de la config ya existía, pero solo lo pintaba el panel
       // del chat; en la tabla el botón se apagaba mudo. Afecta también al de la inspección
       // («Falta el comprobante de pago del cliente», SPEC-066 T7), que tampoco se veía aquí.
-      disabledReason: (row) => matchesDisabledWhen(a, row) ? a.disabledReason : void 0,
+      // SPEC-113 — el motivo sale de la condición que apagó el botón, no de la acción entera.
+      disabledReason: (row) => disabledReasonFor(a, row),
       onClick: (row) => a.form ? setActiveAction({ action: a, row }) : crud.runEndpoints(a.endpoints ?? [a.endpoint], { ...row, id: row[config.idField] })
     }));
     if (config.detail) {
@@ -16392,6 +16419,7 @@ function ServiceActionsPanel({ config, recordId, recordLabel, allowed, eventBus
       config.detail && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "px-chat-crud-item__action", onClick: () => setDetailRow(row), children: "Ver" }),
       actions.map((a) => {
         const disabled = matchesDisabledWhen(a, row);
+        const motivo = disabledReasonFor(a, row);
         const done = matchesDoneWhen(a, row);
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
@@ -16400,14 +16428,14 @@ function ServiceActionsPanel({ config, recordId, recordLabel, allowed, eventBus
             className: [
               "px-chat-crud-item__action",
               a.intent === "danger" ? "is-danger" : "",
-              disabled && a.disabledReason ? "is-con-motivo" : ""
+              disabled && motivo ? "is-con-motivo" : ""
             ].filter(Boolean).join(" "),
             disabled,
             onClick: () => a.form ? setActiveAction({ action: a, row }) : crud.runEndpoints(a.endpoints ?? [a.endpoint], { ...row, id: row[config.idField] }),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-chat-crud-item__action-texts", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: a.label }),
-                disabled && a.disabledReason && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-crud-item__action-reason", children: a.disabledReason })
+                disabled && motivo && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-crud-item__action-reason", children: motivo })
               ] }),
               done && /* @__PURE__ */ jsxRuntime.jsx(Icon$1, { type: "check-circle", width: 18, height: 18, className: "px-chat-crud-item__done", "aria-label": "Hecho" })
             ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelon",
-  "version": "0.3.81",
+  "version": "0.3.83",
   "description": "Design system de la marca goluti",
   "type": "module",
   "main": "dist/index.js",