Index

Table of Contents

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.

...

Download the zip file from the GitHub Repo and unzip it.
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.
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.
Run the command - 'npm run build:deploy' in order to build and deploy the OWA.

...

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

Dependency	Functionality	Link
React-table	Rendering tables.	https://www.npmjs.com/package/react-table
Reactjs-popup	Generate modals.	https://www.npmjs.com/package/reactjs-popup
React-Redux	State 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.

...

Project Structure

Project Structure imagelocation. The base URL is contained in the following location-

Path

app/js/apiContext.js

Changing CSS

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

Path

app/css/referenceapplication.css

Components

Flags

API Endpoints used:

Endpoint	Ref
GET /patientflags/flag	full
DELETE /patientflags/flag/{flagName}

def

ref

Functions:

Function	Parameter	Description
deleteFlag	rowIndex	Delete flag data at particular row of table
buttonGenerator	index, passedData	Generate edit and delete action buttons for a particular record.
tagListGenerator	passedData	Generate 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.
editCallback	dataFromChild, index	Handles data object returned from Edit Flags modal.

API Endpoints used:

Endpoint	Ref
GET /patientflags/flag/{flagName}

def

ref

POST /patientflags/flag/{FlagName}

def

ref

Functions:

Function	Parameter	Description
selectionMapping	data	Maps 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:

Endpoint	Ref
GET /patientflags/

flag

tag

full

ref

DELETE /patientflags/

flag

tag/{

flagName

tagName}

def

ref

Functions:

Function	Parameter	Description

deleteFlag

deleteTag

rowIndex

Delete

flag

tag data at particular row of table
buttonGenerator	index, passedData	Generate edit and delete action buttons for a particular record.

tagListGeneratorpassedDataGenerate object containing names of associated tags - rendered in table as comma separated valueshandleOptionChangeTagsHandler for selecting tags when filtering flags by associated tagshandleEvaluatorChangeHandler for selecting how to filter tags (radio button options)handleSubmitHandler containing logic for filtering table data based on tags.

editCallback

dataFromChild, index

Handles data object returned from Edit

Flags

Tags modal.

API Endpoints used:

Endpoint	Ref
GET /patientflags/

flag

tag/{

flagName

tagName}

def

ref

POST /patientflags/flag/{

FlagName}def

tagName}	ref
GET /patientflags/displaypoint	ref
GET /role	ref

Functions:

Function	Parameter	Description
selectionMapping	data	Maps selected tags and priorities to state objects

postFlagdispatches updateFlag


displayPointReferenceStore	data	Coverts displayPoint names into numeric values - 1 for Patient Header & 2 for Patient Dashboard
postTag		dispatches updateTag action to POST new/updated

flag

tag data

handleOptionChangeTags

handleOptionChangeRoles

Handler for multi-select box when

Priorities

API Endpoints used:

Endpoint	Ref
GET /patientflags/

flag

priority	full
DELETE /patientflags/

flag

priority/{

flagName

priorityName}

def

Functions:

Function	Parameter	Description

deleteFlag

deletePriority

rowIndex

Delete

flag

priority data at particular row of table
buttonGenerator	index, passedData	Generate edit and delete action buttons for a particular record.

tagListGeneratorhandleSubmitHandler containing logic for filtering table data based on tags

colorIndicator

passedDataGenerate object containing names of associated tags - rendered in table as comma separated valueshandleOptionChangeTagsHandler for selecting tags when filtering flags by associated tagshandleEvaluatorChangeHandler for selecting how to filter tags (radio button options)

hexCode	Converts a given hex code value into a colored circle UI element displayed in the 'Indicators' column.
editCallback	dataFromChild, index	Handles data object returned from Edit

Flags

Priority modal.

API Endpoints used:

Endpoint	Ref
GET /patientflags/

flag

priority/{

flagName

priorityName}	def
POST /patientflags/

flag

priority/{

FlagName

priorityName}

def

Functions:

Function	Parameter	Description

selectionMappingdataMaps selected tags and priorities to state objectspostFlagdispatches updateFlag

postPriority

dispatches update Priority action to POST new/updated

flag

priority data

handleColorChange

handleOptionChangeTags

color

Handler for

multi-select box when tags associated with flag are changed

color picker.

handleOptionChangePriority

handleSubmit

Handler for

drop down menu

when

priority associated with

flag data form is

changed.handleSubmit

submitted.

Find Flagged Patients

API Endpoints used:

Endpoint	Parameter
GET /patientflags/eval	flag = flagName

Functions:

when flag data form is submitted.

Function	Parameter	Description
handleOptionChangeFlags		Handler for	selecting flags when searching patients by associated flags

Resources

TBD

Versions Compared

Old Version 4

New Version Current

Key

Index

Overview

Changing API Base URL

Project Structure

Changing CSS

Components

Flags

API Endpoints used:

Functions:

API Endpoints used:

Functions:

Tags

API Endpoints used:

Functions:

API Endpoints used:

Functions:

Priorities

API Endpoints used:

Functions:

API Endpoints used:

Functions:

Find Flagged Patients

API Endpoints used:

Functions:

Resources

multi-select box when display points associated with tag are changed.
handleSubmit		Handler for when

Page Comparison

Versions Compared

Old Version 4

New Version Current

Key

Index

Overview

Changing API Base URL

Project Structure

Changing CSS

Components

Flags

API Endpoints used:

Functions:

Edit Flags (Modal)

API Endpoints used:

Functions:

Tags

API Endpoints used:

Functions:

Edit Tags (Modal)

API Endpoints used:

Functions:

Priorities

API Endpoints used:

Functions:

Edit Priority (Modal)

API Endpoints used:

Functions:

Find Flagged Patients

API Endpoints used:

Functions:

Resources