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
13 changes: 9 additions & 4 deletions src/components/ItemTable/ItemTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { memo, useState } from "react";
import React, { memo, useState, useEffect } from "react";
import PropTypes from "prop-types";
import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table";
import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Box, Grid, ButtonGroup, IconButton, makeStyles, useTheme } from "@material-ui/core";
Expand All @@ -12,7 +12,7 @@ import ItemTableCell from "../ItemTableCell";
import LastUpdatedCell from "../LastUpdatedCell/";
import jester from "./loading-annimation.gif";

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

const theme = useTheme();
Expand Down Expand Up @@ -42,7 +42,7 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
// are a hotfix to force the table body to have height until a better solution is found.
VirtualizedTableStyles: {
height: '82vh !important',
display:"table-row"
display: "table-row"
},
tableMargin: {
marginTop: theme.spacing(2)
Expand All @@ -68,7 +68,7 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
{ Header: 'Last Updated', accessor: 'last_updated', sortInverted: true },
{ Header: 'Department', accessor: 'department' },
{ Header: 'Building', accessor: 'building' },
{ Header: 'Date Received', accessor: 'date_received', sortInverted: true ,
{ Header: 'Date Received', accessor: 'date_received', sortInverted: true },
], []);
const tableInstance = useTable(
{
Expand Down Expand Up @@ -98,6 +98,11 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
);
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance;

//Sets filteredItems length when items are filtered from the table/
Copy link
Collaborator

Choose a reason for hiding this comment

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

Add space between comment marker and comment content.

- //Sets...
+ // Sets...

useEffect(() => {
setFilteredItems(tableInstance.filteredRows.length)
}, [tableInstance.filteredRows.length])

return (
loading
? (
Expand Down