@bathiran212/esm-patient-chart-app 7.0.0

package/src/patient-chart/patient-chart.resources.ts

@@ -0,0 +1,231 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import useSWR from 'swr';
+import {
+  launchWorkspaceGroup2,
+  openmrsFetch,
+  restBaseUrl,
+  showSnackbar,
+  usePatient,
+  useVisit,
+  type Visit,
+} from '@openmrs/esm-framework';
+import { type PatientWorkspaceGroupProps, usePatientChartStore } from '@openmrs/esm-patient-common-lib';
+
+const defaultVisitCustomRepresentation =
+  'custom:(uuid,display,voided,indication,startDatetime,stopDatetime,' +
+  'encounters:(uuid,display,encounterDatetime,' +
+  'form:(uuid,name),location:ref,' +
+  'encounterType:ref,' +
+  'encounterProviders:(uuid,display,' +
+  'provider:(uuid,display))),' +
+  'patient:(uuid,display),' +
+  'visitType:(uuid,name,display),' +
+  'attributes:(uuid,display,attributeType:(name,datatypeClassname,uuid),value),' +
+  'location:(uuid,name,display))';
+
+type WorkspaceGroupLaunchKey = {
+  patientUuid: string | null;
+  visitContextUuid: string | null;
+};
+
+// The workspace group is current only when it was launched for this patient and visit context.
+function getWorkspaceGroupLaunchKey(groupProps: PatientWorkspaceGroupProps | null): WorkspaceGroupLaunchKey {
+  return {
+    patientUuid: groupProps?.patientUuid ?? null,
+    visitContextUuid: groupProps?.visitContext?.uuid ?? null,
+  };
+}
+
+function workspaceGroupLaunchKeysEqual(a: WorkspaceGroupLaunchKey | null, b: WorkspaceGroupLaunchKey | null) {
+  return a?.patientUuid === b?.patientUuid && a?.visitContextUuid === b?.visitContextUuid;
+}
+
+export function useVisitByUuid(visitUuid: string | null, representation: string = defaultVisitCustomRepresentation) {
+  const url = `${restBaseUrl}/visit/${visitUuid}?v=${representation}`;
+  const { data, ...rest } = useSWR<{ data: Visit }>(visitUuid ? url : null, openmrsFetch);
+  return { visit: data?.data, ...rest };
+}
+
+/**
+ * This hook manages fetching of the patient and the visitContext
+ * when entering the patient chart, and the associated updated to patient chart store.
+ *
+ * The patient chart store sets the patient when we enter the patient chart
+ * and unsets the patient when we leave. (This gives extensions and workspaces a way
+ * to check whether they are rendered within the patient chart app.)
+ * Note: We do not unset visitContext when leaving the chart, so it persists across
+ * in‑app navigation. On a full page reload, visitContext is rehydrated by refetching
+ * (via useVisit/useVisitByUuId) rather than restored from storage.
+ * When we enter the chart, we want to update the visit context as follows:
+ * does the the stored visitContext exist and belong to the patient?
+ * 1. If so, the visitContext should be valid but possibly stale; fetch the visit again
+ *    and update the context
+ * 2. If not, fetch the active visit of the patient, If it exists, set it as the
+ *    visitContext; otherwise, clear it.
+ * @param patientUuid
+ * @returns
+ */
+export function usePatientChartPatientAndVisit(patientUuid: string) {
+  const { t } = useTranslation();
+  const { isLoading: isLoadingPatient, patient } = usePatient(patientUuid);
+  const {
+    patientUuid: storePatientUuid,
+    setPatient,
+    visitContext,
+    mutateVisitContext,
+    setVisitContext,
+  } = usePatientChartStore(patientUuid);
+
+  const isVisitContextValid = visitContext?.patient.uuid === patientUuid;
+  const {
+    visit: newVisitContext,
+    mutate: newMutateVisitContext,
+    isValidating: isValidatingVisitContext,
+  } = useVisitByUuid(isVisitContextValid ? visitContext.uuid : null);
+  const {
+    activeVisit,
+    isValidating: isValidatingActiveVisit,
+    mutate: mutateActiveVisit,
+  } = useVisit(isVisitContextValid ? null : patientUuid);
+
+  const launchedWorkspaceGroupKey = useRef<WorkspaceGroupLaunchKey | null>(null);
+  const latestWorkspaceGroupProps = useRef<PatientWorkspaceGroupProps | null>(null);
+  const isWorkspaceGroupLaunchPending = useRef(false);
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  const launchLatestWorkspaceGroup = useCallback(async () => {
+    if (isWorkspaceGroupLaunchPending.current) {
+      return;
+    }
+
+    isWorkspaceGroupLaunchPending.current = true;
+
+    try {
+      let needsLaunch = true;
+      while (needsLaunch) {
+        const groupProps = latestWorkspaceGroupProps.current;
+        const launchKey = getWorkspaceGroupLaunchKey(groupProps);
+
+        if (workspaceGroupLaunchKeysEqual(launchKey, launchedWorkspaceGroupKey.current)) {
+          needsLaunch = false;
+          continue;
+        }
+
+        if (!isMounted.current) {
+          return;
+        }
+
+        const launched = await launchWorkspaceGroup2('patient-chart', groupProps);
+
+        if (!isMounted.current) {
+          return;
+        }
+
+        // launchWorkspaceGroup2 returns false when the user keeps the current workspace group open.
+        if (!launched) {
+          needsLaunch = false;
+          continue;
+        }
+
+        launchedWorkspaceGroupKey.current = launchKey;
+
+        const latestLaunchKey = getWorkspaceGroupLaunchKey(latestWorkspaceGroupProps.current);
+        if (workspaceGroupLaunchKeysEqual(latestLaunchKey, launchedWorkspaceGroupKey.current)) {
+          needsLaunch = false;
+        }
+      }
+    } finally {
+      isWorkspaceGroupLaunchPending.current = false;
+    }
+  }, []);
+
+  useEffect(() => {
+    const initializeWorkspaceGroup = async () => {
+      if (!isValidatingVisitContext && !isValidatingActiveVisit && patient) {
+        let groupProps: PatientWorkspaceGroupProps = null;
+        if (activeVisit) {
+          groupProps = {
+            patientUuid: patient.id,
+            patient,
+            visitContext: activeVisit,
+            mutateVisitContext: mutateActiveVisit,
+          };
+        } else if (newVisitContext) {
+          groupProps = {
+            patientUuid: patient.id,
+            patient,
+            visitContext: newVisitContext,
+            mutateVisitContext: newMutateVisitContext,
+          };
+        } else {
+          groupProps = {
+            patientUuid: patient.id,
+            patient,
+            visitContext: null,
+            mutateVisitContext: null,
+          };
+        }
+
+        setVisitContext(groupProps.visitContext, groupProps.mutateVisitContext);
+
+        latestWorkspaceGroupProps.current = groupProps;
+        await launchLatestWorkspaceGroup();
+      }
+    };
+
+    initializeWorkspaceGroup().catch((error) => {
+      showSnackbar({
+        title: t('errorLaunchingWorkspaceGroup', 'Error launching workspace group'),
+        subtitle: error.message,
+        kind: 'error',
+        isLowContrast: false,
+      });
+    });
+
+    return () => {};
+  }, [
+    newVisitContext,
+    isValidatingVisitContext,
+    newMutateVisitContext,
+    setVisitContext,
+    activeVisit,
+    isValidatingActiveVisit,
+    storePatientUuid,
+    mutateActiveVisit,
+    patient,
+    t,
+    launchLatestWorkspaceGroup,
+  ]);
+
+  useEffect(() => {
+    if (!isLoadingPatient) {
+      setPatient(patient);
+    }
+
+    return () => {
+      setPatient(null);
+    };
+  }, [patient, setPatient, isLoadingPatient]);
+
+  const state = useMemo(
+    () => ({
+      patientUuid,
+      patient: patient ?? {},
+      visitContext,
+      mutateVisitContext,
+      isLoadingPatient,
+      setPatient,
+    }),
+    [patient, patientUuid, visitContext, mutateVisitContext, isLoadingPatient, setPatient],
+  );
+
+  return state;
+}

