Index

Overview

The Patient Flags Module OWA is an Open Web Application built using React & React-Redux in order to act as a front end for the Rest API supported by the Patient Flags Module. The web application consumes the Patient Flags Module Web API and has 7 Components.


Installation & Build

As a Part of Patient Flags Module

The Patient Flags Module OWA is a part of the Patient Flags Module (found here), hence it is built and deployed in the same build pipeline as the rest of the module.

Independent Build

You may also build and install the OWA directly via the following steps -

  1. Download the zip file from the GitHub Repo and unzip it.
  2. In terminal, navigate to the root of the file and run the command -  'npm install'  to create the node_modules file and download the dependencies.
  3. In 'webpack.config.js' modify the 'LOCAL_OWA_FOLDER' and 'APP_ENTRY_POINT' parameters to point to your server's owa folder and the host.
  4. Run the command - 'npm run build:deploy' in order to build and deploy the OWA.

Dependencies

Major external dependencies are listed below. List of all dependencies can be found in package.json file.

DependencyFunctionalityLink
React-tableRendering tables.https://www.npmjs.com/package/react-table
Reactjs-popupGenerate modals.https://www.npmjs.com/package/reactjs-popup
React-ReduxState management.https://www.npmjs.com/package/react-redux

Changing API Base URL

The base url is obtained by appending a URI string to the location object obtained from window.origin.location. The base URL is contained in the following location-

Pathapp/js/apiContext.js

Changing CSS

All changes to css are to be made in the referenceapplication.css file.

Pathapp/css/referenceapplication.css

Components

Flags

API Endpoints used:

EndpointRef

GET /patientflags/flag

full

DELETE /patientflags/flag/{flagName}

ref

Functions:

FunctionParameterDescription
deleteFlagrowIndexDelete flag data at particular row of table
buttonGeneratorindex, passedDataGenerate edit and delete action buttons for a particular record.
tagListGeneratorpassedDataGenerate object containing names of associated tags - rendered in table as comma separated values
handleOptionChangeTags
Handler for selecting tags when filtering flags by associated tags
handleEvaluatorChange
Handler for selecting how to filter tags (radio button options)
handleSubmit
Handler containing logic for filtering table data based on tags.
editCallbackdataFromChild, indexHandles data object returned from Edit Flags modal.

Edit Flags (Modal)

API Endpoints used:

EndpointRef

GET /patientflags/flag/{flagName}

ref

POST /patientflags/flag/{FlagName}

ref

Functions:

FunctionParameterDescription
selectionMappingdataMaps selected tags and priorities to state objects
postFlag
dispatches updateFlag action to POST new/updated flag data
handleOptionChangeTags
Handler for multi-select box when tags associated with flag are changed.
handleOptionChangePriority
Handler for drop down menu when priority associated with flag is changed.
handleSubmit
Handler for when flag data form is submitted.

Tags

API Endpoints used:

EndpointRef

GET /patientflags/tag

ref

DELETE /patientflags/tag/{tagName}

ref

Functions:

FunctionParameterDescription
deleteTagrowIndexDelete tag data at particular row of table
buttonGeneratorindex, passedDataGenerate edit and delete action buttons for a particular record.
editCallbackdataFromChild, indexHandles data object returned from Edit Tags modal.

Edit Tags (Modal)

API Endpoints used:

EndpointRef

GET /patientflags/tag/{tagName}

ref

POST /patientflags/flag/{tagName}

ref
GET /patientflags/displaypointref
GET /roleref

Functions:

FunctionParameterDescription
selectionMappingdataMaps selected tags and priorities to state objects
displayPointReferenceStoredataCoverts displayPoint names into numeric values  - 1 for Patient Header & 2 for Patient Dashboard
postTag
dispatches updateTag action to POST new/updated tag data
handleOptionChangeRoles
Handler for multi-select box when roles associated with tag are changed.
handleOptionChangeDisplayPoint
Handler for multi-select box when display points associated with tag are changed.
handleSubmit
Handler for when tag data form is submitted.


Priorities

API Endpoints used:

EndpointRef

GET /patientflags/priority

full

DELETE /patientflags/priority/{priorityName}

def

Functions:

FunctionParameterDescription
deletePriorityrowIndexDelete priority data at particular row of table
buttonGeneratorindex, passedDataGenerate edit and delete action buttons for a particular record.
colorIndicatorhexCodeConverts a given hex code value into a colored circle UI element displayed in the 'Indicators' column.
editCallbackdataFromChild, indexHandles data object returned from Edit Priority modal.

Edit Priority (Modal)

API Endpoints used:

EndpointRef

GET /patientflags/priority/{priorityName}

def

POST /patientflags/priority/{priorityName}

def

Functions:

FunctionParameterDescription
postPriority
dispatches update Priority action to POST new/updated priority data
handleColorChangecolorHandler for color picker.
handleSubmit
Handler for when flag data form is submitted.


Find Flagged Patients

API Endpoints used:

EndpointParameter

GET /patientflags/eval

flag = flagName

Functions:

FunctionParameterDescription
handleOptionChangeFlags
Handler for selecting flags when searching patients by associated flags


Resources

TBD