15768: set up button filter, minor cleanup Arvados-DCO-1.1-Signed-off-by: Lisa Knox...

[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 7f0e93ca632090d2a1fb7d356bbd70e43db43d77..7a9d95b0abb7987544ed0cbd63e0e85941f39404 100644 (file)
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -53,6 +53,7 @@ export interface DataTableDataProps<I> {
     currentItemUuid?: string;
     currentRoute?: string;
     toggleMSToolbar: (isVisible: boolean) => void;
+    setCheckedListOnStore: (checkedList: TCheckedList) => void;
 }
 
 type CssRules =
@@ -124,9 +125,11 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     },
 });
 
+export type TCheckedList = Record<string, boolean>;
+
 type DataTableState = {
     isSelected: boolean;
-    checkedList: Record<string, boolean>;
+    checkedList: TCheckedList;
 };
 
 type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
@@ -143,15 +146,15 @@ export const DataTable = withStyles(styles)(
         }
 
         componentDidUpdate(prevProps: Readonly<DataTableProps<T>>, prevState: DataTableState) {
-            const { items, toggleMSToolbar } = this.props;
-            const { checkedList } = this.state;
+            const { items, toggleMSToolbar, setCheckedListOnStore } = this.props;
+            const { isSelected, checkedList } = this.state;
             if (!arraysAreCongruent(prevProps.items, items)) {
-                this.state.isSelected = false;
-                this.initializeCheckedList(items);
+                if (isSelected === true) this.setState({ isSelected: false });
+                if (items.length) this.initializeCheckedList(items);
             }
             if (prevState.checkedList !== checkedList) {
                 toggleMSToolbar(this.isAnySelected() ? true : false);
-                window.localStorage.setItem('selectedRows', JSON.stringify(checkedList));
+                setCheckedListOnStore(checkedList);
             }
         }
 
@@ -173,27 +176,28 @@ export const DataTable = withStyles(styles)(
         };
 
         multiselectOptions: DataTableMultiselectOption[] = [
-            { name: 'All', fn: () => this.handleSelectAll() },
-            { name: 'None', fn: () => this.handleSelectNone() },
-            { name: 'Invert', fn: () => this.handleInvertSelect() },
+            { name: 'All', fn: (list) => this.handleSelectAll(list) },
+            { name: 'None', fn: (list) => this.handleSelectNone(list) },
+            { name: 'Invert', fn: (list) => this.handleInvertSelect(list) },
         ];
 
         initializeCheckedList = (uuids: any[]): void => {
-            const { checkedList } = this.state;
+            const newCheckedList = { ...this.state.checkedList };
+
             uuids.forEach((uuid) => {
-                if (!checkedList.hasOwnProperty(uuid)) {
-                    checkedList[uuid] = false;
+                if (!newCheckedList.hasOwnProperty(uuid)) {
+                    newCheckedList[uuid] = false;
                 }
             });
-            for (const key in checkedList) {
+            for (const key in newCheckedList) {
                 if (!uuids.includes(key)) {
-                    delete checkedList[key];
+                    delete newCheckedList[key];
                 }
             }
-            window.localStorage.setItem('selectedRows', JSON.stringify(checkedList));
+            this.setState({ checkedList: newCheckedList });
         };
 
-        isAllSelected = (list: Record<string, boolean>): boolean => {
+        isAllSelected = (list: TCheckedList): boolean => {
             for (const key in list) {
                 if (list[key] === false) return false;
             }
@@ -202,6 +206,7 @@ export const DataTable = withStyles(styles)(
 
         isAnySelected = (): boolean => {
             const { checkedList } = this.state;
+            if (!Object.keys(checkedList).length) return false;
             for (const key in checkedList) {
                 if (checkedList[key] === true) return true;
             }
@@ -216,35 +221,37 @@ export const DataTable = withStyles(styles)(
         };
 
         handleSelectorSelect = (): void => {
+            const { checkedList } = this.state;
             const { isSelected } = this.state;
-            isSelected ? this.handleSelectNone() : this.handleSelectAll();
+            isSelected ? this.handleSelectNone(checkedList) : this.handleSelectAll(checkedList);
         };
 
-        handleSelectAll = (): void => {
-            const { checkedList } = this.state;
-            const newCheckedList = { ...checkedList };
-            for (const key in newCheckedList) {
-                newCheckedList[key] = true;
+        handleSelectAll = (list: TCheckedList): void => {
+            if (Object.keys(list).length) {
+                const newCheckedList = { ...list };
+                for (const key in newCheckedList) {
+                    newCheckedList[key] = true;
+                }
+                this.setState({ isSelected: true, checkedList: newCheckedList });
             }
-            this.setState({ isSelected: true, checkedList: newCheckedList });
         };
 
-        handleSelectNone = (): void => {
-            const { checkedList } = this.state;
-            const newCheckedList = { ...checkedList };
+        handleSelectNone = (list: TCheckedList): void => {
+            const newCheckedList = { ...list };
             for (const key in newCheckedList) {
                 newCheckedList[key] = false;
             }
             this.setState({ isSelected: false, checkedList: newCheckedList });
         };
 
-        handleInvertSelect = (): void => {
-            const { checkedList } = this.state;
-            const newCheckedList = { ...checkedList };
-            for (const key in newCheckedList) {
-                newCheckedList[key] = !checkedList[key];
+        handleInvertSelect = (list: TCheckedList): void => {
+            if (Object.keys(list).length) {
+                const newCheckedList = { ...list };
+                for (const key in newCheckedList) {
+                    newCheckedList[key] = !list[key];
+                }
+                this.setState({ checkedList: newCheckedList, isSelected: this.isAllSelected(newCheckedList) });
             }
-            this.setState({ checkedList: newCheckedList, isSelected: this.isAllSelected(newCheckedList) });
         };
 
         render() {
@@ -279,17 +286,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;
+            const { isSelected, checkedList } = this.state;
             return column.name === 'checkBoxColumn' ? (
                 <TableCell key={key || index} className={classes.checkBoxCell}>
                     <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>
+                            <input type='checkbox' className={classes.checkBox} checked={isSelected} onChange={this.handleSelectorSelect}></input>
                         </Tooltip>
-                        <DataTableMultiselectPopover
-                            name={`Options`}
-                            options={this.multiselectOptions}
-                            checkedList={this.state.checkedList}
-                        ></DataTableMultiselectPopover>
+                        <DataTableMultiselectPopover name={`Options`} options={this.multiselectOptions} checkedList={checkedList}></DataTableMultiselectPopover>
                     </div>
                 </TableCell>
             ) : (