@evoke-platform/ui-components 1.0.0-dev.214 → 1.0.0-dev.215

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

@@ -6,6 +6,10 @@ export declare type BulkAction = {
     onClick: () => void;
     selectionCount?: number;
 };
+declare type LoadingOptions = {
+    color: string;
+    messages?: string[];
+};
 export declare type DataGridProps<T extends GridValidRowModel> = MuiDataGridProps<T> & {
     onRefresh?: () => void;
     theme?: Theme;
@@ -14,7 +18,10 @@ export declare type DataGridProps<T extends GridValidRowModel> = MuiDataGridProp
     filterSettings?: {
         mode: 'client' | 'server';
         maxRows?: number;
+        filterColumns?: boolean;
     };
     hideSearchbar?: boolean;
+    loadingOptions?: LoadingOptions;
 };
 export default function <T extends GridValidRowModel>(props: DataGridProps<T>): JSX.Element;
+export {};

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

@@ -10,27 +10,43 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { DataGrid as MuiDataGrid, getGridStringOperators, getGridDateOperators, getGridSingleSelectOperators, getGridBooleanOperators, GridPagination, getGridNumericOperators, } from '@mui/x-data-grid';
-import React, { useState } from 'react';
+import { lighten } from '@mui/material';
+import React, { useEffect, useState } from 'react';
 import Toolbar from './Toolbar';
 import UIThemeProvider from '../../../theme';
 import { Box, Typography } from '@mui/material';
+import { dateTimeBetweenOperator } from './DateTimeCustomOperator';
+import LinearProgress from '../../core/LinearProgress';
 export default function (props) {
     var _a;
-    const { onRefresh, loading, theme, title, bulkAction, filterSettings, columns, rows, hideSearchbar } = props, rest = __rest(props, ["onRefresh", "loading", "theme", "title", "bulkAction", "filterSettings", "columns", "rows", "hideSearchbar"]);
+    const { onRefresh, loading, theme, title, bulkAction, filterSettings, columns, rows, hideSearchbar, loadingOptions } = props, rest = __rest(props, ["onRefresh", "loading", "theme", "title", "bulkAction", "filterSettings", "columns", "rows", "hideSearchbar", "loadingOptions"]);
     const [anchorEl, setAnchorEl] = useState();
+    const [loadingMessageIndex, setLoadingMessageIndex] = useState(0);
     const addColumnFilterOperators = (columns) => {
-        return (filterSettings === null || filterSettings === void 0 ? void 0 : filterSettings.mode) === 'server'
+        return (filterSettings === null || filterSettings === void 0 ? void 0 : filterSettings.mode) === 'server' || !!(filterSettings === null || filterSettings === void 0 ? void 0 : filterSettings.filterColumns)
             ? columns.map((column) => (Object.assign(Object.assign({}, column), { filterOperators: column.type === 'string'
-                    ? getGridStringOperators().filter((o) => !['isEmpty', 'isNotEmpty', 'isAny'].includes(o.value))
+                    ? getGridStringOperators().filter((o) => !['isEmpty', 'isNotEmpty', 'isAnyOf'].includes(o.value))
                     : column.type === 'date' || column.type === 'dateTime'
-                        ? getGridDateOperators(column.type === 'dateTime').filter((o) => !['isEmpty', 'isNotEmpty'].includes(o.value))
+                        ? getGridDateOperators(column.type === 'dateTime')
+                            .filter((o) => !['isEmpty', 'isNotEmpty', 'isAnyOf'].includes(o.value))
+                            .concat(dateTimeBetweenOperator)
                         : column.type === 'number'
-                            ? getGridNumericOperators().filter((o) => !['isEmpty', 'isNotEmpty'].includes(o.value))
+                            ? getGridNumericOperators().filter((o) => !['isEmpty', 'isNotEmpty', 'isAnyOf'].includes(o.value))
                             : column.type === 'singleSelect'
                                 ? getGridSingleSelectOperators().filter((o) => !['isEmpty', 'isNotEmpty', 'isAnyOf'].includes(o.value))
-                                : getGridBooleanOperators().filter((o) => !['isEmpty', 'isNotEmpty'].includes(o.value)) })))
+                                : getGridBooleanOperators().filter((o) => !['isEmpty', 'isNotEmpty', 'isAnyOf'].includes(o.value)) })))
             : columns;
     };
