Week8

LibreHealth

PROGRESS MADE THIS WEEK:

Hi, As discussed in the last week’s blog, Week 8 was to be used for the following tasks:

  • Completing the visit-provider workflow.
  • Completing the e-prescription workflow.
  • fixing build fail.

DESCRIPTION:

The above mentioned points were covered this week.

visit-provider workflow : this workflow was very much similar to the visit nurse workflow that was implemented last week.

  • The provider first finds the patient.
  • The provider selects the encounter under which the meeting will proceed.
  • The provider then gets directed to the dashboard where he/she can see the patient’s already existing observations and can create an observation report.
  • the provider can also create an order request.

Out of these the first 2 points were already implemented in the visit-nurse workflow.

The rendering of different screens is done using redux, each click when required changes a redux state that renders a different screen.

here is the reducer for this workflow:

pssing params to the search component

The editActivePage reducer is for changing the screen. The observation results shown require the Patient Id hence the Id is stored after the provider selects the patient.

All of these screens are a part of a custom High order Navbar component that renders different tabs based on state values.

here is the navbar component :

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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
import React, { useState, useRef } from 'react'
import PropTypes from 'prop-types'
import { useStyles } from './style'
import {
AppBar,
Tabs,
Tab,
Typography,
Box,
CssBaseline,
Container,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle
} from '@material-ui/core'
import ExittoApp from '@material-ui/icons/ExitToApp'
import logo from '../../assets/images/logosm.png'
import {
logout
} from '../../reducers/auth/authSlice'
import '@lh-toolkit/fhir-encounter/fhir-encounter.js'
import { useDispatch } from 'react-redux'
import { useHistory } from 'react-router-dom'
import { toast } from 'react-toastify'
import axios from 'axios'
import { config } from '../../config'
import 'react-toastify/dist/ReactToastify.css'

function TabPanel (props) {
const { children, value, index, ...other } = props

return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && (
<Box p={4}>
{children}
</Box>
)}
</div>
)
}

TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.any.isRequired,
value: PropTypes.any.isRequired
}

export const Navbar = ({ labels, component, encounterID, includeEncounter }) => {
const classes = useStyles()
const [value, setValue] = useState(0)
const dispatch = useDispatch()
const history = useHistory()
const [open, setOpen] = useState(false)
const [disablepost, setDisablePost] = useState(false)
const reference = useRef()

const handleClickOpen = async () => {
setOpen(true)
try {
const res = await axios.get(`${config.basename}Encounter/${encounterID}`)
if (res.status === 200) {
reference.current.value = res.data
}
} catch (error) {
console.log(error)
}
}

const handleClose = async () => {
try {
setDisablePost(true)
reference.current.value.resourceType = 'Encounter'
reference.current.value.id = encounterID
const res = await axios.put(`${config.basename}Encounter/${encounterID}`, reference.current.value)

if (res.status === 200) {
toast.dark('EDITED SUCCESSFULLY !')
setOpen(false)
}
} catch (error) {
// eslint-disable-next-line node/handle-callback-err
error.response.data.issue.forEach(err => {
toast.error(err.diagnostics)
})
} finally {
setDisablePost(false)
}
}

const handleChange = (event, newValue) => {
setValue(newValue)
}

return (
<Container component="main" maxWidth="lg">
<CssBaseline />
<div className={classes.paper}>

<div>
<img src={logo} alt='logo'/>
</div>

{includeEncounter
? (
<div className={classes.exit}>
<Button
aria-label="submit"
type="submit"
variant="text"
color="secondary"
className={classes.submit}
onClick={handleClickOpen}
>
EDIT ENCOUNTER
</Button>
</div>
)
: ''
}

<div className={classes.exit}>
<button onClick={() => {
dispatch(logout())
toast.dark('LOGGED OUT !')
history.push('/')
}} className={classes.logoutbtn}
>
<ExittoApp />
</button>
</div>

<AppBar position="static" color="default" className={classes.navbar}>
<Tabs value={value} onChange={handleChange} aria-label="checkIn tabs">
{labels.map((item) => <Tab key={item} label={<Typography variant="subtitle1">{item}</Typography>} />)}
</Tabs>
</AppBar>

{component.map((Component, index) => {
return <TabPanel key={index} value={value} index={index}><Component key={index} /></TabPanel>
})}
</div>
{
includeEncounter
? (
<Dialog open={open} onClose={handleClose}>
<DialogTitle id="form-dialog-title">EDIT ENCOUNTER</DialogTitle>
<DialogContent>
<fhir-encounter ref={reference} />
</DialogContent>
<DialogActions>
<Button onClick={handleClose} disabled={disablepost} className={classes.submit} color="secondary">
SUBMIT
</Button>
</DialogActions>
</Dialog>
)
: ''
}

</Container>
)
}

Navbar.propTypes = {
labels: PropTypes.array,
component: PropTypes.array,
encounterID: PropTypes.string,
includeEncounter: PropTypes.bool





The e-prescription workflow is almost similar to the visit-provider workflow, other than 1/2 screens.

  • The prescriber first finds the patient.
  • The prescriber selects the encounter under which the meeting will proceed.
  • The prescriber then gets directed to the dashboard where he/she can see the patient’s allergies and medication and can create a medication request.

Merge Requests:

Implementation video:

NEXT WEEK’s PLAN:

  • Write documentation
  • Add extra test files.
  • React optimization
  • find and fix bugs.

see you next week 😄.



Author

Shashwat

Posted on

2021-08-04

Updated on

2021-08-04

Licensed under