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

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

@@ -0,0 +1,240 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import styles from "./print-results-summary.scss";
+import TestsPrintResults from "./test-print-results-table.component";
+import { EncounterResponse } from "../laboratory-item/view-laboratory-item.resource";
+import {
+  formatDate,
+  interpolateUrl,
+  parseDate,
+  useConfig,
+} from "@openmrs/esm-framework";
+import {
+  DataTable,
+  DataTableSkeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+  TableExpandHeader,
+  TableExpandRow,
+  TableExpandedRow,
+} from "@carbon/react";
+import logoImg from "../../../assets/logo/moh_logo_without_word.png";
+import {
+  Identifier,
+  IdentifierType,
+  PatientResource,
+  useGetPatientByUuid,
+} from "../../utils/functions";
+import { useTranslation } from "react-i18next";
+import TestResultsChildren from "./test-children-results.component";
+import PrintResultsTable from "./print-results-table.component";
+import { GetPatientByUuid } from "./results-summary.resource";
+
+interface PrintResultsSummaryProps {
+  encounterResponse: EncounterResponse;
+  patient: PatientResource;
+}
+
+const PrintResultsSummary: React.FC<PrintResultsSummaryProps> = ({
+  encounterResponse,
+  patient,
+}) => {
+  const { t } = useTranslation();
+
+  const filteredItems = encounterResponse.obs.filter(
+    (ob) => ob?.order?.type === "testorder"
+  );
+
+  const results = useMemo(() => {
+    let groupedResults = [];
+
+    filteredItems.forEach((element) => {
+      groupedResults[element.order.display] = element;
+    });
+    return groupedResults;
+  }, [filteredItems]);
+  return (
+    <div className={styles.printPage}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-around",
+          flexDirection: "row",
+          alignItems: "center",
+          margin: " 10px",
+        }}
+      >
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <img src={logoImg} alt={"logo"} width={50} height={50} />
+              <span
+                style={{ fontSize: "10px", fontWeight: "bold", margin: "5px" }}
+              >
+                {encounterResponse.visit.location.display}
+              </span>
+            </div>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <span
+                style={{ fontSize: "10px", fontWeight: "bold", margin: "2px" }}
+              >
+                Code :
+              </span>
+              <span
+                style={{ fontSize: "10px", fontWeight: "bold", margin: "2px" }}
+              >
+                District :
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <span style={{ margin: "5px", fontSize: "10px" }}>
+            <span style={{ fontSize: "10px", fontWeight: "bold" }}>
+              {patient?.person?.display}
+            </span>
+            ,
+            {patient?.person?.gender === "M"
+              ? " Male"
+              : patient?.person?.gender === "F"
+              ? " Female"
+              : " Unknown"}
+            ,
+            <span>
+              {" "}
+              {formatDate(parseDate(patient?.person?.birthdate), {
+                mode: "standard",
+                time: false,
+              })}{" "}
+            </span>
+          </span>
+          <span style={{ margin: "5px", fontSize: "10px" }}>
+            HIV Clinic No. :
+            {patient?.identifiers.length
+              ? patient?.identifiers.find((identifier: Identifier) => {
+                  return (
+                    identifier.identifierType.uuid ===
+                    "e1731641-30ab-102d-86b0-7a5022ba4115"
+                  );
+                })?.identifier
+              : "--"}
+          </span>
+          <span style={{ margin: "5px", fontSize: "10px" }}>
+            Patient Unique Code (UIC). :
+            {patient?.identifiers.length > 0
+              ? patient?.identifiers.find((identifier: Identifier) => {
+                  return (
+                    identifier.identifierType.uuid ===
+                    "877169c4-92c6-4cc9-bf45-1ab95faea242"
+                  );
+                })?.identifier
+              : "--"}
+          </span>
+        </div>
+
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <span style={{ margin: "5px", fontSize: "10px" }}>
+            Prepared By : {encounterResponse?.auditInfo?.creator?.display}
+          </span>
+          <span style={{ margin: "5px", fontSize: "10px" }}>
+            Date Requested :
+            {formatDate(parseDate(encounterResponse.encounterDatetime), {
+              time: false,
+            })}
+          </span>
+        </div>
+      </div>
+
+      <section className={styles.section}>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+          }}
+        ></div>
+      </section>
+      {/* <section className={styles.section}>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            margin: "10px",
+          }}
+        >
+          <div>
+            <span style={{ fontSize: "16px", fontWeight: "bold" }}>
+              Test Results
+            </span>
+          </div>
+        </div>
+      </section> */}
+      <section className={styles.section}>
+        {Object.keys(results).length > 0 && (
+          <PrintResultsTable groupedResults={results} />
+        )}
+      </section>
+
+      <section className={styles.section}>
+        <div
+          style={{
+            margin: "10px",
+            display: "flex",
+            width: "500px",
+            flexDirection: "row",
+          }}
+        >
+          <span style={{ fontSize: "14px", marginBottom: "10px" }}>
+            Results Reviewed / Authorized by :
+            <span style={{ marginLeft: "50px" }}>
+              {encounterResponse?.auditInfo?.creator?.display}
+            </span>
+          </span>
+        </div>
+        <div
+          style={{
+            margin: "10px",
+            display: "flex",
+            width: "500px",
+            flexDirection: "row",
+          }}
+        >
+          <span style={{ fontSize: "14px", marginTop: "10px" }}>
+            Sign : .............................................{" "}
+            <span style={{ fontSize: "14px", marginLeft: "50px" }}>
+              Date : ............................
+            </span>
+          </span>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default PrintResultsSummary;

