Skip to content

Commit

Permalink
fix build
Browse files Browse the repository at this point in the history
  • Loading branch information
@jabahum
jabahum committed Jul 9, 2024
1 parent b9cd903 commit be358b4
Show file tree
Hide file tree
Showing 4 changed files with 155 additions and 68 deletions.
2 changes: 1 addition & 1 deletion src/ordered-orders/laboratory-tabs.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
} from "@openmrs/esm-framework";
import { Tab, Tabs, TabList, TabPanels, TabPanel, Search } from "@carbon/react";
import { useTranslation } from "react-i18next";
import styles from "./laboratory-queue.scss";
import styles from "./tests-ordered.scss";
import TestsOrderedList from "./tests-ordered-list.component";
import { ComponentContext } from "@openmrs/esm-framework/src/internal";

Expand Down
210 changes: 144 additions & 66 deletions src/ordered-orders/tests-ordered-list.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,32 @@ import {
TableHead,
TableHeader,
TableRow,
Tag,
InlineLoading,
Tile,
Pagination,
} from "@carbon/react";

import { useTranslation } from "react-i18next";
import { usePagination, useSession } from "@openmrs/esm-framework";
import styles from "./laboratory-queue.scss";
import styles from "./tests-ordered.scss";
import { usePatientQueuesList } from "./tests-ordered-list.resource";
import {
formatWaitTime,
getTagColor,
trimVisitNumber,
} from "../utils/functions";

