filter and sort buttons

Author: odeimaiz

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

@@ -65,6 +65,7 @@ qx.Class.define("osparc.dashboard.SortedByMenuButton", {
       field: "last_change_date",
       direction: "desc"
     },
+
     getSortByOptions: function() {
       return [{
         id: "name",

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

@@ -0,0 +1,101 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2022 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.vipStore.SortModelsButtons", {
+  extend: qx.ui.form.MenuButton,
+
+  construct: function() {
+    this.base(arguments, this.tr("Sort"), "@FontAwesome5Solid/chevron-down/10");
+
+    this.set({
+      iconPosition: "left",
+      marginRight: 8
+    });
+
+    const sortByMenu = new qx.ui.menu.Menu().set({
+      font: "text-14"
+    });
+    this.setMenu(sortByMenu);
+
+    const nameAsc = new qx.ui.menu.Button().set({
+      label: this.tr("Name"),
+      icon: "@FontAwesome5Solid/sort-alpha-down/14"
+    });
+    nameAsc["sortBy"] = "name";
+    nameAsc["orderBy"] = "down";
+    const nameDesc = new qx.ui.menu.Button().set({
+      label: this.tr("Name"),
+      icon: "@FontAwesome5Solid/sort-alpha-up/14"
+    });
+    nameDesc["sortBy"] = "name";
+    nameDesc["orderBy"] = "up";
+
+    const dateDesc = new qx.ui.menu.Button().set({
+      label: this.tr("Date"),
+      icon: "@FontAwesome5Solid/arrow-down/14"
+    });
+    dateDesc["sortBy"] = "date";
+    dateDesc["orderBy"] = "down";
+    const dateAsc = new qx.ui.menu.Button().set({
+      label: this.tr("Date"),
+      icon: "@FontAwesome5Solid/arrow-up/14"
+    });
+    dateAsc["sortBy"] = "date";
+    dateAsc["orderBy"] = "down";
+
+    [
+      nameAsc,
+      nameDesc,
+      dateDesc,
+      dateAsc,
+    ].forEach((btn, idx) => {
+      sortByMenu.add(btn);
+
+      btn.addListener("execute", () => this.__buttonExecuted(btn));
+
+      if (idx === 0) {
+        btn.execute();
+      }
+    });
+  },
+
+  events: {
+    "sortBy": "qx.event.type.Data"
+  },
+
+  statics: {
+    DefaultSorting: {
+      "sort": "name",
+      "order": "down"
+    }
+  },
+
+  members: {
+    __buttonExecuted: function(btn) {
+      this.set({
+        label: btn.getLabel(),
+        icon: btn.getIcon()
+      });
+
+      const data = {
+        "sort": btn["sortBy"],
+        "order": btn["orderBy"]
+      };
+      this.fireDataEvent("sortBy", data);
+    }
+  }
+});

services/static-webserver/client/source/class/osparc/vipStore/VIPStore.js

@@ -59,10 +59,25 @@ qx.Class.define("osparc.vipStore.VIPStore", {
 
     __buildLayout: async function() {
       const toolbarLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)).set({
-        maxHeight: 30
+        alignY: "middle",
+        // maxHeight: 30
       });
       this._add(toolbarLayout);
 
+      const sortModelsButtons = new osparc.vipStore.SortModelsButtons().set({
+        alignY: "bottom",
+        maxHeight: 27,
+      });
+      toolbarLayout.add(sortModelsButtons);
+
+      const filter = new osparc.filter.TextFilter("name", "vipModels").set({
+        alignY: "middle",
+        allowGrowY: false,
+        minWidth: 200,
+      });
+      this.addListener("appear", () => filter.getChildControl("textfield").focus());
+      toolbarLayout.add(filter);
+
       const modelsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
       this._add(modelsLayout, {
         flex: 1
@@ -86,6 +101,9 @@ qx.Class.define("osparc.vipStore.VIPStore", {
           ctrl.bindProperty("name", "name", null, item, id);
           ctrl.bindProperty("date", "date", null, item, id);
         },
+        configureItem: item => {
+          item.subscribeToFilterGroup("vipModels");
+        },
       });
 
       const loadingModel = {