package/src/patient-chart/results-summary/print-results-summary.scss

@@ -0,0 +1,105 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import "~@openmrs/esm-styleguide/src/vars";
+@import '../../root.scss';
+
+@media screen {
+  .printPage {
+    background-color: white;
+    display: none;
+  }
+}
+
+@media print {
+  @page {
+    size: auto;
+    margin: 5px;
+  }
+
+  .section {
+    margin: 5px;
+  }
+
+  .headerBtnContainer {
+    background-color: $ui-background;
+    padding: spacing.$spacing-05;
+    text-align: right;
+  }
+
+  .tileContainer {
+    background-color: $ui-02;
+    border-top: 1px solid $ui-03;
+    padding: 5rem 0;
+  }
+
+  .tile {
+    margin: auto;
+    width: fit-content;
+  }
+
+  .tileContent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .content {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+    margin-bottom: 0.5rem;
+  }
+
+  .helper {
+    @include type.type-style('body-compact-01');
+    color: $text-02;
+  }
+
+  .separator {
+    @include type.type-style('body-compact-02');
+    color: $text-02;
+    width: 80%;
+    margin: 1.5rem auto;
+    overflow: hidden;
+    text-align: center;
+
+    &::before,
+    &::after {
+      background-color: $text-03;
+      content: '';
+      display: inline-block;
+      height: 1px;
+      position: relative;
+      vertical-align: middle;
+      width: 50%;
+    }
+
+    &::before {
+      right: 0.5rem;
+      margin-left: -50%;
+    }
+
+    &::after {
+      left: 0.5rem;
+      margin-right: -50%;
+    }
+  }
+
+  table {
+    font-family: Arial, sans-serif;
+    border-collapse: collapse;
+    width: 100%;
+  }
+  
+  td, th {
+    border: 1px solid #000;
+    text-align: left;
+    font-size: 8px;
+    padding: 8px;
+    width: 80px;
+  }
+  
+  th {
+    background-color: #f2f2f2;
+  }
+
+}

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

