@bathiran212/esm-patient-notes-app 2.0.0

package/src/notes/visit-notes.resource.ts

@@ -0,0 +1,113 @@
+import useSWR from 'swr';
+import useSWRInfinite from 'swr/infinite';
+import { openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import { type ConfigObject } from '../config-schema';
+import type {
+  Concept,
+  DiagnosisPayload,
+  EncountersFetchResponse,
+  PatientNote,
+  RESTPatientNote,
+  VisitNotePayload,
+} from '../types';
+
+interface UseVisitNotes {
+  visitNotes: Array<PatientNote> | null;
+  error: Error;
+  isLoading: boolean;
+  isValidating?: boolean;
+  mutateVisitNotes: () => void;
+}
+
+export function useVisitNotes(patientUuid: string): UseVisitNotes {
+  const {
+    visitNoteConfig: { encounterNoteTextConceptUuid, visitDiagnosesConceptUuid },
+  } = useConfig<ConfigObject>();
+
+  const customRepresentation =
+    'custom:(uuid,display,encounterDatetime,patient,obs,' +
+    'encounterProviders:(uuid,display,' +
+    'encounterRole:(uuid,display),' +
+    'provider:(uuid,person:(uuid,display))),' +
+    'diagnoses';
+  const encountersApiUrl = `${restBaseUrl}/encounter?patient=${patientUuid}&obs=${visitDiagnosesConceptUuid}&v=${customRepresentation}`;
+
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: EncountersFetchResponse }, Error>(
+    encountersApiUrl,
+    openmrsFetch,
+  );
+
+  const mapNoteProperties = (note: RESTPatientNote, index: number): PatientNote => ({
+    id: `${index}`,
+    diagnoses: note.diagnoses
+      .filter((diagnosis) => !diagnosis.voided)
+      .map((diagnosisData) => diagnosisData.display)
+      .filter((val) => val)
+      .join(', '),
+    encounterDate: note.encounterDatetime,
+    encounterNote: note.obs.find((observation) => observation.concept.uuid === encounterNoteTextConceptUuid)?.value,
+    encounterNoteRecordedAt: note.obs.find((observation) => observation.concept.uuid === encounterNoteTextConceptUuid)
+      ?.obsDatetime,
+    encounterProvider: note?.encounterProviders[0]?.provider?.person?.display,
+    encounterProviderRole: note?.encounterProviders[0]?.encounterRole?.display,
+  });
+
+  const formattedVisitNotes = data?.data?.results
+    ?.map(mapNoteProperties)
+    ?.sort((noteA, noteB) => new Date(noteB.encounterDate).getTime() - new Date(noteA.encounterDate).getTime());
+
+  return {
+    visitNotes: data ? formattedVisitNotes : null,
+    error,
+    isLoading,
+    isValidating,
+    mutateVisitNotes: mutate,
+  };
+}
+
+export function fetchDiagnosisConceptsByName(searchTerm: string, diagnosisConceptClass: string) {
+  const customRepresentation = 'custom:(uuid,display)';
+  const url = `${restBaseUrl}/concept?name=${searchTerm}&searchType=fuzzy&class=${diagnosisConceptClass}&v=${customRepresentation}`;
+
+  return openmrsFetch<Array<Concept>>(url).then(({ data }) => Promise.resolve(data['results']));
+}
+
+export function saveVisitNote(abortController: AbortController, payload: VisitNotePayload) {
+  return openmrsFetch(`${restBaseUrl}/encounter`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: payload,
+    signal: abortController.signal,
+  });
+}
+
+export function updateVisitNote(abortController: AbortController, encounterUuid: string, payload: VisitNotePayload) {
+  return openmrsFetch(`${restBaseUrl}/encounter/${encounterUuid}`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: payload,
+    signal: abortController.signal,
+  });
+}
+
+export function savePatientDiagnosis(abortController: AbortController, payload: DiagnosisPayload) {
+  return openmrsFetch(`${restBaseUrl}/patientdiagnoses`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: payload,
+    signal: abortController.signal,
+  });
+}
+
+export function deletePatientDiagnosis(abortController: AbortController, diagnosisUuid: string) {
+  return openmrsFetch(`${restBaseUrl}/patientdiagnoses/${diagnosisUuid}`, {
+    method: 'DELETE',
+    signal: abortController.signal,
+  });
+}

