✨ Frontend: Tapping on tag activates filtering (#3917)

ITISFoundation · Feb 24, 2023 · 01a4445 · 01a4445
1 parent 9d02582
commit 01a4445
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 4 deletions.
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/CardBase.js b/services/static-webserver/client/source/class/osparc/dashboard/CardBase.js
@@ -39,7 +39,8 @@ qx.Class.define("osparc.dashboard.CardBase", {
     "updateStudy": "qx.event.type.Data",
     "updateTemplate": "qx.event.type.Data",
     "updateService": "qx.event.type.Data",
-    "publishTemplate": "qx.event.type.Data"
+    "publishTemplate": "qx.event.type.Data",
+    "tagClicked": "qx.event.type.Data"
   },
 
   statics: {

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js b/services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js
@@ -208,6 +208,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
         tagsContainer.removeAll();
         tags.forEach(tag => {
           const tagUI = new osparc.ui.basic.Tag(tag.name, tag.color, "searchBarFilter");
+          tagUI.addListener("tap", () => this.fireDataEvent("tagClicked", tag));
           tagUI.setFont("text-12");
           tagsContainer.add(tagUI);
         });

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ListButtonItem.js b/services/static-webserver/client/source/class/osparc/dashboard/ListButtonItem.js
@@ -209,6 +209,7 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
             alignY: "middle",
             font: "text-12"
           });
+          tagUI.addListener("tap", () => this.fireDataEvent("tagClicked", tag));
           tagsContainer.add(tagUI);
         });
       }

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
@@ -79,6 +79,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
     _resourcesList: null,
     _topBar: null,
     _secondaryBar: null,
+    __searchBarFilter: null,
     __viewMenuButton: null,
     _resourcesContainer: null,
     _loadingResourcesBtn: null,
@@ -133,6 +134,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       resourcesContainer.addListener("updateTemplate", e => this._updateTemplateData(e.getData()));
       resourcesContainer.addListener("updateService", e => this._updateServiceData(e.getData()));
       resourcesContainer.addListener("publishTemplate", e => this.fireDataEvent("publishTemplate", e.getData()));
+      resourcesContainer.addListener("tagClicked", e => this.__searchBarFilter.addTagActiveFilter(e.getData()));
 
       this._add(resourcesContainer);
     },
@@ -143,7 +145,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
         alignY: "middle"
       });
 
-      const searchBarFilter = new osparc.dashboard.SearchBarFilter(resourceType);
+      const searchBarFilter = this.__searchBarFilter = new osparc.dashboard.SearchBarFilter(resourceType);
       const textField = searchBarFilter.getChildControl("text-field");
       osparc.utils.Utils.setIdToWidget(textField, resourceType ? "searchBarFilter-textField-"+resourceType : "searchBarFilter-textField");
       topBar.add(searchBarFilter, {

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
@@ -58,6 +58,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     "updateTemplate": "qx.event.type.Data",
     "updateService": "qx.event.type.Data",
     "publishTemplate": "qx.event.type.Data",
+    "tagClicked": "qx.event.type.Data",
     "changeSelection": "qx.event.type.Data",
     "changeVisibility": "qx.event.type.Data"
   },
@@ -204,7 +205,8 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
         "updateStudy",
         "updateTemplate",
         "updateService",
-        "publishTemplate"
+        "publishTemplate",
+        "tagClicked"
       ].forEach(ev => card.addListener(ev, e => this.fireDataEvent(ev, e.getData())));
 
       return card;

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/SearchBarFilter.js b/services/static-webserver/client/source/class/osparc/dashboard/SearchBarFilter.js
@@ -160,7 +160,7 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
           const tagButton = new qx.ui.menu.Button(tag.name, "@FontAwesome5Solid/tag/12");
           tagButton.getChildControl("icon").setTextColor(tag.color);
           tagsMenu.add(tagButton);
-          tagButton.addListener("execute", () => this.__addChip("tag", tag.name, tag.name), this);
+          tagButton.addListener("execute", () => this.addTagActiveFilter(tag), this);
         });
         menuButton.setMenu(tagsMenu);
       }
@@ -202,6 +202,10 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
       return chipButton;
     },
 
+    addTagActiveFilter: function(tag) {
+      this.__addChip("tag", tag.name, tag.name);
+    },
+
     __addChip: function(type, id, label) {
       const activeFilter = this.getChildControl("active-filters");
       const chipFound = activeFilter.getChildren().find(chip => chip.type === type && chip.id === id);