From 44865c2ef7a276097f86d8576f50e1c412a4eaba Mon Sep 17 00:00:00 2001
From: Tyler Jordan Wright <wrigh393@w2vm1.ecn.purdue.edu>
Date: Wed, 4 Nov 2020 14:25:46 -0500
Subject: [PATCH 1/2] Changed color of selected row to a color that is easier
 to see

---
 src/components/ItemTable/ItemTable.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index a45d8ed..cbc1bf2 100644
--- a/src/components/ItemTable/ItemTable.js
+++ b/src/components/ItemTable/ItemTable.js
@@ -20,9 +20,7 @@ export default function ItemTable({ data }) {
             opacity: 0.2,
         },
         rowSelected: {
-            "&$selected, &$selected:hover": {
-                backgroundColor: theme.palette.primary,
-            },
+            backgroundColor: theme.palette.type === 'light' ? theme.palette.primary[100] : theme.palette.primary[600],
         },
         bandedRows: {
             '&:nth-of-type(even)': {
@@ -134,8 +132,10 @@ export default function ItemTable({ data }) {
                                     history.push(`/${row.original.queue}/${row.original.number}`);
                                     setSelecetedRow({ queue: row.original.queue, number: row.original.number })
                                 }}
+                                // This functionality should be achieved by using the selected prop and 
+                                // overriding the selected class but this applied the secondary color at 0.08% opacity.
+                                // Overridding the root class is a workaround.
                                 classes={{ root: isSelected ? classes.rowSelected : classes.bandedRows }}
-                                selected={selectedRow.queue === row.original.queue && selectedRow.number === row.original.number}
                                 {...row.getRowProps()} >
                                 {row.cells.map(cell => (
                                     <TableCell classes={{ root: classes.columnBorders }} {...cell.getCellProps()}>

From 937dbc00f8de7942bd4d63ba8a16856d72f48d0f Mon Sep 17 00:00:00 2001
From: Tyler Jordan Wright <wrigh393@w2vm1.ecn.purdue.edu>
Date: Fri, 6 Nov 2020 15:16:57 -0500
Subject: [PATCH 2/2] Added logic that removes selected row styling after
 ItemView is closed.

---
 src/App.js                            |  2 +-
 src/components/ItemTable/ItemTable.js | 21 +++++++++++++--------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/App.js b/src/App.js
index 8320c96..a7cfa5a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -73,7 +73,7 @@ function App() {
 
 				<Box className={classes.leftCol}>
 					<ItemTableAppBar title="webqueue2" setDarkMode={setDarkMode} />
-					<ItemTable data={items} onRowClick={ _ => console.log("Clicked!") }/>
+					<ItemTable data={items} rowCanBeSelected={sidebarOpen} />
 				</Box>
 
 				<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index cbc1bf2..b7b85d5 100644
--- a/src/components/ItemTable/ItemTable.js
+++ b/src/components/ItemTable/ItemTable.js
@@ -7,9 +7,9 @@ import RelativeTime from "react-relative-time";
 import ItemTableFilter from "../ItemTableFilter/"
 import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
 
-export default function ItemTable({ data }) {
+export default function ItemTable({ data, rowCanBeSelected }) {
 
-    const theme = useTheme();
+    const theme = useTheme(); 
     const useStyles = makeStyles({
         // Fully visible for active icons
         activeSortIcon: {
@@ -27,12 +27,11 @@ export default function ItemTable({ data }) {
                 backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[700],
             },
         },
-
         columnBorders: {
             borderLeftWidth: "1px",
             borderLeftStyle: "solid",
             borderColor: theme.palette.type === "light" ? theme.palette.grey[300] : theme.palette.grey[500]
-        }
+        },
     });
     const classes = useStyles();
 
@@ -135,10 +134,13 @@ export default function ItemTable({ data }) {
                                 // This functionality should be achieved by using the selected prop and 
                                 // overriding the selected class but this applied the secondary color at 0.08% opacity.
                                 // Overridding the root class is a workaround.
-                                classes={{ root: isSelected ? classes.rowSelected : classes.bandedRows }}
+                                classes={{ root: (isSelected && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows }}
                                 {...row.getRowProps()} >
                                 {row.cells.map(cell => (
-                                    <TableCell classes={{ root: classes.columnBorders }} {...cell.getCellProps()}>
+                                    <TableCell 
+                                        classes={{ root: classes.columnBorders }}
+                                        {...cell.getCellProps()}
+                                    >
                                         {cell.render("Cell")}
                                     </TableCell>
                                 ))}
@@ -153,9 +155,12 @@ export default function ItemTable({ data }) {
 
 ItemTable.propTypes = {
     /** Array of items from all active queues to display in table. */
-    "items": PropTypes.array
+    "items": PropTypes.array,
+    /** State variable indicating if rows can be selected. When false, all rows are deselected. */
+    "rowCanBeSelected": PropTypes.bool
 };
 
 ItemTable.defaultProps = {
-    "items": []
+    "items": [],
+    "rowCanBeSelected": true
 };
\ No newline at end of file