Merge branch 'master' into 14604-ui-improvements

[arvados-workbench2.git] / 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 d288a5a3dbfc8997cee987598cfb767048e748f9..a57f29aac44805b3abb24aad5128447b635b32b3 100644 (file)
--- a/src/components/data-table-filters/data-table-filters.tsx
+++ b/src/components/data-table-filters/data-table-filters.tsx
@@ -18,10 +18,15 @@ import {
     Card,
     CardActions,
     Typography,
-    CardContent
+    CardContent,
+    Tooltip
 } from "@material-ui/core";
 import * as classnames from "classnames";
 import { DefaultTransformOrigin } from "../popover/helpers";
+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";
 
@@ -73,14 +78,27 @@ 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: []
+            prevFilters: [],
+            filtersTree: filters,
         };
         icon = React.createRef<HTMLElement>();
 
@@ -88,16 +106,18 @@ export const DataTableFilters = withStyles(styles)(
             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>
+                <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}
@@ -113,11 +133,9 @@ export const DataTableFilters = withStyles(styles)(
                         <List dense>
                             {this.state.filters.map((filter, index) =>
                                 <ListItem
-                                    button
-                                    key={index}
-                                    onClick={this.toggleFilter(filter)}>
+                                    key={index}>
                                     <Checkbox
-                                        disableRipple
+                                        onClick={this.toggleFilter(filter)}
                                         color="primary"
                                         checked={filter.selected}
                                         className={classes.checkbox} />
@@ -127,10 +145,13 @@ export const DataTableFilters = withStyles(styles)(
                                 </ListItem>
                             )}
                         </List>
+                        <DataTableFiltersTree
+                            filters={this.state.filtersTree}
+                            onChange={filtersTree => this.setState({ filtersTree })} />
                         <CardActions>
                             <Button
                                 color="primary"
-                                variant="raised"
+                                variant='contained'
                                 size="small"
                                 onClick={this.submit}>
                                 Ok