+    useEffect(() => {
+        var _a;
+        if (!loading || !((_a = loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.messages) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        const intervalId = setInterval(() => {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            setLoadingMessageIndex((prevIndex) => (prevIndex + 1) % loadingOptions.messages.length);
+        }, 1500);
+        return () => clearInterval(intervalId);
+    }, [loading, loadingMessageIndex, loadingOptions]);
     return (React.createElement(UIThemeProvider, { args: { theme: theme } },
         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',
@@ -39,7 +55,7 @@ export default function (props) {
                 }, '& .MuiDataGrid-virtualScrollerContent': {
                     borderRight: '1px solid #eee',
                     borderLeft: '1px solid #eee',
-                }, '& .MuiDataGrid-toolbarContainer': {
+                }, '& .MuiDataGrid-virtualScroller': Object.assign({}, (loading ? { overflow: 'hidden' } : {})), '& .MuiDataGrid-toolbarContainer': {
                     padding: '0',
                     fontColor: '#212B36',
                 }, '& .MuiDataGrid-row': {
@@ -81,6 +97,10 @@ export default function (props) {
                             boxShadow: '0px 24px 48px rgba(145, 158, 171, 0.4)',
                             padding: '8px',
                             stop: -120,
+                            '& .MuiDataGrid-filterFormValueInput': {
+                                minWidth: '190px',
+                                width: 'auto',
+                            },
                         },
                     },
                 },
@@ -92,5 +112,28 @@ export default function (props) {
                                             search.`))),
                         React.createElement(GridPagination, null)));
                 },
+                LoadingOverlay: () => {
+                    var _a, _b;
+                    return (React.createElement(Box, { sx: {
+                            minHeight: '100%',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            backgroundColor: '#fff',
+                            overflow: 'hidden',
+                        } },
+                        React.createElement(Box, { width: '225px' },
+                            React.createElement(Typography, { sx: { marginBottom: '8px', color: '#aaa', width: '100%', textAlign: 'center' } }, (loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.messages)
+                                ? loadingOptions.messages[loadingMessageIndex]
+                                : 'Loading'),
+                            React.createElement(LinearProgress, { sx: {
+                                    backgroundColor: (_a = loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.color) !== null && _a !== void 0 ? _a : '#0075A7',
+                                    '& .MuiLinearProgress-bar': {
+                                        backgroundColor: lighten((_b = loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.color) !== null && _b !== void 0 ? _b : '#0075A7', 0.5),
+                                    },
+                                    borderRadius: '6px',
+                                    width: '100%',
+                                } }))));
+                },
             } }))));
 }

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

@@ -0,0 +1,2 @@
+import { GridFilterOperator } from '@mui/x-data-grid';
+export declare const dateTimeBetweenOperator: GridFilterOperator[];

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

@@ -0,0 +1,65 @@
+import { Box, debounce, TextField } from '@mui/material';
+import { useGridRootProps } from '@mui/x-data-grid';
+import React, { useEffect, useState } from 'react';
+import { isNil } from 'lodash';
+function DateTimeRangeFilter(props) {
+    var _a;
+    const rootProps = useGridRootProps();
+    const { item, applyValue, focusElementRef = null } = props;
+    const [filterValueState, setFilterValueState] = useState((_a = item.value) !== null && _a !== void 0 ? _a : '');
+    useEffect(() => {
+        var _a;
+        const itemValue = (_a = item.value) !== null && _a !== void 0 ? _a : [undefined, undefined];
+        setFilterValueState(itemValue);
+    }, [item.value]);
+    const updateFilterValue = (from, to) => {
+        setFilterValueState([from, to]);
+        debounce(() => {
+            applyValue(Object.assign(Object.assign({}, item), { value: [from, to] }));
+        }, rootProps.filterDebounceMs)();
+    };
+    const handleChange = (event) => {
+        const updatedValue = event.target.value;
+        if (event.target.name === 'from') {
+            updateFilterValue(updatedValue, filterValueState[1]);
+        }
+        else if (event.target.name === 'to') {
+            updateFilterValue(filterValueState[0], updatedValue);
+        }
+    };
+    return (React.createElement(Box, { sx: {
+            display: 'inline-flex',
+            flexDirection: 'row',
+            alignItems: 'end',
+            height: 48,
+            pl: '20px',
+        } },
+        React.createElement(TextField, { name: "from", label: "From", variant: "standard", value: filterValueState[0], onChange: handleChange, type: "datetime-local", inputRef: focusElementRef, InputLabelProps: { shrink: true }, sx: { mr: 2, width: '175px' } }),
+        React.createElement(TextField, { name: "to", label: "To", variant: "standard", value: filterValueState[1], onChange: handleChange, InputLabelProps: { shrink: true }, type: "datetime-local", sx: { width: '175px' } })));
+}
+export const dateTimeBetweenOperator = [
+    {
+        label: 'between',
+        value: 'between',
+        getApplyFilterFn: () => null,
+        getApplyFilterFnV7: (filterItem) => {
+            const to = filterItem.value[0];
+            const from = filterItem.value[1];
+            return (value) => {
+                if (isNil(value))
+                    return false;
+                if (to && from) {
+                    return to <= value && value <= from;
+                }
+                else if (to) {
+                    return value <= to;
+                }
+                else if (from) {
+                    return value >= from;
+                }
+                return false;
+            };
+        },
+        InputComponent: DateTimeRangeFilter,
+    },
+];

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

@@ -52,7 +52,13 @@ function Toolbar(props) {
                 !bulkAction ? (React.createElement(Grid, { item: true },
                     React.createElement(Grid, { container: true, spacing: 1, sx: styles.icon },
                         React.createElement(Grid, { item: true, sx: { paddingRight: '15px' } },
-                            React.createElement(GridToolbarExport, { sx: { color: '#212B36' }, printOptions: { disableToolbarButton: true }, startIcon: React.createElement(FileDownloadRounded, null) })),
+                            React.createElement(GridToolbarExport, { sx: {
+                                    color: '#212B36',
+                                    height: '95%',
+                                    '&:hover': { backgroundColor: '#f2f3f5' },
+                                    paddingLeft: '10px',
+                                    paddingRight: '10px',
+                                }, printOptions: { disableToolbarButton: true }, startIcon: React.createElement(FileDownloadRounded, null) })),
                         React.createElement(Grid, { item: true },
                             React.createElement(GridToolbarFilterButton, { componentsProps: {
                                     button: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.214",
+    "version": "1.0.0-dev.215",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",