[ARVADOS-WORKBENCH2] created: 1.2.0-910-g8466274
Git user
git at public.curoverse.com
Mon Nov 19 06:26:07 EST 2018
at 84662748161b3be21885f95dc39d0c008bac971d (commit)
commit 84662748161b3be21885f95dc39d0c008bac971d
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Mon Nov 19 12:25:57 2018 +0100
Mock DataTableFiltersTree usage
Feature #14258
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/data-table-filters/data-table-filters.tsx b/src/components/data-table-filters/data-table-filters.tsx
index 11607e4..7033d36 100644
--- a/src/components/data-table-filters/data-table-filters.tsx
+++ b/src/components/data-table-filters/data-table-filters.tsx
@@ -23,6 +23,10 @@ import {
} 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";
@@ -74,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>();
@@ -128,6 +145,9 @@ export const DataTableFilters = withStyles(styles)(
</ListItem>
)}
</List>
+ <DataTableFiltersTree
+ filters={this.state.filtersTree}
+ onChange={filtersTree => this.setState({ filtersTree })} />
<CardActions>
<Button
color="primary"
commit 21f3b76dcab32f5bfa7a1d48fc323b0432718f43
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Mon Nov 19 12:25:17 2018 +0100
Create DataTableFiltersTree
Feature #14258
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/data-table-filters/data-table-filters-tree.tsx b/src/components/data-table-filters/data-table-filters-tree.tsx
new file mode 100644
index 0000000..3ce4dbb
--- /dev/null
+++ b/src/components/data-table-filters/data-table-filters-tree.tsx
@@ -0,0 +1,72 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { Tree, toggleNodeSelection, getNode, initTreeNode, getNodeChildrenIds } from '~/models/tree';
+import { Tree as TreeComponent, TreeItem, TreeItemStatus } from '~/components/tree/tree';
+import { noop, map } from "lodash/fp";
+import { toggleNodeCollapse } from '~/models/tree';
+
+export interface DataTableFilterItem {
+ name: string;
+}
+
+export type DataTableFilters = Tree<DataTableFilterItem>;
+
+export interface DataTableFilterProps {
+ filters: DataTableFilters;
+ onChange?: (filters: DataTableFilters) => void;
+}
+
+export class DataTableFiltersTree extends React.Component<DataTableFilterProps> {
+
+ render() {
+ return <TreeComponent
+ items={filtersToTree(this.props.filters)}
+ render={renderItem}
+ showSelection
+ onContextMenu={noop}
+ toggleItemActive={noop}
+ toggleItemOpen={this.toggleOpen}
+ toggleItemSelection={this.toggleFilter}
+ />;
+ }
+
+ renderItem(item: TreeItem<DataTableFilterItem>) {
+ return <span>{item.data.name}</span>;
+ }
+
+ toggleFilter = (_: React.MouseEvent, item: TreeItem<DataTableFilterItem>) => {
+ const { onChange = noop } = this.props;
+ onChange(toggleNodeSelection(item.id)(this.props.filters));
+ }
+
+ toggleOpen = (_: React.MouseEvent, item: TreeItem<DataTableFilterItem>) => {
+ const { onChange = noop } = this.props;
+ onChange(toggleNodeCollapse(item.id)(this.props.filters));
+ }
+}
+
+const renderItem = (item: TreeItem<DataTableFilterItem>) =>
+ <span>{item.data.name}</span>;
+
+const filterToTreeItem = (filters: DataTableFilters) =>
+ (id: string): TreeItem<any> => {
+ const node = getNode(id)(filters) || initTreeNode({ id: '', value: 'InvalidNode' });
+ const items = getNodeChildrenIds(node.id)(filters)
+ .map(filterToTreeItem(filters));
+
+ return {
+ active: node.active,
+ data: node.value,
+ id: node.id,
+ items: items.length > 0 ? items : undefined,
+ open: node.expanded,
+ selected: node.selected,
+ status: TreeItemStatus.LOADED,
+ };
+ };
+
+const filtersToTree = (filters: DataTableFilters): TreeItem<DataTableFilterItem>[] =>
+ map(filterToTreeItem(filters), getNodeChildrenIds('')(filters));
commit e25c40c23679763255fa94bce653a106b2187abc
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Mon Nov 19 12:16:13 2018 +0100
Improve typings in tree model
Feature #14258
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/models/tree.ts b/src/models/tree.ts
index fe52a97..bdcd730 100644
--- a/src/models/tree.ts
+++ b/src/models/tree.ts
@@ -120,19 +120,19 @@ export const mapIdsToNodes = (ids: string[]) => <T>(tree: Tree<T>) =>
ids.map(id => getNode(id)(tree)).filter((node): node is TreeNode<T> => node !== undefined);
export const activateNode = (id: string) => <T>(tree: Tree<T>) =>
- mapTree(node => node.id === id ? { ...node, active: true } : { ...node, active: false })(tree);
+ mapTree((node: TreeNode<T>) => node.id === id ? { ...node, active: true } : { ...node, active: false })(tree);
export const deactivateNode = <T>(tree: Tree<T>) =>
- mapTree(node => node.active ? { ...node, active: false } : node)(tree);
+ mapTree((node: TreeNode<T>) => node.active ? { ...node, active: false } : node)(tree);
export const expandNode = (...ids: string[]) => <T>(tree: Tree<T>) =>
- mapTree(node => ids.some(id => id === node.id) ? { ...node, expanded: true } : node)(tree);
+ mapTree((node: TreeNode<T>) => ids.some(id => id === node.id) ? { ...node, expanded: true } : node)(tree);
export const collapseNode = (...ids: string[]) => <T>(tree: Tree<T>) =>
- mapTree(node => ids.some(id => id === node.id) ? { ...node, expanded: false } : node)(tree);
+ mapTree((node: TreeNode<T>) => ids.some(id => id === node.id) ? { ...node, expanded: false } : node)(tree);
export const toggleNodeCollapse = (...ids: string[]) => <T>(tree: Tree<T>) =>
- mapTree(node => ids.some(id => id === node.id) ? { ...node, expanded: !node.expanded } : node)(tree);
+ mapTree((node: TreeNode<T>) => ids.some(id => id === node.id) ? { ...node, expanded: !node.expanded } : node)(tree);
export const setNodeStatus = (id: string) => (status: TreeNodeStatus) => <T>(tree: Tree<T>) => {
const node = getNode(id)(tree);
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list