🎨🐛 [Frontend] PO Center improvements

services/static-webserver/client/source/class/osparc/Application.js

@@ -138,7 +138,10 @@ qx.Class.define("osparc.Application", {
             osparc.auth.Manager.getInstance().validateToken()
               .then(() => {
                 const studyId = urlFragment.nav[1];
-                const loadAfterLogin = { studyId };
+                const loadAfterLogin = {
+                  id: "startStudy",
+                  studyId,
+                };
                 this.__loadMainPage(loadAfterLogin);
               })
               .catch(() => this.__loadLoginPage());
@@ -157,7 +160,10 @@ qx.Class.define("osparc.Application", {
                 if (["anonymous", "guest"].includes(data.role.toLowerCase())) {
                   this.__loadNodeViewerPage(studyId, viewerNodeId);
                 } else {
-                  const loadAfterLogin = { studyId };
+                  const loadAfterLogin = {
+                    id: "startStudy",
+                    studyId,
+                  };
                   this.__loadMainPage(loadAfterLogin);
                 }
               });
@@ -171,13 +177,29 @@ qx.Class.define("osparc.Application", {
             osparc.auth.Manager.getInstance().validateToken()
               .then(() => {
                 const conversationId = urlFragment.nav[1];
-                const loadAfterLogin = { conversationId };
+                const loadAfterLogin = {
+                  id: "openConversation",
+                  conversationId,
+                };
                 this.__loadMainPage(loadAfterLogin);
               })
               .catch(() => this.__loadLoginPage());
           }
           break;
         }
+        case "review-users": {
+          // Route: /#/review-users
+          osparc.utils.Utils.cookie.deleteCookie("user");
+          osparc.auth.Manager.getInstance().validateToken()
+            .then(() => {
+              const loadAfterLogin = {
+                id: "openReviewUsers",
+              };
+              this.__loadMainPage(loadAfterLogin);
+            })
+            .catch(() => this.__loadLoginPage());
+          break;
+        }
         case "registration": {
           // Route: /#/registration/?invitation={token}
           if (urlFragment.params && urlFragment.params.invitation) {
@@ -516,15 +538,20 @@ qx.Class.define("osparc.Application", {
               });
             }
 
-            if (loadAfterLogin && loadAfterLogin["studyId"]) {
-              const studyId = loadAfterLogin["studyId"];
-              osparc.store.Store.getInstance().setCurrentStudyId(studyId);
-            }
+            if (loadAfterLogin) {
+              if (loadAfterLogin["id"] === "startStudy" && loadAfterLogin["studyId"]) {
+                const studyId = loadAfterLogin["studyId"];
+                osparc.store.Store.getInstance().setCurrentStudyId(studyId);
+              }
 
-            if (loadAfterLogin && loadAfterLogin["conversationId"]) {
-              const conversationId = loadAfterLogin["conversationId"];
-              const supportCenterWindow = osparc.support.SupportCenter.openWindow();
-              supportCenterWindow.openConversation(conversationId);
+              if (loadAfterLogin["id"] === "openConversation" && loadAfterLogin["conversationId"]) {
+                const conversationId = loadAfterLogin["conversationId"];
+                const supportCenterWindow = osparc.support.SupportCenter.openWindow();
+                supportCenterWindow.openConversation(conversationId);
+              }
+              if (loadAfterLogin["id"] === "openReviewUsers" && osparc.data.Permissions.getInstance().isProductOwner()) {
+                osparc.po.POCenterWindow.openWindow("reviewUsers");
+              }
             }
 
             const loadViewerPage = () => {

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

@@ -188,7 +188,8 @@ qx.Class.define("osparc.data.model.Conversation", {
       return promise
         .then(resp => {
           const messagesData = resp["data"];
-          messagesData.forEach(messageData => this._addMessage(messageData));
+          const markAsUnread = false;
+          messagesData.forEach(messageData => this._addMessage(messageData, markAsUnread));
           this.__nextRequestParams = resp["_links"]["next"];
           return resp;
         })

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

@@ -184,12 +184,12 @@ qx.Class.define("osparc.data.model.ConversationSupport", {
     },
 
     // overriden
-    _addMessage: function(messageData) {
+    _addMessage: function(messageData, markAsUnread = true) {
       const message = this.base(arguments, messageData);
       this.__evalFirstAndLastMessage();
 
       // mark conversation as unread if the message is from the other party
-      if (!osparc.data.model.Message.isMyMessage(message)) {
+      if (markAsUnread && !osparc.data.model.Message.isMyMessage(message)) {
         this.setReadBy(false);
       }
       return message;

services/static-webserver/client/source/class/osparc/po/POCenter.js

@@ -18,7 +18,7 @@
 qx.Class.define("osparc.po.POCenter", {
   extend: osparc.ui.window.TabbedView,
 
-  construct: function() {
+  construct: function(openPage) {
     this.base(arguments);
 
     const miniProfile = osparc.desktop.account.MyAccount.createMiniProfileView().set({
@@ -31,6 +31,10 @@ qx.Class.define("osparc.po.POCenter", {
     this.__addPreRegistrationPage();
     this.__addInvitationsPage();
     this.__addProductPage();
+
+    if (openPage) {
+      this.__openPage(openPage);
+    }
   },
 
   members: {
@@ -45,7 +49,8 @@ qx.Class.define("osparc.po.POCenter", {
       const title = this.tr("Review Users");
       const iconSrc = "@FontAwesome5Solid/user-plus/22";
       const usersPending = new osparc.po.UsersPending();
-      this.addTab(title, iconSrc, usersPending);
+      const page = this.addTab(title, iconSrc, usersPending);
+      page.pageId = "reviewUsers";
     },
 
     __addPreRegistrationPage: function() {
@@ -68,5 +73,14 @@ qx.Class.define("osparc.po.POCenter", {
       const productInfo = new osparc.po.ProductInfo();
       this.addTab(title, iconSrc, productInfo);
     },
+
+    __openPage: function(openPage) {
+      const tabsView = this.getChildControl("tabs-view");
+      const pages = tabsView.getChildren();
+      const page = pages.find(page => page.pageId && page.pageId === openPage);
+      if (page) {
+        tabsView.setSelection([page]);
+      }
+    },
   }
 });

services/static-webserver/client/source/class/osparc/po/POCenterWindow.js

@@ -18,23 +18,23 @@
 qx.Class.define("osparc.po.POCenterWindow", {
   extend: osparc.ui.window.TabbedWindow,
 
-  construct: function() {
+  construct: function(openPage) {
     this.base(arguments, "po-center", this.tr("PO Center"));
 
-    const width = 900;
-    const height = 600;
+    const width = 1000;
+    const height = 700;
     this.set({
       width,
       height
     });
 
-    const poCenter = new osparc.po.POCenter();
+    const poCenter = new osparc.po.POCenter(openPage);
     this._setTabbedView(poCenter);
   },
 
   statics: {
-    openWindow: function() {
-      const accountWindow = new osparc.po.POCenterWindow();
+    openWindow: function(openPage) {
+      const accountWindow = new osparc.po.POCenterWindow(openPage);
       accountWindow.center();
       accountWindow.open();
       return accountWindow;

services/static-webserver/client/source/class/osparc/po/Users.js

@@ -19,6 +19,17 @@
 qx.Class.define("osparc.po.Users", {
   extend: osparc.po.BaseView,
 
+  statics: {
+    GRID_POS: {
+      NAME: 0,
+      EMAIL: 1,
+      DATE: 2,
+      ACCOUNT_REQUEST_STATUS: 3,
+      STATUS: 4,
+      INFO: 5,
+    }
+  },
+
   members: {
     _createChildControlImpl: function(id) {
       let control;
@@ -37,6 +48,12 @@ qx.Class.define("osparc.po.Users", {
             flex: 1
           });
           break;
+        case "found-users-layout": {
+          const grid = new qx.ui.layout.Grid(15, 5);
+          control = new qx.ui.container.Composite(grid);
+          this.getChildControl("found-users-container").add(control);
+          break;
+        }
       }
       return control || this.base(arguments, id);
     },
@@ -70,6 +87,8 @@ qx.Class.define("osparc.po.Users", {
       searchBtn.set({
         appearance: "form-button"
       });
+      const commandEsc = new qx.ui.command.Command("Enter");
+      searchBtn.setCommand(commandEsc);
       searchBtn.addListener("execute", () => {
         if (!osparc.data.Permissions.getInstance().canDo("user.users.search", true)) {
           return;
@@ -100,11 +119,88 @@ qx.Class.define("osparc.po.Users", {
       return form;
     },
 
-    __populateFoundUsersLayout: function(respData) {
-      const foundUsersContainer = this.getChildControl("found-users-container");
-      osparc.utils.Utils.removeAllChildren(foundUsersContainer);
-      const usersRespViewer = new osparc.ui.basic.JsonTreeWidget(respData, "users-data");
-      foundUsersContainer.add(usersRespViewer);
-    }
+    __createHeaderLabel: function(value) {
+      const label = new qx.ui.basic.Label(value).set({
+        font: "text-16",
+        textColor: "text"
+      });
+      return label;
+    },
+
+    __addHeader: function() {
+      const foundUsersLayout = this.getChildControl("found-users-layout");
+      foundUsersLayout.add(this.__createHeaderLabel(this.tr("Name")), {
+        row: 0,
+        column: this.self().GRID_POS.NAME,
+      });
+      foundUsersLayout.add(this.__createHeaderLabel(this.tr("Email")), {
+        row: 0,
+        column: this.self().GRID_POS.EMAIL,
+      });
+      foundUsersLayout.add(this.__createHeaderLabel(this.tr("Date")), {
+        row: 0,
+        column: this.self().GRID_POS.DATE,
+      });
+      foundUsersLayout.add(this.__createHeaderLabel(this.tr("Request")), {
+        row: 0,
+        column: this.self().GRID_POS.ACCOUNT_REQUEST_STATUS,
+      });
+      foundUsersLayout.add(this.__createHeaderLabel(this.tr("Status")), {
+        row: 0,
+        column: this.self().GRID_POS.STATUS,
+      });
+    },
+
+    __populateFoundUsersLayout: function(foundUsers) {
+      const foundUsersLayout = this.getChildControl("found-users-layout");
+      foundUsersLayout.removeAll();
+
+      this.__addHeader();
+      foundUsers.forEach((user, index) => {
+        const row = index + 1;
+
+        const fullNameLabel = new qx.ui.basic.Label(user.firstName + " " + user.lastName).set({
+          selectable: true,
+        });
+        foundUsersLayout.add(fullNameLabel, {
+          row,
+          column: this.self().GRID_POS.NAME,
+        });
+
+        const emailLabel = new qx.ui.basic.Label(user["email"]).set({
+          selectable: true,
+        });
+        foundUsersLayout.add(emailLabel, {
+          row,
+          column: this.self().GRID_POS.EMAIL,
+        });
+
+        const dateData = user["preRegistrationCreated"] || user["accountRequestReviewedAt"];
+        const date = dateData ? osparc.utils.Utils.formatDateAndTime(new Date(dateData)) : "-";
+        const dateLabel = new qx.ui.basic.Label(date);
+        foundUsersLayout.add(dateLabel, {
+          row,
+          column: this.self().GRID_POS.DATE,
+        });
+
+        const accountRequestStatusLabel = new qx.ui.basic.Label(user["accountRequestStatus"]);
+        foundUsersLayout.add(accountRequestStatusLabel, {
+          row,
+          column: this.self().GRID_POS.ACCOUNT_REQUEST_STATUS,
+        });
+
+        const statusLabel = new qx.ui.basic.Label(user["status"]);
+        foundUsersLayout.add(statusLabel, {
+          row,
+          column: this.self().GRID_POS.STATUS,
+        });
+
+        const infoButton = osparc.po.UsersPending.createInfoButton(user);
+        foundUsersLayout.add(infoButton, {
+          row,
+          column: this.self().GRID_POS.INFO,
+        });
+      });
+    },
   }
 });