@tebokaroa/openmrs-esm-patient-notes-app 12.1.0-custom.1

package/README.md

@@ -0,0 +1,4 @@
+# esm-patient-notes-app
+
+The notes widget. It provides a tabular overview of the visit notes recorded for a patient as well as a form for recording new visit notes.
+

package/jest.config.js

@@ -0,0 +1,3 @@
+const rootConfig = require('../../jest.config.js');
+
+module.exports = rootConfig;

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@tebokaroa/openmrs-esm-patient-notes-app",
+  "version": "12.1.0-custom.1",
+  "license": "MPL-2.0",
+  "description": "Patient notes microfrontend for the OpenMRS SPA",
+  "browser": "dist/openmrs-esm-patient-notes-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "rspack serve --mode=development",
+    "debug": "npm run serve",
+    "build": "rspack --mode=production",
+    "analyze": "rspack --mode=production --env analyze=true",
+    "lint": "cross-env eslint src --ext tsx,ts --fix --max-warnings=0",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests --color",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
+    "coverage": "yarn test --coverage",
+    "typescript": "tsc",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.modal.tsx' 'src/**/*.extension.tsx' 'src/**/*.workspace.tsx' 'src/**/*.hook.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "homepage": "https://github.com/openmrs/openmrs-esm-patient-chart#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openmrs/openmrs-esm-patient-chart.git"
+  },
+  "bugs": {
+    "url": "https://github.com/openmrs/openmrs-esm-patient-chart/issues"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.23"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "9.x",
+    "@openmrs/esm-patient-common-lib": "12.x",
+    "dayjs": "1.x",
+    "react": "18.x",
+    "react-i18next": "16.x",
+    "react-router-dom": "6.x",
+    "rxjs": "6.x",
+    "swr": "2.x"
+  },
+  "devDependencies": {
+    "@openmrs/esm-patient-common-lib": "workspace:*",
+    "openmrs": "next"
+  }
+}

package/rspack.config.js

@@ -0,0 +1 @@
+module.exports = require('openmrs/default-rspack-config');

package/src/config-schema.ts

@@ -0,0 +1,22 @@
+import { Type } from '@openmrs/esm-framework';
+import notesConfigSchema, { type VisitNoteConfigObject } from './notes/visit-note-config-schema';
+
+export const configSchema = {
+  diagnosisConceptClass: {
+    _type: Type.UUID,
+    _default: '8d4918b0-c2cc-11de-8d13-0010c6dffd0f',
+    _description: 'The concept class UUID for diagnoses',
+  },
+  isPrimaryDiagnosisRequired: {
+    _type: Type.Boolean,
+    _default: true,
+    _description: 'Indicates whether a primary diagnosis is required when submitting a visit note',
+  },
+  visitNoteConfig: notesConfigSchema,
+};
+
+export interface ConfigObject {
+  diagnosisConceptClass: string;
+  isPrimaryDiagnosisRequired: boolean;
+  visitNoteConfig: VisitNoteConfigObject;
+}

package/src/dashboard.meta.ts

@@ -0,0 +1,7 @@
+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/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '*.scss' {
+  const content: { [className: string]: string };
+  export default content;
+}

package/src/index.ts

