From a7720db440de180e7471edf70eea5ba272e1c809 Mon Sep 17 00:00:00 2001 From: Tyler Jordan Wright Date: Fri, 23 Oct 2020 15:37:28 -0400 Subject: [PATCH 1/5] Change srot button to display both sorting directions at the same time. --- src/components/ItemTable/ItemTable.js | 35 +++++++++++++++++---------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index 695a96f..98fc7c8 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -1,12 +1,11 @@ import React from "react"; import PropTypes from "prop-types"; import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table"; -import { makeStyles, Table, TableBody, TableCell, TableHead, TableRow, TableContainer, TableSortLabel - , Paper, Grid, useTheme, } from "@material-ui/core"; +import {makeStyles, Table, TableBody, TableCell, TableHead, TableRow, TableContainer, TableSortLabel , Paper, Grid, useTheme, ButtonGroup} from "@material-ui/core"; import { useHistory } from "react-router-dom"; import ItemTableFilter from "../ItemTableFilter/" -export default function ItemTable({ data, onRowClick }) { +export default function ItemTable({ data }) { const theme = useTheme(); const useStyles = makeStyles({ @@ -75,15 +74,25 @@ export default function ItemTable({ data, onRowClick }) { {column.render("Filter")} + + + + + - - @@ -96,8 +105,8 @@ export default function ItemTable({ data, onRowClick }) { {rows.map((row, i) => { prepareRow(row); return ( - history.push(`/${row.original.queue}/${row.original.number}`) } + history.push(`/${row.original.queue}/${row.original.number}`)} className={classes.bandedRows} {...row.getRowProps()}> {row.cells.map(cell => ( From 190c75ff31af5da736c1b624cdd4a6d070ff01d9 Mon Sep 17 00:00:00 2001 From: Tyler Jordan Wright Date: Fri, 30 Oct 2020 10:34:27 -0400 Subject: [PATCH 2/5] Fixed sort toggle buttons to allow sort by direction of the icon selected --- src/components/ItemTable/ItemTable.js | 65 +++++++++++++++++---------- 1 file changed, 41 insertions(+), 24 deletions(-) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index 98fc7c8..5e53c90 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -1,9 +1,10 @@ import React from "react"; import PropTypes from "prop-types"; -import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table"; -import {makeStyles, Table, TableBody, TableCell, TableHead, TableRow, TableContainer, TableSortLabel , Paper, Grid, useTheme, ButtonGroup} from "@material-ui/core"; +import { useTable, useFilters, useFlexLayout, useSortBy, useRowSelect } from "react-table"; +import { makeStyles, Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, Grid, useTheme, ButtonGroup, IconButton } from "@material-ui/core"; import { useHistory } from "react-router-dom"; import ItemTableFilter from "../ItemTableFilter/" +import { ArrowDownward, ArrowUpward } from "@material-ui/icons"; export default function ItemTable({ data }) { @@ -17,6 +18,11 @@ export default function ItemTable({ data }) { inactiveSortIcon: { opacity: 0.2, }, + selectedItem: { + '.Mui-selected': { + backgroundColor: theme.palette.type === 'light' ? theme.palette.primary[50] : theme.palette.primary[700], + } + }, bandedRows: { '&:nth-of-type(even)': { backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[700], @@ -35,7 +41,7 @@ export default function ItemTable({ data }) { { Header: 'Subject', accessor: 'subject' }, { Header: 'Status', accessor: 'status', }, { Header: 'Priority', accessor: 'priority' }, - { Header: 'Last Updated', accessor: 'lastUpdated' }, + { Header: 'Last Updated', accessor: 'lastUpdated',}, { Header: 'Department', accessor: 'department' }, { Header: 'Building', accessor: 'building' }, { Header: 'Date Received', accessor: 'dateReceived' }, @@ -54,11 +60,11 @@ export default function ItemTable({ data }) { /> ); } - } + }, }, - useFilters, useFlexLayout, useSortBy + useFilters, useFlexLayout, useSortBy, useRowSelect ); - const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = tableInstance; + const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance; return ( @@ -75,22 +81,32 @@ export default function ItemTable({ data }) { - - - + { + const isSortedAsc = column.isSorted && !column.isSortedDesc; + + isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false) + })} + > + + + { + const isSortedDesc = column.isSorted && column.isSortedDesc; + + isSortedDesc ? column.clearSortBy() : column.toggleSortBy(true) + })} + > + + @@ -106,8 +122,9 @@ export default function ItemTable({ data }) { prepareRow(row); return ( history.push(`/${row.original.queue}/${row.original.number}`)} - className={classes.bandedRows} {...row.getRowProps()}> + onClick={() => {history.push(`/${row.original.queue}/${row.original.number}`);}} + className={classes.bandedRows} + {...row.getRowProps()} > {row.cells.map(cell => ( {cell.render("Cell")} From 9be5a9e33a14eab699a13f326f4d3a8b50272ec0 Mon Sep 17 00:00:00 2001 From: Tyler Jordan Wright Date: Fri, 30 Oct 2020 11:58:48 -0400 Subject: [PATCH 3/5] removed row selection code from branch --- src/components/ItemTable/ItemTable.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index 5e53c90..a1f68aa 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -1,6 +1,6 @@ import React from "react"; import PropTypes from "prop-types"; -import { useTable, useFilters, useFlexLayout, useSortBy, useRowSelect } from "react-table"; +import { useTable, useFilters, useFlexLayout, useSortBy, } from "react-table"; import { makeStyles, Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, Grid, useTheme, ButtonGroup, IconButton } from "@material-ui/core"; import { useHistory } from "react-router-dom"; import ItemTableFilter from "../ItemTableFilter/" @@ -41,7 +41,7 @@ export default function ItemTable({ data }) { { Header: 'Subject', accessor: 'subject' }, { Header: 'Status', accessor: 'status', }, { Header: 'Priority', accessor: 'priority' }, - { Header: 'Last Updated', accessor: 'lastUpdated',}, + { Header: 'Last Updated', accessor: 'lastUpdated', }, { Header: 'Department', accessor: 'department' }, { Header: 'Building', accessor: 'building' }, { Header: 'Date Received', accessor: 'dateReceived' }, @@ -62,7 +62,7 @@ export default function ItemTable({ data }) { } }, }, - useFilters, useFlexLayout, useSortBy, useRowSelect + useFilters, useFlexLayout, useSortBy, ); const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance; @@ -122,7 +122,6 @@ export default function ItemTable({ data }) { prepareRow(row); return ( {history.push(`/${row.original.queue}/${row.original.number}`);}} className={classes.bandedRows} {...row.getRowProps()} > {row.cells.map(cell => ( From 496196e66be8f62b4ec737ed7f5d7ee5b6c95961 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Fri, 30 Oct 2020 12:40:38 -0400 Subject: [PATCH 4/5] Cleanup --- src/components/ItemTable/ItemTable.js | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index ff324a4..b45a99a 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -1,8 +1,10 @@ import React from "react"; import PropTypes from "prop-types"; -import { useTable, useFilters, useFlexLayout, useSortBy, useRowSelect } from "react-table"; -import { makeStyles, Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, Grid, useTheme, ButtonGroup, IconButton } from "@material-ui/core"; - +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 { useHistory } from "react-router-dom"; import RelativeTime from "react-relative-time"; import ItemTableFilter from "../ItemTableFilter/" @@ -20,11 +22,6 @@ export default function ItemTable({ data }) { inactiveSortIcon: { opacity: 0.2, }, - selectedItem: { - '.Mui-selected': { - backgroundColor: theme.palette.type === 'light' ? theme.palette.primary[50] : theme.palette.primary[700], - } - }, bandedRows: { '&:nth-of-type(even)': { backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[700], @@ -48,7 +45,6 @@ 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: 'Department', accessor: 'department' }, { Header: 'Building', accessor: 'building' }, @@ -88,13 +84,11 @@ export default function ItemTable({ data }) { {column.render("Filter")} - { const isSortedAsc = column.isSorted && !column.isSortedDesc; - isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false) })} > @@ -107,7 +101,6 @@ export default function ItemTable({ data }) { size="small" onClick={(_ => { const isSortedDesc = column.isSorted && column.isSortedDesc; - isSortedDesc ? column.clearSortBy() : column.toggleSortBy(true) })} > @@ -117,7 +110,6 @@ export default function ItemTable({ data }) { /> - From e3eb945e5a113fa2bef9fdae33541215686a22b2 Mon Sep 17 00:00:00 2001 From: Tyler Jordan Wright Date: Fri, 30 Oct 2020 12:53:14 -0400 Subject: [PATCH 5/5] Fixed row click --- src/components/ItemTable/ItemTable.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index b45a99a..2519a04 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -123,6 +123,7 @@ export default function ItemTable({ data }) { prepareRow(row); return ( history.push(`/${row.original.queue}/${row.original.number}`)} className={classes.bandedRows} {...row.getRowProps()} > {row.cells.map(cell => (