@itaptec/datagrid 0.0.1-beta.8

package/dist/index.mjs

@@ -0,0 +1,501 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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;
+};
+
+// src/base/datagrid.tsx
+import {
+  GridColumnMenu,
+  useGridApiRef
+} from "@mui/x-data-grid";
+import { useQuery } from "@tanstack/react-query";
+import { FilterAlt } from "@mui/icons-material";
+import { Box as Box2, IconButton as IconButton2 } from "@mui/material";
+
+// src/common/useFilter.tsx
+import { useForm } from "react-hook-form";
+import { useState } from "react";
+function useFilter(props) {
+  const { filters } = props;
+  const [filter, setFilter] = useState();
+  const 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
+import { useEffect, useState as useState2 } from "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] = useState2([]);
+  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] = useState2([]);
+  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
+import { FilterAltOff, Close, Search } from "@mui/icons-material";
+import {
+  Stack,
+  Box,
+  Tooltip,
+  IconButton,
+  InputAdornment
+} from "@mui/material";
+import {
+  Multiselect,
+  Select,
+  TextField,
+  ControlledDateRangePicker,
+  ToggleButtonGroup,
+  ToggleButtonGroupMultiple
+} from "@itaptec/form_components";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Filter(props) {
+  const {
+    close,
+    menuParams,
+    formMethods: { control, resetField }
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      minWidth: 300,
+      px: 1,
+      spacing: 2,
+      direction: "row",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { width: "100%" }, children: [
+          menuParams.type === "select" && /* @__PURE__ */ jsx(
+            Select,
+            __spreadValues({
+              name: menuParams.name,
+              control
+            }, menuParams.props)
+          ),
+          menuParams.type === "multiselect" && /* @__PURE__ */ jsx(
+            Multiselect,
+            __spreadValues({
+              name: menuParams.name,
+              control
+            }, menuParams.props)
+          ),
+          menuParams.type === "date-range" && /* @__PURE__ */ jsx(
+            ControlledDateRangePicker,
+            __spreadValues({
+              label: "Fecha",
+              control
+            }, menuParams.props)
+          ),
+          menuParams.type === "text" && /* @__PURE__ */ jsx(
+            TextField,
+            __spreadValues({
+              name: menuParams.name,
+              control,
+              InputProps: {
+                startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(Search, {}) })
+              },
+              debounceTime: 500
+            }, menuParams.props)
+          ),
+          menuParams.type === "button-group" && /* @__PURE__ */ jsx(
+            ToggleButtonGroup,
+            __spreadValues({
+              name: menuParams.name,
+              control
+            }, menuParams.props)
+          ),
+          menuParams.type === "multiple-button-group" && /* @__PURE__ */ jsx(
+            ToggleButtonGroupMultiple,
+            __spreadValues({
+              name: menuParams.name,
+              control
+            }, menuParams.props)
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { display: "flex", children: [
+          /* @__PURE__ */ jsx(Tooltip, { title: "Limpiar filtro", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: () => {
+                resetField(menuParams.name);
+                close();
+              },
+              children: /* @__PURE__ */ jsx(FilterAltOff, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: "Cerrar filtro", children: /* @__PURE__ */ jsx(IconButton, { onClick: close, children: /* @__PURE__ */ jsx(Close, {}) }) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/base/datagrid.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function dataGridBase(props) {
+  const filter = useFilter({ filters: props.filters });
+  const 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 = 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__ */ jsxs2(Box2, { sx: { ":hover > *": { visibility: "visible" } }, children: [
+              /* @__PURE__ */ jsx2("strong", { style: { marginRight: 10 }, children: params.colDef.headerName }),
+              /* @__PURE__ */ jsx2(Fragment, { children: ((_a2 = props.filters) == null ? void 0 : _a2[col.field]) && /* @__PURE__ */ jsx2(
+                IconButton2,
+                {
+                  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__ */ jsx2(FilterAlt, { fontSize: "small" })
+                }
+              ) })
+            ] });
+          }
+        });
+      }),
+      loading: isFetching,
+      rows: data || [],
+      slots: {
+        columnMenu: (params) => {
+          return /* @__PURE__ */ jsx2(
+            GridColumnMenu,
+            __spreadProps(__spreadValues({}, params), {
+              slots: {
+                columnMenuUserItem: (params2) => {
+                  if (!props.filters || !filter) return /* @__PURE__ */ jsx2(Fragment, {});
+                  const {
+                    colDef: { field }
+                  } = params2;
+                  const menuParams = props.filters[field];
+                  if (!menuParams) return /* @__PURE__ */ jsx2(Fragment, {});
+                  return /* @__PURE__ */ jsx2(
+                    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
+import {
+  GridColumnMenu as GridColumnMenu2,
+  useGridApiRef as useGridApiRef2
+} from "@mui/x-data-grid";
+import { useState as useState3 } from "react";
+import { useQuery as useQuery2 } from "@tanstack/react-query";
+import { FilterAlt as FilterAlt2 } from "@mui/icons-material";
+import { Box as Box3, IconButton as IconButton3 } from "@mui/material";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var defaultPagination = {
+  actualPage: 1,
+  pageSize: 24
+};
+function dataGridPaginated(props) {
+  var _a;
+  const [paramsPaginacion, setParamsPaginacion] = useState3(defaultPagination);
+  const filter = useFilter({ filters: props.filters });
+  const query = useQuery2({
+    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 = useGridApiRef2();
+  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__ */ jsxs3(Box3, { sx: { ":hover > *": { visibility: "visible" } }, children: [
+              /* @__PURE__ */ jsx3("strong", { style: { marginRight: 10 }, children: params.colDef.headerName }),
+              /* @__PURE__ */ jsx3(Fragment2, { children: ((_a3 = props.filters) == null ? void 0 : _a3[col.field]) && /* @__PURE__ */ jsx3(
+                IconButton3,
+                {
+                  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__ */ jsx3(FilterAlt2, { fontSize: "small" })
+                }
+              ) })
+            ] });
+          }
+        });
+      }),
+      rows: (data == null ? void 0 : data.lista) || [],
+      onPaginationModelChange: ({ page, pageSize }) => setParamsPaginacion({ actualPage: page + 1, pageSize }),
+      loading: isFetching,
+      slots: {
+        columnMenu: (params) => {
+          return /* @__PURE__ */ jsx3(
+            GridColumnMenu2,
+            __spreadProps(__spreadValues({}, params), {
+              slots: {
+                columnMenuUserItem: (params2) => {
+                  if (!props.filters || !filter) return /* @__PURE__ */ jsx3(Fragment2, {});
+                  const {
+                    colDef: { field }
+                  } = params2;
+                  const menuParams = props.filters[field];
+                  if (!menuParams) return /* @__PURE__ */ jsx3(Fragment2, {});
+                  return /* @__PURE__ */ jsx3(
+                    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
+import { DataGrid } from "@mui/x-data-grid";
+import { Fragment as Fragment3, jsx as jsx4 } from "react/jsx-runtime";
+function ItecDataGrid(props) {
+  const _a = props, { slots } = _a, rest = __objRest(_a, ["slots"]);
+  return /* @__PURE__ */ jsx4(
+    DataGrid,
+    __spreadValues({
+      paginationMode: "server",
+      filterMode: "server",
+      slots: __spreadValues({
+        columnMenuIcon: () => /* @__PURE__ */ jsx4(Fragment3, {})
+      }, slots),
+      autoHeight: true
+    }, rest)
+  );
+}
+export {
+  ItecDataGrid,
+  useItecDataGrid_default as useItecDataGrid
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../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":["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":["Box","IconButton","useState","jsx","jsxs","_a","Box","IconButton","params","GridColumnMenu","useGridApiRef","useState","useQuery","FilterAlt","Box","IconButton","Fragment","jsx","jsxs","useState","useQuery","useGridApiRef","_a","Box","IconButton","FilterAlt","GridColumnMenu","params","Fragment","jsx"]}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@itaptec/datagrid",
+  "version": "0.0.1-beta.8",
+  "description": "This README would normally document whatever steps are necessary to get your application up and running.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@bitbucket.org/itaptecteam/packagesfrontend_itec-datagrid.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://bitbucket.org/itaptecteam/packagesfrontend_itec-datagrid/issues"
+  },
+  "homepage": "https://bitbucket.org/itaptecteam/packagesfrontend_itec-datagrid#readme",
+  "devDependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@faker-js/faker": "^8.4.1",
+    "@fontsource/material-icons": "^5.0.13",
+    "@fontsource/roboto": "^5.0.8",
+    "@itaptec/form_components": "0.0.1-beta.31",
+    "@itaptec/http_client": "0.0.1-beta.10",
+    "@mui/icons-material": "^5.15.10",
+    "@mui/material": "^5.15.10",
+    "@mui/x-data-grid": "^6.19.4",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addon-onboarding": "1.0.11",
+    "@storybook/addon-themes": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/manager-api": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
+    "@storybook/test": "^7.6.17",
+    "@storybook/theming": "^7.6.17",
+    "@tanstack/eslint-plugin-query": "^5.20.1",
+    "@tanstack/react-query": "^5.24.1",
+    "@types/react": "^18.2.57",
+    "react": "^18.2.0",
+    "react-dom": "18.2.0",
+    "react-hook-form": "^7.50.1",
+    "storybook": "^7.6.17",
+    "ts-node": "^10.9.2",
+    "tslib": "^2.6.2",
+    "tsup": "^8.0.2",
+    "typescript": "^5.3.3"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@itaptec/form_components": "0.0.1-beta.31",
+    "@itaptec/http_client": "0.0.1-beta.10",
+    "@mui/icons-material": "^5.15.10",
+    "@mui/material": "^5.15.10",
+    "@mui/x-data-grid": "^6.19.4",
+    "@tanstack/react-query": "^5.24.1",
+    "react": "^18.2.0",
+    "react-hook-form": "^7.50.1"
+  }
+}