@ampath/esm-dispensing-app 1.10.0-next.1

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

@@ -0,0 +1,338 @@
+import React, { useMemo } from 'react';
+import { OverflowMenu, OverflowMenuItem, SkeletonText, Tag, Tile } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import {
+  formatDatetime,
+  launchWorkspace2,
+  parseDate,
+  type Session,
+  showModal,
+  showSnackbar,
+  useConfig,
+  userHasAccess,
+  useSession,
+} from '@openmrs/esm-framework';
+import {
+  updateMedicationRequestFulfillerStatus,
+  usePrescriptionDetails,
+} from '../medication-request/medication-request.resource';
+import { deleteMedicationDispense } from '../medication-dispense/medication-dispense.resource';
+import { type MedicationDispense, MedicationDispenseStatus, type MedicationRequestBundle } from '../types';
+import {
+  PRIVILEGE_DELETE_DISPENSE,
+  PRIVILEGE_DELETE_DISPENSE_THIS_PROVIDER_ONLY,
+  PRIVILEGE_EDIT_DISPENSE,
+} from '../constants';
+import {
+  computeNewFulfillerStatusAfterDelete,
+  computeQuantityRemaining,
+  computeTotalQuantityDispensed,
+  getFulfillerStatus,
+  getMedicationRequestBundleContainingMedicationDispense,
+  getUuidFromReference,
+  markEncounterAsStale,
+  revalidate,
+  sortMedicationDispensesByWhenHandedOver,
+} from '../utils';
+import { type PharmacyConfig } from '../config-schema';
+import MedicationEvent from '../components/medication-event.component';
+import styles from './history-and-comments.scss';
+
+const HistoryAndComments: React.FC<{
+  encounterUuid: string;
+  patientUuid: string;
+}> = ({ encounterUuid, patientUuid }) => {
+  const { t } = useTranslation();
+  const config = useConfig<PharmacyConfig>();
+  const { medicationRequestBundles, prescriptionDate, error, isLoading } = usePrescriptionDetails(
+    encounterUuid,
+    config.refreshInterval,
+  );
+
+  const generateDispenseVerbiage = (medicationDispense: MedicationDispense): string | null => {
+    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 { sortedDispenses, requests, hasHistory } = useMemo(() => {
+    const dispenses = medicationRequestBundles?.flatMap((bundle) => bundle.dispenses) ?? [];
+    const requests = medicationRequestBundles?.flatMap((bundle) => bundle.request) ?? [];
+    return {
+      sortedDispenses: [...dispenses].sort(sortMedicationDispensesByWhenHandedOver),
+      requests,
+      hasHistory: dispenses.length > 0 || requests.length > 0,
+    };
+  }, [medicationRequestBundles]);
+
+  return (
+    <div className={styles.historyAndCommentsContainer}>
+      {isLoading && (
+        <Tile>
+          <SkeletonText paragraph lineCount={2} />
+        </Tile>
+      )}
+      {error && (
+        <p className={styles.error}>
+          {t('errorLoadingHistory', 'Error loading history')}: {error.message}
+        </p>
+      )}
+      {!isLoading && !error && !hasHistory && (
+        <p className={styles.emptyState}>{t('noHistoryFound', 'No history found')}</p>
+      )}
+      {!isLoading && !error && hasHistory && (
+        <>
+          {sortedDispenses.map((dispense) => (
+            <div key={dispense.id}>
+              <h5 className={styles.historyHeader}>
+                {dispense.performer && dispense.performer[0]?.actor?.display} {generateDispenseVerbiage(dispense)} —{' '}
+                {formatDatetime(parseDate(dispense.whenHandedOver))}
+              </h5>
+              <MedicationEvent
+                medicationEvent={dispense}
+                status={<DispenseTag medicationDispense={dispense} />}
+                isDispenseEvent>
+                <MedicationDispenseActionMenu
+                  medicationDispense={dispense}
+                  medicationRequestBundle={getMedicationRequestBundleContainingMedicationDispense(
+                    medicationRequestBundles,
+                    dispense,
+                  )}
+                  patientUuid={patientUuid}
+                  encounterUuid={encounterUuid}
+                />
+              </MedicationEvent>
+            </div>
+          ))}
+          {requests.map((request) => (
+            <div key={request.id}>
+              <h5 className={styles.historyHeader}>
+                {request.requester.display} {t('orderedMedication', 'ordered medication')} —{' '}
+                {formatDatetime(prescriptionDate)}
+              </h5>
+              <MedicationEvent medicationEvent={request} status={<Tag type="green">{t('ordered', 'Ordered')}</Tag>} />
+            </div>
+          ))}
+        </>
+      )}
+    </div>
+  );
+};
+interface MedicationDispenseActionMenuProps {
+  medicationDispense: MedicationDispense;
+  medicationRequestBundle: MedicationRequestBundle;
+  patientUuid: string;
+  encounterUuid: string;
+}
+
+const MedicationDispenseActionMenu: React.FC<MedicationDispenseActionMenuProps> = ({
+  medicationDispense,
+  medicationRequestBundle,
+  patientUuid,
+  encounterUuid,
+}) => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const config = useConfig<PharmacyConfig>();
+  const userCanEdit = (session: Session): boolean =>
+    session?.user && userHasAccess(PRIVILEGE_EDIT_DISPENSE, session.user);
+
+  const userCanDelete = (session: Session, medicationDispense: MedicationDispense): boolean => {
+    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,
+        ) !== undefined
+      ) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const getDispenseWorkspaceConfig = (
+    medicationDispense: MedicationDispense,
+    medicationRequestBundle: MedicationRequestBundle,
+  ): { workspaceName: string; props: Record<string, unknown> } | undefined => {
+    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;
+      let quantityDispensed = null;
+      if (config.dispenseBehavior.restrictTotalQuantityDispensed) {
+        quantityRemaining =
+          computeQuantityRemaining(medicationRequestBundle) +
+          (medicationDispense?.quantity ? medicationDispense.quantity.value : 0);
+        if (medicationRequestBundle.dispenses) {
+          quantityDispensed = computeTotalQuantityDispensed(medicationRequestBundle.dispenses);
+        }
+      }
+
+      const dispenseFormProps = {
+        patientUuid,
+        encounterUuid,
+        medicationDispense,
+        medicationRequestBundle,
+        quantityRemaining,
+        quantityDispensed,
+        mode: 'edit',
+      };
+
+      return { workspaceName: 'dispense-workspace', props: dispenseFormProps };
+    } else if (medicationDispense.status === MedicationDispenseStatus.on_hold) {
+      const pauseDispenseFormProps = {
+        patientUuid,
+        encounterUuid,
+        medicationDispense,
+        mode: 'edit',
+      };
+      return { workspaceName: 'pause-dispense-workspace', props: pauseDispenseFormProps };
+    } else if (medicationDispense.status === MedicationDispenseStatus.declined) {
+      const closeDispenseFormProps = {
+        patientUuid,
+        encounterUuid,
+        medicationDispense,
+        mode: 'edit',
+      };
+      return { workspaceName: 'close-dispense-workspace', props: closeDispenseFormProps };
+    }
+  };
+
+  const getWorkspaceTitle = (medicationDispense: MedicationDispense): string | undefined => {
+    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('editCloseRecord', 'Edit Close Record');
+    }
+  };
+
+  const handleDelete = (
+    medicationDispense: MedicationDispense,
+    medicationRequestBundle: MedicationRequestBundle,
+  ): void => {
+    const currentFulfillerStatus = getFulfillerStatus(medicationRequestBundle.request);
+    const newFulfillerStatus = computeNewFulfillerStatusAfterDelete(
+      medicationDispense,
+      medicationRequestBundle,
+      config.dispenseBehavior.restrictTotalQuantityDispensed,
+    );
+    markEncounterAsStale(encounterUuid);
+    deleteMedicationDispense(medicationDispense.id)
+      .then(() => {
+        showSnackbar({
+          kind: 'success',
+          title: t('success', 'Success'),
+          subtitle: t('medicationDispenseDeleted', 'Medication dispense was deleted successfully'),
+        });
+        if (currentFulfillerStatus !== newFulfillerStatus) {
+          updateMedicationRequestFulfillerStatus(
+            getUuidFromReference(
+              medicationDispense.authorizingPrescription[0].reference, // assumes authorizing prescription exist
+            ),
+            newFulfillerStatus,
+          )
+            .then(() => {
+              revalidate(encounterUuid);
+            })
+            .catch(() => {
+              showSnackbar({
+                kind: 'error',
+                title: t('updateStatusFailed', 'Update Status Failed'),
+                subtitle: t('couldNotUpdateMedicationRequestStatus', 'Could not update medication request status'),
+              });
+            });
+        }
+        revalidate(encounterUuid);
+      })
+      .catch(() => {
+        showSnackbar({
+          kind: 'error',
+          title: t('deleteFailed', 'Delete Failed'),
+          subtitle: t('couldNotDeleteMedicationDispense', 'Could not delete medication dispense'),
+        });
+      });
+  };
+
+  const editable = userCanEdit(session);
+  const deletable = userCanDelete(session, medicationDispense);
+
+  const handleEdit = () => {
+    const { workspaceName, props } = getDispenseWorkspaceConfig(medicationDispense, medicationRequestBundle) as {
+      workspaceName: string;
+      props: Record<string, unknown>;
+    };
+    const customWorkspaceTitle = getWorkspaceTitle(medicationDispense);
+    launchWorkspace2(workspaceName, { customWorkspaceTitle, ...props });
+  };
+
+  const handleDeleteClick = ({ medicationDispense, medicationRequestBundle }) => {
+    const dispose = showModal('delete-confirm-modal', {
+      title: t('deleteDispenseRecord', 'Delete Dispense Record'),
+      message: t('deleteDispenseRecordMessage', 'Are you sure you want to delete this dispense record?'),
+      onDelete: () => {
+        handleDelete(medicationDispense, medicationRequestBundle);
+        dispose();
+      },
+      onClose: () => {
+        dispose();
+      },
+    });
+  };
+
+  if (!editable && !deletable) {
+    return null;
+  } else {
+    return (
+      <OverflowMenu
+        aria-label={t('medicationDispenseActionMenu', 'Medication Dispense Action Menu')}
+        className={styles.medicationEventActionMenu}
+        flipped>
+        {editable && (
+          <OverflowMenuItem
+            className={styles.menuitem}
+            itemText={t('editRecord', 'Edit record')}
+            onClick={handleEdit}
+          />
+        )}
+        {deletable && (
+          <OverflowMenuItem
+            className={styles.menuitem}
+            hasDivider
+            isDelete
+            itemText={t('delete', 'Delete')}
+            onClick={() => handleDeleteClick({ medicationDispense, medicationRequestBundle })}
+          />
+        )}
+      </OverflowMenu>
+    );
+  }
+};
+
+const DispenseTag: React.FC<{ medicationDispense: MedicationDispense }> = ({ medicationDispense }) => {
+  const { t } = useTranslation();
+
+  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;
+  }
+};
+
+export default HistoryAndComments;

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

