added default values

src/scheduling/appointments/AppointmentDetailForm.tsx

@@ -1,4 +1,5 @@
 import { Select, Label, Alert } from '@hospitalrun/components'
+import { addMinutes, roundToNearestMinutes } from 'date-fns'
 import moment from 'moment'
 import React, { useEffect, useState } from 'react'
 import { AsyncTypeahead } from 'react-bootstrap-typeahead'
@@ -25,6 +26,25 @@ const AppointmentDetailForm = (props: Props) => {
   const [options, setOptions] = useState<any[]>([])
   const [isLoading, setIsLoading] = useState<boolean>(false)
 
+  const startDateTime = roundToNearestMinutes(new Date(), { nearestTo: 15 })
+  const endDateTime = addMinutes(startDateTime, 60)
+
+  if (!appointment.start) {
+    appointment.start = String(new Date(Date.now()))
+  }
+
+  if (!appointment.end) {
+    appointment.end = String(endDateTime)
+  }
+
+  if (!appointment.minutesDuration) {
+    appointment.minutesDuration = Math.round(
+      Math.floor(
+        (new Date(appointment.end).getTime() - new Date(appointment.start).getTime()) / 60000 / 5,
+      ) * 5,
+    )
+  }
+
   // const selectedValues: any[] = []
 
   // const patientName: string = String(patient)
@@ -57,7 +77,7 @@ const AppointmentDetailForm = (props: Props) => {
             <AsyncTypeahead
               id="patientTypeahead"
               disabled={!isEditable}
-              defaultInputValue={String(patient)}
+              defaultInputValue={patient ? String(patient) : ''}
               placeholder={t('scheduling.appointment.patient')}
               onChange={(p: any) => {
                 appointment.patientId = p[0] && p[0].resource.id
@@ -107,7 +127,7 @@ const AppointmentDetailForm = (props: Props) => {
             value={
               appointment?.start && appointment.minutesDuration
                 ? moment(appointment.start).add(appointment.minutesDuration, 'minute').toDate()
-                : new Date(Date.now())
+                : endDateTime
             }
             isEditable={isEditable}
             onChange={(date: Date) => {

src/scheduling/appointments/edit/EditAppointment.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react'
 import { useHistory, useParams } from 'react-router-dom'
 import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumbs'
 import { useUpdateTitle } from '../../../page-header/title/TitleContext'
+import Loading from '../../../shared/components/Loading'
 import useTranslator from '../../../shared/hooks/useTranslator'
 import Appointment from '../../../shared/model/Appointment'
 import Patient from '../../../shared/model/Patient'
@@ -23,9 +24,11 @@ const EditAppointment = () => {
 
   const [appointment, setAppointment] = useState({} as Appointment)
   const [patientName, setPatientName] = useState<Patient>()
+  const [isLoading, setIsLoading] = useState(true)
 
   const appointmentFunc = async () => {
     setAppointment(await getAppointmentId(id))
+    setIsLoading(false)
   }
 
   const patientFunc = async () => {
@@ -90,6 +93,10 @@ const EditAppointment = () => {
   //   return <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
   // }
 
+  if (isLoading || appointment === undefined) {
+    return <Loading />
+  }
+
   return (
     <>
       {patientName && appointment ? (

src/scheduling/appointments/new/NewAppointment.tsx

@@ -68,10 +68,10 @@ const NewAppointment = () => {
 
   const onSave = async () => {
     console.log(newAppointment)
-    let data = await createAppointment(newAppointment)
-    console.log('data', await data)
-    setAptId(await data)
-    setSaved(true)
+    let { id, status } = await createAppointment(newAppointment)
+    console.log('id: ' + id + ' ' + 'status: ' + status)
+    setAptId(id)
+    if (status === 'success') setSaved(true)
     setError(validateNewAppointment(newAppointment))
   }
 

src/scheduling/appointments/service/Appointments.tsx

@@ -53,7 +53,7 @@ export const createAppointment = (appointment: Appointment) => {
       description: '',
       meta: {},
       created: new Date(Date.now()),
-      status: appointment.status,
+      status: appointment.status ? appointment.status : 'Scheduled',
       participant: [
         {
           actor: {
@@ -99,16 +99,14 @@ export const createAppointment = (appointment: Appointment) => {
           {
             system: 'https://hl7.org/fhir/v2/ValueSet/appointment-type',
             code: `${
-              appointment.appointmentType.text ? appointment.appointmentType.text : 'Routine visit'
+              appointment.appointmentType ? appointment.appointmentType.text : 'Routine Visit'
             }`,
             display: `${
-              appointment.appointmentType.text ? appointment.appointmentType.text : 'Routine visit'
+              appointment.appointmentType ? appointment.appointmentType.text : 'Routine Visit'
             }`,
           },
         ],
-        text: `${
-          appointment.appointmentType.text ? appointment.appointmentType.text : 'Routine visit'
-        }`,
+        text: `${appointment.appointmentType ? appointment.appointmentType.text : 'Routine Visit'}`,
       },
       patientInstruction: null,
       contained: [],
@@ -122,8 +120,8 @@ export const createAppointment = (appointment: Appointment) => {
     .then(async (response) => {
       console.log(response)
       const data = response.data
-      console.log(data.data.id)
-      return data.data.id
+      console.log(data.data)
+      return data.data
     })
     .catch((error) => {
       console.log(error)

src/scheduling/appointments/view/ViewAppointment.tsx

@@ -2,10 +2,10 @@ import { Spinner, Button, Modal, Toast } from '@hospitalrun/components'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { useHistory, useParams } from 'react-router-dom'
-
-// import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumbs'
+import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumbs'
 import { useButtonToolbarSetter } from '../../../page-header/button-toolbar/ButtonBarProvider'
 import { useUpdateTitle } from '../../../page-header/title/TitleContext'
+import Loading from '../../../shared/components/Loading'
 // import usePatient from '../../../patients/hooks/usePatient'
 import useTranslator from '../../../shared/hooks/useTranslator'
 import Appointment from '../../../shared/model/Appointment'
@@ -17,6 +17,7 @@ import { RootState } from '../../../shared/store'
 import AppointmentDetailForm from '../AppointmentDetailForm'
 import { deleteAppointment, getAppointmentId } from '../service/Appointments'
 import { getPatientNameById } from '../service/Patients'
+import { getAppointmentLabel } from '../util/scheduling-appointment.util'
 // import { getAppointmentLabel } from '../util/scheduling-appointment.util'
 // import { Appointment } from '../ViewAppointments'
 
@@ -41,9 +42,11 @@ const ViewAppointment = () => {
 
   const [appointment, setAppointment] = useState<Appointment>()
   const [patientName, setPatientName] = useState<Patient>()
+  const [isLoading, setIsLoading] = useState(true)
 
   const appointmentFunc = async () => {
     setAppointment(await getAppointmentId(id))
+    setIsLoading(false)
   }
 
   const patientFunc = async () => {
@@ -67,11 +70,11 @@ const ViewAppointment = () => {
   }, [appointment])
 
   // const { data: patient } = usePatient(appointment ? appointment.patient : id)
-  // const breadcrumbs = [
-  //   { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
-  //   { text: appointment ? getAppointmentLabel(appointment) : '', location: `/patients/${id}` },
-  // ]
-  // useAddBreadcrumbs(breadcrumbs, true)
+  const breadcrumbs = [
+    { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
+    { text: appointment ? getAppointmentLabel(appointment) : '', location: `/patients/${id}` },
+  ]
+  useAddBreadcrumbs(breadcrumbs, true)
 
   const onAppointmentDeleteButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault()
@@ -142,6 +145,10 @@ const ViewAppointment = () => {
     }
   }, [getButtons, setButtonToolBar])
 
+  if (isLoading || appointment === undefined) {
+    return <Loading />
+  }
+
   return (
     <>
       {patientName && appointment ? (

src/shared/components/input/DateTimePickerWithLabelFormGroup.tsx

@@ -40,6 +40,8 @@ const DateTimePickerWithLabelFormGroup = (props: Props) => {
         withPortal={false}
         minDate={moment().toDate()}
         maxDate={moment().add(3, 'months').toDate()}
+        minTime={moment().toDate()}
+        maxTime={new Date(new Date().setHours(19, 0, 0, 0))}
       />
     </div>
   )