From 8801b5379487ea1e1661635d3b4fc874f2e47444 Mon Sep 17 00:00:00 2001 From: Daphne210 Date: Thu, 15 Feb 2024 00:28:41 +0300 Subject: [PATCH 1/4] Fixing the pagination for routine tab data tables --- ...ry-active-test-order-results.component.tsx | 157 +++++++++--------- .../laboratory-order-referals.component.tsx | 2 +- ...tory-past-test-order-results.component.tsx | 154 ++++++++--------- 3 files changed, 157 insertions(+), 156 deletions(-) diff --git a/src/patient-chart/laboratory-active-test-order/laboratory-active-test-order-results.component.tsx b/src/patient-chart/laboratory-active-test-order/laboratory-active-test-order-results.component.tsx index d4123758..a36369e9 100644 --- a/src/patient-chart/laboratory-active-test-order/laboratory-active-test-order-results.component.tsx +++ b/src/patient-chart/laboratory-active-test-order/laboratory-active-test-order-results.component.tsx @@ -13,6 +13,7 @@ import { ErrorState, showModal, useConfig, + usePagination, } from "@openmrs/esm-framework"; import { mutate } from "swr"; import { @@ -85,22 +86,14 @@ const LaboratoryActiveTestOrderResults: React.FC< "Active Laboratory Tests" ); - const { - items, - tableHeaders, - currentPage, - pageSizes, - totalItems, - goTo, - currentPageSize, - setPageSize, - isLoading, - isError, - } = useLaboratoryOrderResultsPages({ - v: ResourceRepresentation.Full, - totalCount: true, - patientUuid: patientUuid, - }); + const { items, tableHeaders, isLoading, isError } = + useLaboratoryOrderResultsPages({ + v: ResourceRepresentation.Full, + totalCount: true, + patientUuid: patientUuid, + }); + const pageSizes = [2, 5, 10]; + const [currentPageSize, setPageSize] = useState(10); const sortedLabRequests = useMemo(() => { return [...items].sort((a, b) => { @@ -226,69 +219,77 @@ const LaboratoryActiveTestOrderResults: React.FC< const currentDateTime = new Date().getTime(); const twentyFourHoursAgo = currentDateTime - 24 * 60 * 60 * 1000; - const tableRows = useMemo(() => { - return laboratoryOrders - ?.filter((entry) => { - const entryDate = new Date(entry.encounterDatetime).getTime(); - return entryDate >= twentyFourHoursAgo && entryDate <= currentDateTime; - }) - ?.map((entry, index) => ({ - ...entry, - id: entry.uuid, - orderDate: { - content: ( - - {formatDate(parseDate(entry.encounterDatetime), { - time: true, - mode: "standard", - })} - - ), - }, - orders: { - content: ( - <> - {entry?.orders - ?.filter( - (order) => - order?.type === "testorder" && order?.action === "NEW" - ) - .map((order) => ( - - {order?.concept?.display} - - ))} - - ), - }, - - location: { - content: {entry.location.display}, - }, - status: { - content: --, - }, - actions: { - content: ( -
- - {enableSendingLabTestsByEmail && } -
- ), - }, - })); + const filteredActiveTestOrderResults = useMemo(() => { + return laboratoryOrders?.filter((entry) => { + const entryDate = new Date(entry.encounterDatetime).getTime(); + return entryDate >= twentyFourHoursAgo && entryDate <= currentDateTime; + }); }, [currentDateTime, laboratoryOrders, twentyFourHoursAgo]); + const { + goTo, + results: paginatedActiveTestOrderResults, + currentPage, + } = usePagination(filteredActiveTestOrderResults, currentPageSize); + + const tableRows = useMemo(() => { + return paginatedActiveTestOrderResults?.map((entry, index) => ({ + ...entry, + id: entry.uuid, + orderDate: { + content: ( + + {formatDate(parseDate(entry.encounterDatetime), { + time: true, + mode: "standard", + })} + + ), + }, + orders: { + content: ( + <> + {entry?.orders + ?.filter( + (order) => + order?.type === "testorder" && order?.action === "NEW" + ) + .map((order) => ( + + {order?.concept?.display} + + ))} + + ), + }, + + location: { + content: {entry.location.display}, + }, + status: { + content: --, + }, + actions: { + content: ( +
+ + {enableSendingLabTestsByEmail && } +
+ ), + }, + })); + }, [enableSendingLabTestsByEmail, paginatedActiveTestOrderResults]); + if (isLoading) { return ; } @@ -451,7 +452,7 @@ const LaboratoryActiveTestOrderResults: React.FC< page={currentPage} pageSize={currentPageSize} pageSizes={pageSizes} - totalItems={totalItems} + totalItems={filteredActiveTestOrderResults?.length} onChange={({ pageSize, page }) => { if (pageSize !== currentPageSize) { setPageSize(pageSize); diff --git a/src/patient-chart/laboratory-order-referals/laboratory-order-referals.component.tsx b/src/patient-chart/laboratory-order-referals/laboratory-order-referals.component.tsx index 4875023f..a4fd258e 100644 --- a/src/patient-chart/laboratory-order-referals/laboratory-order-referals.component.tsx +++ b/src/patient-chart/laboratory-order-referals/laboratory-order-referals.component.tsx @@ -318,7 +318,7 @@ const LaboratoryOrderReferalResults: React.FC< ), }, })); - }, [laboratoryOrders]); + }, [enableSendingLabTestsByEmail, laboratoryOrders]); if (isLoading) { return ; diff --git a/src/patient-chart/laboratory-past-test/laboratory-past-test-order-results.component.tsx b/src/patient-chart/laboratory-past-test/laboratory-past-test-order-results.component.tsx index 834bdc0c..3daa22bd 100644 --- a/src/patient-chart/laboratory-past-test/laboratory-past-test-order-results.component.tsx +++ b/src/patient-chart/laboratory-past-test/laboratory-past-test-order-results.component.tsx @@ -13,6 +13,7 @@ import { ErrorState, showModal, useConfig, + usePagination, } from "@openmrs/esm-framework"; import { @@ -81,22 +82,14 @@ const LaboratoryPastTestOrderResults: React.FC< "pastLaboratoryTestsDisplayTextTitle", "Past Laboratory Tests" ); - const { - items, - tableHeaders, - currentPage, - pageSizes, - totalItems, - goTo, - currentPageSize, - setPageSize, - isLoading, - isError, - } = useLaboratoryOrderResultsPages({ - v: ResourceRepresentation.Full, - totalCount: true, - patientUuid: patientUuid, - }); + const { items, tableHeaders, isLoading, isError } = + useLaboratoryOrderResultsPages({ + v: ResourceRepresentation.Full, + totalCount: true, + patientUuid: patientUuid, + }); + const pageSizes = [2, 5, 10]; + const [currentPageSize, setPageSize] = useState(10); const sortedLabRequests = useMemo(() => { return [...items].sort((a, b) => { @@ -210,67 +203,74 @@ const LaboratoryPastTestOrderResults: React.FC< const currentDateTime = new Date().getTime(); const twentyFourHoursAgo = currentDateTime - 24 * 60 * 60 * 1000; + const filteredPastTestOrderResults = useMemo(() => { + return laboratoryOrders?.filter((entry) => { + const entryDate = new Date(entry.encounterDatetime).getTime(); + return entryDate < twentyFourHoursAgo; + }); + }, [laboratoryOrders, twentyFourHoursAgo]); + const { + goTo, + results: paginatedPastTestOrderResults, + currentPage, + } = usePagination(filteredPastTestOrderResults, currentPageSize); + const tableRows = useMemo(() => { - return laboratoryOrders - ?.filter((entry) => { - const entryDate = new Date(entry.encounterDatetime).getTime(); - return entryDate < twentyFourHoursAgo; - }) - ?.map((entry, index) => ({ - ...entry, - id: entry.uuid, - orderDate: { - content: ( - - {formatDate(parseDate(entry.encounterDatetime), { - time: true, - mode: "standard", - })} - - ), - }, - orders: { - content: ( - <> - {entry?.orders - ?.filter( - (order) => - order?.type === "testorder" && order?.action === "NEW" - ) - .map((order) => ( - - {order?.concept?.display} - - ))} - - ), - }, - location: { - content: {entry.location.display}, - }, - status: { - content: --, - }, - actions: { - content: ( -
- - {enableSendingLabTestsByEmail && } -
- ), - }, - })); - }, [enableSendingLabTestsByEmail, laboratoryOrders, twentyFourHoursAgo]); + return paginatedPastTestOrderResults?.map((entry, index) => ({ + ...entry, + id: entry.uuid, + orderDate: { + content: ( + + {formatDate(parseDate(entry.encounterDatetime), { + time: true, + mode: "standard", + })} + + ), + }, + orders: { + content: ( + <> + {entry?.orders + ?.filter( + (order) => + order?.type === "testorder" && order?.action === "NEW" + ) + .map((order) => ( + + {order?.concept?.display} + + ))} + + ), + }, + location: { + content: {entry.location.display}, + }, + status: { + content: --, + }, + actions: { + content: ( +
+ + {enableSendingLabTestsByEmail && } +
+ ), + }, + })); + }, [enableSendingLabTestsByEmail, paginatedPastTestOrderResults]); if (isLoading) { return ; @@ -423,7 +423,7 @@ const LaboratoryPastTestOrderResults: React.FC< page={currentPage} pageSize={currentPageSize} pageSizes={pageSizes} - totalItems={totalItems} + totalItems={filteredPastTestOrderResults?.length} onChange={({ pageSize, page }) => { if (pageSize !== currentPageSize) { setPageSize(pageSize); From b8bb9953c9c78acffccda8d5c1be2a1932498067 Mon Sep 17 00:00:00 2001 From: Daphne210 Date: Thu, 15 Feb 2024 09:20:24 +0300 Subject: [PATCH 2/4] Hide active table if patient has no active test order results --- package.json | 2 +- .../laboratory-active-test-order-results.component.tsx | 8 ++++++-- .../laboratory-past-test-order-results.component.tsx | 4 ++-- .../patient-laboratory-results.component.tsx | 6 +++++- 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 6132a292..6f7e50dd 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "main": "src/index.ts", "source": true, "scripts": { - "start": "openmrs develop", + "start": "openmrs develop --backend http://194.163.171.253:8282", "serve": "webpack serve --mode=development", "build": "webpack --mode production", "analyze": "webpack --mode=production --env analyze=true", diff --git a/src/patient-chart/laboratory-active-test-order/laboratory-active-test-order-results.component.tsx b/src/patient-chart/laboratory-active-test-order/laboratory-active-test-order-results.component.tsx index a36369e9..7048f442 100644 --- a/src/patient-chart/laboratory-active-test-order/laboratory-active-test-order-results.component.tsx +++ b/src/patient-chart/laboratory-active-test-order/laboratory-active-test-order-results.component.tsx @@ -92,7 +92,7 @@ const LaboratoryActiveTestOrderResults: React.FC< totalCount: true, patientUuid: patientUuid, }); - const pageSizes = [2, 5, 10]; + const pageSizes = [10, 20, 30, 40, 50]; const [currentPageSize, setPageSize] = useState(10); const sortedLabRequests = useMemo(() => { @@ -297,8 +297,12 @@ const LaboratoryActiveTestOrderResults: React.FC< if (isError) { return ; } + // If no active test order results hide table + if (filteredActiveTestOrderResults.length === 0) { + return null; + } - if (items?.length >= 0) { + if (filteredActiveTestOrderResults?.length >= 0) { return (
diff --git a/src/patient-chart/laboratory-past-test/laboratory-past-test-order-results.component.tsx b/src/patient-chart/laboratory-past-test/laboratory-past-test-order-results.component.tsx index 3daa22bd..291f2653 100644 --- a/src/patient-chart/laboratory-past-test/laboratory-past-test-order-results.component.tsx +++ b/src/patient-chart/laboratory-past-test/laboratory-past-test-order-results.component.tsx @@ -88,7 +88,7 @@ const LaboratoryPastTestOrderResults: React.FC< totalCount: true, patientUuid: patientUuid, }); - const pageSizes = [2, 5, 10]; + const pageSizes = [10, 20, 30, 40, 50]; const [currentPageSize, setPageSize] = useState(10); const sortedLabRequests = useMemo(() => { @@ -280,7 +280,7 @@ const LaboratoryPastTestOrderResults: React.FC< return ; } - if (items?.length >= 0) { + if (filteredPastTestOrderResults?.length >= 0) { return (
diff --git a/src/patient-chart/patient-laboratory-results.component.tsx b/src/patient-chart/patient-laboratory-results.component.tsx index 3587ecf9..e22b8b79 100644 --- a/src/patient-chart/patient-laboratory-results.component.tsx +++ b/src/patient-chart/patient-laboratory-results.component.tsx @@ -1,5 +1,5 @@ import { EmptyState } from "@openmrs/esm-patient-common-lib"; -import React from "react"; +import React, { useState } from "react"; import { useTranslation } from "react-i18next"; import LaboratoryActiveTestOrderResults from "./laboratory-active-test-order/laboratory-active-test-order-results.component"; import LaboratoryPastTestOrderResults from "./laboratory-past-test/laboratory-past-test-order-results.component"; @@ -13,6 +13,10 @@ const PatientLaboratoryResults: React.FC = ({ }) => { const { t } = useTranslation(); + const [hasActiveOrderResults, setHasActiveOrderResults] = useState< + boolean | null + >(null); + return ( <>
From 8a63534cdc8e8573a1094739db41ea93fdd08877 Mon Sep 17 00:00:00 2001 From: Daphne210 Date: Thu, 15 Feb 2024 11:21:05 +0300 Subject: [PATCH 3/4] Removing the backend url --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6f7e50dd..6132a292 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "main": "src/index.ts", "source": true, "scripts": { - "start": "openmrs develop --backend http://194.163.171.253:8282", + "start": "openmrs develop", "serve": "webpack serve --mode=development", "build": "webpack --mode production", "analyze": "webpack --mode=production --env analyze=true", From b8eeec3efac1f87ab84af44ba1971aa17f8ce7f9 Mon Sep 17 00:00:00 2001 From: Daphne210 Date: Fri, 16 Feb 2024 21:59:33 +0300 Subject: [PATCH 4/4] Brining back the active test order results table --- .../laboratory-active-test-order-results.component.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/patient-chart/laboratory-active-test-order/laboratory-active-test-order-results.component.tsx b/src/patient-chart/laboratory-active-test-order/laboratory-active-test-order-results.component.tsx index 7048f442..984a35a1 100644 --- a/src/patient-chart/laboratory-active-test-order/laboratory-active-test-order-results.component.tsx +++ b/src/patient-chart/laboratory-active-test-order/laboratory-active-test-order-results.component.tsx @@ -297,10 +297,6 @@ const LaboratoryActiveTestOrderResults: React.FC< if (isError) { return ; } - // If no active test order results hide table - if (filteredActiveTestOrderResults.length === 0) { - return null; - } if (filteredActiveTestOrderResults?.length >= 0) { return (