Skip to content

Commit

Permalink
Reformat
Browse files Browse the repository at this point in the history
  • Loading branch information
@campb303
campb303 committed Mar 13, 2021
1 parent 21858cd commit 9e9e48a
Showing 1 changed file with 110 additions and 111 deletions.
221 changes: 110 additions & 111 deletions src/components/ItemTable/ItemTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { useHistory } from "react-router-dom";
import RelativeTime from "react-relative-time";
import ItemTableFilter from "../ItemTableFilter/";
import ItemtTableSortButtons from "../ItemTableSortButtons/";
import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
import ItemTableCell from "../ItemTableCell";
import LastUpdatedCell from "../LastUpdatedCell/";
import jester from "./loading-annimation.gif";
Expand Down Expand Up @@ -98,119 +97,119 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {

return (
loading ? (
<Box className={classes.loadingAnnimation}>
<img src={jester} alt="Items are loading." />
</Box>
) : (
<TableContainer>
<Table
{...getTableProps}
aria-label="Table of Queue Items"
size="small"
classes={{ root: classes.tableMargin }}
>
<TableHead>
{headerGroups.map(headerGroup => (
<TableRow {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => {
// Determine sort directions
const isSortedAsc = column.isSorted && !column.isSortedDesc;
const isSortedDesc = column.isSorted && column.isSortedDesc;
<Box className={classes.loadingAnnimation}>
<img src={jester} alt="Items are loading." />
</Box>
) : (
<TableContainer>
<Table
{...getTableProps}
aria-label="Table of Queue Items"
size="small"
classes={{ root: classes.tableMargin }}
>
<TableHead>
{headerGroups.map(headerGroup => (
<TableRow {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => {
// Determine sort directions
const isSortedAsc = column.isSorted && !column.isSortedDesc;
const isSortedDesc = column.isSorted && column.isSortedDesc;

return (
<Grid container spacing={0}>
<TableCell
{...column.getHeaderProps()}
classes={{ root: classes.tableHeaderPadding }}
>
<Grid container spacing={0}>
<Grid item sm={10} >
{column.render("Filter")}
</Grid>
<Grid item sm={2} alignItems='center' justify='center'>
<ItemtTableSortButtons
sortAscArrowProps={{
...column.getSortByToggleProps(),
onClick: _ => (isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false))
}}
sortDescArrowProps={{
...column.getSortByToggleProps(),
onClick: _ => (isSortedDesc ? column.clearSortBy() : column.toggleSortBy(true))
}}
sortDirection={(_ => {
if (isSortedAsc) {
return 'asc';
}
else if (isSortedDesc) {
return 'desc';
}
else {
return undefined;
}
})()}
/>
</Grid>
return (
<Grid container spacing={0}>
<TableCell
{...column.getHeaderProps()}
classes={{ root: classes.tableHeaderPadding }}
>
<Grid container spacing={0}>
<Grid item sm={10} >
{column.render("Filter")}
</Grid>
</TableCell>
</Grid>
);
})}
</TableRow>
))}
</TableHead>
<Grid item sm={2} alignItems='center' justify='center'>
<ItemtTableSortButtons
sortAscArrowProps={{
...column.getSortByToggleProps(),
onClick: _ => (isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false))
}}
sortDescArrowProps={{
...column.getSortByToggleProps(),
onClick: _ => (isSortedDesc ? column.clearSortBy() : column.toggleSortBy(true))
}}
sortDirection={(_ => {
if (isSortedAsc) {
return 'asc';
}
else if (isSortedDesc) {
return 'desc';
}
else {
return undefined;
}
})()}
/>
</Grid>
</Grid>
</TableCell>
</Grid>
);
})}
</TableRow>
))}
</TableHead>

<TableBody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number
return (
<TableRow
hover
onClick={() => {
history.push(`/${row.original.queue}/${row.original.number}`);
setSelectedRow({ 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 && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows,
hover: classes.hoverBackgroundColor
}}
{...row.getRowProps()}
>
{row.cells.map(cell => (
cell.render(_ => {
switch (cell.column.id) {
case "dateReceived":
return (
<ItemTableCell TableCellProps={cell.getCellProps()}>
<RelativeTime value={cell.value} />
</ItemTableCell>
);
case "lastUpdated":
return (
<LastUpdatedCell
time={cell.value}
ItemTableCellProps={cell.getCellProps()}
/>
);
default:
return (
<ItemTableCell TableCellProps={cell.getCellProps()}>
{cell.value}
</ItemTableCell>
);
}
})
))}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
)
<TableBody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number
return (
<TableRow
hover
onClick={() => {
history.push(`/${row.original.queue}/${row.original.number}`);
setSelectedRow({ 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 && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows,
hover: classes.hoverBackgroundColor
}}
{...row.getRowProps()}
>
{row.cells.map(cell => (
cell.render(_ => {
switch (cell.column.id) {
case "dateReceived":
return (
<ItemTableCell TableCellProps={cell.getCellProps()}>
<RelativeTime value={cell.value} />
</ItemTableCell>
);
case "lastUpdated":
return (
<LastUpdatedCell
time={cell.value}
ItemTableCellProps={cell.getCellProps()}
/>
);
default:
return (
<ItemTableCell TableCellProps={cell.getCellProps()}>
{cell.value}
</ItemTableCell>
);
}
})
))}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
)
);
}

Expand Down

0 comments on commit 9e9e48a

Please sign in to comment.