What would be the best way to add UI with REST + AngularJs in bed management module

Related to: is there any module that can manage Bed in hospital instead of adding script simple UI

As the discussion in above talk, we are trying to avoid writing code in old-style JSPs (ie legacy UI). Can anyone suggest me the best way to add admin UI with REST + AngularJs in bed management module?

cc: @sudipkoirala @darius @mksd @binduak

1 Like

Hi @mjsanish,

What about bringing in an OWA layer bundled with the Bed Management module (so not as a separate OWA add-on)? This OWA would deliver the React or Angular MVC stack.

There would still be the need of bringing in the ‘Manage Admission Locations’ link the old way, however this link would simply take the user to the new app shipped as an OWA. Inserting the link would be the only thing to be done in the legacy admin UI.

So:

  • The user goes to Administration > Admission Locations > Manage Admission Locations.
  • This link takes the user to your OWA-shipped new app.

An example of an OpenMRS module that includes a UI as an OWA that is actively being worked on now is:

(E.g. you can follow this example and/or ask questions to the devs working on it.)

Why would this not go in the Bahmni Admin App itself? The one which has CSV import, export, Order set definition. https://bahmni.atlassian.net/wiki/spaces/BAH/pages/53313558/Administrator+s+Page

Is there any reason to bind this specific admin management to the Bahmni UI? This is supposedly an OpenMRS module, providing a REST and Java API to manage beds and admission locations.

It does make sense to have a link to this from the Administrator’s Page though.

1 Like

@darius @mksd I think it would be better to move forward with separate OWA add-on approach.

I have set App Folder Path: /var/www/html/owa

And /var/www/html/owa has read/write permission too. But on uploading Open Web Apps (OWA), It throwing “Permission denied” error.

HTTP Status 500 - owabasicapp.zip (Permission denied)

type Exception report

message owabasicapp.zip (Permission denied)

description The server encountered an internal error that prevented it from fulfilling this request.

exception

java.io.FileNotFoundException: owabasicapp.zip (Permission denied)
	java.io.FileOutputStream.open0(Native Method)
	java.io.FileOutputStream.open(Unknown Source)
	java.io.FileOutputStream.<init>(Unknown Source)
	java.io.FileOutputStream.<init>(Unknown Source)
	org.apache.commons.fileupload.disk.DiskFileItem.write(DiskFileItem.java:439)
	org.springframework.web.multipart.commons.CommonsMultipartFile.transferTo(CommonsMultipartFile.java:142)
	org.openmrs.module.owa.web.controller.AddAppController.upload(AddAppController.java:74)
	sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
	sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
	java.lang.reflect.Method.invoke(Unknown Source)
	org.springframework.web.bind.annotation.support.HandlerMethodInvoker.invokeHandlerMethod(HandlerMethodInvoker.java:177)
	org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter.invokeHandlerMethod(AnnotationMethodHandlerAdapter.java:446)
	org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter.handle(AnnotationMethodHandlerAdapter.java:434)
	org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:943)
	org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:877)
	org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:966)
	org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:868)
	javax.servlet.http.HttpServlet.service(HttpServlet.java:644)
	org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:842)
	javax.servlet.http.HttpServlet.service(HttpServlet.java:725)
	org.openmrs.module.web.filter.ForcePasswordChangeFilter.doFilter(ForcePasswordChangeFilter.java:60)
	org.openmrs.web.filter.GZIPFilter.doFilterInternal(GZIPFilter.java:64)
	org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
	org.openmrs.module.web.filter.ModuleFilterChain.doFilter(ModuleFilterChain.java:72)
	org.openmrs.module.web.filter.ModuleFilter.doFilter(ModuleFilter.java:54)
	org.openmrs.web.filter.OpenmrsFilter.doFilterInternal(OpenmrsFilter.java:108)
	org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
	org.springframework.orm.hibernate4.support.OpenSessionInViewFilter.doFilterInternal(OpenSessionInViewFilter.java:150)
	org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
	org.openmrs.web.filter.StartupFilter.doFilter(StartupFilter.java:105)
	org.openmrs.web.filter.StartupFilter.doFilter(StartupFilter.java:105)
	org.openmrs.web.filter.StartupFilter.doFilter(StartupFilter.java:105)
	org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:88)
	org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)

note The full stack trace of the root cause is available in the Apache Tomcat/8.0.12 logs.

I have updated the JIRA ticket (BAH-378) accordingly, links to our new OWA page(s) should be available from both the Bahmni Admin app and the legacy admin UI.

1 Like

@darius @angshuonline, any preference(s) as to what JS MVC stack to go for? I had a feeling that React is getting more and more in favour, is that correct?

Or is Angular fine as the title of this thread suggests?

@mjsanish I would suggest you to go through this: ‘Open Web App Development Workflow’. I just tested this using the SDK and it worked fine, in particular I did not stumble on the file permission error that you mentioned.

I’m figuring out how to get a dev setup working, similar to what we can do with Bahmni Apps.
See ‘Best approach for hot reloading an OWA’.

thanks, I will look into that.

ReactJS is more and more the preferred way to go, yes.

That said, if @mjsanish is already an Angular wizard, but has never used React, I would be fine with building this in Angular. It’s pretty much standalone in any case.

@darius @mksd Ok I move forward with ReactJs since ReactJs is a more preferred way to go.

I have not previous experience with React so it would be great opportunity to learn and work on the new stack (ReactJs) for me.

@darius I’d like to get your opinion as to how much it is preferrable to leverage the existing Yeoman generators. 
and hence have the front-end scaffolded the same way any other generated OWA would (such as openmrs-owa-addonmanager for example).

This could be the opportunity to put together generators that could scaffold apps for multiple distributions at the same time, but of course this increases the overall complexity.

I haven’t looked at those yeoman generators in a while so I don’t know if they’re any good [edit: for React]. I have a slight preference for using the generator vs not doing so, but for a small self-contained application I don’t feel very strongly.

It would be a nice bonus to have a best-practice generator that could scaffold an app suitable for multiple OpenMRS distros, but I wouldn’t expect @mjsanish to work on that as part of this ticket. If you (@mksd) see a specific opportunity based on your experience with multiple OpenMRS distros, then do please highlight it.