OWA Generator Improvement
Project Mentors : @pascal @darius
Hello everyone !!
In this talk thread, I am going to give a brief summary of the work I had done so far this summer (with a demo presentation video).
I started my work by fixing some of the major bugs/issues which could have created problems for future contributions to this project.
These were some of the issues which were fixed at the starting of the coding period : https://issues.openmrs.org/browse/OMRSJS-17 https://issues.openmrs.org/browse/OMRSJS-18 https://issues.openmrs.org/browse/OMRSJS-19 https://issues.openmrs.org/browse/OWA-18
After that I started my major part for this project.
1) Indroducing components from the ui-commons library
I scaffolded some of the pre-built components from the ui-commons library into the generator. Some of the components were :
** Header Component (with proper logout and ward changing options)
** Breadcrumbs Component (further shown the proper use of this component by placing it on the right place of the page while creating the “patient create” component {will discuss later on in this thread}).
** Notification component
** Translate Component
2) Designing new components
Took the suggestion from the community on this talk thread on what components can be valuable to the community.
On the basis of those suggestions, I designed the following search components : ** Patient Search ** Encounter Search ** Observation Search ** Provider Search
All these search components are designed by keeping in mind the use of space in the webapp. ** All of these are placed inside a scrollable div box (of fixed height), so that an user can search his/her desired entries without moving to some other page. ** Use of proper spinner at the time of the Rest Calls, so that an user could see that the work is in progress and doesn’t leave. ** Search results pops only after minimum of three characters in the search field (as in the case of the core apps) ** Chosen the attributes to be displaced similar to the coreapps version.
Some screenshots of the new search components :
Patient Search
Encounter Search
Observation Search
Provider Search
3) Scaffolding a proper testing Infrastructure for AngularJs
After designing above components, we (me and my mentor) agreed upon introducing the testing infrastructure into the generator, so that an user can easily write tests upon them. First of all, I set up the Jasmine and Karma environment which include karma.conf files and some changes in the webpack.config file.
It took some time to set up the testing environment because we were getting some of the unknown errors like transition superseded and some other unknown provider errors which were fixed by introducing some .config into the home.js file.
After setting up the proper testing environment, I had written some of the tests for the newly designed components where $httpBackend is used in order to fake the REST calls.
One can find the scaffolded tests here :
4) Create Patient Component
Previously, it was planned to devise an easy way to introduce the FHIR module into the generator, but due as REST api’s are widely used today, so we decided to take suggestions from the community and after that we agreed upon the proper use of REST API into the generator.
I then created a patient search component having following features :
** Includes two steps having text field of varying size (as per the length of the input characters)
** First step includes the fields which basically needs the patients personal details like Name, Age, Address, Gender, etc. (adrress fields are optional hence hidden by default)
** The second step includes a select box which contains a list of all the identifier types (fetched by querying the REST API’s).
while OpenMRS ID is selected as an identifier
while Old Identification Number is selected as an identifier
** Once an user selects an appropriate identifier type, he/she will get the form field as required. for example, in case of the identifier “OpenMRS ID”, we only need the one identifier but in case of other identifiers, we need one extra field apart of that “OpenMRS ID Identifier” field (as shown above).
** As the OpenMRS Identifier uses the LuhnMod30Validator Scheme, hence I have also provided an option to generate the openmrs identifier through the idgen module by querying as below :
localhost:8081/openmrs-standalone/module/idgen/generateIdentifier.form?source=1
** have proper onField validations with the colors mentioned in the Openmrs style guide.
** Apart from the onField validations, a short summary of the response is also shown at the top of the form (so that an user could get the idea of what actually happened after submitting the form)
** All the summaries are placed into proper colored div boxes i.e green color for the success and fade red for the errors boxes (all are according to the openmrs style guide).
Demo for the error and success summaries
**Note : ** While creating the patient create component, I had also shown the proper use of breadcumbs and a good example of ui-routing by placing a link at the home page and then changing only the end hash element of the URL (for this I used the ui-sref like below) :
http://localhost:8081/openmrs-standalone/owa/demo/index.html#/create-patient
Proper use of breadcrumbs
Code Contributions
Merged Pull Requests :
** New Components with testing infrastructure and use of ui-commons library ** Patient Create Component ** Trailing forward slashes ** OMRSJS-19 ** OMRSJS-17 ** Fix for unknown provider error ** OWA-18 Fixed 404 not found error
A Demo Presentation Video
Project Wiki here.
Experience with GSoC
My experience with GSoC was fabulous. I got the opportunity to work with some of the brilliant minds in their respective fields. Each and every moment in the whole journey taught me something and I got to learn a lot from my respective mentor @pascal 
He was really helpful in the whole journey and I would like to thank him for continuously supporting me. I would love to keep contributing to this community.
Challenges faced :
Learning new technologies in a short period of time is a challenge in itself. But the most challenging part for me was to introduce the testing environment as at every moment I was getting a new error. But, I am happy that we finally did it.
My future plans on this Project
** To add a ul form breadcrumbs design to the patient create component ** To add Angular 2 scaffolding
Suggestions
I think we can try to improve this program more better by providing the students with some of the links to the references/tutorials on the technologies they will be going to work in the future time.
Otherwise, this community is doing great in trying its level best to help the students as far as they can.
Thanks a lot and best wishes to all the future participants !! 