This repository has been archived by the owner on Jan 9, 2023. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
/
ViewAppointment.tsx
113 lines (99 loc) · 3.48 KB
/
ViewAppointment.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import React, { useEffect, useState } from 'react'
import useTitle from 'page-header/useTitle'
import { useSelector, useDispatch } from 'react-redux'
import { RootState } from 'store'
import { useParams, useHistory } from 'react-router'
import { Spinner, Button, Modal, Toast } from '@hospitalrun/components'
import { useTranslation } from 'react-i18next'
import { useButtonToolbarSetter } from 'page-header/ButtonBarProvider'
import Permissions from 'model/Permissions'
import { fetchAppointment, deleteAppointment } from '../appointment-slice'
import AppointmentDetailForm from '../AppointmentDetailForm'
import { getAppointmentLabel } from '../util/scheduling-appointment.util'
import useAddBreadcrumbs from '../../../breadcrumbs/useAddBreadcrumbs'
const ViewAppointment = () => {
const { t } = useTranslation()
useTitle(t('scheduling.appointments.viewAppointment'))
const dispatch = useDispatch()
const { id } = useParams()
const history = useHistory()
const { appointment, patient, isLoading } = useSelector((state: RootState) => state.appointment)
const { permissions } = useSelector((state: RootState) => state.user)
const [showDeleteConfirmation, setShowDeleteConfirmation] = useState<boolean>(false)
const setButtonToolBar = useButtonToolbarSetter()
const onAppointmentDeleteButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault()
setShowDeleteConfirmation(true)
}
const onDeleteSuccess = () => {
history.push('/appointments')
Toast('success', t('states.success'), t('scheduling.appointment.successfullyDeleted'))
}
const onDeleteConfirmationButtonClick = () => {
dispatch(deleteAppointment(appointment, onDeleteSuccess))
setShowDeleteConfirmation(false)
}
const buttons = []
if (permissions.includes(Permissions.WriteAppointments)) {
buttons.push(
<Button
key="editAppointmentButton"
color="success"
icon="edit"
outlined
onClick={() => {
history.push(`/appointments/edit/${appointment.id}`)
}}
>
{t('actions.edit')}
</Button>,
)
}
if (permissions.includes(Permissions.DeleteAppointment)) {
buttons.push(
<Button
key="deleteAppointmentButton"
color="danger"
icon="appointment-remove"
onClick={onAppointmentDeleteButtonClick}
>
{t('scheduling.appointments.deleteAppointment')}
</Button>,
)
}
setButtonToolBar(buttons)
const breadcrumbs = [
{ i18nKey: 'scheduling.appointments.label', location: '/appointments' },
{ text: getAppointmentLabel(appointment), location: `/patients/${appointment.id}` },
]
useAddBreadcrumbs(breadcrumbs, true)
useEffect(() => {
if (id) {
dispatch(fetchAppointment(id))
}
return () => {
setButtonToolBar([])
}
}, [dispatch, id, setButtonToolBar])
if (!appointment.id || isLoading) {
return <Spinner type="BarLoader" loading />
}
return (
<div>
<AppointmentDetailForm appointment={appointment} isEditable={false} patient={patient} />
<Modal
body={t('scheduling.appointment.deleteConfirmationMessage')}
buttonsAlignment="right"
show={showDeleteConfirmation}
closeButton={{
children: t('actions.delete'),
color: 'danger',
onClick: onDeleteConfirmationButtonClick,
}}
title={t('actions.confirmDelete')}
toggle={() => setShowDeleteConfirmation(false)}
/>
</div>
)
}
export default ViewAppointment