@@ -0,0 +1,34 @@
+import {
+  defineConfigSchema,
+  getAsyncLifecycle,
+  getSyncLifecycle,
+  messageOmrsServiceWorker,
+  restBaseUrl,
+} from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import notesOverviewExtension from './notes/notes-overview.extension';
+import visitNotesActionButtonExtension from './visit-note-action-button.extension';
+
+const moduleName = '@openmrs/esm-patient-notes-app';
+
+const options = {
+  featureName: 'patient-notes',
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export function startupApp() {
+  messageOmrsServiceWorker({
+    type: 'registerDynamicRoute',
+    pattern: `.+${restBaseUrl}/encounter.+`,
+  });
+
+  defineConfigSchema(moduleName, configSchema);
+}
+
+export const notesOverview = getSyncLifecycle(notesOverviewExtension, options);
+export const visitNotesActionButton = getSyncLifecycle(visitNotesActionButtonExtension, options);
+
+// t('visitNoteWorkspaceTitle', 'Visit Note')
+export const visitNotesFormWorkspace = getAsyncLifecycle(() => import('./notes/visit-notes-form.workspace'), options);

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

@@ -0,0 +1,74 @@
+import React, { type ComponentProps } from 'react';
+import { useTranslation } from 'react-i18next';
+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;
+  patient: fhir.Patient;
+  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');
+
+  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/notes-overview.scss

@@ -0,0 +1,40 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.widgetCard {
+  border: 1px solid $ui-03;
+}
+
+.expandedRow > td {
+  padding-left: layout.$spacing-08 !important;
+}
+
+.expandedRow > td > div {
+  max-height: max-content !important;
+}
+
+.expandedRow th[colspan] td[colspan] > div:first-child {
+  padding: 0 layout.$spacing-05;
+}
+
+.copy {
+  @include type.type-style('body-01');
+
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  margin: layout.$spacing-03;
+}
+
+.metadata {
+  @include type.type-style('label-01');
+  color: $text-02;
+  margin: layout.$spacing-03 0;
+}
+
+.hiddenRow {
+  display: none;
+}

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

@@ -0,0 +1,100 @@
+import React from 'react';
+import { screen, within } from '@testing-library/react';
+import { useConfig } from '@openmrs/esm-framework';
+import { ErrorState } from '@openmrs/esm-patient-common-lib';
+import { mockVisitNotes, ConfigMock } from '__mocks__';
+import { mockPatient, patientChartBasePath, renderWithSwr } from 'tools';
+import { useVisitNotes } from './visit-notes.resource';
+import NotesOverview from './notes-overview.extension';
+
+const testProps = {
+  basePath: patientChartBasePath,
+  patient: mockPatient,
+  patientUuid: mockPatient.id,
+};
+
+const mockUseVisitNotes = jest.mocked(useVisitNotes);
+const mockUseConfig = jest.mocked(useConfig);
+
+jest.mock('./visit-notes.resource', () => {
+  return { useVisitNotes: jest.fn().mockReturnValue([{}]) };
+});
+
+describe('NotesOverview', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue(ConfigMock);
+  });
+
+  test('renders an empty state view if visit note data is unavailable', async () => {
+    mockUseVisitNotes.mockReturnValueOnce({
+      visitNotes: [],
+      error: null,
+      isLoading: false,
+      isValidating: false,
+      mutateVisitNotes: jest.fn(),
+    });
+
+    renderWithSwr(<NotesOverview {...testProps} />);
+
+    expect(screen.queryByRole('table')).not.toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /notes/i })).toBeInTheDocument();
+    expect(screen.getByText(/There are no visit notes to display for this patient/i)).toBeInTheDocument();
+    expect(screen.getByText(/Record visit notes/i)).toBeInTheDocument();
+  });
+
+  test('renders an error state view if there is a problem fetching visit note data', async () => {
+    const error = {
+      name: 'Error',
+      message: 'You are not logged in',
+      response: {
+        status: 401,
+        statusText: 'Unauthorized',
+      },
+    };
+
+    mockUseVisitNotes.mockReturnValueOnce({
+      visitNotes: [],
+      error: error,
+      isLoading: false,
+      isValidating: false,
+      mutateVisitNotes: jest.fn(),
+    });
+
+    renderWithSwr(<NotesOverview {...testProps} />);
+
+    expect(screen.queryByRole('table')).not.toBeInTheDocument();
+    expect(ErrorState).toHaveBeenCalledWith(expect.objectContaining({ error, headerTitle: 'Visit notes' }), {});
+  });
+
+  test("renders a tabular overview of the patient's visit notes when present", async () => {
+    mockUseVisitNotes.mockReturnValueOnce({
+      visitNotes: mockVisitNotes,
+      error: null,
+      isLoading: false,
+      isValidating: false,
+      mutateVisitNotes: jest.fn(),
+    });
+
+    renderWithSwr(<NotesOverview {...testProps} />);
+
+    expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /notes/i })).toBeInTheDocument();
+
+    const table = screen.getByRole('table');
+
+    const expectedColumnHeaders = [/Date/, /Diagnoses/];
+    expectedColumnHeaders.forEach((header) => {
+      expect(screen.getByRole('columnheader', { name: new RegExp(header, 'i') })).toBeInTheDocument();
+    });
+
+    const expectedTableRows = [
+      /27 — Jan — 2022 Malaria, Primary respiratory tuberculosis, confirmed/,
+      /14 — Jan — 2022 Visit Diagnoses: Presumed diagnosis, Malaria, Primary/,
+      /14 — Jan — 2022 Visit Diagnoses: Presumed diagnosis, Hemorrhage in early pregnancy, Primary/,
+    ];
+
+    expectedTableRows.map((row) =>
+      expect(within(table).getByRole('row', { name: new RegExp(row, 'i') })).toBeInTheDocument(),
+    );
+  });
+});

