X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/5fd5db805554d3eddd46cc911a5108fbb74b3cfc..454ef1c106b3d738526d65ecfae8db98ad7bebc2:/src/components/data-table-filters/data-table-filters.tsx

diff --git a/src/components/data-table-filters/data-table-filters.tsx b/src/components/data-table-filters/data-table-filters.tsx
index bede5aeaf9..7033d369e7 100644
--- a/src/components/data-table-filters/data-table-filters.tsx
+++ b/src/components/data-table-filters/data-table-filters.tsx
@@ -18,137 +18,15 @@ import {
     Card,
     CardActions,
     Typography,
-    CardContent
+    CardContent,
+    Tooltip
 } from "@material-ui/core";
 import * as classnames from "classnames";
 import { DefaultTransformOrigin } from "../popover/helpers";
-
-export interface DataTableFilterItem {
-    name: string;
-    selected: boolean;
-}
-
-export interface DataTableFilterProps {
-    name: string;
-    filters: DataTableFilterItem[];
-    onChange?: (filters: DataTableFilterItem[]) => void;
-}
-
-interface DataTableFilterState {
-    anchorEl?: HTMLElement;
-    filters: DataTableFilterItem[];
-    prevFilters: DataTableFilterItem[];
-}
-
-class DataTableFilter extends React.Component<DataTableFilterProps & WithStyles<CssRules>, DataTableFilterState> {
-    state: DataTableFilterState = {
-        anchorEl: undefined,
-        filters: [],
-        prevFilters: []
-    };
-    icon = React.createRef<HTMLElement>();
-
-    render() {
-        const { name, classes, children } = this.props;
-        const isActive = this.state.filters.some(f => f.selected);
-        return <>
-            <ButtonBase
-                className={classnames([classes.root, { [classes.active]: isActive }])}
-                component="span"
-                onClick={this.open}
-                disableRipple>
-                {children}
-                <i className={classnames(["fas fa-filter", classes.icon])}
-                    data-fa-transform="shrink-3"
-                    ref={this.icon} />
-            </ButtonBase>
-            <Popover
-                anchorEl={this.state.anchorEl}
-                open={!!this.state.anchorEl}
-                anchorOrigin={DefaultTransformOrigin}
-                transformOrigin={DefaultTransformOrigin}
-                onClose={this.cancel}>
-                <Card>
-                    <CardContent>
-                        <Typography variant="caption">
-                            {name}
-                        </Typography>
-                    </CardContent>
-                    <List dense>
-                        {this.state.filters.map((filter, index) =>
-                            <ListItem
-                                button
-                                key={index}
-                                onClick={this.toggleFilter(filter)}>
-                                <Checkbox
-                                    disableRipple
-                                    color="primary"
-                                    checked={filter.selected}
-                                    className={classes.checkbox} />
-                                <ListItemText>
-                                    {filter.name}
-                                </ListItemText>
-                            </ListItem>
-                        )}
-                    </List>
-                    <CardActions>
-                        <Button
-                            color="primary"
-                            variant="raised"
-                            size="small"
-                            onClick={this.submit}>
-                            Ok
-                        </Button>
-                        <Button
-                            color="primary"
-                            variant="outlined"
-                            size="small"
-                            onClick={this.cancel}>
-                            Cancel
-                        </Button>
-                    </CardActions >
-                </Card>
-            </Popover>
-        </>;
-    }
-
-    static getDerivedStateFromProps(props: DataTableFilterProps, state: DataTableFilterState): DataTableFilterState {
-        return props.filters !== state.prevFilters
-            ? { ...state, filters: props.filters, prevFilters: props.filters }
-            : state;
-    }
-
-    open = () => {
-        this.setState({ anchorEl: this.icon.current || undefined });
-    }
-
-    submit = () => {
-        const { onChange } = this.props;
-        if (onChange) {
-            onChange(this.state.filters);
-        }
-        this.setState({ anchorEl: undefined });
-    }
-
-    cancel = () => {
-        this.setState(prev => ({
-            ...prev,
-            filters: prev.prevFilters,
-            anchorEl: undefined
-        }));
-    }
-
-    toggleFilter = (toggledFilter: DataTableFilterItem) => () => {
-        this.setState(prev => ({
-            ...prev,
-            filters: prev.filters.map(filter =>
-                filter === toggledFilter
-                    ? { ...filter, selected: !filter.selected }
-                    : filter)
-        }));
-    }
-}
-
+import { createTree, initTreeNode, mapTree } from '~/models/tree';
+import { DataTableFilters as DataTableFiltersModel, DataTableFiltersTree } from "./data-table-filters-tree";
+import { pipe } from 'lodash/fp';
+import { setNode } from '~/models/tree';
 
 export type CssRules = "root" | "icon" | "active" | "checkbox";
 
