(feat) O3-3159: Add patient header on appointment form (#1134)

openmrs · May 14, 2024 · 416e4be · 416e4be
1 parent 87510b8
commit 416e4be
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 12 deletions.
diff --git a/.../esm-appointments-app/src/appointments/common-components/appointments-table.component.tsx b/.../esm-appointments-app/src/appointments/common-components/appointments-table.component.tsx
@@ -3,8 +3,6 @@ import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
 import isToday from 'dayjs/plugin/isToday';
 import utc from 'dayjs/plugin/utc';
-dayjs.extend(utc);
-dayjs.extend(isToday);
 import {
   Button,
   DataTable,
@@ -28,13 +26,13 @@ import {
 } from '@carbon/react';
 import {
   ConfigurableLink,
-  formatDatetime,
-  usePagination,
   formatDate,
-  useConfig,
-  parseDate,
+  formatDatetime,
   isDesktop,
+  parseDate,
+  useConfig,
   useLayoutType,
+  usePagination,
 } from '@openmrs/esm-framework';
 import { Download } from '@carbon/react/icons';
 import { EmptyState } from '../../empty-state/empty-state.component';
@@ -50,6 +48,9 @@ import AppointmentsForm from '../../form/appointments-form.component';
 import PatientSearch from '../../patient-search/patient-search.component';
 import styles from './appointments-table.scss';
 
+dayjs.extend(utc);
+dayjs.extend(isToday);
+
 interface AppointmentsTableProps {
   appointments: Array<Appointment>;
   isLoading: boolean;
@@ -220,6 +221,7 @@ const AppointmentsTable: React.FC<AppointmentsTableProps> = ({ appointments, isL
                                     launchOverlay(
                                       t('editAppointments', 'Edit appointment'),
                                       <AppointmentsForm
+                                        patientUuid={matchingAppointment.patient.uuid}
                                         appointment={matchingAppointment}
                                         context="editing"
                                         closeWorkspace={closeOverlay}

diff --git a/packages/esm-appointments-app/src/form/appointments-form.component.tsx b/packages/esm-appointments-app/src/form/appointments-form.component.tsx
@@ -24,12 +24,14 @@ import { Controller, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import {
+  ExtensionSlot,
   ResponsiveWrapper,
   showSnackbar,
   translateFrom,
   useConfig,
   useLayoutType,
   useLocations,
+  usePatient,
   useSession,
 } from '@openmrs/esm-framework';
 import {
@@ -47,16 +49,14 @@ import {
   dateFormat,
   datePickerFormat,
   datePickerPlaceHolder,
+  moduleName,
   weekDays,
 } from '../constants';
 import styles from './appointments-form.scss';
 import SelectedDateContext from '../hooks/selectedDateContext';
 
-import uniqBy from 'lodash/uniqBy';
-import { moduleName } from '../constants';
-
-
 const time12HourFormatRegexPattern = '^(1[0-2]|0?[1-9]):[0-5][0-9]$';
+
 function isValidTime(timeStr) {
   return timeStr.match(new RegExp(time12HourFormatRegexPattern));
 }
@@ -117,6 +117,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
   context,
   closeWorkspace,
 }) => {
+  const { patient } = usePatient(patientUuid);
   const { mutateAppointments } = useMutateAppointments();
   const editedAppointmentTimeFormat = new Date(appointment?.startDateTime).getHours() >= 12 ? 'PM' : 'AM';
   const defaultTimeFormat = appointment?.startDateTime
@@ -369,6 +370,16 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
   return (
     <Form onSubmit={handleSubmit(handleSaveAppointment, onError)}>
       <Stack gap={4}>
+        {patient && (
+          <ExtensionSlot
+            name="patient-header-slot"
+            state={{
+              patient,
+              patientUuid: patientUuid,
+              hideActionsOverflow: true,
+            }}
+          />
+        )}
         <section className={styles.formGroup}>
           <span className={styles.heading}>{t('location', 'Location')}</span>
           <ResponsiveWrapper>

diff --git a/packages/esm-appointments-app/translations/en.json b/packages/esm-appointments-app/translations/en.json
@@ -81,7 +81,6 @@
   "endAppointmentAndVisitConfirmationMessage": "Checking the patient out will mark the appointment as complete, and close out the active visit for this patient.",
   "endAppointmentConfirmation": "Are you sure you want to check the patient out for this appointment?",
   "endAppointmentConfirmationMessage": "Checking the patient out will mark the appointment as complete.",
-  "endDate": "End date",
   "endTime": "End Time",
   "errorCreatingAppointmentService": "Error creating appointment service",
   "expected": "Expected",
@@ -138,7 +137,6 @@
   "service": "Service",
   "serviceName": "Service name",
   "serviceType": "Service Type",
-  "startDate": "Start date",
   "startTime": "Start Time",
   "status": "Status",
   "time": "Time",