feat: add prompt notification on navigating from patient chart when w…

…orkspaces are open
openmrs · Jan 22, 2024 · 31b978d · 31b978d
1 parent d0b5315
commit 31b978d
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 3 deletions.
diff --git a/packages/esm-patient-chart-app/src/workspace/workspace-window.component.tsx b/packages/esm-patient-chart-app/src/workspace/workspace-window.component.tsx
@@ -1,7 +1,19 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useEffect } from 'react';
 import classNames from 'classnames';
-import { ExtensionSlot, useBodyScrollLock, useLayoutType, usePatient } from '@openmrs/esm-framework';
-import { type OpenWorkspace, useWorkspaces, updateWorkspaceWindowState } from '@openmrs/esm-patient-common-lib';
+import {
+  ExtensionSlot,
+  navigate,
+  translateFrom,
+  useBodyScrollLock,
+  useLayoutType,
+  usePatient,
+} from '@openmrs/esm-framework';
+import {
+  type OpenWorkspace,
+  useWorkspaces,
+  updateWorkspaceWindowState,
+  handleBeforeRouting,
+} from '@openmrs/esm-patient-common-lib';
 import { Header, HeaderGlobalBar, HeaderName, HeaderMenuButton, HeaderGlobalAction, IconButton } from '@carbon/react';
 import { ArrowLeft, ArrowRight, Close, DownToBottom, Maximize, Minimize } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
@@ -44,6 +56,16 @@ const WorkspaceWindow: React.FC<ContextWorkspaceParams> = () => {
     closeWorkspace = () => {},
   } = useMemo(() => workspaces?.[0] ?? ({} as OpenWorkspace), [workspaces]);
 
+  useEffect(() => {
+    if (handleBeforeRouting) {
+      window.addEventListener('single-spa:before-routing-event', handleBeforeRouting);
+
+      return () => {
+        window.removeEventListener('single-spa:before-routing-event', handleBeforeRouting);
+      };
+    }
+  }, [handleBeforeRouting]);
+
   return (
     <aside
       className={classNames(

diff --git a/packages/esm-patient-common-lib/src/workspaces/workspaces.ts b/packages/esm-patient-common-lib/src/workspaces/workspaces.ts
@@ -325,3 +325,37 @@ function getUpdatedWorkspaceWindowState(workspaceAtTop: OpenWorkspace) {
 export function resetWorkspaceStore() {
   getWorkspaceStore().setState(initialState);
 }
+
+// listen to single-spa:before-routing-event and prompt to close workspaces
+export function handleBeforeRouting({ detail }: any) {
+  const store = getWorkspaceStore();
+  const workspaces = store.getState().openWorkspaces;
+  const isRoutingFromPatientChart = new RegExp(/\/patient\/([a-zA-Z0-9\-]+)\/?/).test(detail.oldUrl);
+
+  if (workspaces.length && isRoutingFromPatientChart) {
+    detail.cancelNavigation();
+
+    const workspaceNames = workspaces.map((workspace) => workspace.title || workspace.name);
+    const prompt: Prompt = {
+      title: translateFrom('@openmrs/esm-patient-chart-app', 'unsavedChanges', 'You have unsaved changes'),
+      body: translateFrom(
+        '@openmrs/esm-patient-chart-app',
+        'unsavedChangesInForms',
+        `There are unsaved changes in {{formNames}} ${
+          workspaceNames.length > 1 ? ' and {{lastFormName}}' : ''
+        }. Do you want to discard these changes?`,
+        {
+          formNames: workspaceNames.length > 1 ? workspaceNames.slice(0, -1).join(', ') : workspaceNames[0],
+          lastFormName: workspaceNames.slice(-1),
+        },
+      ),
+      onConfirm: () => {
+        closeAllWorkspaces();
+        navigate(detail.newUrl);
+      },
+      confirmText: translateFrom('@openmrs/esm-patient-chart-app', 'discard', 'Discard'),
+    };
+
+    store.setState({ ...store.getState(), prompt });
+  }
+}