Update total count to reflect active filters

- Toolbar shows "X of Y" when status or assignee filter is active
- Pagination bar totalCount reflects filtered row count
- Extracted filter logic into filteredRows variable for reuse
This commit is contained in:
Adam Moussa 2026-04-17 12:52:59 -04:00
parent e2fc183636
commit ddbe1ae375

View file

@ -48,13 +48,24 @@ export default function WorkOrdersList() {
fetchUsers().then(setUsers).catch(() => {}); fetchUsers().then(setUsers).catch(() => {});
}, []); }, []);
const filteredRows = rows.filter((r) => {
if (statusFilter && r.status !== statusFilter) return false;
if (assigneeFilter === "__unassigned" && r.assignedTo) return false;
if (assigneeFilter && assigneeFilter !== "__unassigned" && r.assignedTo !== assigneeFilter) return false;
return true;
});
const hasFilter = statusFilter || assigneeFilter;
return ( return (
<> <>
<section className="listPage"> <section className="listPage">
<div className="woListToolbar"> <div className="woListToolbar">
<div className="woListToolbarLeft"> <div className="woListToolbarLeft">
<h2 className="woListTitle">Work Orders</h2> <h2 className="woListTitle">Work Orders</h2>
<span className="woListCount">{totalCount} total</span> <span className="woListCount">
{hasFilter ? `${filteredRows.length} of ${totalCount}` : `${totalCount} total`}
</span>
</div> </div>
<div className="woListToolbarRight"> <div className="woListToolbarRight">
<input <input
@ -102,19 +113,14 @@ export default function WorkOrdersList() {
<Table <Table
loading={loading} loading={loading}
error={err} error={err}
rows={rows.filter((r) => { rows={filteredRows}
if (statusFilter && r.status !== statusFilter) return false;
if (assigneeFilter === "__unassigned" && r.assignedTo) return false;
if (assigneeFilter && assigneeFilter !== "__unassigned" && r.assignedTo !== assigneeFilter) return false;
return true;
})}
onEdit={(item) => navigate(`/workorders/${item.id}`)} onEdit={(item) => navigate(`/workorders/${item.id}`)}
onDelete={handleDeleteClick} onDelete={handleDeleteClick}
page={page} page={page}
setPage={setPage} setPage={setPage}
pageSize={pageSize} pageSize={pageSize}
setPageSize={setPageSize} setPageSize={setPageSize}
totalCount={totalCount} totalCount={hasFilter ? filteredRows.length : totalCount}
totalPages={totalPages} totalPages={totalPages}
sortBy={sortBy} sortBy={sortBy}
setSortBy={setSortBy} setSortBy={setSortBy}