Overhaul The User Management Dashboard

Projects ID Dashboard
,
42

Need to ask for you help… So, keep calm, there will be a long post :slight_smile:

As we talked before starting GSOC, in our module we will render our react components on a server side. So, first, I created basic skeleton, with React and material-ui library, you can look the code in this commit.

It renders UI well, but there was a one BIG problem: material-ui library requires react-tap-event-plugin for listening events, without this plugin click/tap events don’t working MUI: The React component library you always wanted There is an example, how to launch this plugin for client-side rendering, but I have no idea how to use it when we render components on a server side (because this plugin must be executed only when we render components).

Then I tried to set an app with client side rendering, just for testing how events will work. I pushed code to separate branch: GitHub - diospark/openmrs-contrib-id-user-management-dashboard at client-side

There I’ve done setup converting React and ES6 specific js files, using Babel and Browserify plugins for Gulp, to format, which can be used on a client side (UI). In my case, click and other events working, but I got a lot of errors, regarding this issue addComponentAsRefTo Invariant Violation · GitHub I think, I believe, that I have a problem with my component structure, but I have no idea how can I fix that, and this is a big blocker for me.

Here is the screen of what happening when I am clicking on a table

screen.png1924×877 138 KB

So, will be good to find a decision for first or second situation that I described,

To start my code just resolve dependencies (npm install) , and start the server script (node server.js) For client side solution, you also have to compile js files before starting server, just install Gulp and launch ‘gulp’ command

Thanks

1 Like
43

If you find it easier to do client-side – go ahead – we can always figure it out and refactor later. I would much rather you get work done vs spin your gears :slight_smile:

44

Updated my post with a screen

45

I’m trying to fix the globalnavbar after I updated discourse recently – Go rest – I don’t want you burning out – mental health is important :slight_smile: I’ll have a peek in a bit

46

Okay a few comments:

  • Node 5 supports let and const – let’s use those as to not pollute the global namespace. This is the version we are deploying with.
  • Client-side rendering works – go with it, forget everything about server-side rendering.
  • As for your error, I’m sadly at a loss – @pascal – I can help you if you wanna have a look :frowning:
  • It may be worthwhile to checkout other component collections to see if the error persists – I’m not sure how to help :crying_cat_face: and if you find one that works then :ship: it! See below for suggestions.

One’s i’m partial to:

1 Like
47

Thanks for a links! I’ll have a look.

Is it normal for react to combine components from different libraries? For example, react-toolbox and [ui-material] (http://www.material-ui.com/#/) ?

48

I wouldn’t advise it, let’s stick with one – they all have a data table :slight_smile: – Remember, material design is one spec :slight_smile:

49

How’s it going?

50

I am working on integrating other libraries (from you list), to find the best solution. Today I will make a post with results, as usuailly

1 Like
51

Okay, just ensuring you’re making progress :slight_smile:

52

@dmytro.trifonov,

I’m concerned that you haven’t committed anything since June 8 – You should be commited code at least daily…I don’t like to micromanage, but I’m just making sure you’re okay.

as they say, “commit early, commit often”

1 Like
53

Hello, Robert!

Don’t worry, I am fine :slight_smile: Let me explain - I never worked with React before, and this is very special technology, which doesn’t looks like any other, that I worked with (AngularJS, JQueryUI). So, I need some time for reading docs, and see the examples, how to make one or another thing. Unfortunately, there not so many examples, related to react-toolbox library, so very often I am going across the way of trials and errors :frowning: That’s why, as for now, I don’t make commits every day.

1 Like
54

So long as you’re on track, I’m happy. Though, all react-toolbox is, is a set of reusable components implementing material design. Don’t think of it differently. Once you do that it’s just about how components work together :slight_smile:

55

@dmytro.trifonov,

Make sure that I’m able to manage LDAP groups as well as users.

1 Like
56

It must be a feature of User Dashboard?

57

It should be, but if it’s not I have no issue doing it. What’s important is that I can do CRUD operations on users, and edit their LDAP groups, we don’t know how many LDAP groups a user will belong to.

58

You mean, add/remove user from some group, or group CRUD?

59

Yes, I need to be able to edit group memberships. It’s one of the things I ABSOLUTELY need. This isn’t a suggestion, it’s a hard requirement–that is – without it the project isn’t finished.

1 Like
60

When you implement the backend code, copious logging is a good thing. I wanna know when they’re deleted from Mongo and also from ldap – log the search result, log everything.

1 Like
61

Thanks for a note :slight_smile: