Skip to content

Commit

Permalink
Merge pull request #1283 from mozzy11/develop
Browse files Browse the repository at this point in the history 
add support for displayList pagination
  • Loading branch information
@mozzy11
mozzy11 authored Oct 23, 2024
2 parents 8edca8e + 4001516 commit 0104943
Show file tree
Hide file tree
Showing 18 changed files with 585 additions and 162 deletions.
63 changes: 33 additions & 30 deletions frontend/src/components/home/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
Tag,
} from "@carbon/react";
import "./Dashboard.css";
import { Minimize, Maximize } from "@carbon/react/icons";
import { Minimize, Maximize, ArrowLeft, ArrowRight } from "@carbon/react/icons";
import { Copy } from "@carbon/icons-react";
import { useState, useEffect, useRef, useContext } from "react";
import {
Expand Down Expand Up @@ -555,35 +555,38 @@ const HomeDashBoard: React.FC<DashBoardProps> = () => {
<Column lg={16} md={8} sm={4}>
{pagination && (
<Grid>
<Column lg={8} />
<Column lg={3}>
<Button
id="loadpreviousresults"
onClick={loadPreviousResultsPage}
disabled={previousPage != null ? false : true}
style={{ width: "120%" }}
>
<FormattedMessage id="button.label.loadprevious" />
</Button>
</Column>
<Column lg={3}>
<Button
id="loadnextresults"
onClick={loadNextResultsPage}
disabled={nextPage != null ? false : true}
style={{ width: "120%" }}
>
<FormattedMessage id="button.label.loadnext" />
</Button>
</Column>
<Column lg={2}>
<Button
id="pagelabel"
kind="secondary"
style={{ width: "100%" }}
>
{currentApiPage} of {totalApiPages}
</Button>
<Column lg={14} />
<Column
lg={2}
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "10px",
width: "110%",
}}
>
<Link>
{currentApiPage} / {totalApiPages}
</Link>
<div style={{ display: "flex", gap: "10px" }}>
<Button
hasIconOnly
id="loadpreviousresults"
onClick={loadPreviousResultsPage}
disabled={previousPage != null ? false : true}
renderIcon={ArrowLeft}
iconDescription="previous"
></Button>
<Button
hasIconOnly
id="loadnextresults"
onClick={loadNextResultsPage}
disabled={nextPage != null ? false : true}
renderIcon={ArrowRight}
iconDescription="next"
></Button>
</div>
</Column>
</Grid>
)}
Expand Down
96 changes: 93 additions & 3 deletions frontend/src/components/immunohistochemistry/ImmunohistochemistryCaseView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,9 @@ import {
Toggle,
TextArea,
FilterableMultiSelect,
Link,
} from "@carbon/react";
import { Launch, Subtract } from "@carbon/react/icons";
import { Launch, Subtract, ArrowLeft, ArrowRight } from "@carbon/react/icons";
import {
getFromOpenElisServer,
postToOpenElisServerFullResponse,
Expand Down Expand Up @@ -72,6 +73,11 @@ function ImmunohistochemistryCaseView() {
const [intensityList, setIntensityList] = useState([]);
const [cerbB2PatternList, setCerbB2PatternList] = useState([]);
const [molecularSubTypeList, setMolecularSubTypeList] = useState([]);
const [nextPage, setNextPage] = useState(null);
const [previousPage, setPreviousPage] = useState(null);
const [pagination, setPagination] = useState(false);
const [currentApiPage, setCurrentApiPage] = useState(null);
const [totalApiPages, setTotalApiPages] = useState(null);
const [reportParams, setReportParams] = useState({
0: {
erPercent: "",
Expand Down Expand Up @@ -183,16 +189,71 @@ function ImmunohistochemistryCaseView() {
useEffect(() => {
componentMounted.current = true;

setNextPage(null);
setPreviousPage(null);
setPagination(false);
getFromOpenElisServer(
"/rest/displayList/PATHOLOGIST_CONCLUSIONS",
setConclusions,
"/rest/paginatedDisplayList/PATHOLOGIST_CONCLUSIONS",
loadConclusionData,
);

return () => {
componentMounted.current = false;
};
}, []);

const loadNextCOnclusionsPage = () => {
setLoading(true);
getFromOpenElisServer(
"/rest/paginatedDisplayList/PATHOLOGIST_CONCLUSIONS" +
"?page=" +
nextPage,
loadConclusionData,
);
};

const loadPreviousConclusionsPage = () => {
setLoading(true);
getFromOpenElisServer(
"/rest/paginatedDisplayList/PATHOLOGIST_CONCLUSIONS" +
"?page=" +
previousPage,
loadConclusionData,
);
};

const loadConclusionData = (res) => {
// If the response object is not null and has displayItems array with length greater than 0 then set it as data.
if (res && res.displayItems && res.displayItems.length > 0) {
setConclusions(res.displayItems);
} else {
setConclusions([]);
}

// Sets next and previous page numbers based on the total pages and current page number.
if (res && res.paging) {
const { totalPages, currentPage } = res.paging;
if (totalPages > 1) {
setPagination(true);
setCurrentApiPage(currentPage);
setTotalApiPages(totalPages);
if (parseInt(currentPage) < parseInt(totalPages)) {
setNextPage(parseInt(currentPage) + 1);
} else {
setNextPage(null);
}

if (parseInt(currentPage) > 1) {
setPreviousPage(parseInt(currentPage) - 1);
} else {
setPreviousPage(null);
}
}
}

setLoading(false);
};

const createReportParams = (reportType, index) => {
switch (reportType) {
case "BREAST_CANCER_HORMONE_RECEPTOR":
Expand Down Expand Up @@ -671,6 +732,35 @@ function ImmunohistochemistryCaseView() {
<Grid fullWidth={true} className="gridBoundary">
<Column lg={16} md={8} sm={4}>
<Grid fullWidth={true} className="gridBoundary">
{pagination && (
<Column lg={16} md={8} sm={4}>
<Link>
{currentApiPage} / {totalApiPages}
</Link>
<div style={{ display: "flex", gap: "10px" }}>
<Button
hasIconOnly
iconDescription="previous"
disabled={previousPage != null ? false : true}
onClick={loadPreviousConclusionsPage}
renderIcon={ArrowLeft}
size="sm"
/>
<Button
hasIconOnly
iconDescription="next"
disabled={nextPage != null ? false : true}
renderIcon={ArrowRight}
onClick={loadNextCOnclusionsPage}
size="sm"
/>
</div>
</Column>
)}
<Column lg={16}>
<br />
<br />
</Column>
<Column lg={3} md={8} sm={4}>
<FormattedMessage id="pathology.label.conclusion" />
</Column>
Expand Down
96 changes: 93 additions & 3 deletions frontend/src/components/pathology/PathologyCaseView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,9 @@ import {
TextArea,
Loading,
InlineLoading,
Link,
} from "@carbon/react";
import { Launch, Subtract } from "@carbon/react/icons";
import { Launch, Subtract, ArrowLeft, ArrowRight } from "@carbon/react/icons";
import {
getFromOpenElisServer,
postToOpenElisServerFullResponse,
Expand Down Expand Up @@ -64,6 +65,11 @@ function PathologyCaseView() {
const [blocksToAdd, setBlocksToAdd] = useState(1);
const [slidesToAdd, setSlidesToAdd] = useState(1);
const [loadingReport, setLoadingReport] = useState(false);
const [nextPage, setNextPage] = useState(null);
const [previousPage, setPreviousPage] = useState(null);
const [pagination, setPagination] = useState(false);
const [currentApiPage, setCurrentApiPage] = useState(null);
const [totalApiPages, setTotalApiPages] = useState(null);
const [reportParams, setReportParams] = useState({
0: {
submited: false,
Expand Down Expand Up @@ -224,6 +230,9 @@ function PathologyCaseView() {

useEffect(() => {
componentMounted.current = true;
setNextPage(null);
setPreviousPage(null);
setPagination(false);
getFromOpenElisServer("/rest/displayList/PATHOLOGY_STATUS", setStatuses);
getFromOpenElisServer(
"/rest/displayList/PATHOLOGY_TECHNIQUES",
Expand All @@ -243,8 +252,8 @@ function PathologyCaseView() {
setImmunoHistoChemistryTests,
);
getFromOpenElisServer(
"/rest/displayList/PATHOLOGIST_CONCLUSIONS",
setConclusions,
"/rest/paginatedDisplayList/PATHOLOGIST_CONCLUSIONS",
loadConclusionData,
);
getFromOpenElisServer("/rest/users", setTechnicianUsers);
getFromOpenElisServer("/rest/users/Pathologist", setPathologistUsers);
Expand All @@ -258,6 +267,58 @@ function PathologyCaseView() {
};
}, []);

const loadNextCOnclusionsPage = () => {
setLoading(true);
getFromOpenElisServer(
"/rest/paginatedDisplayList/PATHOLOGIST_CONCLUSIONS" +
"?page=" +
nextPage,
loadConclusionData,
);
};

const loadPreviousConclusionsPage = () => {
setLoading(true);
getFromOpenElisServer(
"/rest/paginatedDisplayList/PATHOLOGIST_CONCLUSIONS" +
"?page=" +
previousPage,
loadConclusionData,
);
};

const loadConclusionData = (res) => {
// If the response object is not null and has displayItems array with length greater than 0 then set it as data.
if (res && res.displayItems && res.displayItems.length > 0) {
setConclusions(res.displayItems);
} else {
setConclusions([]);
}

// Sets next and previous page numbers based on the total pages and current page number.
if (res && res.paging) {
const { totalPages, currentPage } = res.paging;
if (totalPages > 1) {
setPagination(true);
setCurrentApiPage(currentPage);
setTotalApiPages(totalPages);
if (parseInt(currentPage) < parseInt(totalPages)) {
setNextPage(parseInt(currentPage) + 1);
} else {
setNextPage(null);
}

if (parseInt(currentPage) > 1) {
setPreviousPage(parseInt(currentPage) - 1);
} else {
setPreviousPage(null);
}
}
}

setLoading(false);
};

return (
<>
<PageBreadCrumb breadcrumbs={breadcrumbs} />
Expand Down Expand Up @@ -1040,6 +1101,35 @@ function PathologyCaseView() {
</Column>
<Column lg={16} md={8} sm={4}>
<Grid fullWidth={true} className="gridBoundary">
{pagination && (
<Column lg={16} md={8} sm={4}>
<Link>
{currentApiPage} / {totalApiPages}
</Link>
<div style={{ display: "flex", gap: "10px" }}>
<Button
hasIconOnly
iconDescription="previous"
disabled={previousPage != null ? false : true}
onClick={loadPreviousConclusionsPage}
renderIcon={ArrowLeft}
size="sm"
/>
<Button
hasIconOnly
iconDescription="next"
disabled={nextPage != null ? false : true}
renderIcon={ArrowRight}
onClick={loadNextCOnclusionsPage}
size="sm"
/>
</div>
</Column>
)}
<Column lg={16}>
<br />
<br />
</Column>
<Column lg={4} md={8} sm={4}>
{initialMount && (
<FilterableMultiSelect
Expand Down
Loading

0 comments on commit 0104943

Please sign in to comment.