Fix Node Data Manager (#125)

* attachPathLabel

* folder up

* show dirs tree

* aesthetics

Author: odeimaiz

services/static-webserver/client/source/class/osparc/component/node/BaseNodeView.js

@@ -52,7 +52,6 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
 
     openNodeDataManager: function(node) {
       const nodeDataManager = new osparc.component.widget.NodeDataManager(node);
-      nodeDataManager.getChildControl("node-files-tree").exclude();
       const win = osparc.ui.window.Window.popUpInWindow(nodeDataManager, node.getLabel(), 900, 600).set({
         appearance: "service-window"
       });

services/static-webserver/client/source/class/osparc/component/widget/NodeDataManager.js

@@ -109,7 +109,8 @@ qx.Class.define("osparc.component.widget.NodeDataManager", {
         case "user-files-tree":
           control = new osparc.file.FilesTree().set({
             minWidth: 150,
-            width: 200
+            width: 200,
+            backgroundColor: "transparent"
           });
           break;
         case "folder-viewer":
@@ -164,6 +165,14 @@ qx.Class.define("osparc.component.widget.NodeDataManager", {
         const selectionData = e.getData();
         this.__selectionChanged(selectionData);
       }, this);
+      nodeFolder.addListener("folderUp", e => {
+        const currentFolder = e.getData();
+        const parent = nodeFilesTree.getParent(currentFolder);
+        if (parent) {
+          nodeFilesTree.setSelection(new qx.data.Array([parent]));
+          nodeFolder.setFolder(parent);
+        }
+      }, this);
 
       nodeTreeLayout.add(nodeTreeFolderLayout, {
         flex: 1

services/static-webserver/client/source/class/osparc/file/FileLabelWithActions.js

@@ -39,15 +39,16 @@ qx.Class.define("osparc.file.FileLabelWithActions", {
   construct: function() {
     this.base(arguments);
 
-    this._setLayout(new qx.ui.layout.HBox(5));
+    this._setLayout(new qx.ui.layout.HBox(10));
+
+    this.getChildControl("spacer");
+    this.getChildControl("selected-label");
 
     const downloadBtn = this.getChildControl("download-button");
     downloadBtn.addListener("execute", () => this.__retrieveURLAndDownload(), this);
 
     const deleteBtn = this.getChildControl("delete-button");
     deleteBtn.addListener("execute", () => this.__deleteFile(), this);
-
-    this.getChildControl("selected-label");
   },
 
   events: {
@@ -60,6 +61,18 @@ qx.Class.define("osparc.file.FileLabelWithActions", {
     _createChildControlImpl: function(id) {
       let control;
       switch (id) {
+        case "spacer":
+          control = new qx.ui.core.Spacer();
+          this._add(control, {
+            flex: 1
+          });
+          break;
+        case "selected-label":
+          control = new qx.ui.basic.Label().set({
+            alignY: "middle"
+          });
+          this._add(control);
+          break;
         case "download-button":
           control = new qx.ui.form.Button(this.tr("Download"), "@FontAwesome5Solid/cloud-download-alt/16");
           osparc.utils.Utils.setIdToWidget(control, "filesTreeDownloadBtn");
@@ -71,12 +84,6 @@ qx.Class.define("osparc.file.FileLabelWithActions", {
           });
           this._add(control);
           break;
-        case "selected-label":
-          control = new qx.ui.basic.Label();
-          this._add(control, {
-            flex: 1
-          });
-          break;
       }
       return control || this.base(arguments, id);
     },

services/static-webserver/client/source/class/osparc/file/FilesTree.js

@@ -228,8 +228,8 @@ qx.Class.define("osparc.file.FilesTree", {
             this.__resetTree(nodeTreeName);
             const rootNodeModel = this.getModel();
             if (nodeData.children.length) {
-              const filesOnly = nodeData.children;
-              this.__filesToRoot(filesOnly);
+              const nodeItemsOnly = nodeData.children;
+              this.__itemsToNode(nodeItemsOnly);
             }
             this.openNode(rootNodeModel);
 
@@ -402,11 +402,11 @@ qx.Class.define("osparc.file.FilesTree", {
       }
     },
 
-    __filesToRoot: function(files) {
+    __itemsToNode: function(files) {
       const currentModel = this.getModel();
       this.self().removeLoadingChild(currentModel);
 
-      files.forEach(file => file["pathLabel"] = currentModel.getPathLabel().concat(file["label"]));
+      files.forEach(file => this.self().attachPathLabel(currentModel.getPathLabel(), file));
       const newModelToAdd = qx.data.marshal.Json.createModel(files, true);
       currentModel.getChildren().append(newModelToAdd);
       this.setModel(currentModel);

services/static-webserver/client/source/class/osparc/file/FolderViewer.js

@@ -30,9 +30,7 @@ qx.Class.define("osparc.file.FolderViewer", {
     this.setPaddingLeft(10);
 
     const folderUpBtn = this.getChildControl("folder-up");
-    folderUpBtn.addListener("execute", () => {
-      this.fireDataEvent("folderUp", this.getFolder());
-    }, this);
+    folderUpBtn.addListener("execute", () => this.fireDataEvent("folderUp", this.getFolder()), this);
     this.getChildControl("folder-path");
     this.getChildControl("view-options-icons");
     this.getChildControl("view-options-list");