Added onClick functionality, updated theme colors, removed uneeded de…

…pendencies
ECN · Oct 21, 2020 · c9cda61 · c9cda61
1 parent 36896ff
commit c9cda61
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 42 deletions.
diff --git a/package.json b/package.json
@@ -14,7 +14,6 @@
     "clsx": "^1.1.1",
     "history": "^5.0.0",
     "material-table": "^1.63.1",
-    "mui-datatables": "^3.4.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",

diff --git a/src/App.js b/src/App.js
@@ -55,11 +55,11 @@ function App(){
 				<Box display="flex">
 					<Box className={classes.leftCol}>
 						<ItemTableAppBar title="webqueue2" darkMode={darkMode} setDarkMode={setDarkMode} theme={theme}/>
-						<ItemTable />
+						<ItemTable setActiveItem={setActiveItem} setSideBarOpen={setSidebarOpen} />
 					</Box>
 					<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
 						<ItemViewAppBar title={activeItem["queue"] + " " + activeItem["number"]} setSidebarOpen={setSidebarOpen} />
-						<ItemView activeItem={activeItem} setActiveItem={setActiveItem} setSidebarOpen={setSidebarOpen}/>
+						<ItemView  activeItem={activeItem} setActiveItem={setActiveItem} setSidebarOpen={setSidebarOpen}/>
 					</Box>
 				</Box>
 			</Paper>

diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -1,11 +1,13 @@
 import React, { useState, useEffect } from "react";
 import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table";
-import { makeStyles, Table, TableBody, TableCell, TableHead, TableRow, TableContainer, TableSortLabel, Paper, Grid } from "@material-ui/core";
+import { makeStyles, Table, TableBody, TableCell, TableHead, TableRow, TableContainer, TableSortLabel, Paper, Grid, IconButton, useTheme, } from "@material-ui/core";
 import ItemTableFilter from "../ItemTableFilter/"
+import { ArrowDownward } from "@material-ui/icons";
 
-export default function ItemTable() {
+export default function ItemTable({ onRowClick, setActiveItem, setSideBarOpen }) {
+    const theme = useTheme();
 
-    const useStyles = makeStyles({
+    const useStyles = makeStyles(theme => ({
         // Fully visible for active icons
         activeSortIcon: {
             opacity: 1,
@@ -14,7 +16,12 @@ export default function ItemTable() {
         inactiveSortIcon: {
             opacity: 0.2,
         },
-    });
+        bandedRows: {
+            '&:nth-of-type(even)': {
+                backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[700],
+            },
+        },
+    }));
 
     const classes = useStyles();
 
@@ -41,12 +48,7 @@ export default function ItemTable() {
             { Header: 'Date Received', accessor: 'dateReceived' },
         ], []);
 
-    const { getTableProps,
-        getTableBodyProps,
-        headerGroups,
-        rows,
-        prepareRow
-    } = useTable(
+    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
         {
             columns,
             data,
@@ -61,27 +63,28 @@ export default function ItemTable() {
                 }
             }
         },
-        useFilters,
-        useFlexLayout,
-        useSortBy
+        useFilters, useFlexLayout, useSortBy
     );
 
     return (
         <TableContainer component={Paper}>
-            <Table stickyHeader {...getTableProps} aria-label="simple table" >
+            <Table {...getTableProps} aria-label="Table of Queue Items" >
                 <TableHead>
                     {headerGroups.map(headerGroup => (
                         <TableRow {...headerGroup.getHeaderGroupProps()}>
                             {headerGroup.headers.map(column => (
                                 <Grid container spacing={1}>
                                     <TableCell {...column.getHeaderProps()}>
                                         <Grid container spacing={0}>
-                                            <Grid item sm={11} >
+                                            <Grid item sm={10} >
                                                 {column.render("Filter")}
                                             </Grid>
-                                            <Grid item sm={1} alignItems='center' justify='center'>
-                                                <TableSortLabel {...column.getHeaderProps(column.getSortByToggleProps())}
+                                            <Grid item sm={2} alignItems='center' justify='center'>
+
+                                                <TableSortLabel {...column.getSortByToggleProps()}
                                                     active={column.isSorted ? true : false}
+                                                    disableRipple={false}
+                                                    focusRipple
                                                     classes={{ icon: (column.isSorted ? classes.activeSortIcon : classes.inactiveSortIcon) }}
                                                     direction={column.isSorted ? column.isSortedDesc ? 'desc' : 'asc' : 'asc'}
                                                 >
@@ -98,7 +101,12 @@ export default function ItemTable() {
                     {rows.map((row, i) => {
                         prepareRow(row);
                         return (
-                            <TableRow {...row.getRowProps()}>
+                            <TableRow onClick={() => {
+                                setActiveItem(row.original);
+                                setSideBarOpen(true);
+                                console.log('original:', row.original);
+                            }}
+                                className={classes.bandedRows} {...row.getRowProps()}>
                                 {row.cells.map(cell => (
                                     <TableCell {...cell.getCellProps()}>
                                         {cell.render("Cell")}

diff --git a/src/components/ItemTableFilter/ItemTableFilter.js b/src/components/ItemTableFilter/ItemTableFilter.js
@@ -1,30 +1,57 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { TextField } from "@material-ui/core";
+import { TextField, useTheme, makeStyles } from "@material-ui/core";
+import { yellow } from '@material-ui/core/colors';
 
 export default function ItemTableFilter({ label, onChange }) {
-    return (
-        <>
-            <TextField
-                label={label}
-                onChange={onChange}
-                type="search"
-                size="small"
-                color="secondary"
-                variant="outlined"
-                fullWidth
-            />
-        </>
-    );
+  const theme = useTheme();
+  const useStyles = makeStyles({
+    root: {
+      '& label.Mui-focused': {
+        color: theme.palette.type === "light" ? "black" : "white",
+      },
+      '& .MuiOutlinedInput-root': {
+        '& fieldset': {
+          borderColor: theme.palette.type === "light" ? theme.palette.action.disabled : "white",
+        },
+        '&:hover fieldset': {
+          borderColor: theme.palette.type === "light" ? "black" : "white",
+        },
+        '&.Mui-focused fieldset': {
+          borderColor: theme.palette.type === "light" ? "black" : "white",
+        },
+        '&.Mui-focused label': {
+          borderColor: theme.palette.type === "light" ? "black" : "white",
+        },
+      },
+    },
+  });
+
+  const classes = useStyles();
+
+  return (
+    <>
+      <TextField
+        label={label}
+        onChange={onChange}
+        color="secondary"
+        type="search"
+        size="small"
+        variant="outlined"
+        fullWidth
+      />
+    </>
+  );
+
 };
 
 ItemTableFilter.propTypes = {
-    /** The label that appears inside the search box. */
-    "label": PropTypes.string,
-    /** The callback function that sets a column's filter value. */
-    "onChange": PropTypes.func.isRequired
+  /** The label that appears inside the search box. */
+  "label": PropTypes.string,
+  /** The callback function that sets a column's filter value. */
+  "onChange": PropTypes.func.isRequired
 };
 
 ItemTableFilter.defaultProps = {
-    "label": ""
+  "label": ""
 }
diff --git a/src/theme.js b/src/theme.js
@@ -1,3 +1,4 @@
+import { cyan, deepOrange, deepPurple, lightGreen, lightBlue, teal, purple } from '@material-ui/core/colors';
 import { createMuiTheme } from '@material-ui/core/styles'
 
 /**
@@ -8,12 +9,22 @@ import { createMuiTheme } from '@material-ui/core/styles'
  * @param {boolean} [darkMode=false] Whether theme should be dark or not.
  * @returns {Theme} MUI Theme.
  */
-export default function theme(darkMode=false){
+export default function theme(darkMode = false) {
     return (
         createMuiTheme({
             "palette": {
+                primary: deepPurple,
+
+                secondary: {
+                    main: teal[200],
+                },
+
                 "type": darkMode ? "dark" : "light",
-            }
+
+                "edit": {
+                    main: "#ffe56433",
+                }
+            },
         })
     );
 }