Skip to content

Commit

Permalink
Merge branch 'Feature-Load-Item-Headers-Only' of github.itap.purdue.e…
Browse files Browse the repository at this point in the history 
…du:ECN/webqueue2 into Feature-Load-Item-Headers-Only
  • Loading branch information
@campb303
campb303 committed Feb 23, 2021
2 parents c343963 + 4b12f9e commit b0173b9
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 50 deletions.
3 changes: 2 additions & 1 deletion src/components/AppView/AppView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export default function AppView({ setDarkMode }){
const [items, setItems] = useState([]);
const [selectedQueues, setSelectedQueues] = useState([]);
const [queueSelectorOpen, setQueueSelectorOpen] = useState(false);
const [isLoading, setIsLoading] = useState(true);

// Create contextual variables.
const activeItem = useItem();
Expand Down Expand Up @@ -117,7 +118,7 @@ export default function AppView({ setDarkMode }){
value={selectedQueues}
setValue={setSelectedQueues}
/>
<ItemTable data={items} rowCanBeSelected={sidebarOpen}/>
<ItemTable data={items} rowCanBeSelected={sidebarOpen} loading={isLoading}/>
</Box>

<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
Expand Down
36 changes: 30 additions & 6 deletions src/components/ItemBodyView/ItemBodyView.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";
import PropTypes from "prop-types";
import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineDot } from '@material-ui/lab';
import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineDot, Skeleton } from '@material-ui/lab';
import { makeStyles } from "@material-ui/core";
import DirectoryInformation from "../DirectoryInformation/";
import Assignment from "../Assignment/";
Expand Down Expand Up @@ -41,21 +41,26 @@ export default function ItemBodyView({ item }) {
case "status":
return <TimelineActionCard {...section} />
case "assignment":
return <Assignment {...section} />
return <Assignment {...section} />
case "reply_to_user":
return <TimelineActionCard {...section} />
case "reply_from_user":
return <MessageView {...section} />
return <MessageView {...section} />
case "parse_error":
return <ParseError {...section} />
default:
return `No match found for type: ${section.type}`;
};
};

const testing = true;

return (
<Timeline align="left" classes={{ root: classes["Timeline-root"] }}>
{objectIsEmpty(item) ? "" : item.content.map((section) => (
{/* Below is the original ternary operation for the map fucntion for future reference */}
{/* {objectIsEmpty(item) ? "" : item.content.map((section) */}

{testing ? Object.keys(item).map((section) => (
<TimelineItem
classes={{
missingOppositeContent: classes["TimelineItem-missingOppositeContent"],
Expand All @@ -68,10 +73,29 @@ export default function ItemBodyView({ item }) {
<TimelineContent
classes={{ root: classes["TimelineContent-root"] }}
>
{generateTimelineItem(section)}
<Skeleton />
</TimelineContent>
</TimelineItem>
))}
))
: item.content.map((section) => (
<TimelineItem
classes={{
missingOppositeContent: classes["TimelineItem-missingOppositeContent"],
}}
>
<TimelineSeparator>
<TimelineDot />
<TimelineConnector />
</TimelineSeparator>
<TimelineContent
classes={{ root: classes["TimelineContent-root"] }}
>{item === undefined
? <Skeleton />
: generateTimelineItem(section)
}
</TimelineContent>
</TimelineItem>
))}
</Timeline>
);
};
Expand Down
89 changes: 46 additions & 43 deletions src/components/ItemTable/ItemTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@ import ItemTableFilter from "../ItemTableFilter/"
import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
import ItemTableCell from "../ItemTableCell";
import LastUpdatedCell from "../LastUpdatedCell/";
import { Skeleton } from "@material-ui/lab";

export default function ItemTable({ data, rowCanBeSelected }) {
export default function ItemTable({ data, rowCanBeSelected, loading }) {
const [selectedRow, setSelectedRow] = useState({ queue: null, number: null });

const theme = useTheme();
Expand Down Expand Up @@ -44,7 +45,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
() => [
{ Header: 'Queue', accessor: 'queue', },
{ Header: 'Item #', accessor: 'number' },
{ Header: 'From', accessor: 'userAlias'},
{ Header: 'From', accessor: 'userAlias' },
{ Header: 'Assigned To', accessor: 'assignedTo' },
{ Header: 'Subject', accessor: 'subject' },
{ Header: 'Status', accessor: 'status', },
Expand All @@ -53,7 +54,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
{ Header: 'Department', accessor: 'department' },
{ Header: 'Building', accessor: 'building' },
{ Header: 'Date Received', accessor: 'dateReceived', sortInverted: true, Cell: ({ value }) => <RelativeTime value={value} /> },

], []);
const tableInstance = useTable(
{
Expand Down Expand Up @@ -140,46 +141,48 @@ export default function ItemTable({ data, rowCanBeSelected }) {
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>
);
}
})
))};
loading ? <Skeleton /> :

<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>
);
})}
Expand Down

0 comments on commit b0173b9

Please sign in to comment.