U4X-314 : Add visibility of notes taken somewhere in the patient summary chart

packages/esm-patient-queues-app/src/active-visits/active-visits-table.component.tsx

@@ -31,32 +31,29 @@ import { Add, Dashboard } from '@carbon/react/icons';
 
 import {
   ConfigObject,
-  ExtensionSlot,
   interpolateUrl,
   isDesktop,
   navigate,
   useConfig,
   useLayoutType,
   usePagination,
-  UserHasAccess,
   useSession,
 } from '@openmrs/esm-framework';
 import React, { AnchorHTMLAttributes, MouseEvent, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PRIVILEGE_CHECKIN } from '../constants';
-import { buildStatusString, formatWaitTime, getTagColor, getTagType, trimVisitNumber } from '../helpers/functions';
+import { buildStatusString, formatWaitTime, getTagColor, trimVisitNumber } from '../helpers/functions';
 import PastVisit from '../past-visit/past-visit.component';
 import PatientSearch from '../patient-search/patient-search.component';
 import StatusIcon from '../queue-entry-table-components/status-icon.component';
-import { SearchTypes } from '../types';
 import { getOriginFromPathName } from './active-visits-table.resource';
 import styles from './active-visits-table.scss';
 import EditActionsMenu from './edit-action-menu.components';
-import { usePatientQueuesList, useParentLocation } from './patient-queues.resource';
+import { usePatientQueuesList } from './patient-queues.resource';
 import PickPatientActionMenu from '../queue-entry-table-components/pick-patient-queue-entry-menu.component';
 import EmptyState from '../utils/empty-state/empty-state.component';
 import ViewActionsMenu from './view-action-menu.components';
 import CurrentVisit from '../current-visit/current-visit-summary.component';
+import NotesActionsMenu from './notes-action-menu.components';
 
 type FilterProps = {
   rowIds: Array<string>;
@@ -110,7 +107,6 @@ const ActiveVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) => {
   const [viewState, setViewState] = useState<{ selectedPatientUuid: string }>(null);
   const layout = useLayoutType();
   const config = useConfig() as ConfigObject;
-  const useQueueTableTabs = config.showQueueTableTab;
 
   const currentPathName: string = window.location.pathname;
   const fromPage: string = getOriginFromPathName(currentPathName);
@@ -191,6 +187,7 @@ const ActiveVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) => {
             <PickPatientActionMenu queueEntry={entry} closeModal={() => true} />
             <EditActionsMenu to={`\${openmrsSpaBase}/patient/${entry?.patientUuid}/edit`} from={fromPage} />
             <ViewActionsMenu to={`\${openmrsSpaBase}/patient/${entry?.patientUuid}/chart`} from={fromPage} />
+            <NotesActionsMenu note={entry} />
           </>
         ),
       },

packages/esm-patient-queues-app/src/active-visits/notes-action-menu.components.tsx

@@ -0,0 +1,31 @@
+import { Button, Tooltip } from '@carbon/react';
+import { CatalogPublish } from '@carbon/react/icons';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { showModal } from '@openmrs/esm-framework';
+import { MappedPatientQueueEntry } from './patient-queues.resource';
+
+interface NotesActionsMenuProps {
+  note: MappedPatientQueueEntry;
+}
+
+const NotesActionsMenu: React.FC<NotesActionsMenuProps> = ({ note }) => {
+  const { t } = useTranslation();
+  const launchNotesModal = useCallback(() => {
+    const dispose = showModal('notes-dialog-modal', {
+      queueEntry: note,
+      closeModal: () => dispose(),
+    });
+  }, [note]);
+  return (
+    <Tooltip align="bottom" label="View Notes">
+      <Button
+        kind="ghost"
+        onClick={launchNotesModal}
+        iconDescription={t('viewNotes', 'View Notes')}
+        renderIcon={(props) => <CatalogPublish size={16} {...props} />}
+      />
+    </Tooltip>
+  );
+};
+export default NotesActionsMenu;

packages/esm-patient-queues-app/src/active-visits/notes-dialog.component.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { MappedQueueEntry } from '../types';
+import { Button, Form, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './change-status-dialog.scss';
+import { MappedPatientQueueEntry } from './patient-queues.resource';
+
+interface NotesDialogProps {
+  queueEntry: MappedPatientQueueEntry;
+  closeModal: () => void;
+}
+
+const NotesDialog: React.FC<NotesDialogProps> = ({ queueEntry, closeModal }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <Form>
+        <ModalHeader closeModal={closeModal}>
+          <section className={styles.section}>
+            <p>Clinical Notes</p>
+          </section>
+        </ModalHeader>
+        <ModalBody>
+          <div className={styles.modalBody}>
+            <section className={styles.section}>
+              <p>{queueEntry.comment}</p>
+            </section>
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button type="submit" onClick={closeModal}>
+            {t('submit', 'Submit')}
+          </Button>
+        </ModalFooter>
+      </Form>
+    </div>
+  );
+};
+
+export default NotesDialog;

packages/esm-patient-queues-app/src/active-visits/patient-queues.resource.ts

@@ -13,6 +13,7 @@ export interface MappedPatientQueueEntry {
   patientUuid: string;
   priority: string;
   priorityComment: string;
+  comment: string;
   status: string;
   waitTime: string;
   locationFrom?: string;

packages/esm-patient-queues-app/src/index.ts

@@ -115,6 +115,8 @@ export const addProviderToRoomModal = getAsyncLifecycle(
   },
 );
 
+export const notesModal = getAsyncLifecycle(() => import('./active-visits/notes-dialog.component'), options);
+
 export const addQueueEntryWidget = getAsyncLifecycle(
   () => import('./patient-search/visit-form-queue-fields/visit-form-queue-fields.component'),
   options,

packages/esm-patient-queues-app/src/patient-queue-metrics/clinic-metrics.component.tsx

@@ -44,9 +44,6 @@ function ClinicMetrics() {
       value: 0,
     });
   });
-
-  console.info(JSON.stringify(childLocations, null, 2));
-
   // receptionist ui
   return (
     <>

packages/esm-patient-queues-app/src/routes.json

@@ -86,6 +86,10 @@
             "name": "add-queue-entry-widget",
             "slot": "add-queue-entry-slot",
             "component": "addQueueEntryWidget"
+        },
+        {
+            "name" :"notes-dialog-modal",
+            "component": "notesModal"
         }
     ]
 }