15768: selection menu all good Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox...

diff --git a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
index 819388870b17a1f28543d896b334d50acddee401..5c593251dc0715b1c1df98b7ea839b554b03952f 100644 (file)
--- a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
+++ b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
@@ -51,7 +51,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         paddingBottom: 5,
     },
     optionsContainer: {
-        padding: '1rem 0',
+        paddingTop: '1rem',
         flex: 1,
     },
     option: {
@@ -92,7 +92,7 @@ export const DataTableMultiselectPopover = withStyles(styles)(
             const { name, classes, children, options, checkedList } = this.props;
             return (
                 <>
-                    <Tooltip disableFocusListener title='Multiselect Options'>
+                    <Tooltip disableFocusListener title='Select Options'>
                         <ButtonBase className={classnames(classes.root)} component='span' onClick={this.open} disableRipple>
                             {children}
                             <IconButton component='span' classes={{ root: classes.iconButton }} tabIndex={-1}>
@@ -123,6 +123,11 @@ export const DataTableMultiselectPopover = withStyles(styles)(
                                         </div>
                                     ))}
                             </div>
+                            <CardActions>
+                                <Button color='primary' variant='outlined' size='small' onClick={this.close}>
+                                    Close
+                                </Button>
+                            </CardActions>
                         </Card>
                     </Popover>
                     <this.MountHandler />

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 22131f00c3c3bed2b16921825f6aa955318eb68a..4954bb6b32d1434a5eb493af197b95647097007f 100644 (file)
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -128,12 +128,6 @@ type DataTableState = {
     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)(
@@ -176,6 +170,12 @@ export const DataTable = withStyles(styles)(
             ),
         };
 
+        multiselectOptions: DataTableMultiselectOption[] = [
+            { name: 'All', fn: () => this.handleSelectAll() },
+            { name: 'None', fn: () => this.handleSelectNone() },
+            { name: 'Invert', fn: () => this.handleInvertSelect() },
+        ];
+
         initializeCheckedList = (uuids: any[]): void => {
             const { checkedList } = this.state;
             uuids.forEach((uuid) => {
@@ -191,20 +191,41 @@ export const DataTable = withStyles(styles)(
             window.localStorage.setItem('selectedRows', JSON.stringify(checkedList));
         };
 
+        isAllSelected = (list: Record<string, boolean>): boolean => {
+            for (const key in list) {
+                if (list[key] === false) return false;
+            }
+            return true;
+        };
+
+        handleCheck = (uuid: string): void => {
+            const { checkedList } = this.state;
+            const newCheckedList = { ...checkedList };
+            newCheckedList[uuid] = !checkedList[uuid];
+            this.setState({ checkedList: newCheckedList, isSelected: this.isAllSelected(newCheckedList) });
+        };
+
         handleSelectorSelect = (): void => {
-            const { isSelected, checkedList } = this.state;
+            const { isSelected } = this.state;
+            isSelected ? this.handleSelectNone() : this.handleSelectAll();
+        };
+
+        handleSelectAll = (): void => {
+            const { checkedList } = this.state;
             const newCheckedList = { ...checkedList };
             for (const key in newCheckedList) {
-                newCheckedList[key] = !isSelected;
+                newCheckedList[key] = true;
             }
-            this.setState({ isSelected: !isSelected, checkedList: newCheckedList });
+            this.setState({ isSelected: true, checkedList: newCheckedList });
         };
 
-        handleCheck = (uuid: string): void => {
+        handleSelectNone = (): void => {
             const { checkedList } = this.state;
             const newCheckedList = { ...checkedList };
-            newCheckedList[uuid] = !checkedList[uuid];
-            this.setState({ checkedList: newCheckedList });
+            for (const key in newCheckedList) {
+                newCheckedList[key] = false;
+            }
+            this.setState({ isSelected: false, checkedList: newCheckedList });
         };
 
         handleInvertSelect = (): void => {
@@ -213,7 +234,7 @@ export const DataTable = withStyles(styles)(
             for (const key in newCheckedList) {
                 newCheckedList[key] = !checkedList[key];
             }
-            this.setState({ checkedList: newCheckedList });
+            this.setState({ checkedList: newCheckedList, isSelected: this.isAllSelected(newCheckedList) });
         };
 
         render() {
@@ -254,7 +275,11 @@ export const DataTable = withStyles(styles)(
                         <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>
+                        <DataTableMultiselectPopover
+                            name={`Options`}
+                            options={this.multiselectOptions}
+                            checkedList={this.state.checkedList}
+                        ></DataTableMultiselectPopover>
                     </div>
                 </TableCell>
             ) : (