✨ Groups Templates (and Services!) by Shared with (ITISFoundation#3665)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/component/permissions/ShareWith.js

@@ -35,17 +35,17 @@ qx.Class.define("osparc.component.permissions.ShareWith", {
     const store = osparc.store.Store.getInstance();
     Promise.all([
       store.getGroupsMe(),
-      store.getGroupsAll()
+      store.getGroupEveryone()
     ])
       .then(values => {
         const groupMe = values[0];
-        const groupAll = values[1];
+        const groupEveryone = values[1];
         this.__rbManager.getChildren().forEach(rb => {
           if (rb.contextId === this.self().SharingOpts["me"].contextId) {
             rb.gid = groupMe["gid"];
           }
           if (rb.contextId === this.self().SharingOpts["all"].contextId) {
-            rb.gid = groupAll["gid"];
+            rb.gid = groupEveryone["gid"];
           }
         });
       });

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

@@ -217,19 +217,19 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
 
         const store = osparc.store.Store.getInstance();
         Promise.all([
-          store.getGroupsAll(),
+          store.getGroupEveryone(),
           store.getVisibleMembers(),
           store.getGroupsOrganizations()
         ])
           .then(values => {
-            const all = values[0];
+            const everyone = values[0];
             const orgMembs = [];
             const orgMembers = values[1];
             for (const gid of Object.keys(orgMembers)) {
               orgMembs.push(orgMembers[gid]);
             }
             const orgs = values.length === 3 ? values[2] : [];
-            const groups = [orgMembs, orgs, [all]];
+            const groups = [orgMembs, orgs, [everyone]];
             this.__setSharedIcon(sharedIcon, value, groups);
           });
 

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

@@ -89,6 +89,15 @@ qx.Class.define("osparc.dashboard.GroupedToggleButtonContainer", {
             allowGrowX: false,
             backgroundColor: "background-main-1"
           });
+          control.getChildControl("icon").set({
+            scale: true,
+            allowGrowX: true,
+            allowGrowY: true,
+            allowShrinkX: true,
+            allowShrinkY: true,
+            maxWidth: 32,
+            maxHeight: 32
+          });
           control.getContentElement().setStyles({
             "border-top-left-radius": "4px",
             "border-top-right-radius": "4px"

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

@@ -209,19 +209,19 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
 
         const store = osparc.store.Store.getInstance();
         Promise.all([
-          store.getGroupsAll(),
+          store.getGroupEveryone(),
           store.getVisibleMembers(),
           store.getGroupsOrganizations()
         ])
           .then(values => {
-            const all = values[0];
+            const everyone = values[0];
             const orgMembs = [];
             const orgMembers = values[1];
             for (const gid of Object.keys(orgMembers)) {
               orgMembs.push(orgMembers[gid]);
             }
             const orgs = values.length === 3 ? values[2] : [];
-            const groups = [orgMembs, orgs, [all]];
+            const groups = [orgMembs, orgs, [everyone]];
             this.__setSharedIcon(sharedIcon, value, groups);
           });
 

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

@@ -161,6 +161,38 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       this._reloadCards();
     },
 
+    _addGroupByButton: function() {
+      const groupByMenu = new qx.ui.menu.Menu().set({
+        font: "text-14"
+      });
+      const groupByButton = new qx.ui.form.MenuButton(this.tr("Group"), "@FontAwesome5Solid/chevron-down/10", groupByMenu);
+      osparc.utils.Utils.setIdToWidget(groupByButton, "groupByButton");
+
+      const dontGroup = new qx.ui.menu.RadioButton(this.tr("None"));
+      osparc.utils.Utils.setIdToWidget(dontGroup, "groupByNone");
+      dontGroup.addListener("execute", () => this._groupByChanged(null));
+      const tagByGroup = new qx.ui.menu.RadioButton(this.tr("Tags"));
+      tagByGroup.addListener("execute", () => this._groupByChanged("tags"));
+      const groupByShared = new qx.ui.menu.RadioButton(this.tr("Shared with"));
+      groupByShared.addListener("execute", () => this._groupByChanged("shared"));
+
+      const groupOptions = new qx.ui.form.RadioGroup();
+      [
+        dontGroup,
+        tagByGroup,
+        groupByShared
+      ].forEach(btn => {
+        groupByMenu.add(btn);
+        groupOptions.add(btn);
+      });
+
+      if (osparc.utils.Utils.isProduct("s4llite")) {
+        tagByGroup.execute();
+      }
+
+      this._secondaryBar.add(groupByButton);
+    },
+
     _addViewModeButton: function() {
       const viewByMenu = this.__viewMenuButton.getMenu();
 
@@ -177,6 +209,8 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
         viewByMenu.add(btn);
         groupOptions.add(btn);
       });
+
+      this._secondaryBar.add(this.__viewMenuButton);
     },
 
     /**

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

@@ -47,7 +47,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     },
 
     groupBy: {
-      check: [null, "tags"],
+      check: [null, "tags", "shared"],
       init: null,
       nullable: true
     }
@@ -127,11 +127,11 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       return this.__flatList;
     },
 
-    __createGroupContainer: function(groupId, headerLabel, headerColor) {
+    __createGroupContainer: function(groupId, headerLabel, headerColor = "text") {
       const groupContainer = new osparc.dashboard.GroupedToggleButtonContainer().set({
         groupId: groupId.toString(),
         headerLabel,
-        headerIcon: "@FontAwesome5Solid/tag/24",
+        headerIcon: "",
         headerColor,
         visibility: "excluded"
       });
@@ -215,7 +215,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
 
     reloadCards: function(listId) {
       this.__cleanAll();
-      if (this.getGroupBy() === "tags") {
+      if (this.getGroupBy()) {
         const noGroupContainer = this.__createEmptyGroupContainer();
         this._add(noGroupContainer);
       } else {
@@ -269,8 +269,56 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
             let groupContainer = this.__getGroupContainer(tag.id);
             if (groupContainer === null) {
               groupContainer = this.__createGroupContainer(tag.id, tag.name, tag.color);
-              const noGroupContainer = this.__getGroupContainer("no-group");
-              const idx = this._getChildren().findIndex(grpContainer => grpContainer === noGroupContainer);
+              groupContainer.setHedaerIcon("@FontAwesome5Solid/tag/24");
+              const idx = this._getChildren().findIndex(grpContainer => grpContainer === this.__getGroupContainer("no-group"));
+              this._addAt(groupContainer, idx);
+            }
+            const card = this.__createCard(resourceData, tags);
+            groupContainer.add(card);
+            this.self().sortList(groupContainer.getContentContainer());
+            cards.push(card);
+          });
+        }
+      } else if (this.getGroupBy() === "shared") {
+        let orgIds = [];
+        if ("accessRights" in resourceData) {
+          // study or templates
+          orgIds = Object.keys(resourceData["accessRights"]);
+        } else if ("access_rights" in resourceData) {
+          // services
+          orgIds = Object.keys(resourceData["access_rights"]);
+        }
+        if (orgIds.length === 0) {
+          let noGroupContainer = this.__getGroupContainer("no-group");
+          const card = this.__createCard(resourceData, tags);
+          noGroupContainer.add(card);
+          this.self().sortList(noGroupContainer.getContentContainer());
+          cards.push(card);
+        } else {
+          orgIds.forEach(orgId => {
+            let groupContainer = this.__getGroupContainer(orgId);
+            if (groupContainer === null) {
+              groupContainer = this.__createGroupContainer(orgId, "loading-label");
+              osparc.store.Store.getInstance().getOrganization(orgId)
+                .then(org => {
+                  if (org) {
+                    let icon = "";
+                    if (org.thumbnail) {
+                      icon = org.thumbnail;
+                    } else if (org["groupType"] === 0) {
+                      icon = "@FontAwesome5Solid/globe/24";
+                    } else if (org["groupType"] === 1) {
+                      icon = "@FontAwesome5Solid/users/24";
+                    } else if (org["groupType"] === 2) {
+                      icon = "@FontAwesome5Solid/user/24";
+                    }
+                    groupContainer.set({
+                      headerIcon: icon,
+                      headerLabel: org.label
+                    });
+                  }
+                });
+              const idx = this._getChildren().findIndex(grpContainer => grpContainer === this.__getGroupContainer("no-group"));
               this._addAt(groupContainer, idx);
             }
             const card = this.__createCard(resourceData, tags);

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

@@ -156,6 +156,7 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
         flex: 1
       });
       this.__addSortingButtons();
+      this._addGroupByButton();
       this._addViewModeButton();
 
       return this._resourcesContainer;

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

@@ -135,42 +135,11 @@ qx.Class.define("osparc.dashboard.TemplateBrowser", {
       this._secondaryBar.add(new qx.ui.core.Spacer(), {
         flex: 1
       });
-      const groupByButton = this.__createGroupByButton();
-      this._secondaryBar.add(groupByButton);
-
+      this._addGroupByButton();
       this._addViewModeButton();
 
       return this._resourcesContainer;
     },
-
-    __createGroupByButton: function() {
-      const groupByMenu = new qx.ui.menu.Menu().set({
-        font: "text-14"
-      });
-      const groupByButton = new qx.ui.form.MenuButton(this.tr("Group"), "@FontAwesome5Solid/chevron-down/10", groupByMenu);
-      osparc.utils.Utils.setIdToWidget(groupByButton, "groupByButton");
-
-      const dontGroup = new qx.ui.menu.RadioButton(this.tr("None"));
-      osparc.utils.Utils.setIdToWidget(dontGroup, "groupByNone");
-      dontGroup.addListener("execute", () => this._groupByChanged(null));
-      const tagByGroup = new qx.ui.menu.RadioButton(this.tr("Tags"));
-      tagByGroup.addListener("execute", () => this._groupByChanged("tags"));
-
-      const groupOptions = new qx.ui.form.RadioGroup();
-      [
-        dontGroup,
-        tagByGroup
-      ].forEach(btn => {
-        groupByMenu.add(btn);
-        groupOptions.add(btn);
-      });
-
-      if (osparc.utils.Utils.isProduct("s4llite")) {
-        tagByGroup.execute();
-      }
-
-      return groupByButton;
-    },
     // LAYOUT //
 
     // MENU //

services/static-webserver/client/source/class/osparc/store/Store.js

@@ -369,14 +369,12 @@ qx.Class.define("osparc.store.Store", {
     },
 
     __getGroups: function(group) {
-      return new Promise((resolve, reject) => {
+      return new Promise(resolve => {
         osparc.data.Resources.getOne("profile")
           .then(profile => {
             resolve(profile["groups"][group]);
           })
-          .catch(err => {
-            console.error(err);
-          });
+          .catch(err => console.error(err));
       });
     },
 
@@ -388,33 +386,47 @@ qx.Class.define("osparc.store.Store", {
       return this.__getGroups("organizations");
     },
 
-    getGroupsAll: function() {
+    getGroupEveryone: function() {
       return this.__getGroups("all");
     },
 
-    getGroups: function(withMySelf = true) {
-      return new Promise((resolve, reject) => {
+    __getAllGroups: function() {
+      return new Promise(resolve => {
         const promises = [];
+        promises.push(this.getGroupsMe());
         promises.push(this.getGroupsOrganizations());
-        promises.push(this.getGroupsAll());
-        if (withMySelf) {
-          promises.push(this.getGroupsMe());
-        }
+        promises.push(this.getGroupEveryone());
         Promise.all(promises)
           .then(values => {
             const groups = [];
-            values[0].forEach(value => {
-              groups.push(value);
+            const groupMe = values[0];
+            groupMe["groupType"] = 2;
+            groups.push(groupMe);
+            values[1].forEach(org => {
+              org["groupType"] = 1;
+              groups.push(org);
             });
-            groups.push(values[1]);
-            if (withMySelf) {
-              groups.push(values[2]);
-            }
+            const groupEveryone = values[2];
+            groupEveryone["groupType"] = 0;
+            groups.push(groupEveryone);
             resolve(groups);
           });
       });
     },
 
+    getOrganization: function(orgId) {
+      return new Promise(resolve => {
+        this.__getAllGroups()
+          .then(orgs => {
+            const idx = orgs.findIndex(org => org.gid === parseInt(orgId));
+            if (idx > -1) {
+              resolve(orgs[idx]);
+            }
+            resolve(null);
+          });
+      });
+    },
+
     getVisibleMembers: function(reload = false) {
       return new Promise((resolve, reject) => {
         const reachableMembers = this.getReachableMembers();