UserDetails working

Author: odeimaiz

services/static-webserver/client/source/class/osparc/conversation/MessageUI.js

@@ -165,14 +165,8 @@ qx.Class.define("osparc.conversation.MessageUI", {
 
       osparc.store.Users.getInstance().getUser(message["userGroupId"])
         .then(user => {
-          if (user) {
-            thumbnail.setSource(user.getThumbnail());
-            thumbnail.setUser(user);
-            userName.setValue(user.getLabel());
-          } else {
-            thumbnail.setSource(osparc.utils.Avatar.emailToThumbnail());
-            userName.setValue("Unknown user");
-          }
+          thumbnail.setUser(user);
+          userName.setValue(user ? user.getLabel() : "Unknown user");
         })
         .catch(() => {
             thumbnail.setSource(osparc.utils.Avatar.emailToThumbnail());

services/static-webserver/client/source/class/osparc/data/model/User.js

@@ -51,7 +51,7 @@ qx.Class.define("osparc.data.model.User", {
       }
       description += email;
     }
-    const thumbnail = osparc.utils.Avatar.emailToThumbnail(email, username);
+
     this.set({
       userId,
       groupId,
@@ -60,10 +60,14 @@ qx.Class.define("osparc.data.model.User", {
       lastName,
       email,
       phoneNumber: userData["phone"] || null,
-      thumbnail,
       label: userData["userName"] || description,
       description,
     });
+
+    // create the thumbnail after setting email and username
+    this.set({
+      thumbnail: this.createThumbnail(),
+    });
   },
 
   properties: {
@@ -137,4 +141,10 @@ qx.Class.define("osparc.data.model.User", {
       event: "changeThumbnail",
     },
   },
+
+  members: {
+    createThumbnail: function(size) {
+      return osparc.utils.Avatar.emailToThumbnail(this.getEmail(), this.getUsername(), size);
+    },
+  },
 });

services/static-webserver/client/source/class/osparc/ui/basic/UserThumbnail.js

@@ -39,9 +39,19 @@ qx.Class.define("osparc.ui.basic.UserThumbnail", {
   },
 
   members: {
+    __applyUser: function(user) {
+      if (user) {
+        this.setSource(user.getThumbnail());
+      } else {
+        this.setSource(osparc.utils.Avatar.emailToThumbnail());
+      }
+    },
+
     __openUserDetails: function() {
       if (this.getUser()) {
-        osparc.user.UserDetails.popUpInWindow(this.getUser());
+        const userDetails = new osparc.user.UserDetails(this.getUser());
+        userDetails.center();
+        userDetails.open();
       }
     },
   }

services/static-webserver/client/source/class/osparc/user/UserDetails.js

@@ -21,7 +21,13 @@ qx.Class.define("osparc.user.UserDetails", {
   construct: function(user) {
     this.base(arguments);
 
-    this.setLayout(new qx.ui.layout.VBox(10));
+    this.set({
+      layout: new qx.ui.layout.VBox(10),
+      autoDestroy: true,
+      showMaximize: false,
+      showMinimize: false,
+      clickAwayClose: true,
+    });
 
     this.setUser(user);
   },
@@ -30,15 +36,6 @@ qx.Class.define("osparc.user.UserDetails", {
     WIDTH: 300,
     HEIGHT: 200,
 
-    popUpInWindow: function(userModel) {
-      const userDetails = new osparc.user.UserDetails(userModel);
-      const title = userModel.getUsername();
-      osparc.ui.window.Window.popUpInWindow(userDetails, title, this.WIDTH, this.HEIGHT).set({
-        // layout: new qx.ui.layout.Grow(),
-        // ...osparc.ui.window.TabbedWindow.DEFAULT_PROPS,
-      });
-    },
-
     GRID_POS: {
       USERNAME: 0,
       FULLNAME: 1,
@@ -62,15 +59,20 @@ qx.Class.define("osparc.user.UserDetails", {
       switch (id) {
         case "top-layout":
           control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
-          this._add(control);
+          this.add(control);
           break;
         case "thumbnail":
           control = new osparc.ui.basic.Thumbnail(null, 100, 100);
+          control.getChildControl("image").set({
+            anonymous: true,
+            decorator: "rounded",
+          });
           this.getChildControl("top-layout").add(control);
           break;
         case "main-info": {
           const grid = new qx.ui.layout.Grid(5, 10);
           grid.setColumnFlex(1, 1);
+          grid.setColumnAlign(0, "right", "middle");
           control = new qx.ui.container.Composite(grid);
           this.getChildControl("top-layout").add(control, {
             flex: 1
@@ -121,11 +123,11 @@ qx.Class.define("osparc.user.UserDetails", {
     },
 
     __applyUser: function(user) {
-      console.log("user", user);
+      this.setCaption(user.getUsername());
 
-      this.getChildControl("thumbnail").setSource(user.getThumbnail());
+      this.getChildControl("thumbnail").setSource(user.createThumbnail(96));
       this.getChildControl("username").setValue(user.getUsername());
-      this.getChildControl("fullname").setValue(user.getFirstName() + " " + this.getLastName());
+      this.getChildControl("fullname").setValue(user.getFirstName() + " " + user.getLastName());
       this.getChildControl("email").setValue(user.getEmail());
     },
   }