O3-2827: Appointments: Refactor (Part I ?)

add back in all day functionality
openmrs · Feb 12, 2024 · f79a7a5 · f79a7a5
1 parent 2b5834b
commit f79a7a5
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 4 deletions.
diff --git a/packages/esm-appointments-app/src/config-schema.ts b/packages/esm-appointments-app/src/config-schema.ts
@@ -85,6 +85,11 @@ export const configSchema = {
       'Whether to show the Unscheduled Appointments tab. Note that configuring this to true requires a custom unscheduledAppointment endpoint not currently available',
     _default: false,
   },
+  allowAllDayAppointments: {
+    _type: Type.Boolean,
+    _description: 'Whether to allow scheduling of all-day appointments (vs appointments with start time and end time)',
+    _default: true,
+  },
 };
 
 export interface ConfigObject {
@@ -104,4 +109,5 @@ export interface ConfigObject {
   customPatientChartUrl: string;
   patientIdentifierType: string;
   showUnscheduledAppointmentsTab: boolean;
+  allowAllDayAppointments: boolean;
 }
diff --git a/packages/esm-appointments-app/src/form/appointments-form.component.tsx b/packages/esm-appointments-app/src/form/appointments-form.component.tsx
@@ -84,9 +84,10 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
   const locations = useLocations();
   const session = useSession();
   const { data: services, isLoading } = useAppointmentService();
-  const { appointmentStatuses, appointmentTypes } = useConfig<ConfigObject>();
+  const { appointmentStatuses, appointmentTypes, allowAllDayAppointments } = useConfig<ConfigObject>();
 
   const [isRecurringAppointment, setIsRecurringAppointment] = useState(false);
+  const [isAllDayAppointment, setIsAllDayAppointment] = useState(false);
 
   const defaultRecurringPatternType = recurringPattern?.type || 'DAY';
   const defaultRecurringPatternPeriod = recurringPattern?.period || 1;
@@ -396,6 +397,16 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
           <div>
             {isRecurringAppointment && (
               <div className={styles.inputContainer}>
+                {allowAllDayAppointments && (
+                  <Toggle
+                    id="allDayToggle"
+                    labelB={t('yes', 'Yes')}
+                    labelA={t('no', 'No')}
+                    labelText={t('allDay', 'All day')}
+                    onClick={() => setIsAllDayAppointment(!isAllDayAppointment)}
+                    toggled={isAllDayAppointment}
+                  />
+                )}
                 <ResponsiveWrapper isTablet={isTablet}>
                   <Controller
                     name="appointmentDateTime"
@@ -434,7 +445,9 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
                   />
                 </ResponsiveWrapper>
 
-                <TimeAndDuration control={control} isTablet={isTablet} services={services} watch={watch} t={t} />
+                {!isAllDayAppointment && (
+                  <TimeAndDuration isTablet={isTablet} control={control} services={services} watch={watch} t={t} />
+                )}
 
                 <ResponsiveWrapper isTablet={isTablet}>
                   <Controller
@@ -510,6 +523,16 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
 
             {!isRecurringAppointment && (
               <div className={styles.inputContainer}>
+                {allowAllDayAppointments && (
+                  <Toggle
+                    id="allDayToggle"
+                    labelB={t('yes', 'Yes')}
+                    labelA={t('no', 'No')}
+                    labelText={t('allDay', 'All day')}
+                    onClick={() => setIsAllDayAppointment(!isAllDayAppointment)}
+                    toggled={isAllDayAppointment}
+                  />
+                )}
                 <ResponsiveWrapper isTablet={isTablet}>
                   <Controller
                     name="appointmentDateTime"
@@ -532,14 +555,16 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
                   />
                 </ResponsiveWrapper>
 
-                <TimeAndDuration isTablet={isTablet} control={control} services={services} watch={watch} t={t} />
+                {!isAllDayAppointment && (
+                  <TimeAndDuration isTablet={isTablet} control={control} services={services} watch={watch} t={t} />
+                )}
               </div>
             )}
           </div>
         </section>
 
         {getValues('selectedService') && (
-          <section>
+          <section className={styles.formGroup}>
             <ResponsiveWrapper isTablet={isTablet}>
               <Workload
                 selectedService={watch('selectedService')}