osparc.ui.basic.Tag expects the model

Author: odeimaiz

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

@@ -262,7 +262,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
         tagsContainer.setVisibility(tags.length ? "visible" : "excluded");
         tagsContainer.removeAll();
         tags.forEach(tag => {
-          const tagUI = new osparc.ui.basic.Tag(tag.name, tag.color, "searchBarFilter");
+          const tagUI = new osparc.ui.basic.Tag(tag, "searchBarFilter");
           tagUI.set({
             font: "text-12",
             toolTipText: this.tr("Click to filter by this Tag")

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

@@ -237,7 +237,7 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
         const tagsContainer = this.getChildControl("tags");
         tagsContainer.removeAll();
         tags.forEach(tag => {
-          const tagUI = new osparc.ui.basic.Tag(tag.name, tag.color, "searchBarFilter");
+          const tagUI = new osparc.ui.basic.Tag(tag, "searchBarFilter");
           tagUI.set({
             alignY: "middle",
             font: "text-12",

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

@@ -208,7 +208,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     },
 
     __createCard: function(resourceData) {
-      const tags = resourceData.tags ? osparc.store.Store.getInstance().getTags().filter(tag => resourceData.tags.includes(tag.id)) : [];
+      const tags = resourceData.tags ? osparc.store.Store.getInstance().getTags().filter(tag => resourceData.tags.includes(tag.getTagId())) : [];
       const card = this.getMode() === "grid" ? new osparc.dashboard.GridButtonItem() : new osparc.dashboard.ListButtonItem();
       card.set({
         appearance: resourceData.type ? `pb-${resourceData.type}` : `pb-${resourceData.resourceType}`,
@@ -434,7 +434,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     },
 
     __groupByTags: function(cards, resourceData) {
-      const tags = resourceData.tags ? osparc.store.Store.getInstance().getTags().filter(tag => resourceData.tags.includes(tag.id)) : [];
+      const tags = resourceData.tags ? osparc.store.Store.getInstance().getTags().filter(tag => resourceData.tags.includes(tag.getTagId())) : [];
       if (tags.length === 0) {
         let noGroupContainer = this.__getGroupContainer("no-group");
         const card = this.__createCard(resourceData);
@@ -443,9 +443,9 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
         cards.push(card);
       } else {
         tags.forEach(tag => {
-          let groupContainer = this.__getGroupContainer(tag.id);
+          let groupContainer = this.__getGroupContainer(tag.getTagId());
           if (groupContainer === null) {
-            groupContainer = this.__createGroupContainer(tag.id, tag.name, tag.color);
+            groupContainer = this.__createGroupContainer(tag.getTagId(), tag.getName(), tag.getColor());
             groupContainer.setHeaderIcon("@FontAwesome5Solid/tag/24");
             this.__groupedContainers.add(groupContainer);
             this.__groupedContainers.getChildren().sort((a, b) => a.getHeaderLabel().localeCompare(b.getHeaderLabel()));

services/static-webserver/client/source/class/osparc/info/StudyUtils.js

@@ -216,7 +216,7 @@ qx.Class.define("osparc.info.StudyUtils", {
             if (tagsContainer.indexOf(noTagsLabel) > -1) {
               tagsContainer.remove(noTagsLabel);
             }
-            tagsContainer.add(new osparc.ui.basic.Tag(selectedTag.name, selectedTag.color));
+            tagsContainer.add(new osparc.ui.basic.Tag(selectedTag));
           });
       };
       study.addListener("changeTags", () => addTags(study), this);

services/static-webserver/client/source/class/osparc/ui/basic/Tag.js

@@ -13,17 +13,17 @@ qx.Class.define("osparc.ui.basic.Tag", {
   extend: qx.ui.basic.Label,
   /**
    * Constructor for the Tag element.
-   * @param {String} value Short text to be shown on the tag
-   * @param {String} color Color for the background, must be in hex3 or hex6 form
+   * @param {osparc.data.model.Tag} tag Short text to be shown on the tag
    * @param {String} [filterGroupId] If present, clicking on the tab will dispatch a bus message with the
    *    id ``GroupIdTagsTrigger`` to be subscribed by a filter.
    */
-  construct: function(value, color, filterGroupId) {
-    this.base(arguments, value);
+  construct: function(tag, filterGroupId) {
+    this.base(arguments);
+
+    tag.bind("name", this, "value");
+    tag.bind("color", this, "color");
     this.setFont("text-11");
-    if (color) {
-      this.setColor(color);
-    }
+
     if (filterGroupId) {
       this.setCursor("pointer");
       this.addListener("tap", e => {