Week6

LibreHealth

PROGRESS MADE THIS WEEK:

Hi, According to the proposal timeline, week 6 was to be based on:

  • finishing pending work.
  • fixing bugs.
  • starting week7 tasks.

Fortunately, there was no pending work, hence the focus was mainly on the remaining points.

The tasks of week7 are to:

  • implement the visit-nurse and visit-provider workflow in the react application.

As most of the components required for implementing the visit-nurse workflow are already present in the web-component library, I started working on it.

DETAILED DESCRIPTION:

The visit-nurse workflow consists of many screens and multiple components.

  • First screen contains a find-patient component to select a patient.
  • After the patient is selected a redux action is triggered which updates redux state and stores the selected patient Id.
  • Another redux action updates the active screen and changes it to that of patient encounters, it also updates redux state and stores the current encounter Id.
  • The patient encounter screens contains all the patient appointments, encounters and a component to create an encounter for the undergoing visit.
  • On creating the encounter a redux action updates active page to dashboard.
  • the dashboard page contains 4 tab: home, vitals, allergies, medication.
  • the home tab is the default active tab and contains already exisiting vitals, allergies and medications of the patient.
  • the other tabs are used to create specific resource entry.
  • the user can log out and select a different patient to repeat the above points.

Some of the required components are not merged in the main repo yet, hence respective tab is unimplemented.

Each worklow in the application is a different page with a unique url. Hence the use of redux in immense in the project.
Each workflow also has a dedicated reducer which handles all the operations related to a specific workflow without editing any other state.

Inside the project’s src directory, the workflow directory contains all the code distributed into separate directories for different workflows. This makes it very simple to create / edit or even delete a workflow without affecting other parts of the application!

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
import React from 'react'
import { Navbar } from '../../components/navbar'
import { Home } from '../../pages/home'
import { activePageName } from '../../reducers/visit/visitNurseSlice'
import { CreateEncounter } from './pages/createEncounter'
import { SelectPatient } from './pages/selectPatient'
import { Dashboard } from './pages/dashboard'
import { useSelector } from 'react-redux'

export const VisitNurse = () => {
const activePage = useSelector(activePageName)
let components
switch (activePage) {
case 'SelectPatient':
components = [Home, SelectPatient]
break
case 'CreateEncounter':
components = [Home, CreateEncounter]
break
case 'Dashboard':
components = [Home, Dashboard]
break
}
return (
<Navbar labels={['HOME', 'VISIT']} component={components} />
)
}

This is the main component that is exported. Based on different redux state values different screens are displayed.

All the implemented screens and the workflow can be seen here:

https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents/uploads/a9e04307d1199767e3b2c400de785370/screen-capture__2_.webm

NEXT WEEK’s PLAN:

  • Complete the visit-nurse workflow (the parts which are not implemented yet.)
  • Complete the visit-provider workflow.
  • Start working on the e-prescription workflow.

For the visit-nurse workflow, the medication statement and the vitals tabs are left to be implemented, these must be completed within the next week.

There are also some additions to be made in the webcomponents : some fields like encounter and subject (patient) are required to be added to the allergy and medication statement components.

The visit-provider workflow has similarities to the visit-nurse workflow, some of the screen are similar for both, hence the provider workflow should be completed faster than the nurse workflow.

these are the implementation points for the visit-provider workflow:

  • First screen contains a find-patient component to select a patient.
  • After the patient is selected a redux action is triggered which updates redux state and stores the selected patient Id.
  • Another redux action updates the active screen and changes it to that of patient encounters.
  • The patient encounter screens contains all the patient encounters which are fetched using the stored patient Id.
  • On clicking an encounter a redux action updates active page to dashboard.
  • the dashboard page contains 2 tab: physical exams, order.
  • the physical exams tab shows the observations of the patient and contains a component to create any observation.
  • the orders tab will be used to create orders using service request component.
  • the user can log out and select a different patient to repeat the above points.

see you next week 😄.

Author

Shashwat

Posted on

2021-07-19

Updated on

2021-07-19

Licensed under