🎨 [Frontend] Display Contact information (#8302)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/auth/ui/RequestAccount.js

@@ -83,27 +83,12 @@ qx.Class.define("osparc.auth.ui.RequestAccount", {
       this._form.add(phone, this.tr("Phone Number"), null, "phone");
 
 
-      const organization = new qx.ui.form.TextField();
-      doubleSpaced.push(organization);
-      switch (osparc.product.Utils.getProductName()) {
-        case "s4l":
-          this._form.add(organization, this.tr("Company Name"), null, "company");
-          organization.setRequired(true);
-          break;
-        case "s4lacad":
-        case "s4ldesktopacad":
-          this._form.add(organization, this.tr("University"), null, "university");
-          organization.setRequired(true);
-          break;
-        case "tiplite":
-          this._form.add(organization, this.tr("University"), null, "university");
-          break;
-        case "tis":
-          this._form.add(organization, this.tr("Organization"), null, "organization");
-          break;
-        case "osparc":
-          this._form.add(organization, this.tr("Research Group/Organization"), null, "organization");
-          break;
+      const institution = new qx.ui.form.TextField();
+      doubleSpaced.push(institution);
+      const institutionAlias = osparc.product.Utils.getInstitutionAlias();
+      this._form.add(institution, institutionAlias.label, null, institutionAlias.key);
+      if (institutionAlias.required) {
+        institution.setRequired(true);
       }
 
 

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

@@ -70,11 +70,9 @@ qx.Class.define("osparc.conversation.AddMessage", {
         }
         case "thumbnail": {
           control = osparc.utils.Utils.createThumbnail(32);
-          const authData = osparc.auth.Data.getInstance();
-          const myUsername = authData.getUsername();
-          const myEmail = authData.getEmail();
+          const meGroup = osparc.store.Groups.getInstance().getGroupMe();
           control.set({
-            source: osparc.utils.Avatar.emailToThumbnail(myEmail, myUsername, 32),
+            source: meGroup.getThumbnail(),
             alignX: "center",
             alignY: "middle",
             marginRight: 8,

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

@@ -44,13 +44,6 @@ qx.Class.define("osparc.data.model.User", {
     } else if (userData["lastName"]) {
       lastName = userData["lastName"];
     }
-    let description = [firstName, lastName].join(" ").trim(); // the null values will be replaced by empty strings
-    if (email) {
-      if (description) {
-        description += " - "
-      }
-      description += email;
-    }
 
     this.set({
       userId,
@@ -60,10 +53,32 @@ qx.Class.define("osparc.data.model.User", {
       lastName,
       email,
       phoneNumber: userData["phone"] || null,
+    });
+
+    let description = this.getFullName();
+    if (email) {
+      if (description) {
+        description += " - "
+      }
+      description += email;
+    }
+    this.set({
       label: userData["userName"] || description,
       description,
     });
 
+    if (userData["contact"]) {
+      const contact = userData["contact"];
+      this.set({
+        institution: contact["institution"] || null,
+        address: contact["address"] || null,
+        city: contact["city"] || null,
+        state: contact["state"] || null,
+        country: contact["country"] || null,
+        postalCode: contact["postalCode"] || null,
+      });
+    }
+
     // create the thumbnail after setting email and username
     this.set({
       thumbnail: this.createThumbnail(),
@@ -140,11 +155,74 @@ qx.Class.define("osparc.data.model.User", {
       init: "",
       event: "changeThumbnail",
     },
+
+    institution: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeInstitution",
+    },
+
+    address: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeAddress",
+    },
+
+    city: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeCity",
+    },
+
+    state: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeState",
+    },
+
+    country: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeCountry",
+    },
+
+    postalCode: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changePostalCode",
+    },
+  },
+
+  statics: {
+    concatFullName: function(firstName, lastName) {
+      return [firstName, lastName].filter(Boolean).join(" ");
+    },
+
+    userDataToDescription: function(firstName, lastName, email) {
+      let description = this.concatFullName(firstName, lastName);
+      if (email) {
+        if (description) {
+          description += " - "
+        }
+        description += email;
+      }
+      return description;
+    },
   },
 
   members: {
     createThumbnail: function(size) {
       return osparc.utils.Avatar.emailToThumbnail(this.getEmail(), this.getUsername(), size);
     },
+
+    getFullName: function() {
+      return this.self().concatFullName(this.getFirstName(), this.getLastName());
+    },
   },
 });

services/static-webserver/client/source/class/osparc/desktop/account/MyAccount.js

@@ -46,16 +46,18 @@ qx.Class.define("osparc.desktop.account.MyAccount", {
   },
 
   statics: {
-    createMiniProfileView: function(withSpacer = true) {
+    createMiniProfileView: function(userData) {
       const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(6)).set({
         alignX: "center",
         minWidth: 120,
         maxWidth: 150
       });
 
-      const authData = osparc.auth.Data.getInstance();
-      const username = authData.getUsername();
-      const email = authData.getEmail();
+      if (!userData) {
+        userData = osparc.auth.Data.getInstance();
+      }
+      const username = userData.getUsername();
+      const email = userData.getEmail();
       const avatarSize = 80;
       const img = new qx.ui.basic.Image().set({
         source: osparc.utils.Avatar.emailToThumbnail(email, username, avatarSize),
@@ -73,33 +75,31 @@ qx.Class.define("osparc.desktop.account.MyAccount", {
         font: "text-14",
         alignX: "center"
       });
-      authData.bind("username", usernameLabel, "value");
+      userData.bind("username", usernameLabel, "value");
       layout.add(usernameLabel);
 
       const fullNameLabel = new qx.ui.basic.Label().set({
         font: "text-13",
         alignX: "center"
       });
       layout.add(fullNameLabel);
-      authData.bind("firstName", fullNameLabel, "value", {
-        converter: () => authData.getFullName()
+      userData.bind("firstName", fullNameLabel, "value", {
+        converter: () => userData.getFullName()
       });
-      authData.bind("lastName", fullNameLabel, "value", {
-        converter: () => authData.getFullName()
+      userData.bind("lastName", fullNameLabel, "value", {
+        converter: () => userData.getFullName()
       });
 
-      if (authData.getRole() !== "user") {
-        const role = authData.getFriendlyRole();
+      if (userData.getRole() !== "user") {
+        const role = userData.getFriendlyRole();
         const roleLabel = new qx.ui.basic.Label(role).set({
           font: "text-13",
           alignX: "center"
         });
         layout.add(roleLabel);
       }
 
-      if (withSpacer) {
-        layout.add(new qx.ui.core.Spacer(15, 15));
-      }
+      layout.add(new qx.ui.core.Spacer(15, 15));
 
       return layout;
     }