@kenyaemr/esm-appointments-app 8.1.1-pre.124 → 8.1.2-pre.152

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

@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
+import { Controller, useController, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import {
   Button,
   ButtonSet,
@@ -20,9 +21,7 @@ import {
   TimePickerSelect,
   Toggle,
 } from '@carbon/react';
-import { Controller, useController, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
 import {
   ExtensionSlot,
   ResponsiveWrapper,
@@ -33,8 +32,11 @@ import {
   useLocations,
   usePatient,
   useSession,
+  type DefaultWorkspaceProps,
   type FetchResponse,
 } from '@openmrs/esm-framework';
+import { z } from 'zod';
+import { type ConfigObject } from '../config-schema';
 import {
   checkAppointmentConflict,
   saveAppointment,
@@ -42,9 +44,6 @@ import {
   useAppointmentService,
   useMutateAppointments,
 } from './appointments-form.resource';
-import { useProviders } from '../hooks/useProviders';
-import type { Appointment, AppointmentPayload, RecurringPattern } from '../types';
-import { type ConfigObject } from '../config-schema';
 import {
   appointmentLocationTagName,
   dateFormat,
@@ -53,30 +52,30 @@ import {
   moduleName,
   weekDays,
 } from '../constants';
+import { useProviders } from '../hooks/useProviders';
+import type { Appointment, AppointmentPayload, RecurringPattern } from '../types';
 import SelectedDateContext from '../hooks/selectedDateContext';
 import Workload from '../workload/workload.component';
 import styles from './appointments-form.scss';
 
-const time12HourFormatRegexPattern = '^(1[0-2]|0?[1-9]):[0-5][0-9]$';
-
-function isValidTime(timeStr) {
-  return timeStr.match(new RegExp(time12HourFormatRegexPattern));
-}
-
 interface AppointmentsFormProps {
   appointment?: Appointment;
   recurringPattern?: RecurringPattern;
   patientUuid?: string;
   context: string;
-  closeWorkspace: () => void;
 }
 
-const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
+const time12HourFormatRegexPattern = '^(1[0-2]|0?[1-9]):[0-5][0-9]$';
+
+const isValidTime = (timeStr: string) => timeStr.match(new RegExp(time12HourFormatRegexPattern));
+
+const AppointmentsForm: React.FC<AppointmentsFormProps & DefaultWorkspaceProps> = ({
   appointment,
   recurringPattern,
   patientUuid,
   context,
   closeWorkspace,
+  promptBeforeClosing,
 }) => {
   const { patient } = usePatient(patientUuid);
   const { mutateAppointments } = useMutateAppointments();
@@ -97,11 +96,10 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
 
   const [isRecurringAppointment, setIsRecurringAppointment] = useState(false);
   const [isAllDayAppointment, setIsAllDayAppointment] = useState(false);
-  const [isConflict, setIsConflict] = useState(false);
   const defaultRecurringPatternType = recurringPattern?.type || 'DAY';
   const defaultRecurringPatternPeriod = recurringPattern?.period || 1;
   const defaultRecurringPatternDaysOfWeek = recurringPattern?.daysOfWeek || [];
-
+  const [isSuccessful, setIsSuccessful] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   // TODO can we clean this all up to be more consistent between using Date and dayjs?
@@ -127,7 +125,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
   const defaultDuration =
     appointment?.startDateTime && appointment?.endDateTime
       ? dayjs(appointment.endDateTime).diff(dayjs(appointment.startDateTime), 'minutes')
-      : null;
+      : undefined;
 
   // t('durationErrorMessage', 'Duration should be greater than zero')
   const appointmentsFormSchema = z
@@ -156,7 +154,9 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
       recurringPatternPeriod: z.number(),
       recurringPatternDaysOfWeek: z.array(z.string()),
       selectedDaysOfWeekText: z.string().optional(),
-      startTime: z.string().refine((value) => isValidTime(value)),
+      startTime: z.string().refine((value) => isValidTime(value), {
+        message: translateFrom(moduleName, 'invalidTime', 'Invalid time'),
+      }),
       timeFormat: z.enum(['AM', 'PM']),
       appointmentDateTime: z.object({
         startDate: z.date(),
@@ -219,7 +219,8 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
     setValue,
     watch,
     handleSubmit,
-    formState: { errors },
+    reset,
+    formState: { errors, isDirty },
   } = useForm<AppointmentFormData>({
     mode: 'all',
     resolver: zodResolver(appointmentsFormSchema),
@@ -250,7 +251,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
     },
   });
 
-  useEffect(() => setValue('formIsRecurringAppointment', isRecurringAppointment), [isRecurringAppointment]);
+  useEffect(() => setValue('formIsRecurringAppointment', isRecurringAppointment), [isRecurringAppointment, setValue]);
 
   // Retrive ref callback for appointmentDateTime (startDate & recurringPatternEndDate)
   const {
@@ -268,12 +269,22 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
     endDateRef(endDateElement);
   }, [startDateRef, endDateRef]);
 
+  useEffect(() => {
+    if (isSuccessful) {
+      reset();
+      promptBeforeClosing(() => false);
+      closeWorkspace();
+      return;
+    }
+    promptBeforeClosing(() => isDirty);
+  }, [isDirty, promptBeforeClosing, isSuccessful, reset, closeWorkspace]);
+
   const handleWorkloadDateChange = (date: Date) => {
     const appointmentDate = getValues('appointmentDateTime');
     setValue('appointmentDateTime', { ...appointmentDate, startDate: date });
   };
 
-  const handleMultiselectChange = (e) => {
+  const handleSelectChange = (e) => {
     setValue(
       'selectedDaysOfWeekText',
       (() => {
@@ -338,7 +349,9 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
       appointmentRequest: appointmentPayload,
       recurringPattern: constructRecurringPattern(data),
     };
+
     const abortController = new AbortController();
+
     (isRecurringAppointment
       ? saveRecurringAppointments(recurringAppointmentPayload, abortController)
       : saveAppointment(appointmentPayload, abortController)
@@ -346,7 +359,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
       ({ status }) => {
         if (status === 200) {
           setIsSubmitting(false);
-          closeWorkspace();
+          setIsSuccessful(true);
           mutateAppointments();
           showSnackbar({
             isLowContrast: true,
@@ -442,15 +455,13 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
     };
   };
 
-  const onError = (error) => console.error(error);
-
   if (isLoading)
     return (
       <InlineLoading className={styles.loader} description={`${t('loading', 'Loading')} ...`} role="progressbar" />
     );
 
   return (
-    <Form onSubmit={handleSubmit(handleSaveAppointment, onError)}>
+    <Form onSubmit={handleSubmit(handleSaveAppointment)}>
       <Stack gap={4}>
         {patient && (
           <ExtensionSlot
@@ -468,16 +479,16 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
             <Controller
               name="location"
               control={control}
-              render={({ field: { onChange, value, onBlur, ref }, fieldState }) => (
+              render={({ field: { onChange, value, onBlur, ref } }) => (
                 <Select
                   id="location"
+                  invalid={!!errors?.location}
+                  invalidText={errors?.location?.message}
                   labelText={t('selectALocation', 'Select a location')}
                   onChange={onChange}
                   onBlur={onBlur}
-                  value={value}
                   ref={ref}
-                  invalid={!!fieldState?.error?.message}
-                  invalidText={fieldState?.error?.message}>
+                  value={value}>
                   <SelectItem text={t('chooseLocation', 'Choose a location')} value="" />
                   {locations?.length > 0 &&
                     locations.map((location) => (
@@ -496,10 +507,13 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
             <Controller
               name="selectedService"
               control={control}
-              render={({ field: { onBlur, onChange, value, ref }, fieldState }) => (
+              render={({ field: { onBlur, onChange, value, ref } }) => (
                 <Select
                   id="service"
+                  invalid={!!errors?.selectedService}
+                  invalidText={errors?.selectedService?.message}
                   labelText={t('selectService', 'Select a service')}
+                  onBlur={onBlur}
                   onChange={(event) => {
                     if (context === 'creating') {
                       setValue(
@@ -518,11 +532,8 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
                     }
                     onChange(event);
                   }}
-                  onBlur={onBlur}
-                  value={value}
                   ref={ref}
-                  invalid={!!fieldState?.error?.message}
-                  invalidText={fieldState?.error?.message}>
+                  value={value}>
                   <SelectItem text={t('chooseService', 'Select service')} value="" />
                   {services?.length > 0 &&
                     services.map((service) => (
@@ -541,17 +552,17 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
             <Controller
               name="appointmentType"
               control={control}
-              render={({ field: { onBlur, onChange, value, ref }, fieldState }) => (
+              render={({ field: { onBlur, onChange, value, ref } }) => (
                 <Select
                   disabled={!appointmentTypes?.length}
                   id="appointmentType"
+                  invalid={!!errors?.appointmentType}
+                  invalidText={errors?.appointmentType?.message}
                   labelText={t('selectAppointmentType', 'Select the type of appointment')}
+                  onBlur={onBlur}
                   onChange={onChange}
-                  value={value}
                   ref={ref}
-                  onBlur={onBlur}
-                  invalid={!!fieldState?.error?.message}
-                  invalidText={fieldState?.error?.message}>
+                  value={value}>
                   <SelectItem text={t('chooseAppointmentType', 'Choose appointment type')} value="" />
                   {appointmentTypes?.length > 0 &&
                     appointmentTypes.map((appointmentType, index) => (
@@ -629,7 +640,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
                 </ResponsiveWrapper>
 
                 {!isAllDayAppointment && (
-                  <TimeAndDuration isTablet={isTablet} control={control} services={services} watch={watch} t={t} />
+                  <TimeAndDuration control={control} errors={errors} services={services} watch={watch} t={t} />
                 )}
 
                 <ResponsiveWrapper>
@@ -681,21 +692,21 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
                       render={({ field: { onChange } }) => (
                         <MultiSelect
                           className={styles.weekSelect}
-                          label={getValues('selectedDaysOfWeekText')}
                           id="daysOfWeek"
+                          initialSelectedItems={weekDays.filter((i) =>
+                            getValues('recurringPatternDaysOfWeek').includes(i.id),
+                          )}
                           items={weekDays}
                           itemToString={(item) => (item ? t(item.labelCode, item.label) : '')}
+                          label={getValues('selectedDaysOfWeekText')}
+                          onChange={(e) => {
+                            onChange(e);
+                            handleSelectChange(e);
+                          }}
                           selectionFeedback="top-after-reopen"
                           sortItems={(items) => {
                             return items.sort((a, b) => a.order > b.order);
                           }}
-                          initialSelectedItems={weekDays.filter((i) => {
-                            return getValues('recurringPatternDaysOfWeek').includes(i.id);
-                          })}
-                          onChange={(e) => {
-                            onChange(e);
-                            handleMultiselectChange(e);
-                          }}
                         />
                       )}
                     />
@@ -743,7 +754,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
                 </ResponsiveWrapper>
 
                 {!isAllDayAppointment && (
-                  <TimeAndDuration isTablet={isTablet} control={control} services={services} watch={watch} t={t} />
+                  <TimeAndDuration control={control} services={services} watch={watch} t={t} errors={errors} />
                 )}
               </div>
             )}
@@ -754,9 +765,9 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
           <section className={styles.formGroup}>
             <ResponsiveWrapper>
               <Workload
-                selectedService={watch('selectedService')}
                 appointmentDate={watch('appointmentDateTime').startDate}
                 onWorkloadDateChange={handleWorkloadDateChange}
+                selectedService={watch('selectedService')}
               />
             </ResponsiveWrapper>
           </section>
@@ -769,11 +780,11 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
               <Controller
                 name="appointmentStatus"
                 control={control}
-                render={({ field: { onBlur, onChange, value, ref }, fieldState }) => (
+                render={({ field: { onBlur, onChange, value, ref } }) => (
                   <Select
                     id="appointmentStatus"
-                    invalid={!!fieldState?.error?.message}
-                    invalidText={fieldState?.error?.message}
+                    invalid={!!errors?.appointmentStatus}
+                    invalidText={errors?.appointmentStatus?.message}
                     labelText={t('selectAppointmentStatus', 'Select status')}
                     onChange={onChange}
                     value={value}
@@ -826,16 +837,16 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
             <Controller
               name="dateAppointmentScheduled"
               control={control}
-              render={({ field: { onChange, value, ref }, fieldState }) => (
+              render={({ field: { onChange, value, ref } }) => (
                 <div style={{ width: '100%' }}>
                   <DatePicker
                     datePickerType="single"
                     dateFormat={datePickerFormat}
-                    value={value}
+                    invalid={!!errors?.dateAppointmentScheduled}
+                    invalidText={errors?.dateAppointmentScheduled?.message}
                     maxDate={new Date().toISOString()}
                     onChange={([date]) => onChange(date)}
-                    invalid={!!fieldState?.error?.message}
-                    invalidText={fieldState?.error?.message}>
+                    value={value}>
                     <DatePickerInput
                       id="dateAppointmentScheduledPickerInput"
                       labelText={t('dateScheduledDetail', 'Date appointment issued')}
@@ -844,7 +855,6 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
                       ref={ref}
                     />
                   </DatePicker>
-                  {fieldState?.error?.message && <div className={styles.errorMessage}>{fieldState.error.message}</div>}
                 </div>
               )}
             />
@@ -884,7 +894,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
   );
 };
 
-function TimeAndDuration({ isTablet, t, watch, control, services }) {
+function TimeAndDuration({ t, watch, control, services, errors }) {
   const defaultDuration = services?.find((service) => service.name === watch('selectedService'))?.durationMins || null;
 
   return (
@@ -897,12 +907,14 @@ function TimeAndDuration({ isTablet, t, watch, control, services }) {
             <TimePicker
               id="time-picker"
               pattern={time12HourFormatRegexPattern}
-              invalid={!isValidTime(value)}
-              invalidText={t('invalidTime', 'Invalid time')}
-              onChange={(event) => onChange(event.target.value)}
-              value={value}
+              invalid={!!errors?.startTime}
+              invalidText={errors?.startTime?.message}
+              labelText={t('time', 'Time')}
+              onChange={(event) => {
+                onChange(event.target.value);
+              }}
               style={{ marginLeft: '0.125rem', flex: 'none' }}
-              labelText={t('time', 'Time')}>
+              value={value}>
               <Controller
                 name="timeFormat"
                 control={control}
@@ -925,22 +937,21 @@ function TimeAndDuration({ isTablet, t, watch, control, services }) {
         <Controller
           name="duration"
           control={control}
-          defaultValue={defaultDuration}
-          render={({ field: { onChange, onBlur, value, ref }, fieldState }) => (
+          render={({ field: { onChange, onBlur, value, ref } }) => (
             <NumberInput
-              hideSteppers
               disableWheel
+              hideSteppers
               id="duration"
-              min={0}
-              max={1440}
+              invalid={!!errors?.duration}
+              invalidText={errors?.duration?.message}
               label={t('durationInMinutes', 'Duration (minutes)')}
-              invalidText={t('invalidNumber', 'Number is not valid')}
-              size="md"
+              max={1440}
+              min={0}
               onBlur={onBlur}
               onChange={(event) => onChange(Number(event.target.value))}
-              value={value}
               ref={ref}
-              invalid={fieldState?.error?.message}
+              size="md"
+              value={value}
             />
           )}
         />

package/src/form/appointments-form.resource.ts

@@ -1,4 +1,6 @@
+import { useCallback } from 'react';
 import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
 import useSWR, { useSWRConfig } from 'swr';
 import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import {
@@ -7,12 +9,10 @@ import {
   type AppointmentsFetchResponse,
   type RecurringAppointmentsPayload,
 } from '../types';
-import isToday from 'dayjs/plugin/isToday';
-import { useCallback } from 'react';
 dayjs.extend(isToday);
 
-const appointmentUrlMatcher = '/ws/rest/v1/appointment';
-const appointmentsSearchUrl = '/ws/rest/v1/appointments/search';
+const appointmentUrlMatcher = `${restBaseUrl}/appointment`;
+const appointmentsSearchUrl = `${restBaseUrl}/appointments/search`;
 
 export function useMutateAppointments() {
   const { mutate } = useSWRConfig();

package/src/form/appointments-form.scss

@@ -36,7 +36,7 @@ $openmrs-background-grey: #ededed;
   display: flex;
   flex-flow: row wrap;
   gap: layout.$spacing-05;
-  align-items: center;
+  align-items: start;
 }
 
 .dateTimeFields {