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

package/src/forms/overlay/overlay.component.tsx

@@ -4,10 +4,12 @@ import { ArrowLeft, Close } from "@carbon/react/icons";
 import { useLayoutType } from "@openmrs/esm-framework";
 import { closeOverlay, useOverlay } from "../../hooks/useOverlay";
 import styles from "./overlay.scss";
+import { useTranslation } from "react-i18next";
 
 const Overlay: React.FC = () => {
   const { header, component, isOverlayOpen } = useOverlay();
   const layout = useLayoutType();
+  const { t } = useTranslation();
   return (
     <>
       {isOverlayOpen && (
@@ -31,7 +33,7 @@ const Overlay: React.FC = () => {
           ) : (
             <Header
               onClick={() => closeOverlay()}
-              aria-label="Tablet overlay"
+              aria-label={t("tabletOverlay", "Tablet overlay")}
               className={styles.tabletOverlayHeader}
             >
               <Button hasIconOnly>

package/src/forms/pause-dispense-form.component.tsx

@@ -0,0 +1,236 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ExtensionSlot,
+  showNotification,
+  showToast,
+  useConfig,
+  useLayoutType,
+  usePatient,
+} from "@openmrs/esm-framework";
+import { Button, ComboBox, InlineLoading } from "@carbon/react";
+import {
+  saveMedicationDispense,
+  useReasonForPauseValueSet,
+} from "../medication-dispense/medication-dispense.resource";
+import { closeOverlay } from "../hooks/useOverlay";
+import styles from "./forms.scss";
+import { PharmacyConfig } from "../config-schema";
+import { updateMedicationRequestFulfillerStatus } from "../medication-request/medication-request.resource";
+import { getUuidFromReference, revalidate } from "../utils";
+import {
+  MedicationDispense,
+  MedicationDispenseStatus,
+  MedicationRequestFulfillerStatus,
+} from "../types";
+
+interface PauseDispenseFormProps {
+  medicationDispense: MedicationDispense;
+  mode: "enter" | "edit";
+  patientUuid?: string;
+  encounterUuid: string;
+}
+
+const PauseDispenseForm: React.FC<PauseDispenseFormProps> = ({
+  medicationDispense,
+  mode,
+  patientUuid,
+  encounterUuid,
+}) => {
+  const { t } = useTranslation();
+  const config = useConfig() as PharmacyConfig;
+  const isTablet = useLayoutType() === "tablet";
+  const { patient, isLoading } = usePatient(patientUuid);
+
+  // Keep track of medication dispense payload
+  const [medicationDispensePayload, setMedicationDispensePayload] =
+    useState<MedicationDispense>();
+
+  // whether or not the form is valid and ready to submit
+  const [isValid, setIsValid] = useState(false);
+
+  // to prevent duplicate submits
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [reasonsForPause, setReasonsForPause] = useState([]);
+  const { reasonForPauseValueSet } = useReasonForPauseValueSet(
+    config.valueSets.reasonForPause.uuid
+  );
+
+  useEffect(() => {
+    const reasonForPauseOptions = [];
+
+    if (reasonForPauseValueSet?.compose?.include) {
+      const uuidValueSet = reasonForPauseValueSet.compose.include.find(
+        (include) => !include.system
+      );
+      if (uuidValueSet) {
+        uuidValueSet.concept?.forEach((concept) =>
+          reasonForPauseOptions.push({
+            id: concept.code,
+            text: concept.display,
+          })
+        );
+        reasonForPauseOptions.sort((a, b) => a.text.localeCompare(b.text));
+      }
+    }
+    setReasonsForPause(reasonForPauseOptions);
+  }, [reasonForPauseValueSet]);
+
+  const handleSubmit = () => {
+    if (!isSubmitting) {
+      setIsSubmitting(true);
+      const abortController = new AbortController();
+      saveMedicationDispense(
+        medicationDispensePayload,
+        MedicationDispenseStatus.on_hold,
+        abortController
+      )
+        .then((response) => {
+          // only update request status when added a new dispense event, not updating
+          if (response.ok && !medicationDispense.id) {
+            return updateMedicationRequestFulfillerStatus(
+              getUuidFromReference(
+                medicationDispensePayload.authorizingPrescription[0].reference // assumes authorizing prescription exist
+              ),
+              MedicationRequestFulfillerStatus.on_hold
+            );
+          } else {
+            return response;
+          }
+        })
+        .then((response) => {
+          if (response.ok) {
+            closeOverlay();
+            revalidate(encounterUuid);
+            showToast({
+              critical: true,
+              kind: "success",
+              description: t(
+                mode === "enter"
+                  ? "medicationDispensePaused"
+                  : "medicationDispenseUpdated",
+                mode === "enter"
+                  ? "Medication dispense paused."
+                  : "Dispense record successfully updated."
+              ),
+              title: t(
+                mode === "enter"
+                  ? "medicationDispensePaused"
+                  : "medicationDispenseUpdated",
+                mode === "enter"
+                  ? "Medication dispense paused."
+                  : "Dispense record successfully updated."
+              ),
+            });
+          }
+        })
+        .catch((error) => {
+          showNotification({
+            title: t(
+              mode === "enter"
+                ? "medicationDispensePauseError"
+                : "medicationDispenseUpdatedError",
+              mode === "enter"
+                ? "Error pausing medication dispense."
+                : "Error updating dispense record"
+            ),
+            kind: "error",
+            critical: true,
+            description: error?.message,
+          });
+          setIsSubmitting(false);
+        });
+    }
+  };
+
+  const checkIsValid = () => {
+    if (
+      medicationDispensePayload &&
+      medicationDispensePayload.statusReasonCodeableConcept?.coding[0].code
+    ) {
+      setIsValid(true);
+    } else {
+      setIsValid(false);
+    }
+  };
+
+  // initialize the internal dispense payload with the dispenses passed in as props
+  useEffect(
+    () => setMedicationDispensePayload(medicationDispense),
+    [medicationDispense]
+  );
+
+  // check is valid on any changes
+  useEffect(checkIsValid, [medicationDispensePayload]);
+
+  const bannerState = useMemo(() => {
+    if (patient) {
+      return {
+        patient,
+        patientUuid,
+        hideActionsOverflow: true,
+      };
+    }
+  }, [patient, patientUuid]);
+
+  return (
+    <div className="">
+      <div className={styles.formWrapper}>
+        {isLoading && (
+          <InlineLoading
+            className={styles.bannerLoading}
+            iconDescription="Loading"
+            description="Loading banner"
+            status="active"
+          />
+        )}
+        {patient && (
+          <ExtensionSlot name="patient-header-slot" state={bannerState} />
+        )}
+        <section className={styles.formGroup}>
+          <ComboBox
+            id="reasonForPause"
+            light={isTablet}
+            items={reasonsForPause}
+            titleText={t("reasonForPause", "Reason for pause")}
+            itemToString={(item) => item?.text}
+            initialSelectedItem={{
+              id: medicationDispense.statusReasonCodeableConcept?.coding[0]
+                ?.code,
+              text: medicationDispense.statusReasonCodeableConcept?.text,
+            }}
+            onChange={({ selectedItem }) => {
+              setMedicationDispensePayload({
+                ...medicationDispensePayload,
+                statusReasonCodeableConcept: {
+                  coding: [
+                    {
+                      code: selectedItem?.id,
+                    },
+                  ],
+                },
+              });
+            }}
+          />
+        </section>
+        <section className={styles.buttonGroup}>
+          <Button
+            disabled={isSubmitting}
+            onClick={() => closeOverlay()}
+            kind="secondary"
+          >
+            {t("cancel", "Cancel")}
+          </Button>
+          <Button disabled={!isValid || isSubmitting} onClick={handleSubmit}>
+            {t(
+              mode === "enter" ? "pause" : "saveChanges",
+              mode === "enter" ? "Pause" : "Save changes"
+            )}
+          </Button>
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export default PauseDispenseForm;

package/src/history/history-and-comments.component.tsx

@@ -0,0 +1,326 @@
+import React from "react";
+import {
+  DataTableSkeleton,
+  OverflowMenu,
+  OverflowMenuItem,
+  Tag,
+  Tile,
+} from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import {
+  formatDatetime,
+  parseDate,
+  Session,
+  useConfig,
+  userHasAccess,
+  useSession,
+} from "@openmrs/esm-framework";
+import styles from "./history-and-comments.scss";
+import {
+  updateMedicationRequestFulfillerStatus,
+  usePrescriptionDetails,
+} from "../medication-request/medication-request.resource";
+import { deleteMedicationDispense } from "../medication-dispense/medication-dispense.resource";
+import MedicationEvent from "../components/medication-event.component";
+import { launchOverlay } from "../hooks/useOverlay";
+import { PharmacyConfig } from "../config-schema";
+import DispenseForm from "../forms/dispense-form.component";
+import {
+  MedicationDispense,
+  MedicationDispenseStatus,
+  MedicationRequestBundle,
+} from "../types";
+import {
+  PRIVILEGE_DELETE_DISPENSE,
+  PRIVILEGE_DELETE_DISPENSE_THIS_PROVIDER_ONLY,
+  PRIVILEGE_EDIT_DISPENSE,
+} from "../constants";
+import {
+  computeNewFulfillerStatusAfterDelete,
+  computeQuantityRemaining,
+  getDateRecorded,
+  getFulfillerStatus,
+  getMedicationRequestBundleContainingMedicationDispense,
+  getUuidFromReference,
+  revalidate,
+  sortMedicationDispensesByDateRecorded,
+} from "../utils";
+import PauseDispenseForm from "../forms/pause-dispense-form.component";
+import CloseDispenseForm from "../forms/close-dispense-form.component";
+
+const HistoryAndComments: React.FC<{
+  encounterUuid: string;
+  patientUuid: string;
+}> = ({ encounterUuid, patientUuid }) => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const config = useConfig() as PharmacyConfig;
+  const { medicationRequestBundles, prescriptionDate, isError, isLoading } =
+    usePrescriptionDetails(encounterUuid, config.refreshInterval);
+
+  const userCanEdit: Function = (session: Session) =>
+    session?.user && userHasAccess(PRIVILEGE_EDIT_DISPENSE, session.user);
+
+  const userCanDelete: Function = (
+    session: Session,
+    medicationDispense: MedicationDispense
+  ) => {
+    if (session?.user) {
+      if (userHasAccess(PRIVILEGE_DELETE_DISPENSE, session.user)) {
+        return true;
+      } else if (
+        userHasAccess(
+          PRIVILEGE_DELETE_DISPENSE_THIS_PROVIDER_ONLY,
+          session.user
+        ) &&
+        session.currentProvider?.uuid &&
+        medicationDispense.performer?.find(
+          (performer) =>
+            performer?.actor?.reference?.length > 1 &&
+            performer.actor.reference.split("/")[1] ===
+              session.currentProvider.uuid
+        ) != null
+      ) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const generateForm: Function = (
+    medicationDispense: MedicationDispense,
+    medicationRequestBundle: MedicationRequestBundle
+  ) => {
+    if (medicationDispense.status === MedicationDispenseStatus.completed) {
+      // note that since this is an edit, quantity remaining needs to include quantity that is part of this dispense
+      let quantityRemaining = null;
+      if (config.dispenseBehavior.restrictTotalQuantityDispensed) {
+        quantityRemaining =
+          computeQuantityRemaining(medicationRequestBundle) +
+          (medicationDispense?.quantity
+            ? medicationDispense.quantity.value
+            : 0);
+      }
+
+      return (
+        <DispenseForm
+          patientUuid={patientUuid}
+          encounterUuid={encounterUuid}
+          medicationDispense={medicationDispense}
+          medicationRequestBundle={medicationRequestBundle}
+          quantityRemaining={quantityRemaining}
+          mode="edit"
+        />
+      );
+    } else if (medicationDispense.status === MedicationDispenseStatus.on_hold) {
+      return (
+        <PauseDispenseForm
+          patientUuid={patientUuid}
+          encounterUuid={encounterUuid}
+          medicationDispense={medicationDispense}
+          mode="edit"
+        />
+      );
+    } else if (
+      medicationDispense.status === MedicationDispenseStatus.declined
+    ) {
+      return (
+        <CloseDispenseForm
+          patientUuid={patientUuid}
+          encounterUuid={encounterUuid}
+          medicationDispense={medicationDispense}
+          mode="edit"
+        />
+      );
+    }
+  };
+
+  const generateOverlayText: Function = (
+    medicationDispense: MedicationDispense
+  ) => {
+    if (medicationDispense.status === MedicationDispenseStatus.completed) {
+      return t("editDispenseRecord", "Edit Dispense Record");
+    } else if (medicationDispense.status === MedicationDispenseStatus.on_hold) {
+      return t("editPauseRecord", "Edit Pause Record");
+    } else if (
+      medicationDispense.status === MedicationDispenseStatus.declined
+    ) {
+      return t("editCloseeRecord", "Edit Close Record");
+    }
+  };
+
+  const generateMedicationDispenseActionMenu: Function = (
+    medicationDispense: MedicationDispense,
+    medicationRequestBundle: MedicationRequestBundle
+  ) => {
+    const editable = userCanEdit(session);
+    const deletable = userCanDelete(session, medicationDispense);
+
+    if (!editable && !deletable) {
+      return null;
+    } else {
+      return (
+        <OverflowMenu
+          ariaLabel={t(
+            "medicationDispenseActionMenu",
+            "Medication Dispense Action Menu"
+          )}
+          flipped={true}
+          className={styles.medicationEventActionMenu}
+        >
+          {editable && (
+            <OverflowMenuItem
+              onClick={() =>
+                launchOverlay(
+                  generateOverlayText(medicationDispense),
+                  generateForm(medicationDispense, medicationRequestBundle)
+                )
+              }
+              itemText={t("editRecord", "Edit Record")}
+            ></OverflowMenuItem>
+          )}
+          {deletable && (
+            <OverflowMenuItem
+              onClick={() => {
+                handleDelete(medicationDispense, medicationRequestBundle);
+              }}
+              itemText={t("delete", "Delete")}
+            ></OverflowMenuItem>
+          )}
+        </OverflowMenu>
+      );
+    }
+  };
+
+  const generateDispenseTag: Function = (
+    medicationDispense: MedicationDispense
+  ) => {
+    if (medicationDispense.status === MedicationDispenseStatus.completed) {
+      return <Tag type="gray">{t("dispensed", "Dispensed")}</Tag>;
+    } else if (medicationDispense.status === MedicationDispenseStatus.on_hold) {
+      return <Tag type="red">{t("paused", "Paused")}</Tag>;
+    } else if (
+      medicationDispense.status === MedicationDispenseStatus.declined
+    ) {
+      return <Tag type="red">{t("closed", "Closed")}</Tag>;
+    } else {
+      return null;
+    }
+  };
+
+  const generateDispenseVerbiage: Function = (
+    medicationDispense: MedicationDispense
+  ) => {
+    if (medicationDispense.status === MedicationDispenseStatus.completed) {
+      return t("dispensedMedication", "dispensed medication");
+    } else if (medicationDispense.status === MedicationDispenseStatus.on_hold) {
+      return t("pausedDispense", "paused dispense");
+    } else if (
+      medicationDispense.status === MedicationDispenseStatus.declined
+    ) {
+      return t("closedDispense", "closed dispense");
+    } else {
+      return null;
+    }
+  };
+
+  const handleDelete: Function = (
+    medicationDispense: MedicationDispense,
+    medicationRequestBundle: MedicationRequestBundle
+  ) => {
+    const currentFulfillerStatus = getFulfillerStatus(
+      medicationRequestBundle.request
+    );
+    const newFulfillerStatus = computeNewFulfillerStatusAfterDelete(
+      medicationDispense,
+      medicationRequestBundle,
+      config.dispenseBehavior.restrictTotalQuantityDispensed
+    );
+    if (currentFulfillerStatus !== newFulfillerStatus) {
+      updateMedicationRequestFulfillerStatus(
+        getUuidFromReference(
+          medicationDispense.authorizingPrescription[0].reference // assumes authorizing prescription exist
+        ),
+        newFulfillerStatus
+      ).then(() => {
+        revalidate(encounterUuid);
+      });
+    }
+    // do the actual delete
+    deleteMedicationDispense(medicationDispense.id).then(() => {
+      revalidate(encounterUuid);
+    });
+  };
+
+  // TODO: assumption is dispenses always are after requests?
+  return (
+    <div className={styles.historyAndCommentsContainer}>
+      {isLoading && <DataTableSkeleton role="progressbar" />}
+      {isError && <p>{t("error", "Error")}</p>}
+      {medicationRequestBundles &&
+        medicationRequestBundles
+          .flatMap(
+            (medicationDispenseBundle) => medicationDispenseBundle.dispenses
+          )
+          .sort(sortMedicationDispensesByDateRecorded)
+          .map((dispense) => {
+            return (
+              <div key={dispense.id}>
+                <h5
+                  style={{
+                    paddingTop: "8px",
+                    paddingBottom: "8px",
+                    fontSize: "0.9rem",
+                  }}
+                >
+                  {dispense.performer && dispense.performer[0]?.actor?.display}{" "}
+                  {generateDispenseVerbiage(dispense)} -{" "}
+                  {formatDatetime(parseDate(getDateRecorded(dispense)))}
+                </h5>
+                <Tile className={styles.dispenseTile}>
+                  {generateMedicationDispenseActionMenu(
+                    dispense,
+                    getMedicationRequestBundleContainingMedicationDispense(
+                      medicationRequestBundles,
+                      dispense
+                    )
+                  )}
+                  <MedicationEvent
+                    medicationEvent={dispense}
+                    status={generateDispenseTag(dispense)}
+                  />
+                </Tile>
+              </div>
+            );
+          })}
+      {medicationRequestBundles &&
+        medicationRequestBundles
+          .flatMap((medicationRequestBundle) => medicationRequestBundle.request)
+          .map((request) => {
+            return (
+              <div key={request.id}>
+                <h5
+                  style={{
+                    paddingTop: "8px",
+                    paddingBottom: "8px",
+                    fontSize: "0.9rem",
+                  }}
+                >
+                  {request.requester.display}{" "}
+                  {t("orderedMedication ", "ordered medication")} -{" "}
+                  {formatDatetime(prescriptionDate)}
+                </h5>
+                <Tile className={styles.requestTile}>
+                  <MedicationEvent
+                    medicationEvent={request}
+                    status={<Tag type="green">{t("ordered", "Ordered")}</Tag>}
+                  />
+                </Tile>
+              </div>
+            );
+          })}
+    </div>
+  );
+};
+
+export default HistoryAndComments;

package/src/history/history-and-comments.scss

@@ -0,0 +1,57 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import "~@openmrs/esm-styleguide/src/vars";
+
+.historyAndCommentsContainer {
+  max-width: 80%;
+
+  form {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+  }
+
+  form input {
+    vertical-align: middle;
+    margin: 0 10px 0 0;
+    padding: 10px;
+    border: 1px solid #8d8d8d !important;
+    background-color: white;
+  }
+  form button {
+    width: 90px;
+    height: 20px;
+    min-height: 2.5rem !important;
+  }
+
+  form :global(.cds--btn--ghost) {
+    width: 8rem !important;
+  }
+
+  .requestTile {
+    width: 100%;
+    margin: 2px 0 8px;
+    padding: 0 8px 0 8px;
+    background-color: #fff;
+    border-left: 4px solid var(--brand-03);
+    color: $text-02;
+    margin-bottom: 1rem !important;
+  }
+
+  .dispenseTile {
+    width: 100%;
+    margin: 2px 0 8px;
+    padding: 0 8px 0 8px;
+    background-color: #fff;
+    border-left: 4px solid red;
+    color: $text-02;
+    margin-bottom: 1rem !important;
+  }
+
+  .medicationEventActionMenu {
+    float: right;
+  }
+
+}
+
+