bahmni / openmrs-module-appointments-frontend

UI for Bahmni Appointment Scheduling written in both React and Angular

Openmrs Module Appointment Dashboard

This repository is extracted appointments module from openmrs-module-bahmniapps. This repository acts as the front end for the Bahmni Appointment Scheduling. It is written in React and Angular.

Differences with OpenMRS-Module-bahmniapps

We have moved away from bower and installing dependencies from NPM. Below has been the changes in libraries from OpenMRS-Module-bahmniapps

Library	Change
ngDialog	Using ng-dialog instead (Rename).
[email protected]	Upgraded to 1.4.1 since the existing version is not present in NPM. Manually changed the line 12 from define(['jquery/jquery'], factory); instead of define(['jquery'], factory);. Reference link
angular-ui-router	Renamed to @uirouter/angularjs.
angular-bindonce	Using directly from github since the latest is not published in NPM.
[email protected]	Using [email protected], since this is the latest version on NPM. According to this thread there are no code changes between 1.3.0 to 1.3.4.
jquery-ui-1.10.4.custom.min	Using [email protected] since the jquery-ui is not bundled by default. 1.11.4 is the oldest version on NPM

• Images for scss are being served in bundled.

Global variables from library

Few libraries(angular, jquery) used in BahmniApps export themselves as global variables. Webpack doesn't support the idea of global variables by default. All these global variables are exported using webpack.ProvidePlugin. Check the webpack.config.js plugins section.

Other Fixes

• According to this issue, webpack doesn't work well with angular 1. There has been a fix provided for them using exports-loader. There were similar issues for jquery 1.

Duplicate code

• Duplicated error-routehandler. It is a small utility and need not to be extracted in library. If we are putting more stuff, it can go to a library.
• Duplicated openmrs-module-bahmniapps/ui/app/common/constants.js. This can be merged with appointments/constants.js

Running it with bahmni

• Clone the repo
• Go to UI folder and install dependencies cd ui && npm install
• Switch back to root folder cd ..
• Run npm install
• RUN npm run build
• Take a backup of /var/www/bahmniapps/appointments.(vagrant)
• Replace content of /var/www/bahmniapps/appointments with generated dist folder content.(Vagrant)
• Go to bahmni Appointment scheduling UI. It should serve new appointments content.

Running Tests

• Run npm run test.

React

Build

npm run build-react

Development

Build with watch

npm run build-react-dev

Run storybook

npm run storybook

Test

npm run test-react

Test with watch

npm run test-react-watch

---

Deploy

• Create a folder called 'appointments' under '/var/www'.
• Add an alias in httpd ssl.conf, like below:

  Alias /appointments /var/www/appointments
  

Project Structure