package/src/routes.json

@@ -0,0 +1,48 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "fhir2": ">=1.2",
+    "webservices.rest": ">=2.2.0"
+  },
+  "extensions": [
+    {
+      "name": "notes-overview-widget",
+      "component": "notesOverview",
+      "meta": {
+        "fullWidth": false
+      },
+      "order": 5
+    },
+    {
+      "name": "sticky-notes-button",
+      "component": "stickyNotesButton",
+      "slot": "patient-info-slot",
+      "order": 1
+    }
+  ],
+  "modals": [
+    {
+      "name": "delete-sticky-note-modal",
+      "component": "deleteStickyNoteModal"
+    },
+    {
+      "name": "sticky-note-modal",
+      "component": "stickyNoteModal"
+    }
+  ],
+  "workspaces2": [
+    {
+      "name": "visit-notes-form-workspace",
+      "component": "visitNotesFormWorkspace",
+      "window": "visit-note"
+    }
+  ],
+  "workspaceWindows2": [
+    {
+      "name": "visit-note",
+      "icon": "visitNotesActionButton",
+      "group": "patient-chart",
+      "order": 2
+    }
+  ]
+}

package/src/sticky-notes/delete-sticky-note-button.component.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { IconButton } from '@carbon/react';
+import { showModal, TrashCanIcon } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import styles from './delete-sticky-note-button.scss';
+
+interface DeleteStickyNoteProps {
+  noteUuid: string;
+  mutate: () => void;
+  onClose: () => void;
+}
+
+const DeleteStickyNote: React.FC<DeleteStickyNoteProps> = ({ noteUuid, mutate, onClose }) => {
+  const { t } = useTranslation();
+
+  const handleDelete = () => {
+    const dispose = showModal('delete-sticky-note-modal', {
+      close: () => {
+        dispose();
+      },
+      noteUuid,
+      mutate,
+      onClose,
+    });
+  };
+  return (
+    <IconButton
+      label={t('deleteStickyNote', 'Delete sticky note')}
+      onClick={handleDelete}
+      kind="ghost"
+      size="sm"
+      align="top-end"
+    >
+      <TrashCanIcon className={styles.deleteIcon} />
+    </IconButton>
+  );
+};
+
+export default DeleteStickyNote;

package/src/sticky-notes/delete-sticky-note-button.scss

@@ -0,0 +1,13 @@
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.deleteIcon {
+  fill: $danger !important;
+
+  svg {
+    fill: $danger !important;
+  }
+
+  path {
+    fill: $danger !important;
+  }
+}

package/src/sticky-notes/delete-sticky-note.modal.test.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { vi, describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { deleteStickyNote } from './sticky-note.resource';
+import DeleteStickyNoteModal from './delete-sticky-note.modal';
+
+vi.mock('./sticky-note.resource', () => ({
+  deleteStickyNote: vi.fn(),
+}));
+
+const mockDeleteStickyNote = vi.mocked(deleteStickyNote);
+const mockShowSnackbar = vi.mocked(showSnackbar);
+
+const defaultProps = {
+  close: vi.fn(),
+  noteUuid: 'a1b2c3d4-e5f6-7890-1234-567890abcdef',
+  mutate: vi.fn(),
+  onClose: vi.fn(),
+};
+
+describe('DeleteStickyNoteModal', () => {
+  it('renders modal with correct elements', () => {
+    render(<DeleteStickyNoteModal {...defaultProps} />);
+    expect(screen.getByText(/confirm delete sticky note/i)).toBeInTheDocument();
+    expect(screen.getByText(/are you sure you want to delete this sticky note/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /delete/i })).toBeInTheDocument();
+  });
+
+  it('clicking Cancel button closes modal', async () => {
+    const user = userEvent.setup();
+    render(<DeleteStickyNoteModal {...defaultProps} />);
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    await user.click(cancelButton);
+    expect(defaultProps.close).toHaveBeenCalled();
+  });
+
+  it('clicking Delete button deletes sticky note and shows success', async () => {
+    const user = userEvent.setup();
+    mockDeleteStickyNote.mockResolvedValue(undefined);
+    render(<DeleteStickyNoteModal {...defaultProps} />);
+    const deleteButton = screen.getByRole('button', { name: /delete/i });
+    await user.click(deleteButton);
+
+    expect(mockDeleteStickyNote).toHaveBeenCalledWith(defaultProps.noteUuid);
+    expect(mockDeleteStickyNote).toHaveBeenCalledTimes(1);
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
+      subtitle: 'The sticky note was deleted successfully',
+      title: 'Sticky note deleted',
+      kind: 'success',
+    });
+  });
+
+  it('shows error when deletion fails', async () => {
+    const user = userEvent.setup();
+    const error = { message: 'Server error' };
+    mockDeleteStickyNote.mockRejectedValue(error);
+
+    render(<DeleteStickyNoteModal {...defaultProps} />);
+    const deleteButton = screen.getByRole('button', { name: /delete/i });
+    await user.click(deleteButton);
+
+    expect(mockDeleteStickyNote).toHaveBeenCalledWith(defaultProps.noteUuid);
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
+      title: 'Error deleting sticky note',
+      subtitle: 'An error occurred while deleting the sticky note',
+      kind: 'error',
+    });
+  });
+});

