(feat) Add optional Date appointment issued field to the appointmen…

…t form (#1164) * feat: enhance appointment form to capture date when appointment was issued * fix failing tests after adding dateAppointmentScheduled field * Fixup --------- Co-authored-by: Dennis Kigen <[email protected]>
openmrs · Jun 6, 2024 · 643944b · 643944b
1 parent 8ee7afd
commit 643944b
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 8 deletions.
diff --git a/e2e/specs/appointments.spec.ts b/e2e/specs/appointments.spec.ts
@@ -15,7 +15,7 @@ test.beforeEach(async ({ api }) => {
 test('Add, edit and cancel an appointment', async ({ page, api }) => {
   const appointmentsPage = new AppointmentsPage(page);
 
-  await test.step('When I go to the appointment tab in the patient chart', async () => {
+  await test.step('When I go to the Appointments page in the patient chart', async () => {
     await appointmentsPage.goto(patient.uuid);
   });
 
@@ -39,7 +39,7 @@ test('Add, edit and cancel an appointment', async ({ page, api }) => {
   await test.step('And I set date for tomorrow', async () => {
     const tomorrow = new Date();
     tomorrow.setDate(tomorrow.getDate() + 1);
-    await page.fill('input[placeholder="dd/mm/yyyy"]', tomorrow.toLocaleDateString('en-GB'));
+    await page.getByLabel(/^Date$/i).fill(tomorrow.toLocaleDateString('en-GB'));
   });
 
   await test.step('And I set the “Duration” to 60', async () => {
@@ -79,7 +79,7 @@ test('Add, edit and cancel an appointment', async ({ page, api }) => {
   await test.step('And I change the date to Today', async () => {
     const today = new Date();
     today.setDate(today.getDate());
-    await page.fill('input[placeholder="dd/mm/yyyy"]', today.toLocaleDateString('en-GB'));
+    await page.getByLabel(/^Date$/i).fill(today.toLocaleDateString('en-GB'));
   });
 
   await test.step('And I set the “Duration” of the appointment”', async () => {

diff --git a/packages/esm-appointments-app/src/form/appointments-form.component.tsx b/packages/esm-appointments-app/src/form/appointments-form.component.tsx
@@ -154,6 +154,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
         recurringPatternEndDateText: z.string().nullable(),
       }),
       formIsRecurringAppointment: z.boolean(),
+      dateAppointmentScheduled: z.date().optional(),
     })
     .refine(
       (formValues) => {
@@ -170,6 +171,10 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
 
   type AppointmentFormData = z.infer<typeof appointmentsFormSchema>;
 
+  const defaultDateAppointmentScheduled = appointment?.dateAppointmentScheduled
+    ? new Date(appointment?.dateAppointmentScheduled)
+    : new Date();
+
   const { control, getValues, setValue, watch, handleSubmit } = useForm<AppointmentFormData>({
     mode: 'all',
     resolver: zodResolver(appointmentsFormSchema),
@@ -196,6 +201,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
         recurringPatternEndDateText: defaultEndDateText,
       },
       formIsRecurringAppointment: isRecurringAppointment,
+      dateAppointmentScheduled: defaultDateAppointmentScheduled,
     },
   });
 
@@ -328,6 +334,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
       provider,
       appointmentNote,
       appointmentStatus,
+      dateAppointmentScheduled,
     } = data;
 
     const serviceUuid = services?.find((service) => service.name === selectedService)?.uuid;
@@ -348,6 +355,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
       patientUuid: patientUuid,
       comments: appointmentNote,
       uuid: context === 'editing' ? appointment.uuid : undefined,
+      dateAppointmentScheduled: dayjs(dateAppointmentScheduled).format(),
     };
   };
 
@@ -417,6 +425,31 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
             />
           </ResponsiveWrapper>
         </section>
+        <section className={styles.formGroup}>
+          <span className={styles.heading}>{t('dateScheduled', 'Date appointment issued')}</span>
+          <ResponsiveWrapper>
+            <Controller
+              name="dateAppointmentScheduled"
+              control={control}
+              render={({ field: { onChange, value, ref } }) => (
+                <DatePicker
+                  datePickerType="single"
+                  dateFormat={datePickerFormat}
+                  value={value}
+                  maxDate={new Date()}
+                  onChange={([date]) => onChange(date)}>
+                  <DatePickerInput
+                    id="dateAppointmentScheduledPickerInput"
+                    labelText={t('dateScheduledDetail', 'Date appointment issued')}
+                    style={{ width: '100%' }}
+                    placeholder={datePickerPlaceHolder}
+                    ref={ref}
+                  />
+                </DatePicker>
+              )}
+            />
+          </ResponsiveWrapper>
+        </section>
         <section className={styles.formGroup}>
           <span className={styles.heading}>{t('service', 'Service')}</span>
           <ResponsiveWrapper>

diff --git a/packages/esm-appointments-app/src/form/appointments-form.test.tsx b/packages/esm-appointments-app/src/form/appointments-form.test.tsx
@@ -107,20 +107,20 @@ describe('AppointmentForm', () => {
     await waitForLoadingToFinish();
 
     expect(screen.getByLabelText(/Select a location/i)).toBeInTheDocument();
-    expect(screen.getByLabelText(/Date/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/^Date$/i)).toBeInTheDocument();
     expect(screen.getByLabelText(/Select a service/i)).toBeInTheDocument();
     expect(screen.getByLabelText(/Select the type of appointment/i)).toBeInTheDocument();
     expect(screen.getByLabelText(/Write an additional note/i)).toBeInTheDocument();
     expect(screen.getByPlaceholderText(/Write any additional points here/i)).toBeInTheDocument();
-    expect(screen.getByPlaceholderText(/dd\/mm\/yyyy/i)).toBeInTheDocument();
+    expect(screen.getAllByPlaceholderText(/dd\/mm\/yyyy/i).length).toBe(2);
     expect(screen.getByRole('option', { name: /Mosoriot/i })).toBeInTheDocument();
     expect(screen.getByRole('option', { name: /Inpatient Ward/i })).toBeInTheDocument();
     expect(screen.getByRole('option', { name: /AM/i })).toBeInTheDocument();
     expect(screen.getByRole('option', { name: /PM/i })).toBeInTheDocument();
     expect(screen.getByRole('option', { name: /Choose appointment type/i })).toBeInTheDocument();
     expect(screen.getByRole('option', { name: /Scheduled/i })).toBeInTheDocument();
     expect(screen.getByRole('option', { name: /WalkIn/i })).toBeInTheDocument();
-    expect(screen.getByRole('textbox', { name: /Date/i })).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: /^Date$/i })).toBeInTheDocument();
     expect(screen.getByRole('textbox', { name: /Time/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Discard/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Save and close/i })).toBeInTheDocument();
@@ -152,7 +152,7 @@ describe('AppointmentForm', () => {
     await waitForLoadingToFinish();
 
     const saveButton = screen.getByRole('button', { name: /Save and close/i });
-    const dateInput = screen.getByRole('textbox', { name: /Date/i });
+    const dateInput = screen.getByRole('textbox', { name: /^Date$/i });
     const timeInput = screen.getByRole('textbox', { name: /Time/i });
     const timeFormat = screen.getByRole('combobox', { name: /Time/i });
     const serviceSelect = screen.getByRole('combobox', { name: /Select a service/i });
@@ -190,7 +190,7 @@ describe('AppointmentForm', () => {
     await waitForLoadingToFinish();
 
     const saveButton = screen.getByRole('button', { name: /Save and close/i });
-    const dateInput = screen.getByRole('textbox', { name: /Date/i });
+    const dateInput = screen.getByRole('textbox', { name: /^Date$/i });
     const timeInput = screen.getByRole('textbox', { name: /Time/i });
     const timeFormat = screen.getByRole('combobox', { name: /Time/i });
     const serviceSelect = screen.getByRole('combobox', { name: /Select a service/i });

diff --git a/packages/esm-appointments-app/src/types/index.ts b/packages/esm-appointments-app/src/types/index.ts
@@ -48,6 +48,7 @@ export interface Appointment {
   recurring: boolean;
   service: AppointmentService;
   startDateTime: string | any;
+  dateAppointmentScheduled: string | any;
   status: AppointmentStatus;
   uuid: string;
   additionalInfo?: string | null;
@@ -120,6 +121,7 @@ export interface Observation {
 export interface AppointmentPayload {
   patientUuid: string;
   serviceUuid: string;
+  dateAppointmentScheduled: string;
   startDateTime: string;
   endDateTime: string;
   appointmentKind: string;

diff --git a/packages/esm-appointments-app/translations/en.json b/packages/esm-appointments-app/translations/en.json
@@ -62,6 +62,8 @@
   "date": "Date",
   "date&Time": "Date & time",
   "dateOfBirth": "Date of birth",
+  "dateScheduled": "Date appointment issued",
+  "dateScheduledDetail": "Date appointment issued",
   "dateTime": "Date & Time",
   "day": "Day",
   "daysOfWeek": "Days of the week",