@openmrs/esm-dispensing-app 1.0.1-pre.99 → 1.1.0

package/src/components/medication-event.component.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import {
+  DosageInstruction,
+  MedicationDispense,
+  MedicationRequest,
+  Quantity,
+} from "../types";
+import styles from "./medication-event.scss";
+import {
+  getDosageInstruction,
+  getQuantity,
+  getRefillsAllowed,
+  getMedicationDisplay,
+  getMedicationReferenceOrCodeableConcept,
+} from "../utils";
+import { useTranslation } from "react-i18next";
+
+// can render MedicationRequest or MedicationDispense
+const MedicationEvent: React.FC<{
+  medicationEvent: MedicationRequest | MedicationDispense;
+  status?;
+}> = ({ medicationEvent, status = null }) => {
+  const { t } = useTranslation();
+  const dosageInstruction: DosageInstruction = getDosageInstruction(
+    medicationEvent.dosageInstruction
+  );
+  const quantity: Quantity = getQuantity(medicationEvent);
+  const refillsAllowed: number = getRefillsAllowed(medicationEvent);
+
+  return (
+    <div>
+      <p className={styles.medicationName}>
+        {status}
+        <strong>
+          {getMedicationDisplay(
+            getMedicationReferenceOrCodeableConcept(medicationEvent)
+          )}
+        </strong>
+      </p>
+
+      {dosageInstruction && (
+        <p className={styles.bodyLong01}>
+          <span className={styles.label01}>
+            {t("dose", "Dose").toUpperCase()}
+          </span>{" "}
+          <span className={styles.dosage}>
+            {dosageInstruction.doseAndRate &&
+              dosageInstruction?.doseAndRate.map((doseAndRate, index) => {
+                return (
+                  <span key={index}>
+                    {doseAndRate?.doseQuantity?.value}{" "}
+                    {doseAndRate?.doseQuantity?.unit}
+                  </span>
+                );
+              })}
+          </span>{" "}
+          &mdash; {dosageInstruction?.route?.text} &mdash;{" "}
+          {dosageInstruction?.timing?.code?.text}{" "}
+          {dosageInstruction?.timing?.repeat?.duration
+            ? "for " +
+              dosageInstruction?.timing?.repeat?.duration +
+              " " +
+              dosageInstruction?.timing?.repeat?.durationUnit
+            : " "}
+        </p>
+      )}
+
+      {quantity && (
+        <p className={styles.bodyLong01}>
+          <span className={styles.label01}>
+            {t("quantity", "Quantity").toUpperCase()}
+          </span>{" "}
+          <span className={styles.quantity}>
+            {quantity.value} {quantity.unit}
+          </span>
+        </p>
+      )}
+
+      {(refillsAllowed || refillsAllowed === 0) && (
+        <p className={styles.bodyLong01}>
+          <span className={styles.label01}>
+            {t("refills", "Refills").toUpperCase()}
+          </span>{" "}
+          <span className={styles.refills}>{refillsAllowed}</span>
+        </p>
+      )}
+      {dosageInstruction?.text && (
+        <p className={styles.bodyLong01}>{dosageInstruction.text}</p>
+      )}
+    </div>
+  );
+};
+
+export default MedicationEvent;

package/src/components/{medication-event-card.scss → medication-event.scss}

@@ -2,15 +2,6 @@
 @use '@carbon/styles/scss/type';
 @import "~@openmrs/esm-styleguide/src/vars";
 