package/src/notes/paginated-notes.component.tsx

@@ -0,0 +1,182 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+import {
+  DataTable,
+  type DataTableCell,
+  type DataTableSortState,
+  Table,
+  TableCell,
+  TableContainer,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableExpandedRow,
+} from '@carbon/react';
+import { orderBy } from 'lodash-es';
+import { formatDate, formatTime, parseDate, useLayoutType, usePagination } from '@openmrs/esm-framework';
+import { PatientChartPagination } from '@openmrs/esm-patient-common-lib';
+import type { PatientNote } from '../types';
+import styles from './notes-overview.scss';
+
+interface PaginatedNotes {
+  notes: Array<PatientNote>;
+  pageSize: number;
+  pageUrl: string;
+  urlLabel: string;
+}
+
+const PaginatedNotes: React.FC<PaginatedNotes> = ({ notes, pageSize, pageUrl, urlLabel }) => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const isTablet = layout === 'tablet';
+
+  const [sortParams, setSortParams] = useState({ key: '', order: 'none' });
+
+  const tableHeaders = [
+    {
+      key: 'encounterDate',
+      header: t('date', 'Date'),
+    },
+    {
+      key: 'diagnoses',
+      header: t('diagnoses', 'Diagnoses'),
+    },
+  ];
+
+  const sortDate = (myArray, order) =>
+    order === 'ASC'
+      ? orderBy(myArray, [(obj) => new Date(obj.encounterDate).getTime()], ['desc'])
+      : orderBy(myArray, [(obj) => new Date(obj.encounterDate).getTime()], ['asc']);
+
+  const { key, order } = sortParams;
+
+  const sortedData =
+    key === 'encounterDate'
+      ? sortDate(notes, order)
+      : order === 'DESC'
+        ? orderBy(notes, [key], ['desc'])
+        : orderBy(notes, [key], ['asc']);
+
+  function customSortRow(
+    cellA,
+    cellB,
+    {
+      sortDirection,
+      sortStates,
+    }: {
+      sortDirection: string;
+      sortStates: any;
+      locale: string;
+    },
+  ) {
+    const key = Object.keys(sortStates).find((k) => sortStates[k] === sortDirection);
+    setSortParams({ key: key ?? '', order: sortDirection });
+    return 0;
+  }
+
+  const { results: paginatedNotes, goTo, currentPage } = usePagination(sortedData, pageSize);
+  const tableRows = React.useMemo(
+    () =>
+      paginatedNotes?.map((note) => ({
+        ...note,
+        id: `${note.id}`,
+        encounterDate: formatDate(parseDate(note.encounterDate), { mode: 'wide' }),
+        diagnoses: note.diagnoses ? note.diagnoses : '--',
+      })),
+    [paginatedNotes],
+  );
+
+  return (
+    <>
+      <DataTable
+        rows={tableRows}
+        sortRow={customSortRow}
+        headers={tableHeaders}
+        isSortable
+        size={isTablet ? 'lg' : 'sm'}
+        useZebraStyles
+      >
+        {({
+          getExpandedRowProps,
+          getExpandHeaderProps,
+          getHeaderProps,
+          getRowProps,
+          getTableContainerProps,
+          getTableProps,
+          headers,
+          rows,
+        }) => (
+          <TableContainer {...getTableContainerProps()}>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
+                  {headers.map((header, i) => (
+                    <TableHeader
+                      key={i}
+                      className={classNames(styles.productiveHeading01, styles.text02)}
+                      {...getHeaderProps({
+                        header,
+                      })}
+                    >
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, i) => (
+                  <React.Fragment key={row.id}>
+                    <TableExpandRow {...getRowProps({ row })}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value}</TableCell>
+                      ))}
+                    </TableExpandRow>
+                    {row.isExpanded ? (
+                      <TableExpandedRow
+                        className={styles.expandedRow}
+                        colSpan={headers.length + 1}
+                        {...getExpandedRowProps({ row })}
+                      >
+                        <div className={styles.container} key={i}>
+                          {tableRows?.[i]?.encounterNote ? (
+                            <div className={styles.copy}>
+                              <span className={styles.content}>{tableRows?.[i]?.encounterNote}</span>
+                              <span className={styles.metadata}>
+                                {formatTime(new Date(tableRows?.[i]?.encounterNoteRecordedAt))} &middot;{' '}
+                                {tableRows?.[i]?.encounterProvider}, {tableRows?.[i]?.encounterProviderRole}
+                              </span>
+                            </div>
+                          ) : (
+                            <span className={styles.copy}>{t('noVisitNoteToDisplay', 'No visit note to display')}</span>
+                          )}
+                        </div>
+                      </TableExpandedRow>
+                    ) : (
+                      <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                    )}
+                  </React.Fragment>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      <PatientChartPagination
+        pageNumber={currentPage}
+        totalItems={notes.length}
+        currentItems={paginatedNotes.length}
+        pageSize={pageSize}
+        onPageNumberChange={({ page }) => goTo(page)}
+        dashboardLinkUrl={pageUrl}
+        dashboardLinkLabel={urlLabel}
+      />
+    </>
+  );
+};
+
+export default PaginatedNotes;

