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

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

@@ -18,6 +18,7 @@ export declare type BuilderGridProps<T extends GridValidRowModel> = MuiDataGridP
     disablePagination?: boolean;
     hideEmptyContent?: boolean;
     hideToolbar?: boolean;
+    hideSearchbar?: boolean;
     noRowsOverlay?: React.ReactElement;
     filterComponent?: React.ReactElement;
     error?: number;

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

@@ -18,9 +18,9 @@ import { EmptyContent } from './EmptyContent';
 import ErrorComponent from '../ErrorComponent';
 const BuilderGrid = (props) => {
     var _a, _b, _c, _d, _e;
-    const { loading, actions, item, rows, initialSort, emptyContentSelectOptions, emptyContentActionIndex, title, subtitle, disablePagination, hideEmptyContent, hideToolbar, noRowsOverlay, filterComponent, error } = props, rest = __rest(props, ["loading", "actions", "item", "rows", "initialSort", "emptyContentSelectOptions", "emptyContentActionIndex", "title", "subtitle", "disablePagination", "hideEmptyContent", "hideToolbar", "noRowsOverlay", "filterComponent", "error"]);
+    const { loading, actions, item, rows, initialSort, emptyContentSelectOptions, emptyContentActionIndex, title, subtitle, disablePagination, hideEmptyContent, hideToolbar, hideSearchbar, noRowsOverlay, filterComponent, error } = props, rest = __rest(props, ["loading", "actions", "item", "rows", "initialSort", "emptyContentSelectOptions", "emptyContentActionIndex", "title", "subtitle", "disablePagination", "hideEmptyContent", "hideToolbar", "hideSearchbar", "noRowsOverlay", "filterComponent", "error"]);
     const [anchorEl, setAnchorEl] = useState();
-    const toolbar = useMemo(() => () => (React.createElement(BuilderGridToolbar, { loading: loading, actions: actions, title: title, subtitle: subtitle, filter: filterComponent })), [loading, actions]);
+    const toolbar = useMemo(() => () => (React.createElement(BuilderGridToolbar, { loading: loading, actions: actions, title: title, subtitle: subtitle, hideSearchbar: hideSearchbar, filter: filterComponent })), [loading, actions]);
     return (React.createElement(UIThemeProvider, null, loading || rows.length || hideEmptyContent ? (React.createElement(Box, { sx: {
             backgroundColor: '#fff',
             borderRadius: '6px',

package/dist/published/components/custom/BuilderGrid/BuilderGridToolbar.d.ts

@@ -6,6 +6,7 @@ export declare type BuilderGridToolbar = MuiGridToolbarProps & {
     title?: string;
     subtitle?: string;
     filter?: React.ReactElement;
+    hideSearchbar?: boolean;
 };
 declare function BuilderGridToolbar(props: BuilderGridToolbar): JSX.Element;
 export default BuilderGridToolbar;

package/dist/published/components/custom/BuilderGrid/BuilderGridToolbar.js

@@ -1,4 +1,4 @@
-import { Box, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 import { GridToolbarContainer, GridToolbarQuickFilter, } from '@mui/x-data-grid';
 import React from 'react';
 import UIThemeProvider from '../../../theme';
@@ -6,11 +6,13 @@ import { Grid } from '../../layout';
 import { ToolbarActions } from './ToolbarActions';
 function BuilderGridToolbar(props) {
     var _a, _b, _c;
-    const { theme, actions, title, subtitle, filter } = props;
+    const { theme, actions, title, subtitle, filter, hideSearchbar } = props;
     const styles = {
         container: {
             display: 'flex',
             margin: '0 0 15px 0',
+            justifyContent: 'space-between',
+            width: '100%',
         },
         iconButton: {
             minWidth: '36px',
@@ -42,19 +44,18 @@ function BuilderGridToolbar(props) {
     };
     return (React.createElement(UIThemeProvider, { args: { theme: theme } },
         React.createElement(GridToolbarContainer, { sx: { padding: '0' } },
-            title && (React.createElement(React.Fragment, null,
-                React.createElement(Box, { display: subtitle ? 'flex' : 'block', justifyContent: 'space-between', width: '100%' },
-                    React.createElement(Box, null,
-                        React.createElement(Typography, { sx: { fontSize: '18px', fontWeight: 700, marginBottom: '6px', marginTop: '6px' } }, title),
-                        subtitle && React.createElement(Typography, { sx: { fontSize: '14px' } }, subtitle)),
-                    React.createElement(ToolbarActions, { actions: actions })))),
-            React.createElement(Grid, { container: true, sx: styles.container },
-                !subtitle && (React.createElement(Grid, { item: true, xs: filter ? 3 : 6, sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                    } },
-                    React.createElement(GridToolbarQuickFilter, { variant: "outlined", size: "small", sx: Object.assign(Object.assign({}, styles.quickFilter), { flex: filter ? 1 : 0 }) }))),
-                filter && (React.createElement(Grid, { xs: 6, item: true, sx: { display: 'flex' } }, filter)),
-                !title && React.createElement(ToolbarActions, { actions: actions })))));
+            React.createElement(Grid, { xs: 12, sx: styles.container },
+                React.createElement(Grid, { display: 'block' },
+                    title && (React.createElement(Typography, { sx: {
+                            fontSize: '18px',
+                            fontWeight: 700,
+                            marginBottom: '6px',
+                        } }, title)),
+                    React.createElement(Grid, { sx: { display: 'flex' } },
+                        !hideSearchbar && (React.createElement(GridToolbarQuickFilter, { variant: "outlined", size: "small", sx: styles.quickFilter })),
+                        filter && (React.createElement(Grid, { item: true, sx: { display: 'flex', marginLeft: '16px' } }, filter))),
+                    subtitle && (React.createElement(Typography, { sx: { fontSize: '14px', marginTop: !hideSearchbar ? '8px' : '0px' } }, subtitle))),
+                React.createElement(Grid, null,
+                    React.createElement(ToolbarActions, { actions: actions }))))));
 }
 export default BuilderGridToolbar;

package/dist/published/components/custom/BuilderGrid/ToolbarActions.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { Button } from '../../core';
 import { Grid } from '../../layout';
 export const ToolbarActions = (props) => {
-    const { filter, actions } = props;
-    return (React.createElement(Grid, { item: true, container: true, xs: filter ? 3 : 6, display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }, actions === null || actions === void 0 ? void 0 : actions.filter((a) => !a.isHidden).map((action, index) => (React.createElement(Grid, { item: true, display: 'flex', alignItems: 'center', justifyContent: 'flex-end' },
+    const { actions } = props;
+    return (React.createElement(Grid, { item: true, container: true, display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }, actions === null || actions === void 0 ? void 0 : actions.filter((a) => !a.isHidden).map((action, index) => (React.createElement(Grid, { item: true, display: 'flex', alignItems: 'center', justifyContent: 'flex-end' },
         React.createElement(Button, { sx: {
                 fontWeight: 700,
                 height: '36px',

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.216",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",