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

package/src/components/create-dashboard-link.component.tsx

@@ -0,0 +1,44 @@
+import React, { useMemo } from "react";
+import { ConfigurableLink } from "@openmrs/esm-framework";
+import { BrowserRouter, useLocation } from "react-router-dom";
+
+export interface DashboardLinkConfig {
+  name: string;
+  title: string;
+  slot?: string;
+}
+
+function DashboardExtension({
+  dashboardLinkConfig,
+}: {
+  dashboardLinkConfig: DashboardLinkConfig;
+}) {
+  const { name, title } = dashboardLinkConfig;
+  const location = useLocation();
+  const spaBasePath = `${window.spaBase}/home`;
+
+  const navLink = useMemo(() => {
+    const pathArray = location.pathname.split("/home");
+    const lastElement = pathArray[pathArray.length - 1];
+    return decodeURIComponent(lastElement);
+  }, [location.pathname]);
+
+  return (
+    <ConfigurableLink
+      to={`${spaBasePath}/${name}`}
+      className={`cds--side-nav__link ${
+        navLink.match(name) && "active-left-nav-link"
+      }`}
+    >
+      {title}
+    </ConfigurableLink>
+  );
+}
+
+export const createHomeDashboardLink =
+  (dashboardLinkConfig: DashboardLinkConfig) => () =>
+    (
+      <BrowserRouter>
+        <DashboardExtension dashboardLinkConfig={dashboardLinkConfig} />
+      </BrowserRouter>
+    );

package/src/components/overlay/hook.ts

@@ -0,0 +1,47 @@
+import { getGlobalStore } from "@openmrs/esm-framework";
+import { useEffect, useState } from "react";
+
+interface OverlayStore {
+  isOverlayOpen: boolean;
+  component?: any;
+  header: string;
+}
+
+const initialState = { isOverlayOpen: false, component: Function, header: "" };
+
+const getOverlayStore = () => {
+  return getGlobalStore("laboratory", initialState);
+};
+
+export const launchOverlay = (headerTitle: string, componentToRender) => {
+  const store = getOverlayStore();
+  store.setState({
+    isOverlayOpen: true,
+    component: componentToRender,
+    header: headerTitle,
+  });
+};
+
+export const closeOverlay = () => {
+  const store = getOverlayStore();
+  store.setState({ component: null, isOverlayOpen: false });
+};
+
+export const useOverlay = () => {
+  const [overlay, setOverlay] = useState<OverlayStore>();
+
+  useEffect(() => {
+    function update(state: OverlayStore) {
+      setOverlay(state);
+    }
+
+    update(getOverlayStore().getState());
+    getOverlayStore().subscribe(update);
+  }, []);
+
+  return {
+    isOverlayOpen: overlay?.isOverlayOpen,
+    component: overlay?.component,
+    header: overlay?.header,
+  };
+};

package/src/components/overlay/overlay.component.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Button, Header } from "@carbon/react";
+import { ArrowLeft, Close } from "@carbon/react/icons";
+import { useLayoutType } from "@openmrs/esm-framework";
+import styles from "./overlay.scss";
+import { useTranslation } from "react-i18next";
+import { closeOverlay, useOverlay } from "./hook";
+
+const Overlay: React.FC = () => {
+  const { header, component, isOverlayOpen } = useOverlay();
+  const layout = useLayoutType();
+  const { t } = useTranslation();
+  return (
+    <>
+      {isOverlayOpen && (
+        <div
+          className={
+            layout !== "tablet" ? styles.desktopOverlay : styles.tabletOverlay
+          }
+        >
+          {layout !== "tablet" ? (
+            <div className={styles.desktopHeader}>
+              <div className={styles.headerContent}>{header}</div>
+              <Button
+                className={styles.closePanelButton}
+                onClick={() => closeOverlay()}
+                kind="ghost"
+                hasIconOnly
+              >
+                <Close size={16} />
+              </Button>
+            </div>
+          ) : (
+            <Header
+              onClick={() => closeOverlay()}
+              aria-label={t("tabletOverlay", "Tablet overlay")}
+              className={styles.tabletOverlayHeader}
+            >
+              <Button hasIconOnly>
+                <ArrowLeft size={16} />
+              </Button>
+              <div className={styles.headerContent}>{header}</div>
+            </Header>
+          )}
+          <div>{component}</div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Overlay;

package/src/components/overlay/overlay.scss

@@ -0,0 +1,93 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+@import '../../root.scss';
+
+.desktopOverlay {
+  position: fixed;
+  top: spacing.$spacing-09;
+  width: 37rem;
+  right: 0;
+  bottom: 0;
+  border-left: 1px solid $text-03;
+  background-color: $ui-01;
+  overflow-y: auto;
+  height: calc(100vh - 3rem);
+}
+
+.desktopOverlay::after {
+  height: 100%;
+  border-left: 1px solid $text-03;
+}
+
+.tabletOverlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  background-color: $ui-01;
+  overflow-y: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+  }
+
+  &>div {
+    margin-top: spacing.$spacing-09;
+  }
+}
+
+.tabletOverlayHeader {
+  button {
+    @include brand-01(background-color);
+  }
+
+  .headerContent {
+    color: $ui-02;
+  }
+}
+
+.desktopHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: $ui-03;
+  border-bottom: 1px solid $text-03;
+  position: sticky;
+  position: -webkit-sticky;
+  width: 100%;
+  z-index: 1000;
+  top: 0;
+}
+
+.headerContent {
+  @include type.type-style('heading-compact-02');
+  padding: 0 spacing.$spacing-05;
+  color: $ui-05;
+}
+
+.closeButton {
+  background-color: $ui-background;
+  color: $ui-05;
+  fill: $ui-05;
+}
+
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  .overlayContent {
+    padding: 0 0 0 0;
+    overflow-y: auto;
+  }
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  .overlayContent {
+    padding: 0 0 0 0;
+    overflow-y: auto;
+  }
+}

