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) => (
+
+ ))}