OWA generator improvement

ankitkumar · June 10, 2017, 3:02pm

@pascal Ticket link for the 404 error with openmrs-standalone platform :

pascal · June 10, 2017, 8:24pm

Great, thanks @ankitkumar. I also created OMRSJS-19 for another bug I found. You’re welcome to fix it, along with OWA-18 if you like.

ankitkumar · June 11, 2017, 11:26pm

@pascal OMRSJS-19 issue fixed

ankitkumar · June 11, 2017, 11:26pm

PR link : https://github.com/psbrandt/generator-openmrs-owa/pull/26

suthagar23 · June 12, 2017, 12:31pm

Great work @ankitkumar. Due to this problem, I want to manually configure all the related files for my project

ankitkumar · June 18, 2017, 8:38pm

@pascal @darius Hii !!

I have introduced some of the components from the “openmrs-contrib-uicommons” library into the owa generator. And also ensured the angularjs best practices by introducing different components for each of the controllers I have created and also by following the ES6 best practices (so that it could easily be converted to the Angularjs v2.0 in future)

My PR link : https://github.com/psbrandt/generator-openmrs-owa/pull/28

Thanks !!

dkayiwa · June 18, 2017, 8:55pm

Thanks @ankitkumar for this work. Do you plan to also include some message localisation? That is where text could be translated into the selected language:

ankitkumar · June 18, 2017, 9:41pm

Haven’t planned yet, but yeah may be, I could do that.

There is also an “openmrs-choose-language” component in the ui-commons library that will be used to choose and activate the languages, but I wasn’t able to find that into my “node-modules” “openmrs-contrib-uicommons” library. It’s present at the github but was not in the node modules which was generated by the yo openmrs-owa command. So, that tag was unrecognised by my IDE.

May be that component could help doing that (just an idea, haven’t gone through that yet)

ankitkumar · June 24, 2017, 8:42pm

@pascal Hii !!

This week, I have started practicing the REST API part and currently I am going to work on adding a “Patient search” component ( which is a part of my next month deliverables according to my timeline here ) !!

I have few questions in my mind :

In case, If I complete the patient search component part within this month, then could I commit that into the PR, which you are currently reviewing or I have to create a new PR after you review that PR ?
Mid term evaluations are starting from 26th, so do I need to prepare some kind of presentation or anything for that ?

pascal · June 26, 2017, 3:46am

Sorry, was traveling this weekend. I think create another PR for the component. I’ll get to the review this week.

For the evaluation, just make sure you’ve covered everything that is required by GSoC (e.g. blog posts).

ankitkumar · June 26, 2017, 7:51am

Sure ! Thanks

ankitkumar · June 28, 2017, 2:38pm

@raff @pascal Hii !!

I am implementing the patient search component which looks like this :

Designing my own rest modules could have been a cumbersome process, so for rest calls, I am using the openmrsRest.listFull from the rest module at the openmrs-contrib-uicommons library. But I guess there is something wrong with the rest module because, I have tried this (below image) but couldn’t fetch any desired data !

My codes are :

Component :

Controller :

And html file :

Am I doing something wrong ?? or the fault is with the openmrsRest module ??

Note : I am currently using openmrs-standalone v2.6.0 due to lack of data in the openmrs sdk !!

ankitkumar · June 28, 2017, 3:46pm

Edit : the filter is vm.query (but still not fetching data)

pascal · June 28, 2017, 3:52pm

It may be a bug in openmrsRest, but since it is quite widely used, I doubt it’s completely broken. What exactly is happening? What do the HTTP requests looks like? Are there any JavaScript errors?

Can you post your code somewhere so we can take a look?

ankitkumar · June 28, 2017, 4:39pm

No, there are no javascript errors related to it !! ok I am committing the code to my github repository in a few minutes, you may take a look at it ! Sending the link in few minutes !

pascal · June 28, 2017, 4:45pm

Are you sure you need the template ('{{vm.query}}') in your controller code? Also check that you’re not using "vm.query" when you’re supposed to be using "query".

ankitkumar · June 28, 2017, 5:35pm