package/src/sticky-notes/delete-sticky-note.modal.tsx

@@ -0,0 +1,62 @@
+import React, { useCallback, useState } from 'react';
+import { Button, InlineLoading, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { getCoreTranslation, showSnackbar } from '@openmrs/esm-framework';
+import { deleteStickyNote } from './sticky-note.resource';
+
+interface DeleteStickyNoteModalProps {
+  close: () => void;
+  noteUuid: string;
+  mutate: () => void;
+  onClose: () => void;
+}
+
+const DeleteStickyNoteModal = ({ close, noteUuid, mutate, onClose }: DeleteStickyNoteModalProps) => {
+  const { t } = useTranslation();
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const confirmDelete = useCallback(async () => {
+    setIsDeleting(true);
+    try {
+      await deleteStickyNote(noteUuid);
+      showSnackbar({
+        kind: 'success',
+        title: t('stickyNoteDeleted', 'Sticky note deleted'),
+        subtitle: t('stickyNoteDeletedSuccessfully', 'The sticky note was deleted successfully'),
+      });
+      mutate();
+      close();
+      onClose();
+    } catch (err) {
+      showSnackbar({
+        kind: 'error',
+        title: t('errorDeletingStickyNote', 'Error deleting sticky note'),
+        subtitle: t('errorDeletingStickyNoteMessage', 'An error occurred while deleting the sticky note'),
+      });
+    } finally {
+      setIsDeleting(false);
+    }
+  }, [noteUuid, mutate, close, onClose, t]);
+  return (
+    <>
+      <ModalHeader closeModal={close}>{t('confirmDeleteStickyNote', 'Confirm delete sticky note')}</ModalHeader>
+      <ModalBody>
+        <p>{t('confirmDeleteStickyNoteMessage', 'Are you sure you want to delete this sticky note?')}</p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={close} disabled={isDeleting}>
+          {getCoreTranslation('cancel')}
+        </Button>
+        <Button kind="danger" onClick={confirmDelete} disabled={isDeleting}>
+          {isDeleting ? (
+            <InlineLoading description={t('deleting', 'Deleting') + '...'} />
+          ) : (
+            getCoreTranslation('delete')
+          )}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default DeleteStickyNoteModal;

package/src/sticky-notes/edit-sticky-note-button.component.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { IconButton } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { EditIcon } from '@openmrs/esm-framework';
+
+interface EditStickyNoteProps {
+  onEdit: () => void;
+}
+
+const EditStickyNote: React.FC<EditStickyNoteProps> = ({ onEdit }) => {
+  const { t } = useTranslation();
+
+  return (
+    <IconButton label={t('editStickyNote', 'Edit sticky note')} onClick={onEdit} kind="ghost" size="sm" align="top-end">
+      <EditIcon />
+    </IconButton>
+  );
+};
+
+export default EditStickyNote;

package/src/sticky-notes/sticky-note-header-button.component.tsx

@@ -0,0 +1,100 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { DocumentIcon, showModal, useConfig, useOnClickOutside } from '@openmrs/esm-framework';
+import { type ConfigObject } from '../config-schema';
+import { useStickyNote } from './sticky-note.resource';
+import StickyNotePanel from './sticky-note-panel.component';
+import styles from './sticky-note-header-button.scss';
+
+interface StickyNoteHeaderButtonProps {
+  patientUuid: string;
+}
+
+const StickyNoteHeaderButton: React.FC<StickyNoteHeaderButtonProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const [showPanel, setShowPanel] = useState(false);
+  const { note, isLoading, error, mutate } = useStickyNote(patientUuid);
+
+  const handleClose = useCallback(() => {
+    setShowPanel(false);
+  }, []);
+
+  const handleOutsideClick = useCallback((event: MouseEvent) => {
+    // Ignore clicks inside any open Carbon modal so opening the edit/delete modal doesn't dismiss the panel.
+    if ((event.target as HTMLElement | null)?.closest('[role="dialog"]')) {
+      return;
+    }
+    setShowPanel(false);
+  }, []);
+
+  const containerRef = useOnClickOutside<HTMLDivElement>(handleOutsideClick, showPanel);
+
+  const handleClick = useCallback(() => {
+    // Any state other than "definitely no note" shows the panel, which already renders skeleton / error / note.
+    if (isLoading || error || note) {
+      setShowPanel((prev) => !prev);
+      return;
+    }
+    const dispose = showModal('sticky-note-modal', {
+      close: () => dispose(),
+      mutate,
+      patientUuid,
+    });
+  }, [error, isLoading, mutate, note, patientUuid]);
+
+  useEffect(() => {
+    if (!showPanel) {
+      return;
+    }
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setShowPanel(false);
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [showPanel]);
+
+  return (
+    <div className={styles.content} ref={containerRef}>
+      <Button
+        kind="ghost"
+        size="sm"
+        renderIcon={(props) => (
+          <div>
+            <DocumentIcon {...props} />
+            {note && <span className={styles.notificationBadge}>1</span>}
+          </div>
+        )}
+        onClick={handleClick}
+      >
+        {t('stickyNote', 'Sticky note')}
+      </Button>
+      {showPanel && (
+        <StickyNotePanel
+          error={error}
+          isLoading={isLoading}
+          mutate={mutate}
+          note={note}
+          onClose={handleClose}
+          patientUuid={patientUuid}
+        />
+      )}
+    </div>
+  );
+};
+
+// Gate the button on config so distros that don't configure a concept don't see a feature that
+// would silently fail on save. When unconfigured, nothing renders — no button, no SWR request.
+const StickyNoteHeaderButtonGate: React.FC<StickyNoteHeaderButtonProps> = (props) => {
+  const { stickyNoteConceptUuid } = useConfig<ConfigObject>();
+  if (!stickyNoteConceptUuid) {
+    return null;
+  }
+  return <StickyNoteHeaderButton {...props} />;
+};
+
+export default StickyNoteHeaderButtonGate;

package/src/sticky-notes/sticky-note-header-button.scss

@@ -0,0 +1,38 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+// When the gate returns null (no concept configured) the framework still leaves an empty
+// <div data-extension-id="sticky-notes-button"> wrapper in the patient-info-slot. The slot's
+// own `> div:not(:last-child) { border-bottom }` rule paints a border on that empty wrapper,
+// stacking a second 1px line just below the banner's own border-bottom. Collapse the empty
+// wrapper so it takes no space and paints nothing.
+:global([data-extension-id='sticky-notes-button']):empty {
+  display: none;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  margin-inline-start: auto;
+  position: relative;
+}
+
+.notificationBadge {
+  position: absolute;
+  top: calc(layout.$spacing-02 * -1);
+  right: layout.$spacing-03;
+  background-color: $danger;
+  color: white;
+  border-radius: 50%;
+  width: layout.$spacing-05;
+  height: layout.$spacing-05;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 600;
+  border: 1px solid white;
+}