frontend-plus-react 0.1.11 → 0.1.13

package/dist/index.d.ts

@@ -38,25 +38,13 @@ interface AppProps {
 }
 declare const App: ({ myRoutes, myWScreens, myClientSides, myResultsOk }: AppProps) => react_jsx_runtime.JSX.Element;
 
-interface GenericDataGridProps$1 {
-}
-interface FixedField {
-    fieldName: string;
-    value: any;
-    until?: any;
-}
 interface CellFeedback {
     rowId: string;
     columnKey: string;
     type: 'success' | 'error';
-    message?: 'string';
-}
-interface ConfirmDialogProps {
-    open: boolean;
-    onClose: (confirm: boolean) => void;
-    title: string;
-    message: string;
+    message?: string;
 }
+type CellFeedbackMap = Map<string, CellFeedback>;
 interface InputRendererProps<R extends Record<string, any>, S> {
     column: Column<R, S>;
     row: R;
@@ -64,14 +52,27 @@ interface InputRendererProps<R extends Record<string, any>, S> {
     onRowChange: (row: R, commitChanges?: boolean) => void;
     onClose: (commitChanges?: boolean, shouldFocusCell?: boolean) => void;
     tableDefinition: TableDefinition;
-    cellFeedback: CellFeedback | null;
-    setCellFeedback: (feedback: CellFeedback | null) => void;
+    cellFeedbackMap: CellFeedbackMap;
+    setCellFeedbackMap: React.Dispatch<React.SetStateAction<CellFeedbackMap>>;
     onKeyPress?: (rowIndex: number, columnKey: string, event: React.KeyboardEvent, handleCommit: (currentValue: any, closeEditor: boolean, focusNextCell: boolean) => Promise<void>) => void;
     setTableData: React.Dispatch<React.SetStateAction<any[]>>;
     setLocalCellChanges: React.Dispatch<React.SetStateAction<Map<string, Set<string>>>>;
     localCellChanges: Map<string, Set<string>>;
     primaryKey: string[];
 }
+interface GenericDataGridProps$1 {
+}
+interface FixedField {
+    fieldName: string;
+    value: any;
+    until?: any;
+}
+interface ConfirmDialogProps {
+    open: boolean;
+    onClose: (confirm: boolean) => void;
+    title: string;
+    message: string;
+}
 interface FilterRendererProps<R extends Record<string, any>, S> {
     column: Column<R, S>;
     filters: Record<string, string>;
@@ -197,4 +198,4 @@ declare const useLogout: () => () => Promise<void>;
 
 declare const cambiarGuionesBajosPorEspacios: (texto: string) => string;
 
-export { App, type AppContextType, type AppProps, AppProvider, type AppProviderProps, type CellFeedback, type ClientContextState, ConfirmDialog, type ConfirmDialogProps, type CustomCellProps, type CustomHeaderCellProps, type FetchApiOptions, type FilterRendererProps, type FixedField, FrontendPlusReactRoutes, GenericDataGrid, type GenericDataGridForDetailProps, type GenericDataGridProps$1 as GenericDataGridProps, type InputRendererProps, MainLayout, type MenuListItemProps, type MenuUiState, type PrivateRouteProps, type RouterState, type SideMenuProps, type SnackbarContextType, SnackbarProvider, type SnackbarProviderProps, type SnackbarState, type UseApiCallResult, cambiarGuionesBajosPorEspacios, clientSides, extendClientSides, resultsOk as resultComponents, useApiCall, useApp, useLogout, useSnackbar, wScreens };
+export { App, type AppContextType, type AppProps, AppProvider, type AppProviderProps, type CellFeedback, type CellFeedbackMap, type ClientContextState, ConfirmDialog, type ConfirmDialogProps, type CustomCellProps, type CustomHeaderCellProps, type FetchApiOptions, type FilterRendererProps, type FixedField, FrontendPlusReactRoutes, GenericDataGrid, type GenericDataGridForDetailProps, type GenericDataGridProps$1 as GenericDataGridProps, type InputRendererProps, MainLayout, type MenuListItemProps, type MenuUiState, type PrivateRouteProps, type RouterState, type SideMenuProps, type SnackbarContextType, SnackbarProvider, type SnackbarProviderProps, type SnackbarState, type UseApiCallResult, cambiarGuionesBajosPorEspacios, clientSides, extendClientSides, resultsOk as resultComponents, useApiCall, useApp, useLogout, useSnackbar, wScreens };

package/dist/index.js

@@ -1258,8 +1258,10 @@ var allColumnsCellRenderer = (props) => {
   switch (column.customType) {
     case "default": {
       const defaultColumn = column;
-      const { fieldDef, tableDefinition, primaryKey, cellFeedback, fixedFields, localCellChanges } = defaultColumn;
+      const { fieldDef, tableDefinition, primaryKey, cellFeedbackMap, fixedFields, localCellChanges } = defaultColumn;
       const rowId = getPrimaryKeyValues(row, primaryKey);
+      const cellKey = `${rowId}-${props.column.key}`;
+      const currentCellFeedback = cellFeedbackMap.get ? cellFeedbackMap.get(cellKey) : cellFeedbackMap[cellKey];
       if (fieldDef?.clientSide) {
         const ClientSideComponent = clientSides[fieldDef.clientSide];
         if (ClientSideComponent) {
@@ -1268,8 +1270,8 @@ var allColumnsCellRenderer = (props) => {
         return /* @__PURE__ */ jsx8(FallbackClientSideRenderer_default, { ...props, fieldDefinition: fieldDef, tableDefinition, primaryKey });
       }
       let cellBackgroundColor = "transparent";
-      if (cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === props.column.key) {
-        cellBackgroundColor = cellFeedback.type === "error" ? theme.palette.error.light : theme.palette.success.light;
+      if (currentCellFeedback) {
+        cellBackgroundColor = currentCellFeedback.type === "error" ? theme.palette.error.light : theme.palette.success.light;
       } else {
         const isNewRowLocalCheck = row[NEW_ROW_INDICATOR];
         const isMandatory = tableDefinition.primaryKey.includes(props.column.key) || tableDefinition.fields.find((f) => f.name === props.column.key)?.nullable === false;
@@ -1282,7 +1284,7 @@ var allColumnsCellRenderer = (props) => {
         }
       }
       const value = row[props.column.key];
-      return /* @__PURE__ */ jsx8(Tooltip3, { title: cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === props.column.key ? cellFeedback?.message : "", children: /* @__PURE__ */ jsx8(Box5, { sx: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", backgroundColor: cellBackgroundColor, transition: "background-color 0.3s ease-in-out", display: "flex", alignItems: "center", paddingLeft: "8px", boxSizing: "border-box" }, children: /* @__PURE__ */ jsx8(Typography4, { variant: "body2", sx: { fontSize: "0.875rem", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", width: "100%" }, children: value === null || value === void 0 ? "" : String(value) }) }) });
+      return /* @__PURE__ */ jsx8(Tooltip3, { title: currentCellFeedback?.message || "", children: /* @__PURE__ */ jsx8(Box5, { sx: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", backgroundColor: cellBackgroundColor, transition: "background-color 0.3s ease-in-out", display: "flex", alignItems: "center", paddingLeft: "8px", boxSizing: "border-box" }, children: /* @__PURE__ */ jsx8(Typography4, { variant: "body2", sx: { fontSize: "0.875rem", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", width: "100%" }, children: value === null || value === void 0 ? "" : String(value) }) }) });
     }
     case "detail": {
       const detailColumn = column;
@@ -1366,10 +1368,10 @@ import { useCallback as useCallback3, useMemo, useState as useState3 } from "rea
 import InputBase2 from "@mui/material/InputBase";
 import { useTheme as useTheme2 } from "@mui/material";
 import { jsx as jsx9 } from "react/jsx-runtime";
-function findChangedValues(oldRowData, newRowData) {
+function findChangedValues(oldRowData, newRowData, isNewRow) {
   let changes = [];
   for (const key in newRowData) {
-    if (Object.prototype.hasOwnProperty.call(oldRowData, key) && oldRowData[key] !== newRowData[key]) {
+    if (Object.prototype.hasOwnProperty.call(oldRowData, key) && oldRowData[key] !== newRowData[key] || isNewRow) {
       changes.push(key);
     }
   }
@@ -1382,8 +1384,10 @@ function InputRenderer({
   tableDefinition,
   onRowChange,
   onClose,
-  cellFeedback,
-  setCellFeedback,
+  cellFeedbackMap,
+  // Tipo: CellFeedbackMap
+  setCellFeedbackMap,
+  // Tipo: Dispatch<SetStateAction<CellFeedbackMap>>
   onKeyPress,
   setTableData,
   setLocalCellChanges,
@@ -1394,10 +1398,11 @@ function InputRenderer({
   const [editingValue, setEditingValue] = useState3(row[column.key]);
   const theme = useTheme2();
   const { showSuccess, showError } = useSnackbar();
-  const rowId = getPrimaryKeyValues(row, primaryKey);
+  const cellKey = getCellKey(row, column.key, primaryKey);
+  const currentCellFeedback = cellFeedbackMap.get(cellKey);
   let cellBackgroundColor;
-  if (cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === column.key) {
-    cellBackgroundColor = cellFeedback.type === "error" ? theme.palette.error.light : theme.palette.success.light;
+  if (currentCellFeedback) {
+    cellBackgroundColor = currentCellFeedback.type === "error" ? theme.palette.error.light : theme.palette.success.light;
   }
   const initialRowId = useMemo(() => getPrimaryKeyValues(row, primaryKey), [row, primaryKey]);
   const { callApi } = useApiCall();
@@ -1496,7 +1501,6 @@ function InputRenderer({
           if (rowIndex !== -1) {
             newData[rowIndex] = persistedRowData;
           } else {
-            console.warn("Fila no encontrada para actualizar despu\xE9s de la inserci\xF3n. Podr\xEDa haber un problema de sincronizaci\xF3n.");
             const newPrimaryKeyId = getPrimaryKeyValues(persistedRowData, tableDefinition.primaryKey);
             const newRowIndex = newData.findIndex((r) => getPrimaryKeyValues(r, tableDefinition.primaryKey) === newPrimaryKeyId);
             if (newRowIndex !== -1) {
@@ -1512,12 +1516,28 @@ function InputRenderer({
         finalRowIdForFeedback = isPrimaryKeyColumn ? getPrimaryKeyValues(potentialUpdatedRow, tableDefinition.primaryKey) : currentRowIdBeforeUpdate;
         onRowChange({ ...response.row }, true);
       }
-      findChangedValues(oldRowData, response.row).forEach(
-        (key) => setCellFeedback({ rowId: finalRowIdForFeedback, columnKey: key, type: "success" })
-      );
+      const changes = findChangedValues(oldRowData, response.row, isNewRow);
+      setCellFeedbackMap((prevFeedback) => {
+        const newFeedback = new Map(prevFeedback);
+        changes.forEach((key) => {
+          const keyForMap = `${finalRowIdForFeedback}-${key}`;
+          newFeedback.set(keyForMap, { rowId: finalRowIdForFeedback, columnKey: key, type: "success" });
+        });
+        return newFeedback;
+      });
     } catch (err) {
       console.error("Error al guardar el registro:", err);
-      setCellFeedback({ rowId: currentRowIdBeforeUpdate, columnKey: column.key, type: "error", message: err.message });
+      const keyForMap = `${currentRowIdBeforeUpdate}-${column.key}`;
+      setCellFeedbackMap((prevFeedback) => {
+        const newFeedback = new Map(prevFeedback);
+        newFeedback.set(keyForMap, {
+          rowId: currentRowIdBeforeUpdate,
+          columnKey: column.key,
+          type: "error",
+          message: err.message
+        });
+        return newFeedback;
+      });
     }
   }, [
     column,
@@ -1528,7 +1548,7 @@ function InputRenderer({
     tableDefinition.fields,
     showSuccess,
     showError,
-    setCellFeedback,
+    setCellFeedbackMap,
     onClose,
     setTableData,
     setLocalCellChanges,
@@ -1587,8 +1607,10 @@ var allColumnsEditCellRenderer = (props, allColumns) => {
         fixedFields,
         primaryKey,
         setTableData,
-        cellFeedback,
-        setCellFeedback,
+        cellFeedbackMap,
+        // <--- CAMBIADO
+        setCellFeedbackMap,
+        // <--- CAMBIADO
         handleKeyPressInEditor,
         localCellChanges,
         setLocalCellChanges
@@ -1601,20 +1623,25 @@ var allColumnsEditCellRenderer = (props, allColumns) => {
           return void 0;
         }
         const rowId = getPrimaryKeyValues(props.row, primaryKey);
-        return /* @__PURE__ */ jsx10(Tooltip4, { title: cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === props.column.key ? cellFeedback?.message : "", children: /* @__PURE__ */ jsx10(Box6, { children: /* @__PURE__ */ jsx10(
-          InputRenderer_default,
-          {
-            ...props,
-            tableDefinition,
-            setCellFeedback,
-            cellFeedback,
-            onKeyPress: (rowIndex, columnKey, event, handleCommit) => handleKeyPressInEditor(rowIndex, columnKey, event, allColumns, handleCommit),
-            setTableData,
-            setLocalCellChanges,
-            localCellChanges,
-            primaryKey
-          }
-        ) }) });
+        const cellKey = `${rowId}-${props.column.key}`;
+        const currentCellFeedback = cellFeedbackMap.get ? cellFeedbackMap.get(cellKey) : cellFeedbackMap[cellKey];
+        return (
+          // --- TOOLTIP ADAPTADO: Lee el mensaje de error desde el Mapa ---
+          /* @__PURE__ */ jsx10(Tooltip4, { title: currentCellFeedback?.message || "", children: /* @__PURE__ */ jsx10(Box6, { children: /* @__PURE__ */ jsx10(
+            InputRenderer_default,
+            {
+              ...props,
+              tableDefinition,
+              setCellFeedbackMap,
+              cellFeedbackMap,
+              onKeyPress: (rowIndex, columnKey, event, handleCommit) => handleKeyPressInEditor(rowIndex, columnKey, event, allColumns, handleCommit),
+              setTableData,
+              setLocalCellChanges,
+              localCellChanges,
+              primaryKey
+            }
+          ) }) })
+        );
       }
       return void 0;
     }
@@ -1652,16 +1679,20 @@ function EmptyRowsRenderer() {
 
 // src/components/grid/GenericDataGrid.tsx
 import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+var NEW_ROW_INDICATOR = "$new";
+var DETAIL_ROW_INDICATOR = "$detail";
 var getPrimaryKeyValues = (row, primaryKey) => {
+  let keys = [...primaryKey];
   if (row[DETAIL_ROW_INDICATOR]) {
-    primaryKey = primaryKey.concat(DETAIL_ROW_INDICATOR);
+    keys = keys.concat(DETAIL_ROW_INDICATOR);
   }
-  return primaryKey.map((key) => {
+  return keys.map((key) => {
     return row[key] !== void 0 && row[key] !== null ? String(row[key]) : "NULL_OR_UNDEFINED";
   }).join("|");
 };
-var NEW_ROW_INDICATOR = "$new";
-var DETAIL_ROW_INDICATOR = "$detail";
+var getCellKey = (row, columnKey, primaryKey) => {
+  return `${getPrimaryKeyValues(row, primaryKey)}|${columnKey}`;
+};
 var GenericDataGrid = ({
   tableName,
   fixedFields,
@@ -1674,7 +1705,7 @@ var GenericDataGrid = ({
   const [filters, setFilters] = useState4({});
   const [selectedRows, setSelectedRows] = useState4(() => /* @__PURE__ */ new Set());
   const [selectedCell, setSelectedCell] = useState4(void 0);
-  const [cellFeedback, setCellFeedback] = useState4(null);
+  const [cellFeedbackMap, setCellFeedbackMap] = useState4(/* @__PURE__ */ new Map());
   const [localCellChanges, setLocalCellChanges] = useState4(/* @__PURE__ */ new Map());
   const theme = useTheme3();
   const [openConfirmDialog, setOpenConfirmDialog] = useState4(false);
@@ -1692,7 +1723,7 @@ var GenericDataGrid = ({
     setSelectedRows(/* @__PURE__ */ new Set());
     setTableDefinition(null);
     setTableData([]);
-    setCellFeedback(null);
+    setCellFeedbackMap(/* @__PURE__ */ new Map());
     setLocalCellChanges(/* @__PURE__ */ new Map());
     setOpenConfirmDialog(false);
     setRowToDelete(null);
@@ -1721,14 +1752,24 @@ var GenericDataGrid = ({
     fetchDataAndDefinition();
   }, [tableName, fixedFields, showError]);
   useEffect(() => {
-    if (cellFeedback) {
+    if (cellFeedbackMap.size > 0) {
       if (feedbackTimerRef.current) {
         clearTimeout(feedbackTimerRef.current);
       }
       const timerDuration = 3e3;
       feedbackTimerRef.current = setTimeout(() => {
-        if (cellFeedback.type == "success")
-          setCellFeedback(null);
+        setCellFeedbackMap((prevMap) => {
+          const newMap = new Map(prevMap);
+          let mapChanged = false;
+          for (const [cellId, feedback] of prevMap.entries()) {
+            if (feedback.type === "success") {
+              newMap.delete(cellId);
+              mapChanged = true;
+            }
+          }
+          return mapChanged ? newMap : prevMap;
+        });
+        feedbackTimerRef.current = null;
       }, timerDuration);
     }
     return () => {
@@ -1736,7 +1777,7 @@ var GenericDataGrid = ({
         clearTimeout(feedbackTimerRef.current);
       }
     };
-  }, [cellFeedback]);
+  }, [cellFeedbackMap]);
   const primaryKey = useMemo2(() => {
     if (!tableDefinition) return ["id"];
     return tableDefinition.primaryKey && tableDefinition.primaryKey.length > 0 ? tableDefinition.primaryKey : ["id"];
@@ -1982,7 +2023,7 @@ var GenericDataGrid = ({
         }
       }
     }
-  }, [filteredRows, tableDefinition]);
+  }, [filteredRows, tableDefinition, tableData]);
   const handleSelectedCellChange = useCallback4((args) => {
     setSelectedCell(args);
   }, []);
@@ -2000,13 +2041,14 @@ var GenericDataGrid = ({
         customType: "default",
         tableDefinition,
         fieldDef,
-        cellFeedback,
+        // 💥 MULTI-CELL: Se inyecta el mapa y su setter
+        cellFeedbackMap,
+        setCellFeedbackMap,
         primaryKey,
         fixedFields,
         localCellChanges,
         setLocalCellChanges,
         setTableData,
-        setCellFeedback,
         name: fieldDef.label || cambiarGuionesBajosPorEspacios(fieldDef.name),
         resizable: true,
         sortable: true,
@@ -2088,7 +2130,8 @@ var GenericDataGrid = ({
     isFilterRowVisible,
     filters,
     toggleFilterVisibility,
-    cellFeedback,
+    // 💥 MULTI-CELL: Se usa el mapa en lugar de la variable simple
+    cellFeedbackMap,
     primaryKey,
     theme.palette.success.light,
     theme.palette.error.light,