🎨 [Frontend] Multiselect data

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

@@ -75,7 +75,7 @@ qx.Class.define("osparc.dashboard.DataBrowser", {
       const reloadButton = treeFolderView.getChildControl("reload-button");
       reloadButton.addListener("execute", () => this.__reloadTree(), this);
 
-      const selectedFileLayout = treeFolderView.getChildControl("selected-file-layout");
+      const selectedFileLayout = treeFolderView.getChildControl("folder-viewer").getChildControl("selected-file-layout");
       selectedFileLayout.addListener("fileDeleted", e => this.__fileDeleted(e.getData()), this);
     },
 

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

@@ -45,18 +45,29 @@ qx.Class.define("osparc.file.FileLabelWithActions", {
     this.getChildControl("selected-label");
 
     const downloadBtn = this.getChildControl("download-button");
-    downloadBtn.addListener("execute", () => this.__retrieveURLAndDownload(), this);
+    downloadBtn.addListener("execute", () => this.__retrieveURLAndDownloadSelected(), this);
 
     const deleteBtn = this.getChildControl("delete-button");
-    deleteBtn.addListener("execute", () => this.__deleteFile(), this);
+    deleteBtn.addListener("execute", () => this.__deleteSelected(), this);
   },
 
   events: {
     "fileDeleted": "qx.event.type.Data"
   },
 
+  properties: {
+    multiSelect: {
+      check: "Boolean",
+      init: false,
+      nullable: false,
+      event: "changeMultiSelect",
+      apply: "__enableMultiSelection",
+    },
+  },
+
   members: {
     __selection: null,
+    __multiSelection: null,
 
     _createChildControlImpl: function(id) {
       let control;
@@ -88,26 +99,59 @@ qx.Class.define("osparc.file.FileLabelWithActions", {
       return control || this.base(arguments, id);
     },
 
+    __enableMultiSelection: function() {
+      this.resetItemSelected();
+      this.__multiSelection = [];
+    },
+
     setItemSelected: function(selectedItem) {
-      const isFile = osparc.file.FilesTree.isFile(selectedItem);
-      this.getChildControl("download-button").setEnabled(isFile);
-      this.getChildControl("delete-button").setEnabled(isFile);
-      const selectedLabel = this.getChildControl("selected-label");
-      if (isFile) {
-        this.__selection = selectedItem;
-        selectedLabel.set({
-          value: selectedItem.getLabel(),
-          toolTipText: selectedItem.getFileId()
-        });
+      if (selectedItem) {
+        const isFile = osparc.file.FilesTree.isFile(selectedItem);
+        this.getChildControl("download-button").setEnabled(isFile);
+        this.getChildControl("delete-button").setEnabled(isFile);
+        const selectedLabel = this.getChildControl("selected-label");
+        if (isFile) {
+          this.__selection = selectedItem;
+          selectedLabel.set({
+            value: selectedItem.getLabel(),
+            toolTipText: selectedItem.getFileId()
+          });
+        } else {
+          this.__selection = null;
+          selectedLabel.set({
+            value: "",
+            toolTipText: ""
+          });
+        }
       } else {
-        this.__selection = null;
-        selectedLabel.set({
-          value: "",
-          toolTipText: ""
-        });
+        this.resetItemSelected();
+      }
+    },
+
+    setMultiItemSelected: function(multiSelectionData) {
+      this.__multiSelection = multiSelectionData;
+      if (multiSelectionData && multiSelectionData.length) {
+        if (multiSelectionData.length === 1) {
+          this.setItemSelected(multiSelectionData[0]);
+        } else {
+          const selectedLabel = this.getChildControl("selected-label");
+          selectedLabel.set({
+            value: multiSelectionData.length + " files"
+          });
+        }
+      } else {
+        this.resetItemSelected();
       }
     },
 
+    resetItemSelected: function() {
+      this.__selection = null;
+      this.__multiSelection = [];
+      this.getChildControl("download-button").setEnabled(false);
+      this.getChildControl("delete-button").setEnabled(false);
+      this.getChildControl("selected-label").resetValue();
+    },
+
     getItemSelected: function() {
       const selectedItem = this.__selection;
       if (selectedItem && osparc.file.FilesTree.isFile(selectedItem)) {
@@ -116,40 +160,58 @@ qx.Class.define("osparc.file.FileLabelWithActions", {
       return null;
     },
 
-    // Request to the server and download
-    __retrieveURLAndDownload: function() {
-      let selection = this.getItemSelected();
-      if (selection) {
-        const fileId = selection.getFileId();
-        const locationId = selection.getLocation();
-        osparc.utils.Utils.retrieveURLAndDownload(locationId, fileId)
-          .then(data => {
-            if (data) {
-              osparc.DownloadLinkTracker.getInstance().downloadLinkUnattended(data.link, data.fileName);
-            }
-          });
+    __retrieveURLAndDownloadSelected: function() {
+      if (this.isMultiSelect()) {
+        this.__multiSelection.forEach(selection => {
+          this.__retrieveURLAndDownloadFile(selection);
+        });
+      } else {
+        const selection = this.getItemSelected();
+        if (selection) {
+          this.__retrieveURLAndDownloadFile(selection);
+        }
       }
     },
 
-    __deleteFile: function() {
-      let selection = this.getItemSelected();
-      if (selection) {
-        console.log("Delete ", selection);
-        const fileId = selection.getFileId();
-        const locationId = selection.getLocation();
-        if (locationId !== 0 && locationId !== "0") {
-          osparc.FlashMessenger.getInstance().logAs(this.tr("Only files in simcore.s3 can be deleted"));
-          return false;
+    __deleteSelected: function() {
+      if (this.isMultiSelect()) {
+        this.__multiSelection.forEach(selection => {
+          this.__deleteFile(selection);
+        });
+      } else {
+        const selection = this.getItemSelected();
+        if (selection) {
+          this.__deleteFile(selection);
         }
-        const dataStore = osparc.store.Data.getInstance();
-        dataStore.addListenerOnce("deleteFile", e => {
-          if (e) {
-            this.fireDataEvent("fileDeleted", e.getData());
+      }
+    },
+
+    __retrieveURLAndDownloadFile: function(file) {
+      const fileId = file.getFileId();
+      const locationId = file.getLocation();
+      osparc.utils.Utils.retrieveURLAndDownload(locationId, fileId)
+        .then(data => {
+          if (data) {
+            osparc.DownloadLinkTracker.getInstance().downloadLinkUnattended(data.link, data.fileName);
           }
-        }, this);
-        return dataStore.deleteFile(locationId, fileId);
+        });
+    },
+
+    __deleteFile: function(file) {
+      console.log("Delete ", file);
+      const fileId = file.getFileId();
+      const locationId = file.getLocation();
+      if (locationId !== 0 && locationId !== "0") {
+        osparc.FlashMessenger.getInstance().logAs(this.tr("Only files in simcore.s3 can be deleted"));
+        return false;
       }
-      return false;
-    }
+      const dataStore = osparc.store.Data.getInstance();
+      dataStore.addListenerOnce("deleteFile", e => {
+        if (e) {
+          this.fireDataEvent("fileDeleted", e.getData());
+        }
+      }, this);
+      return dataStore.deleteFile(locationId, fileId);
+    },
   }
 });

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

@@ -545,7 +545,8 @@ qx.Class.define("osparc.file.FilePicker", {
         flex: 1
       });
       treeFolderLayout.add(treeLayout, 0);
-      const folderViewer = new osparc.file.FolderViewer();
+      const allowMultiselection = false;
+      const folderViewer = new osparc.file.FolderViewer(allowMultiselection);
       treeFolderLayout.add(folderViewer, 1);
 
       filesTree.addListener("selectionChanged", () => {
@@ -562,7 +563,7 @@ qx.Class.define("osparc.file.FilePicker", {
         const selectionData = e.getData();
         this.__selectionChanged(selectionData);
       }, this);
-      folderViewer.addListener("itemSelected", e => {
+      folderViewer.addListener("openItemSelected", e => {
         const selectionData = e.getData();
         this.__selectionChanged(selectionData);
         if (osparc.file.FilesTree.isFile(selectionData)) {

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

@@ -45,6 +45,11 @@ qx.Class.define("osparc.file.FileTreeItem", {
   construct: function() {
     this.base(arguments);
 
+    this.set({
+      indent: 12, // defaults to 19,
+      decorator: "rounded",
+    });
+
     // create a date format like "Oct. 19, 2018 11:31 AM"
     this._dateFormat = new qx.util.format.DateFormat(
       qx.locale.Date.getDateFormat("medium") + " " +