creating a new appointment

src/patients/appointments/AppointmentsList.tsx

@@ -61,15 +61,22 @@ const AppointmentsList = ({ patient }: Props) => {
                   label: t('scheduling.appointment.startDate'),
                   key: 'startDateTime',
                   formatter: (row) =>
-                    row.startDateTime
-                      ? format(new Date(row.startDateTime), 'yyyy-MM-dd, hh:mm a')
-                      : '',
+                    row.start ? format(new Date(row.start), 'yyyy-MM-dd, hh:mm a') : '',
                 },
                 {
                   label: t('scheduling.appointment.endDate'),
                   key: 'endDateTime',
                   formatter: (row) =>
-                    row.endDateTime ? format(new Date(row.endDateTime), 'yyyy-MM-dd, hh:mm a') : '',
+                    row.start
+                      ? format(
+                          new Date(
+                            new Date(row.start).setMinutes(
+                              new Date(row.start).getMinutes() + row.minutesDuration,
+                            ),
+                          ),
+                          'yyyy-MM-dd, hh:mm a',
+                        )
+                      : '',
                 },
                 { label: t('scheduling.appointment.location'), key: 'location' },
                 { label: t('scheduling.appointment.type'), key: 'type' },

src/patients/history/mappers/helpers.tsx

@@ -35,20 +35,22 @@ export const convertLab = (lab: Lab): PatientHistoryRecord[] => {
 
 export const convertAppointment = (appt: Appointment): PatientHistoryRecord[] => {
   const apptEvents = []
-  if (appt.startDateTime) {
+  if (appt.start) {
     apptEvents.push({
-      date: new Date(appt.startDateTime),
+      date: new Date(appt.start),
       type: HistoryRecordType.APPOINTMENT,
-      info: `Started - ${appt.type}`,
+      info: `Started - ${appt.appointmentType.text}`,
       recordId: appt.id,
       id: `startedAppt${appt.id}`,
     })
   }
-  if (appt.endDateTime) {
+  if (new Date(appt.start).setMinutes(new Date(appt.start).getMinutes() + appt.minutesDuration)) {
     apptEvents.push({
-      date: new Date(appt.endDateTime),
+      date: new Date(
+        new Date(appt.start).setMinutes(new Date(appt.start).getMinutes() + appt.minutesDuration),
+      ),
       type: HistoryRecordType.APPOINTMENT,
-      info: `Ended - ${appt.type}`,
+      info: `Ended - ${appt.appointmentType.text}`,
       recordId: appt.id,
       id: `endedAppt${appt.id}`,
     })

src/scheduling/appointments/AppointmentDetailForm.tsx

@@ -1,63 +1,46 @@
-// import { Select, Typeahead, Label, Alert } from '@hospitalrun/components'
 import { Select, Label, Alert } from '@hospitalrun/components'
-import React from 'react'
-
+import React, { useEffect, useState } from 'react'
+import { AsyncTypeahead } from 'react-bootstrap-typeahead'
 import DateTimePickerWithLabelFormGroup from '../../shared/components/input/DateTimePickerWithLabelFormGroup'
-// import { SelectOption } from '../../shared/components/input/SelectOption'
-import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
-// import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup'
-// import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
-// import PatientRepository from '../../shared/db/PatientRepository'
 import useTranslator from '../../shared/hooks/useTranslator'
+import Appointment from '../../shared/model/Appointment'
 import Patient from '../../shared/model/Patient'
-// import { Appointment } from './ViewAppointments'
 import { appointmentTypes, appointmentStatus } from '../appointments/constants/Appointment'
-
-export interface Appointment {
-  appointmentType: {
-    text: string
-  }
-  participant: {
-    actor: {
-      reference: string
-    }
-  }[]
-  id: string
-  start: Date
-  minutesDuration: number
-  status: string
-}
+import { getAllPatients } from './service/Patients'
 
 interface Props {
   appointment: Appointment
   patient?: Patient
   isEditable: boolean
   error?: any
-  onFieldChange?: (key: string, value: string | boolean) => void
+  onFieldChange?: (key: string, value: string | boolean | Date | number) => void
+  setAppointment?: (appointment: Appointment) => void
 }
 
 const AppointmentDetailForm = (props: Props) => {
-  const { onFieldChange, appointment, patient, isEditable, error } = props
+  const { appointment, patient, isEditable, error, setAppointment } = props
   const { t } = useTranslator()
+  const [patientDetails, setPatientDetails] = useState<any>()
+  const [options, setOptions] = useState<any[]>([])
+  const [isLoading, setIsLoading] = useState<boolean>(false)
 
-  const patientName: string = String(patient)
-
-  const onDateChange = (date: Date, fieldName: string) =>
-    onFieldChange && onFieldChange(fieldName, date.toISOString())
+  // const selectedValues: any[] = []
 
-  // const onInputElementChange = (event: React.ChangeEvent<HTMLInputElement>, fieldName: string) =>
-  //   onFieldChange && onFieldChange(fieldName, event.target.value)
+  // const patientName: string = String(patient)
+  // console.log(patientName)
+  // if (patientName) {
+  //   selectedValues.push(patientName)
+  //   console.log('selected values', selectedValues)
+  // }
 
-  // const typeOptions: SelectOption[] = [
-  //   { label: t('scheduling.appointment.types.checkup'), value: 'checkup' },
-  //   { label: t('scheduling.appointment.types.emergency'), value: 'emergency' },
-  //   { label: t('scheduling.appointment.types.followUp'), value: 'follow up' },
-  //   { label: t('scheduling.appointment.types.routine'), value: 'routine' },
-  //   { label: t('scheduling.appointment.types.walkIn'), value: 'walk in' },
-  // ]
-
-  var end = new Date(appointment.start)
-  end.setMinutes(end.getMinutes() + appointment.minutesDuration)
+  useEffect(() => {
+    console.log('appointment details', appointment)
+    if (!patientDetails) {
+      ;(async () => {
+        setPatientDetails(await getAllPatients())
+      })()
+    }
+  }, [])
 
   return (
     <>
@@ -70,24 +53,32 @@ const AppointmentDetailForm = (props: Props) => {
               isRequired
               text={t('scheduling.appointment.patient')}
             />
-            {/* <Typeahead
+            <AsyncTypeahead
               id="patientTypeahead"
               disabled={!isEditable || patient !== undefined}
-              value={patient}
+              defaultInputValue={String(patient)}
               placeholder={t('scheduling.appointment.patient')}
-              onChange={(p: Patient[]) =>
-                onFieldChange && p[0] && onFieldChange('patient', p[0].id)
-              }
-              onSearch={async (query: string) => PatientRepository.search(query)}
-              searchAccessor="fullName"
-              renderMenuItemChildren={(p: Patient) => <div>{`${p.fullName} (${p.code})`}</div>}
+              onChange={(p: any) => {
+                appointment.patientId = p[0] && p[0].resource.id
+              }}
+              onSearch={async (query: string) => {
+                setIsLoading(true)
+                setOptions(
+                  patientDetails?.filter((detail: any) =>
+                    String(detail.resource.name[0].text)
+                      .toLowerCase()
+                      .includes(query.toLowerCase()),
+                  ),
+                )
+                setIsLoading(false)
+              }}
+              options={options}
+              labelKey={(option) => `${option.resource?.name[0].text} `}
+              renderMenuItemChildren={(p: any) => {
+                return <div>{`${p.resource.name[0].text} ${p.resource.id}`}</div>
+              }}
               isInvalid={!!error?.patient}
-              feedback={t(error?.patient)}
-            /> */}
-            <TextInputWithLabelFormGroup
-              name="patientName"
-              value={patientName}
-              isEditable={isEditable}
+              isLoading={isLoading}
             />
           </div>
         </div>
@@ -97,40 +88,36 @@ const AppointmentDetailForm = (props: Props) => {
           <DateTimePickerWithLabelFormGroup
             name="startDate"
             label={t('scheduling.appointment.startDate')}
-            value={appointment.start ? new Date(appointment.start) : undefined}
+            value={appointment.start ? new Date(appointment.start) : new Date(Date.now())}
             isEditable={isEditable}
             isInvalid={error?.startDateTime}
             feedback={t(error?.startDateTime)}
             onChange={(date: Date) => {
-              onDateChange(date, 'startDateTime')
+              appointment.start = String(date)
+              if (setAppointment) setAppointment(appointment)
             }}
+            isRequired
           />
         </div>
         <div className="col">
           <DateTimePickerWithLabelFormGroup
             name="endDate"
             label={t('scheduling.appointment.endDate')}
-            value={appointment.start ? end : undefined}
+            value={appointment.end ? new Date(appointment.end) : new Date(Date.now())}
             isEditable={isEditable}
             onChange={(date: Date) => {
-              onDateChange(date, 'endDateTime')
+              appointment.end = String(date)
+              if (new Date(appointment.end) < new Date(appointment.start)) {
+                appointment.end = JSON.stringify(new Date(appointment.start))
+              }
+              appointment.minutesDuration =
+                new Date(appointment.end).getMinutes() - new Date(appointment.start).getMinutes()
+              if (setAppointment) setAppointment(appointment)
             }}
+            isRequired
           />
         </div>
       </div>
-      {/* <div className="row">
-        <div className="col">
-          <TextInputWithLabelFormGroup
-            name="location"
-            label={t('scheduling.appointment.location')}
-            value={appointment.location}
-            isEditable={isEditable}
-            onChange={(event) => {
-              onInputElementChange(event, 'location')
-            }}
-          />
-        </div>
-      </div> */}
       <div className="row">
         <div className="col">
           <div className="form-group" data-testid="typeSelect">
@@ -139,9 +126,12 @@ const AppointmentDetailForm = (props: Props) => {
               id="type"
               options={appointmentTypes}
               defaultSelected={appointmentTypes.filter(
-                ({ value }) => value === appointment.appointmentType.text,
+                ({ value }) => value === appointment?.appointmentType?.text,
               )}
-              // onChange={(values) => onFieldChange && onFieldChange('type', values[0])}
+              onChange={(values) => {
+                appointment.appointmentType = { text: values[0] }
+                if (setAppointment) setAppointment(appointment)
+              }}
               disabled={!isEditable}
             />
           </div>
@@ -155,29 +145,17 @@ const AppointmentDetailForm = (props: Props) => {
               id="status"
               options={appointmentStatus}
               defaultSelected={appointmentStatus.filter(
-                ({ value }) => value === appointment.status,
+                ({ value }) => value == appointment?.status,
               )}
-              // onChange={(values) => onFieldChange && onFieldChange('type', values[0])}
+              onChange={(values) => {
+                appointment.status = values[0]
+                if (setAppointment) setAppointment(appointment)
+              }}
               disabled={!isEditable}
             />
           </div>
         </div>
       </div>
-      {/* <div className="row">
-        <div className="col">
-          <div className="form-group">
-            <TextFieldWithLabelFormGroup
-              name="reason"
-              label={t('scheduling.appointment.reason')}
-              value={appointment.reason}
-              isEditable={isEditable}
-              onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) =>
-                onFieldChange && onFieldChange('reason', event.currentTarget.value)
-              }
-            />
-          </div>
-        </div>
-      </div> */}
     </>
   )
 }

src/scheduling/appointments/ViewAppointments.tsx

@@ -1,13 +1,13 @@
 import { Calendar, Button } from '@hospitalrun/components'
 import React, { useEffect, useState } from 'react'
 import { useHistory } from 'react-router-dom'
-
 import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
 import { useButtonToolbarSetter } from '../../page-header/button-toolbar/ButtonBarProvider'
 import { useUpdateTitle } from '../../page-header/title/TitleContext'
 import FilterPatientModal from '../../patients/visits/FilterPatientModal'
 import Loading from '../../shared/components/Loading'
 import useTranslator from '../../shared/hooks/useTranslator'
+import Appointment from '../../shared/model/Appointment'
 import { getAppointment } from './service/Appointments'
 import { getPatientNameById } from './service/Patients'
 
@@ -22,22 +22,22 @@ interface Event {
   status: string
 }
 
-export interface Appointment {
-  resource: {
-    appointmentType: {
-      text: string
-    }
-    participant: {
-      actor: {
-        reference: string
-      }
-    }[]
-    id: string
-    start: Date
-    minutesDuration: number
-    status: string
-  }
-}
+// export interface Appointment {
+//   resource: {
+//     appointmentType: {
+//       text: string
+//     }
+//     participant: {
+//       actor: {
+//         reference: string
+//       }
+//     }[]
+//     id: string
+//     start: Date
+//     minutesDuration: number
+//     status: string
+//   }
+// }
 
 const breadcrumbs = [{ i18nKey: 'scheduling.appointments.label', location: '/appointments' }]
 
@@ -48,14 +48,12 @@ const ViewAppointments = () => {
   useEffect(() => {
     updateTitle(t('scheduling.appointments.label'))
   })
-  // const { data: appointments, isLoading } = useAppointments()
   const [appointments, setAppointment] = useState<any[]>()
   const [isLoading, setIsLoading] = useState(true)
   const [events, setEvents] = useState<Event[]>([])
   const setButtonToolBar = useButtonToolbarSetter()
   useAddBreadcrumbs(breadcrumbs, true)
   const [showFilter, setshowFilter] = useState(false)
-
   const [patientStatus, setpatientStatus] = useState('')
   const [appointmentType, setappointmentType] = useState('')
 
@@ -108,7 +106,7 @@ const ViewAppointments = () => {
 
   useEffect(() => {
     if (appointments) {
-      appointments.map(async (appointment: Appointment) => {
+      appointments.map(async (appointment: { resource: Appointment }) => {
         const patientName = await getPatientNameById(
           parseInt(String(appointment.resource.participant[0].actor.reference.substr(8))),
         )

src/scheduling/appointments/constants/Appointment.tsx

@@ -14,4 +14,5 @@ export const appointmentTypes: SelectOption[] = [
 export const appointmentStatus: SelectOption[] = [
   { label: 'Scheduled', value: 'Scheduled' },
   { label: 'Confirmed', value: 'Confirmed' },
+  { label: 'Checked In', value: 'Checked In' },
 ]

src/scheduling/appointments/edit/EditAppointment.tsx

@@ -34,7 +34,9 @@ const EditAppointment = () => {
   //   isError: isErrorUpdate,
   //   error: updateMutateError,
   // } = useUpdateAppointment(newAppointment)
-  const { data: patient } = usePatient(currentAppointment ? currentAppointment.patient : id)
+  const { data: patient } = usePatient(
+    currentAppointment ? currentAppointment.participant[0].actor : id,
+  )
 
   const breadcrumbs = [
     { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
@@ -68,7 +70,7 @@ const EditAppointment = () => {
   //   }
   // }
 
-  const onFieldChange = (key: string, value: string | boolean) => {
+  const onFieldChange = (key: string, value: string | boolean | Date | number) => {
     setAppointment({
       ...newAppointment,
       [key]: value,