frontend-plus-react 0.1.13 → 0.1.15

package/dist/index.cjs

@@ -1027,6 +1027,120 @@ var ConfirmDialog = ({ open, onClose, title, message }) => {
   );
 };
 
+// src/components/grid/DataGridOptionsDialog.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+var DataGridOptionsDialog = ({
+  open,
+  onClose,
+  options,
+  anchorEl
+}) => {
+  const [isExecuting, setIsExecuting] = _react.useState.call(void 0, false);
+  const handleOptionClick = async (handler) => {
+    try {
+      setIsExecuting(true);
+      await handler();
+    } catch (error) {
+      console.error("Error ejecutando handler:", error);
+    } finally {
+      setIsExecuting(false);
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    open && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.2)",
+          zIndex: 1200,
+          pointerEvents: "none"
+        }
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Popover,
+      {
+        open,
+        anchorEl,
+        onClose,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        slotProps: {
+          paper: {
+            sx: {
+              zIndex: 1300
+            }
+          }
+        },
+        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Paper, { sx: { minWidth: 150, maxWidth: 350 }, children: [
+          isExecuting && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _material.Box,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                p: 5
+              },
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.CircularProgress, { size: 40 })
+            }
+          ),
+          !isExecuting && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.List, { sx: {
+            py: 0,
+            "& .MuiListItemButton-root": {
+              py: 0.5,
+              px: 1.5,
+              minHeight: 36
+            },
+            "& .MuiListItemIcon-root": {
+              minWidth: 32
+            },
+            "& .MuiListItemText-primary": {
+              fontSize: "0.85rem"
+            },
+            "& .MuiSvgIcon-root": {
+              fontSize: 18
+            }
+          }, children: options.filter((option) => option.visible !== false).map((option) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            _material.ListItemButton,
+            {
+              onClick: () => handleOptionClick(option.handler),
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemIcon, { children: option.icon }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemText, { primary: option.label })
+              ]
+            },
+            option.id
+          )) })
+        ] })
+      }
+    )
+  ] });
+};
+
 // src/components/grid/renderers/headerCellRenderers.tsx
 
 var _Search = require('@mui/icons-material/Search'); var _Search2 = _interopRequireDefault(_Search);
@@ -1064,30 +1178,31 @@ var defaultColumnHeaderCellRenderer = (props, fieldDef) => {
     }
   );
 };
-var actionsColumnHeaderCellRenderer = (props, isFilterRowVisible, toggleFilterVisibility) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 0.2 }, children: [
-  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _material.IconButton,
-    {
-      color: "inherit",
-      onClick: toggleFilterVisibility,
-      size: "small",
-      title: isFilterRowVisible ? "Ocultar filtros" : "Mostrar filtros",
-      sx: { p: 0.25 },
-      children: isFilterRowVisible ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SearchOff2.default, { sx: { fontSize: 18 } }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Search2.default, { sx: { fontSize: 18 } })
-    }
-  ),
-  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _material.IconButton,
-    {
-      onClick: () => {
-      },
-      size: "small",
-      title: "Opciones de esta tabla",
-      sx: { p: 0.25 },
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MoreVert2.default, { sx: { fontSize: 20, variant: "filled", size: "small" } })
-    }
-  )
-] });
+var actionsColumnHeaderCellRenderer = (props, isFilterRowVisible, toggleFilterVisibility, handleDataGridOptions) => {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 0.2 }, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.IconButton,
+      {
+        color: "inherit",
+        onClick: toggleFilterVisibility,
+        size: "small",
+        title: isFilterRowVisible ? "Ocultar filtros" : "Mostrar filtros",
+        sx: { p: 0.25 },
+        children: isFilterRowVisible ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SearchOff2.default, { sx: { fontSize: 18 } }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Search2.default, { sx: { fontSize: 18 } })
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.IconButton,
+      {
+        onClick: (event) => handleDataGridOptions(event),
+        size: "small",
+        title: "Opciones de esta tabla",
+        sx: { p: 0.25 },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MoreVert2.default, { sx: { fontSize: 20, variant: "filled", size: "small" } })
+      }
+    )
+  ] });
+};
 var detailColumnCellHeaderRenderer = (props, detailTable) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: detailTable.label, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "caption", sx: { fontSize: "0.75rem", fontWeight: "bold" }, children: detailTable.abr.toUpperCase() }) });
 
 // src/components/grid/FilterInputRender.tsx
