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
/
NewLabRequest.tsx
126 lines (115 loc) · 3.83 KB
/
NewLabRequest.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
114
115
116
117
118
119
120
121
122
123
124
125
126
import React, { useState } from 'react'
import useTitle from 'page-header/useTitle'
import { useTranslation } from 'react-i18next'
import { Typeahead, Label, Button, Alert } from '@hospitalrun/components'
import PatientRepository from 'clients/db/PatientRepository'
import Patient from 'model/Patient'
import TextInputWithLabelFormGroup from 'components/input/TextInputWithLabelFormGroup'
import { useHistory } from 'react-router-dom'
import Lab from 'model/Lab'
import TextFieldWithLabelFormGroup from 'components/input/TextFieldWithLabelFormGroup'
import useAddBreadcrumbs from 'breadcrumbs/useAddBreadcrumbs'
import { useDispatch, useSelector } from 'react-redux'
import { requestLab } from 'labs/lab-slice'
import { RootState } from 'store'
const NewLabRequest = () => {
const { t } = useTranslation()
const dispatch = useDispatch()
const history = useHistory()
useTitle(t('labs.requests.new'))
const { status, error } = useSelector((state: RootState) => state.lab)
const [newLabRequest, setNewLabRequest] = useState({
patientId: '',
type: '',
notes: '',
status: 'requested',
})
const breadcrumbs = [
{
i18nKey: 'labs.requests.new',
location: `/labs/new`,
},
]
useAddBreadcrumbs(breadcrumbs)
const onPatientChange = (patient: Patient) => {
setNewLabRequest((previousNewLabRequest) => ({
...previousNewLabRequest,
patientId: patient.id,
}))
}
const onLabTypeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const type = event.currentTarget.value
setNewLabRequest((previousNewLabRequest) => ({
...previousNewLabRequest,
type,
}))
}
const onNoteChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
const notes = event.currentTarget.value
setNewLabRequest((previousNewLabRequest) => ({
...previousNewLabRequest,
notes,
}))
}
const onSave = async () => {
const newLab = newLabRequest as Lab
const onSuccess = (createdLab: Lab) => {
history.push(`/labs/${createdLab.id}`)
}
dispatch(requestLab(newLab, onSuccess))
}
const onCancel = () => {
history.push('/labs')
}
return (
<>
{status === 'error' && (
<Alert color="danger" title={t('states.error')} message={t(error.message || '')} />
)}
<form>
<div className="form-group patient-typeahead">
<Label htmlFor="patientTypeahead" isRequired text={t('labs.lab.patient')} />
<Typeahead
id="patientTypeahead"
placeholder={t('labs.lab.patient')}
onChange={(p: Patient[]) => onPatientChange(p[0])}
onSearch={async (query: string) => PatientRepository.search(query)}
searchAccessor="fullName"
renderMenuItemChildren={(p: Patient) => <div>{`${p.fullName} (${p.code})`}</div>}
isInvalid={!!error.patient}
/>
</div>
<TextInputWithLabelFormGroup
name="labType"
label={t('labs.lab.type')}
isRequired
isEditable
isInvalid={!!error.type}
feedback={t(error.type as string)}
value={newLabRequest.type}
onChange={onLabTypeChange}
/>
<div className="form-group">
<TextFieldWithLabelFormGroup
name="labNotes"
label={t('labs.lab.notes')}
isEditable
value={newLabRequest.notes}
onChange={onNoteChange}
/>
</div>
<div className="row float-right">
<div className="btn-group btn-group-lg mt-3">
<Button className="mr-2" color="success" onClick={onSave}>
{t('actions.save')}
</Button>
<Button color="danger" onClick={onCancel}>
{t('actions.cancel')}
</Button>
</div>
</div>
</form>
</>
)
}
export default NewLabRequest