-.medicationEventTile {
-  width: 100%;
-  margin: 2px 0 8px;
-  padding: 0 8px 0 8px;
-  background-color: #fff;
-  border-left: 4px solid #007d79;
-  color: $text-02;
-  margin-bottom: 1rem !important;
-}
 
 .medicationName {
   font-size: 15px !important;

package/src/components/patient-details.component.tsx

@@ -1,19 +1,14 @@
 import React, { useEffect } from "react";
 import {
   attach,
-  ConfigurableLink,
   detach,
   ExtensionSlot,
-  formatDate,
-  interpolateString,
-  parseDate,
   PatientUuid,
   useConfig,
   usePatient,
 } from "@openmrs/esm-framework";
 import styles from "./patient-details.scss";
 import { useTranslation } from "react-i18next";
-import { Patient } from "../types";
 
 const PatientDetails: React.FC<{
   patientUuid: PatientUuid;
@@ -36,28 +31,10 @@ const PatientDetails: React.FC<{
 
   const patientAvatar = (
     <div className={styles.patientAvatar} role="img">
-      <ExtensionSlot
-        extensionSlotName="patient-photo-slot"
-        state={patientPhotoSlotState}
-      />
+      <ExtensionSlot name="patient-photo-slot" state={patientPhotoSlotState} />
     </div>
   );
 
-  const getGender = (gender) => {
-    switch (gender) {
-      case "M":
-        return t("male", "Male");
-      case "F":
-        return t("female", "Female");
-      case "O":
-        return t("other", "Other");
-      case "U":
-        return t("unknown", "Unknown");
-      default:
-        return gender;
-    }
-  };
-
   useEffect(() => {
     attach("dispensing-patient-banner-slot", "patient-banner");
     attach("dispensing-patient-vitals-slot", "vitals-overview-widget");
@@ -75,7 +52,7 @@ const PatientDetails: React.FC<{
       {patient && (
         <div className={styles.patientDetailsContainer}>
           <ExtensionSlot
-            extensionSlotName="dispensing-patient-banner-slot"
+            name="dispensing-patient-banner-slot"
             state={{
               patient,
               patientUuid: patientUuid,
@@ -83,7 +60,7 @@ const PatientDetails: React.FC<{
           />
 
           <ExtensionSlot
-            extensionSlotName="dispensing-patient-vitals-slot"
+            name="dispensing-patient-vitals-slot"
             state={{
               patient,
               patientUuid: patientUuid,
@@ -91,7 +68,7 @@ const PatientDetails: React.FC<{
           />
 
           <ExtensionSlot
-            extensionSlotName="dispensing-patient-allergies-slot"
+            name="dispensing-patient-allergies-slot"
             state={{
               patient,
               patientUuid: patientUuid,

package/src/components/patient-details.scss

@@ -85,9 +85,6 @@
   color: $interactive-01;
 }
 
-:global(.cds--tooltip--definition .cds--tooltip__trigger) {
-  border-bottom: none;
-}
 
 .buttonCol {
   display: flex;

package/src/config-schema.ts

@@ -1,4 +1,4 @@
-import { Type, validator } from "@openmrs/esm-framework";
+import { Type } from "@openmrs/esm-framework";
 
 /**
  * This is the config schema. It expects a configuration object which
@@ -25,8 +25,147 @@ export const configSchema = {
     _type: Type.String,
     _default: "Pharmacy",
   },
+  actionButtons: {
+    pauseButton: {
+      enabled: {
+        _type: Type.Boolean,
+        _description:
+          "Enabled/Disable including a Pause button in the button action bar",
+        _default: true,
+      },
+    },
+    closeButton: {
+      enabled: {
+        _type: Type.Boolean,
+        _description:
+          "Enabled/Disable including a Close button in the button action bar",
+        _default: true,
+      },
+    },
+  },
+  dispenseBehavior: {
+    allowModifyingPrescription: {
+      _type: Type.Boolean,
+      _description:
+        "Enable/Disable editing the prescription. If Disabled, Quantity will be he only editable field on prescription form. Note that thins means that quantity units will need to be mandatory and set correctly on the prescription.",
+      _default: true,
+    },
+    restrictTotalQuantityDispensed: {
+      _type: Type.Boolean,
+      _description:
+        "Enable/Disable restricting dispensing quantity greater than total quantity ordered. Marks prescription as complete when total quantity dispensed. If true, allowModifyingPrescription *must* be false, as this functionality relies solely on numeric quantity and assumes no change in formulation, dosage, unit, etc",
+      _default: false,
+    },
+  },
+  medicationRequestExpirationPeriodInDays: {
+    _type: Type.Number,
+    _description:
+      "Medication Requests older that this will be considered expired",
+    _default: 90,
+  },
+  locationBehavior: {
+    locationColumn: {
+      enabled: {
+        _type: Type.Boolean,
+        _description:
+          "Enabled/Disable including a Location column in the main prescriptions table showing ordering location",
+        _default: false,
+      },
+    },
+    locationFilter: {
+      enabled: {
+        _type: Type.Boolean,
+        _description:
+          "Enable/Disable Location filter on main prescriptions page",
+        _default: false,
+      },
+      tag: {
+        _type: Type.String,
+        _description:
+          "Name of the location tag to use when fetching locations to populate filter",
+        _default: "Login Location",
+      },
+    },
+  },
+  refreshInterval: {
+    _type: Type.Number,
+    _description:
+      "The interval, in milliseconds, to query the backend for new/changed data",
+    _default: 60000,
+  },
+  valueSets: {
+    reasonForPause: {
+      uuid: {
+        _type: Type.UUID,
+        _description:
+          "UUID for the Value Set of valid answers to the 'Reason for Pause' question. Defaults to CIEL value set: https://app.openconceptlab.org/#/orgs/CIEL/sources/CIEL/concepts/168099/",
+        _default: "2dd3e5c0-3d3f-4f3d-9860-19b3f9ab26ff",
+      },
+    },
+    reasonForClose: {
+      uuid: {
+        _type: Type.UUID,
+        _description:
+          "UUID for the Value Set of valid answers to the 'Reason for Close' question. Defaults to CIEL value set: https://app.openconceptlab.org/#/orgs/CIEL/sources/CIEL/concepts/168099/",
+        _default: "bd6c1fc2-7cfc-4562-94a0-e4765e5e977e",
+      },
+    },
+    substitutionReason: {
+      uuid: {
+        _type: Type.UUID,
+        _description:
+          "UUID for the Value Set of valid answers to the 'Reason for Substitution' question. Defaults to CIEL value set: https://app.openconceptlab.org/#/orgs/CIEL/sources/CIEL/concepts/167862/",
+        _default: "de8671b8-ed2e-4f7e-a9f8-dcd00878f2eb",
+      },
+    },
+    substitutionType: {
+      uuid: {
+        _type: Type.UUID,
+        _description:
+          "UUID for the Value Set of valid answers to the 'Type of Substitution' question. Defaults to CIEL value set: https://app.openconceptlab.org/#/orgs/CIEL/sources/CIEL/concepts/167859/",
+        _default: "b9c5bca0-d026-4245-a4d2-e4c0a8999082",
+      },
+    },
+  },
 };
 
 export type PharmacyConfig = {
-  appName: String;
+  appName: string;
+  actionButtons: {
+    pauseButton: {
+      enabled: boolean;
+    };
+    closeButton: {
+      enabled: boolean;
+    };
+  };
+  refreshInterval: number;
+  dispenseBehavior: {
+    allowModifyingPrescription: boolean;
+    restrictTotalQuantityDispensed: boolean;
+  };
+  medicationRequestExpirationPeriodInDays: number;
+  locationBehavior: {
+    locationColumn: {
+      enabled: boolean;
+    };
+    locationFilter: {
+      enabled: boolean;
+      tag: string;
+    };
+  };
+  valueSets: {
+    reasonForPause: {
+      uuid: string;
+    };
+    reasonForClose: {
+      uuid: string;
+    };
+    substitutionReason: {
+      uuid: string;
+    };
+    substitutionType: {
+      uuid: string;
+    };
+  };
 };

package/src/constants.ts

@@ -1,3 +1,27 @@
 export const spaRoot = window["getOpenmrsSpaBase"];
 export const basePath = "/dispensing";
 export const spaBasePath = `${window.spaBase}${basePath}`;
+
+// defined in FHIR 2 module
+export const OPENMRS_FHIR_PREFIX = "http://fhir.openmrs.org";
+export const OPENMRS_FHIR_EXT_PREFIX = OPENMRS_FHIR_PREFIX + "/ext";
+export const OPENMRS_FHIR_EXT_MEDICINE = OPENMRS_FHIR_EXT_PREFIX + "/medicine";
+export const OPENMRS_FHIR_EXT_DISPENSE_RECORDED =
+  OPENMRS_FHIR_EXT_PREFIX + "/medicationdispense/recorded";
+export const OPENMRS_FHIR_EXT_REQUEST_FULFILLER_STATUS =
+  OPENMRS_FHIR_EXT_PREFIX + "/medicationrequest/fullfillerstatus";
+
+export const PRIVILEGE_CREATE_DISPENSE = "Task: dispensing.create.dispense";
+export const PRIVILEGE_CREATE_DISPENSE_MODIFY_DETAILS =
+  "Task: dispensing.create.dispense.allowSubstitutions";
+export const PRIVILEGE_EDIT_DISPENSE = "Task: dispensing.edit.dispense";
+export const PRIVILEGE_DELETE_DISPENSE = "Task: dispensing.delete.dispense";
+export const PRIVILEGE_DELETE_DISPENSE_THIS_PROVIDER_ONLY =
+  "Task: dispensing.delete.dispense.ifCreator";
+
+export const JSON_MERGE_PATH_MIME_TYPE = "application/merge-patch+json";
+
+export const PRESCRIPTIONS_TABLE_ENDPOINT =
+  "Encounter?_query=encountersWithMedicationRequests";
+
+export const PRESCRIPTION_DETAILS_ENDPOINT = "MedicationRequest";

package/src/dashboard/dispensing-dashboard.component.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { InlineNotification } from "@carbon/react";
+import Overlay from "../forms/overlay/overlay.component";
+import { PharmacyHeader } from "../pharmacy-header/pharmacy-header.component";
+import PrescriptionTabLists from "../prescriptions/prescription-tab-lists.component";
+import { PharmacyConfig } from "../config-schema";
+import { useConfig } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+
+export default function DispensingDashboard() {
+  const config = useConfig() as PharmacyConfig;
+  const { t } = useTranslation();
+  if (
+    config.dispenseBehavior.restrictTotalQuantityDispensed &&
+    config.dispenseBehavior.allowModifyingPrescription
+  ) {
+    return (
+      <div className={`omrs-main-content`}>
+        <InlineNotification
+          title={t("dispensingAppError", "Dispensing App Error")}
+          subtitle={t(
+            "dispensingAppMisconfigurationMessage",
+            "Please contact your system administration: Misconfiguration - 'restrictTotalQuantityDispensed' cannot be enabled if 'allowModifyingPrescription' is enabled."
+          )}
+        />
+      </div>
+    );
+  } else {
+    return (
+      <div className={`omrs-main-content`}>
+        <PharmacyHeader />
+        {/* <DispensingTiles /> */}
+        <PrescriptionTabLists />
+        <Overlay />
+      </div>
+    );
+  }
+}

package/src/declarations.d.tsx

@@ -1,3 +1,5 @@
 declare module "*.css";
 declare module "*.scss";
 declare module "*.svg";
+declare module "@carbon/react";
+declare type SideNavProps = {};

package/src/dispensing-tiles/dispensing-tiles.resource.tsx

@@ -2,6 +2,8 @@ import useSWR from "swr";
 import useSWRImmutable from "swr/immutable";
 import { FetchResponse, openmrsFetch } from "@openmrs/esm-framework";
 
+// NOT CURRENTLY USED
+
 export function useMetrics() {
   const metrics = {
     orders: 43,

package/src/dispensing.component.tsx

@@ -1,16 +1,6 @@
 import React from "react";
-import { PharmacyHeader } from "./pharmacy-header/pharmacy-header.component";
-import DispensingTiles from "./dispensing-tiles/dispensing-tiles.component";
-import PrescriptionTabLists from "./prescriptions/prescription-tab-lists.component";
-import Overlay from "./forms/overlay/overlay.component";
+import { ExtensionSlot } from "@openmrs/esm-framework";
 
 export default function Dispensing() {
-  return (
-    <div className={`omrs-main-content`}>
-      <PharmacyHeader />
-      {/*      <DispensingTiles />*/}
-      <PrescriptionTabLists />
-      <Overlay />
-    </div>
-  );
+  return <ExtensionSlot name="dispensing-dashboard-slot" />;
 }

package/src/dispensing.test.tsx

@@ -25,7 +25,7 @@ import { render } from "@testing-library/react";
 import Dispensing from "./dispensing.component";
 
 describe("<div/>", () => {
-  it("does nothing", () => {
+  test("renders dispening without error", () => {
     render(<Dispensing />);
   });
 });