@openmrs/esm-laboratory-app 1.0.1-pre.106

package/src/patient-chart/results-summary/test-children-results.component.tsx

@@ -0,0 +1,221 @@
+import React, { AnchorHTMLAttributes, useMemo } from "react";
+import { GroupMember, Value } from "../laboratory-order.resource";
+import { useTranslation } from "react-i18next";
+import {
+  DataTable,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+  InlineLoading,
+} from "@carbon/react";
+import styles from "./results-summary.scss";
+import { useGetConceptById } from "./results-summary.resource";
+
+interface TestsResultsChildrenProps {
+  members: GroupMember[];
+}
+
+interface ReferenceRangeProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  conceptUuid: string;
+}
+
+interface ColorRangeIndicatorProps
+  extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  value: number | Value;
+  conceptUuid: string;
+}
+
+const TestResultsChildren: React.FC<TestsResultsChildrenProps> = ({
+  members,
+}) => {
+  const { t } = useTranslation();
+
+  let columns = [
+    { id: 1, header: t("test", "Test"), key: "test" },
+
+    {
+      id: 2,
+      header: t("results", "Results"),
+      key: "value",
+    },
+    {
+      id: 3,
+      header: t("range", "Reference Range"),
+      key: "range",
+    },
+  ];
+
+  const results = useMemo(() => {
+    return members?.map((member) => ({
+      id: member.uuid,
+      test: {
+        content: <span>{member?.concept?.display}</span>,
+      },
+      value: {
+        content: (
+          <span>
+            {typeof member?.value === "number" ? member.value : member.display}
+          </span>
+        ),
+      },
+    }));
+  }, [members]);
+
+  if (members === undefined) {
+    return <span>No Data</span>;
+  }
+
+  const ReferenceRange: React.FC<ReferenceRangeProps> = ({ conceptUuid }) => {
+    const {
+      concept: concept,
+      isLoading,
+      isError,
+    } = useGetConceptById(conceptUuid);
+
+    if (isLoading) {
+      return <TableCell>{<InlineLoading status="active" />}</TableCell>;
+    }
+    if (isError) {
+      return <TableCell>{<span>Error</span>}</TableCell>;
+    }
+    return (
+      <TableCell>
+        {concept?.hiNormal === undefined || concept?.lowNormal === undefined ? (
+          "N/A"
+        ) : (
+          <div>
+            <span>{concept?.lowNormal}</span> : <span>{concept?.hiNormal}</span>
+            <span style={{ marginLeft: "10px" }}>{concept?.units}</span>
+          </div>
+        )}
+      </TableCell>
+    );
+  };
+
+  const ColorRangeIndicator: React.FC<ColorRangeIndicatorProps> = ({
+    value,
+    conceptUuid,
+  }) => {
+    const {
+      concept: concept,
+      isLoading,
+      isError,
+    } = useGetConceptById(conceptUuid);
+    if (isLoading) {
+      return <TableCell>{<InlineLoading status="active" />}</TableCell>;
+    }
+
+    if (isError) {
+      return <TableCell>{<span>Error</span>}</TableCell>;
+    }
+
+    if (concept?.datatype.display === "coded") {
+      return (
+        <TableCell>
+          {typeof value === "object" ? value.display : value}
+        </TableCell>
+      );
+    }
+
+    let range = "";
+    if (typeof value === "number") {
+      if (concept?.hiCritical && value >= concept?.hiCritical) {
+        range = styles.criticallyHigh;
+      }
+
+      if (concept?.hiNormal && value > concept?.hiNormal) {
+        range = styles.high;
+      }
+
+      if (concept?.lowCritical && value <= concept?.lowCritical) {
+        range = styles.criticallyLow;
+      }
+
+      if (concept?.lowNormal && value < concept?.lowNormal) {
+        range = styles.low;
+      }
+      return <TableCell className={range}>{value}</TableCell>;
+    }
+    return <TableCell>{value.display}</TableCell>;
+  };
+
+  if (results?.length >= 0) {
+    return (
+      <div>
+        <DataTable rows={results} headers={columns} useZebraStyles>
+          {({ 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, index) => {
+                    return (
+                      <React.Fragment key={row.id}>
+                        <TableRow {...getRowProps({ row })}>
+                          {row.cells.map((cell) =>
+                            cell.info.header === "range" ? (
+                              <ReferenceRange
+                                conceptUuid={members[index].concept.uuid}
+                              >
+                                {cell.value?.content}
+                              </ReferenceRange>
+                            ) : cell.info.header === "value" ? (
+                              <ColorRangeIndicator
+                                conceptUuid={members[index].concept.uuid}
+                                value={members[index].value}
+                              />
+                            ) : (
+                              <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(
+                          "noTestOrdersToDisplay",
+                          "No test orders to display"
+                        )}
+                      </p>
+                      <p className={styles.helper}>
+                        {t("checkFilters", "Check the filters above")}
+                      </p>
+                    </div>
+                    <p className={styles.separator}>{t("or", "or")}</p>
+                  </Tile>
+                </div>
+              ) : null}
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    );
+  }
+};
+
+export default TestResultsChildren;

package/src/patient-chart/results-summary/test-print-results-table.component.tsx

@@ -0,0 +1,148 @@
+import React, { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  DataTable,
+  DataTableSkeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+  TableExpandHeader,
+  TableExpandRow,
+  TableExpandedRow,
+} from "@carbon/react";
+import styles from "./results-summary.scss";
+import RescendTestResultActionMenu from "./test-results-rescend-action-menu.component";
+import { Order } from "../laboratory-order.resource";
+import DeleteTestResultActionMenu from "./test-results-delete-action-menu.component";
+import { Ob } from "../laboratory-item/view-laboratory-item.resource";
+import TestResultsChildren from "./test-children-results.component";
+
+interface TestOrdersProps {
+  obs: Ob[];
+}
+
+const TestsPrintResults: React.FC<TestOrdersProps> = ({ obs }) => {
+  const { t } = useTranslation();
+
+  let columns = [
+    { id: 1, header: t("order", "Order"), key: "order" },
+    { id: 2, header: t("results", "Results"), key: "result" },
+  ];
+
+  const filteredItems = obs.filter((ob) => ob?.order?.type === "testorder");
+
+  const tableRows = useMemo(() => {
+    return filteredItems?.map((entry) => ({
+      ...entry,
+      id: entry.uuid,
+      members: entry?.groupMembers,
+      order: {
+        content: <span>{entry.display}</span>,
+      },
+      result: {
+        content: <span>--</span>,
+      },
+    }));
+  }, [filteredItems]);
+
+  if (filteredItems?.length >= 0) {
+    return (
+      <div>
+        <DataTable
+          rows={tableRows}
+          headers={columns}
+          useZebraStyles
+          expanded={false}
+        >
+          {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
+            <TableContainer className={styles.tableContainer}>
+              <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}>
+                        <TableExpandRow {...getRowProps({ row })}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>
+                              {cell.value?.content ?? cell.value}
+                            </TableCell>
+                          ))}
+                        </TableExpandRow>
+                        {row.isExpanded ? (
+                          <TableExpandedRow
+                            className={styles.expandedActiveVisitRow}
+                            colSpan={headers.length + 2}
+                          >
+                            <TestResultsChildren
+                              members={filteredItems[index].groupMembers}
+                            />
+                          </TableExpandedRow>
+                        ) : (
+                          <TableExpandedRow
+                            className={styles.hiddenRow}
+                            colSpan={headers.length + 2}
+                          />
+                        )}
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+              {rows.length === 0 ? (
+                <div className={styles.tileContainer}>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>
+                        {t(
+                          "noTestResultsToDisplay",
+                          "No test results to display"
+                        )}
+                      </p>
+                    </div>
+                  </Tile>
+                </div>
+              ) : null}
+              {/* <Pagination
+                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);
+                  }
+                }}
+              /> */}
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    );
+  }
+};
+
+export default TestsPrintResults;

package/src/patient-chart/results-summary/test-results-delete-action-menu.component.tsx

@@ -0,0 +1,27 @@
+import { showModal, useSession } from "@openmrs/esm-framework";
+import React, { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Button, Tooltip } from "@carbon/react";
+import { TrashCan } from "@carbon/react/icons";
+
+interface RescendTestResultActionMenuProps {
+  closeModal: () => void;
+}
+
+const DeleteTestResultActionMenu: React.FC<
+  RescendTestResultActionMenuProps
+> = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip align="bottom" label="Delete Results">
+      <Button
+        kind="ghost"
+        iconDescription={t("delete", "Delete Test ")}
+        renderIcon={(props) => <TrashCan size={16} {...props} />}
+      ></Button>
+    </Tooltip>
+  );
+};
+
+export default DeleteTestResultActionMenu;

