🎨 [Frontend] Functions Browser: sorting (#8267)

Author: odeimaiz

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

@@ -177,9 +177,18 @@ qx.Class.define("osparc.dashboard.SearchBarFilterExtended", {
 
       const contextDropDown = this.getChildControl("context-drop-down");
       this.getChildControl("my-projects-button");
-      this.getChildControl("templates-button");
-      this.getChildControl("public-projects-button");
-      this.getChildControl("functions-button");
+      if (osparc.product.Utils.showTemplates()) {
+        this.getChildControl("templates-button");
+      }
+      if (osparc.product.Utils.showPublicProjects()) {
+        this.getChildControl("public-projects-button");
+      }
+      if (osparc.product.Utils.showFunctions()) {
+        this.getChildControl("functions-button");
+      }
+      if (contextDropDown.getChildren().length === 1) {
+        contextDropDown.hide();
+      }
       contextDropDown.addListener("changeSelection", e => {
         const selection = e.getData();
         if (selection.length) {

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

@@ -34,38 +34,21 @@ qx.Class.define("osparc.dashboard.SortedByMenuButton", {
     this.setMenu(sortedByMenu);
 
     const options = this.self().getSortByOptions();
-
     options.forEach((option, idx) => {
-      const btn = new qx.ui.menu.Button();
-      btn.btnId = option.id;
-      btn.set({
-        label: option.label,
-        icon: null
-      });
+      const btn = new qx.ui.menu.Button(option.label);
+      btn.field = option.id;
       // Sort by last modified date
       if (idx === options.length -1) {
-        this.__menuButton = btn;
+        this.__selectedMenuButton = btn;
         btn.setIcon("@FontAwesome5Solid/arrow-down/14");
       }
       sortedByMenu.add(btn);
 
-      btn.addListener("execute", () => {
-        this.__buttonExecuted(btn)
-      });
+      btn.addListener("execute", () => this.__buttonExecuted(btn));
     });
-
-    this.addListener("changeSort", e => {
-      const sort = e.getData();
-      this.__handelSortEvent(sort)
-    }, this);
   },
 
   statics: {
-    DefaultSorting: {
-      field: "last_change_date",
-      direction: "desc"
-    },
-
     getSortByOptions: function() {
       return [{
         id: "name",
@@ -96,45 +79,40 @@ qx.Class.define("osparc.dashboard.SortedByMenuButton", {
       },
       nullable: false,
       event: "changeSort",
-      apply: "__applySort"
+      apply: "__handelSortEvent",
     }
   },
 
   members: {
-    __menuButton: null,
+    __selectedMenuButton: null,
+
     __buttonExecuted: function(btn) {
-      if (this.__menuButton) {
-        this.__menuButton.setIcon(null);
+      if (this.__selectedMenuButton) {
+        this.__selectedMenuButton.setIcon(null);
       }
-      this.__menuButton = btn;
+      this.__selectedMenuButton = btn;
       this.set({
         label: btn.getLabel(),
         icon: "@FontAwesome5Solid/chevron-down/10"
       });
 
-      const data = {
-        "id": btn.btnId,
-      };
-      this.__handelSort(data.id);
-    },
-
-    __handelSort: function(field) {
+      const field = btn.field;
       if (field === this.getSort().field) {
         const { direction } = this.getSort();
         this.setSort({
           field,
           direction: !direction
-        })
-        return;
+        });
+      } else {
+        this.setSort({
+          field,
+          direction: true
+        });
       }
-      this.setSort({
-        field,
-        direction: true
-      })
     },
 
     __handelSortEvent: function({field, direction}) {
-      this.__menuButton.setIcon(direction ? "@FontAwesome5Solid/arrow-down/14" : "@FontAwesome5Solid/arrow-up/14")
+      this.__selectedMenuButton.setIcon(direction ? "@FontAwesome5Solid/arrow-down/14" : "@FontAwesome5Solid/arrow-up/14")
       this.setIcon(direction ? "@FontAwesome5Solid/arrow-down/14" : "@FontAwesome5Solid/arrow-up/14")
       const sort = {
         field: field,
@@ -143,8 +121,15 @@ qx.Class.define("osparc.dashboard.SortedByMenuButton", {
       this.fireDataEvent("sortByChanged", sort);
     },
 
-    __applySort: function(value, old) {
+    hideOptionButton: function(field) {
+      const btn = this.getMenu().getChildren().find(btn => btn.field === field);
+      if (btn) {
+        btn.exclude();
+      }
+    },
 
-    }
+    showAllOptions: function() {
+      this.getMenu().getChildren().forEach(btn => btn.show());
+    },
   }
 });

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

@@ -806,6 +806,12 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
           currentParams[key] = value;
         }
       });
+      if ([
+        osparc.dashboard.StudyBrowser.CONTEXT.FUNCTIONS,
+        osparc.dashboard.StudyBrowser.CONTEXT.SEARCH_FUNCTIONS,
+      ].includes(this.getCurrentContext())) {
+        currentParams.orderBy = osparc.store.Functions.curateOrderBy(currentParams.orderBy);
+      }
 
       // check the entries in currentParams are the same as the reqParams
       let sameContext = true;
@@ -890,7 +896,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
           break;
         case osparc.dashboard.StudyBrowser.CONTEXT.FUNCTIONS:
         case osparc.dashboard.StudyBrowser.CONTEXT.SEARCH_FUNCTIONS:
-          delete requestParams.orderBy; // functions do not support ordering yet
           requestParams.includeExtras = "true";
           break;
         case osparc.dashboard.StudyBrowser.CONTEXT.SEARCH_PROJECTS: {
@@ -972,7 +977,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
 
     invalidateFunctions: function() {
-      osparc.store.Functions.invalidateFunctions();
       this.__resetStudiesList();
       if (this._resourcesContainer.getFlatList()) {
         this._resourcesContainer.getFlatList().nextRequest = null;
@@ -1360,8 +1364,8 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       this._searchBarFilter.setEnabled(true);
       // workspaces will exclude it
       this._toolbar.show();
-      // functions will exclude it
-      this.__sortByButton.show();
+      // functions will hide some option
+      this.__sortByButton.showAllOptions();
 
       switch (this.getCurrentContext()) {
         case osparc.dashboard.StudyBrowser.CONTEXT.PROJECTS:
@@ -1413,8 +1417,9 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
             this._searchBarFilter.resetFilters();
           }
           this._searchBarFilter.getChildControl("text-field").setPlaceholder("Search in Functions");
-          // functions can't be sorted yet
-          this.__sortByButton.exclude();
+          // functions don't support all options yet
+          this.__sortByButton.hideOptionButton("name");
+          this.__sortByButton.hideOptionButton("prj_owner");
           this._loadingResourcesBtn.setFetching(false);
           this.invalidateFunctions();
           this.__reloadStudies();

services/static-webserver/client/source/class/osparc/data/Resources.js

@@ -634,11 +634,11 @@ qx.Class.define("osparc.data.Resources", {
           },
           getPage: {
             method: "GET",
-            url: statics.API + "/functions?include_extras=true&offset={offset}&limit={limit}"
+            url: statics.API + "/functions?include_extras=true&offset={offset}&limit={limit}&order_by={orderBy}"
           },
           getPageSearch: {
             method: "GET",
-            url: statics.API + "/functions?include_extras=true&offset={offset}&limit={limit}&search={text}"
+            url: statics.API + "/functions?include_extras=true&offset={offset}&limit={limit}&search={text}&order_by={orderBy}"
           },
           create: {
             method: "POST",

services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js

@@ -378,11 +378,11 @@ qx.Class.define("osparc.navigation.NavigationBar", {
       // quick starts and manuals
       osparc.store.Support.addQuickStartToMenu(menu);
       osparc.store.Support.addGuidedToursToMenu(menu);
-      osparc.store.Support.addManualButtonsToMenu(menu, menuButton);
+      osparc.store.Support.addManualsToMenu(menu);
       menu.addSeparator();
 
       // feedback
-      osparc.store.Support.addSupportButtonsToMenu(menu, menuButton);
+      osparc.store.Support.addSupportButtonsToMenu(menu);
       osparc.store.Support.addReleaseNotesToMenu(menu);
 
       return menuButton;

services/static-webserver/client/source/class/osparc/navigation/UserMenu.js

@@ -215,7 +215,7 @@ qx.Class.define("osparc.navigation.UserMenu", {
       // quick starts and manuals
       osparc.store.Support.addQuickStartToMenu(this);
       osparc.store.Support.addGuidedToursToMenu(this);
-      osparc.store.Support.addManualButtonsToMenu(this);
+      osparc.store.Support.addManualsToMenu(this);
       this.addSeparator();
 
       // feedbacks

services/static-webserver/client/source/class/osparc/store/Functions.js

@@ -19,9 +19,6 @@ qx.Class.define("osparc.store.Functions", {
   type: "static",
 
   statics: {
-    __functions: null,
-    __functionsPromiseCached: null,
-
     __createFunctionData: function(templateData, name, description, defaultInputs = {}, exposedInputs = {}, exposedOutputs = {}) {
       const functionData = {
         "projectId": templateData["uuid"],
@@ -101,7 +98,10 @@ qx.Class.define("osparc.store.Functions", {
           curatedOrderBy.field = "created_at";
           break;
         case "name":
-          // stays the same
+          // Backend does not currently support sorting by 'name'.
+          // Fallback: sort by 'modified_at' instead.
+          // TODO: Remove this workaround once backend supports sorting by 'name'.
+          curatedOrderBy.field = "modified_at";
           break;
         default:
           // only those three are supported
@@ -223,12 +223,5 @@ qx.Class.define("osparc.store.Functions", {
           throw err;
         });
     },
-
-    invalidateFunctions: function() {
-      this.__functions = null;
-      if (this.__functionsPromiseCached) {
-        this.__functionsPromiseCached = null;
-      }
-    },
   }
 });

services/static-webserver/client/source/class/osparc/store/Support.js

@@ -75,27 +75,35 @@ qx.Class.define("osparc.store.Support", {
       }
     },
 
-    addManualButtonsToMenu: function(menu, menuButton) {
+    addManualsToMenu: function(menu) {
       const manuals = osparc.store.Support.getManuals();
-      if (menuButton) {
-        menuButton.setVisibility(manuals && manuals.length ? "visible" : "excluded");
-      }
-      manuals.forEach(manual => {
-        const manualBtn = new qx.ui.menu.Button(manual.label, "@FontAwesome5Solid/book/14");
-        manualBtn.getChildControl("label").set({
-          rich: true
+      const addManuals = mn => {
+        manuals.forEach(manual => {
+          const manualBtn = new qx.ui.menu.Button(manual.label, "@FontAwesome5Solid/book/14");
+          manualBtn.getChildControl("label").set({
+            rich: true
+          });
+          manualBtn.addListener("execute", () => window.open(manual.url), this);
+          mn.add(manualBtn);
         });
-        manualBtn.addListener("execute", () => window.open(manual.url), this);
-        menu.add(manualBtn);
-      });
+      };
+      if (manuals.length > 1) {
+        // if there are more than 1 manuals, add them in their own menu
+        const ownMenu = new qx.ui.menu.Menu().set({
+          appearance: "menu-wider",
+        });
+        const manualsBtn = new qx.ui.menu.Button(qx.locale.Manager.tr("Manuals"), "@FontAwesome5Solid/book/14");
+        manualsBtn.setMenu(ownMenu);
+        menu.add(manualsBtn);
+        addManuals(ownMenu);
+      } else {
+        addManuals(menu);
+      }
     },
 
-    addSupportButtonsToMenu: function(menu, menuButton) {
+    addSupportButtonsToMenu: function(menu) {
       const issues = osparc.store.VendorInfo.getIssues();
       const supports = osparc.store.VendorInfo.getSupports();
-      if (menuButton) {
-        menuButton.setVisibility(issues.length || supports.length ? "visible" : "excluded");
-      }
       issues.forEach(issueInfo => {
         const label = issueInfo["label"];
         const issueButton = new qx.ui.menu.Button(label, "@FontAwesome5Solid/comments/14");

services/static-webserver/client/source/class/osparc/vipMarket/SortModelsButtons.js

@@ -77,13 +77,6 @@ qx.Class.define("osparc.vipMarket.SortModelsButtons", {
     "sortBy": "qx.event.type.Data"
   },
 
-  statics: {
-    DefaultSorting: {
-      "sort": "name",
-      "order": "down"
-    }
-  },
-
   members: {
     __buttonExecuted: function(btn) {
       this.set({