🎨 [Frontend] Enh: Extended Search widget for Projects tab

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

@@ -26,9 +26,10 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
     this._setLayout(new qx.ui.layout.HBox(5));
 
     this.set({
-      backgroundColor: "input_background",
+      backgroundColor: this.self().BG_COLOR,
       paddingLeft: 6,
       height: this.self().HEIGHT,
+      maxHeight: this.self().HEIGHT,
       decorator: "rounded",
     });
 
@@ -41,8 +42,17 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
     this.__currentFilter = null;
   },
 
+  properties: {
+    showFilterMenu: {
+      check: "Boolean",
+      init: true,
+      event: "changeShowFilterMenu",
+    }
+  },
+
   statics: {
     HEIGHT: 36,
+    BG_COLOR: "input_background",
 
     getSharedWithOptions: function(resourceType) {
       if (resourceType === "template") {
@@ -70,7 +80,19 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
         label: qx.locale.Manager.tr("Public") + " " + resourceAlias,
         icon: "@FontAwesome5Solid/globe/20"
       }];
-    }
+    },
+
+    createChip: function(chipType, chipId, chipLabel) {
+      const chipButton = new qx.ui.form.Button().set({
+        label: osparc.utils.Utils.capitalize(chipType) + " = '" + chipLabel + "'",
+        icon: "@MaterialIcons/close/12",
+        toolTipText: chipLabel,
+        appearance: "chip-button"
+      });
+      chipButton.type = chipType;
+      chipButton.id = chipId;
+      return chipButton;
+    },
   },
 
   events: {
@@ -100,7 +122,7 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
           break;
         case "text-field":
           control = new qx.ui.form.TextField().set({
-            backgroundColor: "input_background",
+            backgroundColor: this.self().BG_COLOR,
             font: "text-16",
             placeholder: this.tr("search"),
             alignY: "bottom",
@@ -175,7 +197,7 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
           this.__hideFilterMenu();
         }
       }, this);
-      textField.addListener("changeValue", () => this.__filter(), this);
+      textField.addListener("focusout", () => this.__filter(), this);
 
       const resetButton = this.getChildControl("reset-button");
       resetButton.addListener("execute", () => this.__resetFilters(), this);
@@ -184,7 +206,7 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
     },
 
     getTextFilterValue: function() {
-      return this.getChildControl("text-field").getValue();
+      return this.getChildControl("text-field").getValue() ? this.getChildControl("text-field").getValue().trim() : null;
     },
 
     __showFilterMenu: function() {
@@ -203,7 +225,9 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
         left: left
       });
 
-      this.__filtersMenu.show();
+      if (this.getShowFilterMenu()) {
+        this.__filtersMenu.show();
+      }
     },
 
     __hideFilterMenu: function() {
@@ -304,7 +328,6 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
       });
     },
 
-
     setSharedWithActiveFilter: function(optionId, optionLabel) {
       this.__removeChips("shared-with");
       if (optionId === "show-all") {
@@ -323,30 +346,34 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
       }
     },
 
+    // this widget pops up a larger widget with all filters visible
+    // and lets users search between projects, templates, public projects and, eventually, files
+    popUpSearchBarFilter: function() {
+      const initFilterData = this.getFilterData();
+      const searchBarFilterExtended = new osparc.dashboard.SearchBarFilterExtended(this.__resourceType, initFilterData);
+      const bounds = osparc.utils.Utils.getBounds(this);
+      searchBarFilterExtended.setLayoutProperties({
+        left: bounds.left,
+        top: bounds.top,
+      });
+      searchBarFilterExtended.set({
+        width: bounds.width,
+      });
+      return searchBarFilterExtended;
+    },
+
     __addChip: function(type, id, label) {
       const activeFilter = this.getChildControl("active-filters");
       const chipFound = activeFilter.getChildren().find(chip => chip.type === type && chip.id === id);
       if (chipFound) {
         return;
       }
-      const chip = this.__createChip(type, id, label);
+      const chip = this.self().createChip(type, id, label);
+      chip.addListener("execute", () => this.__removeChip(type, id), this);
       activeFilter.add(chip);
       this.__filter();
     },
 
-    __createChip: function(chipType, chipId, chipLabel) {
-      const chipButton = new qx.ui.form.Button().set({
-        label: osparc.utils.Utils.capitalize(chipType) + " = '" + chipLabel + "'",
-        icon: "@MaterialIcons/close/12",
-        toolTipText: chipLabel,
-        appearance: "chip-button"
-      });
-      chipButton.type = chipType;
-      chipButton.id = chipId;
-      chipButton.addListener("execute", () => this.__removeChip(chipType, chipId), this);
-      return chipButton;
-    },
-
     __removeChip: function(type, id) {
       const activeFilter = this.getChildControl("active-filters");
       const chipFound = activeFilter.getChildren().find(chip => chip.type === type && chip.id === id);