@@ -1677,6 +1792,109 @@ function EmptyRowsRenderer() {
   }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { textAlign: "center" }, children: "No hay filas para mostrar" }) });
 }
 
+// src/components/grid/menu/options.tsx
+var _Refresh = require('@mui/icons-material/Refresh'); var _Refresh2 = _interopRequireDefault(_Refresh);
+var _ViewColumn = require('@mui/icons-material/ViewColumn'); var _ViewColumn2 = _interopRequireDefault(_ViewColumn);
+var _VisibilityOff = require('@mui/icons-material/VisibilityOff'); var _VisibilityOff2 = _interopRequireDefault(_VisibilityOff);
+var _FileDownload = require('@mui/icons-material/FileDownload'); var _FileDownload2 = _interopRequireDefault(_FileDownload);
+var _FileUpload = require('@mui/icons-material/FileUpload'); var _FileUpload2 = _interopRequireDefault(_FileUpload);
+var _DeleteSweep = require('@mui/icons-material/DeleteSweep'); var _DeleteSweep2 = _interopRequireDefault(_DeleteSweep);
+var _FilterAlt = require('@mui/icons-material/FilterAlt'); var _FilterAlt2 = _interopRequireDefault(_FilterAlt);
+
+var buildMenuOptions = (params) => {
+  const {
+    tableDefinition,
+    tableName,
+    fixedFields,
+    setTableData,
+    callApi,
+    showSuccess,
+    showError,
+    showWarning
+  } = params;
+  if (!tableDefinition) return [];
+  const options = [];
+  options.push({
+    id: "refresh",
+    label: "refrescar la grilla desde la base de datos",
+    icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Refresh2.default, {}),
+    handler: async () => {
+      try {
+        const data = await callApi("table_data", {
+          table: tableName,
+          fixedFields
+        });
+        setTableData(data);
+        showSuccess("Grilla refrescada correctamente");
+      } catch (err) {
+        showError(`Error al refrescar: ${err.message || "Error desconocido"}`);
+      }
+    },
+    visible: true
+  });
+  options.push({
+    id: "showColumns",
+    label: "mostrar las columnas relacionadas",
+    icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ViewColumn2.default, {}),
+    handler: async () => {
+      console.log("Mostrar columnas relacionadas");
+    },
+    visible: true
+  });
+  options.push({
+    id: "hideColumns",
+    label: "ocultar o mostrar columnas",
+    icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _VisibilityOff2.default, {}),
+    handler: async () => {
+      console.log("Ocultar/mostrar columnas");
+    },
+    visible: true
+  });
+  if (_optionalChain([tableDefinition, 'access', _31 => _31.allow, 'optionalAccess', _32 => _32.export])) {
+    options.push({
+      id: "export",
+      label: "exportar",
+      icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FileDownload2.default, {}),
+      handler: async () => {
+        console.log("Exportar datos");
+      },
+      visible: true
+    });
+  }
+  if (_optionalChain([tableDefinition, 'access', _33 => _33.allow, 'optionalAccess', _34 => _34.import])) {
+    options.push({
+      id: "import",
+      label: "importar",
+      icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FileUpload2.default, {}),
+      handler: async () => {
+        console.log("Importar datos");
+      },
+      visible: true
+    });
+  }
+  if (_optionalChain([tableDefinition, 'access', _35 => _35.allow, 'optionalAccess', _36 => _36.delete])) {
+    options.push({
+      id: "deleteAll",
+      label: "borrar todos los registros",
+      icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DeleteSweep2.default, {}),
+      handler: async () => {
+        showWarning("Esta operaci\xF3n eliminar\xE1 TODOS los registros de la tabla");
+      },
+      visible: true
+    });
+  }
+  options.push({
+    id: "completeTable",
+    label: "tabla completa y filtrada",
+    icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FilterAlt2.default, {}),
+    handler: async () => {
+      console.log("Toggle tabla completa/filtrada");
+    },
+    visible: true
+  });
+  return options;
+};
+
 // src/components/grid/GenericDataGrid.tsx
 
 var NEW_ROW_INDICATOR = "$new";
