From: Lisa Knox <lisaknox83@gmail.com>
Date: Tue, 25 Apr 2023 14:40:05 +0000 (-0400)
Subject: 15768: remote select/unselect works Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa... 
X-Git-Tag: 2.7.1~13^2~132
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/a60309a6b134ca66fa66a71c489e633a84f52f0f?ds=inline

15768: remote select/unselect works Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>
---

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index ea95648e..685d6bc1 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -238,6 +238,7 @@ export const DataExplorer = withStyles(styles)(
                                 defaultViewMessages={defaultViewMessages}
                                 currentItemUuid={currentItemUuid}
                                 currentRoute={paperKey}
+                                checkedList={{}}
                             />
                         </Grid>
                         <Grid item xs>
diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index e2ee6951..2bb48a3c 100644
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -90,61 +90,83 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     },
 });
 
-//master list for all things checked and unchecked
-const checkedList: Record<string, boolean> = {};
-
-const initializeCheckedList = (items: any[]): void => {
-    for (const uuid in checkedList) {
-        if (checkedList.hasOwnProperty(uuid)) {
-            delete checkedList[uuid];
-        }
-    }
-    items.forEach((uuid) => {
-        if (!checkedList.hasOwnProperty[uuid]) {
-            checkedList[uuid] = false;
-        }
-    });
-};
-
-const handleResourceSelect = (uuid: string) => {
-    if (!checkedList[uuid]) {
-        checkedList[uuid] = true;
-    } else {
-        checkedList[uuid] = false;
-    }
-    console.log(checkedList);
-};
-
 const handleSelectAll = () => {};
 
 const handleDeselectAll = () => {};
 
-const checkBoxColumn: DataColumn<any, any> = {
-    name: '',
-    selected: true,
-    configurable: false,
-    filters: createTree(),
-    render: (item) => {
-        return <Checkbox color='primary' onClick={() => handleResourceSelect(item)} />;
-    },
+type DataTableState = {
+    checkedList: Record<string, boolean>;
 };
 
-type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
+type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules> & DataTableState;
 
 export const DataTable = withStyles(styles)(
     class Component<T> extends React.Component<DataTableProps<T>> {
+        constructor(props) {
+            super(props);
+            this.state = {
+                checkedList: {},
+            };
+            this.initializeCheckedList = this.initializeCheckedList.bind(this);
+            this.handleResourceSelect = this.handleResourceSelect.bind(this);
+        }
+        checkBoxColumn: DataColumn<any, any> = {
+            name: 'checkBoxColumn',
+            selected: true,
+            configurable: false,
+            filters: createTree(),
+            render: (uuid) => {
+                return <input type='checkbox' name={uuid} color='primary' onChange={() => this.handleResourceSelect(uuid)}></input>;
+            },
+        };
+        initializeCheckedList = (items: any[]): void => {
+            const checkedList = this.state;
+            for (const uuid in checkedList) {
+                if (checkedList.hasOwnProperty(uuid)) {
+                    delete checkedList[uuid];
+                }
+            }
+            items.forEach((uuid) => {
+                if (!checkedList.hasOwnProperty[uuid]) {
+                    checkedList[uuid] = false;
+                }
+            });
+            console.log(this.state);
+        };
+
+        handleResourceSelect = (uuid: string) => {
+            const checkedList = this.state;
+            if (!checkedList[uuid]) {
+                checkedList[uuid] = true;
+            } else {
+                checkedList[uuid] = false;
+            }
+            console.log(checkedList);
+        };
+
         componentDidUpdate(prevProps: Readonly<DataTableProps<T>>, prevState: Readonly<{}>, snapshot?: any): void {
             if (prevProps.items !== this.props.items) {
-                console.log('hi');
-                initializeCheckedList(this.props.items);
+                this.initializeCheckedList(this.props.items);
             }
         }
         render() {
             const { items, classes, working, columns } = this.props;
-            if (columns[0] !== checkBoxColumn) columns.unshift(checkBoxColumn);
+            if (columns[0].name !== this.checkBoxColumn.name) columns.unshift(this.checkBoxColumn);
+            const firstBox: HTMLInputElement | null = document.querySelector('input[type="checkbox"]');
             return (
                 <div className={classes.root}>
                     <div className={classes.content}>
+                        <button
+                            onClick={() => {
+                                // if (firstBox) this.handleResourceSelect(firstBox?.name);
+                                if (firstBox) firstBox.click();
+                                // if (firstBox) firstBox.checked = !firstBox.checked;
+                                console.log(firstBox);
+                            }}
+                        >
+                            TEST
+                        </button>
+                        {/* <input type='checkbox'></input> */}
                         <Table>
                             <TableHead>
                                 <TableRow>{this.mapVisibleColumns(this.renderHeadCell)}</TableRow>