Skip to content

Commit

Permalink
Fixing pagination for Active Tests and Past Order Results Data Tables…
Browse files Browse the repository at this point in the history 
… under routine tests tab on patient chart (#50)

* Fixing the pagination for routine tab data tables

* Hide active table if patient has no active test order results

* Removing the backend url

* Brining back the active test order results table
  • Loading branch information
@Daphne210
Daphne210 authored Feb 17, 2024
1 parent ad2294c commit 57067b3
Show file tree
Hide file tree
Showing 4 changed files with 164 additions and 159 deletions.
159 changes: 80 additions & 79 deletions ...ent-chart/laboratory-active-test-order/laboratory-active-test-order-results.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
ErrorState,
showModal,
useConfig,
usePagination,
} from "@openmrs/esm-framework";
import { mutate } from "swr";
import {
Expand Down Expand Up @@ -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 = [10, 20, 30, 40, 50];
const [currentPageSize, setPageSize] = useState(10);

const sortedLabRequests = useMemo(() => {
return [...items].sort((a, b) => {
Expand Down Expand Up @@ -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: (
<span>
{formatDate(parseDate(entry.encounterDatetime), {
time: true,
mode: "standard",
})}
</span>
),
},
orders: {
content: (
<>
{entry?.orders
?.filter(
(order) =>
order?.type === "testorder" && order?.action === "NEW"
)
.map((order) => (
<Tag
style={{
background: `${getOrderColor(
order.dateActivated,
order.dateStopped
)}`,
color: "white",
}}
role="tooltip"
key={order.uuid} // Add a unique key for each Tag
>
{order?.concept?.display}
</Tag>
))}
</>
),
},

location: {
content: <span>{entry.location.display}</span>,
},
status: {
content: <span>--</span>,
},
actions: {
content: (
<div style={{ display: "flex" }}>
<PrintButtonAction encounter={entry} />
{enableSendingLabTestsByEmail && <EmailButtonAction />}
</div>
),
},
}));
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: (
<span>
{formatDate(parseDate(entry.encounterDatetime), {
time: true,
mode: "standard",
})}
</span>
),
},
orders: {
content: (
<>
{entry?.orders
?.filter(
(order) =>
order?.type === "testorder" && order?.action === "NEW"
)
.map((order) => (
<Tag
style={{
background: `${getOrderColor(
order.dateActivated,
order.dateStopped
)}`,
color: "white",
}}
role="tooltip"
key={order.uuid} // Add a unique key for each Tag
>
{order?.concept?.display}
</Tag>
))}
</>
),
},

location: {
content: <span>{entry.location.display}</span>,
},
status: {
content: <span>--</span>,
},
actions: {
content: (
<div style={{ display: "flex" }}>
<PrintButtonAction encounter={entry} />
{enableSendingLabTestsByEmail && <EmailButtonAction />}
</div>
),
},
}));
}, [enableSendingLabTestsByEmail, paginatedActiveTestOrderResults]);

if (isLoading) {
return <DataTableSkeleton role="progressbar" />;
}
Expand All @@ -297,7 +298,7 @@ const LaboratoryActiveTestOrderResults: React.FC<
return <ErrorState error={isError} headerTitle={"Error"} />;
}

if (items?.length >= 0) {
if (filteredActiveTestOrderResults?.length >= 0) {
return (
<div className={styles.widgetCard}>
<CardHeader title={displayText}>
Expand Down Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/patient-chart/laboratory-order-referals/laboratory-order-referals.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -318,7 +318,7 @@ const LaboratoryOrderReferalResults: React.FC<
),
},
}));
}, [laboratoryOrders]);
}, [enableSendingLabTestsByEmail, laboratoryOrders]);

if (isLoading) {
return <DataTableSkeleton role="progressbar" />;
Expand Down
156 changes: 78 additions & 78 deletions src/patient-chart/laboratory-past-test/laboratory-past-test-order-results.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
ErrorState,
showModal,
useConfig,
usePagination,
} from "@openmrs/esm-framework";

import {
Expand Down Expand Up @@ -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 = [10, 20, 30, 40, 50];
const [currentPageSize, setPageSize] = useState(10);

const sortedLabRequests = useMemo(() => {
return [...items].sort((a, b) => {
Expand Down Expand Up @@ -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: (
<span>
{formatDate(parseDate(entry.encounterDatetime), {
time: true,
mode: "standard",
})}
</span>
),
},
orders: {
content: (
<>
{entry?.orders
?.filter(
(order) =>
order?.type === "testorder" && order?.action === "NEW"
)
.map((order) => (
<Tag
style={{
background: `${getOrderColor(
order.dateActivated,
order.dateStopped
)}`,
color: "white",
}}
role="tooltip"
key={order.uuid} // Add a unique key for each Tag
>
{order?.concept?.display}
</Tag>
))}
</>
),
},
location: {
content: <span>{entry.location.display}</span>,
},
status: {
content: <span>--</span>,
},
actions: {
content: (
<div style={{ display: "flex" }}>
<PrintButtonAction encounter={entry} />
{enableSendingLabTestsByEmail && <EmailButtonAction />}
</div>
),
},
}));
}, [enableSendingLabTestsByEmail, laboratoryOrders, twentyFourHoursAgo]);
return paginatedPastTestOrderResults?.map((entry, index) => ({
...entry,
id: entry.uuid,
orderDate: {
content: (
<span>
{formatDate(parseDate(entry.encounterDatetime), {
time: true,
mode: "standard",
})}
</span>
),
},
orders: {
content: (
<>
{entry?.orders
?.filter(
(order) =>
order?.type === "testorder" && order?.action === "NEW"
)
.map((order) => (
<Tag
style={{
background: `${getOrderColor(
order.dateActivated,
order.dateStopped
)}`,
color: "white",
}}
role="tooltip"
key={order.uuid} // Add a unique key for each Tag
>
{order?.concept?.display}
</Tag>
))}
</>
),
},
location: {
content: <span>{entry.location.display}</span>,
},
status: {
content: <span>--</span>,
},
actions: {
content: (
<div style={{ display: "flex" }}>
<PrintButtonAction encounter={entry} />
{enableSendingLabTestsByEmail && <EmailButtonAction />}
</div>
),
},
}));
}, [enableSendingLabTestsByEmail, paginatedPastTestOrderResults]);

if (isLoading) {
return <DataTableSkeleton role="progressbar" />;
Expand All @@ -280,7 +280,7 @@ const LaboratoryPastTestOrderResults: React.FC<
return <ErrorState error={isError} headerTitle={"Error"} />;
}

if (items?.length >= 0) {
if (filteredPastTestOrderResults?.length >= 0) {
return (
<div className={styles.widgetCard}>
<CardHeader title={displayText}>
Expand Down Expand Up @@ -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);
Expand Down
Loading

0 comments on commit 57067b3

Please sign in to comment.