package/src/patient-chart/results-summary/test-results-rescend-action-menu.component.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Button, Tooltip } from "@carbon/react";
+import { ArrowRight } from "@carbon/react/icons";
+
+interface RescendTestResultActionMenuProps {
+  closeModal: () => void;
+}
+
+const RescendTestResultActionMenu: React.FC<
+  RescendTestResultActionMenuProps
+> = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip align="bottom" label="Rescend Results">
+      <Button
+        kind="ghost"
+        iconDescription={t("rescend", "Rescend Tests ")}
+        renderIcon={(props) => <ArrowRight size={16} {...props} />}
+      ></Button>
+    </Tooltip>
+  );
+};
+
+export default RescendTestResultActionMenu;

package/src/patient-chart/results-summary/test-results-table.component.tsx

@@ -0,0 +1,153 @@
+import React, { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  DataTable,
+  DataTableSkeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+  TableExpandHeader,
+  TableExpandRow,
+  TableExpandedRow,
+} from "@carbon/react";
+import styles from "./results-summary.scss";
+import DeleteTestResultActionMenu from "./test-results-delete-action-menu.component";
+import { Ob } from "../laboratory-item/view-laboratory-item.resource";
+import TestResultsChildren from "./test-children-results.component";
+import { formatDate, parseDate } from "@openmrs/esm-framework";
+
+interface TestOrdersProps {
+  obs: Ob[];
+}
+
+const TestsResults: React.FC<TestOrdersProps> = ({ obs }) => {
+  const { t } = useTranslation();
+
+  let columns = [
+    { id: 0, header: t("order", "Order"), key: "order", align: "center" },
+    {
+      id: 1,
+      header: t("date", "Date"),
+      key: "date",
+      align: "center",
+    },
+    {
+      id: 2,
+      header: t("result", "Results"),
+      key: "result",
+      align: "center",
+    },
+
+    { id: 3, header: t("actions", "Actions"), key: "actions" },
+  ];
+
+  const obsList = obs.filter((ob) => ob?.order?.type === "testorder");
+
+  const obsRows = useMemo(() => {
+    return obsList.map((ob) => ({
+      id: ob.uuid,
+      order: {
+        content: <span>{ob?.concept?.display}</span>,
+      },
+      date: {
+        content: (
+          <span>
+            {formatDate(parseDate(ob?.obsDatetime), {
+              time: false,
+            })}
+          </span>
+        ),
+      },
+      result: {
+        content: <span>{ob?.display}</span>,
+      },
+
+      actions: {
+        content: (
+          <>
+            <DeleteTestResultActionMenu closeModal={() => true} />
+          </>
+        ),
+      },
+    }));
+  }, [obsList]);
+
+  if (obsRows?.length >= 0) {
+    return (
+      <div>
+        <DataTable rows={obsRows} headers={columns} useZebraStyles>
+          {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
+            <TableContainer className={styles.tableContainer}>
+              <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}>
+                        <TableExpandRow {...getRowProps({ row })}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>
+                              {cell.value?.content ?? cell.value}
+                            </TableCell>
+                          ))}
+                        </TableExpandRow>
+                        {row.isExpanded ? (
+                          <TableExpandedRow
+                            className={styles.expandedActiveVisitRow}
+                            colSpan={headers.length + 2}
+                          >
+                            <TestResultsChildren
+                              members={obsList[index].groupMembers}
+                            />
+                          </TableExpandedRow>
+                        ) : (
+                          <TableExpandedRow
+                            className={styles.hiddenRow}
+                            colSpan={headers.length + 2}
+                          />
+                        )}
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+              {rows.length === 0 ? (
+                <div className={styles.tileContainer}>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>
+                        {t(
+                          "noTestResultsToDisplay",
+                          "No test results to display"
+                        )}
+                      </p>
+                    </div>
+                  </Tile>
+                </div>
+              ) : null}
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    );
+  }
+};
+
+export default TestsResults;