package/src/config-schema.ts

@@ -0,0 +1,36 @@
+import { Type } from "@openmrs/esm-framework";
+
+export const configSchema = {
+  laboratoryQueueConcept: {
+    _type: Type.String,
+    _default: "1836ac8a-a855-4c7e-b2ba-a290233c67b7",
+    _description: "Concept uuid for the laboratory queue.",
+  },
+  laboratoryLocationTag: {
+    _type: Type.String,
+    _default: "Laboratory",
+    _description: "Location tag for laboratory locations.",
+  },
+  laboratorySpecimenTypeConcept: {
+    _type: Type.ConceptUuid,
+    _default: "159959AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+    _description: "Concept UUID for laboratory specimen types",
+  },
+  laboratoryEncounterTypeUuid: {
+    _type: Type.String,
+    _default: "214e27a1-606a-4b1e-a96e-d736c87069d5",
+    _description: "Concept uuid for the laboratory tool encounter type.",
+  },
+  laboratoryOrderTypeUuid: {
+    _type: Type.String,
+    _default: "52a447d3-a64a-11e3-9aeb-50e549534c5e",
+    _description: "Uuid for orderType",
+  },
+};
+
+export type Config = {
+  laboratoryQueueConcept: string;
+  laboratoryLocationTag: string;
+  laboratorySpecimenTypeConcept: string;
+  laboratoryEncounterTypeUuid: string;
+};

package/src/constants.ts

@@ -0,0 +1,5 @@
+export const moduleName = "@openmrs/esm-laboratory-app";
+
+export const LABORATARORY_ENCOUNTER_TYPE =
+  "cbf01392-ca29-11e9-a32f-2a2ae2dbcce4";
+export const TEST_ORDER_ENCOUNTER_TYPE = "dca07f4a-30ab-102d-86b0-7a5022ba4115";

package/src/declarations.d.ts

@@ -0,0 +1,6 @@
+declare module "@carbon/react";
+declare module "*.css";
+declare module "*.scss";
+declare module "*.png";
+
+declare type SideNavProps = object;

package/src/header/laboratory-header.component.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Calendar, Location } from "@carbon/react/icons";
+import { useSession, formatDate } from "@openmrs/esm-framework";
+import LaboratoryIllustration from "./laboratory-illustration.component";
+import styles from "./laboratory-header.scss";
+
+export const LaboratoryHeader: React.FC = () => {
+  const { t } = useTranslation();
+  const userSession = useSession();
+  const userLocation = userSession?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header}>
+      <div className={styles["left-justified-items"]}>
+        <LaboratoryIllustration />
+        <div className={styles["page-labels"]}>
+          {/* <p>{t('laboratory', 'Laboratory')}</p> */}
+          <p className={styles["page-name"]}>{t("laboratory", "Laboratory")}</p>
+        </div>
+      </div>
+      <div className={styles["right-justified-items"]}>
+        <div className={styles["date-and-location"]}>
+          <Location size={16} />
+          <span className={styles.value}>{userLocation}</span>
+          <span className={styles.middot}>&middot;</span>
+          <Calendar size={16} />
+          <span className={styles.value}>
+            {formatDate(new Date(), { mode: "standard" })}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/header/laboratory-header.scss

@@ -0,0 +1,68 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.header {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  height: spacing.$spacing-12;
+  background-color: $ui-02;
+  display: flex;
+  justify-content: space-between;
+}
+
+.left-justified-items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 0.75rem;
+}
+
+.right-justified-items {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  padding-top: 1rem;
+}
+
+.page-name {
+  @include type.type-style('heading-04');
+}
+
+.page-labels {
+  margin-left: 1rem;
+
+  p:first-of-type {
+    margin-bottom: 0.25rem;
+  }
+}
+
+.date-and-location {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: 1rem;
+}
+
+.value {
+  margin-left: 0.25rem;
+}
+
+.middot {
+  margin: 0 0.5rem;
+}
+
+.view {
+  @include type.type-style('label-01');
+}
+
+svg.iconOverrides {
+  width: 72 !important;
+  height: 72 !important;
+  fill: var(--brand-03);
+}
+
+.svgContainer svg {
+  width: 72px;
+  height: 72px;
+  fill: var(--brand-03);
+}