package/src/notes/visit-note-config-schema.ts

@@ -0,0 +1,38 @@
+import { Type } from '@openmrs/esm-framework';
+
+export default {
+  clinicianEncounterRole: {
+    _type: Type.UUID,
+    _default: '240b26f9-dd88-4172-823d-4a8bfeb7841f',
+    _description: 'Doctor or Nurse who is the primary provider for an encounter, and will sign the note',
+  },
+  visitDiagnosesConceptUuid: {
+    _type: Type.ConceptUuid,
+    _default: '159947AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    _description: 'The set of diagnoses that were either addressed or diagnosed during the current visit',
+  },
+  encounterNoteTextConceptUuid: {
+    _type: Type.ConceptUuid,
+    _default: '162169AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    _description: 'Free text note field intended to capture unstructured description of the patient encounter',
+  },
+  encounterTypeUuid: {
+    _type: Type.UUID,
+    _default: 'd7151f82-c1f3-4152-a605-2f9ea7414a79',
+    _description:
+      'Encounter where a full or abbreviated examination is done, usually leading to a presumptive or confirmed diagnosis, recorded by the examining clinician.',
+  },
+  formConceptUuid: {
+    _type: Type.UUID,
+    _default: 'c75f120a-04ec-11e3-8780-2b40bef9a44b',
+    _description: 'The UUID of the Visit Note form to be associated with visit note encounters',
+  },
+};
+
+export interface VisitNoteConfigObject {
+  clinicianEncounterRole: string;
+  encounterNoteTextConceptUuid: string;
+  encounterTypeUuid: string;
+  formConceptUuid: string;
+  visitDiagnosesConceptUuid: string;
+}