@openmrs/esm-patient-notes-app 11.3.0 → 11.3.1-patch.9310

package/src/dashboard.meta.ts

@@ -1,4 +1,6 @@
-export const dashboardMeta = {
+import { type DashboardLinkConfig } from '@openmrs/esm-patient-common-lib';
+
+export const dashboardMeta: DashboardLinkConfig & { slot: string } = {
   slot: 'patient-chart-encounters-dashboard-slot',
   title: 'Encounters',
   path: 'Encounters',

package/src/index.ts

@@ -28,7 +28,6 @@ export function startupApp() {
 }
 
 export const notesOverview = getSyncLifecycle(notesOverviewExtension, options);
-
 export const visitNotesActionButton = getSyncLifecycle(visitNotesActionButtonExtension, options);
 
 // t('visitNoteWorkspaceTitle', 'Visit Note')

package/src/notes/notes-overview.extension.tsx

@@ -1,6 +1,17 @@
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 import { useTranslation } from 'react-i18next';
-import NotesMain from './notes-main.component';
+import { Button, DataTableSkeleton, InlineLoading } from '@carbon/react';
+import { AddIcon, launchWorkspace, useLayoutType } from '@openmrs/esm-framework';
+import {
+  CardHeader,
+  EmptyState,
+  ErrorState,
+  launchStartVisitPrompt,
+  usePatientChartStore,
+} from '@openmrs/esm-patient-common-lib';
+import { useVisitNotes } from './visit-notes.resource';
+import PaginatedNotes from './paginated-notes.component';
+import styles from './notes-overview.scss';
 
 interface NotesOverviewProps {
   patientUuid: string;
@@ -8,13 +19,56 @@ interface NotesOverviewProps {
   basePath: string;
 }
 
+/**
+ * This extension uses the patient chart store and MUST only be mounted within the patient chart
+ */
 const NotesOverview: React.FC<NotesOverviewProps> = ({ patientUuid, patient, basePath }) => {
   const pageSize = 5;
   const { t } = useTranslation();
   const pageUrl = `\${openmrsSpaBase}/patient/${patient.id}/chart/Forms & Notes`;
   const urlLabel = t('seeAll', 'See all');
 
-  return <NotesMain patientUuid={patientUuid} pageSize={pageSize} urlLabel={urlLabel} pageUrl={pageUrl} />;
+  const { visitContext } = usePatientChartStore(patientUuid);
+  const displayText = t('visitNotes', 'Visit notes');
+  const headerTitle = t('visitNotes', 'Visit notes');
+  const { visitNotes, error, isLoading, isValidating } = useVisitNotes(patientUuid);
+  const layout = useLayoutType();
+  const isDesktop = layout === 'large-desktop' || layout === 'small-desktop';
+
+  const launchVisitNoteForm = React.useCallback(() => {
+    if (visitContext) {
+      launchWorkspace('visit-notes-form-workspace');
+    } else {
+      launchStartVisitPrompt();
+    }
+  }, [visitContext]);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" compact={isDesktop} zebra />;
+  }
+  if (error) {
+    return <ErrorState error={error} headerTitle={headerTitle} />;
+  }
+  if (!visitNotes?.length) {
+    return <EmptyState displayText={displayText} headerTitle={headerTitle} launchForm={launchVisitNoteForm} />;
+  }
+
+  return (
+    <div className={styles.widgetCard}>
+      <CardHeader title={headerTitle}>
+        <span>{isValidating ? <InlineLoading /> : null}</span>
+        <Button
+          kind="ghost"
+          renderIcon={(props: ComponentProps<typeof AddIcon>) => <AddIcon size={16} {...props} />}
+          iconDescription="Add visit note"
+          onClick={launchVisitNoteForm}
+        >
+          {t('add', 'Add')}
+        </Button>
+      </CardHeader>
+      <PaginatedNotes notes={visitNotes} pageSize={pageSize} urlLabel={urlLabel} pageUrl={pageUrl} />
+    </div>
+  );
 };
 
 export default NotesOverview;

package/src/notes/visit-notes-form.test.tsx

@@ -1,7 +1,14 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { screen, render } from '@testing-library/react';
-import { getDefaultsFromConfigSchema, showSnackbar, useConfig, useSession } from '@openmrs/esm-framework';
+import {
+  type Encounter,
+  getDefaultsFromConfigSchema,
+  showSnackbar,
+  useConfig,
+  useSession,
+} from '@openmrs/esm-framework';
+import { type PatientWorkspace2DefinitionProps } from '@openmrs/esm-patient-common-lib';
 import { fetchDiagnosisConceptsByName, saveVisitNote, updateVisitNote } from './visit-notes.resource';
 import {
   ConfigMock,
@@ -12,20 +19,32 @@ import {
 } from '__mocks__';
 import { configSchema, type ConfigObject } from '../config-schema';
 import { mockPatient, getByTextWithMarkup } from 'tools';
-import VisitNotesForm from './visit-notes-form.workspace';
+import VisitNotesForm, { type VisitNotesFormProps } from './visit-notes-form.workspace';
 
-const defaultProps = {
+const defaultProps: PatientWorkspace2DefinitionProps<VisitNotesFormProps, {}> = {
   closeWorkspace: jest.fn(),
-  closeWorkspaceWithSavedChanges: jest.fn(),
-  formContext: 'creating' as const,
-  patient: mockPatient,
-  patientUuid: mockPatient.id,
-  promptBeforeClosing: jest.fn(),
-  setTitle: jest.fn(),
+  workspaceProps: {
+    formContext: 'creating' as const,
+  },
+  groupProps: {
+    patient: mockPatient,
+    patientUuid: mockPatient.id,
+    visitContext: null,
+    mutateVisitContext: null,
+  },
+  launchChildWorkspace: jest.fn(),
+  windowProps: {},
+  workspaceName: '',
+  windowName: '',
+  isRootWorkspace: false,
 };
 
-function renderVisitNotesForm(props = {}) {
-  render(<VisitNotesForm {...defaultProps} {...props} />);
+function renderVisitNotesForm(workspaceProps: Partial<VisitNotesFormProps> = {}) {
+  const props = {
+    ...defaultProps,
+    workspaceProps: { ...defaultProps.workspaceProps, ...workspaceProps },
+  };
+  render(<VisitNotesForm {...props} />);
 }
 
 const mockFetchDiagnosisConceptsByName = jest.mocked(fetchDiagnosisConceptsByName);
@@ -245,7 +264,7 @@ test('initializes form with existing encounter data when in edit mode', () => {
 
   renderVisitNotesForm({
     formContext: 'editing',
-    encounter: mockEncounter,
+    encounter: mockEncounter as any as Encounter, // TODO: fix
   });
 
   // Verify date is pre-filled
@@ -311,7 +330,7 @@ test('updates existing visit note when in edit mode', async () => {
 
   renderVisitNotesForm({
     formContext: 'editing',
-    encounter: mockEncounter,
+    encounter: mockEncounter as any as Encounter, // TODO: fix
   });
 
   // Update clinical note