nMembers

Author: odeimaiz

services/static-webserver/client/source/class/osparc/desktop/organizations/OrganizationDetails.js

@@ -41,27 +41,30 @@ qx.Class.define("osparc.desktop.organizations.OrganizationDetails", {
     __templatesList: null,
     __servicesList: null,
 
-    setCurrentOrg: function(orgModel) {
-      if (orgModel === null) {
+    setCurrentOrg: function(organization) {
+      if (organization === null) {
         return;
       }
-      this.__orgModel = orgModel;
+      this.__orgModel = organization;
 
       const organizationListItem = this.__addOrganizationListItem();
-      orgModel.bind("groupId", organizationListItem, "key");
-      orgModel.bind("groupId", organizationListItem, "model");
-      orgModel.bind("thumbnail", organizationListItem, "thumbnail");
-      orgModel.bind("label", organizationListItem, "title");
-      orgModel.bind("description", organizationListItem, "subtitle");
-      orgModel.bind("groupMembers", organizationListItem, "role", {
-        converter: groupMembers => groupMembers ? Object.keys(groupMembers).length + this.tr(" members") : "-"
-      });
-      orgModel.bind("accessRights", organizationListItem, "accessRights");
+      organization.bind("groupId", organizationListItem, "key");
+      organization.bind("groupId", organizationListItem, "model");
+      organization.bind("thumbnail", organizationListItem, "thumbnail");
+      organization.bind("label", organizationListItem, "title");
+      organization.bind("description", organizationListItem, "subtitle");
+      organization.bind("groupMembers", organizationListItem, "groupMembers");
+      organization.bind("accessRights", organizationListItem, "accessRights");
+      organizationListItem.updateNMembers();
+      [
+        "memberAdded",
+        "memberRemoved",
+      ].forEach(ev => organization.addListener(ev, () => organizationListItem.updateNMembers()));
 
       // set orgModel to the tab views
-      this.__membersList.setCurrentOrg(orgModel);
-      this.__templatesList.setCurrentOrg(orgModel);
-      this.__servicesList.setCurrentOrg(orgModel);
+      this.__membersList.setCurrentOrg(organization);
+      this.__templatesList.setCurrentOrg(organization);
+      this.__servicesList.setCurrentOrg(organization);
     },
 
     __getTitleLayout: function() {

services/static-webserver/client/source/class/osparc/desktop/organizations/OrganizationsList.js

@@ -135,9 +135,7 @@ qx.Class.define("osparc.desktop.organizations.OrganizationsList", {
           ctrl.bindProperty("thumbnail", "thumbnail", null, item, id);
           ctrl.bindProperty("label", "title", null, item, id);
           ctrl.bindProperty("description", "subtitle", null, item, id);
-          ctrl.bindProperty("groupMembers", "role", {
-            converter: groupMembers => groupMembers ? Object.keys(groupMembers).length + this.tr(" members") : "-"
-          }, item, id);
+          ctrl.bindProperty("groupMembers", "groupMembers", null, item, id);
           ctrl.bindProperty("accessRights", "accessRights", null, item, id);
         },
         configureItem: item => {

services/static-webserver/client/source/class/osparc/ui/list/OrganizationListItem.js

@@ -24,7 +24,14 @@ qx.Class.define("osparc.ui.list.OrganizationListItem", {
       init: true,
       nullable: false,
       event: "changeShowDeleteButton"
-    }
+    },
+
+    groupMembers: {
+      check: "Object",
+      nullable: true,
+      init: null,
+      event: "changeGroupMembers",
+    },
   },
 
   events: {
@@ -39,6 +46,11 @@ qx.Class.define("osparc.ui.list.OrganizationListItem", {
       return;
     },
 
+    updateNMembers: function() {
+      const roleText = this.getGroupMembers() ? Object.keys(this.getGroupMembers()).length + this.tr(" members") : "-";
+      this.setRole(roleText);
+    },
+
     // overridden
     _getOptionsMenu: function() {
       let menu = null;
@@ -89,6 +101,6 @@ qx.Class.define("osparc.ui.list.OrganizationListItem", {
           thumbnail.setSource(osparc.utils.Icons.everyone(osparc.ui.list.ListItemWithMenu.ICON_SIZE));
         }
       }
-    }
+    },
   }
 });