Study Browser cleanup

.eslintrc.json

@@ -27,7 +27,10 @@
     ],
     "indent": [
       "warn",
-      2
+      2,
+      {
+        "SwitchCase": 1
+      }
     ],
     "object-property-newline": "warn",
     "object-curly-newline": [

.gitignore

@@ -149,4 +149,4 @@ prof/
 
 # outputs from make
 .stack-*.yml
-services/catalog/log.txt
+services/web/server/tests/data/static/resource/statics.json

services/web/client/source/class/osparc/auth/core/BaseAuthPage.js

@@ -52,6 +52,9 @@ qx.Class.define("osparc.auth.core.BaseAuthPage", {
       el.insertInto(form);
     });
     this._buildPage();
+
+    this.addListener("appear", this._onAppear, this);
+    this.addListener("disappear", this._onDisappear, this);
   },
 
   /*
@@ -108,6 +111,14 @@ qx.Class.define("osparc.auth.core.BaseAuthPage", {
       this.add(lbl, {
         flex:1
       });
+    },
+
+    _onAppear: function() {
+      return;
+    },
+
+    _onDisappear: function() {
+      return;
     }
   }
 });

services/web/client/source/class/osparc/auth/ui/LoginView.js

@@ -50,6 +50,8 @@ qx.Class.define("osparc.auth.ui.LoginView", {
   members: {
     // overrides base
     __form: null,
+    __loginBtn: null,
+
     _buildPage: function() {
       this.__form = new qx.ui.form.Form();
 
@@ -85,17 +87,11 @@ qx.Class.define("osparc.auth.ui.LoginView", {
       this.add(pass);
       this.__form.add(pass, "", null, "password", null);
 
-      const loginBtn = new osparc.ui.form.FetchButton(this.tr("Sign in"));
+      const loginBtn = this.__loginBtn = new osparc.ui.form.FetchButton(this.tr("Sign in"));
       loginBtn.addListener("execute", () => {
         loginBtn.setFetching(true);
         this.__login(loginBtn);
       }, this);
-      // Listen to "Enter" key
-      this.addListener("keypress", keyEvent => {
-        if (keyEvent.getKeyIdentifier() === "Enter") {
-          this.__login();
-        }
-      }, this);
       osparc.utils.Utils.setIdToWidget(loginBtn, "loginSubmitBtn");
       this.add(loginBtn);
 
@@ -201,6 +197,16 @@ qx.Class.define("osparc.auth.ui.LoginView", {
       for (const key in fieldItems) {
         fieldItems[key].resetValue();
       }
+    },
+
+    _onAppear: function() {
+      // Listen to "Enter" key
+      const command = new qx.ui.command.Command("Enter");
+      this.__loginBtn.setCommand(command);
+    },
+
+    _onDisappear: function() {
+      this.__loginBtn.setCommand(null);
     }
   }
 });

services/web/client/source/class/osparc/auth/ui/RegistrationView.js

@@ -32,6 +32,8 @@ qx.Class.define("osparc.auth.ui.RegistrationView", {
 
   members: {
     __email: null,
+    __submitBtn: null,
+    __cancelBtn: null,
 
     // overrides base
     _buildPage: function() {
@@ -47,6 +49,10 @@ qx.Class.define("osparc.auth.ui.RegistrationView", {
       this.add(email);
       osparc.utils.Utils.setIdToWidget(email, "registrationEmailFld");
       this.__email = email;
+      this.addListener("appear", () => {
+        email.focus();
+        email.activate();
+      });
 
       // const uname = new qx.ui.form.TextField().set({
       //   required: true,
@@ -86,13 +92,13 @@ qx.Class.define("osparc.auth.ui.RegistrationView", {
       // submit & cancel buttons
       const grp = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
 
-      const submitBtn = new qx.ui.form.Button(this.tr("Submit"));
+      const submitBtn = this.__submitBtn = new qx.ui.form.Button(this.tr("Submit"));
       osparc.utils.Utils.setIdToWidget(submitBtn, "registrationSubmitBtn");
       grp.add(submitBtn, {
         flex:1
       });
 
-      const cancelBtn = new qx.ui.form.Button(this.tr("Cancel"));
+      const cancelBtn = this.__cancelBtn = new qx.ui.form.Button(this.tr("Cancel"));
       osparc.utils.Utils.setIdToWidget(cancelBtn, "registrationCancelBtn");
       grp.add(cancelBtn, {
         flex:1
@@ -132,7 +138,21 @@ qx.Class.define("osparc.auth.ui.RegistrationView", {
       };
 
       manager.register(userData, successFun, failFun, this);
-    }
+    },
+
+    _onAppear: function() {
+      // Listen to "Enter" key
+      const commandEnter = new qx.ui.command.Command("Enter");
+      this.__submitBtn.setCommand(commandEnter);
 
+      // Listen to "Esc" key
+      const commandEsc = new qx.ui.command.Command("Esc");
+      this.__cancelBtn.setCommand(commandEsc);
+    },
+
+    _onDisappear: function() {
+      this.__submitBtn.setCommand(null);
+      this.__cancelBtn.setCommand(null);
+    }
   }
 });

services/web/client/source/class/osparc/auth/ui/ResetPassRequestView.js

@@ -29,30 +29,36 @@ qx.Class.define("osparc.auth.ui.ResetPassRequestView", {
   */
 
   members: {
+    __submitBtn: null,
+    __cancelBtn: null,
 
     // overrides base
     _buildPage: function() {
-      let manager = new qx.ui.form.validation.Manager();
+      const manager = new qx.ui.form.validation.Manager();
 
       this._addTitleHeader(this.tr("Reset Password"));
 
       // email
-      let email = new qx.ui.form.TextField();
+      const email = new qx.ui.form.TextField();
       email.setRequired(true);
       email.setPlaceholder(this.tr("Introduce your registration email"));
       this.add(email);
+      this.addListener("appear", () => {
+        email.focus();
+        email.activate();
+      });
 
       manager.add(email, qx.util.Validate.email());
 
       // submit and cancel buttons
-      let grp = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
+      const grp = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
 
-      let submitBtn = new qx.ui.form.Button(this.tr("Submit"));
+      const submitBtn = this.__submitBtn = new qx.ui.form.Button(this.tr("Submit"));
       grp.add(submitBtn, {
         flex:1
       });
 
-      let cancelBtn = new qx.ui.form.Button(this.tr("Cancel"));
+      const cancelBtn = this.__cancelBtn = new qx.ui.form.Button(this.tr("Cancel"));
       grp.add(cancelBtn, {
         flex:1
       });
@@ -73,20 +79,34 @@ qx.Class.define("osparc.auth.ui.ResetPassRequestView", {
     __submit: function(email) {
       console.debug("sends email to reset password to ", email);
 
-      let manager = osparc.auth.Manager.getInstance();
+      const manager = osparc.auth.Manager.getInstance();
 
-      let successFun = function(log) {
+      const successFun = function(log) {
         this.fireDataEvent("done", log.message);
         osparc.component.message.FlashMessenger.getInstance().log(log);
       };
 
-      let failFun = function(msg) {
+      const failFun = function(msg) {
         msg = msg || this.tr("Could not request password reset");
         osparc.component.message.FlashMessenger.getInstance().logAs(msg, "ERROR");
       };
 
       manager.resetPasswordRequest(email.getValue(), successFun, failFun, this);
-    }
+    },
+
+    _onAppear: function() {
+      // Listen to "Enter" key
+      const commandEnter = new qx.ui.command.Command("Enter");
+      this.__submitBtn.setCommand(commandEnter);
 
+      // Listen to "Esc" key
+      const commandEsc = new qx.ui.command.Command("Esc");
+      this.__cancelBtn.setCommand(commandEsc);
+    },
+
+    _onDisappear: function() {
+      this.__submitBtn.setCommand(null);
+      this.__cancelBtn.setCommand(null);
+    }
   }
 });

services/web/client/source/class/osparc/component/form/ToggleButtonContainer.js

@@ -6,7 +6,7 @@
  */
 
 /**
- * Container for StudyBrowserListItems or any other ToggleButtons, with some convenient methods.
+ * Container for StudyBrowserButtonItems or any other ToggleButtons, with some convenient methods.
  */
 qx.Class.define("osparc.component.form.ToggleButtonContainer", {
   extend: qx.ui.container.Composite,
@@ -16,7 +16,8 @@ qx.Class.define("osparc.component.form.ToggleButtonContainer", {
   },
 
   events: {
-    changeSelection: "qx.event.type.Data"
+    changeSelection: "qx.event.type.Data",
+    changeVisibility: "qx.event.type.Data"
   },
 
   members: {
@@ -27,6 +28,9 @@ qx.Class.define("osparc.component.form.ToggleButtonContainer", {
         child.addListener("changeValue", e => {
           this.fireDataEvent("changeSelection", this.getSelection());
         }, this);
+        child.addListener("changeVisibility", e => {
+          this.fireDataEvent("changeVisibility", this.getVisibles());
+        }, this);
       } else {
         console.error("ToggleButtonContainer only allows ToggleButton as its children.");
       }
@@ -46,6 +50,13 @@ qx.Class.define("osparc.component.form.ToggleButtonContainer", {
       return this.getChildren().filter(button => button.getValue());
     },
 
+    /**
+     * Returns an array that contains all visible buttons.
+     */
+    getVisibles: function() {
+      return this.getChildren().filter(button => button.isVisible());
+    },
+
     /**
      * Sets the given button's value to true (checks it) and unchecks all other buttons. If the given button is not present,
      * every button in the container will get a false value (unchecked).

services/web/client/source/class/osparc/component/metadata/StudyDetailsEditor.js

@@ -261,9 +261,9 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
           btn.resetIcon();
           btn.getChildControl("icon").getContentElement()
             .removeClass("rotate");
-          this.fireDataEvent(this.__isTemplate ? "updatedTemplate" : "updatedStudy", data);
           this.__model.set(data);
           this.setMode("display");
+          this.fireDataEvent(this.__isTemplate ? "updatedTemplate" : "updatedStudy", data);
         })
         .catch(err => {
           btn.resetIcon();

services/web/client/source/class/osparc/desktop/Dashboard.js → services/web/client/source/class/osparc/dashboard/Dashboard.js

@@ -26,18 +26,18 @@
  * Here is a little example of how to use the widget.
  *
  * <pre class='javascript'>
- *   let dashboard = new osparc.desktop.Dashboard();
+ *   let dashboard = new osparc.dashboard.Dashboard();
  *   this.getRoot().add(dashboard);
  * </pre>
  */
 
-qx.Class.define("osparc.desktop.Dashboard", {
+qx.Class.define("osparc.dashboard.Dashboard", {
   extend: qx.ui.tabview.TabView,
 
   construct: function() {
     this.base(arguments);
 
-    this.setBarPosition("left");
+    this.setBarPosition("top");
 
     osparc.wrapper.JsonDiffPatch.getInstance().init();
     osparc.wrapper.JsonTreeViewer.getInstance().init();
@@ -71,9 +71,9 @@ qx.Class.define("osparc.desktop.Dashboard", {
 
     __createMainViewLayout: function() {
       [
-        [this.tr("Studies"), this.__createStudiesView],
-        [this.tr("Services"), this.__createServicesLayout],
-        [this.tr("Data"), this.__createDataManagerLayout]
+        [this.tr("Studies"), this.__createStudyBrowser],
+        [this.tr("Services"), this.__createServiceBrowser],
+        [this.tr("Data"), this.__createDataBrowser]
       ].forEach(tuple => {
         const tabPage = new qx.ui.tabview.Page(tuple[0]).set({
           appearance: "dashboard-page"
@@ -97,18 +97,18 @@ qx.Class.define("osparc.desktop.Dashboard", {
       }, this);
     },
 
-    __createStudiesView: function() {
-      const studiesView = this.__prjBrowser = new osparc.desktop.StudyBrowser();
+    __createStudyBrowser: function() {
+      const studiesView = this.__prjBrowser = new osparc.dashboard.StudyBrowser();
       return studiesView;
     },
 
-    __createServicesLayout: function() {
-      const servicesView = this.__serviceBrowser = new osparc.desktop.ServiceBrowser();
+    __createServiceBrowser: function() {
+      const servicesView = this.__serviceBrowser = new osparc.dashboard.ServiceBrowser();
       return servicesView;
     },
 
-    __createDataManagerLayout: function() {
-      const dataManagerView = this.__dataManager = new osparc.desktop.DataBrowser();
+    __createDataBrowser: function() {
+      const dataManagerView = this.__dataManager = new osparc.dashboard.DataBrowser();
       return dataManagerView;
     }
   }

services/web/client/source/class/osparc/desktop/DataBrowser.js → services/web/client/source/class/osparc/dashboard/DataBrowser.js

@@ -25,12 +25,12 @@
  * Here is a little example of how to use the widget.
  *
  * <pre class='javascript'>
- *   let dataManager = new osparc.desktop.DataBrowser();
+ *   let dataManager = new osparc.dashboard.DataBrowser();
  *   this.getRoot().add(dataManager);
  * </pre>
  */
 
-qx.Class.define("osparc.desktop.DataBrowser", {
+qx.Class.define("osparc.dashboard.DataBrowser", {
   extend: qx.ui.core.Widget,
 
   construct: function() {

services/web/client/source/class/osparc/desktop/ServiceBrowser.js → services/web/client/source/class/osparc/dashboard/ServiceBrowser.js

@@ -31,12 +31,12 @@
  * Here is a little example of how to use the widget.
  *
  * <pre class='javascript'>
- *   let servicesView = this.__serviceBrowser = new osparc.desktop.ServiceBrowser();
+ *   let servicesView = this.__serviceBrowser = new osparc.dashboard.ServiceBrowser();
  *   this.getRoot().add(servicesView);
  * </pre>
  */
 
-qx.Class.define("osparc.desktop.ServiceBrowser", {
+qx.Class.define("osparc.dashboard.ServiceBrowser", {
   extend: qx.ui.core.Widget,
 
   construct: function() {
@@ -150,7 +150,7 @@ qx.Class.define("osparc.desktop.ServiceBrowser", {
       const servCtrl = new qx.data.controller.List(latestServicesModel, servicesUIList, "name");
       servCtrl.setDelegate({
         createItem: () => {
-          const item = new osparc.desktop.ServiceBrowserListItem();
+          const item = new osparc.dashboard.ServiceBrowserListItem();
           item.subscribeToFilterGroup("serviceBrowser");
           item.addListener("tap", e => {
             servicesUIList.setSelection([item]);

services/web/client/source/class/osparc/desktop/ServiceBrowserListItem.js → services/web/client/source/class/osparc/dashboard/ServiceBrowserListItem.js

@@ -28,7 +28,7 @@
  *
  * <pre class='javascript'>
  *   tree.setDelegate({
- *     createItem: () => new osparc.desktop.ServiceBrowserListItem(),
+ *     createItem: () => new osparc.dashboard.ServiceBrowserListItem(),
  *     bindItem: (c, item, id) => {
  *       c.bindProperty("key", "model", null, item, id);
  *       c.bindProperty("name", "title", null, item, id);
@@ -41,7 +41,7 @@
  * </pre>
  */
 
-qx.Class.define("osparc.desktop.ServiceBrowserListItem", {
+qx.Class.define("osparc.dashboard.ServiceBrowserListItem", {
   extend: qx.ui.core.Widget,
   implement : [qx.ui.form.IModel, osparc.component.filter.IFilterable],
   include : [qx.ui.form.MModelProperty, osparc.component.filter.MFilterable],