yes, I need that template (’{{vm.query}}’) in my controller because I am binding my text field with that. I have used ng-model as vm.query so in order to fetch that from the search field to the rest query, I guess I need that !! And I have used that “query” instead of “vm.query” by mistake. I already resolved that !! Still not working

Here is the link to my repository where codes are placed :

main repository : https://github.com/Ankitkumar94/generator-test

github.com

Ankitkumar94/generator-test/blob/master/app/templates/scripts/angular/home/controllers/patientSearch.controller.js

class PatientSearchController {
  /* @ngInject */
  constructor(openmrsRest) {
    var vm = this;
    vm.patients = [];
    vm.onsearch = () => {
      openmrsRest.listFull('patient', {q: '{{vm.query}}', includeAll: true}).then(function (response) {
        if(response.results.length > 0){
          vm.patients = response.results;
        }
      })
    }

  }
}
export default PatientSearchController;

github.com

Ankitkumar94/generator-test/blob/master/app/templates/scripts/angular/home/components/patientSearch.component.js

import template from '../patientSearch.html';
import controller from '../controllers/patientSearch.controller';

let patientSearchComponent = {
  restrict: 'E',
  bindings: {},
  controller: controller,
  controllerAs: 'vm',
  template: template
};

export default patientSearchComponent;

github.com

Ankitkumar94/generator-test/blob/master/app/templates/html/angular/home/patientSearch.html

<div style="width: auto; height: 250px; overflow: scroll ">
  <input type="text" ng-model="vm.query" /> <br/>
  <small> ** search by patient name </small> <br/><br/>
  <button ng-click="onsearch"> Search </button> <br/><br/>

  <table>
    <tr>
      <th> AuditInfo </th>
      <th> Identifier </th>
      <th> Display </th>
      <th> Location </th>
      <th> uuid </th>
    </tr>
    <tr ng-repeat="patient in patients | filter: vm.query">
      <td> {{patient.auditInfo}} </td>
      <td> {{patient.identifier}} </td>
      <td> {{patient.display}} </td>
      <td> {{patient.location}} </td>
      <td> {{patient.uuid}} </td>
    </tr>

This file has been truncated. show original

pascal · June 28, 2017, 6:13pm

Can you generate an app that has the broken patient search component on the home screen, and then push that code to a different repo? Then I can build and install the app and look at just that part of the code.

ankitkumar · June 28, 2017, 7:49pm

OK sure

pascal · June 29, 2017, 5:15am

This is what I had to do to make it work:

diff --git a/app/js/home/controllers/patientSearch.controller.js b/app/js/home/controllers/patientSearch.controller.js
index 2455eb6..ea481b3 100644
--- a/app/js/home/controllers/patientSearch.controller.js
+++ b/app/js/home/controllers/patientSearch.controller.js
@@ -4,7 +4,7 @@ class PatientSearchController {
     var vm = this;
     vm.patients = [];
     vm.onsearch = () => {
-      openmrsRest.listFull('patient', {q: '{{vm.query}}', includeAll: true}).then(function (response) {
+      openmrsRest.listFull('patient', {q: vm.query, includeAll: true}).then(function (response) {
         if(response.results.length > 0){
           vm.patients = response.results;
         }
diff --git a/app/js/home/patientSearch.html b/app/js/home/patientSearch.html
index b971ccd..1fa9013 100644
--- a/app/js/home/patientSearch.html
+++ b/app/js/home/patientSearch.html
@@ -1,7 +1,7 @@
 <div style="width: auto; height: 250px; overflow: scroll ">
   <input type="text" ng-model="vm.query" /> <br/>
   <small> ** search by patient name </small> <br/><br/>
-  <button ng-click="onsearch"> Search </button> <br/><br/>
+  <button ng-click="vm.onsearch()"> Search </button> <br/><br/>
 
   <table>
     <tr>
@@ -11,7 +11,7 @@
       <th> Location </th>
       <th> uuid </th>
     </tr>
-    <tr ng-repeat="patient in patients | filter: vm.query">
+    <tr ng-repeat="patient in vm.patients | filter: vm.query">
       <td> {{patient.auditInfo}} </td>
       <td> {{patient.identifier}} </td>
       <td> {{patient.display}} </td>