@@ -1709,6 +1927,8 @@ var GenericDataGrid = ({
   const [localCellChanges, setLocalCellChanges] = _react.useState.call(void 0, /* @__PURE__ */ new Map());
   const theme = _material.useTheme.call(void 0, );
   const [openConfirmDialog, setOpenConfirmDialog] = _react.useState.call(void 0, false);
+  const [openDataGridOptions, setOpenDataGridOptions] = _react.useState.call(void 0, false);
+  const [dataGridOptionsAnchorEl, setDataGridOptionsAnchorEl] = _react.useState.call(void 0, null);
   const [rowToDelete, setRowToDelete] = _react.useState.call(void 0, null);
   const [exitingRowIds, setExitingRowIds] = _react.useState.call(void 0, /* @__PURE__ */ new Set());
   const { showSuccess, showError, showWarning, showInfo } = useSnackbar();
@@ -1923,14 +2143,14 @@ var GenericDataGrid = ({
       const currentColumnIndex = currentColumns.findIndex((col) => col.key === columnKey);
       const editableColumns = currentColumns.filter((col) => {
         const fieldDefinition = tableDefinition.fields.find((f) => f.name === col.key);
-        return col.key !== "actionsColumn" && col.customType != "detail" && (_optionalChain([fieldDefinition, 'optionalAccess', _31 => _31.editable]) !== false && !_optionalChain([fieldDefinition, 'optionalAccess', _32 => _32.clientSide]));
+        return col.key !== "actionsColumn" && col.customType != "detail" && (_optionalChain([fieldDefinition, 'optionalAccess', _37 => _37.editable]) !== false && !_optionalChain([fieldDefinition, 'optionalAccess', _38 => _38.clientSide]));
       });
       const { key, target } = event;
       const input = target;
       if (currentColumnIndex !== -1 && editableColumns.length > 0) {
         const editableColumnKeys = editableColumns.map((col) => col.key);
         let currentEditableColumnIndex = editableColumnKeys.indexOf(columnKey);
-        const hacerFoco = ({ rowIdx, idx }) => setTimeout(() => _optionalChain([dataGridRef, 'access', _33 => _33.current, 'optionalAccess', _34 => _34.selectCell, 'call', _35 => _35({ rowIdx, idx }, { enableEditor: true, shouldFocusCell: true })]), 10);
+        const hacerFoco = ({ rowIdx, idx }) => setTimeout(() => _optionalChain([dataGridRef, 'access', _39 => _39.current, 'optionalAccess', _40 => _40.selectCell, 'call', _41 => _41({ rowIdx, idx }, { enableEditor: true, shouldFocusCell: true })]), 10);
         const calcularColumnaSiguiente = () => {
           let nextEditableColumnIndex = currentEditableColumnIndex + 1;
           let nextRowIndex = rowIndex;
@@ -2027,14 +2247,24 @@ var GenericDataGrid = ({
   const handleSelectedCellChange = _react.useCallback.call(void 0, (args) => {
     setSelectedCell(args);
   }, []);
+  const menuOptions = _react.useMemo.call(void 0, () => buildMenuOptions({
+    tableDefinition,
+    tableName,
+    fixedFields,
+    setTableData,
+    callApi,
+    showSuccess,
+    showError,
+    showWarning
+  }), [tableDefinition, tableName, fixedFields, setTableData, callApi, showSuccess, showError, showWarning]);
   const columns = _react.useMemo.call(void 0, () => {
     if (!tableDefinition) return [];
     const fieldsToShow = tableDefinition.fields.filter((field) => {
-      const fixedFieldEntry = _optionalChain([fixedFields, 'optionalAccess', _36 => _36.find, 'call', _37 => _37((f) => f.fieldName === field.name)]);
+      const fixedFieldEntry = _optionalChain([fixedFields, 'optionalAccess', _42 => _42.find, 'call', _43 => _43((f) => f.fieldName === field.name)]);
       return !(fixedFieldEntry && fixedFieldEntry.until === void 0);
     });
     const defaultColumns = fieldsToShow.map((fieldDef) => {
-      const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _38 => _38.some, 'call', _39 => _39((f) => f.fieldName === fieldDef.name)]);
+      const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _44 => _44.some, 'call', _45 => _45((f) => f.fieldName === fieldDef.name)]);
       const isFieldEditable = fieldDef.editable !== false && !isFixedField;
       return {
         key: fieldDef.name,
@@ -2061,9 +2291,9 @@ var GenericDataGrid = ({
       };
     });
     const availableActions = [
-      _optionalChain([tableDefinition, 'access', _40 => _40.allow, 'optionalAccess', _41 => _41.insert]),
-      _optionalChain([tableDefinition, 'access', _42 => _42.allow, 'optionalAccess', _43 => _43.delete]),
-      _optionalChain([tableDefinition, 'access', _44 => _44.allow, 'optionalAccess', _45 => _45["vertical-edit"]])
+      _optionalChain([tableDefinition, 'access', _46 => _46.allow, 'optionalAccess', _47 => _47.insert]),
+      _optionalChain([tableDefinition, 'access', _48 => _48.allow, 'optionalAccess', _49 => _49.delete]),
+      _optionalChain([tableDefinition, 'access', _50 => _50.allow, 'optionalAccess', _51 => _51["vertical-edit"]])
     ].filter(Boolean).length;
     const actionColumnWidth = availableActions === 0 ? 30 : 12 + availableActions * 25;
     const actionsColumn = {
@@ -2077,7 +2307,10 @@ var GenericDataGrid = ({
       editable: false,
       resizable: false,
       sortable: false,
-      renderHeaderCell: (props) => actionsColumnHeaderCellRenderer(props, isFilterRowVisible, toggleFilterVisibility),
+      renderHeaderCell: (props) => actionsColumnHeaderCellRenderer(props, isFilterRowVisible, toggleFilterVisibility, (e) => {
+        setDataGridOptionsAnchorEl(e.currentTarget);
+        setOpenDataGridOptions(true);
+      }),
       renderSummaryCell: (props) => actionsColumnSummaryCellRenderer(props)
     };
     const detailColumns = [];
@@ -2169,11 +2402,11 @@ var GenericDataGrid = ({
     event.preventGridDefault();
   }, []);
   const handleCellClick = _react.useCallback.call(void 0, (args, _event) => {
-    const fieldDefinition = _optionalChain([tableDefinition, 'optionalAccess', _46 => _46.fields, 'access', _47 => _47.find, 'call', _48 => _48((f) => f.name === args.column.key)]);
-    const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _49 => _49.some, 'call', _50 => _50((f) => f.fieldName === args.column.key)]);
-    const isEditable = _optionalChain([fieldDefinition, 'optionalAccess', _51 => _51.editable]) !== false && !isFixedField;
+    const fieldDefinition = _optionalChain([tableDefinition, 'optionalAccess', _52 => _52.fields, 'access', _53 => _53.find, 'call', _54 => _54((f) => f.name === args.column.key)]);
+    const isFixedField = _optionalChain([fixedFields, 'optionalAccess', _55 => _55.some, 'call', _56 => _56((f) => f.fieldName === args.column.key)]);
+    const isEditable = _optionalChain([fieldDefinition, 'optionalAccess', _57 => _57.editable]) !== false && !isFixedField;
     if (isEditable) {
-      deselectAllOtherGrids(_optionalChain([dataGridRef, 'access', _52 => _52.current, 'optionalAccess', _53 => _53.element]));
+      deselectAllOtherGrids(_optionalChain([dataGridRef, 'access', _58 => _58.current, 'optionalAccess', _59 => _59.element]));
       args.selectCell(true);
     }
     console.log("Clicked column index:", args.column.idx);
@@ -2265,6 +2498,15 @@ var GenericDataGrid = ({
         title: "Confirmar Eliminaci\xF3n",
         message: rowToDelete && rowToDelete[NEW_ROW_INDICATOR] ? `\xBFEst\xE1s seguro de que quieres eliminar esta nueva fila (ID: ${getPrimaryKeyValues(rowToDelete, primaryKey)}) localmente?` : rowToDelete ? `\xBFEst\xE1s seguro de que quieres eliminar la fila con ID: ${getPrimaryKeyValues(rowToDelete, primaryKey)} de la base de datos? Esta acci\xF3n es irreversible.` : "\xBFEst\xE1s seguro de que quieres eliminar este registro? Esta acci\xF3n es irreversible."
       }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      DataGridOptionsDialog,
+      {
+        open: openDataGridOptions,
+        onClose: () => setOpenDataGridOptions(false),
+        options: menuOptions,
+        anchorEl: dataGridOptionsAnchorEl
+      }
     )
   ] });
 };
@@ -2794,7 +3036,7 @@ var SessionExpiredMessage_default = SessionExpiredMessage;
 var HomePage = () => {
   const { clientContext } = useApp();
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { p: 3 }, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h4", component: "h1", gutterBottom: true, children: `Bienvenido/a ${_optionalChain([clientContext, 'optionalAccess', _54 => _54.username])}` }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h4", component: "h1", gutterBottom: true, children: `Bienvenido/a ${_optionalChain([clientContext, 'optionalAccess', _60 => _60.username])}` }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body1", children: "Usa el men\xFA lateral para navegar por las diferentes secciones." })
   ] });
 };
@@ -2923,7 +3165,7 @@ var LoginPage = () => {
                         fullWidth: true,
                         margin: "normal",
                         error: !!errors.username,
-                        helperText: _optionalChain([errors, 'access', _55 => _55.username, 'optionalAccess', _56 => _56.message]),
+                        helperText: _optionalChain([errors, 'access', _61 => _61.username, 'optionalAccess', _62 => _62.message]),
                         disabled: isSubmitting
                       }
                     )
@@ -2946,7 +3188,7 @@ var LoginPage = () => {
                         fullWidth: true,
                         margin: "normal",
                         error: !!errors.password,
-                        helperText: _optionalChain([errors, 'access', _57 => _57.password, 'optionalAccess', _58 => _58.message]),
+                        helperText: _optionalChain([errors, 'access', _63 => _63.password, 'optionalAccess', _64 => _64.message]),
                         disabled: isSubmitting
                       }
                     )
@@ -3024,7 +3266,7 @@ var ProcedureForm = () => {
   const [executionLog, setExecutionLog] = _react.useState.call(void 0, []);
   const [procedureResultData, setProcedureResultData] = _react.useState.call(void 0, null);
   const procedure = _react.useMemo.call(void 0, () => {
-    if (procedureName && _optionalChain([clientContext, 'optionalAccess', _59 => _59.procedure])) {
+    if (procedureName && _optionalChain([clientContext, 'optionalAccess', _65 => _65.procedure])) {
       return clientContext.procedure[procedureName];
     }
     return void 0;
@@ -3315,7 +3557,7 @@ var ProcedureForm = () => {
     }
   }, [formValues, handleChange, apiLoading, validationErrors]);
   const ResultDisplayContent = _react.useMemo.call(void 0, () => {
-    if (!procedureResultData || !_optionalChain([procedure, 'optionalAccess', _60 => _60.resultOk])) return null;
+    if (!procedureResultData || !_optionalChain([procedure, 'optionalAccess', _66 => _66.resultOk])) return null;
     const ComponentToRender = resultsOk[procedure.resultOk];
     if (ComponentToRender) {
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ComponentToRender, { data: procedureResultData });