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

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

@@ -0,0 +1,98 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Button,
+  DataTableSkeleton,
+  Form,
+  ModalBody,
+  ModalFooter,
+} from "@carbon/react";
+import { Printer, MailAll, Edit } from "@carbon/react/icons";
+import styles from "./results-summary.scss";
+import TestsResults from "./test-results-table.component";
+import { useReactToPrint } from "react-to-print";
+import { EncounterResponse } from "../laboratory-item/view-laboratory-item.resource";
+import PrintResultsSummary from "./print-results-summary.component";
+import { formatDate, parseDate, showModal } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+import { Order } from "../laboratory-order.resource";
+
+interface ResultsSummaryProps {
+  encounter: EncounterResponse;
+}
+
+const ResultsSummary: React.FC<ResultsSummaryProps> = ({ encounter }) => {
+  const { t } = useTranslation();
+  // get encouter details
+  // const { encounter, isLoading, isError } = useGetEncounterById(encounterUuid);
+
+  // print button
+
+  // email button
+
+  // if (encounter) {
+  //   return <DataTableSkeleton role="progressbar" />;
+  // }
+  // if (isError) {
+  //   return <ErrorState error={isError} headerTitle={"Error"} />;
+  // }
+
+  const obsData = encounter.obs.filter((ob) => ob?.order?.type === "testorder");
+
+  if (encounter) {
+    return (
+      <div>
+        <Form>
+          <ModalBody>
+            <section className={styles.section}>
+              <div style={{ display: "flex", justifyContent: "space-between" }}>
+                <div></div>
+                <div style={{ display: "flex", flexDirection: "row" }}>
+                  {/* <PrintButtonAction /> */}
+                  {/* <EmailButtonAction /> */}
+                </div>
+              </div>
+            </section>
+            <section className={styles.section}>
+              <div style={{ display: "flex", flexDirection: "column" }}>
+                <span style={{ margin: "5px" }}>
+                  Date :{" "}
+                  {formatDate(parseDate(encounter.encounterDatetime), {
+                    time: true,
+                  })}
+                </span>
+                <span style={{ margin: "5px" }}>
+                  Ordered By : {encounter?.auditInfo?.creator?.display}
+                </span>
+              </div>
+            </section>
+            <section className={styles.section}>
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <div>
+                  <span> Results Ordered</span>
+                </div>
+                <div>
+                  {/* <EditButtonAction encounterResponse={encounter} /> */}
+                </div>
+              </div>
+            </section>
+            <section className={styles.section}>
+              {/* <TestsResults obs={obsData} /> */}
+            </section>
+          </ModalBody>
+          {/* <ModalFooter>
+            <Button kind="secondary">{t("cancel", "Cancel")}</Button>
+            <Button type="submit">{t("results", "Save")}</Button>
+          </ModalFooter> */}
+        </Form>
+      </div>
+    );
+  }
+};
+
+export default ResultsSummary;

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

