mirror of
https://github.com/Sea-Haven-Industries/shoc-frontend-new.git
synced 2026-10-07 11:39:00 +00:00
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:
parent
ddbe1ae375
commit
0d847896db
2 changed files with 10 additions and 18 deletions
|
|
@ -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}
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue