X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/d230941e87d4619683e4f3f7b44f19dab5017bd0..28a7883c373533979f2cc7c5e750221eb8f5f1ec:/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 68792e01..22131f00 100644
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -3,18 +3,33 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import React from 'react';
-import { Table, TableBody, TableRow, TableCell, TableHead, TableSortLabel, StyleRulesCallback, Theme, WithStyles, withStyles, IconButton } from '@material-ui/core';
+import {
+    Table,
+    TableBody,
+    TableRow,
+    TableCell,
+    TableHead,
+    TableSortLabel,
+    StyleRulesCallback,
+    Theme,
+    WithStyles,
+    withStyles,
+    IconButton,
+    Tooltip,
+} from '@material-ui/core';
 import classnames from 'classnames';
 import { DataColumn, SortDirection } from './data-column';
 import { DataTableDefaultView } from '../data-table-default-view/data-table-default-view';
 import { DataTableFilters } from '../data-table-filters/data-table-filters-tree';
+import { DataTableMultiselectPopover } from '../data-table-multiselect-popover/data-table-multiselect-popover';
 import { DataTableFiltersPopover } from '../data-table-filters/data-table-filters-popover';
 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';
+import arraysAreCongruent from 'validators/arrays-are-congruent';
+import { DataTableMultiselectOption } from '../data-table-multiselect-popover/data-table-multiselect-popover';
 
 export type DataColumns<I, R> = Array<DataColumn<I, R>>;
 
@@ -39,7 +54,19 @@ export interface DataTableDataProps<I> {
     currentRoute?: string;
 }
 
-type CssRules = 'tableBody' | 'root' | 'content' | 'noItemsInfo' | 'checkBoxCell' | 'tableCell' | 'arrow' | 'arrowButton' | 'tableCellWorkflows' | 'loader';
+type CssRules =
+    | 'tableBody'
+    | 'root'
+    | 'content'
+    | 'noItemsInfo'
+    | 'checkBoxHead'
+    | 'checkBoxCell'
+    | 'checkBox'
+    | 'tableCell'
+    | 'arrow'
+    | 'arrowButton'
+    | 'tableCellWorkflows'
+    | 'loader';
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     root: {
@@ -61,8 +88,15 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         textAlign: 'center',
         padding: theme.spacing.unit,
     },
+    checkBoxHead: {
+        padding: '0',
+        display: 'flex',
+    },
     checkBoxCell: {
         padding: '0',
+        paddingLeft: '10px',
+    },
+    checkBox: {
         cursor: 'pointer',
     },
     tableCell: {
@@ -89,17 +123,39 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     },
 });
 
