Wiki Spaces

Documentation
Projects
Resources

Get Help from Others

Q&A: Ask OpenMRS
Discussion: OpenMRS Talk
Real-Time: IRC Chat | Slack

Documentation

Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Added Component List, Resources and Table of Contents

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.

...

  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.

...

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.

...

Project Structure

Project Structure imagelocation. 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}

def
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}

def
ref

POST /patientflags/flag/{FlagName}

def
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/

flag

tag

full
ref

DELETE /patientflags/

flag

tag/{

flagName

tagName}

def
ref

Functions:

FunctionParameterDescription
deleteFlag
deleteTagrowIndexDelete
flag
tag 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 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.
editCallbackdataFromChild, indexHandles data object returned from Edit
Flags
Tags modal.

Edit Tags (Modal)

API Endpoints used:

EndpointRef

GET /patientflags/

flag

tag/{

flagName

tagName}

def
ref

POST /patientflags/flag/{

FlagName}def

tagName}

ref
GET /patientflags/displaypointref
GET /roleref

Functions:

FunctionParameterDescription
selectionMappingdataMaps selected tags and priorities to state objects
postFlagdispatches updateFlag
displayPointReferenceStoredataCoverts 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
tags
roles associated with
flag
tag are changed.
handleOptionChangePriority
handleOptionChangeDisplayPoint
Handler for
drop down menu when priority associated with flag is
multi-select box when display points associated with tag are changed.
handleSubmit
Handler for when
flag
tag data form is submitted.


Priorities

API Endpoints used:

EndpointRef

GET /patientflags/

flag

priority

full

DELETE /patientflags/

flag

priority/{

flagName

priorityName}

def

Functions:

FunctionParameterDescription
deleteFlag
deletePriorityrowIndexDelete
flag
priority data at particular row of table
buttonGeneratorindex, passedDataGenerate 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)
hexCodeConverts a given hex code value into a colored circle UI element displayed in the 'Indicators' column.
editCallbackdataFromChild, indexHandles data object returned from Edit
Flags
Priority modal.

Edit Priority (Modal)

API Endpoints used:

EndpointRef

GET /patientflags/

flag

priority/{

flagName

priorityName}

def

POST /patientflags/

flag

priority/{

FlagName

priorityName}

def

Functions:

FunctionParameterDescription
selectionMappingdataMaps selected tags and priorities to state objectspostFlagdispatches updateFlag
postPriority
dispatches update Priority action to POST new/updated
flag
priority data
handleColorChange
handleOptionChangeTags
colorHandler 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:

EndpointParameter

GET /patientflags/eval

flag = flagName

Functions:

when flag data form is submitted.
FunctionParameterDescription
handleOptionChangeFlags
Handler for selecting flags when searching patients by associated flags


Resources

TBD