Patient Flags Module OWA
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 -
- 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.
Dependencies
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.location. 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} | 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. |
Edit Flags (Modal)
API Endpoints used:
| Endpoint | Ref |
|---|---|
GET /patientflags/flag/{flagName} | ref |
POST /patientflags/flag/{FlagName} | 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/tag | ref |
DELETE /patientflags/tag/{tagName} | ref |
Functions:
| Function | Parameter | Description |
|---|---|---|
| deleteTag | rowIndex | Delete tag data at particular row of table |
| buttonGenerator | index, passedData | Generate edit and delete action buttons for a particular record. |
| editCallback | dataFromChild, index | Handles data object returned from Edit Tags modal. |
Edit Tags (Modal)
API Endpoints used:
| Endpoint | Ref |
|---|---|
GET /patientflags/tag/{tagName} | ref |
POST /patientflags/flag/{tagName} | ref |
| GET /patientflags/displaypoint | ref |
| GET /role | ref |
Functions:
| Function | Parameter | Description |
|---|---|---|
| selectionMapping | data | Maps selected tags and priorities to state objects |
| displayPointReferenceStore | data | Coverts 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:
| Endpoint | Ref |
|---|---|
GET /patientflags/priority | full |
DELETE /patientflags/priority/{priorityName} | def |
Functions:
| Function | Parameter | Description |
|---|---|---|
| deletePriority | rowIndex | Delete priority data at particular row of table |
| buttonGenerator | index, passedData | Generate edit and delete action buttons for a particular record. |
| colorIndicator | 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 Priority modal. |
Edit Priority (Modal)
API Endpoints used:
| Endpoint | Ref |
|---|---|
GET /patientflags/priority/{priorityName} | def |
POST /patientflags/priority/{priorityName} | def |
Functions:
| Function | Parameter | Description |
|---|---|---|
| postPriority | dispatches update Priority action to POST new/updated priority data | |
| handleColorChange | color | Handler for color picker. |
| handleSubmit | Handler for when flag data form is submitted. |
Find Flagged Patients
API Endpoints used:
| Endpoint | Parameter |
|---|---|
GET /patientflags/eval | flag = flagName |
Functions:
| Function | Parameter | Description |
|---|---|---|
| handleOptionChangeFlags | Handler for selecting flags when searching patients by associated flags |
Resources
TBD