package/src/patient-chart/patient-chart.scss

@@ -0,0 +1,65 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+$actionNavOffset: 45px;
+$actionPanelOffset: 256px;
+$actionPanelExpandedOffset: $actionNavOffset + $actionPanelOffset;
+
+.patientInfoSlot {
+  > div:not(:last-child) {
+    border-bottom: 1px solid colors.$gray-20;
+  }
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr min-content;
+  grid-template-rows: 1fr;
+  align-items: stretch;
+  width: inherit;
+}
+
+.chartReview {
+  grid-row: 1;
+  grid-column: 1;
+  align-self: start;
+  height: 90%;
+  width: 100%;
+  margin: 0 auto;
+  padding-bottom: layout.$spacing-10;
+}
+
+.widthContained {
+  max-width: 60rem;
+}
+
+:global(.omrs-breakpoint-gt-small-desktop) .widthContained {
+  max-width: 80rem;
+}
+
+.chartContainer {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+}
+
+.innerChartContainer {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .chartContainer {
+    padding-right: unset;
+    padding-left: layout.$spacing-01;
+  }
+
+  :global(.omrs-breakpoint-lt-desktop) .innerChartContainer {
+    padding-left: 0;
+    margin-right: unset;
+  }
+}

package/src/patient-details-tile/patient-details-tile.component.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { capitalize } from 'lodash-es';
+import { age, getPatientName, formatDate, parseDate } from '@openmrs/esm-framework';
+import styles from './patient-details-tile.scss';
+
+interface PatientDetailsTileInterface {
+  patient?: fhir.Patient;
+}
+
+const PatientDetailsTile: React.FC<PatientDetailsTileInterface> = ({ patient }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.container}>
+      <p className={styles.name}>{patient ? getPatientName(patient) : ''}</p>
+      <div className={styles.details}>
+        <span>{capitalize(patient?.gender)}</span> &middot; <span>{age(patient?.birthDate)}</span> &middot;{' '}
+        <span>{formatDate(parseDate(patient?.birthDate), { mode: 'wide', time: false })}</span>
+      </div>
+    </div>
+  );
+};
+
+export default PatientDetailsTile;

