Skip to content

Commit

Permalink
ft : add lab queue list items (#3)
Browse files Browse the repository at this point in the history 
* ft: add lab queue table

* fix : add idea folder to ignore

* fix : remove proposed unnecessary code
  • Loading branch information
@jabahum
jabahum authored Sep 21, 2023
1 parent 1563b5e commit 908e06f
Show file tree
Hide file tree
Showing 10 changed files with 943 additions and 206 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ dist/

# Intellij integration
*.iml
*.idea/

# ignores for Yarn v3 w/o PNP
.pnp.*
Expand Down
2 changes: 1 addition & 1 deletion src/laboratory.component.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react";
import { LaboratoryHeader } from "./header/laboratory-header.component";
import LaboratorySummaryTiles from "./summary-tiles/laboratory-summary-tiles.component";
import LaboratoryQueueList from "./queue-list/laboratory-queue.component";
import LaboratoryQueueList from "./queue-list/laboratory-tabs.component";

const Laboratory: React.FC = () => {
return (
Expand Down
290 changes: 201 additions & 89 deletions src/queue-list/laboratory-patient-list.component.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useMemo, useState } from "react";
import {
DataTable,
DataTableHeader,
DataTableSkeleton,
Pagination,
Table,
Expand All @@ -13,111 +14,222 @@ import {
TableHeader,
TableRow,
TabPanel,
TableToolbar,
TableToolbarContent,
TableToolbarSearch,
Layer,
Tag,
} from "@carbon/react";
import { useTranslation } from "react-i18next";
import { formatDatetime, parseDate } from "@openmrs/esm-framework";
import {
age,
formatDate,
formatDatetime,
parseDate,
usePagination,
useSession,
} from "@openmrs/esm-framework";
import styles from "./laboratory-queue.scss";
import { usePatientQueuesList } from "./laboratory-patient-list.resource";
import {
formatWaitTime,
getTagColor,
trimVisitNumber,
} from "../utils/functions";

// type FilterProps = {
// rowIds: Array<string>;
// headers: Array<DataTableHeader>;
// cellsById: any;
// inputValue: string;
// getCellId: (row, key) => string;
// };

interface LaboratoryPatientListProps {
searchTerm: string;
location: string;
status: string;
}
interface LaboratoryPatientListProps {}

const LaboratoryPatientList: React.FC<LaboratoryPatientListProps> = ({
searchTerm,
location,
status,
}) => {
const LaboratoryPatientList: React.FC<LaboratoryPatientListProps> = () => {
const { t } = useTranslation();
const session = useSession();

const { patientQueueEntries, isLoading } = usePatientQueuesList(
session?.sessionLocation?.uuid,
status
);

const pageSizes = [10, 20, 30, 40, 50];
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [currentPageSize, setPageSize] = useState(10);
const [nextOffSet, setNextOffSet] = useState(0);
const [laboratoryQueue, setLaboratoryQueue] = useState([]);
const totalOrders = 0;

const {
goTo,
results: paginatedQueueEntries,
currentPage,
} = usePagination(patientQueueEntries, currentPageSize);

let columns = [
{ header: t("visitId", "Visit ID"), key: "visitId" },
{ header: t("names", "Names"), key: "names" },
{ header: t("age", "Age"), key: "age" },
{ header: t("orderedFrom", "Ordered from"), key: "orderedFrom" },
{ header: t("waitingTime", "Waiting time"), key: "waitingTime" },
{ header: t("testsOrdered", "Tests ordered"), key: "testsOrdered" },
{ id: 0, header: t("visitId", "Visit ID"), key: "visitId" },
{ id: 1, header: t("names", "Names"), key: "names" },
{ id: 2, header: t("age", "Age"), key: "age" },
{ id: 3, header: t("orderedFrom", "Ordered from"), key: "orderedFrom" },
{ id: 4, header: t("waitingTime", "Waiting time"), key: "waitingTime" },
];

useEffect(() => {
setPage(1);
setNextOffSet(0);
}, [searchTerm]);
const tableRows = useMemo(() => {
return paginatedQueueEntries?.map((entry) => ({
...entry,
visitId: {
content: <span>{trimVisitNumber(entry.visitNumber)}</span>,
},
names: {
content: <span>{entry.name}</span>,
},
age: {
content: <span>{age(entry.patientDob)}</span>,
},
orderedFrom: {
content: <span>{entry.locationFromName}</span>,
},
waitingTime: {
content: (
<Tag>
<span
className={styles.statusContainer}
style={{ color: `${getTagColor(entry.waitTime)}` }}
>
{formatWaitTime(entry.waitTime, t)}
</span>
</Tag>
),
},
}));
}, [paginatedQueueEntries, t]);

// const handleFilter = ({
// rowIds,
// headers,
// cellsById,
// inputValue,
// getCellId,
// }: FilterProps): Array<string> => {
// return rowIds.filter((rowId) =>
// headers.some(({ key }) => {
// const cellId = getCellId(rowId, key);
// const filterableValue = cellsById[cellId].value;
// const filterTerm = inputValue.toLowerCase();

return (
<TabPanel>
<div className={styles.patientListTableContainer}>
{/* {isLoading && <DataTableSkeleton role="progressbar" />} */}
{/* {error && <p>Error</p>} */}
{laboratoryQueue && (
<>
<DataTable rows={laboratoryQueue} headers={columns} isSortable>
{({
rows,
headers,
getHeaderProps,
getRowProps,
getTableProps,
}) => (
<TableContainer>
<Table {...getTableProps()} useZebraStyles>
<TableHead>
<TableRow>
<TableExpandHeader />
{headers.map((header) => (
<TableHeader {...getHeaderProps({ header })}>
{header.header}
</TableHeader>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<React.Fragment key={row.id}>
<TableExpandRow {...getRowProps({ row })}>
{row.cells.map((cell) => (
<TableCell key={cell.id}>
{cell.id.endsWith("created")
? formatDatetime(parseDate(cell.value))
: cell.id.endsWith("patient")
? cell.value.name
: cell.id.endsWith("status")
? t(cell.value)
: cell.value}
</TableCell>
))}
</TableExpandRow>
</React.Fragment>
))}
</TableBody>
</Table>
</TableContainer>
)}
</DataTable>
<div style={{ width: "100%" }}>
// if (typeof filterableValue === "boolean") {
// return false;
// }
// if (filterableValue.hasOwnProperty("content")) {
// if (Array.isArray(filterableValue.content.props.children)) {
// return (
// "" + filterableValue.content.props.children[1].props.children
// )
// .toLowerCase()
// .includes(filterTerm);
// }
// if (typeof filterableValue.content.props.children === "object") {
// return ("" + filterableValue.content.props.children.props.children)
// .toLowerCase()
// .includes(filterTerm);
// }
// return ("" + filterableValue.content.props.children)
// .toLowerCase()
// .includes(filterTerm);
// }
// return ("" + filterableValue).toLowerCase().includes(filterTerm);
// })
// );
// };
if (isLoading) {
return <DataTableSkeleton role="progressbar" />;
}
if (patientQueueEntries?.length) {
return (
<div>
<div className={styles.headerBtnContainer}></div>
<DataTable rows={tableRows} headers={columns} isSortable useZebraStyles>
{({
rows,
headers,
getHeaderProps,
getTableProps,
getRowProps,
onInputChange,
}) => (
<TableContainer className={styles.tableContainer}>
<TableToolbar
style={{
position: "static",
height: "3rem",
overflow: "visible",
backgroundColor: "color",
}}
>
<TableToolbarContent>
<Layer>
<TableToolbarSearch
onChange={onInputChange}
placeholder={t("searchThisList", "Search this list")}
size="sm"
/>
</Layer>
</TableToolbarContent>
</TableToolbar>
<Table
{...getTableProps()}
className={styles.activePatientsTable}
>
<TableHead>
<TableRow>
<TableExpandHeader />
{headers.map((header) => (
<TableHeader {...getHeaderProps({ header })}>
{header.header}
</TableHeader>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, index) => {
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>
<Pagination
page={page}
pageSize={pageSize}
pageSizes={[10, 20, 30, 40, 50, 100]}
totalItems={totalOrders}
onChange={({ page, pageSize }) => {
setPage(page);
setNextOffSet((page - 1) * pageSize);
setPageSize(pageSize);
forwardText="Next page"
backwardText="Previous page"
page={currentPage}
pageSize={currentPageSize}
pageSizes={pageSizes}
totalItems={patientQueueEntries?.length}
className={styles.pagination}
onChange={({ pageSize, page }) => {
if (pageSize !== currentPageSize) {
setPageSize(pageSize);
}
if (page !== currentPage) {
goTo(page);
}
}}
/>
</div>
</>
)}
</TableContainer>
)}
</DataTable>
</div>
</TabPanel>
);
);
}
};

export default LaboratoryPatientList;
Loading

0 comments on commit 908e06f

Please sign in to comment.