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";
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>();
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}
<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} />
</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