@@ -0,0 +1,54 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.historyAndCommentsContainer {
+  max-width: 80%;
+
+  form {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+  }
+
+  form input {
+    vertical-align: middle;
+    margin: 0 0.625rem 0 0;
+    padding: 0.625rem;
+    border: 1px solid #8d8d8d !important;
+    background-color: white;
+  }
+  form button {
+    width: 90px;
+    height: 1.25rem;
+    min-height: layout.$spacing-08 !important;
+  }
+
+  form :global(.cds--btn--ghost) {
+    width: 8rem !important;
+  }
+
+  .medicationEventActionMenu {
+    float: right;
+  }
+}
+
+.menuitem {
+  max-width: none;
+}
+
+.historyHeader {
+  padding-top: layout.$spacing-03;
+  padding-bottom: layout.$spacing-03;
+  font-size: 0.9rem;
+}
+
+.error {
+  color: $danger;
+}
+
+.emptyState {
+  @include type.type-style('body-01');
+  color: $text-02;
+  margin: layout.$spacing-05 0;
+}

package/src/index.ts

@@ -0,0 +1,57 @@
+import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import CloseActionButton from './components/prescription-actions/close-action-button.component';
+import DispenseActionButton from './components/prescription-actions/dispense-action-button.component';
+import DispensingComponent from './dispensing.component';
+import DispensingDashboardComponent from './dashboard/dispensing-dashboard.component';
+import DispensingLinkComponent from './dispensing-link.component';
+import DispensingLinkHomepageComponent from './dashboard/dispensing-dashboard-link.component';
+import PauseActionButton from './components/prescription-actions/pause-action-button.component';
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+const moduleName = '@openmrs/esm-dispensing-app';
+
+const options = {
+  featureName: 'dispensing',
+  moduleName,
+};
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}
+
+export const dispensing = getSyncLifecycle(DispensingComponent, options);
+
+export const dispensingLink = getSyncLifecycle(DispensingLinkComponent, options);
+
+export const dispensingDashboard = getSyncLifecycle(DispensingDashboardComponent, options);
+
+export const dispensingDashboardLink = getSyncLifecycle(DispensingLinkHomepageComponent, options);
+
+// Prescription action buttons
+export const closeActionButton = getSyncLifecycle(CloseActionButton, options);
+export const dispenseActionButton = getSyncLifecycle(DispenseActionButton, options);
+export const pauseActionButton = getSyncLifecycle(PauseActionButton, options);
+
+// Dispensing workspace
+// t('closePrescription', 'Close prescription')
+export const closeDispenseWorkspace = getAsyncLifecycle(() => import('./forms/close-dispense-form.workspace'), options);
+// t('dispensePrescription', 'Dispense prescription')
+export const dispenseWorkspace = getAsyncLifecycle(() => import('./forms/dispense-form.workspace'), options);
+// t('pausePrescription', 'Pause prescription')
+export const pauseDispenseWorkspace = getAsyncLifecycle(() => import('./forms/pause-dispense-form.workspace'), options);
+
+export const printPrescriptionPreviewModal = getAsyncLifecycle(
+  () => import('./print-prescription/prescription-print-preview.modal'),
+  options,
+);
+export const deleteConfirmModal = getAsyncLifecycle(() => import('./history/delete-confirm.modal'), options);
+
+export const patientDiagnoses = getAsyncLifecycle(() => import('./diagnoses/diagnoses.component'), options);
+export const patientConditions = getAsyncLifecycle(() => import('./conditions/conditions.component'), options);
+
+export const onPrescriptionFilledModal = getAsyncLifecycle(
+  () => import('./fill-prescription/on-prescription-filled.modal'),
+  options,
+);