-type DataTableState = Record<string, boolean>;
+type DataTableState = {
+    isSelected: boolean;
+    checkedList: Record<string, boolean>;
+};
+
+const multiselectOptions: DataTableMultiselectOption[] = [
+    { name: 'First Option', fn: (checkedList) => console.log('one', checkedList) },
+    { name: 'Second Option', fn: (checkedList) => console.log('two', checkedList) },
+    { name: 'Third Option', fn: (checkedList) => console.log('three', checkedList) },
+];
 
 type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
 
 export const DataTable = withStyles(styles)(
     class Component<T> extends React.Component<DataTableProps<T>> {
-        state: DataTableState = {};
+        state: DataTableState = {
+            isSelected: false,
+            checkedList: {},
+        };
 
-        componentDidUpdate(prevProps: Readonly<DataTableProps<T>>) {
-            if (prevProps.items !== this.props.items) {
-                this.initializeCheckedList(this.props.items);
+        componentDidMount(): void {
+            this.initializeCheckedList(this.props.items);
+        }
+
+        componentDidUpdate(prevProps: Readonly<DataTableProps<T>>, prevState: DataTableState) {
+            const { items } = this.props;
+            const { checkedList } = this.state;
+            if (!arraysAreCongruent(prevProps.items, items)) {
+                this.state.isSelected = false;
+                this.initializeCheckedList(items);
+            }
+            if (prevState.checkedList !== checkedList) {
+                window.localStorage.setItem('selectedRows', JSON.stringify(checkedList));
             }
         }
 
@@ -112,8 +168,8 @@ export const DataTable = withStyles(styles)(
                 <input
                     type='checkbox'
                     name={uuid}
-                    color='primary'
-                    checked={this.state[uuid] ?? false}
+                    className={this.props.classes.checkBox}
+                    checked={this.state.checkedList[uuid] ?? false}
                     onChange={() => this.handleCheck(uuid)}
                     onDoubleClick={(ev) => ev.stopPropagation()}
                 ></input>
@@ -121,50 +177,49 @@ export const DataTable = withStyles(styles)(
         };
 
         initializeCheckedList = (uuids: any[]): void => {
-            const checkedList = this.state;
+            const { checkedList } = this.state;
             uuids.forEach((uuid) => {
-                if (!checkedList.hasOwnProperty[uuid]) {
+                if (!checkedList.hasOwnProperty(uuid)) {
                     checkedList[uuid] = false;
                 }
             });
+            for (const key in checkedList) {
+                if (!uuids.includes(key)) {
+                    delete checkedList[key];
+                }
+            }
+            window.localStorage.setItem('selectedRows', JSON.stringify(checkedList));
         };
 
-        handleCheck = (uuid: string): void => {
-            const newCheckedList = { ...this.state };
-            newCheckedList[uuid] = !this.state[uuid];
-            this.setState(newCheckedList);
-            console.log(newCheckedList);
-        };
-
-        handleSelectAll = (): void => {
-            const newCheckedList = { ...this.state };
+        handleSelectorSelect = (): void => {
+            const { isSelected, checkedList } = this.state;
+            const newCheckedList = { ...checkedList };
             for (const key in newCheckedList) {
-                newCheckedList[key] = true;
+                newCheckedList[key] = !isSelected;
             }
-            this.setState(newCheckedList);
+            this.setState({ isSelected: !isSelected, checkedList: newCheckedList });
         };
 
-        handleDeselectAll = (): void => {
-            const newCheckedList = { ...this.state };
-            for (const key in newCheckedList) {
-                newCheckedList[key] = false;
-            }
-            this.setState(newCheckedList);
+        handleCheck = (uuid: string): void => {
+            const { checkedList } = this.state;
+            const newCheckedList = { ...checkedList };
+            newCheckedList[uuid] = !checkedList[uuid];
+            this.setState({ checkedList: newCheckedList });
         };
 
         handleInvertSelect = (): void => {
-            const newCheckedList = { ...this.state };
+            const { checkedList } = this.state;
+            const newCheckedList = { ...checkedList };
             for (const key in newCheckedList) {
-                newCheckedList[key] = !this.state[key];
+                newCheckedList[key] = !checkedList[key];
             }
-            this.setState(newCheckedList);
+            this.setState({ checkedList: newCheckedList });
         };
 
         render() {
             const { items, classes, working, columns } = this.props;
             if (columns[0].name === this.checkBoxColumn.name) columns.shift();
             columns.unshift(this.checkBoxColumn);
-
             return (
                 <div className={classes.root}>
                     <div className={classes.content}>
@@ -193,11 +248,14 @@ export const DataTable = withStyles(styles)(
         renderHeadCell = (column: DataColumn<T, any>, index: number) => {
             const { name, key, renderHeader, filters, sort } = column;
             const { onSortToggle, onFiltersChange, classes } = this.props;
-            return index === 0 ? (
+            return column.name === 'checkBoxColumn' ? (
                 <TableCell key={key || index} className={classes.checkBoxCell}>
-                    <div onClick={this.handleSelectAll}>select all</div>
-                    <div onClick={this.handleDeselectAll}>deselect all</div>
-                    <div onClick={this.handleInvertSelect}>invert selection</div>
+                    <div className={classes.checkBoxHead}>
+                        <Tooltip title={this.state.isSelected ? 'Deselect All' : 'Select All'}>
+                            <input type='checkbox' className={classes.checkBox} checked={this.state.isSelected} onChange={this.handleSelectorSelect}></input>
+                        </Tooltip>
+                        <DataTableMultiselectPopover name={`Options`} options={multiselectOptions} checkedList={this.state.checkedList}></DataTableMultiselectPopover>
+                    </div>
                 </TableCell>
             ) : (
                 <TableCell className={classes.tableCell} key={key || index}>