Modify DataTableFiltersPopover to handl filter trees rather than arrays

Feature #14258

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/components/data-table-filters/data-table-filters-popover.tsx b/src/components/data-table-filters/data-table-filters-popover.tsx
index 7033d369e7dcdb0f1daa0e9168fac1427719db3c..b79d36b47a9236e11503bd4e995daac18a703ca2 100644 (file)
--- a/src/components/data-table-filters/data-table-filters-popover.tsx
+++ b/src/components/data-table-filters/data-table-filters-popover.tsx
@@ -10,10 +10,6 @@ import {
     StyleRulesCallback,
     Theme,
     Popover,
     StyleRulesCallback,
     Theme,
     Popover,

-    List,
-    ListItem,
-    Checkbox,
-    ListItemText,

     Button,
     Card,
     CardActions,
     Button,
     Card,
     CardActions,


@@ -22,11 +18,10 @@ import {
     Tooltip
 } from "@material-ui/core";
 import * as classnames from "classnames";
     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';
+import { DefaultTransformOrigin } from "~/components/popover/helpers";
+import { createTree } from '~/models/tree';
+import { DataTableFilters, DataTableFiltersTree } from "./data-table-filters-tree";
+import { getNodeDescendants } from '~/models/tree';

 
 export type CssRules = "root" | "icon" | "active" | "checkbox";
 
 
 export type CssRules = "root" | "icon" | "active" | "checkbox";
 


@@ -63,48 +58,30 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     }
 });
 
     }
 });
 

-export interface DataTableFilterItem {
-    name: string;
-    selected: boolean;
-}
-

 export interface DataTableFilterProps {
     name: string;
 export interface DataTableFilterProps {
     name: string;

-    filters: DataTableFilterItem[];
-    onChange?: (filters: DataTableFilterItem[]) => void;
+    filters: DataTableFilters;
+    onChange?: (filters: DataTableFilters) => void;

 }
 
 interface DataTableFilterState {
     anchorEl?: HTMLElement;
 }
 
 interface DataTableFilterState {
     anchorEl?: HTMLElement;

-    filters: DataTableFilterItem[];
-    prevFilters: DataTableFilterItem[];
-    filtersTree: DataTableFiltersModel;
+    filters: DataTableFilters;
+    prevFilters: DataTableFilters;

 }
 
 }
 

-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)(
+export const DataTableFiltersPopover = withStyles(styles)(

     class extends React.Component<DataTableFilterProps & WithStyles<CssRules>, DataTableFilterState> {
         state: DataTableFilterState = {
             anchorEl: undefined,
     class extends React.Component<DataTableFilterProps & WithStyles<CssRules>, DataTableFilterState> {
         state: DataTableFilterState = {
             anchorEl: undefined,

-            filters: [],
-            prevFilters: [],
-            filtersTree: filters,
+            filters: createTree(),
+            prevFilters: createTree(),

         };
         icon = React.createRef<HTMLElement>();
 
         render() {
             const { name, classes, children } = this.props;
         };
         icon = React.createRef<HTMLElement>();
 
         render() {
             const { name, classes, children } = this.props;

-            const isActive = this.state.filters.some(f => f.selected);
+            const isActive = getNodeDescendants('')(this.state.filters).some(f => f.selected);

             return <>
                 <Tooltip title='Filters'>
                     <ButtonBase
             return <>
                 <Tooltip title='Filters'>
                     <ButtonBase


@@ -130,24 +107,9 @@ export const DataTableFilters = withStyles(styles)(
                                 {name}
                             </Typography>
                         </CardContent>
                                 {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
                         <DataTableFiltersTree

-                            filters={this.state.filtersTree}
-                            onChange={filtersTree => this.setState({ filtersTree })} />
+                            filters={this.state.filters}
+                            onChange={filters => this.setState({ filters })} />

                         <CardActions>
                             <Button
                                 color="primary"
                         <CardActions>
                             <Button
                                 color="primary"


@@ -195,14 +157,9 @@ export const DataTableFilters = withStyles(styles)(
             }));
         }
 
             }));
         }
 

-        toggleFilter = (toggledFilter: DataTableFilterItem) => () => {
-            this.setState(prev => ({
-                ...prev,
-                filters: prev.filters.map(filter =>
-                    filter === toggledFilter
-                        ? { ...filter, selected: !filter.selected }
-                        : filter)
-            }));
+        setFilters = (filters: DataTableFilters) => {
+            this.setState({ filters });

         }
         }

+

     }
 );
     }
 );