Skip to content

Commit

Permalink
integrated update appointment and delete appointment
Browse files Browse the repository at this point in the history
  • Loading branch information
@divija-zemoso
divija-zemoso committed Sep 29, 2022
1 parent 3844b05 commit 44357eb
Show file tree
Hide file tree
Showing 5 changed files with 200 additions and 102 deletions.
19 changes: 11 additions & 8 deletions src/scheduling/appointments/AppointmentDetailForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Select, Label, Alert } from '@hospitalrun/components'
import moment from 'moment'
import React, { useEffect, useState } from 'react'
import { AsyncTypeahead } from 'react-bootstrap-typeahead'
import DateTimePickerWithLabelFormGroup from '../../shared/components/input/DateTimePickerWithLabelFormGroup'
Expand Down Expand Up @@ -55,7 +56,7 @@ const AppointmentDetailForm = (props: Props) => {
/>
<AsyncTypeahead
id="patientTypeahead"
disabled={!isEditable || patient !== undefined}
disabled={!isEditable}
defaultInputValue={String(patient)}
placeholder={t('scheduling.appointment.patient')}
onChange={(p: any) => {
Expand Down Expand Up @@ -88,7 +89,7 @@ const AppointmentDetailForm = (props: Props) => {
<DateTimePickerWithLabelFormGroup
name="startDate"
label={t('scheduling.appointment.startDate')}
value={appointment.start ? new Date(appointment.start) : new Date(Date.now())}
value={appointment?.start ? new Date(appointment.start) : new Date(Date.now())}
isEditable={isEditable}
isInvalid={error?.startDateTime}
feedback={t(error?.startDateTime)}
Expand All @@ -103,15 +104,17 @@ const AppointmentDetailForm = (props: Props) => {
<DateTimePickerWithLabelFormGroup
name="endDate"
label={t('scheduling.appointment.endDate')}
value={appointment.end ? new Date(appointment.end) : new Date(Date.now())}
value={
appointment?.start && appointment.minutesDuration
? moment(appointment.start).add(appointment.minutesDuration, 'minute').toDate()
: new Date(Date.now())
}
isEditable={isEditable}
onChange={(date: Date) => {
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()
var difference =
new Date(appointment.end).getTime() - new Date(appointment.start).getTime()
appointment.minutesDuration = Math.round(difference / 60000)
if (setAppointment) setAppointment(appointment)
}}
isRequired
Expand Down
157 changes: 75 additions & 82 deletions src/scheduling/appointments/edit/EditAppointment.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,15 @@
// import { Spinner, Button, Toast } from '@hospitalrun/components'
import { Spinner, Button } from '@hospitalrun/components'
// import isEmpty from 'lodash/isEmpty'
import { Button, Spinner, Toast } from '@hospitalrun/components'
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 usePatient from '../../../patients/hooks/usePatient'
import useTranslator from '../../../shared/hooks/useTranslator'
// import Appointment from '../../../shared/model/Appointment'
import useAppointment from '../../hooks/useAppointment'
// import useUpdateAppointment from '../../hooks/useUpdateAppointment'
import Appointment from '../../../shared/model/Appointment'
import Patient from '../../../shared/model/Patient'
import AppointmentDetailForm from '../AppointmentDetailForm'
import { getAppointmentId, updateAppointment } from '../service/Appointments'
import { getPatientNameById } from '../service/Patients'
import { getAppointmentLabel } from '../util/scheduling-appointment.util'
// import { Appointment } from '../ViewAppointments'

const EditAppointment = () => {
const { t } = useTranslator()
Expand All @@ -25,23 +21,42 @@ const EditAppointment = () => {
}, [updateTitle, t])
const history = useHistory()

const [newAppointment, setAppointment] = useState<any>()
const { data: currentAppointment, isLoading: isLoadingAppointment } = useAppointment(id)
const [appointment, setAppointment] = useState({} as Appointment)
const [patientName, setPatientName] = useState<Patient>()

// const {
// mutate: updateMutate,
// isLoading: isLoadingUpdate,
// isError: isErrorUpdate,
// error: updateMutateError,
// } = useUpdateAppointment(newAppointment)
const { data: patient } = usePatient(
currentAppointment ? currentAppointment.participant[0].actor : id,
)
const appointmentFunc = async () => {
setAppointment(await getAppointmentId(id))
}

const patientFunc = async () => {
if (Array.isArray(appointment.participant))
setPatientName(
await getPatientNameById(
parseInt(String(appointment?.participant[0].actor.reference.substr(8))),
),
)
}

useEffect(() => {
console.log(id)
appointmentFunc()
}, [])

useEffect(() => {
if (appointment) {
console.log('view appointment', appointment)
patientFunc()
}
}, [appointment])

useEffect(() => {
console.log('editing appointment', appointment)
}, [appointment])

const breadcrumbs = [
{ i18nKey: 'scheduling.appointments.label', location: '/appointments' },
{
text: getAppointmentLabel(currentAppointment),
text: getAppointmentLabel(appointment),
location: `/appointments/${id}`,
},
{
Expand All @@ -51,79 +66,57 @@ const EditAppointment = () => {
]
useAddBreadcrumbs(breadcrumbs, true)

useEffect(() => {
if (currentAppointment !== undefined) {
setAppointment(currentAppointment)
}
}, [currentAppointment])

const onCancel = () => {
history.push(`/appointments/${newAppointment.id}`)
history.push(`/appointments/${id}`)
}

// const onSave = () => {
// if (isEmpty(updateMutateError) && !isErrorUpdate) {
// updateMutate(newAppointment).then(() => {
// Toast('success', t('states.success'), t('scheduling.appointment.successfullyUpdated'))
// history.push(`/appointments/${newAppointment.id}`)
// })
// }
// }

const onFieldChange = (key: string, value: string | boolean | Date | number) => {
setAppointment({
...newAppointment,
[key]: value,
})
const onSave = async () => {
console.log(appointment)
let { id, status } = await updateAppointment(appointment)
console.log('response id', id)
console.log('response status', status)
if (status === 'success') {
console.log('updated the values successfully')
Toast('success', t('states.success'), t('scheduling.appointment.successfullyUpdated'))
history.push(`/appointments/${id}`)
}
}

// if (isLoadingAppointment || isLoadingUpdate) {
// return <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
// }

if (isLoadingAppointment) {
return <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
}
// if (isLoadingAppointment) {
// return <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
// }

return (
// <div>
// <AppointmentDetailForm
// isEditable
// appointment={newAppointment}
// patient={patient}
// onFieldChange={onFieldChange}
// error={updateMutateError}
// />
// <div className="row float-right">
// <div className="btn-group btn-group-lg mr-3">
// <Button className="mr-2" color="success" onClick={onSave}>
// {t('scheduling.appointments.updateAppointment')}
// </Button>
// <Button color="danger" onClick={onCancel}>
// {t('actions.cancel')}
// </Button>
// </div>
// </div>
// </div>

<div>
<AppointmentDetailForm
isEditable
appointment={newAppointment}
patient={patient}
onFieldChange={onFieldChange}
/>
<div className="row float-right">
<div className="btn-group btn-group-lg mr-3">
<Button className="mr-2" color="success">
{t('scheduling.appointments.updateAppointment')}
</Button>
<Button color="danger" onClick={onCancel}>
{t('actions.cancel')}
</Button>
<>
{patientName && appointment ? (
<div>
<AppointmentDetailForm
isEditable
appointment={appointment}
patient={patientName}
setAppointment={(appointmentDetail) => {
setAppointment({ ...appointmentDetail })
}}
/>
<div className="row float-right">
<div className="btn-group btn-group-lg mr-3">
<Button className="mr-2" color="success" onClick={onSave}>
{t('scheduling.appointments.updateAppointment')}
</Button>
<Button color="danger" onClick={onCancel}>
{t('actions.cancel')}
</Button>
</div>
</div>
</div>
</div>
</div>
) : (
<Spinner type="BarLoader" loading />
)}
</>
)
}

Expand Down
6 changes: 0 additions & 6 deletions src/scheduling/appointments/new/NewAppointment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,12 +71,6 @@ const NewAppointment = () => {
let data = await createAppointment(newAppointment)
console.log('data', await data)
setAptId(await data)
// console.log('@@@@@', await data)
// setAptId(await data)
// console.log('%%%%', aptId)
// newAppointment.id = String(aptId)
// setAppointment({ ...newAppointment })
// console.log(newAppointment)
setSaved(true)
setError(validateNewAppointment(newAppointment))
}
Expand Down
98 changes: 98 additions & 0 deletions src/scheduling/appointments/service/Appointments.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,3 +129,101 @@ export const createAppointment = (appointment: Appointment) => {
console.log(error)
})
}

export const updateAppointment = (appointment: Appointment) => {
console.log(appointment)
const data = {
data: {
resourceType: 'Appointment',
start: new Date(appointment.start),
minutesDuration: appointment.minutesDuration,
description: '',
meta: {},
created: new Date(Date.now()),
status: appointment.status,
participant: [
{
actor: {
reference: `Patient/${appointment?.participant[0].actor.reference.substring(8)}`,
},
},
{
actor: {
reference: 'Practitioner/140857915539458',
},
},
{
actor: {
reference: 'HealthcareService/140857911017476',
},
},
],
extension: [
{
url: 'http://xcaliber-fhir/structureDefinition/slot-type',
valueString: 'appointment',
},
{
url: 'http://xcaliber-fhir/structureDefinition/appointment-mode',
valueString: 'IN_PERSON',
},
{
url: 'http://xcaliber-fhir/structureDefinition/status',
extension: [
{
url: 'http://xcaliber-fhir/structureDefinition/status',
valueString: `${appointment.status ? appointment.status : 'Scheduled'}`,
},
{
url: 'http://xcaliber-fhir/structureDefinition/room',
valueString: null,
},
],
},
],
appointmentType: {
coding: [
{
system: 'https://hl7.org/fhir/v2/ValueSet/appointment-type',
code: `${
appointment.appointmentType.text ? appointment.appointmentType.text : 'Routine visit'
}`,
display: `${
appointment.appointmentType.text ? appointment.appointmentType.text : 'Routine visit'
}`,
},
],
text: `${
appointment.appointmentType.text ? appointment.appointmentType.text : 'Routine visit'
}`,
},
patientInstruction: null,
contained: [],
},
}

console.log(data)
return axios
.put(`${endpoint}/Appointment/${appointment.id}`, data, config)
.then(async (response) => {
console.log(response)
const data = response.data
console.log(data.data)
return data.data
})
.catch((error) => {
console.log(error)
})
}

export const deleteAppointment = (id: number) => {
return axios
.delete(`${endpoint}/Appointment/${id}`, config)
.then((response) => {
console.log(response)
return 'success'
})
.catch((error) => {
console.log(error)
})
}
Loading

0 comments on commit 44357eb

Please sign in to comment.