package/src/patient-chart/results-summary/tests-children-detail.component.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useGetConceptById } from "./results-summary.resource";
+import { DataTableSkeleton } from "@carbon/react";
+
+interface TestsChildrenDetailProps {
+  conceptUuid: string;
+}
+
+const TestsChildrenDetail: React.FC<TestsChildrenDetailProps> = ({
+  conceptUuid,
+}) => {
+  const { t } = useTranslation();
+
+  const {
+    concept: concept,
+    isLoading,
+    isError,
+  } = useGetConceptById(conceptUuid);
+
+  if (isLoading || isError) {
+    return <DataTableSkeleton />;
+  }
+
+  return (
+    <>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        <span style={{ fontSize: "16px" }}>{concept.display}</span>
+        <span>Unit : {concept.units}</span>
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+        }}
+      >
+        <div style={{ display: "block" }}>
+          <span>Ranges</span>
+          <div>
+            <div>
+              <span> High : {concept.hiNormal} </span>
+            </div>
+            <div>
+              <span> Low : {concept?.lowNormal} </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+export default TestsChildrenDetail;

package/src/patient-chart/results-summary/views/email.handlebars

@@ -0,0 +1,13 @@
+// email.handlebars
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <title>Results Email</title>
+  </head>
+  <body>
+    <h2>Hello {{name}}! </h2>
+    <p>We're glad to send your results. Find attachement below </p>
+  </body>
+</html>