15768: checkbox css Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>

[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 66242de56bfeafb3e2de689075eb285463895e4a..effc46ab7a2cce08b9632ccb64bfa93e2a28c690 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 =
@@ -63,6 +64,7 @@ type CssRules =
     | 'checkBoxHead'
     | 'checkBoxCell'
     | 'checkBox'
+    | 'firstTableCell'
     | 'tableCell'
     | 'arrow'
     | 'arrowButton'
@@ -105,6 +107,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         paddingRight: '24px',
         color: '#737373',
     },
+    firstTableCell: {
+        paddingLeft: '5px',
+    },
     tableCellWorkflows: {
         '&:nth-last-child(2)': {
             padding: '0px',
@@ -124,9 +129,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,17 +150,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;
-                toggleMSToolbar(false);
-                this.initializeCheckedList(items);
+                if (isSelected === true) this.setState({ isSelected: false });
+                if (items.length) this.initializeCheckedList(items);
             }
             if (prevState.checkedList !== checkedList) {
-                console.log(this.isAnySelected());
                 toggleMSToolbar(this.isAnySelected() ? true : false);
-                window.localStorage.setItem('selectedRows', JSON.stringify(checkedList));
+                setCheckedListOnStore(checkedList);
             }
         }
 
@@ -175,28 +180,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 => {
-            console.log('INIT LIIST');
-            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;
             }
@@ -220,14 +225,14 @@ 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;
-            if (Object.keys(checkedList).length) {
-                const newCheckedList = { ...checkedList };
+        handleSelectAll = (list: TCheckedList): void => {
+            if (Object.keys(list).length) {
+                const newCheckedList = { ...list };
                 for (const key in newCheckedList) {
                     newCheckedList[key] = true;
                 }
@@ -235,21 +240,19 @@ export const DataTable = withStyles(styles)(
             }
         };
 
-        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;
-            if (Object.keys(checkedList).length) {
-                const newCheckedList = { ...checkedList };
+        handleInvertSelect = (list: TCheckedList): void => {
+            if (Object.keys(list).length) {
+                const newCheckedList = { ...list };
                 for (const key in newCheckedList) {
-                    newCheckedList[key] = !checkedList[key];
+                    newCheckedList[key] = !list[key];
                 }
                 this.setState({ checkedList: newCheckedList, isSelected: this.isAllSelected(newCheckedList) });
             }
@@ -287,21 +290,22 @@ 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}
+                            checkedList={checkedList}
                         ></DataTableMultiselectPopover>
                     </div>
                 </TableCell>
             ) : (
-                <TableCell className={classes.tableCell} key={key || index}>
+                <TableCell className={index == 1 ? classes.firstTableCell : classes.tableCell} key={key || index}>
                     {renderHeader ? (
                         renderHeader()
                     ) : countNodes(filters) > 0 ? (
@@ -350,7 +354,13 @@ export const DataTable = withStyles(styles)(
                     {this.mapVisibleColumns((column, index) => (
                         <TableCell
                             key={column.key || index}
-                            className={currentRoute === '/workflows' ? classes.tableCellWorkflows : index === 0 ? classes.checkBoxCell : classes.tableCell}
+                            className={
+                                currentRoute === '/workflows'
+                                    ? classes.tableCellWorkflows
+                                    : index === 0
+                                    ? classes.checkBoxCell
+                                    : `${classes.tableCell} ${index === 1 ? classes.firstTableCell : ''}`
+                            }
                         >
                             {column.render(item)}
                         </TableCell>