🐛 [Frontend] Fix: List grouped tagged templates (#6223)

on behalf of @odeimaiz

Author: odeimaiz

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

@@ -47,7 +47,9 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     });
     this._add(nonGroupedContainer);
 
-    this.__groupedContainers = [];
+    const groupedContainersLayout = this.__groupedContainersLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
+    this._add(groupedContainersLayout);
+    this.__groupedContainersList = [];
   },
 
   properties: {
@@ -107,7 +109,8 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     __folderHeader: null,
     __foldersContainer: null,
     __nonGroupedContainer: null,
-    __groupedContainers: null,
+    __groupedContainersList: null,
+    __groupedContainersLayout: null,
 
     addNonResourceCard: function(card) {
       if (card instanceof qx.ui.form.ToggleButton) {
@@ -142,7 +145,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
 
     removeCard: function(uuid) {
       if (this.getGroupBy()) {
-        this.__groupedContainers.forEach(groupedContainer => groupedContainer.removeCard(uuid));
+        this.__groupedContainersList.forEach(groupedContainer => groupedContainer.removeCard(uuid));
       } else {
         this.__nonGroupedContainer.removeCard(uuid);
       }
@@ -164,7 +167,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
         headerColor,
         visibility: "excluded"
       });
-      this.__groupedContainers.push(groupContainer);
+      this.__groupedContainersList.push(groupContainer);
       return groupContainer;
     },
 
@@ -181,7 +184,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
         return this.__nonGroupedContainer.getChildren();
       }
       const cards = [];
-      this.__groupedContainers.forEach(groupedContainer => cards.push(...groupedContainer.getCards()));
+      this.__groupedContainersList.forEach(groupedContainer => cards.push(...groupedContainer.getCards()));
       return cards;
     },
 
@@ -199,9 +202,9 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     },
 
     __getGroupContainer: function(gid) {
-      const idx = this.__groupedContainers.findIndex(groupContainer => groupContainer.getGroupId() === gid.toString());
+      const idx = this.__groupedContainersList.findIndex(groupContainer => groupContainer.getGroupId() === gid.toString());
       if (idx > -1) {
-        return this.__groupedContainers[idx];
+        return this.__groupedContainersList[idx];
       }
       return null;
     },
@@ -255,8 +258,11 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
         this.__nonGroupedContainer.removeAll();
         this.__nonGroupedContainer = null;
       }
-      this.__groupedContainers.forEach(groupedContainer => groupedContainer.getContentContainer().removeAll());
-      this.__groupedContainers = [];
+      if (this.__groupedContainersLayout) {
+        this.__groupedContainersLayout.removeAll();
+      }
+      this.__groupedContainersList.forEach(groupedContainer => groupedContainer.getContentContainer().removeAll());
+      this.__groupedContainersList = [];
       this._removeAll();
     },
 
@@ -265,7 +271,8 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       this._add(this.__foldersLayout);
       if (this.getGroupBy()) {
         const noGroupContainer = this.__createGroupContainer("no-group", "No Group", "transparent");
-        this._add(noGroupContainer);
+        this.__groupedContainersLayout.add(noGroupContainer);
+        this._add(this.__groupedContainersLayout);
       } else {
         const flatList = this.__nonGroupedContainer = new osparc.dashboard.ToggleButtonContainer();
         osparc.utils.Utils.setIdToWidget(flatList, listId);
@@ -320,9 +327,9 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     },
 
     __moveNoGroupToLast: function() {
-      const idx = this._getChildren().findIndex(grpContainer => grpContainer === this.__getGroupContainer("no-group"));
+      const idx = this.__groupedContainersLayout.getChildren().findIndex(grpContainer => grpContainer === this.__getGroupContainer("no-group"));
       if (idx > -1) {
-        this._getChildren().push(this._getChildren().splice(idx, 1)[0]);
+        this.__groupedContainersLayout.getChildren().push(this.__groupedContainersLayout.getChildren().splice(idx, 1)[0]);
       }
     },
 
@@ -340,8 +347,8 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
           if (groupContainer === null) {
             groupContainer = this.__createGroupContainer(tag.id, tag.name, tag.color);
             groupContainer.setHeaderIcon("@FontAwesome5Solid/tag/24");
-            this._add(groupContainer);
-            this._getChildren().sort((a, b) => a.getHeaderLabel().localeCompare(b.getHeaderLabel()));
+            this.__groupedContainersLayout.add(groupContainer);
+            this.__groupedContainersLayout.getChildren().sort((a, b) => a.getHeaderLabel().localeCompare(b.getHeaderLabel()));
             this.__moveNoGroupToLast();
           }
           const card = this.__createCard(resourceData);

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

@@ -632,7 +632,11 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
         tagManager.addListener("updateTags", e => {
           const updatedData = e.getData();
           tagManager.setStudyData(updatedData);
-          this.fireDataEvent("updateStudy", updatedData);
+          if (osparc.utils.Resources.isStudy(resourceData)) {
+            this.fireDataEvent("updateStudy", updatedData);
+          } else if (osparc.utils.Resources.isTemplate(resourceData)) {
+            this.fireDataEvent("updateTemplate", updatedData);
+          }
         }, this);
         page.addToContent(tagManager);
       }