bugfix: Catalog filter (#2539)

Author: odeimaiz

services/web/client/source/class/osparc/component/service/ServiceButtonSmall.js

@@ -83,6 +83,25 @@ qx.Class.define("osparc.component.service.ServiceButtonSmall", {
           allowGrowY: true
         });
       }
+    },
+
+    _filterText: function(text) {
+      const checks = [
+        this.getServiceModel().getName(),
+        this.getServiceModel().getDescription(),
+        this.getServiceModel().getContact()
+      ];
+      return osparc.dashboard.CardBase.filterText(checks, text);
+    },
+
+    _filterTags: function(tags) {
+      const checks = this.getServiceModel().getTags().map(tag => tag.name);
+      return osparc.dashboard.CardBase.filterText(checks, tags);
+    },
+
+    _filterClassifiers: function(classifiers) {
+      const checks = this.getServiceModel().getClassifiers();
+      return osparc.dashboard.CardBase.filterText(checks, classifiers);
     }
   }
 });

services/web/client/source/class/osparc/dashboard/CardBase.js

@@ -46,7 +46,34 @@ qx.Class.define("osparc.dashboard.CardBase", {
     SERVICE_ICON: "@FontAwesome5Solid/paw/",
     COMP_SERVICE_ICON: "@FontAwesome5Solid/cogs/",
     DYNAMIC_SERVICE_ICON: "@FontAwesome5Solid/mouse-pointer/",
-    PERM_READ: "@FontAwesome5Solid/eye/14"
+    PERM_READ: "@FontAwesome5Solid/eye/14",
+
+    filterText: function(checks, text) {
+      if (text && checks.filter(label => label && label.toLowerCase().trim().includes(text)).length == 0) {
+        return true;
+      }
+      return false;
+    },
+
+    filterTags: function(checks, tags) {
+      if (tags && tags.length) {
+        const tagNames = checks.map(tag => tag.name);
+        if (tags.filter(tag => tagNames.includes(tag)).length == 0) {
+          return true;
+        }
+      }
+      return false;
+    },
+
+    filterClassifiers: function(checks, classifiers) {
+      if (classifiers && classifiers.length) {
+        const classes = osparc.utils.Classifiers.getLeafClassifiers(classifiers);
+        if (classes.filter(clas => checks.includes(clas.data.classifier)).length == 0) {
+          return true;
+        }
+      }
+      return false;
+    }
   },
 
   properties: {
@@ -300,49 +327,33 @@ qx.Class.define("osparc.dashboard.CardBase", {
       this.show();
     },
 
-    __filterText: function(text) {
-      if (text) {
-        const checks = [
-          this.getTitle(),
-          this.getDescription(),
-          this.getOwner()
-        ];
-        if (checks.filter(label => label.toLowerCase().trim().includes(text)).length == 0) {
-          return true;
-        }
-      }
-      return false;
+    _filterText: function(text) {
+      const checks = [
+        this.getTitle(),
+        this.getDescription(),
+        this.getOwner()
+      ];
+      return this.self().filterText(checks, text);
     },
 
-    __filterTags: function(tags) {
-      if (tags && tags.length) {
-        const tagNames = this.getTags().map(tag => tag.name);
-        if (tags.filter(tag => tagNames.includes(tag)).length == 0) {
-          return true;
-        }
-      }
-      return false;
+    _filterTags: function(tags) {
+      const checks = this.getTags().map(tag => tag.name);
+      return this.self().filterText(checks, tags);
     },
 
-    __filterClassifiers: function(classifiers) {
-      if (classifiers && classifiers.length) {
-        const classes = osparc.utils.Classifiers.getLeafClassifiers(classifiers);
-        const myClassifiers = this.getClassifiers();
-        if (classes.filter(clas => myClassifiers.includes(clas.data.classifier)).length == 0) {
-          return true;
-        }
-      }
-      return false;
+    _filterClassifiers: function(classifiers) {
+      const checks = this.getClassifiers();
+      return this.self().filterText(checks, classifiers);
     },
 
     _shouldApplyFilter: function(data) {
-      if (this.__filterText(data.text)) {
+      if (this._filterText(data.text)) {
         return true;
       }
-      if (this.__filterTags(data.tags)) {
+      if (this._filterTags(data.tags)) {
         return true;
       }
-      if (this.__filterClassifiers(data.classifiers)) {
+      if (this._filterClassifiers(data.classifiers)) {
         return true;
       }
       return false;

services/web/client/source/class/osparc/ui/tree/CheckboxTreeItem.js

@@ -28,11 +28,16 @@ qx.Class.define("osparc.ui.tree.CheckboxTreeItem", {
       this.addSpacer();
       this.addOpenButton();
       this._add(this.getChildControl("checkbox"));
-      this.addLabel();
+      const label = this.getChildControl("label");
+      this._add(label, {
+        flex: 1
+      });
       this._add(new qx.ui.core.Spacer(), {
         flex: 1
       });
       this.addHint();
+
+      this.setMaxWidth(240);
     },
 
     _createChildControlImpl: function(id) {

services/web/client/source/class/osparc/ui/tree/MHintInTree.js

@@ -51,27 +51,28 @@ qx.Mixin.define("osparc.ui.tree.MHintInTree", {
     },
 
     __populateInfoButton: function() {
-      const desc = this.getDescription();
-      const desc2 = this.getDescription2();
+      const texts = [];
+      [
+        this.getLabel(),
+        this.getDescription(),
+        this.getDescription2()
+      ].forEach(text => {
+        if (text && text !== "") {
+          texts.push(text);
+        }
+      });
       const url = this.getUrl();
-      const hints = [];
-      if (desc && desc !== "") {
-        hints.push(desc);
-      }
-      if (desc2 && desc2 !== "") {
-        hints.push(desc2);
-      }
       if (url && url !== "") {
         const link = "<a href=" + url + " target='_blank'>More...</a>";
         const linkWithRightColor = link.replace(/^<a /, "<a style=\"color:"+ qx.theme.manager.Color.getInstance().getTheme().colors["link"] + "\"");
-        hints.push(linkWithRightColor);
+        texts.push(linkWithRightColor);
 
         const themeManager = qx.theme.manager.Meta.getInstance();
         themeManager.addListener("changeTheme", () => {
           this.__populateInfoButton();
         }, this);
       }
-      const hint = hints.join("<br>");
+      const hint = texts.join("<br>");
       this.__infoButton.setHintText(hint);
     }
   }