@@ -0,0 +1,163 @@
+import React from "react";
+import styles from "./print-results-summary.scss";
+import { GroupMember } from "../laboratory-order.resource";
+import { useGetConceptById } from "./results-summary.resource";
+import {
+  Button,
+  Form,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  InlineLoading,
+  Checkbox,
+} from "@carbon/react";
+
+interface PrintResultsTableProps {
+  groupedResults: any[];
+}
+
+interface ResultsRowProps {
+  groupMembers: GroupMember[];
+}
+
+interface ValueUnitsProps {
+  conceptUuid: string;
+}
+
+const PrintResultsTable: React.FC<PrintResultsTableProps> = ({
+  groupedResults,
+}) => {
+  const RowTest: React.FC<ResultsRowProps> = ({ groupMembers }) => {
+    // get Units
+    const ValueUnits: React.FC<ValueUnitsProps> = ({ conceptUuid }) => {
+      const {
+        concept: concept,
+        isLoading,
+        isError,
+      } = useGetConceptById(conceptUuid);
+      if (isLoading) {
+        return <InlineLoading status="active" />;
+      }
+      if (isError) {
+        return <span>Error</span>;
+      }
+      return <span style={{ marginLeft: "10px" }}>{concept?.units}</span>;
+    };
+
+    // get Reference Range
+    const ReferenceRange: React.FC<ValueUnitsProps> = ({ conceptUuid }) => {
+      const {
+        concept: concept,
+        isLoading,
+        isError,
+      } = useGetConceptById(conceptUuid);
+      if (isLoading) {
+        return <InlineLoading status="active" />;
+      }
+      if (isError) {
+        return <span>Error</span>;
+      }
+      return (
+        <>
+          {concept?.hiNormal === undefined ||
+          concept?.lowNormal === undefined ? (
+            "N/A"
+          ) : (
+            <div>
+              <span>{concept?.lowNormal ? concept?.lowNormal : "--"}</span> :{" "}
+              <span>{concept?.hiNormal ? concept?.hiNormal : "--"}</span>
+            </div>
+          )}
+        </>
+      );
+    };
+    return (
+      <>
+        {groupMembers?.map((element, index) => {
+          return (
+            <tr key={index}>
+              {typeof element.value === "number" ? (
+                <>
+                  <td>{element?.concept.display}</td>
+
+                  <td>{element?.value}</td>
+
+                  <td>
+                    {
+                      <ReferenceRange
+                        conceptUuid={groupMembers[index].concept.uuid}
+                      />
+                    }
+                  </td>
+
+                  <td>
+                    {
+                      <ValueUnits
+                        conceptUuid={groupMembers[index].concept.uuid}
+                      />
+                    }
+                  </td>
+                </>
+              ) : typeof element.value === "object" ? (
+                <>
+                  <td>{element?.concept.display}</td>
+
+                  <td>{element?.value.display}</td>
+                  <td>
+                    {
+                      <ReferenceRange
+                        conceptUuid={groupMembers[index].concept.uuid}
+                      />
+                    }
+                  </td>
+
+                  <td>
+                    {
+                      <ValueUnits
+                        conceptUuid={groupMembers[index].concept.uuid}
+                      />
+                    }
+                  </td>
+                </>
+              ) : (
+                <td>{element?.display}</td>
+              )}
+            </tr>
+          );
+        })}
+      </>
+    );
+  };
+  return (
+    <section className={styles.section}>
+      <table>
+        <thead>
+          <tr>
+            <th>Tests</th>
+            <th>Result</th>
+            <th>Reference Range</th>
+            <th>Units</th>
+          </tr>
+        </thead>
+      </table>
+      <table>
+        <tbody>
+          {Object.keys(groupedResults).map((test) => (
+            <tr key={test} style={{ margin: "10px" }}>
+              <span
+                style={{ margin: "10px", fontSize: "8px", fontWeight: "bold" }}
+              >
+                {test}
+              </span>
+              <table style={{ margin: "10px" }}>
+                <RowTest groupMembers={groupedResults[test].groupMembers} />
+              </table>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </section>
+  );
+};
+
+export default PrintResultsTable;

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { useGetLabEncounterTests } from "./results.resource";
+import { DataTableSkeleton } from "@carbon/react";
+import { ErrorState } from "@openmrs/esm-framework";
+
+interface ResultsProps {
+  encounterUuid: string;
+}
+
+const Results: React.FC<ResultsProps> = ({ encounterUuid }) => {
+  const { labResults, isLoading, isError } =
+    useGetLabEncounterTests(encounterUuid);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  if (isError) {
+    return <ErrorState error={isError} headerTitle={"Results Error"} />;
+  }
+
+  return <span>{JSON.stringify(labResults)}</span>;
+};
+
+export default Results;

package/src/patient-chart/results-summary/results/results.resource.ts

@@ -0,0 +1,50 @@
+import { FetchResponse, openmrsFetch, useConfig } from "@openmrs/esm-framework";
+import useSWR from "swr";
+
+export interface LabTestResultResponse {
+  results: Result[];
+}
+
+export interface Result {
+  order: string;
+  result: Result2[];
+  links: Link[];
+}
+
+export interface Result2 {
+  investigation: string;
+  set: string;
+  test: string;
+  value: string;
+  hiNormal: any;
+  lowNormal: any;
+  lowAbsolute: any;
+  hiCritical: any;
+  lowCritical: any;
+  unit: any;
+  level: string;
+  concept: string;
+  encounterId: any;
+  testId: any;
+  hiAbsolute: any;
+}
+
+export interface Link {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export function useGetLabEncounterTests(encounterUuid: string) {
+  const apiUrl = `/ws/rest/v1/encountertestresults?encounterUuid=${encounterUuid}`;
+
+  const { data, error, isLoading } = useSWR<
+    { data: LabTestResultResponse },
+    Error
+  >(apiUrl, openmrsFetch, { refreshInterval: 3000 });
+  return {
+    labResults: data?.data ? data?.data.results : [],
+    isLoading,
+    isError: error,
+  };
+}

package/src/patient-chart/results-summary/results-dialog/edit-results-dialog.component.tsx

@@ -0,0 +1,46 @@
+import {
+  Button,
+  Form,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from "@carbon/react";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { EncounterResponse } from "../../laboratory-item/view-laboratory-item.resource";
+
+interface EditResultsDialogProps {
+  encounterResponse: EncounterResponse;
+  closeModal: () => void;
+}
+
+const EditResultsDialog: React.FC<EditResultsDialogProps> = ({
+  encounterResponse,
+  closeModal,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Form>
+        <ModalHeader
+          closeModal={closeModal}
+          title={t("editOrder", "Edit Order")}
+        />
+        <ModalBody>
+          <>
+            <span>{encounterResponse?.display}</span>
+          </>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal}>
+            {t("cancel", "Cancel")}
+          </Button>
+          <Button type="submit">{t("editOrder", "Submit")}</Button>
+        </ModalFooter>
+      </Form>
+    </>
+  );
+};
+
+export default EditResultsDialog;