diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index 7812195..bb37d7e 100644
--- a/src/components/ItemTable/ItemTable.js
+++ b/src/components/ItemTable/ItemTable.js
@@ -1,7 +1,7 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table";
-import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, Grid, ButtonGroup, IconButton, makeStyles, useTheme } from "@material-ui/core";
+import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, Grid, ButtonGroup, IconButton, makeStyles, useTheme, Typography } from "@material-ui/core";
import { useHistory } from "react-router-dom";
import RelativeTime from "react-relative-time";
import ItemTableFilter from "../ItemTableFilter/"
@@ -9,11 +9,7 @@ import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
export default function ItemTable({ data }) {
const [selectedRow, setSelecetedRow] = useState({ queue: null, number: null });
-
- const [cellBackgroundColor, setCellBackgroundColor] = useState("#ffffff");
-
-
-
+
const LastUpdatedCell = ({ time }) => {
const lastUpdated = new Date(time).getTime();
const now = new Date().getTime();
@@ -21,21 +17,25 @@ export default function ItemTable({ data }) {
const day = 24 * 60 * 60 * 1000;
const week = 7 * day;
const month = 4 * week;
-
- if (timeDelta > day && timeDelta < week && timeDelta < month)//more than one day since last
- {
- setCellBackgroundColor("yellow");
- } else if (timeDelta > week && timeDelta < month) // more than a week since last update
- {
- setCellBackgroundColor("purple");
- } else if (timeDelta > month) //more than a month since last update
- {
- setCellBackgroundColor("green");
- }
- return(
+
+let alpha = "rgba(255, 0, 0, " + lastUpdated/now + ")";
+console.log(alpha);
+
+
+ let backgroundColor = "white"
+
+ timeDelta > month ? backgroundColor = alpha :
+ timeDelta > week ? backgroundColor = alpha :
+ timeDelta > day ? backgroundColor = alpha :
+ backgroundColor = "white"
+ return (
+
+
+
+
);
- };
+ };
const theme = useTheme();
const useStyles = makeStyles({
@@ -61,7 +61,8 @@ export default function ItemTable({ data }) {
borderLeftWidth: "1px",
borderLeftStyle: "solid",
borderColor: theme.palette.type === "light" ? theme.palette.grey[300] : theme.palette.grey[500]
- }
+ },
+
});
const classes = useStyles();
@@ -75,7 +76,7 @@ export default function ItemTable({ data }) {
{ Header: 'Subject', accessor: 'subject' },
{ Header: 'Status', accessor: 'status', },
{ Header: 'Priority', accessor: 'priority' },
- { Header: 'Last Updated', accessor: 'lastUpdated', Cell: ({ value }) => },
+ { Header: 'Last Updated', accessor: 'lastUpdated', Cell: ({ value }) => },
{ Header: 'Department', accessor: 'department' },
{ Header: 'Building', accessor: 'building' },
{ Header: 'Date Received', accessor: 'dateReceived', Cell: ({ value }) => },
@@ -93,7 +94,7 @@ export default function ItemTable({ data }) {
onChange={(event) => setFilter(event.target.value)}
/>
);
- }
+ },
},
},
useFilters, useFlexLayout, useSortBy,
@@ -102,7 +103,7 @@ export default function ItemTable({ data }) {
return (
-
+
{headerGroups.map(headerGroup => (
@@ -162,13 +163,11 @@ export default function ItemTable({ data }) {
selected={isSelected}
{...row.getRowProps()} >
{row.cells.map(cell => (
-
- {cell.render("Cell")}
-
+
+ cell.render(
+ cell.column.id === "lastUpdated" ? : {cell.value}
+ )
+
))}
);