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
/
NewRelatedPersonModal.tsx
114 lines (104 loc) · 3.45 KB
/
NewRelatedPersonModal.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
import React, { useState } from 'react'
import { Modal, Alert, Typeahead, Label } from '@hospitalrun/components'
import { useTranslation } from 'react-i18next'
import TextInputWithLabelFormGroup from 'components/input/TextInputWithLabelFormGroup'
import RelatedPerson from 'model/RelatedPerson'
import PatientRepository from 'clients/db/PatientRepository'
import Patient from 'model/Patient'
interface Props {
show: boolean
toggle: () => void
onCloseButtonClick: () => void
onSave: (relatedPerson: RelatedPerson) => void
}
const NewRelatedPersonModal = (props: Props) => {
const { show, toggle, onCloseButtonClick, onSave } = props
const { t } = useTranslation()
const [errorMessage, setErrorMessage] = useState('')
const [relatedPerson, setRelatedPerson] = useState({
patientId: '',
type: '',
})
const onFieldChange = (key: string, value: string) => {
setRelatedPerson({
...relatedPerson,
[key]: value,
})
}
const onInputElementChange = (event: React.ChangeEvent<HTMLInputElement>, fieldName: string) => {
onFieldChange(fieldName, event.target.value)
}
const onPatientSelect = (patient: Patient[]) => {
setRelatedPerson({ ...relatedPerson, patientId: patient[0].id })
}
const body = (
<form>
{errorMessage && <Alert color="danger" title={t('states.error')} message={errorMessage} />}
<div className="row">
<div className="col-md-12">
<div className="form-group">
<Label text={t('patient.relatedPerson')} htmlFor="relatedPersonTypeAhead" isRequired />
<Typeahead
id="relatedPersonTypeAhead"
searchAccessor="fullName"
placeholder={t('patient.relatedPerson')}
onChange={onPatientSelect}
onSearch={async (query: string) => PatientRepository.search(query)}
renderMenuItemChildren={(patient: Patient) => (
<div>{`${patient.fullName} (${patient.code})`}</div>
)}
/>
</div>
</div>
</div>
<div className="row">
<div className="col-md-12">
<TextInputWithLabelFormGroup
name="type"
label={t('patient.relatedPersons.relationshipType')}
value={relatedPerson.type}
isEditable
isRequired
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
onInputElementChange(event, 'type')
}}
/>
</div>
</div>
</form>
)
return (
<Modal
show={show}
toggle={toggle}
title={t('patient.relatedPersons.new')}
body={body}
closeButton={{
children: t('actions.cancel'),
color: 'danger',
onClick: onCloseButtonClick,
}}
successButton={{
children: t('patient.relatedPersons.new'),
color: 'success',
icon: 'add',
iconLocation: 'left',
onClick: () => {
let newErrorMessage = ''
if (!relatedPerson.patientId) {
newErrorMessage += `${t('patient.relatedPersons.error.relatedPersonRequired')} `
}
if (!relatedPerson.type) {
newErrorMessage += `${t('patient.relatedPersons.error.relationshipTypeRequired')}`
}
if (!newErrorMessage) {
onSave(relatedPerson as RelatedPerson)
} else {
setErrorMessage(newErrorMessage.trim())
}
},
}}
/>
)
}
export default NewRelatedPersonModal