Move status and assignee filters to server-side

- Pass status and assignee as API query parameters
- Filters applied in SQL for accurate counts across all pages
- Remove client-side row filtering
- Pagination and total count now reflect filtered results
This commit is contained in:
Adam Moussa 2026-04-17 12:57:37 -04:00
parent ddbe1ae375
commit 0d847896db
2 changed files with 10 additions and 18 deletions

View file

@ -10,10 +10,13 @@ import "./styles.css";
export default function WorkOrdersList() { export default function WorkOrdersList() {
const navigate = useNavigate(); const navigate = useNavigate();
const [statusFilter, setStatusFilter] = useState("");
const [assigneeFilter, setAssigneeFilter] = useState("");
const { const {
rows, search, setSearch, page, setPage, pageSize, setPageSize, rows, search, setSearch, page, setPage, pageSize, setPageSize,
totalCount, loading, err, sortBy, setSortBy, sortDir, setSortDir totalCount, loading, err, sortBy, setSortBy, sortDir, setSortDir
} = usePaginatedList(fetchWorkOrdersPaged); } = usePaginatedList(fetchWorkOrdersPaged, { status: statusFilter, assignee: assigneeFilter });
const [deleteModal, setDeleteModal] = useState({ const [deleteModal, setDeleteModal] = useState({
isOpen: false, isOpen: false,
@ -39,8 +42,6 @@ export default function WorkOrdersList() {
} }
}; };
const [statusFilter, setStatusFilter] = useState("");
const [assigneeFilter, setAssigneeFilter] = useState("");
const [users, setUsers] = useState([]); const [users, setUsers] = useState([]);
const statuses = ["Open", "In Progress", "On Hold", "Done", "Cancelled"]; const statuses = ["Open", "In Progress", "On Hold", "Done", "Cancelled"];
@ -48,24 +49,13 @@ 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"> <span className="woListCount">{totalCount} total</span>
{hasFilter ? `${filteredRows.length} of ${totalCount}` : `${totalCount} total`}
</span>
</div> </div>
<div className="woListToolbarRight"> <div className="woListToolbarRight">
<input <input
@ -113,14 +103,14 @@ export default function WorkOrdersList() {
<Table <Table
loading={loading} loading={loading}
error={err} error={err}
rows={filteredRows} rows={rows}
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={hasFilter ? filteredRows.length : totalCount} totalCount={totalCount}
totalPages={totalPages} totalPages={totalPages}
sortBy={sortBy} sortBy={sortBy}
setSortBy={setSortBy} setSortBy={setSortBy}

View file

@ -1,10 +1,12 @@
import { get } from "../../../apiUtil"; import { get } from "../../../apiUtil";
import { API_URL } from "../../../constants"; import { API_URL } from "../../../constants";
export const fetchWorkOrdersPaged = async ({ search = "", page = 1, pageSize = 12, sortBy = "", sortDir = "" }) => { export const fetchWorkOrdersPaged = async ({ search = "", page = 1, pageSize = 12, sortBy = "", sortDir = "", status = "", assignee = "" }) => {
const params = new URLSearchParams({ search, page, pageSize }); const params = new URLSearchParams({ search, page, pageSize });
if (sortBy) params.append("sortBy", sortBy); if (sortBy) params.append("sortBy", sortBy);
if (sortDir) params.append("sortDir", sortDir); if (sortDir) params.append("sortDir", sortDir);
if (status) params.append("status", status);
if (assignee) params.append("assignee", assignee);
const res = await get(`${API_URL}/WorkOrder/GetWorkOrderList?${params.toString()}`); const res = await get(`${API_URL}/WorkOrder/GetWorkOrderList?${params.toString()}`);
const rows = (res?.data || res?.Data || []).map(x => ({ const rows = (res?.data || res?.Data || []).map(x => ({
id: x.id ?? x.Id, id: x.id ?? x.Id,