package/src/location/location.resource.test.tsx

@@ -0,0 +1,108 @@
+import useSWR from 'swr';
+import { renderHook } from '@testing-library/react';
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { useLocations } from './location.resource';
+import { type PharmacyConfig } from '../config-schema';
+
+jest.mocked(openmrsFetch);
+jest.mock('swr');
+
+const pharmacyConfig: PharmacyConfig = {
+  appName: '',
+  actionButtons: {
+    pauseButton: {
+      enabled: true,
+    },
+    closeButton: {
+      enabled: true,
+    },
+  },
+  dispenseBehavior: {
+    allowModifyingPrescription: false,
+    restrictTotalQuantityDispensed: false,
+  },
+  dispenserProviderRoles: [],
+  locationBehavior: {
+    locationColumn: { enabled: false },
+    locationFilter: {
+      enabled: false,
+      tag: 'Login Location',
+      associatedPharmacyLocationAttribute: 'Associated Pharmacy Location',
+    },
+  },
+  refreshInterval: 10000,
+  medicationRequestExpirationPeriodInDays: 0,
+  valueSets: {
+    reasonForPause: { uuid: '' },
+    reasonForClose: { uuid: '' },
+    substitutionReason: { uuid: '' },
+    substitutionType: { uuid: '' },
+  },
+  enableStockDispense: false,
+  completeOrderWithThisDispense: false,
+  validateBatch: false,
+  leftNavMode: 'collapsed',
+  customTabs: [],
+};
+
+describe('Location Resource tests', () => {
+  test('useLoginLocations should call proper endpoint via SWR', () => {
+    // @ts-ignore
+    useSWR.mockImplementation(() => ({
+      data: { data: 'mockedLoginLocations' },
+    }));
+
+    renderHook(() => useLocations(pharmacyConfig));
+    expect(useSWR).toHaveBeenCalledWith(
+      '/ws/rest/v1/location?tag=Login%20Location&v=custom:(uuid,name,attributes:(attributeType:(name),value:(uuid))',
+      openmrsFetch,
+    );
+  });
+  test('useLoginLocations should parse into Login Locations Array', () => {
+    // @ts-ignore
+    const queryResultsBundle = {
+      results: [
+        {
+          uuid: '2bcb9215-8cd6-11eb-b7be-0242ac110002',
+          name: 'KGH Triage',
+          attributes: [],
+        },
+        {
+          uuid: '5981f962-6eec-453d-89ce-2f9ac48d096f',
+          name: 'KGH MCH',
+          attributes: [
+            {
+              attributeType: {
+                name: 'Associated Pharmacy Location',
+              },
+              value: {
+                uuid: '84b9b680-786c-4388-9e7c-805614c13b5a',
+              },
+            },
+          ],
+        },
+        {
+          uuid: '7b959d2f-11f3-4611-b2e4-700200625d61',
+          name: 'KGH NCD',
+          attributes: [],
+        },
+      ],
+    };
+
+    // @ts-ignore
+    useSWR.mockImplementation(() => ({ data: { data: queryResultsBundle } }));
+    const { result } = renderHook(() => useLocations(pharmacyConfig));
+    const { locations } = result.current;
+    expect(locations.length).toBe(3);
+    // should be sorted by name alphabetically
+    expect(locations[0].id).toBe('5981f962-6eec-453d-89ce-2f9ac48d096f');
+    expect(locations[0].name).toBe('KGH MCH');
+    expect(locations[0].associatedPharmacyLocation).toBe('84b9b680-786c-4388-9e7c-805614c13b5a');
+    expect(locations[1].id).toBe('7b959d2f-11f3-4611-b2e4-700200625d61');
+    expect(locations[1].name).toBe('KGH NCD');
+    expect(locations[1].associatedPharmacyLocation).toBe(null);
+    expect(locations[2].id).toBe('2bcb9215-8cd6-11eb-b7be-0242ac110002');
+    expect(locations[2].name).toBe('KGH Triage');
+    expect(locations[2].associatedPharmacyLocation).toBe(null);
+  });
+});

package/src/location/location.resource.tsx

@@ -0,0 +1,32 @@
+import useSWR from 'swr';
+import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type SimpleLocation } from '../types';
+import { type PharmacyConfig } from '../config-schema';
+import { useMemo } from 'react';
+
+export function useLocations(config: PharmacyConfig) {
+  const { data, error } = useSWR<FetchResponse, Error>(
+    `${restBaseUrl}/location?tag=${encodeURIComponent(config.locationBehavior.locationFilter.tag)}&v=custom:(uuid,name,attributes:(attributeType:(name),value:(uuid))`,
+    openmrsFetch,
+  );
+
+  // parse down to a simple representation of locations
+  const locations: Array<SimpleLocation> = useMemo(() => {
+    return data?.data?.results
+      ?.map((e) => ({
+        id: e.uuid,
+        name: e.name,
+        associatedPharmacyLocation:
+          e.attributes?.find(
+            (a) => a.attributeType.name === config.locationBehavior.locationFilter.associatedPharmacyLocationAttribute,
+          )?.value?.uuid ?? null,
+      }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+  }, [data?.data?.results, config]);
+
+  return {
+    locations,
+    error,
+    isLoading: !locations && !error,
+  };
+}