openmrs / openmrs-esm-patient-registration

Moved to https://github.com/openmrs/openmrs-esm-patient-management

Moved

This is now part of esm-patient-management.

The old documentation follows.

---

Patient Registration ESM

The Patient Registration MF module for OpenMRS Version 3.0 Frontend. The Patient Registration facilitates the registration of a new patient.

Overview

The Patient Registration module consists of a configurable form consisting of multiple custom/basic inputs (fields).

Built With

• React (TypeScript) - Front-end JS library
• Formik - Form builder JS library
• Day.js - Date library
• Jest - JS testing framework
• React Testing Library - JS testing library for React components
• npm - Node package manager
• webpack - JS module bundler
• ESLint - JS linter
• Prettier - Code formatter
• Babel - JS compiler

Installation

Prerequisites

• Node
• Git
• openmrs-esm-patient-registration

Setup Patient Registration Module

1. Clone the openmrs-esm-patient-registration repo.

git clone https://github.com/openmrs/openmrs-esm-patient-registration.git

2. Install dependencies in the root directory of the repo.

npm i

3. Run the module from localhost:8080.

npm run serve -- --https

Setup Dev Tools

1. Click Add new module in the dev tools window.
2. Type in the Module Name: @openmrs/esm-patient-registration-app.
3. Type in the Override URL: 8080.
4. Go to the browser's development tools (e.g. via Inspect).
5. Go to the Application tab.
6. Go to Local Storage.
7. Find the key: import-map-override:@openmrs/esm-patient-registration-app
8. Update the corresponding value to: //localhost:8080/openmrs-esm-patient-registration.js.
9. Click on the padlock/warning message next to the URL in the browser.
10. Select the Allow option from the Insecure content dropdown in the browser settings page.
11. Refresh the page.

Tests

To verify that all of the tests run:

npm test

Note: Run npm i before running tests for the first time.

Deployment

The master branch of this repo is deployed in a demo environment.

Configuration

This module is designed to be driven by configuration files. These files define the look and functionality required to drive the Patient Registration module.

Resources

• JIRA Epic

License

The project is licensed under the MIT License - see the LICENSE.md file for details.

openmrs-esm-patient-registration's Issues

Contact Info labels not shown in edit mode

The labels in the Contact Info section of the form are not shown when the form is launched by clicking the Edit button on the patient banner. Contrast this with the same section when registering a patient for the first time.

It is difficult to parse exactly which fields represent what without having some form of labeling for guidance.

Also: Maybe the location.postalCode label should just read Postal Code.

Improve Styles in Registration Page

As a clinician,
I want to use a user friendly and well-designed input form,
So that I can intuitively and quickly register patients. 
h3. Context

Currently the registration form does not use state of the art styles. This can overly complicate the patient registration process.

Therefore, there is a need to make use of UX design patterns and commonly used styles.  
h3. In Scope

• UI for fields is consistent with style guide
• Required field interactions are consistent with style guide
• Introduce new styles if needed

h3. Out of Scope

• Update the official OpenMRS styleguide

h3. Acceptance Criteria

Open Patient Registration Form 

** Given want to register a new patient,
** When I open up the registration form,
** Then I am greeted with a well designed interface.

Dynamic Input Form

** Given I access the form from a small screen,
** When I see the input fields,
** Then they adapt to my screen size.

Smooth Error Messages

** Given I provoke a validation error,
** When or after inputing information into the form,
** Then I should immediately know what I have to correct according to a nicely placed error message.

h3. Resources

• Style Guide [https://styleguide.openmrs.org/?path=/story/openmrs-styleguide--styleguide-intro]
• Design Better Forms Article [https://medium.com/nextux/design-better-forms-96fadca0f49c]