@itaptec/datagrid 0.0.1-beta.8

package/dist/index.js

@@ -0,0 +1,507 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ItecDataGrid: () => ItecDataGrid,
+  useItecDataGrid: () => useItecDataGrid_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/base/datagrid.tsx
+var import_x_data_grid = require("@mui/x-data-grid");
+var import_react_query = require("@tanstack/react-query");
+var import_icons_material2 = require("@mui/icons-material");
+var import_material2 = require("@mui/material");
+
+// src/common/useFilter.tsx
+var import_react_hook_form = require("react-hook-form");
+var import_react = require("react");
+function useFilter(props) {
+  const { filters } = props;
+  const [filter, setFilter] = (0, import_react.useState)();
+  const form = (0, import_react_hook_form.useForm)({
+    mode: "onChange"
+  });
+  if (!filters) {
+    return void 0;
+  }
+  return {
+    // columnMenuComponent: (props) => {
+    //   const {
+    //     colDef: { field },
+    //   } = props;
+    //   // TODO: make field of type union of possible fields
+    //   const menuParams = filters?.[field];
+    //   if (!menuParams) return undefined;
+    //   return (
+    //     <Stack
+    //       minWidth={300}
+    //       p={2}
+    //       spacing={2}
+    //       direction="row"
+    //       display="flex"
+    //       justifyContent="space-between"
+    //       alignItems="center"
+    //     >
+    //       <Box sx={{ width: "100%" }}>
+    //         {menuParams.type === "select" && (
+    //           <Select
+    //             name={menuParams.name}
+    //             control={control}
+    //             getOptions={menuParams.getOptions}
+    //             size="small"
+    //             fullWidth
+    //           />
+    //         )}
+    //       </Box>
+    //       <Box display="flex">
+    //         <Tooltip title="Limpiar filtro">
+    //           <IconButton
+    //             onClick={() => {
+    //               resetField(menuParams.name);
+    //               // onFilterChange(); // search on filter reset
+    //             }}
+    //           >
+    //             <FilterAltOff />
+    //           </IconButton>
+    //         </Tooltip>
+    //         <Tooltip title="Cerrar filtro">
+    //           <IconButton>
+    //             <Close />
+    //           </IconButton>
+    //         </Tooltip>
+    //       </Box>
+    //     </Stack>
+    //   );
+    // },
+    form,
+    filter
+  };
+}
+{
+}
+
+// src/common/useCheckboxSelection.ts
+var import_react2 = require("react");
+function useCheckboxSelection(data, getRowId, apiRef) {
+  if (Array.isArray(data)) {
+    return useCheckboxSelectionBasic(data, getRowId, apiRef);
+  }
+  return useCheckboxSelectionPaginated(data, getRowId, apiRef);
+}
+function useCheckboxSelectionPaginated(data, getRowId, apiRef) {
+  const [selectedRows, setSelectedRows] = (0, import_react2.useState)([]);
+  (0, import_react2.useEffect)(() => {
+    const handleRowClick = ({
+      id,
+      value
+    }) => {
+      if (!data) return;
+      if (value) {
+        const newValue = data.lista.find((x) => getRowId(x) === id);
+        newValue && setSelectedRows((prev) => [...prev, newValue]);
+      } else {
+        setSelectedRows((prev) => [...prev.filter((x) => getRowId(x) !== id)]);
+      }
+    };
+    return apiRef.current.subscribeEvent(
+      "rowSelectionCheckboxChange",
+      handleRowClick
+    );
+  }, [apiRef, data]);
+  return {
+    selectedRows
+  };
+}
+function useCheckboxSelectionBasic(data, getRowId, apiRef) {
+  const [selectedRows, setSelectedRows] = (0, import_react2.useState)([]);
+  (0, import_react2.useEffect)(() => {
+    const handleRowClick = ({
+      id,
+      value
+    }) => {
+      if (!data) return;
+      if (value) {
+        const newValue = data.find((x) => getRowId(x) === id);
+        newValue && setSelectedRows((prev) => [...prev, newValue]);
+      } else {
+        setSelectedRows((prev) => [...prev.filter((x) => getRowId(x) !== id)]);
+      }
+    };
+    return apiRef.current.subscribeEvent(
+      "rowSelectionCheckboxChange",
+      handleRowClick
+    );
+  }, [apiRef, data]);
+  return {
+    selectedRows
+  };
+}
+
+// src/Filter.tsx
+var import_icons_material = require("@mui/icons-material");
+var import_material = require("@mui/material");
+var import_form_components = require("@itaptec/form_components");
+var import_jsx_runtime = require("react/jsx-runtime");
+function Filter(props) {
+  const {
+    close,
+    menuParams,
+    formMethods: { control, resetField }
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_material.Stack,
+    {
+      minWidth: 300,
+      px: 1,
+      spacing: 2,
+      direction: "row",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { sx: { width: "100%" }, children: [
+          menuParams.type === "select" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_form_components.Select,
+            __spreadValues({
+              name: menuParams.name,
+              control
+            }, menuParams.props)
+          ),
+          menuParams.type === "multiselect" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_form_components.Multiselect,
+            __spreadValues({
+              name: menuParams.name,
+              control
+            }, menuParams.props)
+          ),
+          menuParams.type === "date-range" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_form_components.ControlledDateRangePicker,
+            __spreadValues({
+              label: "Fecha",
+              control
+            }, menuParams.props)
+          ),
+          menuParams.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_form_components.TextField,
+            __spreadValues({
+              name: menuParams.name,
+              control,
+              InputProps: {
+                startAdornment: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.InputAdornment, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Search, {}) })
+              },
+              debounceTime: 500
+            }, menuParams.props)
+          ),
+          menuParams.type === "button-group" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_form_components.ToggleButtonGroup,
+            __spreadValues({
+              name: menuParams.name,
+              control
+            }, menuParams.props)
+          ),
+          menuParams.type === "multiple-button-group" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_form_components.ToggleButtonGroupMultiple,
+            __spreadValues({
+              name: menuParams.name,
+              control
+            }, menuParams.props)
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { display: "flex", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Limpiar filtro", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_material.IconButton,
+            {
+              onClick: () => {
+                resetField(menuParams.name);
+                close();
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.FilterAltOff, {})
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Cerrar filtro", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Close, {}) }) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/base/datagrid.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function dataGridBase(props) {
+  const filter = useFilter({ filters: props.filters });
+  const query = (0, import_react_query.useQuery)({
+    queryKey: ["query", filter == null ? void 0 : filter.form.watch()],
+    queryFn: () => props.getEntities(filter == null ? void 0 : filter.form.watch())
+  });
+  const { data, refetch, isFetching, isError } = query;
+  const apiRef = (0, import_x_data_grid.useGridApiRef)();
+  const { selectedRows } = useCheckboxSelection(
+    data,
+    props.getRowId || (() => 0),
+    apiRef
+  );
+  return {
+    datagridProps: {
+      apiRef,
+      hideFooterPagination: true,
+      columns: props.columns.map((col) => {
+        var _a;
+        return __spreadProps(__spreadValues({}, col), {
+          sortable: false,
+          disableColumnMenu: !((_a = props.filters) == null ? void 0 : _a[col.field]),
+          renderHeader: (params) => {
+            var _a2;
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Box, { sx: { ":hover > *": { visibility: "visible" } }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { style: { marginRight: 10 }, children: params.colDef.headerName }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: ((_a2 = props.filters) == null ? void 0 : _a2[col.field]) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_material2.IconButton,
+                {
+                  onClick: () => {
+                    apiRef.current.showColumnMenu(params.colDef.field);
+                  },
+                  sx: {
+                    visibility: !!(filter == null ? void 0 : filter.form.getValues(
+                      props.filters[col.field].name
+                    )) ? "visible" : "hidden"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.FilterAlt, { fontSize: "small" })
+                }
+              ) })
+            ] });
+          }
+        });
+      }),
+      loading: isFetching,
+      rows: data || [],
+      slots: {
+        columnMenu: (params) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_x_data_grid.GridColumnMenu,
+            __spreadProps(__spreadValues({}, params), {
+              slots: {
+                columnMenuUserItem: (params2) => {
+                  if (!props.filters || !filter) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
+                  const {
+                    colDef: { field }
+                  } = params2;
+                  const menuParams = props.filters[field];
+                  if (!menuParams) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
+                  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    Filter,
+                    {
+                      close: () => {
+                        apiRef.current.hideColumnMenu();
+                      },
+                      formMethods: filter.form,
+                      menuParams
+                    }
+                  );
+                },
+                columnMenuSortItem: null,
+                columnMenuFilterItem: null,
+                columnMenuColumnsItem: null
+              }
+            })
+          );
+        }
+      },
+      checkboxSelection: props.checkboxSelection,
+      rowSelectionModel: props.checkboxSelection ? selectedRows.map((row) => props.getRowId(row)) : void 0,
+      getRowId: props.getRowId
+    },
+    control: {
+      query,
+      form: props.filters ? filter == null ? void 0 : filter.form : void 0,
+      selectedRows
+    }
+  };
+}
+
+// src/paginated/datagrid-paginated.tsx
+var import_x_data_grid2 = require("@mui/x-data-grid");
+var import_react3 = require("react");
+var import_react_query2 = require("@tanstack/react-query");
+var import_icons_material3 = require("@mui/icons-material");
+var import_material3 = require("@mui/material");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var defaultPagination = {
+  actualPage: 1,
+  pageSize: 24
+};
+function dataGridPaginated(props) {
+  var _a;
+  const [paramsPaginacion, setParamsPaginacion] = (0, import_react3.useState)(defaultPagination);
+  const filter = useFilter({ filters: props.filters });
+  const query = (0, import_react_query2.useQuery)({
+    queryKey: ["query", paramsPaginacion, filter == null ? void 0 : filter.form.watch()],
+    queryFn: () => props.getEntitiesPaginated(paramsPaginacion, filter == null ? void 0 : filter.form.watch()).then((res) => res)
+  });
+  const { data, refetch, isFetching, isError } = query;
+  const apiRef = (0, import_x_data_grid2.useGridApiRef)();
+  const { selectedRows } = useCheckboxSelection(
+    data,
+    props.getRowId || (() => 0),
+    apiRef
+  );
+  return {
+    datagridProps: {
+      apiRef,
+      paginationModel: {
+        pageSize: (data == null ? void 0 : data.paginacion.pageSize) || 0,
+        page: (data == null ? void 0 : data.paginacion.actualPage) ? data.paginacion.actualPage - 1 : 0
+      },
+      rowCount: (_a = query.data) == null ? void 0 : _a.paginacion.cantRecords,
+      columns: props.columns.map((col) => {
+        var _a2;
+        return __spreadProps(__spreadValues({}, col), {
+          sortable: false,
+          disableColumnMenu: !((_a2 = props.filters) == null ? void 0 : _a2[col.field]),
+          renderHeader: (params) => {
+            var _a3;
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_material3.Box, { sx: { ":hover > *": { visibility: "visible" } }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { style: { marginRight: 10 }, children: params.colDef.headerName }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: ((_a3 = props.filters) == null ? void 0 : _a3[col.field]) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_material3.IconButton,
+                {
+                  onClick: () => {
+                    apiRef.current.showColumnMenu(params.colDef.field);
+                  },
+                  sx: {
+                    visibility: !!(filter == null ? void 0 : filter.form.getValues(
+                      props.filters[col.field].name
+                    )) ? "visible" : "hidden"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material3.FilterAlt, { fontSize: "small" })
+                }
+              ) })
+            ] });
+          }
+        });
+      }),
+      rows: (data == null ? void 0 : data.lista) || [],
+      onPaginationModelChange: ({ page, pageSize }) => setParamsPaginacion({ actualPage: page + 1, pageSize }),
+      loading: isFetching,
+      slots: {
+        columnMenu: (params) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_x_data_grid2.GridColumnMenu,
+            __spreadProps(__spreadValues({}, params), {
+              slots: {
+                columnMenuUserItem: (params2) => {
+                  if (!props.filters || !filter) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
+                  const {
+                    colDef: { field }
+                  } = params2;
+                  const menuParams = props.filters[field];
+                  if (!menuParams) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
+                  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    Filter,
+                    {
+                      close: () => {
+                        apiRef.current.hideColumnMenu();
+                      },
+                      formMethods: filter.form,
+                      menuParams
+                    }
+                  );
+                },
+                columnMenuSortItem: null,
+                columnMenuFilterItem: null,
+                columnMenuColumnsItem: null
+              }
+            })
+          );
+        }
+      },
+      checkboxSelection: props.checkboxSelection,
+      rowSelectionModel: props.checkboxSelection ? selectedRows.map((row) => props.getRowId(row)) : void 0,
+      getRowId: props.getRowId
+    },
+    control: {
+      query,
+      form: props.filters ? filter == null ? void 0 : filter.form : void 0,
+      selectedRows
+    }
+  };
+}
+
+// src/useItecDataGrid.ts
+function useItecDataGrid(props) {
+  if (props.pagination) {
+    return dataGridPaginated(props);
+  }
+  return dataGridBase(props);
+}
+var useItecDataGrid_default = useItecDataGrid;
+
+// src/ItecDataGrid.tsx
+var import_x_data_grid3 = require("@mui/x-data-grid");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ItecDataGrid(props) {
+  const _a = props, { slots } = _a, rest = __objRest(_a, ["slots"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_x_data_grid3.DataGrid,
+    __spreadValues({
+      paginationMode: "server",
+      filterMode: "server",
+      slots: __spreadValues({
+        columnMenuIcon: () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {})
+      }, slots),
+      autoHeight: true
+    }, rest)
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ItecDataGrid,
+  useItecDataGrid
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/base/datagrid.tsx","../src/common/useFilter.tsx","../src/common/useCheckboxSelection.ts","../src/Filter.tsx","../src/paginated/datagrid-paginated.tsx","../src/useItecDataGrid.ts","../src/ItecDataGrid.tsx"],"sourcesContent":["export { default as useItecDataGrid } from \"./useItecDataGrid\";\r\nexport * from \"./types\";\r\nexport * from \"./paginated/types\";\r\nexport * from \"./base/types\";\r\nexport * from \"./ItecDataGrid\";\r\n","import {\r\n  GridColumnMenu,\r\n  GridValidRowModel,\r\n  useGridApiRef,\r\n} from \"@mui/x-data-grid\";\r\nimport { useQuery } from \"@tanstack/react-query\";\r\nimport { FieldValues } from \"react-hook-form\";\r\nimport { UseItecDataGridProps, UseItecDataGrid } from \"./types\";\r\nimport { FilterAlt } from \"@mui/icons-material\";\r\nimport { Box, IconButton } from \"@mui/material\";\r\nimport { useFilter, useCheckboxSelection } from \"../common\";\r\nimport { Filter } from \"../Filter\";\r\n\r\nexport function dataGridBase<\r\n  TEntity extends GridValidRowModel,\r\n  TFilter extends FieldValues = {}\r\n>(\r\n  props: UseItecDataGridProps<TEntity, TFilter>\r\n): UseItecDataGrid<TEntity, TFilter> {\r\n  const filter = useFilter<TFilter>({ filters: props.filters });\r\n\r\n  const query = useQuery({\r\n    queryKey: [\"query\", filter?.form.watch()],\r\n    queryFn: () => props.getEntities(filter?.form.watch()),\r\n  });\r\n\r\n  const { data, refetch, isFetching, isError } = query;\r\n\r\n  const apiRef = useGridApiRef();\r\n\r\n  const { selectedRows } = useCheckboxSelection<TEntity>(\r\n    data,\r\n    props.getRowId || (() => 0),\r\n    apiRef\r\n  );\r\n  // TODO: habría que mejorar la estructura del código para que cuando no se requiere\r\n  // checkbox selection, no sea necesario el hook.\r\n\r\n  return {\r\n    datagridProps: {\r\n      apiRef: apiRef,\r\n      hideFooterPagination: true,\r\n      columns: props.columns.map((col) => ({\r\n        ...col,\r\n        sortable: false,\r\n        disableColumnMenu: !props.filters?.[col.field],\r\n        renderHeader: (params) => {\r\n          return (\r\n            <Box sx={{ \":hover > *\": { visibility: \"visible\" } }}>\r\n              <strong style={{ marginRight: 10 }}>\r\n                {params.colDef.headerName}\r\n              </strong>\r\n              <>\r\n                {props.filters?.[col.field] && (\r\n                  <IconButton\r\n                    onClick={() => {\r\n                      apiRef.current.showColumnMenu(params.colDef.field);\r\n                      // apiRef.current.showFilterPanel(params.colDef.field);\r\n                    }}\r\n                    sx={{\r\n                      visibility: !!filter?.form.getValues(\r\n                        props.filters[col.field].name\r\n                      )\r\n                        ? \"visible\"\r\n                        : \"hidden\",\r\n                    }}\r\n                  >\r\n                    <FilterAlt fontSize=\"small\" />\r\n                  </IconButton>\r\n                )}\r\n              </>\r\n            </Box>\r\n          );\r\n        },\r\n      })),\r\n      loading: isFetching,\r\n      rows: data || [],\r\n      slots: {\r\n        columnMenu: (params) => {\r\n          return (\r\n            <GridColumnMenu\r\n              {...params}\r\n              slots={{\r\n                columnMenuUserItem: (params) => {\r\n                  if (!props.filters || !filter) return <></>;\r\n                  const {\r\n                    colDef: { field },\r\n                  } = params;\r\n                  // TODO: make field of type union of possible fields\r\n                  const menuParams = props.filters[field];\r\n                  if (!menuParams) return <></>;\r\n                  return (\r\n                    <Filter\r\n                      close={() => {\r\n                        apiRef.current.hideColumnMenu();\r\n                      }}\r\n                      formMethods={filter.form}\r\n                      menuParams={menuParams}\r\n                    />\r\n                  );\r\n                },\r\n                columnMenuSortItem: null,\r\n                columnMenuFilterItem: null,\r\n                columnMenuColumnsItem: null,\r\n              }}\r\n            />\r\n          );\r\n        },\r\n      },\r\n      checkboxSelection: props.checkboxSelection,\r\n      rowSelectionModel: props.checkboxSelection\r\n        ? selectedRows.map((row) => props.getRowId(row))\r\n        : undefined,\r\n      getRowId: props.getRowId,\r\n    },\r\n    control: {\r\n      query: query,\r\n      form: props.filters ? filter?.form : undefined,\r\n      selectedRows,\r\n    },\r\n  };\r\n}\r\n","import { GridColumnMenuProps } from \"@mui/x-data-grid\";\r\nimport { FieldValues, useForm } from \"react-hook-form\";\r\nimport { ItecColFilters } from \"../types\";\r\nimport { Box, Button, IconButton, Stack, Tooltip } from \"@mui/material\";\r\nimport { FilterAltOff, Close, Search } from \"@mui/icons-material\";\r\nimport { useState } from \"react\";\r\nimport { Select } from \"@itaptec/form_components\";\r\n\r\ntype UseFilterProps<TFilter extends FieldValues> = {\r\n  filters: ItecColFilters<TFilter> | undefined;\r\n};\r\n\r\nexport type UseFilter<TFilter extends FieldValues> = {\r\n  columnMenuComponent: React.JSXElementConstructor<GridColumnMenuProps>;\r\n  filter: TFilter | undefined;\r\n};\r\n\r\nexport function useFilter<TFilter extends FieldValues>(\r\n  props: UseFilterProps<TFilter>\r\n) {\r\n  const { filters } = props;\r\n\r\n  const [filter, setFilter] = useState<TFilter>();\r\n\r\n  const form = useForm<TFilter>({\r\n    mode: \"onChange\",\r\n  });\r\n\r\n  if (!filters) {\r\n    return undefined;\r\n  }\r\n\r\n  // const onFilterChange = () => {\r\n  //   handleSubmit(setFilter)();\r\n  // };\r\n\r\n  return {\r\n    // columnMenuComponent: (props) => {\r\n    //   const {\r\n    //     colDef: { field },\r\n    //   } = props;\r\n\r\n    //   // TODO: make field of type union of possible fields\r\n\r\n    //   const menuParams = filters?.[field];\r\n\r\n    //   if (!menuParams) return undefined;\r\n\r\n    //   return (\r\n    //     <Stack\r\n    //       minWidth={300}\r\n    //       p={2}\r\n    //       spacing={2}\r\n    //       direction=\"row\"\r\n    //       display=\"flex\"\r\n    //       justifyContent=\"space-between\"\r\n    //       alignItems=\"center\"\r\n    //     >\r\n    //       <Box sx={{ width: \"100%\" }}>\r\n    //         {menuParams.type === \"select\" && (\r\n    //           <Select\r\n    //             name={menuParams.name}\r\n    //             control={control}\r\n    //             getOptions={menuParams.getOptions}\r\n    //             size=\"small\"\r\n    //             fullWidth\r\n    //           />\r\n    //         )}\r\n    //       </Box>\r\n    //       <Box display=\"flex\">\r\n    //         <Tooltip title=\"Limpiar filtro\">\r\n    //           <IconButton\r\n    //             onClick={() => {\r\n    //               resetField(menuParams.name);\r\n    //               // onFilterChange(); // search on filter reset\r\n    //             }}\r\n    //           >\r\n    //             <FilterAltOff />\r\n    //           </IconButton>\r\n    //         </Tooltip>\r\n    //         <Tooltip title=\"Cerrar filtro\">\r\n    //           <IconButton>\r\n    //             <Close />\r\n    //           </IconButton>\r\n    //         </Tooltip>\r\n    //       </Box>\r\n    //     </Stack>\r\n    //   );\r\n    // },\r\n    form,\r\n    filter,\r\n  };\r\n}\r\n\r\n{\r\n  /* <Button\r\n              type=\"submit\"\r\n              onClick={onFilterChange}\r\n              startIcon={<Search />}\r\n            >\r\n              Buscar\r\n            </Button> */\r\n}\r\n","import { EntityListWithPagination } from \"@itaptec/http_client\";\r\nimport {\r\n  GridEventListener,\r\n  GridRowIdGetter,\r\n  GridRowSelectionModel,\r\n  GridValidRowModel,\r\n  useGridApiRef,\r\n} from \"@mui/x-data-grid\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\n/**\r\n * Return type of the `useCheckboxSelection` hook.\r\n */\r\nexport type UseCheckboxSelection<TEntity extends GridValidRowModel> = {\r\n  selectedRows: TEntity[];\r\n};\r\n\r\n// Overloads para el hook, con y sin paginación.\r\n\r\nexport function useCheckboxSelection<TEntity extends GridValidRowModel>(\r\n  data: TEntity[] | undefined,\r\n  getRowId: GridRowIdGetter<TEntity>,\r\n  apiRef: ReturnType<typeof useGridApiRef>\r\n): UseCheckboxSelection<TEntity>;\r\n\r\nexport function useCheckboxSelection<TEntity extends GridValidRowModel>(\r\n  data: EntityListWithPagination<TEntity> | undefined,\r\n  getRowId: GridRowIdGetter<TEntity>,\r\n  apiRef: ReturnType<typeof useGridApiRef>\r\n): UseCheckboxSelection<TEntity>;\r\n\r\n/**\r\n *\r\n * @param data The data currently displayed in the Data Grid.\r\n * @param getRowId Function to get the id of a given row.\r\n */\r\nexport function useCheckboxSelection<TEntity extends GridValidRowModel>(\r\n  data: TEntity[] | EntityListWithPagination<TEntity> | undefined,\r\n  getRowId: GridRowIdGetter<TEntity>,\r\n  apiRef: ReturnType<typeof useGridApiRef>\r\n) {\r\n  if (Array.isArray(data)) {\r\n    return useCheckboxSelectionBasic(data, getRowId, apiRef);\r\n  }\r\n\r\n  return useCheckboxSelectionPaginated(data, getRowId, apiRef);\r\n}\r\n\r\n// Implementaciones del overload con y sin paginación.\r\n\r\nfunction useCheckboxSelectionPaginated<TEntity extends GridValidRowModel>(\r\n  data: EntityListWithPagination<TEntity> | undefined,\r\n  getRowId: GridRowIdGetter<TEntity>,\r\n  apiRef: ReturnType<typeof useGridApiRef>\r\n) {\r\n  const [selectedRows, setSelectedRows] = useState<TEntity[]>([]);\r\n\r\n  useEffect(() => {\r\n    const handleRowClick: GridEventListener<\"rowSelectionCheckboxChange\"> = ({\r\n      id,\r\n      value,\r\n    }) => {\r\n      if (!data) return;\r\n\r\n      if (value) {\r\n        const newValue = data.lista.find((x) => getRowId(x) === id);\r\n        newValue && setSelectedRows((prev) => [...prev, newValue]);\r\n      } else {\r\n        setSelectedRows((prev) => [...prev.filter((x) => getRowId(x) !== id)]);\r\n      }\r\n    };\r\n\r\n    // The `subscribeEvent` method will automatically unsubscribe in the cleanup function of the `useEffect`.\r\n    return apiRef.current.subscribeEvent(\r\n      \"rowSelectionCheckboxChange\",\r\n      handleRowClick\r\n    );\r\n  }, [apiRef, data]);\r\n\r\n  return {\r\n    selectedRows,\r\n  };\r\n}\r\n\r\nfunction useCheckboxSelectionBasic<TEntity extends GridValidRowModel>(\r\n  data: TEntity[] | undefined,\r\n  getRowId: GridRowIdGetter<TEntity>,\r\n  apiRef: ReturnType<typeof useGridApiRef>\r\n) {\r\n  const [selectedRows, setSelectedRows] = useState<TEntity[]>([]);\r\n\r\n  useEffect(() => {\r\n    const handleRowClick: GridEventListener<\"rowSelectionCheckboxChange\"> = ({\r\n      id,\r\n      value,\r\n    }) => {\r\n      if (!data) return;\r\n\r\n      if (value) {\r\n        const newValue = data.find((x) => getRowId(x) === id);\r\n        newValue && setSelectedRows((prev) => [...prev, newValue]);\r\n      } else {\r\n        setSelectedRows((prev) => [...prev.filter((x) => getRowId(x) !== id)]);\r\n      }\r\n    };\r\n\r\n    // The `subscribeEvent` method will automatically unsubscribe in the cleanup function of the `useEffect`.\r\n    return apiRef.current.subscribeEvent(\r\n      \"rowSelectionCheckboxChange\",\r\n      handleRowClick\r\n    );\r\n  }, [apiRef, data]);\r\n\r\n  return {\r\n    selectedRows,\r\n  };\r\n}\r\n","import { FilterAltOff, Close, Search } from \"@mui/icons-material\";\r\nimport {\r\n  Stack,\r\n  Box,\r\n  Tooltip,\r\n  IconButton,\r\n  Divider,\r\n  Typography,\r\n  InputAdornment,\r\n} from \"@mui/material\";\r\nimport { Control, FieldValues, UseFormReturn } from \"react-hook-form\";\r\nimport { ItecColFilterParams } from \"./types\";\r\nimport {\r\n  Multiselect,\r\n  Select,\r\n  TextField,\r\n  ControlledDateRangePicker,\r\n  ToggleButtonGroup,\r\n  ToggleButtonGroupMultiple,\r\n} from \"@itaptec/form_components\";\r\n\r\nexport type FilterProps<TFilter extends FieldValues> = {\r\n  close: () => void;\r\n  menuParams: ItecColFilterParams<TFilter>;\r\n  //   control: Control<TFilter>;\r\n  formMethods: UseFormReturn<TFilter>;\r\n};\r\n\r\nexport function Filter<TFilter extends FieldValues = FieldValues>(\r\n  props: FilterProps<TFilter>\r\n) {\r\n  const {\r\n    close,\r\n    menuParams,\r\n    formMethods: { control, resetField },\r\n  } = props;\r\n\r\n  // TODO: autofocus fields on mount\r\n  return (\r\n    <Stack\r\n      minWidth={300}\r\n      px={1}\r\n      spacing={2}\r\n      direction=\"row\"\r\n      display=\"flex\"\r\n      justifyContent=\"space-between\"\r\n      alignItems=\"center\"\r\n    >\r\n      <Box sx={{ width: \"100%\" }}>\r\n        {menuParams.type === \"select\" && (\r\n          <Select\r\n            name={menuParams.name}\r\n            control={control}\r\n            {...menuParams.props}\r\n          />\r\n        )}\r\n        {menuParams.type === \"multiselect\" && (\r\n          <Multiselect\r\n            name={menuParams.name}\r\n            control={control}\r\n            {...menuParams.props}\r\n          />\r\n        )}\r\n        {menuParams.type === \"date-range\" && (\r\n          <ControlledDateRangePicker\r\n            label={\"Fecha\"}\r\n            control={control}\r\n            {...menuParams.props}\r\n          />\r\n        )}\r\n        {menuParams.type === \"text\" && (\r\n          <TextField\r\n            name={menuParams.name}\r\n            control={control}\r\n            InputProps={{\r\n              startAdornment: (\r\n                <InputAdornment position=\"start\">\r\n                  <Search />\r\n                </InputAdornment>\r\n              ),\r\n            }}\r\n            debounceTime={500}\r\n            {...menuParams.props}\r\n          />\r\n        )}\r\n        {menuParams.type === \"button-group\" && (\r\n          <ToggleButtonGroup\r\n            name={menuParams.name}\r\n            control={control}\r\n            {...menuParams.props}\r\n          />\r\n        )}\r\n        {menuParams.type === \"multiple-button-group\" && (\r\n          <ToggleButtonGroupMultiple\r\n            name={menuParams.name}\r\n            control={control}\r\n            {...menuParams.props}\r\n          />\r\n        )}\r\n      </Box>\r\n      <Box display=\"flex\">\r\n        <Tooltip title=\"Limpiar filtro\">\r\n          <IconButton\r\n            onClick={() => {\r\n              resetField(menuParams.name);\r\n              close();\r\n              // onFilterChange(); // search on filter reset\r\n            }}\r\n          >\r\n            <FilterAltOff />\r\n          </IconButton>\r\n        </Tooltip>\r\n        <Tooltip title=\"Cerrar filtro\">\r\n          <IconButton onClick={close}>\r\n            <Close />\r\n          </IconButton>\r\n        </Tooltip>\r\n      </Box>\r\n    </Stack>\r\n  );\r\n}\r\n","import { PaginationRequest } from \"@itaptec/http_client\";\r\nimport {\r\n  GridColumnMenu,\r\n  GridValidRowModel,\r\n  useGridApiRef,\r\n} from \"@mui/x-data-grid\";\r\nimport { useState } from \"react\";\r\nimport { FieldValues } from \"react-hook-form\";\r\nimport {\r\n  UseItecDataGridPaginated,\r\n  UseItecDataGridPaginatedProps,\r\n} from \"./types\";\r\nimport { useQuery } from \"@tanstack/react-query\";\r\nimport { useFilter, useCheckboxSelection } from \"../common\";\r\nimport { FilterAlt } from \"@mui/icons-material\";\r\nimport { Filter } from \"../Filter\";\r\nimport { Box, IconButton } from \"@mui/material\";\r\n\r\nconst defaultPagination: PaginationRequest = {\r\n  actualPage: 1,\r\n  pageSize: 24,\r\n};\r\n\r\nexport function dataGridPaginated<\r\n  TEntity extends GridValidRowModel,\r\n  TFilter extends FieldValues = {}\r\n>(\r\n  props: UseItecDataGridPaginatedProps<TEntity, TFilter>\r\n): UseItecDataGridPaginated<TEntity, TFilter> {\r\n  const [paramsPaginacion, setParamsPaginacion] =\r\n    useState<PaginationRequest>(defaultPagination);\r\n\r\n  const filter = useFilter<TFilter>({ filters: props.filters });\r\n\r\n  const query = useQuery({\r\n    queryKey: [\"query\", paramsPaginacion, filter?.form.watch()],\r\n    queryFn: () =>\r\n      props\r\n        .getEntitiesPaginated(paramsPaginacion, filter?.form.watch())\r\n        .then((res) => res),\r\n  });\r\n\r\n  const { data, refetch, isFetching, isError } = query;\r\n\r\n  const apiRef = useGridApiRef();\r\n\r\n  const { selectedRows } = useCheckboxSelection<TEntity>(\r\n    data,\r\n    props.getRowId || (() => 0),\r\n    apiRef\r\n  );\r\n  // TODO: habría que mejorar la estructura del código para que cuando no se requiere\r\n  // checkbox selection, no sea necesario el hook.\r\n\r\n  return {\r\n    datagridProps: {\r\n      apiRef: apiRef,\r\n      paginationModel: {\r\n        pageSize: data?.paginacion.pageSize || 0,\r\n        page: data?.paginacion.actualPage ? data.paginacion.actualPage - 1 : 0,\r\n      },\r\n      rowCount: query.data?.paginacion.cantRecords,\r\n      columns: props.columns.map((col) => ({\r\n        ...col,\r\n        sortable: false,\r\n        disableColumnMenu: !props.filters?.[col.field],\r\n        renderHeader: (params) => {\r\n          return (\r\n            <Box sx={{ \":hover > *\": { visibility: \"visible\" } }}>\r\n              <strong style={{ marginRight: 10 }}>\r\n                {params.colDef.headerName}\r\n              </strong>\r\n              <>\r\n                {props.filters?.[col.field] && (\r\n                  <IconButton\r\n                    onClick={() => {\r\n                      apiRef.current.showColumnMenu(params.colDef.field);\r\n                      // apiRef.current.showFilterPanel(params.colDef.field);\r\n                    }}\r\n                    sx={{\r\n                      visibility: !!filter?.form.getValues(\r\n                        props.filters[col.field].name\r\n                      )\r\n                        ? \"visible\"\r\n                        : \"hidden\",\r\n                    }}\r\n                  >\r\n                    <FilterAlt fontSize=\"small\" />\r\n                  </IconButton>\r\n                )}\r\n              </>\r\n            </Box>\r\n          );\r\n        },\r\n      })),\r\n      rows: data?.lista || [],\r\n      onPaginationModelChange: ({ page, pageSize }) =>\r\n        setParamsPaginacion({ actualPage: page + 1, pageSize: pageSize }),\r\n      loading: isFetching,\r\n      slots: {\r\n        columnMenu: (params) => {\r\n          return (\r\n            <GridColumnMenu\r\n              {...params}\r\n              slots={{\r\n                columnMenuUserItem: (params) => {\r\n                  if (!props.filters || !filter) return <></>;\r\n                  const {\r\n                    colDef: { field },\r\n                  } = params;\r\n                  // TODO: make field of type union of possible fields\r\n                  const menuParams = props.filters[field];\r\n                  if (!menuParams) return <></>;\r\n                  return (\r\n                    <Filter\r\n                      close={() => {\r\n                        apiRef.current.hideColumnMenu();\r\n                      }}\r\n                      formMethods={filter.form}\r\n                      menuParams={menuParams}\r\n                    />\r\n                  );\r\n                },\r\n                columnMenuSortItem: null,\r\n                columnMenuFilterItem: null,\r\n                columnMenuColumnsItem: null,\r\n              }}\r\n            />\r\n          );\r\n        },\r\n      },\r\n      checkboxSelection: props.checkboxSelection,\r\n      rowSelectionModel: props.checkboxSelection\r\n        ? selectedRows.map((row) => props.getRowId(row))\r\n        : undefined,\r\n      getRowId: props.getRowId,\r\n    },\r\n    control: {\r\n      query: query,\r\n      form: props.filters ? filter?.form : undefined,\r\n      selectedRows,\r\n    },\r\n  };\r\n}\r\n","import { GridValidRowModel } from \"@mui/x-data-grid\";\r\nimport { FieldValues } from \"react-hook-form\";\r\nimport { UseItecDataGrid, UseItecDataGridProps, dataGridBase } from \"./base\";\r\nimport {\r\n  UseItecDataGridPaginatedProps,\r\n  UseItecDataGridPaginated,\r\n  dataGridPaginated,\r\n} from \"./paginated\";\r\n\r\n// function useItecDataGrid<\r\n//   Paginated extends boolean = false,\r\n//   Filterable extends boolean = false,\r\n//   Sortable extends boolean = false,\r\n//   Selectable extends boolean = false,\r\n//   TEntity extends GridValidRowModel,\r\n//   TFilter extends FieldValues = {}\r\n// >(\r\n//   props: UseItecDataGridPaginatedProps<TEntity, TFilter>\r\n// ): UseItecDataGrid<TEntity>;\r\n\r\nfunction useItecDataGrid<\r\n  TEntity extends GridValidRowModel,\r\n  TFilter extends FieldValues = {}\r\n>(\r\n  props: UseItecDataGridPaginatedProps<TEntity, TFilter>\r\n): UseItecDataGrid<TEntity, TFilter>;\r\n\r\nfunction useItecDataGrid<\r\n  TEntity extends GridValidRowModel,\r\n  TFilter extends FieldValues = {}\r\n>(\r\n  props: UseItecDataGridProps<TEntity, TFilter>\r\n): UseItecDataGridPaginated<TEntity, TFilter>;\r\n\r\nfunction useItecDataGrid<\r\n  TEntity extends GridValidRowModel,\r\n  TFilter extends FieldValues = {}\r\n>(\r\n  props:\r\n    | UseItecDataGridProps<TEntity, TFilter>\r\n    | UseItecDataGridPaginatedProps<TEntity, TFilter>\r\n):\r\n  | UseItecDataGrid<TEntity, TFilter>\r\n  | UseItecDataGridPaginated<TEntity, TFilter> {\r\n  if (props.pagination) {\r\n    return dataGridPaginated<TEntity, TFilter>(props);\r\n  }\r\n\r\n  return dataGridBase<TEntity, TFilter>(props);\r\n}\r\n\r\nexport default useItecDataGrid;\r\n","import { DataGrid, DataGridProps, GridValidRowModel } from \"@mui/x-data-grid\";\r\n\r\nexport type ItecDataGridProps<TEntity extends GridValidRowModel> = Omit<\r\n  DataGridProps<TEntity>,\r\n  \"paginationMode\" | \"filterMode\"\r\n>;\r\n\r\nexport function ItecDataGrid<TEntity extends GridValidRowModel>(\r\n  props: ItecDataGridProps<TEntity>\r\n) {\r\n  const { slots, ...rest } = props;\r\n\r\n  return (\r\n    <DataGrid\r\n      paginationMode=\"server\"\r\n      filterMode=\"server\"\r\n      slots={{\r\n        columnMenuIcon: () => <></>,\r\n        ...slots,\r\n      }}\r\n      autoHeight={true}\r\n      {...rest}\r\n    />\r\n  );\r\n}\r\n"],"mappings":"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","names":["import_icons_material","import_material","import_react","import_jsx_runtime","_a","params","import_x_data_grid","import_react","import_react_query","import_icons_material","import_material","import_jsx_runtime","_a","params","import_x_data_grid","import_jsx_runtime"]}