Merge pull request #2 from PIH/UHM-8241

(feat) UHM-8241 Create O2 pregnancy / infant dashboard extension for …

packages/esm-commons-app/src/index.ts

@@ -27,4 +27,9 @@ export const o2VisitSummaryWorkspace = getAsyncLifecycle(
   options,
 );
 
+export const o2PregnancyInfantDashboard = getAsyncLifecycle(
+  () => import('./ward-app/o2-pregnancy-infant-dashboard.extension'),
+  options,
+);
+
 export function startupApp() {}

packages/esm-commons-app/src/routes.json

@@ -7,6 +7,11 @@
       "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"
     }
   ],
   "workspaces": [

packages/esm-commons-app/src/ward-app/o2-pregnancy-infant-dashboard.extension.tsx

@@ -0,0 +1,56 @@
+import { useAppContext } from '@openmrs/esm-framework';
+import React, { useCallback, useRef } from 'react';
+import styles from './o2-pregnancy-infant-dashboard.scss';
+import { type MaternalWardViewContext } from './types';
+
+/**
+ * Extension to display either the O2 pregnancy program or infant program dashboard,
+ * depending on whether patient is mother or infant.
+ */
+const O2PregnancyInfantProgramDashboard: React.FC<{ patientUuid: string }> = ({ patientUuid }) => {
+  const iframeRef = useRef<HTMLIFrameElement>();
+
+  const { motherChildRelationships } = useAppContext<MaternalWardViewContext>('maternal-ward-view-context') ?? {};
+  const isInfant = motherChildRelationships?.motherByChildUuid?.has(patientUuid);
+
+  const infantProgramUuid = 'dc1b588a-9b94-45e4-8346-71b7c9a24845';
+  const pregnancyProgramUuid = '6a5713c2-3fd5-46e7-8f25-36a0f7871e12';
+  const dashboardUuid = isInfant ? infantProgramUuid : pregnancyProgramUuid;
+
+  // hide the headers, breadcrumbs and various sections of the dashboards
+  const onLoad = useCallback(() => {
+    const dashboard = iframeRef.current.contentDocument;
+    const elementsToHide = [
+      'header',
+      '.patient-header',
+      '#breadcrumbs',
+      '.action-section',
+      '.visits-section',
+      '.pregnancy\\.dashboard\\.ancInitialEncounters',
+      '.pregnancy\\.dashboard\\.ancFollowupEncounters',
+      '.patient-location',
+      '.pregnancy\\.dashboard\\.currentEnrollment',
+      '.infant\\.dashboard\\.newbornAssesmentEncounters',
+      '.infant\\.dashboard\\.newbornDailyProgressEncounters',
+      '.infant\\.dashboard\\.currentEnrollment',
+      '.program-history',
+    ];
+
+    const styleTag = dashboard.createElement('style');
+    styleTag.innerHTML = elementsToHide.map((e) => `${e} {display: none !important;}`).join('\n');
+    dashboard.head.appendChild(styleTag);
+  }, []);
+
+  if (patientUuid) {
+    const src = `${window.openmrsBase}/coreapps/clinicianfacing/patient.page?patientId=${patientUuid}&dashboard=${dashboardUuid}`;
+    return (
+      <div className={styles.iframeWrapper} key={patientUuid}>
+        <iframe ref={iframeRef} src={src} onLoad={onLoad} className={styles.o2Iframe} />
+      </div>
+    );
+  } else {
+    return;
+  }
+};
+
+export default O2PregnancyInfantProgramDashboard;

packages/esm-commons-app/src/ward-app/o2-pregnancy-infant-dashboard.scss

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

packages/esm-commons-app/src/ward-app/o2-visit-summary-action-button.extension.tsx

@@ -1,4 +1,4 @@
-import { ActionMenuButton, launchWorkspace, UserAvatarIcon } from '@openmrs/esm-framework';
+import { ActionMenuButton, CalendarHeatMapIcon, launchWorkspace } from '@openmrs/esm-framework';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import type { WardPatientWorkspaceProps } from './types';
@@ -8,7 +8,7 @@ export default function WardPatientActionButton() {
 
   return (
     <ActionMenuButton
-      getIcon={(props) => <UserAvatarIcon {...props} />}
+      getIcon={(props) => <CalendarHeatMapIcon {...props} />}
       label={t('visitSummary', 'Visit summary')}
       iconDescription={t('patientVisitSummary', 'Patient visit summary')}
       handler={() => launchWorkspace<WardPatientWorkspaceProps>('o2-visit-summary-workspace')}

packages/esm-commons-app/src/ward-app/types.ts

@@ -1,11 +1,28 @@
 import type { DefaultWorkspaceProps, Patient, Visit } from '@openmrs/esm-framework';
 
-// a stripped down version of the same type defined in esm-ward-app
+// stripped down versions of the same types defined in esm-ward-app
+
 export type WardPatient = {
   patient: Patient;
   visit: Visit;
+  // other fields not typed
 };
 
 export interface WardPatientWorkspaceProps extends DefaultWorkspaceProps {
   wardPatient: WardPatient;
 }
+
+export interface PatientAndAdmission {
+  patient: Patient;
+  // other fields not typed
+}
+
+export interface MotherChildRelationships {
+  motherByChildUuid: Map<string, PatientAndAdmission>;
+  childrenByMotherUuid: Map<string, PatientAndAdmission[]>;
+  isLoading: boolean;
+}
+
+export interface MaternalWardViewContext {
+  motherChildRelationships: MotherChildRelationships;
+}