@openmrs/esm-dispensing-app 1.0.0-pre.21 → 1.0.0-pre.28

package/src/index.ts

@@ -1,18 +1,6 @@
-/**
- * This is the entrypoint file of the application. It communicates the
- * important features of this microfrontend to the app shell. It
- * connects the app shell to the React application(s) that make up this
- * microfrontend.
- */
-
 import { getAsyncLifecycle, defineConfigSchema } from "@openmrs/esm-framework";
 import { configSchema } from "./config-schema";
 
-/**
- * This tells the app shell how to obtain translation files: that they
- * are JSON files in the directory `../translations` (which you should
- * see in the directory structure).
- */
 const importTranslation = require.context(
   "../translations",
   false,
@@ -20,29 +8,11 @@ const importTranslation = require.context(
   "lazy"
 );
 
-/**
- * This tells the app shell what versions of what OpenMRS backend modules
- * are expected. Warnings will appear if suitable modules are not
- * installed. The keys are the part of the module name after
- * `openmrs-module-`; e.g., `openmrs-module-fhir2` becomes `fhir2`.
- */
 const backendDependencies = {
   fhir2: "^1.2.0",
   "webservices.rest": "^2.2.0",
 };
 
-/**
- * This function performs any setup that should happen at microfrontend
- * load-time (such as defining the config schema) and then returns an
- * object which describes how the React application(s) should be
- * rendered.
- *
- * In this example, our return object contains a single page definition.
- * It tells the app shell that the default export of `greeter.tsx`
- * should be rendered when the route matches `hello`. The full route
- * will be `openmrsSpaBase() + 'hello'`, which is usually
- * `/openmrs/spa/hello`.
- */
 function setupOpenMRS() {
   const moduleName = "@openmrs/esm-dispensing-app";
 
@@ -56,11 +26,24 @@ function setupOpenMRS() {
   return {
     pages: [
       {
-        load: getAsyncLifecycle(() => import("./dispensing"), options),
         route: "dispensing",
+        load: getAsyncLifecycle(
+          () => import("./dispensing.component"),
+          options
+        ),
+        online: true,
+        offline: true,
+      },
+    ],
+    extensions: [
+      {
+        id: "appointments-link",
+        slot: "app-menu-slot",
+        load: getAsyncLifecycle(() => import("./dispensing-link"), options),
+        online: true,
+        offline: false,
       },
     ],
-    extensions: [],
   };
 }
 

package/src/{medicationrequest/medicationrequest.resource.tsx → medication-request/medication-request.resource.tsx}

@@ -1,5 +1,10 @@
 import useSWR from "swr";
-import { openmrsFetch } from "@openmrs/esm-framework";
+import {
+  fhirBaseUrl,
+  openmrsFetch,
+  openmrsObservableFetch,
+} from "@openmrs/esm-framework";
+import { MedicationRequest, MedicationRequestResponse } from "../types";
 
 export type Order = {
   id: string;
@@ -9,6 +14,7 @@ export type Order = {
   drugs: string;
   lastDispenser: string;
   status: string;
+  patientUuid: string;
 };
 
 interface FHIRMedicationRequestResponse {
@@ -20,7 +26,6 @@ interface FHIRMedicationRequestResponse {
   type: string;
   total: number;
   entry: Array<{
-    // Todo: split this into a union type. Possibly just use the types `fhir.Encounter` and `fhir.MedicationRequest`.
     resource: FHIREncounterOrder;
   }>;
 }
@@ -55,7 +60,7 @@ interface FHIREncounterOrder {
 
 export function useOrders() {
   const url =
-    "/ws/fhir2/R4/Encounter?_revinclude=MedicationRequest:encounter&_has:MedicationRequest:encounter:intent=order&_tag=http%3A%2F%2Ffhir.openmrs.org%2Fext%2Fencounter-tag%7Cencounter";
+    "/ws/fhir2/R4/Encounter?_count=10&_revinclude=MedicationRequest:encounter&_has:MedicationRequest:encounter:intent=order&_tag=http%3A%2F%2Ffhir.openmrs.org%2Fext%2Fencounter-tag%7Cencounter";
   const { data, error } = useSWR<
     { data: FHIRMedicationRequestResponse },
     Error
@@ -109,9 +114,33 @@ function buildEncounterOrders(
     lastDispenser: "tbd",
     prescriber: [...new Set(orders.map((o) => o.requester.display))].join(", "),
     status: computeStatus(orders.map((o) => o.status)),
+    patientUuid: encounter?.subject?.reference?.split("/")[1],
   };
 }
 
 function computeStatus(orderStatuses: Array<string>) {
   return orderStatuses.filter((s) => s)[0];
 }
+
+export function useOrderDetails(encounterUuid: string) {
+  let medications = null;
+  const { data, error } = useSWR<{ data: MedicationRequestResponse }, Error>(
+    `${fhirBaseUrl}/MedicationRequest?encounter=${encounterUuid}`,
+    openmrsFetch
+  );
+
+  if (data) {
+    const orders = data?.data.entry;
+    medications = orders?.map((order) => {
+      return order.resource;
+    });
+  } else {
+    medications = [];
+  }
+
+  return {
+    medications,
+    isError: error,
+    isLoading: !medications && !error,
+  };
+}

package/src/pharmacy-header/pharmacy-header.scss

@@ -10,6 +10,7 @@
   border: 1px solid $ui-03;
   border-left: 0px;
   display: flex;
+  padding-left: 8px;
   justify-content: space-between;
 }
 
@@ -31,6 +32,7 @@
 }
 
 .page-labels {
+  margin-left: 8px;
   p:first-of-type {
     margin-bottom: 0.25rem;
   }

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

@@ -3,22 +3,30 @@ import React from "react";
 const PharmacyIllustration: React.FC = () => {
   return (
     <svg
-      width="92"
-      height="94"
-      viewBox="0 0 92 94"
+      width="62"
+      height="58"
+      viewBox="0 0 62 58"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <title>Patient queue illustration</title>
-      <g fill="none" fillRule="evenodd">
-        <path fill="#FFF" d="M0 0h92v94H0z" />
-        <path
-          d="M40 32c.84-.602 1.12-1.797 1-3 .12-5.005-3.96-9-9-9s-9.12 3.995-9 9c-.12 3.572 2.1 6.706 5 8-6.76 1.741-12 7.91-12 15v15h28V32h-4zM76 67V52c0-7.09-5.24-13.278-12-15 2.9-1.294 5.12-4.428 5-8 .12-5.005-3.96-9-9-9s-9.12 3.995-9 9c-.12 1.203.14 2.398 1 3h-4v35h28z"
-          fill="#CEE6E5"
-        />
-        <path
-          d="M32 75V60.312c0-7.402 5.24-13.59 12.3-15.216-3.2-1.39-5.42-4.523-5.42-8.166 0-4.935 4.08-8.93 9.12-8.93 5.04 0 9.12 3.995 9.12 8.93 0 3.642-2.22 6.776-5.42 8.166C58.76 46.741 64 52.91 64 60.313V75"
-          fill="#7BBCB9"
-        />
+      <defs>
+        <path id="whv9q6f4ta" d="M0 0h62v30.508H0z" />
+        <path id="hp71ojgcnc" d="M0 0h24.603v26.571H0z" />
+      </defs>
+      <g fill="none">
+        <g opacity=".193" transform="matrix(-1 0 0 1 62 26.571)">
+          <path
+            d="M62 0c0 16.85-13.916 30.508-31.037 30.508S0 16.849 0 0h62z"
+            fill="#007D79"
+            mask="url(#rt0c8mo6eb)"
+          />
+        </g>
+        <g opacity=".396" transform="matrix(-1 0 0 1 60.032 0)">
+          <path
+            d="m24.603 26.571-13.35-23.51C9.592.141 5.884-.869 3.011.817.138 2.503-.855 6.272.804 9.193l9.874 17.378"
+            fill="#007D79"
+            mask="url(#hgianthqwd)"
+          />
+        </g>
       </g>
     </svg>
   );

package/src/prescriptions/prescription-tab-lists.component.tsx

@@ -0,0 +1,139 @@
+import React, { ReactNode, useEffect, useState } from "react";
+import {
+  DataTable,
+  DataTableSkeleton,
+  Tab,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+} from "carbon-components-react";
+import { useTranslation } from "react-i18next";
+import styles from "./prescriptions.scss";
+import {
+  Order,
+  useOrders,
+} from "../medication-request/medication-request.resource";
+import OrderExpanded from "../components/order-expanded.component";
+
+enum TabTypes {
+  STARRED,
+  SYSTEM,
+  USER,
+  ALL,
+}
+
+const labelMap = [
+  "All prescriptions",
+  "Active prescriptions",
+  "Complete",
+  "Returned",
+  "Cancelled",
+];
+
+function createLabels() {
+  const res: Array<ReactNode> = [];
+
+  for (let index = 0; index < Object.keys(labelMap).length; index++) {
+    res.push(<Tab label={labelMap[index]} key={index} id={"tab-" + index} />);
+  }
+
+  return res;
+}
+
+const columns = [
+  { header: "Created", key: "created" },
+  { header: "Patient name", key: "patientName" },
+  { header: "Prescriber", key: "prescriber" },
+  { header: "Drugs", key: "drugs" },
+  { header: "Last dispenser", key: "lastDispenser" },
+  { header: "Status", key: "status" },
+];
+
+const PrescriptionTabLists: React.FC = () => {
+  const { t } = useTranslation();
+  const [selectedTab, setSelectedTab] = useState(TabTypes.STARRED);
+  const { orders, isError, isLoading } = useOrders();
+  const encounterToPatientMap = {};
+
+  useEffect(() => {
+    if (orders?.length > 0) {
+      orders.map((order: Order) => {
+        encounterToPatientMap[order.id] = order.patientUuid;
+      });
+    }
+  }, [orders]);
+
+  return (
+    <main className={`omrs-main-content ${styles.prescriptionListContainer}`}>
+      <section className={styles.prescriptionTabsContainer}>
+        <Tabs
+          className={styles.tabs}
+          type="container"
+          tabContentClassName={styles.hiddenTabsContent}
+          onSelectionChange={setSelectedTab}
+        >
+          {createLabels()}
+        </Tabs>
+        <div className={styles.patientListTableContainer}>
+          {isLoading && <DataTableSkeleton role="progressbar" />}
+          {isError && <p>Error</p>}
+          {orders && (
+            <DataTable rows={orders} headers={columns} isSortable>
+              {({
+                rows,
+                headers,
+                getHeaderProps,
+                getRowProps,
+                getTableProps,
+              }) => (
+                <TableContainer>
+                  <Table {...getTableProps()}>
+                    <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.value}</TableCell>
+                            ))}
+                          </TableExpandRow>
+                          {row.isExpanded && (
+                            <TableExpandedRow colSpan={headers.length + 1}>
+                              <OrderExpanded
+                                encounterUuid={row.id}
+                                patientUuid={encounterToPatientMap[row.id]}
+                              />
+                            </TableExpandedRow>
+                          )}
+                        </React.Fragment>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              )}
+            </DataTable>
+          )}
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default PrescriptionTabLists;

package/src/prescriptions/prescriptions.scss

@@ -0,0 +1,131 @@
+@import '../root.scss';
+
+title {
+  width: 6.938rem;
+  height: 1.75rem;
+  margin: 0.438rem 22.875rem 0.813rem 0;
+  font-family: IBMPlexSans;
+  font-size: 1.25rem;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.4;
+  letter-spacing: normal;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.prescriptionListContainer {
+  display: flex;
+}
+
+.breadcrumbsSlot {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+}
+
+.prescriptionTabsContainer {
+  height: 100%;
+  width: 100%;
+  background-color: $ui-02;
+}
+
+.patientListHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-left: $spacing-05;
+}
+
+.newListButton {
+  width: fit-content;
+  justify-self: end;
+  align-self: center;
+}
+
+.tabs {
+  grid-column: 'span 2';
+  padding: 0 $spacing-05;
+}
+
+.hiddenTabsContent, .tabs .hiddenTabsContent {
+  display: none;
+}
+
+.patientListTableContainer {
+  grid-row: 3 / 4;
+  grid-column: 1 / 2;
+  height: 100%;
+  padding: $spacing-05;
+  background-color: $ui-01;
+}
+
+// Patient List Table
+
+.searchContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+}
+
+.searchContainer > div {
+  align-self: center;
+  justify-self: flex-end;
+}
+
+.search {
+  width: 100%;
+  max-width: 16rem;
+  background-color: $ui-02;
+  border-bottom-color: $ui-03;
+}
+
+.tableBody {
+  background-color: $ui-01;
+}
+
+.tableCell, .interactiveText01 {
+  color: $interactive-01;
+}
+
+.desktopRow, .desktopHeader {
+    height: $spacing-07 !important;
+}
+
+.tabletRow, .tabletHeader {
+    height: $spacing-09 !important;
+}
+
+// Search Overlay
+
+.searchOverlay {
+  z-index: 1;
+  grid-row: 2 / 4;
+  grid-column: 1 / 2;
+  background-color: $ui-04;
+  opacity: 0.7;
+}
+
+.patientListResultsContainer {
+  z-index: 1;
+  grid-row: 2 / 4;
+  grid-column: 1 / 2;
+  background-color: $ui-01;
+  padding: $spacing-05;
+}
+
+// Results Overlay
+
+.resultCount {
+  @include carbon--type-style('body-short-01');
+  color: $text-02;
+  border-bottom: solid 1px #e0e0e0;
+  padding: $spacing-04 0;
+}
+
+.patientListResultsTableContainer {
+  margin: $spacing-03;
+}
+

package/src/root.scss

@@ -0,0 +1,51 @@
+@import "~carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/styles";
+@import "~carbon-components/src/globals/scss/vendor/@carbon/layout/scss/generated/spacing";
+@import "carbon-components/scss/globals/scss/typography.scss";
+@import "~@openmrs/esm-styleguide/src/vars";
+
+.productiveHeading01 {
+  @include carbon--type-style("productive-heading-01");
+}
+
+.productiveHeading02 {
+  @include carbon--type-style("productive-heading-02");
+}
+
+.productiveHeading03 {
+  @include carbon--type-style("productive-heading-03");
+}
+
+.productiveHeading04 {
+  @include carbon--type-style("productive-heading-04");
+}
+
+.bodyLong01 {
+  @include carbon--type-style("body-long-01");
+}
+
+.bodyShort01 {
+  @include carbon--type-style("body-short-01");
+}
+
+.bodyShort02 {
+  @include carbon--type-style("body-short-02");
+}
+
+.text02 {
+  color: $text-02;
+}
+
+.label01 {
+  @include carbon--type-style("label-01")
+}
+
+.modal {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  display: grid;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9000;
+  justify-items: center;
+  align-items: center;
+}

package/src/types.ts

@@ -0,0 +1,185 @@
+import { OpenmrsResource } from "@openmrs/esm-api";
+
+export interface DrugOrders {
+  id: string;
+  display: string;
+  description: string;
+}
+
+export interface Order {
+  uuid: string;
+  action: string;
+  asNeeded: boolean;
+  asNeededCondition?: string;
+  autoExpireDate: Date;
+  brandName?: string;
+  careSetting: OpenmrsResource;
+  commentToFulfiller: string;
+  dateActivated: Date;
+  dateStopped?: Date | null;
+  dispenseAsWritten: boolean;
+  dose: number;
+  doseUnits: OpenmrsResource;
+  dosingInstructions: string | null;
+  dosingType?:
+    | "org.openmrs.FreeTextDosingInstructions"
+    | "org.openmrs.SimpleDosingInstructions";
+  drug: Drug;
+  duration: number;
+  durationUnits: OpenmrsResource;
+  encounter: OpenmrsResource;
+  frequency: OpenmrsResource;
+  instructions?: string | null;
+  numRefills: number;
+  orderNumber: string;
+  orderReason: string | null;
+  orderReasonNonCoded: string | null;
+  orderType: {
+    conceptClasses: Array<any>;
+    description: string;
+    display: string;
+    name: string;
+    parent: string | null;
+    retired: boolean;
+    uuid: string;
+  };
+  orderer: {
+    display: string;
+    person: {
+      display: string;
+    };
+    uuid: string;
+  };
+  patient: OpenmrsResource;
+  previousOrder: { uuid: string; type: string; display: string } | null;
+  quantity: number;
+  quantityUnits: OpenmrsResource;
+  route: OpenmrsResource;
+  scheduleDate: null;
+  urgency: string;
+}
+
+export interface Drug {
+  uuid: string;
+  name: string;
+  strength: string;
+  concept: OpenmrsResource;
+  dosageForm: OpenmrsResource;
+}
+
+export interface Patient {
+  uuid: string;
+  display: string;
+  identifiers: Array<any>;
+  person: Person;
+}
+
+export interface Person {
+  age: number;
+  attributes: Array<Attribute>;
+  birthDate: string;
+  gender: string;
+  display: string;
+  preferredAddress: OpenmrsResource;
+  uuid: string;
+}
+
+export interface Attribute {
+  attributeType: OpenmrsResource;
+  display: string;
+  uuid: string;
+  value: string | number;
+}
+
+export interface MedicationRequestResponse {
+  resourceType: string;
+  id: string;
+  meta: {
+    lastUpdated: string;
+  };
+  type: string;
+  total: number;
+  entry: Array<{
+    resource: MedicationRequest;
+  }>;
+}
+
+export interface MedicationRequest {
+  resourceType: string;
+  id: string;
+  meta: {
+    lastUpdated: string;
+  };
+  status: string;
+  intent: string;
+  priority: string;
+  medicationReference: {
+    reference: string;
+    type: string;
+    display: string;
+  };
+  subject: {
+    reference: string;
+    type: string;
+    display: string;
+  };
+  encounter: {
+    reference: string;
+    type: string;
+  };
+  requester: {
+    reference: string;
+    type: string;
+    identifier: {
+      value: string;
+    };
+    display: string;
+  };
+  dosageInstruction: Array<DosageInstruction>;
+  dispenseRequest: {
+    numberOfRepeatsAllowed: number;
+    quantity: {
+      value: number;
+      unit: string;
+      code: string;
+    };
+  };
+}
+
+export interface DosageInstruction {
+  text: string;
+  timing: {
+    repeat: {
+      duration: number;
+      durationUnit: string;
+    };
+    code: {
+      coding: [
+        {
+          code: string;
+          display: string;
+        }
+      ];
+      text: string;
+    };
+  };
+  asNeededBoolean: boolean;
+  route: {
+    coding: [
+      {
+        code: string;
+        display: string;
+      }
+    ];
+    text: string;
+  };
+  doseAndRate: [
+    {
+      doseQuantity: {
+        value: number;
+        unit: string;
+        code: string;
+      };
+    }
+  ];
+}