diff --git a/frontend/src/components/cytology/CytologyDashBoard.js b/frontend/src/components/cytology/CytologyDashBoard.js index 38d87f4fa..00d009790 100644 --- a/frontend/src/components/cytology/CytologyDashBoard.js +++ b/frontend/src/components/cytology/CytologyDashBoard.js @@ -43,13 +43,10 @@ function CytologyDashboard() { const [filters, setFilters] = useState({ searchTerm: "", myCases: false, - statuses: [ - { - id: "PREPARING_SLIDES", - value: "Preparing slides", - }, - ], + statuses: [{}], }); + const [inProgressStatuses, setInProgressStatuses] = useState([]); + const [counts, setCounts] = useState({ inProgress: 0, awaitingReview: 0, @@ -59,10 +56,31 @@ function CytologyDashboard() { const [page, setPage] = useState(1); const [pageSize, setPageSize] = useState(100); const intl = useIntl(); - + const [inProgressStatusObjects, setInProgressStatusObjects] = useState( + inProgressStatuses.map((statusId) => ({ id: statusId })), + ); const setStatusList = (statusList) => { if (componentMounted.current) { + // Set all statuses setStatuses(statusList); + + // Filter out COMPLETED statuses and update the in-progress statuses state + const filteredStatuses = statusList + .filter((status) => status.id !== "COMPLETED") + .map((status) => status.id); + + setInProgressStatuses(filteredStatuses); + + // Update the inProgressStatusObjects state + setInProgressStatusObjects( + filteredStatuses.map((statusId) => ({ id: statusId })), + ); + + // Set filters using the updated state + setFilters((prev) => ({ + ...prev, + statuses: filteredStatuses.map((statusId) => ({ id: statusId })), + })); } }; @@ -149,13 +167,29 @@ function CytologyDashboard() { }; const setStatusFilter = (event) => { - if (event.target.value === "All") { + const { value } = event.target; + + if (value === "All") { setFilters({ ...filters, statuses: statuses }); + } else if (value === "IN_PROGRESS") { + setFilters({ ...filters, statuses: inProgressStatusObjects }); } else { - setFilters({ ...filters, statuses: [{ id: event.target.value }] }); + setFilters({ ...filters, statuses: [{ id: value }] }); } }; + const getSelectedValue = () => { + const selectedValue = + filters.statuses.length === inProgressStatuses.length && + filters.statuses.every((status) => inProgressStatuses.includes(status.id)) + ? "IN_PROGRESS" + : filters.statuses.length > 1 + ? "All" + : filters.statuses[0].id; + + return selectedValue; + }; + const filtersToParameters = () => { return ( "statuses=" + @@ -242,23 +276,6 @@ function CytologyDashboard() { }, ]; - useEffect(() => { - componentMounted.current = true; - setFilters({ - ...filters, - statuses: [ - { - id: "PREPARING_SLIDES", - value: "Preparing slides", - }, - ], - }); - - return () => { - componentMounted.current = false; - }; - }, [statuses]); - useEffect(() => { componentMounted.current = true; refreshItems(); @@ -329,30 +346,20 @@ function CytologyDashboard() { id="statusFilter" name="statusFilter" labelText={intl.formatMessage({ id: "label.filters.status" })} - value={ - filters.statuses.length > 1 ? "All" : filters.statuses[0].id - } + value={getSelectedValue()} onChange={setStatusFilter} noLabel > - - - {statuses.map((status, index) => { - return ( - - ); - })} + + + + {statuses.map((status, index) => ( + + ))} diff --git a/frontend/src/components/pathology/PathologyDashboard.js b/frontend/src/components/pathology/PathologyDashboard.js index 11489b31e..c811999f5 100644 --- a/frontend/src/components/pathology/PathologyDashboard.js +++ b/frontend/src/components/pathology/PathologyDashboard.js @@ -48,13 +48,11 @@ function PathologyDashboard() { const [filters, setFilters] = useState({ searchTerm: "", myCases: false, - statuses: [ - { - id: "GROSSING", - value: "Grossing", - }, - ], + statuses: [{}], }); + + const [inProgressStatuses, setInProgressStatuses] = useState([]); + const [counts, setCounts] = useState({ inProgress: 0, awaitingReview: 0, @@ -62,10 +60,31 @@ function PathologyDashboard() { complete: 0, }); const [loading, setLoading] = useState(true); - + const [inProgressStatusObjects, setInProgressStatusObjects] = useState( + inProgressStatuses.map((statusId) => ({ id: statusId })), + ); const setStatusList = (statusList) => { if (componentMounted.current) { + // Set all statuses setStatuses(statusList); + + // Filter out COMPLETED statuses and update the in-progress statuses state + const filteredStatuses = statusList + .filter((status) => status.id !== "COMPLETED") + .map((status) => status.id); + + setInProgressStatuses(filteredStatuses); + + // Update the inProgressStatusObjects state + setInProgressStatusObjects( + filteredStatuses.map((statusId) => ({ id: statusId })), + ); + + // Set filters using the updated state + setFilters((prev) => ({ + ...prev, + statuses: filteredStatuses.map((statusId) => ({ id: statusId })), + })); } }; @@ -153,13 +172,29 @@ function PathologyDashboard() { }; const setStatusFilter = (event) => { - if (event.target.value === "All") { + const { value } = event.target; + + if (value === "All") { setFilters({ ...filters, statuses: statuses }); + } else if (value === "IN_PROGRESS") { + setFilters({ ...filters, statuses: inProgressStatusObjects }); } else { - setFilters({ ...filters, statuses: [{ id: event.target.value }] }); + setFilters({ ...filters, statuses: [{ id: value }] }); } }; + const getSelectedValue = () => { + const selectedValue = + filters.statuses.length === inProgressStatuses.length && + filters.statuses.every((status) => inProgressStatuses.includes(status.id)) + ? "IN_PROGRESS" + : filters.statuses.length > 1 + ? "All" + : filters.statuses[0].id; + + return selectedValue; + }; + const filtersToParameters = () => { return ( "statuses=" + @@ -250,23 +285,6 @@ function PathologyDashboard() { }, ]; - useEffect(() => { - componentMounted.current = true; - setFilters({ - ...filters, - statuses: [ - { - id: "GROSSING", - value: "Grossing", - }, - ], - }); - - return () => { - componentMounted.current = false; - }; - }, [statuses]); - useEffect(() => { componentMounted.current = true; refreshItems(); @@ -334,24 +352,20 @@ function PathologyDashboard() { id="statusFilter" name="statusFilter" labelText={intl.formatMessage({ id: "label.filters.status" })} - defaultValue="placeholder" - value={ - filters.statuses.length > 1 ? "All" : filters.statuses[0].id - } + value={getSelectedValue()} onChange={setStatusFilter} noLabel > - {statuses.map((status, index) => { - return ( - - ); - })} + + {statuses.map((status, index) => ( + + ))}