|-- .tx
|   
|-- scripts
|	
`-- ui
    |-- Gruntfile.js
    |-- app
    |	|-- appointment
    |   |-- common
    |   |-- images
    |   |-- i18n
    |   |-- lib
    |   |-- styles
    |-- react-components
    |	|-- __mocks__
    |	|-- api
    |	|-- components
    |	|-- containers
    |	|-- stories
    |	|-- utils
    |	|-- bahmni-theme.css
    |	|-- constants.js
    |	|-- jest.config.js
    |	|-- variable.scss
    |-- test
    |-- bower.json
    |-- package.json

openmrs-module-appointments-frontend's Issues

Appointment notes is not updated for the Entire series for the cancelled appointments.

Description
STR:

1. Create a recurring appointment
2. From the list/calendar view, cancel all the appointments from the series
3. Select any appointment from the series and Edit the appointment
4. Edit the appointment notes and apply the changes to All the Occurrences.
5. Notice that the notes is updated only to the current appointment but not the entire series

Expected Result: Notes should be updated to the entire series instead of updating notes for the single appointment.

Environment
https://demo.mybahmni.org/bahmni/home/index.html#/login

Create a calendar view in react.

Current Behaviour

https://bahmni.atlassian.net/wiki/spaces/BAH/pages/299958298/Calendar+View

Expected Behaviour

1. Write the exact thing in react
2. Make sure the width of columns on the UI is fixed and if the no. of columns is more we get a horizontal scroll.
3. Please ensure we have Unit tests written.

In scope:
A generic react calendar component which looks similar to the one in appointment scheduling today.

Out of scope
The integration with the appointment scheduling backend and current angular code.

Notes: We can use react library like react-big-calendar.

Display number of slots available for the service when tried to book an appointment against the service

Description
As a user,
I should be able to view the number of available slots for a particular service
when tried to book an appointment.
Precondition:
Max load should be predefined while creating the service.
Reference:

Create a grid structure to display Service and date along with the count of appointments

Expected Behaviour:

A generic grid component in react, similar to the one in angular code today.

Where to find:

Login to Bahmni (https://demo.mybahmni.org)
Go to Appt Scheduling (https://demo.mybahmni.org/bahmni/appointments/)
Go to the Summary

Out of scope
Integration with actual data.

Add test coverage for React components

Create a layout to create, edit or delete service details

Expected Behaviour:

A component in react to show start time, end time, max load, weekdays and actions like edit or delete similar to the one in angular code today.

Where to find:

Login to Bahmni (https://demo.mybahmni.org)
Go to Appt Scheduling
Go to the Admin
Click on edit of one the service

Note
Components in the table might have already been built make sure we don't have redundant components.

Out of scope
Integration with actual data.

Appointment fields are not auto focused when tried to close any pop-up

Description
STR:

1. Select "Create New appointment"
2. Select Cancel option using tab functionality
3. Select "No" from the confirmation pop up
4. Notice that the focus in missing on the appointment fields.

Expected Result:

On the load of add appointment screen by default patient search component will be the focus

on the load of edit screen by default specialty search component will be focused

If speciality search component is disabled, service search component will be focused

Note:
Behaviour should be similar across following following pop-ups when "No" or "Close" option is selected.

Conflict popup

Cancel Confirmation

Kindly Confirm

Save Successful

Update Successful

** Environment**
https://demo.mybahmni.org/bahmni/home/index.html#/login

Create a component to print data

Expected Behaviour:
A Print component to print the data that is shown on Appointments List view with 2 header labels.

Where to find:
Login to Bahmni (https://qa-reporting.ehealthunit.org/home)
Go to Appt Scheduling, Appointments List View
Go to "List View"

Out of scope
Integration with actual data.

Create a toggle button to hide and show related content

Expected Behaviour:

A generic toggle component in react, similar to the one in angular code today.

Where to find:

1. Login to Bahmni (https://demo.mybahmni.org)
2. Go to Appt Scheduling
3. Go to the Appt List

Appointment Start date is missing when tried to view the past appointment

Description
STR:

1. Select Appointment List option from the Manage Appointments tab
2. Select any past appointment and select Edit option
3. Notice that the Start date is not displayed in the date text field for past appointment

Note: Start date is not displayed for Missed, Past and Cancelled appointment.

** Environment**
https://demo.mybahmni.org/bahmni/home/index.html#/login

Summary DatePicker not loading properly

The left and right arrow icons are not showing up properly

Display error message when the invalid date is typed in the date picker field

Description
As a user
I want to see a validation message when I enter an invalid date in the date picker field
So that I can be aware that I need to re-enter the date

Acceptance criteria:
When the user keys-in a date in the date picker field, which is not valid or a past date,

Create appointment:

Upon pressing Enter key or clicking elsewhere on the screen, the date value has to be cleared

And a validation message to appear below the date picker field as please select date

Message text to be the same used for empty date picker field, i.e 'Please select date'

Edit Appointment:

No changes required. As the previously selected dates are retained upon entering a past/invalid date.

Environment
https://demo.mybahmni.org/bahmni/home/index.html#/login

Create a List View in React

Current Behaviour
https://bahmni.atlassian.net/wiki/spaces/BAH/pages/299958294/List+View+of+Appointments

Expected Behaviour
Write the exact thing in react
Make sure the width of columns on the UI is fixed and if the no. of columns is more we get a horizontal scroll.
Please ensure we have Unit tests written.
In scope:
A generic react component which looks similar to the one in appointment scheduling today.

Out of scope
The integration with the appointment scheduling backend and current angular code.
The buttons that shown on right bottom corner like 'Edit', 'Reset'

Notes: We can use react library like react-big-calendar.

Create a parent component out of AppointmentListSidePanelWrapper and FilterWrapper

We should create a parent component out of the below 2 components. This can done using storybook. Doesn't require to connect to backend server.

1. AppointmentListSidePanelWrapper
   

2. FilterWrapper
   

A tree control for showing contents.

Expected Behaviour:

A generic tree component in react, similar to the one in angular code today.

Where to find:

Login to Bahmni (https://demo.mybahmni.org)
Go to Appt Scheduling
Go to the Appt List

Out of scope
Integration with actual data.

Admin Second Page

The basic components are available now. Integrate with API calls
AC:

1. Should load list of specialities from API data
2. Should load list of location from API data
3. Should save new service upon clicking on "Save" button

Create a tabular structure to display data and some actions to be performed

Expected Behaviour:

A generic tabular structure in react, similar to the one in angular code today.

The no. of columns can be dynamic

Where to find:

Login to Bahmni (https://demo.mybahmni.org)
Go to Appt Scheduling
Go to the Admin

Out of scope
Integration with actual data.

Create wrapper out of the date picker and grid Summary components

We need to create a wrapper out of date picker component and grid summary component

1. Date picker
   
2. Grid Summary
   
   the final component should render like below