Merge pull request #610 from mozzy11/2.8

Fix pagination on the ui data tables
I-TECH-UW · Nov 23, 2023 · c0656ac · c0656ac
2 parents 138d452 + a82cd3a
commit c0656ac
Show file tree

Hide file tree

Showing 7 changed files with 227 additions and 103 deletions.
diff --git a/frontend/src/components/cytology/CytologyDashBoard.js b/frontend/src/components/cytology/CytologyDashBoard.js
@@ -18,6 +18,7 @@ import {
   TableCell,
   Tile,
   Loading,
+  Pagination,
 } from "@carbon/react";
 import UserSessionDetailsContext from "../../UserSessionDetailsContext";
 import { Search } from "@carbon/react";
@@ -49,6 +50,8 @@ function CytologyDashboard() {
     complete: 0,
   });
   const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
 
   const setStatusList = (statusList) => {
     if (componentMounted.current) {
@@ -72,6 +75,15 @@ function CytologyDashboard() {
       refreshItems,
     );
   };
+  const handlePageChange = (pageInfo) => {
+    if (page != pageInfo.page) {
+      setPage(pageInfo.page);
+    }
+
+    if (pageSize != pageInfo.pageSize) {
+      setPageSize(pageInfo.pageSize);
+    }
+  };
 
   const renderCell = (cell, row) => {
     var status = row.cells.find((e) => e.info.header === "status").value;
@@ -298,7 +310,10 @@ function CytologyDashboard() {
 
           <Column lg={16} md={8} sm={4}>
             <DataTable
-              rows={pathologyEntries}
+              rows={pathologyEntries.slice(
+                (page - 1) * pageSize,
+                page * pageSize,
+              )}
               headers={[
                 {
                   key: "requestDate",
@@ -364,6 +379,13 @@ function CytologyDashboard() {
                 </TableContainer>
               )}
             </DataTable>
+            <Pagination
+              onChange={handlePageChange}
+              page={page}
+              pageSize={pageSize}
+              pageSizes={[10, 20, 30]}
+              totalItems={pathologyEntries.length}
+            ></Pagination>
           </Column>
         </Grid>
       </div>

diff --git a/frontend/src/components/immunohistochemistry/ImmunohistochemistryDashboard.js b/frontend/src/components/immunohistochemistry/ImmunohistochemistryDashboard.js
@@ -18,6 +18,7 @@ import {
   TableBody,
   TableCell,
   Section,
+  Pagination,
 } from "@carbon/react";
 import { Search } from "@carbon/react";
 import {
@@ -50,6 +51,8 @@ function ImmunohistochemistryDashboard() {
   });
   const { userSessionDetails } = useContext(UserSessionDetailsContext);
   const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
 
   function formatDateToDDMMYYYY(date) {
     var day = date.getDate();
@@ -79,7 +82,15 @@ function ImmunohistochemistryDashboard() {
       formatDateToDDMMYYYY(currentDate)
     );
   };
+  const handlePageChange = (pageInfo) => {
+    if (page != pageInfo.page) {
+      setPage(pageInfo.page);
+    }
 
+    if (pageSize != pageInfo.pageSize) {
+      setPageSize(pageInfo.pageSize);
+    }
+  };
   const tileList = [
     { title: "Cases in Progress", count: counts.inProgress },
     {
@@ -313,7 +324,10 @@ function ImmunohistochemistryDashboard() {
 
           <Column lg={16} md={8} sm={4}>
             <DataTable
-              rows={immunohistochemistryEntries}
+              rows={immunohistochemistryEntries.slice(
+                (page - 1) * pageSize,
+                page * pageSize,
+              )}
               headers={[
                 {
                   key: "requestDate",
@@ -379,6 +393,13 @@ function ImmunohistochemistryDashboard() {
                 </TableContainer>
               )}
             </DataTable>
+            <Pagination
+              onChange={handlePageChange}
+              page={page}
+              pageSize={pageSize}
+              pageSizes={[10, 20, 30]}
+              totalItems={immunohistochemistryEntries.length}
+            ></Pagination>
           </Column>
         </Grid>
       </div>

diff --git a/frontend/src/components/pathology/PathologyDashboard.js b/frontend/src/components/pathology/PathologyDashboard.js
@@ -18,6 +18,7 @@ import {
   TableCell,
   Tile,
   Loading,
+  Pagination,
 } from "@carbon/react";
 import UserSessionDetailsContext from "../../UserSessionDetailsContext";
 import { Search } from "@carbon/react";
@@ -38,6 +39,8 @@ function PathologyDashboard() {
   const { userSessionDetails } = useContext(UserSessionDetailsContext);
   const [statuses, setStatuses] = useState([]);
   const [pathologyEntries, setPathologyEntries] = useState([]);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
   const [filters, setFilters] = useState({
     searchTerm: "",
     myCases: false,
@@ -74,6 +77,16 @@ function PathologyDashboard() {
     );
   };
 
+  const handlePageChange = (pageInfo) => {
+    if (page != pageInfo.page) {
+      setPage(pageInfo.page);
+    }
+
+    if (pageSize != pageInfo.pageSize) {
+      setPageSize(pageInfo.pageSize);
+    }
+  };
+
   const renderCell = (cell, row) => {
     var status = row.cells.find((e) => e.info.header === "status").value;
     var pathologySampleId = row.id;
@@ -303,7 +316,10 @@ function PathologyDashboard() {
 
           <Column lg={16} md={8} sm={4}>
             <DataTable
-              rows={pathologyEntries}
+              rows={pathologyEntries.slice(
+                (page - 1) * pageSize,
+                page * pageSize,
+              )}
               headers={[
                 {
                   key: "requestDate",
@@ -369,6 +385,13 @@ function PathologyDashboard() {
                 </TableContainer>
               )}
             </DataTable>
+            <Pagination
+              onChange={handlePageChange}
+              page={page}
+              pageSize={pageSize}
+              pageSizes={[10, 20, 30]}
+              totalItems={pathologyEntries.length}
+            ></Pagination>
           </Column>
         </Grid>
       </div>

diff --git a/frontend/src/components/patient/SearchPatientForm.js b/frontend/src/components/patient/SearchPatientForm.js
@@ -1,5 +1,5 @@
 import React, { useContext, useState } from "react";
-import { FormattedMessage, injectIntl ,useIntl} from "react-intl";
+import { FormattedMessage, injectIntl, useIntl } from "react-intl";
 import "../Style.css";
 import { getFromOpenElisServer } from "../utils/Utils";
 import {
@@ -132,7 +132,10 @@ function SearchPatientForm(props) {
                 {({ field }) => (
                   <TextInput
                     name={field.name}
-                    labelText={intl.formatMessage({id: "patient.id", defaultMessage:"Patient Id",})}
+                    labelText={intl.formatMessage({
+                      id: "patient.id",
+                      defaultMessage: "Patient Id",
+                    })}
                     id={field.name}
                     className="inputText"
                   />
@@ -142,7 +145,10 @@ function SearchPatientForm(props) {
                 {({ field, setFieldValue }) => (
                   <CustomLabNumberInput
                     name={field.name}
-                    labelText={intl.formatMessage({id: "patient.prev.lab.no", defaultMessage: "Previous Lab Number", })}
+                    labelText={intl.formatMessage({
+                      id: "patient.prev.lab.no",
+                      defaultMessage: "Previous Lab Number",
+                    })}
                     id={field.name}
                     className="inputText"
                     onChange={(e, rawValue) => {
@@ -157,7 +163,10 @@ function SearchPatientForm(props) {
                 {({ field }) => (
                   <TextInput
                     name={field.name}
-                    labelText={intl.formatMessage({id: "patient.last.name", defaultMessage: "Last Name", })}
+                    labelText={intl.formatMessage({
+                      id: "patient.last.name",
+                      defaultMessage: "Last Name",
+                    })}
                     id={field.name}
                     className="inputText"
                   />
@@ -167,7 +176,10 @@ function SearchPatientForm(props) {
                 {({ field }) => (
                   <TextInput
                     name={field.name}
-                    labelText={intl.formatMessage({id:"patient.first.name", defaultMessage: "First Name",})}
+                    labelText={intl.formatMessage({
+                      id: "patient.first.name",
+                      defaultMessage: "First Name",
+                    })}
                     id={field.name}
                     className="inputText"
                   />
@@ -188,7 +200,10 @@ function SearchPatientForm(props) {
                     <DatePickerInput
                       id="date-picker-default-id"
                       placeholder="dd/mm/yyyy"
-                      labelText={intl.formatMessage({id:"patient.dob", defaultMessage: "Date of Birth", })}
+                      labelText={intl.formatMessage({
+                        id: "patient.dob",
+                        defaultMessage: "Date of Birth",
+                      })}
                       type="text"
                       name={field.name}
                     />
@@ -200,18 +215,27 @@ function SearchPatientForm(props) {
                   <RadioButtonGroup
                     className="inputText"
                     defaultSelected=""
-                    legendText={intl.formatMessage({id:"patient.gender", defaultMessage: "Gender",})}
+                    legendText={intl.formatMessage({
+                      id: "patient.gender",
+                      defaultMessage: "Gender",
+                    })}
                     name={field.name}
                     id="search_patient_gender"
                   >
                     <RadioButton
                       id="search-radio-1"
-                      labelText={intl.formatMessage({ id: "patient.male", defaultMessage: "Male", })} 
+                      labelText={intl.formatMessage({
+                        id: "patient.male",
+                        defaultMessage: "Male",
+                      })}
                       value="M"
                     />
                     <RadioButton
                       id="search-radio-2"
-                      labelText={intl.formatMessage({ id: "patient.female", defaultMessage:"Female", })} 
+                      labelText={intl.formatMessage({
+                        id: "patient.female",
+                        defaultMessage: "Female",
+                      })}
                       value="F"
                     />
                   </RadioButtonGroup>
@@ -221,7 +245,10 @@ function SearchPatientForm(props) {
             <div className="formInlineDiv">
               <div className="searchActionButtons">
                 <Button kind="tertiary">
-                <FormattedMessage id="label.button.externalsearch" defaultMessage="External Search"/>
+                  <FormattedMessage
+                    id="label.button.externalsearch"
+                    defaultMessage="External Search"
+                  />
                 </Button>
                 <Button type="submit">
                   <FormattedMessage id="label.button.search" />

diff --git a/frontend/src/components/resultPage/SearchResultForm.js b/frontend/src/components/resultPage/SearchResultForm.js
@@ -444,7 +444,7 @@ export function SearchResults(props) {
   const { configurationProperties } = useContext(ConfigurationContext);
 
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(100);
+  const [pageSize, setPageSize] = useState(20);
   const [acceptAsIs, setAcceptAsIs] = useState([]);
   const [referalOrganizations, setReferalOrganizations] = useState([]);
   const [methods, setMethods] = useState([]);
@@ -921,6 +921,7 @@ export function SearchResults(props) {
     jp.value(form, shadowRejected, checked);
     var isModified = "testResult[" + rowId + "].isModified";
     jp.value(form, isModified, "true");
+
     var allrejectedItems = { ...rejectedItems };
     allrejectedItems[rowId] = checked;
     setRejectedItems(allrejectedItems);
@@ -1045,8 +1046,8 @@ export function SearchResults(props) {
                 <img
                   src={config.serverBaseUrl + "/images/nonconforming.gif"}
                   alt="nonconforming"
-                  width="25" // Set your desired width
-                  height="20" // Set your desired height
+                  width="25" 
+                  height="20" 
                 />
               </picture>
               <b>
@@ -1075,7 +1076,10 @@ export function SearchResults(props) {
               //onBlur={handleBlur}
             >
               <DataTable
-                data={props.results.testResult}
+                data={props.results.testResult.slice(
+                  (page - 1) * pageSize,
+                  page * pageSize,
+                )}
                 columns={columns}
                 isSortable
                 expandableRows
@@ -1085,7 +1089,7 @@ export function SearchResults(props) {
                 onChange={handlePageChange}
                 page={page}
                 pageSize={pageSize}
-                pageSizes={[100, 50, 10]}
+                pageSizes={[10, 20, 50, 100]}
                 totalItems={props.results.testResult?.length}
               ></Pagination>
 

diff --git a/frontend/src/components/validation/Validation.js b/frontend/src/components/validation/Validation.js
@@ -30,10 +30,7 @@ const Validation = (props) => {
     useContext(NotificationContext);
   const { configurationProperties } = useContext(ConfigurationContext);
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(100);
-  const [referalOrganizations, setReferalOrganizations] = useState([]);
-  const [methods, setMethods] = useState([]);
-  const [referralReasons, setReferralReasons] = useState([]);
+  const [pageSize, setPageSize] = useState(20);
 
   const componentMounted = useRef(false);
 
@@ -387,18 +384,25 @@ const Validation = (props) => {
         onSubmit
         onChange
       >
-        {({ values, errors, touched, handleChange, handleSubmit }) => (
+        {({ values, errors, touched, handleChange }) => (
           <Form onChange={handleChange}>
             <DataTable
-              data={props.results ? props.results.resultList : []}
+              data={
+                props.results
+                  ? props.results.resultList.slice(
+                      (page - 1) * pageSize,
+                      page * pageSize,
+                    )
+                  : []
+              }
               columns={columns}
               isSortable
             ></DataTable>
             <Pagination
               onChange={handlePageChange}
               page={page}
               pageSize={pageSize}
-              pageSizes={[100, 50, 10]}
+              pageSizes={[10, 20, 50, 100]}
               totalItems={
                 props.results
                   ? props.results.resultList