@pih/esm-commons-app 2.1.1-pre.10 → 2.1.1-pre.103

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,84 @@
+import { type Concept, type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { useSWRConfig } from 'swr';
+import { type QueueEntry } from './types';
+import { useCallback, useMemo } from 'react';
+
+// Hooks here copied from esm-service-queues-app
+
+export function useMutateQueueEntries() {
+  const { mutate, cache } = useSWRConfig();
+  const mutateQueueEntries = useCallback(() => {
+    const promises: Promise<unknown>[] = [];
+    for (const key of cache.keys()) {
+      if (key.includes(`${restBaseUrl}/queue-entry`) || key.includes(`${restBaseUrl}/visit-queue-entry`)) {
+        promises.push(mutate(key));
+      }
+    }
+    return Promise.all(promises);
+  }, [mutate, cache]);
+
+  return useMemo(
+    () => ({
+      mutateQueueEntries,
+    }),
+    [mutateQueueEntries],
+  );
+}
+
+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>;
+}

package/src/ward-app/o2-iframe.component.tsx

@@ -0,0 +1,86 @@
+import { ArrowLeft } from '@carbon/react/icons';
+
+import { IconButton, InlineLoading } from '@carbon/react';
+import React, { useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './o2-iframe.scss';
+
+interface O2IFrame {
+  src: string;
+  /**
+   * a list of css selectors defining elements to hide within the iframe
+   */
+  elementsToHide?: string[];
+
+  /**
+   * a list of css selectors defining elements to be made un-clickable within the iframe
+   */
+  elementsToDisable?: string[];
+
+  /**
+   * JavaScript code to inject into the iframe to run
+   */
+  customJavaScript?: string;
+}
+
+const O2IFrame: React.FC<O2IFrame> = ({ src, elementsToHide, elementsToDisable, customJavaScript = '' }) => {
+  const iframeRef = useRef<HTMLIFrameElement>();
+  const [isIframeLoading, setIsIframeLoading] = useState(true);
+  const [isGoingBack, setIsGoingBack] = useState(false);
+  const [iframeHistoryCount, setIframeHistoryCount] = useState(0);
+  const { t } = useTranslation();
+
+  const customCss = useMemo(() => {
+    const toHide = elementsToHide?.map((e) => `${e} {display: none !important;}`)?.join('\n') ?? '';
+    const toDisable =
+      elementsToDisable?.map((e) => `${e} {pointer-events: none; cursor: not-allowed;}`)?.join('\n') ?? '';
+
+    return `@media screen {
+        ${toHide}
+        ${toDisable} 
+      }`;
+  }, [elementsToHide, elementsToDisable]);
+
+  const onLoad = () => {
+    setIsIframeLoading(false);
+    if (!isGoingBack) {
+      setIframeHistoryCount(iframeHistoryCount + 1);
+    }
+    setIsGoingBack(false);
+    iframeRef.current.contentWindow.addEventListener('beforeunload', () => setIsIframeLoading(true));
+    const contentDocument = iframeRef.current.contentDocument;
+
+    const styleTag = contentDocument.createElement('style');
+    styleTag.innerHTML = customCss;
+    contentDocument.head.appendChild(styleTag);
+
+    const scriptTag = contentDocument.createElement('script');
+    scriptTag.innerHTML = customJavaScript;
+    contentDocument.body.appendChild(scriptTag);
+  };
+
+  const goBack = () => {
+    iframeRef.current.contentWindow.history.back();
+    setIframeHistoryCount(iframeHistoryCount - 1);
+    setIsIframeLoading(true);
+    setIsGoingBack(true);
+  };
+
+  return (
+    <div className={styles.iframeWrapper}>
+      <div className={styles.navigation}>
+        <IconButton
+          align="top-start"
+          label={t('back', 'Back')}
+          onClick={goBack}
+          disabled={isIframeLoading || iframeHistoryCount <= 1}>
+          <ArrowLeft />
+        </IconButton>
+        {isIframeLoading && <InlineLoading />}
+      </div>
+      <iframe ref={iframeRef} src={src} onLoad={onLoad} className={styles.o2Iframe} />
+    </div>
+  );
+};
+
+export default O2IFrame;

package/src/ward-app/o2-iframe.scss

@@ -0,0 +1,20 @@
+:global(div[data-extension-id='o2-pregnancy-infant-dashboard']) {
+  flex: 1;
+}
+
+.iframeWrapper {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.o2Iframe {
+  height: 100%;
+  width: 100%;
+}
+
+.navigation {
+  display: flex;
+  flex: 1;
+}

package/src/ward-app/o2-pregnancy-infant-dashboard.extension.tsx

@@ -0,0 +1,87 @@
+import { InlineLoading } from '@carbon/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useActivePatientEnrollment } from '../hooks/useProgramEnrollment';
+import O2IFrame from './o2-iframe.component';
+import styles from './o2-pregnancy-infant-dashboard.scss';
+
+/**
+ * Extension to display either the O2 pregnancy program or infant program dashboard,
+ * if the patient is enrolled in it.
+ */
+const O2PregnancyInfantProgramDashboard: React.FC<{ patientUuid: string }> = ({ patientUuid }) => {
+  const infantProgramUuid = 'dc1b588a-9b94-45e4-8346-71b7c9a24845';
+  const pregnancyProgramUuid = '6a5713c2-3fd5-46e7-8f25-36a0f7871e12';
+
+  const { data: programs, isLoading } = useActivePatientEnrollment(patientUuid);
+  const { t } = useTranslation();
+
+  const inInfantProgram = programs?.data?.results?.some((enrollment) => enrollment.program.uuid == infantProgramUuid);
+  const inPregnancyProgram = programs?.data?.results?.some(
+    (enrollment) => enrollment.program.uuid == pregnancyProgramUuid,
+  );
+
+  const elementsToHide = [
+    'header',
+    '.patient-header',
+    '#breadcrumbs',
+    '.action-section',
+    '.visits-section',
+    '.pregnancy\\.dashboard\\.ancInitialEncounters',
+    '.pregnancy\\.dashboard\\.ancFollowupEncounters',
+    '.pregnancy\\.dashboard\\.riskFactors a.right',
+    '.pregnancy\\.dashboard\\.temperature a.right',
+    '.pregnancy\\.dashboard\\.postpartumDailyProgressEncounters',
+    '.pregnancy\\.dashboard\\.laborAndDeliverySummaryEncounters',
+    '.pregnancy\\.dashboard\\.maternalAdmissionEncounters',
+    '.patient-location',
+    '.pregnancy\\.dashboard\\.currentEnrollment',
+    '.infant\\.dashboard\\.newbornAssesmentEncounters',
+    '.infant\\.dashboard\\.newbornDailyProgressEncounters',
+    '.infant\\.dashboard\\.currentEnrollment',
+    '.program-history',
+    '.allergies .cancel',
+  ];
+
+  const elementsToDisable = [
+    '.pregnancy\\.dashboard\\.riskFactors a',
+    '.pregnancy\\.dashboard\\.temperature a',
+    '.infant\\.dashboard\\.indicator a',
+  ];
+
+  if (isLoading) {
+    return <InlineLoading />;
+  } else if (inInfantProgram) {
+    const infantProgramUrl = `${window.openmrsBase}/coreapps/clinicianfacing/patient.page?patientId=${patientUuid}&dashboard=${infantProgramUuid}`;
+    return (
+      <>
+        <div className={styles.patientChartLinkContainer}>
+          <a href={infantProgramUrl}>{t('fullInfantDashboard', 'Full Infant Dashboard')}</a>
+        </div>
+        <O2IFrame key={patientUuid} {...{ src: infantProgramUrl, elementsToDisable, elementsToHide }} />
+      </>
+    );
+  } else if (inPregnancyProgram) {
+    const pregnancyProgramUrl = `${window.openmrsBase}/coreapps/clinicianfacing/patient.page?patientId=${patientUuid}&dashboard=${pregnancyProgramUuid}`;
+    return (
+      <>
+        <div className={styles.patientChartLinkContainer}>
+          <a href={pregnancyProgramUrl}>{t('fullPregnancyDashboard', 'Full Pregnancy Dashboard')}</a>
+        </div>
+        <O2IFrame key={patientUuid} {...{ src: pregnancyProgramUrl, elementsToDisable, elementsToHide }} />
+      </>
+    );
+  } else {
+    const patientChartUrl = `${window.openmrsBase}/coreapps/clinicianfacing/patient.page?patientId=${patientUuid}`;
+    return (
+      <>
+        <div className={styles.patientChartLinkContainer}>
+          <a href={patientChartUrl}>{t('fullPatientChart', 'Full Patient Chart')}</a>
+        </div>
+        <O2IFrame key={patientUuid} {...{ src: patientChartUrl, elementsToDisable, elementsToHide }} />
+      </>
+    );
+  }
+};
+
+export default O2PregnancyInfantProgramDashboard;

package/src/ward-app/o2-pregnancy-infant-dashboard.scss

@@ -0,0 +1,5 @@
+@use '@carbon/layout';
+
+.patientChartLinkContainer {
+  padding: layout.$spacing-05;
+}

package/src/ward-app/o2-visit-summary-action-button.component.tsx

@@ -0,0 +1,17 @@
+import { ActionMenuButton2, CalendarHeatMapIcon } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+export default function WardPatientActionButton() {
+  const { t } = useTranslation();
+
+  return (
+    <ActionMenuButton2
+      icon={(props) => <CalendarHeatMapIcon {...props} />}
+      label={t('visitSummary', 'Visit summary')}
+      workspaceToLaunch={{
+        workspaceName: 'o2-visit-summary-workspace',
+      }}
+    />
+  );
+}