15768: basic select function working Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa...

[arvados-workbench2.git] / src / components / data-table / data-table.tsx

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 0d53f33159ce80168c18e8dadb3e332825894f88..54c87566934f7e30750ea45c6a83bbd33c1cc747 100644 (file)
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -13,6 +13,8 @@ import { countNodes, getTreeDirty } from 'models/tree';
 import { IconType, PendingIcon } from 'components/icon/icon';
 import { SvgIconProps } from '@material-ui/core/SvgIcon';
 import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
+import { Checkbox } from '@material-ui/core';
+import { createTree } from 'models/tree';
 
 export type DataColumns<I, R> = Array<DataColumn<I, R>>;
 
@@ -37,7 +39,7 @@ export interface DataTableDataProps<I> {
     currentRoute?: string;
 }
 
-type CssRules = 'tableBody' | 'root' | 'content' | 'noItemsInfo' | 'tableCellSelect' | 'tableCell' | 'arrow' | 'arrowButton' | 'tableCellWorkflows' | 'loader';
+type CssRules = 'tableBody' | 'root' | 'content' | 'noItemsInfo' | 'checkBoxCell' | 'tableCell' | 'arrow' | 'arrowButton' | 'tableCellWorkflows' | 'loader';
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     root: {
@@ -59,7 +61,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         textAlign: 'center',
         padding: theme.spacing.unit,
     },
-    tableCellSelect: {
+    checkBoxCell: {
+        // border: '1px dotted green',
         padding: '0',
     },
     tableCell: {
@@ -86,12 +89,29 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     },
 });
 
+const selectedList = new Set();
+
+const handleResourceSelect = (uuid) => {
+    if (selectedList.has(uuid)) selectedList.delete(uuid);
+    else selectedList.add(uuid);
+    console.log(selectedList);
+};
+
+const checkBoxColumn: DataColumn<any, any> = {
+    name: '',
+    selected: true,
+    configurable: false,
+    filters: createTree(),
+    render: (item) => <Checkbox color='primary' onChange={() => handleResourceSelect(item)} />,
+};
+
 type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
 
 export const DataTable = withStyles(styles)(
     class Component<T> extends React.Component<DataTableProps<T>> {
         render() {
-            const { items, classes, working } = this.props;
+            const { items, classes, working, columns } = this.props;
+            if (columns[0] !== checkBoxColumn) columns.unshift(checkBoxColumn);
             return (
                 <div className={classes.root}>
                     <div className={classes.content}>
@@ -170,7 +190,7 @@ export const DataTable = withStyles(styles)(
                     {this.mapVisibleColumns((column, index) => (
                         <TableCell
                             key={column.key || index}
-                            className={currentRoute === '/workflows' ? classes.tableCellWorkflows : index === 0 ? classes.tableCellSelect : classes.tableCell}
+                            className={currentRoute === '/workflows' ? classes.tableCellWorkflows : index === 0 ? classes.checkBoxCell : classes.tableCell}
                         >
                             {column.render(item)}
                         </TableCell>