@openmrs/esm-appointments-app 9.2.1-pre.7296 → 9.2.1-pre.7315

package/src/form/appointments-form.workspace.tsx

@@ -34,8 +34,8 @@ import {
   usePatient,
   useSession,
   Workspace2,
-  type FetchResponse,
   type Workspace2DefinitionProps,
+  type FetchResponse,
 } from '@openmrs/esm-framework';
 import { z } from 'zod';
 import { type ConfigObject } from '../config-schema';
@@ -53,11 +53,10 @@ import { useProviders } from '../hooks/useProviders';
 import Workload from '../workload/workload.component';
 import styles from './appointments-form.scss';
 
-export interface AppointmentsFormProps {
+interface AppointmentsFormProps {
   appointment?: Appointment;
   recurringPattern?: RecurringPattern;
-  patientUuid?: string;
-  context: 'creating' | 'editing';
+  patientUuid: string;
 }
 
 const time12HourFormatRegexPattern = '^(1[0-2]|0?[1-9]):[0-5][0-9]$';
@@ -65,8 +64,11 @@ const time12HourFormatRegex = /^(1[0-2]|0?[1-9]):[0-5][0-9]$/;
 
 const isValidTime = (timeStr: string) => time12HourFormatRegex.test(timeStr);
 
+/**
+ * Workspace used to create or edit an appointment within the appointments app
+ */
 const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps>> = ({
-  workspaceProps: { appointment, recurringPattern, patientUuid, context },
+  workspaceProps: { appointment, recurringPattern, patientUuid },
   closeWorkspace,
 }) => {
   const { patient } = usePatient(patientUuid);
@@ -262,7 +264,7 @@ const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps
 
   useEffect(() => setValue('formIsRecurringAppointment', isRecurringAppointment), [isRecurringAppointment, setValue]);
 
-  // Retrive ref callback for appointmentDateTime (startDate & recurringPatternEndDate)
+  // Retrieve ref callback for appointmentDateTime (startDate & recurringPatternEndDate)
   const {
     field: { ref: startDateRef },
   } = useController({ name: 'appointmentDateTime.startDate', control });
@@ -281,7 +283,7 @@ const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps
   useEffect(() => {
     if (isSuccessful) {
       reset();
-      closeWorkspace({ closeWindow: true, discardUnsavedChanges: true });
+      closeWorkspace({ discardUnsavedChanges: true, closeWindow: true });
     }
   }, [isSuccessful, reset, closeWorkspace]);
 
@@ -290,7 +292,7 @@ const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps
     setValue('appointmentDateTime', { ...appointmentDate, startDate: date });
   };
 
-  const handleSelectChange = (e: { selectedItems: Array<{ id: number; label: string }> }) => {
+  const handleSelectChange = (e) => {
     setValue(
       'selectedDaysOfWeekText',
       (() => {
@@ -307,8 +309,8 @@ const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps
     );
     setValue(
       'recurringPatternDaysOfWeek',
-      e.selectedItems.map((s: { id: number }) => {
-        return String(s.id);
+      e.selectedItems.map((s) => {
+        return s.id;
       }),
     );
   };
@@ -326,23 +328,21 @@ const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps
     }
   })();
 
+  const isEditing = Boolean(appointment);
+
   // Same for creating and editing
   const handleSaveAppointment = async (data: AppointmentFormData) => {
     setIsSubmitting(true);
     // Construct appointment payload
     const appointmentPayload = constructAppointmentPayload(data);
 
-    // check if Duplicate Response Occurs
+    // Check if a duplicate response occurs
     const response: FetchResponse = await checkAppointmentConflict(appointmentPayload);
     let errorMessage = t('appointmentConflict', 'Appointment conflict');
     if (response?.data?.hasOwnProperty('SERVICE_UNAVAILABLE')) {
       errorMessage = t('serviceUnavailable', 'Appointment time is outside of service hours');
     } else if (response?.data?.hasOwnProperty('PATIENT_DOUBLE_BOOKING')) {
-      if (context !== 'editing') {
-        errorMessage = t('patientDoubleBooking', 'Patient already booked for an appointment at this time');
-      } else {
-        errorMessage = null;
-      }
+      errorMessage = t('patientDoubleBooking', 'Patient already booked for an appointment at this time');
     }
 
     if (response.status === 200 && errorMessage) {
@@ -376,19 +376,17 @@ const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps
             isLowContrast: true,
             kind: 'success',
             subtitle: t('appointmentNowVisible', 'It is now visible on the Appointments page'),
-            title:
-              context === 'editing'
-                ? t('appointmentEdited', 'Appointment edited')
-                : t('appointmentScheduled', 'Appointment scheduled'),
+            title: isEditing
+              ? t('appointmentEdited', 'Appointment edited')
+              : t('appointmentScheduled', 'Appointment scheduled'),
           });
         }
         if (status === 204) {
           setIsSubmitting(false);
           showSnackbar({
-            title:
-              context === 'editing'
-                ? t('appointmentEditError', 'Error editing appointment')
-                : t('appointmentFormError', 'Error scheduling appointment'),
+            title: isEditing
+              ? t('appointmentEditError', 'Error editing appointment')
+              : t('appointmentFormError', 'Error scheduling appointment'),
             kind: 'error',
             isLowContrast: false,
             subtitle: t('noContent', 'No Content'),
@@ -398,10 +396,9 @@ const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps
       (error) => {
         setIsSubmitting(false);
         showSnackbar({
-          title:
-            context === 'editing'
-              ? t('appointmentEditError', 'Error editing appointment')
-              : t('appointmentFormError', 'Error scheduling appointment'),
+          title: isEditing
+            ? t('appointmentEditError', 'Error editing appointment')
+            : t('appointmentFormError', 'Error scheduling appointment'),
           kind: 'error',
           isLowContrast: false,
           subtitle: error?.message,
@@ -445,7 +442,7 @@ const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps
       providers: [{ uuid: provider }],
       patientUuid: patientUuid,
       comments: appointmentNote,
-      uuid: context === 'editing' ? appointment?.uuid : undefined,
+      uuid: isEditing ? appointment.uuid : undefined,
       dateAppointmentScheduled: dayjs(dateAppointmentScheduled).format(),
     };
   };
@@ -469,19 +466,18 @@ const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps
     };
   };
 
-  if (isLoading)
+  if (isLoading) {
     return (
       <InlineLoading className={styles.loader} description={`${t('loading', 'Loading')} ...`} role="progressbar" />
     );
+  }
+
+  const title = isEditing
+    ? t('editAppointment', 'Edit appointment')
+    : t('createNewAppointment', 'Create new appointment');
 
   return (
-    <Workspace2
-      title={
-        context === 'editing'
-          ? t('editAppointment', 'Edit appointment')
-          : t('createNewAppointment', 'Create new appointment')
-      }
-      hasUnsavedChanges={isDirty}>
+    <Workspace2 title={title} hasUnsavedChanges={isDirty}>
       <Form onSubmit={handleSubmit(handleSaveAppointment)}>
         {patient && (
           <ExtensionSlot
@@ -534,12 +530,12 @@ const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps
                     labelText={t('selectService', 'Select a service')}
                     onBlur={onBlur}
                     onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
-                      if (context === 'creating') {
+                      if (!isEditing) {
                         setValue(
                           'duration',
                           services?.find((service) => service.name === event.target.value)?.durationMins,
                         );
-                      } else if (context === 'editing') {
+                      } else {
                         const previousServiceDuration = services?.find(
                           (service) => service.name === getValues('selectedService'),
                         )?.durationMins;
@@ -677,7 +673,7 @@ const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps
                           invalidText={t('invalidNumber', 'Number is not valid')}
                           value={value}
                           onBlur={onBlur}
-                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          onChange={(e) => {
                             onChange(Number(e.target.value));
                           }}
                         />
@@ -693,7 +689,7 @@ const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps
                         <RadioButtonGroup
                           legendText={t('period', 'Period')}
                           name="radio-button-group"
-                          onChange={(type: string) => onChange(type)}
+                          onChange={(type) => onChange(type)}
                           valueSelected={value}>
                           <RadioButton labelText={t('day', 'Day')} value="DAY" id="radioDay" />
                           <RadioButton labelText={t('week', 'Week')} value="WEEK" id="radioWeek" />
@@ -716,15 +712,15 @@ const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps
                               getValues('recurringPatternDaysOfWeek').includes(i.id),
                             )}
                             items={weekDays}
-                            itemToString={(item: any) => (item ? t(item.labelCode, item.label) : '')}
+                            itemToString={(item) => (item ? t(item.labelCode, item.label) : '')}
                             label={getValues('selectedDaysOfWeekText')}
-                            onChange={(e: any) => {
+                            onChange={(e) => {
                               onChange(e);
                               handleSelectChange(e);
                             }}
                             selectionFeedback="top-after-reopen"
-                            sortItems={(items: any[]) => {
-                              return items.sort((a: any, b: any) => a.order - b.order);
+                            sortItems={(items) => {
+                              return items.sort((a, b) => a.order > b.order);
                             }}
                           />
                         )}
@@ -795,7 +791,7 @@ const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps
             </FormGroup>
           )}
 
-          {context !== 'creating' ? (
+          {isEditing ? (
             <FormGroup className={styles.formGroup} legendText={t('appointmentStatus', 'Appointment Status')}>
               <ResponsiveWrapper>
                 <Controller
@@ -902,10 +898,7 @@ const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps
           </FormGroup>
         </Stack>
         <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
-          <Button
-            className={styles.button}
-            onClick={() => closeWorkspace({ discardUnsavedChanges: false })}
-            kind="secondary">
+          <Button className={styles.button} onClick={closeWorkspace} kind="secondary">
             {t('discard', 'Discard')}
           </Button>
           <Button className={styles.button} disabled={isSubmitting} type="submit">

package/src/form/exported-appointments-form.workspace.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { type Workspace2DefinitionProps } from '@openmrs/esm-framework';
+import type { Appointment, RecurringPattern } from '../types';
+import AppointmentsForm from './appointments-form.workspace';
+
+interface ExportedAppointmentsFormProps {
+  appointment?: Appointment;
+  recurringPattern?: RecurringPattern;
+}
+
+interface ExportedAppointmentsFormGroupProps {
+  patientUuid: string;
+}
+
+/**
+ * Workspace used to create or edit an appointment in the patient chart (or app with compatible workspaceGroup)
+ */
+const ExportedAppointmentsForm: React.FC<
+  Workspace2DefinitionProps<ExportedAppointmentsFormProps, {}, ExportedAppointmentsFormGroupProps>
+> = ({ workspaceProps: { appointment, recurringPattern }, groupProps: { patientUuid }, ...rest }) => {
+  return <AppointmentsForm workspaceProps={{ appointment, recurringPattern, patientUuid }} groupProps={{}} {...rest} />;
+};
+
+export default ExportedAppointmentsForm;

package/src/helpers/functions.ts

@@ -1,41 +1,65 @@
 import dayjs, { type Dayjs } from 'dayjs';
-import { formatDate, parseDate } from '@openmrs/esm-framework';
-import { type AppointmentSummary, type Appointment } from '../types';
-import { configSchema } from '../config-schema';
+import { type TFunction } from 'i18next';
+import { launchWorkspace2, type Workspace2DefinitionProps } from '@openmrs/esm-framework';
+import { type AppointmentSummary, type AppointmentCountMap } from '../types';
+import { appointmentsFormWorkspace } from '../constants';
 
-export const getHighestAppointmentServiceLoad = (appointmentSummary: Array<any> = []) => {
-  const groupedAppointments = appointmentSummary?.map(({ countMap, serviceName }) => ({
+interface FlattenedAppointmentSummary {
+  serviceName: string;
+  countMap: AppointmentCountMap[];
+}
+
+interface ServiceLoadSummary {
+  serviceName: string;
+  count: number;
+}
+
+export const getHighestAppointmentServiceLoad = (
+  appointmentSummary: FlattenedAppointmentSummary[] = [],
+): ServiceLoadSummary | undefined => {
+  const groupedAppointments = appointmentSummary.map(({ countMap, serviceName }) => ({
     serviceName: serviceName,
-    count: countMap.reduce((cummulator, currentValue) => cummulator + currentValue.allAppointmentsCount, 0),
+    count: countMap.reduce((accumulator, currentValue) => accumulator + currentValue.allAppointmentsCount, 0),
   }));
+  if (groupedAppointments.length === 0) {
+    return undefined;
+  }
   return groupedAppointments.find((summary) => summary.count === Math.max(...groupedAppointments.map((x) => x.count)));
 };
 
-export const flattenAppointmentSummary = (appointmentToTransfrom: Array<any>) =>
-  appointmentToTransfrom.flatMap((el: any) => ({
+export const flattenAppointmentSummary = (
+  appointmentToTransform: AppointmentSummary[],
+): FlattenedAppointmentSummary[] =>
+  appointmentToTransform.flatMap((el) => ({
     serviceName: el.appointmentService.name,
-    countMap: Object.entries(el.appointmentCountMap).flatMap((el) => el[1]),
+    countMap: Object.entries(el.appointmentCountMap).flatMap(([, countMap]) => countMap),
   }));
 
 export const getServiceCountByAppointmentType = (
-  appointmentSummary: Array<AppointmentSummary>,
-  appointmentType: string,
-) => {
+  appointmentSummary: AppointmentSummary[],
+  appointmentType: 'allAppointmentsCount' | 'missedAppointmentsCount',
+): number => {
   return appointmentSummary
-    .map((el) => Object.entries(el.appointmentCountMap).flatMap((el) => el[1][appointmentType]))
+    .map((el) =>
+      Object.values(el.appointmentCountMap).map((countMap) => {
+        const value = countMap[appointmentType];
+        if (typeof value === 'number') {
+          return value;
+        }
+        return 0;
+      }),
+    )
     .flat(1)
     .reduce((count, val) => count + val, 0);
 };
 
-export const formatAMPM = (date) => {
-  let hours = date.getHours();
-  let minutes = date.getMinutes();
-  let ampm = hours >= 12 ? 'PM' : 'AM';
-  hours = hours % 12;
-  hours = hours ? hours : 12; // the hour '0' should be '12'
-  minutes = minutes < 10 ? '0' + minutes : minutes;
-  const strTime = hours + ':' + minutes + ' ' + ampm;
-  return strTime;
+export const formatAMPM = (date: Date): string => {
+  const hours24 = date.getHours();
+  const minutes = date.getMinutes();
+  const ampm = hours24 >= 12 ? 'PM' : 'AM';
+  const hours12 = hours24 % 12 || 12; // Convert 0 to 12
+  const minutesStr = minutes < 10 ? `0${minutes}` : minutes.toString();
+  return `${hours12}:${minutesStr} ${ampm}`;
 };
 
 export const isSameMonth = (cellDate: Dayjs, currentDate: Dayjs) => {
@@ -51,7 +75,7 @@ export const monthDays = (currentDate: Dayjs) => {
   let days: Dayjs[] = [];
 
   for (let i = lastMonth.daysInMonth() - monthStart.day() + 1; i <= lastMonth.daysInMonth(); i++) {
-    days.push(dayjs().month(lastMonth.month()).date(i));
+    days.push(lastMonth.date(i));
   }
 
   for (let i = 1; i <= monthDays; i++) {
@@ -61,12 +85,12 @@ export const monthDays = (currentDate: Dayjs) => {
   const dayLen = days.length > 30 ? 7 : 14;
 
   for (let i = 1; i < dayLen - monthEnd.day(); i++) {
-    days.push(dayjs().month(nextMonth.month()).date(i));
+    days.push(nextMonth.date(i));
   }
   return days;
 };
 
-export const getGender = (gender, t) => {
+export const getGender = (gender: string | undefined, t: TFunction<'translation', undefined>): string => {
   switch (gender) {
     case 'M':
       return t('male', 'Male');
@@ -80,3 +104,26 @@ export const getGender = (gender, t) => {
       return gender;
   }
 };
+
+export const launchCreateAppointmentForm = (t: TFunction<'translation', undefined>) => {
+  launchWorkspace2(
+    'appointments-patient-search-workspace',
+    {
+      initialQuery: '',
+      workspaceTitle: t('createNewAppointment', 'Create new appointment'),
+      onPatientSelected(
+        patientUuid: string,
+        patient: fhir.Patient,
+        launchChildWorkspace: Workspace2DefinitionProps['launchChildWorkspace'],
+        closeWorkspace: Workspace2DefinitionProps['closeWorkspace'],
+      ) {
+        launchChildWorkspace(appointmentsFormWorkspace, {
+          patientUuid: patient.id,
+        });
+      },
+    },
+    {
+      startVisitWorkspaceName: 'appointments-patient-search-start-visit-workspace',
+    },
+  );
+};

package/src/index.ts

@@ -92,8 +92,6 @@ export const metricsCardProvidersBooked = getAsyncLifecycle(
   options,
 );
 
-export const searchPatient = getAsyncLifecycle(() => import('./patient-search/patient-search.component'), options);
-
 // t('Appointments', 'Appointments')
 export const patientAppointmentsSummaryDashboardLink = getAsyncLifecycle(async () => {
   const commonLib = await import('@openmrs/esm-patient-common-lib');
@@ -120,9 +118,13 @@ export const cancelAppointmentModal = getAsyncLifecycle(
   options,
 );
 
-// t('createNewAppointment', 'Create new appointment')
 export const appointmentsFormWorkspace = getAsyncLifecycle(() => import('./form/appointments-form.workspace'), options);
 
+export const exportedAppointmentsFormWorkspace = getAsyncLifecycle(
+  () => import('./form/exported-appointments-form.workspace'),
+  options,
+);
+
 export const endAppointmentModal = getAsyncLifecycle(
   () => import('./appointments/common-components/end-appointment.modal'),
   options,

package/src/metrics/metrics-cards/highest-volume-service.extension.tsx

@@ -19,7 +19,7 @@ export default function HighestVolumeServiceExtension() {
   return (
     <MetricsCard
       headerLabel={t('highestServiceVolume', 'Highest volume service: {{time}}', { time: formattedStartDate })}
-      label={highestServiceLoad?.count !== 0 ? t(highestServiceLoad?.serviceName) : t('serviceName', 'Service name')}
+      label={highestServiceLoad ? t(highestServiceLoad.serviceName) : t('serviceName', 'Service name')}
       value={highestServiceLoad?.count ?? '--'}
     />
   );

package/src/metrics/metrics-cards/metrics-card.component.tsx

@@ -9,7 +9,7 @@ dayjs.extend(isSameOrBefore);
 
 interface MetricsCardProps {
   label: string;
-  value: number;
+  value: number | string;
   headerLabel: string;
   count?: { pendingAppointments: Array<any>; arrivedAppointments: Array<any> };
 }

package/src/metrics/metrics-header.component.tsx

@@ -4,10 +4,11 @@ import isToday from 'dayjs/plugin/isToday';
 import { useTranslation } from 'react-i18next';
 import { Calendar, Hospital } from '@carbon/react/icons';
 import { Button } from '@carbon/react';
-import { ExtensionSlot, isDesktop, launchWorkspace2, navigate, useLayoutType } from '@openmrs/esm-framework';
+import { isDesktop, navigate, useLayoutType } from '@openmrs/esm-framework';
 import { spaHomePage } from '../constants';
 import { useAppointmentsStore } from '../store';
 import styles from './metrics-header.scss';
+import { launchCreateAppointmentForm } from '../helpers';
 
 dayjs.extend(isToday);
 
@@ -17,16 +18,6 @@ const MetricsHeader: React.FC = () => {
   const layout = useLayoutType();
   const responsiveSize = isDesktop(layout) ? 'sm' : 'md';
 
-  const launchCreateAppointmentForm = (patientUuid) => {
-    const props = {
-      patientUuid: patientUuid,
-      context: 'creating',
-      mutate: () => {}, // TODO get this to mutate properly
-    };
-
-    launchWorkspace2('appointments-form-workspace', { ...props });
-  };
-
   return (
     <div className={styles.metricsContainer}>
       <div className={styles.metricsContent}>
@@ -39,19 +30,13 @@ const MetricsHeader: React.FC = () => {
           }>
           {t('appointmentsCalendar', 'Appointments calendar')}
         </Button>
-        <ExtensionSlot
-          name="patient-search-button-slot"
-          state={{
-            selectPatientAction: launchCreateAppointmentForm,
-            buttonText: t('createNewAppointment', 'Create new appointment'),
-            overlayHeader: t('createNewAppointment', 'Create new appointment'),
-            buttonProps: {
-              kind: 'primary',
-              renderIcon: (props) => <Hospital size={32} {...props} />,
-              size: responsiveSize,
-            },
-          }}
-        />
+        <Button
+          kind="primary"
+          renderIcon={(props) => <Hospital size={32} {...props} />}
+          size={responsiveSize}
+          onClick={() => launchCreateAppointmentForm(t)}>
+          {t('createNewAppointment', 'Create new appointment')}
+        </Button>
       </div>
     </div>
   );

package/src/patient-appointments/patient-appointments-action-menu.component.tsx

@@ -15,11 +15,7 @@ export const PatientAppointmentsActionMenu = ({ appointment, patientUuid }: appo
   const isTablet = useLayoutType() === 'tablet';
 
   const handleLaunchEditAppointmentForm = () => {
-    launchWorkspace2('appointments-form-workspace', {
-      appointment,
-      context: 'editing',
-      patientUuid,
-    });
+    launchWorkspace2('appointments-form-workspace', { appointment, patientUuid });
   };
 
   const handleLaunchCancelAppointmentModal = () => {