package/src/header/laboratory-illustration.component.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Microscope } from "@carbon/react/icons";
+import styles from "./laboratory-header.scss";
+
+const LaboratoryIllustration: React.FC = () => {
+  return (
+    <div className={styles.svgContainer}>
+      <Microscope className={styles.iconOverrides} />
+    </div>
+  );
+};
+
+export default LaboratoryIllustration;

package/src/index.ts

@@ -0,0 +1,92 @@
+import {
+  getAsyncLifecycle,
+  defineConfigSchema,
+  getSyncLifecycle,
+} from "@openmrs/esm-framework";
+import { configSchema } from "./config-schema";
+import { createHomeDashboardLink } from "./components/create-dashboard-link.component";
+import { createDashboardLink } from "@openmrs/esm-patient-common-lib";
+
+const moduleName = "@openmrs/esm-laboratory-app";
+
+const options = {
+  featureName: "ugandaemr-laboratory",
+  moduleName,
+};
+
+export const importTranslation = require.context(
+  "../translations",
+  false,
+  /.json$/,
+  "lazy"
+);
+
+export const root = getAsyncLifecycle(
+  () => import("./root.component"),
+  options
+);
+
+export const laboratoryDashboardLink = getSyncLifecycle(
+  createHomeDashboardLink({
+    name: "laboratory",
+    slot: "laboratory-dashboard-slot",
+    title: "Laboratory",
+  }),
+  options
+);
+
+export const laboratoryComponent = getAsyncLifecycle(
+  () => import("./laboratory.component"),
+  options
+);
+
+// Patient chart
+export const laboratoryOrderDashboardLink = getSyncLifecycle(
+  createDashboardLink({
+    path: "laboratory-orders",
+    title: "Investigative Results",
+    moduleName,
+  }),
+  options
+);
+export const laboratoryOrderComponent = getAsyncLifecycle(
+  () => import("./patient-chart/laboratory-order.component"),
+  options
+);
+
+export const addToWorklistDialog = getAsyncLifecycle(
+  () => import("./queue-list/lab-dialogs/add-to-worklist-dialog.component"),
+  options
+);
+
+export const sendEmailDialog = getAsyncLifecycle(
+  () => import("./patient-chart/results-summary/send-email-dialog.component"),
+  options
+);
+
+export const resultsSummaryWorkSpace = getAsyncLifecycle(
+  () => import("./patient-chart/results-summary/results-summary.component"),
+  options
+);
+
+export const editResultsDialog = getAsyncLifecycle(
+  () =>
+    import(
+      "./patient-chart/results-summary/results-dialog/edit-results-dialog.component"
+    ),
+  options
+);
+
+export const reviewItemDialog = getAsyncLifecycle(
+  () => import("./review-list/dialog/review-item.component"),
+  options
+);
+
+export const rejectOrderDialog = getAsyncLifecycle(
+  () => import("./reject-order/reject-order-dialog.component"),
+  options
+);
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}

package/src/laboratory.component.tsx

@@ -0,0 +1,18 @@
+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-tabs.component";
+import Overlay from "./components/overlay/overlay.component";
+
+const Laboratory: React.FC = () => {
+  return (
+    <div className={`omrs-main-content`}>
+      <LaboratoryHeader />
+      <LaboratorySummaryTiles />
+      <LaboratoryQueueList />
+      <Overlay />
+    </div>
+  );
+};
+
+export default Laboratory;

package/src/patient-chart/laboratory-item/view-laboratory-item.component.tsx

@@ -0,0 +1,39 @@
+import React, { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Button, Tooltip } from "@carbon/react";
+import { View } from "@carbon/react/icons";
+import { launchPatientWorkspace } from "@openmrs/esm-patient-common-lib";
+import { EncounterResponse } from "./view-laboratory-item.resource";
+
+interface ViewLaboratoryItemActionMenuProps {
+  closeModal: () => void;
+  encounter: EncounterResponse;
+}
+
+const ViewLaboratoryItemActionMenu: React.FC<
+  ViewLaboratoryItemActionMenuProps
+> = ({ encounter }) => {
+  const { t } = useTranslation();
+
+  const handleClick = useCallback(
+    () =>
+      launchPatientWorkspace("results-summary", {
+        workspaceTitle: `Results Summary Form`,
+        encounter,
+      }),
+    [encounter]
+  );
+
+  return (
+    <Tooltip align="bottom" label="View Results">
+      <Button
+        kind="ghost"
+        onClick={handleClick}
+        iconDescription={t("viewResults", "View Results ")}
+        renderIcon={(props) => <View size={16} {...props} />}
+      ></Button>
+    </Tooltip>
+  );
+};
+
+export default ViewLaboratoryItemActionMenu;