package/src/patient-details-tile/patient-details-tile.scss

@@ -0,0 +1,24 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container:after {
+  content: '';
+  height: 100%;
+  width: 1px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background-color: $color-gray-30;
+  margin: 0 layout.$spacing-05;
+}
+
+.details {
+  margin-top: 5px;
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+.name {
+  @include type.type-style('body-compact-02');
+}

package/src/root.component.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { dashboardPath, spaRoot, basePath } from './constants';
+import PatientChart from './patient-chart/patient-chart.component';
+import styles from './root.scss';
+
+export default function Root() {
+  return (
+    <>
+      <div className={styles.patientChartWrapper}>
+        <BrowserRouter basename={spaRoot}>
+          <Routes>
+            <Route path={basePath} element={<PatientChart />} />
+            <Route path={dashboardPath} element={<PatientChart />} />
+          </Routes>
+        </BrowserRouter>
+      </div>
+    </>
+  );
+}
+
+/**
+ * DO NOT REMOVE THIS COMMENT
+ * THE TRANSLATION KEYS AND VALUES USED IN THE COMMON LIB IS WRITTEN HERE
+ * t('paginationPageText', 'of {{count}} pages', {count})
+ * t("emptyStateText", 'There are no {{displayText}} to display for this patient', {displayText: "sample text"})
+ * t('record', 'Record')
+ * t('errorCopy','Sorry, there was a problem displaying this information. You can try to reload this page, or contact the site administrator and quote the error code above.')
+ * t('error', 'Error')
+ * t('seeAll', 'See all')
+ * t('paginationItemsCount', `{{pageItemsCount}} / {{count}} items`, { count: totalItems, pageItemsCount });
+ * t('Routine')
+ * t('Stat')
+ * t('On scheduled date')
+ */

package/src/root.scss

@@ -0,0 +1,54 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.patientChartWrapper {
+  display: flex;
+  position: relative;
+}
+
+.patientChartWrapper {
+  & > nav {
+    padding-bottom: layout.$spacing-09;
+    scrollbar-width: none;
+  }
+
+  :global(.cds--side-nav__overlay-active) {
+    background-color: transparent;
+  }
+}
+
+:global(.omrs-breakpoint-gt-tablet) .patientChartWrapper {
+  margin-left: var(--omrs-sidenav-width);
+}
+
+// Tablet side nav scrolling
+:global(.omrs-breakpoint-lt-desktop) {
+  .patientChartWrapper {
+    :global(.cds--side-nav) {
+      height: calc(100vh - layout.$spacing-09 - var(--bottom-nav-height));
+    }
+  }
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  :global(.cds--date-picker-input__wrapper) {
+    svg {
+      left: layout.$spacing-05;
+      right: unset;
+    }
+  }
+  :global(.cds--side-nav) {
+    right: 0;
+    :global(.active-left-nav-link) {
+      border-right: layout.$spacing-02 solid var(--brand-01);
+      border-left: unset;
+    }
+  }
+
+  :global(.omrs-breakpoint-gt-tablet) .patientChartWrapper {
+    margin-right: var(--omrs-sidenav-width);
+    margin-left: unset;
+  }
+}

package/src/routes.json

@@ -0,0 +1,267 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "optionalBackendDependencies": {
+    "emrapi": {
+      "version": ">=2.0.0 <4.0.0",
+      "feature": {
+        "flagName": "emrapi-module",
+        "label": "EMR API Module",
+        "description": "This module, if installed, provides core EMR business logic."
+      }
+    }
+  },
+  "extensions": [
+    {
+      "name": "charts-summary-dashboard",
+      "component": "patientSummaryDashboardLink",
+      "slot": "patient-chart-dashboard-slot",
+      "order": 0,
+      "meta": {
+        "slot": "patient-chart-summary-dashboard-slot",
+        "path": "patient-summary"
+      },
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "encounter-list",
+      "component": "encounterListTableTabs",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "start-visit-button",
+      "component": "startVisitActionButton",
+      "slot": "patient-actions-slot",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "clinical-views-summary",
+      "component": "clinicalViewsSummary",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "stop-visit-button",
+      "component": "stopVisitActionButton",
+      "slot": "patient-actions-slot",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "mark-alive-button",
+      "slot": "patient-actions-slot",
+      "component": "markPatientAliveActionButton",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "stop-visit-button-patient-search",
+      "slot": "patient-search-actions-slot",
+      "component": "stopVisitPatientSearchActionButton",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "delete-visit-button",
+      "slot": "patient-actions-slot",
+      "component": "deleteVisitActionMenuButton",
+      "online": true,
+      "offline": true,
+      "order": 1100
+    },
+    {
+      "name": "delete-visit-button",
+      "slot": "patient-search-actions-slot",
+      "component": "deleteVisitActionMenuButton",
+      "online": true,
+      "offline": true,
+      "order": 1100
+    },
+    {
+      "name": "mark-patient-deceased-button",
+      "slot": "patient-actions-slot",
+      "component": "markPatientDeceasedActionButton",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "encounters-summary-dashboard",
+      "slot": "patient-chart-dashboard-slot",
+      "component": "encountersSummaryDashboardLink",
+      "meta": {
+        "slot": "patient-chart-encounters-dashboard-slot",
+        "path": "visits",
+        "layoutMode": "anchored"
+      },
+      "order": 5,
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "past-visits-detail-overview",
+      "slot": "patient-chart-encounters-dashboard-slot",
+      "component": "pastVisitsDetailOverview",
+      "order": 1,
+      "meta": {
+        "title": "Visits",
+        "view": "visits"
+      },
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "patient-details-tile",
+      "slot": "visit-form-header-slot",
+      "component": "patientDetailsTile",
+      "order": 1,
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "start-visit-button-patient-search",
+      "slot": "start-visit-button-slot",
+      "component": "startVisitPatientSearchActionButton",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "visit-attribute-tags",
+      "slot": "patient-banner-tags-slot",
+      "component": "visitAttributeTags",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "current-visit-summary",
+      "component": "currentVisitSummary",
+      "online": true,
+      "offline": true,
+      "meta": {
+        "fullWidth": true
+      }
+    },
+    {
+      "name": "edit-visit-action-button",
+      "slot": "visit-detail-overview-actions",
+      "component": "editVisitDetailsActionButton",
+      "online": true,
+      "offline": true,
+      "order": 0
+    },
+    {
+      "name": "delete-visit-action-button",
+      "slot": "visit-detail-overview-actions",
+      "component": "deleteVisitActionButton",
+      "online": true,
+      "offline": true,
+      "order": 1
+    },
+    {
+      "name": "active-visit-action-button",
+      "slot": "active-visit-actions",
+      "component": "activeVisitActionsComponent",
+      "online": true,
+      "offline": true,
+      "order": 1
+    },
+    {
+      "name": "visit-context-header",
+      "slot": "visit-context-header-slot",
+      "component": "visitContextHeader"
+    },
+    {
+      "name": "retrospective-date-time-picker",
+      "slot": "restrospective-date-time-picker-slot",
+      "component": "retrospectiveDateTimePicker"
+    }
+  ],
+  "featureFlags": [
+    {
+      "description": "Features to enter data for past visits. Includes the 'Edit Past Visit' button in the start visit dialog, and the 'Add Past Visit' button in the patient header",
+      "flagName": "rde",
+      "label": "Retrospective Data Entry"
+    },
+    {
+      "description": "When enabled, encounter summaries will display the full form layout instead of a simple observation list.",
+      "flagName": "enable-embedded-form-view",
+      "label": "Enable Embedded Form View"
+    }
+  ],
+  "modals": [
+    {
+      "name": "delete-encounter-modal",
+      "component": "deleteEncounterModal"
+    },
+    {
+      "name": "delete-visit-dialog",
+      "component": "deleteVisitModal"
+    },
+    {
+      "name": "end-visit-dialog",
+      "component": "endVisitModal"
+    },
+    {
+      "name": "mark-patient-alive-modal",
+      "component": "markPatientAliveModal"
+    },
+    {
+      "name": "modify-visit-date-dialog",
+      "component": "modifyVisitDateModal"
+    },
+    {
+      "name": "start-visit-dialog",
+      "component": "startVisitModal"
+    },
+    {
+      "name": "visit-context-switcher",
+      "component": "visitContextSwitcherModal"
+    }
+  ],
+  "pages": [
+    {
+      "component": "root",
+      "routeRegex": "^patient\/.+\/chart",
+      "online": true,
+      "offline": true
+    }
+  ],
+  "workspaces2": [
+    {
+      "name": "mark-patient-deceased-workspace-form",
+      "component": "markPatientDeceasedForm",
+      "window": "mark-patient-deceased"
+    },
+    {
+      "name": "start-visit-workspace-form",
+      "component": "startVisitWorkspace",
+      "window": "start-visit"
+    },
+    {
+      "name": "patient-chart-appointments-form-workspace",
+      "component": "@openmrs/esm-appointments-app#exportedAppointmentsFormWorkspace",
+      "window": "patient-chart-appointment-form"
+    }
+  ],
+  "workspaceWindows2": [
+    {
+      "name": "start-visit",
+      "group": "patient-chart"
+    },
+    {
+      "name": "mark-patient-deceased",
+      "group": "patient-chart"
+    },
+    {
+      "name": "patient-chart-appointment-form",
+      "group": "patient-chart"
+    }
+  ],
+  "workspaceGroups2": [
+    {
+      "name": "patient-chart",
+      "scopePattern": "/patient/([^/]+)/chart"
+    }
+  ]
+}