frontend-plus-react 0.1.4 → 0.1.5

package/dist/index.js

@@ -622,7 +622,7 @@ var SnackbarAlert = React.forwardRef(function SnackbarAlert2(props, ref) {
 });
 var SnackbarContext = createContext(void 0);
 var DEFAULT_SUCCESS_DURATION = 3e3;
-var DEFAULT_ERROR_DURATION = 5e3;
+var DEFAULT_ERROR_DURATION = 1e4;
 var SnackbarProvider = ({ children }) => {
   const [snackbar, setSnackbar] = useState({
     open: false,
@@ -757,9 +757,12 @@ var useApiCall = () => {
   const { showSnackbar } = useSnackbar();
   const [loading, setLoading] = useState2(false);
   const [error, setError] = useState2(null);
-  const callApi = useCallback2(async (procedureName, params) => {
+  const callApi = useCallback2(async (procedureName, params, opts) => {
     setLoading(true);
     setError(null);
+    const defaultOpts = { ...{
+      reportOnSnackbar: true
+    }, ...opts };
     try {
       const result = await executeBackendProcedure(procedureName, params);
       return result === null ? void 0 : result;
@@ -771,7 +774,9 @@ var useApiCall = () => {
       } else if (err instanceof Error) {
         snackbarMessage = err.message;
       }
-      showSnackbar(snackbarMessage, "error");
+      if (defaultOpts.reportOnSnackbar) {
+        showSnackbar(snackbarMessage, "error");
+      }
       throw err;
     } finally {
       setLoading(false);
@@ -781,14 +786,7 @@ var useApiCall = () => {
 };
 
 // src/components/grid/GenericDataGrid.tsx
-import {
-  CircularProgress,
-  Typography as Typography5,
-  Box as Box5,
-  Alert,
-  useTheme as useTheme2,
-  Button as Button3
-} from "@mui/material";
+import { CircularProgress, Typography as Typography5, Box as Box5, Alert, useTheme as useTheme3, Button as Button3 } from "@mui/material";
 
 // src/utils/functions.tsx
 var JSON4all = __toESM(require_json4all(), 1);
@@ -1145,7 +1143,6 @@ import { Box as Box3, Typography as Typography3, Tooltip as Tooltip2 } from "@mu
 import WarningAmberIcon from "@mui/icons-material/WarningAmber";
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var FallbackClientSideRenderer = ({ column, row, fieldDefinition }) => {
-  const value = row[column.key];
   const clientSideName = fieldDefinition?.clientSide || "Desconocido";
   return /* @__PURE__ */ jsx7(Tooltip2, { title: `Componente clientSide '${clientSideName}' no implementado. Mostrando valor por defecto.`, children: /* @__PURE__ */ jsxs3(
     Box3,
@@ -1168,7 +1165,7 @@ var FallbackClientSideRenderer = ({ column, row, fieldDefinition }) => {
         // Evita que el contenido se desborde
       },
       children: [
-        /* @__PURE__ */ jsx7(Typography3, { variant: "body2", noWrap: true, sx: { flexGrow: 1 }, children: value !== null && value !== void 0 ? String(value) : "*Vac\xEDo*" }),
+        /* @__PURE__ */ jsx7(Typography3, { variant: "body2", noWrap: true, sx: { flexGrow: 1 }, children: clientSideName + " not found" }),
         /* @__PURE__ */ jsx7(
           WarningAmberIcon,
           {
@@ -1217,15 +1214,25 @@ var allColumnsCellRenderer = (props) => {
           fixedFields.push({ fieldName: field.target, value: row[field.source] });
         }
       });
-      return /* @__PURE__ */ jsx8(Box4, { sx: {
-        // Se eliminó el padding para que la sub-grilla se extienda por completo
-        minHeight: "200px",
-        width: "100%",
-        height: "100%",
-        //display: 'flex',
-        //flexDirection: 'column',
-        boxSizing: "border-box"
-      }, children: /* @__PURE__ */ jsx8(GenericDataGrid_default, { tableName: detailTable.table, fixedFields }) });
+      return /* @__PURE__ */ jsx8(
+        Box4,
+        {
+          sx: {
+            // Se eliminó el padding para que la sub-grilla se extienda por completo
+            minHeight: "200px",
+            width: "100%",
+            height: "100%",
+            //display: 'flex',
+            //flexDirection: 'column',
+            boxSizing: "border-box"
+          },
+          onMouseDown: (e) => e.stopPropagation(),
+          onClick: (e) => e.stopPropagation(),
+          onKeyDown: (e) => e.stopPropagation(),
+          onDoubleClick: (e) => e.stopPropagation(),
+          children: /* @__PURE__ */ jsx8(GenericDataGrid_default, { tableName: detailTable.table, fixedFields })
+        }
+      );
     }
     return void 0;
   }
@@ -1256,7 +1263,7 @@ var allColumnsCellRenderer = (props) => {
         }
       }
       const value = row[props.column.key];
-      return /* @__PURE__ */ jsx8(Box4, { 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: cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === props.column.key ? cellFeedback?.message : "", children: /* @__PURE__ */ jsx8(Box4, { 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;
@@ -1305,7 +1312,17 @@ var allColumnsCellRenderer = (props) => {
 // src/components/grid/InputRenderer.tsx
 import { useCallback as useCallback3, useMemo, useState as useState3 } from "react";
 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) {
+  let changes = [];
+  for (const key in newRowData) {
+    if (Object.prototype.hasOwnProperty.call(oldRowData, key) && oldRowData[key] !== newRowData[key]) {
+      changes.push(key);
+    }
+  }
+  return changes;
+}
 function InputRenderer({
   column,
   row,
@@ -1313,6 +1330,7 @@ function InputRenderer({
   tableDefinition,
   onRowChange,
   onClose,
+  cellFeedback,
   setCellFeedback,
   onEnterPress,
   setTableData,
@@ -1322,7 +1340,13 @@ function InputRenderer({
 }) {
   const tableName = tableDefinition.tableName;
   const [editingValue, setEditingValue] = useState3(row[column.key]);
+  const theme = useTheme2();
   const { showSuccess, showError } = useSnackbar();
+  const rowId = getPrimaryKeyValues(row, primaryKey);
+  let cellBackgroundColor;
+  if (cellFeedback && cellFeedback.rowId === rowId && cellFeedback.columnKey === column.key) {
+    cellBackgroundColor = cellFeedback.type === "error" ? theme.palette.error.light : theme.palette.success.light;
+  }
   const initialRowId = useMemo(() => getPrimaryKeyValues(row, primaryKey), [row, primaryKey]);
   const { callApi } = useApiCall();
   const handleCommit = useCallback3(async (currentValue, closeEditor, focusNextCell) => {
@@ -1336,27 +1360,12 @@ function InputRenderer({
     const isMandatoryFieldEmpty = isNewRow && isMandatoryField && (processedNewValue === null || processedNewValue === void 0 || String(processedNewValue).trim() === "");
     if (processedNewValue === row[column.key] && !isNewRow && !isMandatoryFieldEmpty) {
       console.log("No se guard\xF3: el valor no cambi\xF3 (y no es una nueva fila o campo obligatorio vac\xEDo que se est\xE1 iniciando).");
-      onClose(false, focusNextCell);
-      setLocalCellChanges((prev) => {
-        const newMap = new Map(prev);
-        const columnKeys = newMap.get(initialRowId);
-        if (columnKeys) {
-          columnKeys.delete(column.key);
-          if (columnKeys.size === 0) {
-            newMap.delete(initialRowId);
-          } else {
-            newMap.set(initialRowId, columnKeys);
-          }
-        }
-        return newMap;
-      });
       return;
     }
     const oldRowData = { ...row };
     const primaryKeyValuesForBackend = tableDefinition.primaryKey.map((key) => potentialUpdatedRow[key]);
     const currentRowIdBeforeUpdate = getPrimaryKeyValues(oldRowData, tableDefinition.primaryKey);
     onRowChange({ ...row, [column.key]: processedNewValue }, true);
-    onClose(true, focusNextCell);
     if (isNewRow) {
       const areAllMandatoryFieldsFilled = tableDefinition.fields.every((fieldDef) => {
         const isMandatory = fieldDef.nullable === false || fieldDef.isPk;
@@ -1423,21 +1432,7 @@ function InputRenderer({
         newRow: rowToSend,
         oldRow: oldRowData,
         status
-      });
-      setLocalCellChanges((prev) => {
-        const newMap = new Map(prev);
-        const columnKeys = newMap.get(initialRowId);
-        if (columnKeys) {
-          columnKeys.delete(column.key);
-          if (columnKeys.size === 0) {
-            newMap.delete(initialRowId);
-          } else {
-            newMap.set(initialRowId, columnKeys);
-          }
-        }
-        return newMap;
-      });
-      showSuccess("Registro guardado exitosamente!");
+      }, { reportOnSnackbar: false });
       let finalRowIdForFeedback;
       let persistedRowData;
       if (response.row && isNewRow) {
@@ -1460,15 +1455,18 @@ function InputRenderer({
         });
         finalRowIdForFeedback = getPrimaryKeyValues(persistedRowData, tableDefinition.primaryKey);
       } else {
-        persistedRowData = potentialUpdatedRow;
+        persistedRowData = response.row;
         const isPrimaryKeyColumn = tableDefinition.primaryKey.includes(column.key);
         finalRowIdForFeedback = isPrimaryKeyColumn ? getPrimaryKeyValues(potentialUpdatedRow, tableDefinition.primaryKey) : currentRowIdBeforeUpdate;
+        onRowChange({ ...response.row }, true);
+        onClose(true, focusNextCell);
       }
-      setCellFeedback({ rowId: finalRowIdForFeedback, columnKey: column.key, type: "success" });
+      findChangedValues(oldRowData, response.row).forEach(
+        (key) => setCellFeedback({ rowId: finalRowIdForFeedback, columnKey: key, type: "success" })
+      );
     } catch (err) {
       console.error("Error al guardar el registro:", err);
-      setCellFeedback({ rowId: currentRowIdBeforeUpdate, columnKey: column.key, type: "error" });
-      onRowChange(oldRowData, true);
+      setCellFeedback({ rowId: currentRowIdBeforeUpdate, columnKey: column.key, type: "error", message: err.message });
     }
   }, [
     column,
@@ -1487,6 +1485,7 @@ function InputRenderer({
     initialRowId
   ]);
   const handleKeyDown = useCallback3((event) => {
+    console.log("entra");
     if (event.key === "Enter") {
       handleCommit(editingValue, true, true);
       event.preventDefault();
@@ -1517,7 +1516,8 @@ function InputRenderer({
         borderRadius: "4px",
         padding: "2px 4px",
         fontSize: "0.8rem",
-        boxSizing: "border-box"
+        boxSizing: "border-box",
+        backgroundColor: cellBackgroundColor
       },
       onClick: (e) => e.stopPropagation(),
       autoFocus: true,
@@ -1529,28 +1529,54 @@ var InputRenderer_default = InputRenderer;
 
 // src/components/grid/renderers/editCellRenderers.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
-var defaultColumnEditCellRenderer = (props, tableDefinition, fixedFields, primaryKey, setCellFeedback, setTableData, localCellChanges, setLocalCellChanges, handleEnterKeyPressInEditor, allColumns) => {
-  const { column } = props;
-  if (column.editable) {
-    const fieldDefinition = tableDefinition.fields.find((f) => f.name === column.key);
-    const isFixedField = fixedFields?.some((f) => f.fieldName === column.key);
-    const isFieldEditableByUI = fieldDefinition?.editable !== false && !isFixedField;
-    if (!isFieldEditableByUI) {
-      return void 0;
-    }
-    return /* @__PURE__ */ jsx10(
-      InputRenderer_default,
-      {
-        ...props,
+var allColumnsEditCellRenderer = (props, allColumns) => {
+  const column = props.column;
+  switch (column.customType) {
+    case "default": {
+      const defaultColumn = column;
+      const {
         tableDefinition,
-        setCellFeedback,
-        onEnterPress: (rowIndex, columnKey) => handleEnterKeyPressInEditor(rowIndex, columnKey, allColumns),
+        fixedFields,
+        primaryKey,
         setTableData,
-        setLocalCellChanges,
+        cellFeedback,
+        setCellFeedback,
+        handleEnterKeyPressInEditor,
         localCellChanges,
-        primaryKey
+        setLocalCellChanges
+      } = defaultColumn;
+      if (column.editable) {
+        const fieldDefinition = tableDefinition.fields.find((f) => f.name === column.key);
+        const isFixedField = fixedFields?.some((f) => f.fieldName === column.key);
+        const isFieldEditableByUI = fieldDefinition?.editable !== false && !isFixedField;
+        if (!isFieldEditableByUI) {
+          return void 0;
+        }
+        return /* @__PURE__ */ jsx10(
+          InputRenderer_default,
+          {
+            ...props,
+            tableDefinition,
+            setCellFeedback,
+            cellFeedback,
+            onEnterPress: (rowIndex, columnKey) => handleEnterKeyPressInEditor(rowIndex, columnKey, allColumns),
+            setTableData,
+            setLocalCellChanges,
+            localCellChanges,
+            primaryKey
+          }
+        );
       }
-    );
+      return void 0;
+    }
+    case "detail": {
+      return void 0;
+    }
+    case "action": {
+      return void 0;
+    }
+    default:
+      return void 0;
   }
 };
 
@@ -1578,7 +1604,10 @@ function EmptyRowsRenderer() {
 // src/components/grid/GenericDataGrid.tsx
 import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 var getPrimaryKeyValues = (row, primaryKey) => {
-  return primaryKey.concat(DETAIL_ROW_INDICATOR).map((key) => {
+  if (row[DETAIL_ROW_INDICATOR]) {
+    primaryKey = primaryKey.concat(DETAIL_ROW_INDICATOR);
+  }
+  return primaryKey.map((key) => {
     return row[key] !== void 0 && row[key] !== null ? String(row[key]) : "NULL_OR_UNDEFINED";
   }).join("|");
 };
@@ -1593,9 +1622,10 @@ var GenericDataGrid = ({
   const [isFilterRowVisible, setIsFilterRowVisible] = useState4(false);
   const [filters, setFilters] = useState4({});
   const [selectedRows, setSelectedRows] = useState4(() => /* @__PURE__ */ new Set());
+  const [selectedCell, setSelectedCell] = useState4(void 0);
   const [cellFeedback, setCellFeedback] = useState4(null);
   const [localCellChanges, setLocalCellChanges] = useState4(/* @__PURE__ */ new Map());
-  const theme = useTheme2();
+  const theme = useTheme3();
   const [openConfirmDialog, setOpenConfirmDialog] = useState4(false);
   const [rowToDelete, setRowToDelete] = useState4(null);
   const [exitingRowIds, setExitingRowIds] = useState4(/* @__PURE__ */ new Set());
@@ -1638,7 +1668,11 @@ var GenericDataGrid = ({
       }
     };
     fetchDataAndDefinition();
-  }, [tableName, fixedFields, showError]);
+  }, [
+    tableName,
+    /*fixedFields,*/
+    showError
+  ]);
   useEffect(() => {
     if (cellFeedback) {
       if (feedbackTimerRef.current) {
@@ -1646,7 +1680,8 @@ var GenericDataGrid = ({
       }
       const timerDuration = 3e3;
       feedbackTimerRef.current = setTimeout(() => {
-        setCellFeedback(null);
+        if (cellFeedback.type == "success")
+          setCellFeedback(null);
       }, timerDuration);
     }
     return () => {
@@ -1817,11 +1852,14 @@ var GenericDataGrid = ({
           }
           const nextColumnKey = editableColumnKeys[nextEditableColumnIndex];
           const nextColumnIndex = currentColumns.findIndex((col) => col.key === nextColumnKey);
-          dataGridRef.current.selectCell({ rowIdx: nextRowIndex, idx: nextColumnIndex }, { enableEditor: false, scrollIntoView: true });
+          dataGridRef.current.selectCell({ rowIdx: nextRowIndex, idx: nextColumnIndex }, { enableEditor: true, shouldFocusCell: true });
         }
       }
     }
   }, [filteredRows, tableDefinition]);
+  const handleSelectedCellChange = useCallback4((args) => {
+    setSelectedCell(args);
+  }, []);
   const columns = useMemo2(() => {
     if (!tableDefinition) return [];
     const fieldsToShow = tableDefinition.fields.filter((field) => {
@@ -1840,11 +1878,14 @@ var GenericDataGrid = ({
         primaryKey,
         fixedFields,
         localCellChanges,
+        setLocalCellChanges,
+        setTableData,
+        setCellFeedback,
         name: fieldDef.label || cambiarGuionesBajosPorEspacios(fieldDef.name),
         resizable: true,
         sortable: true,
-        //frozen: true,
         editable: isFieldEditable,
+        handleEnterKeyPressInEditor,
         flexGrow: 1,
         minWidth: 60,
         renderHeaderCell: (props) => defaultColumnHeaderCellRenderer(props, fieldDef),
@@ -1858,9 +1899,9 @@ var GenericDataGrid = ({
       handleDeleteRow,
       name: "filterCol",
       width: 50,
+      editable: false,
       resizable: false,
       sortable: false,
-      //frozen: true,
       renderHeaderCell: (props) => actionsColumnHeaderCellRenderer(props, isFilterRowVisible, toggleFilterVisibility),
       renderSummaryCell: (props) => actionsColumnSummaryCellRenderer(props)
     };
@@ -1880,8 +1921,8 @@ var GenericDataGrid = ({
           name: detailTable.label || `Detalle ${detailTable.abr}`,
           resizable: false,
           sortable: false,
+          editable: false,
           width: 50,
-          //frozen: true,
           renderHeaderCell: (props) => detailColumnCellHeaderRenderer(props, detailTable),
           renderSummaryCell: (props) => detailColumnCellSummaryRenderer(props)
         });
@@ -1903,7 +1944,7 @@ var GenericDataGrid = ({
         }
         return void 0;
       },
-      renderEditCell: (props) => defaultColumnEditCellRenderer(props, tableDefinition, fixedFields, primaryKey, setCellFeedback, setTableData, localCellChanges, setLocalCellChanges, handleEnterKeyPressInEditor, allColumns),
+      renderEditCell: (props) => allColumnsEditCellRenderer(props, allColumns),
       renderCell: (props) => allColumnsCellRenderer(props)
     }));
   }, [
@@ -1927,7 +1968,18 @@ var GenericDataGrid = ({
   const handleRowsChange = useCallback4((updatedRows) => {
     setTableData(updatedRows);
   }, []);
+  const deselectAllOtherGrids = (currentGridElement) => {
+    const allSelectedCells = document.querySelectorAll("div[aria-selected='true']");
+    allSelectedCells.forEach((cell) => {
+      const parentGrid = cell.closest(".rdg");
+      if (parentGrid && parentGrid !== currentGridElement) {
+        cell.setAttribute("aria-selected", "false");
+      }
+    });
+  };
   const handleCellClick = useCallback4((args) => {
+    deselectAllOtherGrids(dataGridRef.current?.element);
+    args.selectCell(true);
     const fieldDefinition = tableDefinition?.fields.find((f) => f.name === args.column.key);
     const isFixedField = fixedFields?.some((f) => f.fieldName === args.column.key);
     const isEditable = fieldDefinition?.editable !== false && !isFixedField;
@@ -2003,6 +2055,7 @@ var GenericDataGrid = ({
             enableVirtualization: true,
             rowKeyGetter: (row) => getPrimaryKeyValues(row, primaryKey),
             onSelectedRowsChange: setSelectedRows,
+            onSelectedCellChange: handleSelectedCellChange,
             onRowsChange: handleRowsChange,
             selectedRows,
             rowHeight: (row) => row[DETAIL_ROW_INDICATOR] ? 400 : 35,
@@ -2010,8 +2063,8 @@ var GenericDataGrid = ({
             headerRowHeight: 35,
             topSummaryRows: isFilterRowVisible ? [{ id: "filterRow" }] : void 0,
             summaryRowHeight: isFilterRowVisible ? 35 : 0,
-            onCellClick: handleCellClick,
-            renderers: { noRowsFallback: /* @__PURE__ */ jsx12(EmptyRowsRenderer, {}) }
+            renderers: { noRowsFallback: /* @__PURE__ */ jsx12(EmptyRowsRenderer, {}) },
+            onCellClick: handleCellClick
           }
         )
       }
@@ -2045,7 +2098,7 @@ import {
   Drawer,
   CssBaseline,
   IconButton as IconButton3,
-  useTheme as useTheme3,
+  useTheme as useTheme4,
   useMediaQuery
 } from "@mui/material";
 
@@ -2351,7 +2404,7 @@ var MainLayout = () => {
   const logout = useLogout_default();
   const isDrawerOpen = useIsDrawerOpen();
   const dispatch = useAppDispatch();
-  const theme = useTheme3();
+  const theme = useTheme4();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
   useEffect3(() => {
     if (isMobile && isDrawerOpen) {