users on card

Author: odeimaiz

services/static-webserver/client/source/class/osparc/dashboard/GridButtonBase.js

@@ -61,12 +61,16 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
         rowSpan: 1,
         colSpan: 4
       },
-      TAGS: {
+      AVATAR_GROUP: {
         row: 3,
         column: 0
       },
-      FOOTER: {
+      TAGS: {
         row: 4,
+        column: 0
+      },
+      FOOTER: {
+        row: 5,
         column: 0,
         rowSpan: 1,
         colSpan: 4

services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js

@@ -81,6 +81,11 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
           layout = this.getChildControl("footer");
           layout.add(control, osparc.dashboard.GridButtonBase.FPOS.HITS);
           break;
+        case "avatar-group":
+          control = new osparc.ui.basic.AvatarGroup(24, "left", 150);
+          layout = this.getChildControl("main-layout");
+          layout.add(control, osparc.dashboard.GridButtonBase.POS.AVATAR_GROUP);
+          break;
         case "tags":
           control = new qx.ui.container.Composite(new qx.ui.layout.Flow(5, 3)).set({
             anonymous: true,
@@ -237,6 +242,25 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
       const user = this.__createOwner(value);
       label.setValue(user);
       label.setVisibility(value ? "visible" : "excluded");
+
+      // remove this, testing purposes
+      if (this.getResourceType() === "study") {
+        const avatarGroup = this.getChildControl("avatar-group");
+        const allUsers = [
+          { name: "Alice", avatar: "https://i.pravatar.cc/150?img=1" },
+          { name: "Bob", avatar: "https://i.pravatar.cc/150?img=2" },
+          { name: "Charlie", avatar: "https://i.pravatar.cc/150?img=3" },
+          { name: "Dana", avatar: "https://i.pravatar.cc/150?img=4" },
+          { name: "Eve", avatar: "https://i.pravatar.cc/150?img=5" },
+          { name: "Frank", avatar: "https://i.pravatar.cc/150?img=6" },
+        ];
+        // Random number of users between 1 and 6
+        const randomCount = Math.floor(Math.random() * 6) + 1;
+        // Shuffle the array and take the first randomCount users
+        const shuffled = allUsers.sort(() => 0.5 - Math.random());
+        const randomUsers = shuffled.slice(0, randomCount);
+        avatarGroup.setUsers(randomUsers);
+      }
     },
 
     _applyAccessRights: function(value) {

services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js

@@ -108,17 +108,6 @@ qx.Class.define("osparc.navigation.NavigationBar", {
         converter: s => s ? "visible" : "excluded"
       });
 
-      const avatarGroup = new osparc.ui.basic.AvatarGroup();
-      avatarGroup.setUsers([
-        { name: "Alice", avatar: "https://i.pravatar.cc/150?img=1" },
-        { name: "Bob", avatar: "https://i.pravatar.cc/150?img=2" },
-        { name: "Charlie", avatar: "https://i.pravatar.cc/150?img=3" },
-        { name: "Dana", avatar: "https://i.pravatar.cc/150?img=4" },
-        { name: "Eve", avatar: "https://i.pravatar.cc/150?img=5" },
-        { name: "Frank", avatar: "https://i.pravatar.cc/150?img=6" },
-      ]);
-      this.getChildControl("left-items").add(avatarGroup);
-
       const studyTitleOptions = this.getChildControl("study-title-options");
       this.bind("study", studyTitleOptions, "visibility", {
         converter: s => s ? "visible" : "excluded"