@pih/esm-commons-app 2.1.1-pre.9 → 2.1.1-pre.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pih/esm-commons-app",
-  "version": "2.1.1-pre.9",
+  "version": "2.1.1-pre.93",
   "description": "An app to define extensions to be slotted into other apps that are not PIH specific.",
   "browser": "dist/pih-esm-commons-app.js",
   "main": "src/index.ts",
@@ -18,7 +18,7 @@
     "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
     "coverage": "yarn test --coverage",
     "typescript": "tsc",
-    "extract-translations": "i18next 'src/**/*.component.tsx'"
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.extension.tsx' 'src/**/*modal.tsx' 'src/**/*.workspace.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"
@@ -38,18 +38,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.0",
-    "@carbon/react": "~1.37.0",
     "moment": "^2.30.1",
     "react-dates": "^21.8.0",
     "webpack": "^5.74.0"
   },
   "peerDependencies": {
     "@openmrs/esm-framework": "5.x",
-    "i18next": "^19.0.0",
     "react": "18.x",
-    "react-i18next": "11.x",
-    "react-router-dom": "^6.x",
-    "swr": "2.x"
+    "react-i18next": "16.x"
   },
   "devDependencies": {
     "webpack": "^5.74.0"

package/src/declarations.d.ts

@@ -0,0 +1,2 @@
+declare module '*.scss';
+declare module '*.module.scss';

package/src/hooks/useEncounters.ts

@@ -0,0 +1,22 @@
+import { restBaseUrl, useOpenmrsFetchAll } from '@openmrs/esm-framework';
+import { type Encounter } from '../service-queues-app/types';
+
+interface EncounterSearchParams {
+  patient: string;
+  visit?: string;
+  encounterType?: string;
+}
+
+export function useEncounters(params: EncounterSearchParams) {
+  const url = `${restBaseUrl}/encounter?`;
+  const searchParams = new URLSearchParams();
+  searchParams.append('patient', params.patient);
+  if (params.visit) {
+    searchParams.append('visit', params.visit);
+  }
+  if (params.encounterType) {
+    searchParams.append('encounterType', params.encounterType);
+  }
+
+  return useOpenmrsFetchAll<Encounter>(url + searchParams.toString());
+}

package/src/hooks/useProgramEnrollment.ts

@@ -0,0 +1,19 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+const customRepresentation = `custom:(uuid,display,program,dateEnrolled,dateCompleted,location:(uuid,display))`;
+
+export interface PatientProgram {
+  uuid: string;
+  program: {
+    uuid: string;
+  };
+}
+
+export const useActivePatientEnrollment = (patientUuid: string) => {
+  const result = useSWR<{ data: { results: Array<PatientProgram> } }>(
+    patientUuid ? `${restBaseUrl}/programenrollment?patient=${patientUuid}&v=${customRepresentation}` : null,
+    openmrsFetch,
+  );
+
+  return result;
+};

package/src/index.ts

@@ -8,23 +8,42 @@
 import { getAsyncLifecycle } from '@openmrs/esm-framework';
 
 const moduleName = '@pih/esm-commons-app';
-const options = {
-  featureName: 'commons',
-  moduleName,
-};
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
-// export const root = getAsyncLifecycle(() => import('./root.component'), options);
-
 export const o2VisitSummaryWorkspaceSideRailIcon = getAsyncLifecycle(
-  () => import('./ward-app/o2-visit-summary-action-button.extension'),
-  options,
+  () => import('./ward-app/o2-visit-summary-action-button.component'),
+  { featureName: 'o2VisitSummaryWorkspaceSideRailIcon', moduleName },
 );
 
 export const o2VisitSummaryWorkspace = getAsyncLifecycle(
   () => import('./ward-app/o2-visit-summary-workspace.component'),
-  options,
+  { featureName: 'o2VisitSummaryWorkspace', moduleName },
+);
+
+export const o2VitalSignsWorkspaceSideRailIcon = getAsyncLifecycle(
+  () => import('./ward-app/o2-vital-signs-action-button.component'),
+  { featureName: 'o2VitalSignsWorkspaceSideRailIcon', moduleName },
+);
+
+export const o2VitalSignsWorkspace = getAsyncLifecycle(() => import('./ward-app/o2-vital-signs-workspace.component'), {
+  featureName: 'o2VitalSignsWorkspace',
+  moduleName,
+});
+
+export const o2PregnancyInfantDashboard = getAsyncLifecycle(
+  () => import('./ward-app/o2-pregnancy-infant-dashboard.extension'),
+  { featureName: 'o2PregnancyInfantDashboard', moduleName },
+);
+
+export const maternalTriageFormWorkspace = getAsyncLifecycle(
+  () => import('./service-queues-app/maternal-triage-form.workspace'),
+  { featureName: 'maternalTriageFormWorkspace', moduleName },
+);
+
+export const triageWaitingQueueActions = getAsyncLifecycle(
+  () => import('./service-queues-app/maternal-triage-queue-actions.extension'),
+  { featureName: 'triageWaitingQueueActions', moduleName },
 );
 
 export function startupApp() {}

package/src/routes.json

@@ -1,23 +1,72 @@
 {
   "$schema": "https://json.openmrs.org/routes.schema.json",
   "pages": [
+    {
+      "component": "root",
+      "route": "appointments"
+    },
+    {
+      "component": "root",
+      "route": "service-queues"
+    },
+    {
+      "component": "root",
+      "route": "dispensing2"
+    },
+    {
+      "component": "root",
+      "route": "ward"
+    }
   ],
   "extensions": [
     {
-      "name": "o2-visit-summary-workspace-siderail-button",
-      "component": "o2VisitSummaryWorkspaceSideRailIcon",
-      "slot": "action-menu-ward-patient-items-slot"
+      "name": "o2-pregnancy-infant-dashboard",
+      "component": "o2PregnancyInfantDashboard",
+      "slot": "ward-patient-workspace-content-slot"
+    },
+    {
+      "name": "triage-waiting-queue-actions",
+      "component": "triageWaitingQueueActions",
+      "slot": "queue-table-triage-waiting-queue-actions-slot"
     }
   ],
-  "workspaces": [
+  "workspaces2": [
     {
       "name": "o2-visit-summary-workspace",
       "component": "o2VisitSummaryWorkspace",
-      "title": "visitSummary",
-      "type": "o2-visit-summary",
-      "sidebarFamily": "ward-patient",
-      "hasOwnSidebar": true,
-      "width": "extra-wide"
+      "window": "o2-visit-summary-window"
+    },
+    {
+      "name": "o2-vital-signs-workspace",
+      "component": "o2VitalSignsWorkspace",
+      "window": "o2-vital-signs-window"
+    },
+    {
+      "name": "maternal-triage-form-workspace",
+      "component": "maternalTriageFormWorkspace",
+      "window": "maternal-triage-form-window"
+    }
+  ],
+  "workspaceWindows2": [
+    {
+      "name": "o2-visit-summary-window",
+      "icon": "o2VisitSummaryWorkspaceSideRailIcon",
+      "group": "ward-patient",
+      "width": "extra-wide",
+      "canMaximize": true
+    },
+    {
+      "name": "o2-vital-signs-window",
+      "icon": "o2VitalSignsWorkspaceSideRailIcon",
+      "group": "ward-patient",
+      "width": "extra-wide",
+      "canMaximize": true
+    },
+    {
+      "name": "maternal-triage-form-window",
+      "group": "service-queues",
+      "width": "extra-wide",
+      "canMaximize": true
     }
   ]
 }

package/src/service-queues-app/maternal-triage-form.workspace.tsx

@@ -0,0 +1,111 @@
+import { type Patient, showSnackbar, Workspace2, type Workspace2DefinitionProps } from '@openmrs/esm-framework';
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import O2IFrame from '../ward-app/o2-iframe.component';
+import { updateQueueEntry, useMutateQueueEntries } from './maternal-triage-queue-actions.resource';
+import { type QueueEntry } from './types';
+import { useEncounters } from '../hooks/useEncounters';
+import { Loading } from '@carbon/react';
+import { InlineNotification } from '@carbon/react';
+
+interface MaternalTriageFormWorkspaceProps {
+  queueEntry: QueueEntry;
+  patient: Patient;
+}
+
+const MATERNAL_TRIAGE_FORM_ENCOUNTER_TYPE = '41911448-71a1-43d7-bba8-dc86339850da';
+
+/**
+ * Workspace to display the Maternal Triage HTML Form, rendered in a iframe
+ */
+const MaternalTriageFormWorkspace: React.FC<Workspace2DefinitionProps<MaternalTriageFormWorkspaceProps>> = ({
+  workspaceProps: { queueEntry, patient },
+  closeWorkspace,
+}) => {
+  const { t } = useTranslation();
+  const { mutateQueueEntries } = useMutateQueueEntries();
+  const {
+    data: filledOutTriageForms,
+    isLoading,
+    error,
+  } = useEncounters({
+    patient: patient.uuid,
+    visit: queueEntry.visit.uuid,
+    encounterType: MATERNAL_TRIAGE_FORM_ENCOUNTER_TYPE,
+  });
+
+  useEffect(() => {
+    const onMessage = async (event: MessageEvent) => {
+      if (event.data == 'triageFormSubmitted') {
+        const endQueueEntry = () => {
+          return updateQueueEntry(queueEntry.uuid, {
+            endedAt: new Date().toISOString(),
+          });
+        };
+
+        await endQueueEntry();
+        await mutateQueueEntries();
+        closeWorkspace({ discardUnsavedChanges: true });
+        showSnackbar({
+          isLowContrast: true,
+          kind: 'success',
+          title: t('triageFormSubmitted', 'Triage form successfully submitted for {{patient}}.', {
+            patient: patient.person.display,
+          }),
+        });
+      }
+    };
+
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, []);
+
+  const patientUuid = patient.uuid;
+  const visitUuid = queueEntry.visit.uuid;
+
+  const elementsToHide = [
+    'header',
+    '#breadcrumbs',
+
+    // prevent O2 success toast from showing; After submitting form for a patient,
+    // the success toast for that patient shows when opening form for another patient
+    '.toast-type-success',
+    // UHM-8822: remove Cancel button from the triage form
+    '.cancel',
+  ];
+
+  const customJavaScript = `
+    htmlForm.setSuccessFunction(() => window.top.postMessage('triageFormSubmitted'))
+  `;
+
+  if (isLoading) {
+    return <Loading withOverlay={false} small />;
+  } else if (error) {
+    return (
+      <InlineNotification
+        kind="error"
+        lowContrast={true}
+        hideCloseButton={true}
+        title={t('errorLoadingPatientForm', 'Error loading patient form')}
+      />
+    );
+  } else {
+    // If patient does not have triage form filled out already, we load a new one,
+    // else, we load the last filled out form to edit
+    const src =
+      filledOutTriageForms.length == 0
+        ? `${window.openmrsBase}/htmlformentryui/htmlform/enterHtmlFormWithStandardUi.page?patientId=${patientUuid}&visitId=${visitUuid}&definitionUiResource=file:configuration/pih/htmlforms/triage.xml&returnUrl=%2Fopenmrs%2Fcoreapps%2Fclinicianfacing%2Fpatient.page%3FpatientId%3D${patientUuid}%26`
+        : `${window.openmrsBase}/htmlformentryui/htmlform/editHtmlFormWithStandardUi.page?patientId=${patientUuid}&encounterId=${filledOutTriageForms[filledOutTriageForms.length - 1].uuid}`;
+
+    return (
+      <Workspace2
+        title={t('maternalTriageForm', 'Maternal triage form')}
+        hasUnsavedChanges={true} // assume there are unsaved changes to prevent accidental closure
+      >
+        <O2IFrame key={patientUuid} src={src} elementsToHide={elementsToHide} customJavaScript={customJavaScript} />
+      </Workspace2>
+    );
+  }
+};
+
+export default MaternalTriageFormWorkspace;

package/src/service-queues-app/maternal-triage-queue-actions.extension.tsx

@@ -0,0 +1,132 @@
+import { Button, OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import { isDesktop, launchWorkspace2, showModal, useConfig, useLayoutType } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './maternal-trial-queue-actions.scss';
+import { type QueueEntry } from './types';
+import { transitionQueueEntry, useMutateQueueEntries } from './maternal-triage-queue-actions.resource';
+
+// types taken from esm-service-queues-app
+interface QueueTableCellComponentProps {
+  queueEntry: QueueEntry;
+}
+
+interface ConfigObject {
+  concepts: {
+    defaultTransitionStatus: string;
+  };
+  // other fields not shown
+}
+
+/**
+ * This extension provides an extra "Triage" action, along with the other standard actions for
+ * queue entries in the queues table. The Triage action opens the maternal triage form, and also
+ * has the side effect of putting the patient's queue entry into the "in service" status, if they have
+ * not yet already
+ * @param param0
+ * @returns
+ */
+const MaternalTriageQueueActions: React.FC<QueueTableCellComponentProps> = ({ queueEntry }) => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+
+  const { mutateQueueEntries } = useMutateQueueEntries();
+  const { concepts } = useConfig<ConfigObject>({ externalModuleName: '@openmrs/esm-service-queues-app' });
+  const inServiceStatus = concepts.defaultTransitionStatus;
+
+  const { patient } = queueEntry;
+
+  return (
+    <div className={styles.actionsCell}>
+      <Button
+        kind="ghost"
+        aria-label={t('triage', 'Triage')}
+        onClick={async () => {
+          if (queueEntry.status.uuid !== inServiceStatus) {
+            const res = await transitionQueueEntry({
+              queueEntryToTransition: queueEntry.uuid,
+              newStatus: inServiceStatus,
+            });
+            mutateQueueEntries();
+            const updatedQueueEntry = { ...res.data, visit: queueEntry.visit };
+            launchWorkspace2('maternal-triage-form-workspace', { queueEntry: updatedQueueEntry, patient });
+          } else {
+            launchWorkspace2('maternal-triage-form-workspace', { queueEntry, patient });
+          }
+        }}
+        size={isDesktop(layout) ? 'sm' : 'lg'}>
+        {t('triage', 'Triage')}
+      </Button>
+
+      <OverflowMenu aria-label="Actions menu" size={isDesktop(layout) ? 'sm' : 'lg'} align="left" flipped>
+        <OverflowMenuItem
+          className={styles.menuItem}
+          aria-label={t('transition', 'Transition')}
+          hasDivider
+          onClick={() => {
+            const dispose = showModal('transition-queue-entry-modal', {
+              closeModal: () => dispose(),
+              queueEntry,
+            });
+          }}
+          itemText={t('transition', 'Transition')}
+        />
+        <OverflowMenuItem
+          className={styles.menuItem}
+          aria-label={t('edit', 'Edit')}
+          hasDivider
+          onClick={() => {
+            const dispose = showModal('edit-queue-entry-modal', {
+              closeModal: () => dispose(),
+              queueEntry,
+            });
+          }}
+          itemText={t('edit', 'Edit')}
+        />
+        <OverflowMenuItem
+          className={styles.menuItem}
+          aria-label={t('removePatient', 'Remove patient')}
+          hasDivider
+          onClick={() => {
+            const dispose = showModal('remove-queue-entry-modal', {
+              closeModal: () => dispose(),
+              queueEntry,
+            });
+          }}
+          itemText={t('removePatient', 'Remove patient')}
+        />
+        {queueEntry.previousQueueEntry == null ? (
+          <OverflowMenuItem
+            className={styles.menuItem}
+            aria-label={t('delete', 'Delete')}
+            hasDivider
+            isDelete
+            onClick={() => {
+              const dispose = showModal('delete-queue-entry-modal', {
+                closeModal: () => dispose(),
+                queueEntry,
+              });
+            }}
+            itemText={t('delete', 'Delete')}
+          />
+        ) : (
+          <OverflowMenuItem
+            className={styles.menuItem}
+            aria-label={t('undoTransition', 'Undo transition')}
+            hasDivider
+            isDelete
+            onClick={() => {
+              const dispose = showModal('undo-transition-queue-entry-modal', {
+                closeModal: () => dispose(),
+                queueEntry,
+              });
+            }}
+            itemText={t('undoTransition', 'Undo transition')}
+          />
+        )}
+      </OverflowMenu>
+    </div>
+  );
+};
+
+export default MaternalTriageQueueActions;

package/src/service-queues-app/maternal-triage-queue-actions.resource.ts

@@ -0,0 +1,80 @@
+import { type Concept, type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { useSWRConfig } from 'swr';
+import { type QueueEntry } from './types';
+
+// Hooks here copied from esm-service-queues-app
+
+export function useMutateQueueEntries() {
+  const { mutate } = useSWRConfig();
+
+  return {
+    mutateQueueEntries: () => {
+      return mutate((key) => {
+        return (
+          typeof key === 'string' &&
+          (key.includes(`${restBaseUrl}/queue-entry`) || key.includes(`${restBaseUrl}/visit-queue-entry`))
+        );
+      }).then(() => {
+        window.dispatchEvent(new CustomEvent('queue-entry-updated'));
+      });
+    },
+  };
+}
+
+interface TransitionQueueEntryParams {
+  queueEntryToTransition: string;
+  transitionDate?: string;
+  newQueue?: string;
+  newStatus?: string;
+  newPriority?: string;
+  newPriorityComment?: string;
+}
+
+/**
+ * A transition is defined as an action that ends a current queue entry and immediately starts a new one
+ * with (slightly) different values. For now, this could be used to transition the queue entry's status,
+ * priority or queue. This allows us to keep a history of queue entries through a patient's visit.
+ * Note that there are some use cases (like RDE or data correction) where a transition is NOT appropriate.
+ * @param params
+ * @param abortController
+ * @returns
+ */
+export function transitionQueueEntry(
+  params: TransitionQueueEntryParams,
+  abortController?: AbortController,
+): Promise<FetchResponse<QueueEntry>> {
+  return openmrsFetch(`${restBaseUrl}/queue-entry/transition`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController?.signal,
+    body: params,
+  });
+}
+
+interface UpdateQueueEntryParams {
+  status?: Concept;
+  priority?: Concept;
+  priorityComment?: string;
+  sortWeight?: number;
+  startedAt?: string;
+  endedAt?: string;
+  loationWaitingFor?: Location;
+  providerWaitingFor?: Location;
+}
+
+export function updateQueueEntry(
+  queueEntryUuid: string,
+  params: UpdateQueueEntryParams,
+  abortController?: AbortController,
+) {
+  return openmrsFetch(`${restBaseUrl}/queue-entry/${queueEntryUuid}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController?.signal,
+    body: params,
+  });
+}

package/src/service-queues-app/maternal-trial-queue-actions.scss

@@ -0,0 +1,14 @@
+.actionCellContainer {
+  white-space: nowrap;
+}
+
+.menuItem {
+  max-width: none;
+}
+
+.actionsCell {
+  display: flex;
+  justify-content: flex-end;
+  height: 100%;
+  align-items: center;
+}

package/src/service-queues-app/types.ts

@@ -0,0 +1,58 @@
+import { type Concept, type OpenmrsResource, type Patient, type Visit } from '@openmrs/esm-framework';
+
+export interface Queue {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  location: Location;
+  service: Concept;
+  allowedPriorities: Array<Concept>;
+  allowedStatuses: Array<Concept>;
+}
+
+export interface QueueEntry {
+  uuid: string;
+  display: string;
+  endedAt: string;
+  locationWaitingFor: Location;
+  patient: Patient;
+  priority: Concept;
+  priorityComment: string | null;
+  providerWaitingFor: Provider;
+  queue: Queue;
+  startedAt: string;
+  status: Concept;
+  visit: Visit;
+  sortWeight: number;
+  queueComingFrom: Queue;
+  previousQueueEntry: QueueEntry;
+}
+
+export interface Provider extends OpenmrsResource {}
+
+export interface Encounter {
+  uuid: string;
+  encounterDateTime: string;
+  encounterProviders: Array<{
+    uuid: string;
+    display: string;
+    encounterRole: {
+      uuid: string;
+      display: string;
+    };
+    provider: {
+      uuid: string;
+      person: {
+        uuid: string;
+        display: string;
+      };
+    };
+  }>;
+  encounterType: {
+    uuid: string;
+    display: string;
+  };
+  obs: Array<OpenmrsResource>;
+  orders: Array<OpenmrsResource>;
+}