buttons with actions

Author: odeimaiz

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

@@ -1065,6 +1065,18 @@ qx.Class.define("osparc.data.Resources", {
             method: "GET",
             url: statics.API + "/admin/users?status=PENDING"
           },
+          approveUser: {
+            method: "POST",
+            url: statics.API + "/admin/users/{userEmail}:approve"
+          },
+          denyUser: {
+            method: "POST",
+            url: statics.API + "/admin/users/{userEmail}:deny"
+          },
+          resendConfirmationEmail: {
+            method: "POST",
+            url: statics.API + "/admin/users/{userEmail}:resendConfirmationEmail"
+          },
           preRegister: {
             method: "POST",
             url: statics.API + "/admin/users:pre-register"

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

@@ -26,22 +26,79 @@ qx.Class.define("osparc.po.UsersPending", {
           data: [{
             name: "John Doe",
             email: "[email protected]",
-            status: "APPROVAL_PENDING",
             date: "2025-01-01 00:00:00.702394",
+            status: "APPROVAL_PENDING",
           }, {
             name: "Jane Doe",
             email: "[email protected]",
-            status: "APPROVAL_DENIED",
             date: "2025-01-01 00:01:00.702394",
+            status: "APPROVAL_DENIED",
           }, {
             name: "Alice Smith",
             email: "[email protected]",
-            status: "CONFIRMATION_PENDING",
             date: "2025-01-01 00:02:00.702394",
+            status: "CONFIRMATION_PENDING",
           }]
         });
       });
     },
+
+    createApproveButton: function(email) {
+      const button = new osparc.ui.form.FetchButton(qx.locale.Manager.tr("Approve"));
+      button.addListener("execute", () => {
+        button.setFetching(true);
+        const params = {
+          url: {
+            userEmail: email,
+          },
+        };
+        osparc.data.Resources.fetch("poUsers", "approveUser", params)
+          .then(() => {
+            osparc.FlashMessenger.logAs(qx.locale.Manager.tr("User approved"), "INFO");
+          })
+          .catch(err => osparc.FlashMessenger.logError(err))
+          .finally(() => button.setFetching(false));
+      });
+      return button;
+    },
+
+    createDenyButton: function(email) {
+      const button = new osparc.ui.form.FetchButton(qx.locale.Manager.tr("Deny"));
+      button.addListener("execute", () => {
+        button.setFetching(true);
+        const params = {
+          url: {
+            userEmail: email,
+          },
+        };
+        osparc.data.Resources.fetch("poUsers", "denyUser", params)
+          .then(() => {
+            osparc.FlashMessenger.logAs(qx.locale.Manager.tr("User denied"), "INFO");
+          })
+          .catch(err => osparc.FlashMessenger.logError(err))
+          .finally(() => button.setFetching(false));
+      });
+      return button;
+    },
+
+    createResendEmailButton: function(email) {
+      const button = new osparc.ui.form.FetchButton(qx.locale.Manager.tr("Resend Email"));
+      button.addListener("execute", () => {
+        button.setFetching(true);
+        const params = {
+          url: {
+            userEmail: email,
+          },
+        };
+        osparc.data.Resources.fetch("poUsers", "resendConfirmationEmail", params)
+          .then(() => {
+            osparc.FlashMessenger.logAs(qx.locale.Manager.tr("Email sent"), "INFO");
+          })
+          .catch(err => osparc.FlashMessenger.logError(err))
+          .finally(() => button.setFetching(false));
+      });
+      return button;
+    },
   },
 
   members: {
@@ -54,6 +111,12 @@ qx.Class.define("osparc.po.UsersPending", {
             flex: 1
           });
           break;
+        case "pending-users-layout": {
+          const grid = new qx.ui.layout.Grid(15, 5);
+          control = new qx.ui.container.Composite(grid);
+          this.getChildControl("pending-users-container").add(control);
+          break;
+        }
       }
       return control || this.base(arguments, id);
     },
@@ -64,14 +127,103 @@ qx.Class.define("osparc.po.UsersPending", {
       this.__populatePendingUsersLayout();
     },
 
-    __populatePendingUsersLayout: function(respData) {
-      const pendingUsersContainer = this.getChildControl("pending-users-container");
-      osparc.utils.Utils.removeAllChildren(pendingUsersContainer);
+    __addHeader: function() {
+      const pendingUsersLayout = this.getChildControl("pending-users-layout");
+
+      pendingUsersLayout.add(new qx.ui.basic.Label(this.tr("Name")).set({
+        font: "text-14"
+      }), {
+        row: 0,
+        column: 0,
+      });
+
+      pendingUsersLayout.add(new qx.ui.basic.Label(this.tr("Email")).set({
+        font: "text-14"
+      }), {
+        row: 0,
+        column: 1,
+      });
+
+      pendingUsersLayout.add(new qx.ui.basic.Label(this.tr("Date")).set({
+        font: "text-14"
+      }), {
+        row: 0,
+        column: 2,
+      });
+
+      pendingUsersLayout.add(new qx.ui.basic.Label(this.tr("Status")).set({
+        font: "text-14"
+      }), {
+        row: 0,
+        column: 3,
+      });
+
+      pendingUsersLayout.add(new qx.ui.basic.Label(this.tr("Action")).set({
+        font: "text-14"
+      }), {
+        row: 0,
+        column: 4,
+      });
+    },
+
+    __addRows: function(pendingUsers) {
+      const pendingUsersLayout = this.getChildControl("pending-users-layout");
+
+      let row = 1;
+      pendingUsers.forEach(pendingUser => {
+        pendingUsersLayout.add(new qx.ui.basic.Label(pendingUser.name), {
+          row,
+          column: 0,
+        });
+        pendingUsersLayout.add(new qx.ui.basic.Label(pendingUser.email), {
+          row,
+          column: 1,
+        });
+        pendingUsersLayout.add(new qx.ui.basic.Label(osparc.utils.Utils.formatDateAndTime(new Date(pendingUser.date))), {
+          row,
+          column: 2,
+        });
+        pendingUsersLayout.add(new qx.ui.basic.Label(pendingUser.status.toLowerCase()), {
+          row,
+          column: 3,
+        });
+
+        const buttonsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
+        pendingUsersLayout.add(buttonsLayout, {
+          row,
+          column: 4,
+        });
+        switch (pendingUser.status) {
+          case "APPROVAL_PENDING": {
+            const approveButton = this.self().createApproveButton(pendingUser.email);
+            buttonsLayout.add(approveButton);
+            const denyButton = this.self().createDenyButton(pendingUser.email);
+            buttonsLayout.add(denyButton);
+            break;
+          }
+          case "APPROVAL_DENIED": {
+            const approveButton = this.self().createApproveButton(pendingUser.email);
+            buttonsLayout.add(approveButton);
+            break;
+          }
+          case "CONFIRMATION_PENDING": {
+            const resendEmailButton = this.self().createResendEmailButton(pendingUser.email);
+            buttonsLayout.add(resendEmailButton);
+            break;
+          }
+        }
+        row++;
+      });
+    },
 
+    __populatePendingUsersLayout: function() {
       // osparc.data.Resources.fetch("poUsers", "getPendingUsers", params)
       this.self().getPendingUsers()
         .then(pendingUsers => {
-          console.log("Pending users: ", pendingUsers);
+          const pendingUsersLayout = this.getChildControl("pending-users-layout");
+          pendingUsersLayout.removeAll();
+          this.__addHeader();
+          this.__addRows(pendingUsers["data"]);
         })
         .catch(err => osparc.FlashMessenger.logError(err));
     }