@@ -0,0 +1,185 @@
+import { openmrsFetch } from "@openmrs/esm-framework";
+import { ObsMetaInfo } from "@openmrs/esm-patient-common-lib";
+
+import useSWR from "swr";
+
+export type ObservationInterpretation =
+  | "critically_low"
+  | "critically_high"
+  | "high"
+  | "low"
+  | "normal";
+
+export interface ConceptResponse {
+  uuid: string;
+  display: string;
+  name: Name;
+  datatype: Datatype;
+  conceptClass: ConceptClass;
+  set: boolean;
+  version: any;
+  retired: boolean;
+  names: Name2[];
+  descriptions: Description[];
+  mappings: Mapping[];
+  answers: any[];
+  setMembers: any[];
+  auditInfo: AuditInfo;
+  hiNormal: number;
+  hiAbsolute: number;
+  hiCritical: number;
+  lowNormal: number;
+  lowAbsolute: number;
+  lowCritical: number;
+  units: string;
+  allowDecimal: boolean;
+  displayPrecision: any;
+  attributes: any[];
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface Name {
+  display: string;
+  uuid: string;
+  name: string;
+  locale: string;
+  localePreferred: boolean;
+  conceptNameType: string;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface Link {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Datatype {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  hl7Abbreviation: string;
+  retired: boolean;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface ConceptClass {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  retired: boolean;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface Name2 {
+  display: string;
+  uuid: string;
+  name: string;
+  locale: string;
+  localePreferred: boolean;
+  conceptNameType?: string;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface Description {
+  display: string;
+  uuid: string;
+  description: string;
+  locale: string;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface Mapping {
+  display: string;
+  uuid: string;
+  conceptReferenceTerm: ConceptReferenceTerm;
+  conceptMapType: ConceptMapType;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface ConceptReferenceTerm {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+
+export interface ConceptMapType {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+
+export interface AuditInfo {
+  creator: Creator;
+  dateCreated: string;
+  changedBy: ChangedBy;
+  dateChanged: string;
+}
+
+export interface Creator {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+
+export interface ChangedBy {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+
+export function assessValue(
+  value: number,
+  range: ObsMetaInfo
+): ObservationInterpretation {
+  if (range?.hiCritical && value >= range.hiCritical) {
+    return "critically_high";
+  }
+
+  if (range?.hiNormal && value > range.hiNormal) {
+    return "high";
+  }
+
+  if (range?.lowCritical && value <= range.lowCritical) {
+    return "critically_low";
+  }
+
+  if (range?.lowNormal && value < range.lowNormal) {
+    return "low";
+  }
+
+  return "normal";
+}
+
+export function useGetConceptById(conceptUuid: string) {
+  const apiUrl = `/ws/rest/v1/concept/${conceptUuid}?v=full`;
+  const { data, error, isLoading } = useSWR<{ data: ConceptResponse }, Error>(
+    apiUrl,
+    openmrsFetch
+  );
+  return {
+    concept: data?.data,
+    isLoading,
+    isError: error,
+  };
+}
+
+export async function GetPatientByUuid(uuid: string) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`/ws/rest/v1/patient/${uuid}`, {
+    headers: {
+      "Content-Type": "application/json",
+    },
+    signal: abortController.signal,
+  });
+}

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

@@ -0,0 +1,154 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/colors';
+@import "~@openmrs/esm-styleguide/src/vars";
+@import '../../root.scss';
+
+  .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%;
+    }
+  }
+
+
+  td {
+    white-space: nowrap;
+  }
+  
+  .criticallyLow, .criticallyHigh, .low, .high {
+    td:nth-child(2) {
+      @include type.type-style("heading-compact-01");
+    }
+  }
+  
+  .criticallyLow, .criticallyHigh {
+    border: 2px solid colors.$red-60 !important;
+  }
+  
+  .low, .high {
+    border: 1.5px solid colors.$black-100 !important;
+  }
+  
+  .criticallyLow {
+    td:nth-child(2)::after {
+      content: " ↓↓";
+    }
+  }
+  
+  .criticallyHigh {
+    td:nth-child(2)::after {
+      content: " ↑↑";
+    }
+  }
+  
+  .low {
+    td:nth-child(2)::after {
+      content: " ↓";
+    }
+  }
+  
+  .high {
+    td:nth-child(2)::after {
+      content: " ↑";
+    }
+  }
+  
+  .off-scale-low {
+    td:nth-child(2)::after {
+      content: " ↓↓↓";
+    }
+  }
+  
+  .off-scale-high {
+    td:nth-child(2)::after {
+      content: " ↑↑↑";
+    }
+  }
+  
+  .offScaleHigh,
+  .offScaleLow,
+  .criticallyHigh,
+  .criticallyLow,
+  .high,
+  .low {
+    @include type.type-style('heading-compact-01');
+  }
+  
+  .criticallyLow::after {
+    content: " ↓↓";
+  }
+  
+  .criticallyHigh::after {
+    content: " ↑↑";
+  }
+  
+  .low::after {
+    content: " ↓";
+  }
+  
+  .high::after {
+    content: " ↑";
+  }
+

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

@@ -0,0 +1,111 @@
+import {
+  Button,
+  Form,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  TextInput,
+  FileUploader,
+} from "@carbon/react";
+import React, { useState } from "react";
+// import nodemailer from "nodemailer";
+import { useTranslation } from "react-i18next";
+// import hbs from "nodemailer-express-handlebars";
+import path from "path";
+import { showNotification, showToast } from "@openmrs/esm-framework";
+
+interface SendEmailDialogProps {
+  closeModal: () => void;
+}
+
+const SendEmailDialog: React.FC<SendEmailDialogProps> = ({ closeModal }) => {
+  const { t } = useTranslation();
+
+  const [email, setEmail] = useState();
+  const [file, setFile] = useState();
+
+  // generate pdf
+
+  const sendEmail = async () => {
+    // initialize nodemailer
+    // var transporter = nodemailer.createTransport({
+    //   service: "gmail",
+    //   secure: true,
+    //   tls: {
+    //     rejectUnauthorized: false,
+    //   },
+    //   auth: {
+    //     user: "services.ugandaemr@gmail.com",
+    //     pass: "Admin1234_",
+    //   },
+    // });
+    // // point to the template folder
+    // const handlebarOptions = {
+    //   viewEngine: {
+    //     extname: ".hbs",
+    //     layoutsDir: "views/",
+    //     defaultLayout: "template",
+    //     partialsDir: "views/partials/",
+    //   },
+    //   viewPath: "views/",
+    //   extName: ".hbs",
+    // };
+    // transporter.use("compile", hbs(handlebarOptions));
+    // const mailOptions = {
+    //   from: "services.ugandaemr@gmail.com",
+    //   to: email,
+    //   subject: `Tests results`,
+    //   attachments: [{ filename: "testResults.pdf", path: file }],
+    // };
+    // transporter.sendMail(mailOptions, (error, info) => {
+    //   if (error) {
+    //     showNotification({
+    //       title: `Error in sending results`,
+    //       kind: "error",
+    //       critical: true,
+    //       description: error?.message,
+    //     });
+    //   } else {
+    //     showToast({
+    //       critical: true,
+    //       title: `Sent Test Results`,
+    //       kind: "success",
+    //       description: `Test results sent Successfully`,
+    //     });
+    //   }
+    // });
+  };
+
+  return (
+    <>
+      <Form onSubmit={sendEmail}>
+        <ModalHeader
+          closeModal={closeModal}
+          title={t("sendResults", "Send Results")}
+        />
+        <ModalBody>
+          <>
+            <div>
+              <TextInput
+                id="text-input-email"
+                invalidText="Error message goes here"
+                labelText="Email"
+                onChange={(e) => setEmail(e.target.value)}
+                size="md"
+                type="email"
+              />
+            </div>
+          </>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal}>
+            {t("cancel", "Cancel")}
+          </Button>
+          <Button type="submit">{t("sendEmail", "Send Email")}</Button>
+        </ModalFooter>
+      </Form>
+    </>
+  );
+};
+
+export default SendEmailDialog;