🎨 [Frontend] Grouped list view (#7845)

Author: odeimaiz

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

@@ -66,7 +66,19 @@ qx.Class.define("osparc.dashboard.GroupedCardContainer", {
       nullable: false,
       event: "changeExpanded",
       apply: "__applyExpanded"
-    }
+    },
+
+    mode: {
+      check: ["grid", "list"],
+      init: "grid",
+      nullable: false,
+      event: "changeMode"
+    },
+  },
+
+  events: {
+    "changeSelection": "qx.event.type.Data",
+    "changeVisibility": "qx.event.type.Data"
   },
 
   members: {
@@ -113,12 +125,30 @@ qx.Class.define("osparc.dashboard.GroupedCardContainer", {
       return control || this.base(arguments, id);
     },
 
+    __modeChanged: function(container) {
+      osparc.dashboard.ResourceContainerManager.updateSpacing(this.getMode(), container);
+      if (this.getMode() === "list") {
+        this.set({
+          expanded: true,
+        });
+      }
+    },
+
     __createContentContainer: function() {
       let contentContainer = null;
       const expanded = this.isExpanded();
       const showAllBtn = this.__expandButton;
       if (expanded) {
         contentContainer = new osparc.dashboard.CardContainer();
+        this.__modeChanged(contentContainer);
+        this.addListener("changeMode", () => this.__modeChanged(contentContainer));
+        [
+          "changeSelection",
+          "changeVisibility"
+        ].forEach(signalName => {
+          contentContainer.addListener(signalName, e => this.fireDataEvent(signalName, e.getData()), this);
+        });
+
         showAllBtn.show();
       } else {
         const spacing = osparc.dashboard.GridButtonBase.SPACING;
@@ -136,7 +166,8 @@ qx.Class.define("osparc.dashboard.GroupedCardContainer", {
         });
       }
       contentContainer.set({
-        padding: 5,
+        paddingTop: 5,
+        paddingBottom: 5,
         allowGrowX: false
       });
       this._addAt(contentContainer, 1, {

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

@@ -325,9 +325,6 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
     },
 
     _groupByChanged: function(groupBy) {
-      // if cards are grouped they need to be in grid mode
-      this._resourcesContainer.setMode("grid");
-      this.__viewModeLayout.setVisibility(groupBy ? "excluded" : "visible");
       this._resourcesContainer.setGroupBy(groupBy);
       this._reloadCards();
     },

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

@@ -110,7 +110,15 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
         }
       }
       return false;
-    }
+    },
+
+    updateSpacing: function(mode, container) {
+      const spacing = mode === "grid" ? osparc.dashboard.GridButtonBase.SPACING : osparc.dashboard.ListButtonBase.SPACING;
+      container.getLayout().set({
+        spacingX: spacing,
+        spacingY: spacing
+      });
+    },
   },
 
   members: {
@@ -171,18 +179,6 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       return this.__nonGroupedContainer;
     },
 
-    __createGroupContainer: function(groupId, headerLabel, headerColor = "text") {
-      const groupContainer = new osparc.dashboard.GroupedCardContainer().set({
-        groupId: groupId.toString(),
-        headerLabel,
-        headerIcon: "",
-        headerColor,
-        visibility: "excluded"
-      });
-      this.__groupedContainersList.push(groupContainer);
-      return groupContainer;
-    },
-
     areMoreResourcesRequired: function(loadingResourcesBtn) {
       if (this.__nonGroupedContainer) {
         return this.__nonGroupedContainer.areMoreResourcesRequired(loadingResourcesBtn);
@@ -325,15 +321,8 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
 
     __createFlatList: function() {
       const flatList = new osparc.dashboard.CardContainer();
-      const setContainerSpacing = () => {
-        const spacing = this.getMode() === "grid" ? osparc.dashboard.GridButtonBase.SPACING : osparc.dashboard.ListButtonBase.SPACING;
-        flatList.getLayout().set({
-          spacingX: spacing,
-          spacingY: spacing
-        });
-      };
-      setContainerSpacing();
-      this.addListener("changeMode", () => setContainerSpacing());
+      osparc.dashboard.ResourceContainerManager.updateSpacing(this.getMode(), flatList);
+      this.addListener("changeMode", () => osparc.dashboard.ResourceContainerManager.updateSpacing(this.getMode(), flatList));
       [
         "changeSelection",
         "changeVisibility"
@@ -343,6 +332,27 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       return flatList;
     },
 
+    __createGroupContainer: function(groupId, headerLabel, headerColor = "text") {
+      const groupContainer = new osparc.dashboard.GroupedCardContainer().set({
+        groupId: groupId.toString(),
+        headerLabel,
+        headerIcon: "",
+        headerColor,
+        visibility: "excluded"
+      });
+
+      this.bind("mode", groupContainer, "mode");
+      [
+        "changeSelection",
+        "changeVisibility"
+      ].forEach(signalName => {
+        groupContainer.addListener(signalName, e => this.fireDataEvent(signalName, e.getData()), this);
+      });
+
+      this.__groupedContainersList.push(groupContainer);
+      return groupContainer;
+    },
+
     reloadCards: function(resourceType) {
       this.__rebuildLayout(resourceType);