Skip to content
Jump to bottom

Enhancement show total items #221

Closed
wants to merge 5 commits into from
+104 −29
Closed

Enhancement show total items #221

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0487f63
Added filteredItems state variable; passed setter to ItemTable component
wrigh393 Jul 13, 2021
75fcae9
Added setFilteredItems prop; Impleted a useEffect for setting the num…
wrigh393 Jul 13, 2021
c86d444
Created ItemCounter component and related docs page
wrigh393 Jul 13, 2021
c39ebad
Added ItemCounter component to AppView; implemeted styling for UI
wrigh393 Jul 13, 2021
fcd41b9
Added PropTypes to ItemCounter component.
wrigh393 Jul 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
26 changes: 20 additions & 6 deletions src/components/AppView/AppView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import ItemViewAppBar from "../ItemViewAppBar/";
import ItemView from "../ItemView/";
import QueueSelector from "../QueueSelector/";
import { useToken } from "../AuthProvider/";
import ItemCounter from "../ItemCounter";

export default function AppView({ setDarkMode }) {
// Create stateful variables.
Expand Down Expand Up @@ -103,18 +104,31 @@ export default function AppView({ setDarkMode }) {
width: "40vw",
}
},
"container": {
display: "flex",
flexWrap: "wrap",
alignItems: "center"
},
queueSelectorContainer: {
flexGrow: 2
},
});
const classes = useStyles();
return (
<Box component={Paper} display="flex" square elevation={0}>
<Box className={classes.leftCol}>
<ItemTableAppBar title="webqueue2" setDarkMode={setDarkMode} />
<QueueSelector
open={queueSelectorOpen}
setOpen={setQueueSelectorOpen}
value={selectedQueues}
setValue={setSelectedQueues}
/>
<Box className={classes.container}>
<Box className={classes.queueSelectorContainer}>
<QueueSelector
open={queueSelectorOpen}
setOpen={setQueueSelectorOpen}
value={selectedQueues}
setValue={setSelectedQueues}
/>
</Box>
<ItemCounter filteredItems={filteredItems} totalItems={items.length} />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It'd be better to use the autocalculated value from the react-table instance inside ItemTable than the derived value from here to insure the count is kept in sync with what the UI reflects.

</Box>
<ItemTable data={items} rowCanBeSelected={sidebarOpen} setFilteredItems={setFilteredItems} loading={isLoading} />
</Box>
<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
Expand Down