@@ -185,4 +63,146 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     }
 });
 
-export default withStyles(styles)(DataTableFilter);
+export interface DataTableFilterItem {
+    name: string;
+    selected: boolean;
+}
+
+export interface DataTableFilterProps {
+    name: string;
+    filters: DataTableFilterItem[];
+    onChange?: (filters: DataTableFilterItem[]) => void;
+}
+
+interface DataTableFilterState {
+    anchorEl?: HTMLElement;
+    filters: DataTableFilterItem[];
+    prevFilters: DataTableFilterItem[];
+    filtersTree: DataTableFiltersModel;
+}
+
+const filters: DataTableFiltersModel = pipe(
+    createTree,
+    setNode(initTreeNode({ id: 'Project', value: { name: 'Project' } })),
+    setNode(initTreeNode({ id: 'Process', value: { name: 'Process' } })),
+    setNode(initTreeNode({ id: 'Data collection', value: { name: 'Data collection' } })),
+    setNode(initTreeNode({ id: 'General', parent: 'Data collection', value: { name: 'General' } })),
+    setNode(initTreeNode({ id: 'Output', parent: 'Data collection', value: { name: 'Output' } })),
+    setNode(initTreeNode({ id: 'Log', parent: 'Data collection', value: { name: 'Log' } })),
+    mapTree(node => ({...node, selected: true})),
+)();
+
+export const DataTableFilters = withStyles(styles)(
+    class extends React.Component<DataTableFilterProps & WithStyles<CssRules>, DataTableFilterState> {
+        state: DataTableFilterState = {
+            anchorEl: undefined,
+            filters: [],
+            prevFilters: [],
+            filtersTree: filters,
+        };
+        icon = React.createRef<HTMLElement>();
+
+        render() {
+            const { name, classes, children } = this.props;
+            const isActive = this.state.filters.some(f => f.selected);
+            return <>
+                <Tooltip title='Filters'>
+                    <ButtonBase
+                        className={classnames([classes.root, { [classes.active]: isActive }])}
+                        component="span"
+                        onClick={this.open}
+                        disableRipple>
+                        {children}
+                        <i className={classnames(["fas fa-filter", classes.icon])}
+                            data-fa-transform="shrink-3"
+                            ref={this.icon} />
+                    </ButtonBase>
+                </Tooltip>
+                <Popover
+                    anchorEl={this.state.anchorEl}
+                    open={!!this.state.anchorEl}
+                    anchorOrigin={DefaultTransformOrigin}
+                    transformOrigin={DefaultTransformOrigin}
+                    onClose={this.cancel}>
+                    <Card>
+                        <CardContent>
+                            <Typography variant="caption">
+                                {name}
+                            </Typography>
+                        </CardContent>
+                        <List dense>
+                            {this.state.filters.map((filter, index) =>
+                                <ListItem
+                                    key={index}>
+                                    <Checkbox
+                                        onClick={this.toggleFilter(filter)}
+                                        color="primary"
+                                        checked={filter.selected}
+                                        className={classes.checkbox} />
+                                    <ListItemText>
+                                        {filter.name}
+                                    </ListItemText>
+                                </ListItem>
+                            )}
+                        </List>
+                        <DataTableFiltersTree
+                            filters={this.state.filtersTree}
+                            onChange={filtersTree => this.setState({ filtersTree })} />
+                        <CardActions>
+                            <Button
+                                color="primary"
+                                variant="raised"
+                                size="small"
+                                onClick={this.submit}>
+                                Ok
+                            </Button>
+                            <Button
+                                color="primary"
+                                variant="outlined"
+                                size="small"
+                                onClick={this.cancel}>
+                                Cancel
+                            </Button>
+                        </CardActions >
+                    </Card>
+                </Popover>
+            </>;
+        }
+
+        static getDerivedStateFromProps(props: DataTableFilterProps, state: DataTableFilterState): DataTableFilterState {
+            return props.filters !== state.prevFilters
+                ? { ...state, filters: props.filters, prevFilters: props.filters }
+                : state;
+        }
+
+        open = () => {
+            this.setState({ anchorEl: this.icon.current || undefined });
+        }
+
+        submit = () => {
+            const { onChange } = this.props;
+            if (onChange) {
+                onChange(this.state.filters);
+            }
+            this.setState({ anchorEl: undefined });
+        }
+
+        cancel = () => {
+            this.setState(prev => ({
+                ...prev,
+                filters: prev.prevFilters,
+                anchorEl: undefined
+            }));
+        }
+
+        toggleFilter = (toggledFilter: DataTableFilterItem) => () => {
+            this.setState(prev => ({
+                ...prev,
+                filters: prev.filters.map(filter =>
+                    filter === toggledFilter
+                        ? { ...filter, selected: !filter.selected }
+                        : filter)
+            }));
+        }
+    }
+);