const TestsOrderedList: React.FC = () => {
const { t } = useTranslation();
const session = useSession();

const { patientQueueEntries, isLoading } = usePatientQueuesList(
const {
patientQueueEntries,
isLoading,
isError: error,
mutate,
} = usePatientQueuesList(
session?.sessionLocation?.uuid,
status,
session.user.systemId
Expand All @@ -33,74 +47,138 @@ const TestsOrderedList: React.FC = () => {
currentPage,
} = usePagination(patientQueueEntries, currentPageSize);

// get patients in queue
let columns = [
{ id: 0, header: t("visitId", "Visit ID"), key: "visitId" },
{ id: 1, header: t("patientNumber", "Patient No."), key: "patientNumber" },
{ id: 2, header: t("names", "Name"), key: "patient" },
{ id: 3, header: t("age", "Age"), key: "age" },
{ id: 4, header: t("orderedFrom", "Ordered From"), key: "orderedFrom" },
{ id: 5, header: t("waitingTime", "Waiting Time"), key: "waitingTime" },
{
id: 6,
header: t("testsOrdered", "Test(s) Ordered"),
key: "testsOrdered",
},
];
const tableHeaders = useMemo(
() => [
{ id: 0, header: t("visitId", "Visit ID"), key: "visitId" },
{
id: 1,
header: t("patientNumber", "Patient No."),
key: "patientNumber",
},
{ id: 2, header: t("names", "Name"), key: "patient" },
{ id: 3, header: t("age", "Age"), key: "age" },
{ id: 4, header: t("orderedFrom", "Ordered From"), key: "orderedFrom" },
{ id: 5, header: t("waitingTime", "Waiting Time"), key: "waitingTime" },
{
id: 6,
header: t("testsOrdered", "Test(s) Ordered"),
key: "testsOrdered",
},
],
[t]
);

const tableRows = useMemo(() => {
return paginatedQueueEntries.map((entry, index) => {
return {
...entry,
visitId: entry?.uuid,
patientNumber: entry.patient?.identifiers[0].display,
names: entry?.patient?.display.split("-")[1],
age: "",
orderedFrom: "",
waitingTime: "",
testsOrdered: "",
};
});
}, []);
console.log(

Check failure on line 72 in src/ordered-orders/tests-ordered-list.component.tsx

View workflow job for this annotation

GitHub Actions / build 

Unexpected console statement
"paginatedQueueEntries--->" +
JSON.stringify(paginatedQueueEntries, null, 2)
);
return paginatedQueueEntries?.map((entry) => ({
...entry,
id: entry.id,
visitId: {
content: <span>{trimVisitNumber(entry.visitNumber)}</span>,
},
patientNumber: {
content: <span>{entry?.identifiers[0]?.display}</span>,
},
names: {
content: <span>{entry?.name}</span>,
},
age: {
content: <span>{entry?.patientAge}</span>,
},
orderedFrom: {
content: <span>{entry?.locationFrom}</span>,
},
waitingTime: {
content: (
<Tag>
<span
className={styles.statusContainer}
style={{ color: `${getTagColor(entry.waitTime)}` }}
>
{formatWaitTime(entry.waitTime, t)}
</span>
</Tag>
),
},
testsOrdered: "",
}));
}, [paginatedQueueEntries]);

Check warning on line 108 in src/ordered-orders/tests-ordered-list.component.tsx

View workflow job for this annotation

GitHub Actions / build 

React Hook useMemo has a missing dependency: 't'. Either include it or remove the dependency array

if (isLoading) {
return <InlineLoading status="active" />;
}

return (
<DataTable
rows={tableRows}
headers={columns}
useZebraStyles
overflowMenuOnHover={true}
>
{({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
<TableContainer className={styles.tableContainer}>
<Table {...getTableProps()} className={styles.activePatientsTable}>
<TableHead>
<TableRow>
{headers.map((header) => (
<TableHeader {...getHeaderProps({ header })}>
{header.header?.content ?? header.header}
</TableHeader>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => {
return (
<React.Fragment key={row.id}>
<TableRow {...getRowProps({ row })} key={row.id}>
{row.cells.map((cell) => (
<TableCell key={cell.id}>
{cell.value?.content ?? cell.value}
</TableCell>
))}
</TableRow>
</React.Fragment>
);
})}
</TableBody>
</Table>
</TableContainer>
)}
</DataTable>
<div className={styles.container}>
<DataTable
rows={tableRows}
headers={tableHeaders}
useZebraStyles
overflowMenuOnHover={true}
>
{({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
<TableContainer className={styles.tableContainer}>
<Table {...getTableProps()} className={styles.activePatientsTable}>
<TableHead>
<TableRow>
{headers.map((header) => (
<TableHeader {...getHeaderProps({ header })}>
{header.header}
</TableHeader>
))}
</TableRow>
</TableHead>
<TableBody>
{rows?.map((row) => {
return (
<React.Fragment key={row.id}>
<TableRow {...getRowProps({ row })}>
{row.cells.map((cell) => (
<TableCell key={cell?.id}>
{cell.value?.content ?? cell?.value}
</TableCell>
))}
</TableRow>
</React.Fragment>
);
})}
</TableBody>
</Table>
{rows.length === 0 ? (
<div className={styles.tileContainer}>
<Tile className={styles.tile}>
<div className={styles.tileContent}>
<p className={styles.content}>
{t("noPatientsToDisplay", "No patients to display")}
</p>
</div>
</Tile>
</div>
) : null}
<Pagination
forwardText="Next page"
backwardText="Previous page"
page={currentPage}
pageSize={currentPageSize}
pageSizes={pageSizes}
totalItems={paginatedQueueEntries?.length}
className={styles.pagination}
onChange={({ pageSize, page }) => {
if (pageSize !== currentPageSize) {
setPageSize(pageSize);
}
if (page !== currentPage) {
goTo(page);
}
}}
/>
</TableContainer>
)}
</DataTable>
</div>
);
};

Expand Down
9 changes: 9 additions & 0 deletions src/ordered-orders/laboratory-queue.scss → src/ordered-orders/tests-ordered.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,4 +214,13 @@ title {

.single-line-display {
white-space: nowrap;
}

.statusContainer {
display: flex;
align-items: center;

svg {
margin-right: 0.5rem;
}
}
2 changes: 1 addition & 1 deletion src/reject-order/rejected-tests-list.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {

import { useTranslation } from "react-i18next";
import { formatDate, parseDate, usePagination } from "@openmrs/esm-framework";
import styles from "../tests-ordered/laboratory-queue.scss";
import styles from "../ordered-orders/tests-ordered.scss";
import { useGetOrdersWorklist } from "../worklist-orders/work-list.resource";
import { useOrderDate } from "../utils/functions";

Expand Down

0 comments on commit be358b4

Please sign in to comment.