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. | |
| Reactjs-popup | Generate modals. | |
| React-Redux | State management. |
Project Structure
Project Structure image
Components
Flags
API Endpoints used:
| Endpoint | Ref |
|---|---|
GET /patientflags/flag | full |
DELETE /patientflags/flag/{flagName} | def |
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} | def |
POST /patientflags/flag/{FlagName} | def |
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 | full |
DELETE /patientflags/flag/{flagName} | def |
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 Tags (Modal)
API Endpoints used:
| Endpoint | Ref |
|---|---|
GET /patientflags/flag/{flagName} | def |
POST /patientflags/flag/{FlagName} | def |
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. |
Priorities
API Endpoints used:
| Endpoint | Ref |
|---|---|
GET /patientflags/flag | full |
DELETE /patientflags/flag/{flagName} | def |
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 Priority (Modal)
API Endpoints used:
| Endpoint | Ref |
|---|---|
GET /patientflags/flag/{flagName} | def |
POST /patientflags/flag/{FlagName} | def |
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. |