@evoke-platform/ui-components 1.0.0-dev.208 → 1.0.0-dev.209

package/dist/published/components/core/index.d.ts

@@ -45,6 +45,7 @@ export { Popover } from './Popover';
 export { Popper } from './Popper';
 export { SvgIcon, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, ListItemButton, ListItemText, CardActions, CardActionArea, CardContent, CardMedia, CardHeader, Input, InputLabel, InputAdornment, } from '@mui/material';
 export { LoadingButton, TabContext, TabList, TabPanel, TreeItem, TreeView } from '@mui/lab';
+export { useGridApiRef } from '@mui/x-data-grid';
 export type { GridSize } from '@mui/material';
 export type { AutocompleteOption } from './Autocomplete/Autocomplete';
-export type { GridCellParams, GridColDef, GridValueFormatterParams, GridValueGetterParams, GridEventListener, } from '@mui/x-data-grid';
+export type { GridCellParams, GridColDef, GridFilterModel, GridValueFormatterParams, GridValueGetterParams, GridEventListener, } from '@mui/x-data-grid';

package/dist/published/components/core/index.js

@@ -46,3 +46,4 @@ export { Popper } from './Popper';
 //TODO: Review following components. They also need theme control:
 export { SvgIcon, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, ListItemButton, ListItemText, CardActions, CardActionArea, CardContent, CardMedia, CardHeader, Input, InputLabel, InputAdornment, } from '@mui/material';
 export { LoadingButton, TabContext, TabList, TabPanel, TreeItem, TreeView } from '@mui/lab';
+export { useGridApiRef } from '@mui/x-data-grid';

package/dist/published/components/custom/DataGrid/DataGrid.d.ts

@@ -11,5 +11,9 @@ export declare type DataGridProps<T extends GridValidRowModel> = MuiDataGridProp
     theme?: Theme;
     title?: string;
     bulkAction?: BulkAction;
+    filterSettings?: {
+        mode: 'client' | 'server';
+        maxRows?: number;
+    };
 };
 export default function <T extends GridValidRowModel>(props: DataGridProps<T>): JSX.Element;

package/dist/published/components/custom/DataGrid/DataGrid.js

@@ -9,16 +9,30 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { DataGrid as MuiDataGrid } from '@mui/x-data-grid';
-import React, { useMemo, useState } from 'react';
+import { DataGrid as MuiDataGrid, getGridStringOperators, getGridDateOperators, getGridSingleSelectOperators, getGridBooleanOperators, GridPagination, getGridNumericOperators, } from '@mui/x-data-grid';
+import React, { useState } from 'react';
 import Toolbar from './Toolbar';
 import UIThemeProvider from '../../../theme';
+import { Box, Typography } from '@mui/material';
 export default function (props) {
-    const { onRefresh, loading, theme, title, bulkAction } = props, rest = __rest(props, ["onRefresh", "loading", "theme", "title", "bulkAction"]);
+    var _a;
+    const { onRefresh, loading, theme, title, bulkAction, filterSettings, columns, rows } = props, rest = __rest(props, ["onRefresh", "loading", "theme", "title", "bulkAction", "filterSettings", "columns", "rows"]);
     const [anchorEl, setAnchorEl] = useState();
-    const toolbar = useMemo(() => () => (React.createElement(Toolbar, { onRefresh: onRefresh, setAnchorEl: setAnchorEl, loading: loading, theme: theme, title: title, bulkAction: bulkAction })), [onRefresh, loading]);
+    const addColumnFilterOperators = (columns) => {
+        return (filterSettings === null || filterSettings === void 0 ? void 0 : filterSettings.mode) === 'server'
+            ? columns.map((column) => (Object.assign(Object.assign({}, column), { filterOperators: column.type === 'string'
+                    ? getGridStringOperators().filter((o) => !['isEmpty', 'isNotEmpty', 'isAny'].includes(o.value))
+                    : column.type === 'date' || column.type === 'dateTime'
+                        ? getGridDateOperators(column.type === 'dateTime').filter((o) => !['isEmpty', 'isNotEmpty'].includes(o.value))
+                        : column.type === 'number'
+                            ? getGridNumericOperators().filter((o) => !['isEmpty', 'isNotEmpty'].includes(o.value))
+                            : column.type === 'singleSelect'
+                                ? getGridSingleSelectOperators().filter((o) => !['isEmpty', 'isNotEmpty', 'isAnyOf'].includes(o.value))
+                                : getGridBooleanOperators().filter((o) => !['isEmpty', 'isNotEmpty'].includes(o.value)) })))
+            : columns;
+    };
     return (React.createElement(UIThemeProvider, { args: { theme: theme } },
-        React.createElement(MuiDataGrid, Object.assign({ onMenuOpen: (env) => setAnchorEl(env.target), loading: loading }, rest, { sx: Object.assign({ borderRadius: '8px', border: 'none', '& .MuiDataGrid-columnHeaders': {
+        React.createElement(MuiDataGrid, Object.assign({ onMenuOpen: (env) => setAnchorEl(env.target), loading: loading, filterMode: (_a = filterSettings === null || filterSettings === void 0 ? void 0 : filterSettings.mode) !== null && _a !== void 0 ? _a : 'client', rows: rows }, rest, { columns: addColumnFilterOperators(columns), sx: Object.assign({ borderRadius: '8px', border: 'none', '& .MuiDataGrid-columnHeaders': {
                     backgroundColor: '#F4F6F8',
                     color: '#637381',
                     borderRadius: '8px 8px 0 0',
@@ -49,6 +63,14 @@ export default function (props) {
                 toolbarFilters: '',
                 toolbarExport: 'Download',
             }, componentsProps: {
+                toolbar: {
+                    onRefresh,
+                    setAnchorEl,
+                    loading,
+                    theme,
+                    title,
+                    bulkAction,
+                },
                 panel: {
                     anchorEl: anchorEl,
                     placement: 'bottom-end',
@@ -62,6 +84,12 @@ export default function (props) {
                     },
                 },
             }, components: {
-                Toolbar: toolbar,
+                Toolbar: Toolbar,
+                Footer: () => {
+                    return (React.createElement(Box, { display: 'flex', alignItems: 'center', justifyContent: 'space-between', sx: { border: '1px solid #eee', borderRadius: '0 0 6px 6px' } },
+                        React.createElement(Box, null, (filterSettings === null || filterSettings === void 0 ? void 0 : filterSettings.mode) === 'server' && (filterSettings === null || filterSettings === void 0 ? void 0 : filterSettings.maxRows) === (rows === null || rows === void 0 ? void 0 : rows.length) && (React.createElement(Typography, { marginLeft: '8px', color: '#8f8c8c', fontSize: '14px' }, `You are viewing ${filterSettings.maxRows} records. If you can't find a record, please refine your
+                                            search.`))),
+                        React.createElement(GridPagination, null)));
+                },
             } }))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.208",
+    "version": "1.0.0-dev.209",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -92,7 +92,7 @@
         "@mui/icons-material": "^5.8.4",
         "@mui/lab": "^5.0.0-alpha.105",
         "@mui/material": "^5.10.11",
-        "@mui/x-data-grid": "^6.2.1",
+        "@mui/x-data-grid": "^6.4.0",
         "@mui/x-date-pickers": "^5.0.13",
         "@react-querybuilder/dnd": "^5.4.1",
         "@react-querybuilder/material": "^6.5.0",