Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ App Mode: Allow uploading file to File Picker #3383

Merged
merged 18 commits into from
Sep 23, 2022
Merged

✨ App Mode: Allow uploading file to File Picker #3383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
5cba3bc
text updated
odeimaiz Sep 22, 2022
1eb3942
Merge branch 'master' into feature/fp-ss-upload-file
odeimaiz Sep 22, 2022
ffab34e
minor
odeimaiz Sep 22, 2022
9de86c3
texts
odeimaiz Sep 22, 2022
39a006c
refactoring
odeimaiz Sep 22, 2022
49943f8
minor
odeimaiz Sep 22, 2022
7f6e87c
UploadFileSection in FP
odeimaiz Sep 22, 2022
d850e73
minor
odeimaiz Sep 22, 2022
5f0215d
minor
odeimaiz Sep 22, 2022
e6f2e32
minor
odeimaiz Sep 22, 2022
d2aae35
refactoring
odeimaiz Sep 22, 2022
49150b6
ux
odeimaiz Sep 22, 2022
84ac806
minor
odeimaiz Sep 22, 2022
2d7b187
renamings
odeimaiz Sep 22, 2022
be68d23
upload file in App mode
odeimaiz Sep 22, 2022
dbacbfa
minor
odeimaiz Sep 22, 2022
b7f64ee
darker background
odeimaiz Sep 22, 2022
de95d27
Fixed FP status icon
odeimaiz Sep 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions services/static-webserver/client/source/class/osparc/component/node/FilePickerSSView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,16 @@ qx.Class.define("osparc.component.node.FilePickerSSView", {
}

const filePicker = new osparc.file.FilePicker(node, "app");
filePicker.init();
filePicker.addListener("itemSelected", () => this.fireEvent("itemSelected"));
filePicker.addListener("itemSelected", () => {
this.fireEvent("itemSelected");
// eslint-disable-next-line no-underscore-dangle
filePicker.__buildLayout();
});
[
"itemReset",
"fileUploaded"
// eslint-disable-next-line no-underscore-dangle
].forEach(ev => filePicker.addListener(ev, () => filePicker.__buildLayout()));

this._mainView.add(filePicker, {
flex: 1
Expand Down
5 changes: 5 additions & 0 deletions services/static-webserver/client/source/class/osparc/desktop/SlideshowView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,11 @@ qx.Class.define("osparc.desktop.SlideshowView", {
paddingBottom: 0
});
}
if (node.isFilePicker()) {
view.getMainView().set({
backgroundColor: "background-main-2"
});
}
},

__getNodeView: function(node) {
Expand Down
20 changes: 18 additions & 2 deletions services/static-webserver/client/source/class/osparc/file/FileDrop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,24 @@ qx.Class.define("osparc.file.FileDrop", {
}
}, this);

const dropHere = this.__dropHere = new qx.ui.basic.Label(this.tr("Drop file here")).set({
font: "title-14",
let msg = "<center>";
const options = [
this.tr("Upload file"),
this.tr("Drop file from explorer"),
this.tr("Drop file from tree"),
this.tr("Provide Download Link")
];
for (let i=0; i<options.length; i++) {
msg += options[i];
if (i < options.length-1) {
msg += "<br>" + this.tr("or") + "<br>";
}
}
msg += "</center>";

const dropHere = this.__dropHere = new qx.ui.basic.Label(msg).set({
font: "text-14",
rich: true,
alignX: "center",
alignY: "middle"
});
Expand Down
191 changes: 118 additions & 73 deletions services/static-webserver/client/source/class/osparc/file/FilePicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ qx.Class.define("osparc.file.FilePicker", {
construct: function(node, pageContext = "workbench") {
this.base(arguments);

this._setLayout(new qx.ui.layout.VBox(10));
this._setLayout(new qx.ui.layout.VBox(20));

this.set({
node,
Expand Down Expand Up @@ -117,7 +117,7 @@ qx.Class.define("osparc.file.FilePicker", {
return osparc.file.FilePicker.isOutputFromStore(outputs) || osparc.file.FilePicker.isOutputDownloadLink(outputs);
},

__setOutputValue: function(node, outputValue) {
setOutputValue: function(node, outputValue) {
node.setOutputData({
"outFile": outputValue
});
Expand All @@ -131,8 +131,7 @@ qx.Class.define("osparc.file.FilePicker", {

setOutputValueFromStore: function(node, store, dataset, path, label) {
if (store !== undefined && path) {
// eslint-disable-next-line no-underscore-dangle
osparc.file.FilePicker.__setOutputValue(node, {
osparc.file.FilePicker.setOutputValue(node, {
store,
dataset,
path,
Expand All @@ -141,19 +140,17 @@ qx.Class.define("osparc.file.FilePicker", {
}
},

__setOutputValueFromLink: function(node, downloadLink, label) {
setOutputValueFromLink: function(node, downloadLink, label) {
if (downloadLink) {
// eslint-disable-next-line no-underscore-dangle
osparc.file.FilePicker.__setOutputValue(node, {
osparc.file.FilePicker.setOutputValue(node, {
downloadLink,
label: label ? label : ""
});
}
},

resetOutputValue: function(node) {
// eslint-disable-next-line no-underscore-dangle
osparc.file.FilePicker.__setOutputValue(node, null);
osparc.file.FilePicker.setOutputValue(node, null);
},

getOutputFileMetadata: function(node) {
Expand Down Expand Up @@ -258,9 +255,8 @@ qx.Class.define("osparc.file.FilePicker", {

members: {
__filesTree: null,
__folderViewer: null,
__selectButton: null,
__selectedFileLayout: null,
__selectedFile: null,
__selectedFileFound: null,
__fileDownloadLink: null,
__uploadedParts: null,
Expand All @@ -270,8 +266,7 @@ qx.Class.define("osparc.file.FilePicker", {
},

__setOutputValueFromLink: function(downloadLink, label) {
// eslint-disable-next-line no-underscore-dangle
this.self().__setOutputValueFromLink(this.getNode(), downloadLink, label);
this.self().setOutputValueFromLink(this.getNode(), downloadLink, label);
},

__reloadFilesTree: function() {
Expand All @@ -286,15 +281,25 @@ qx.Class.define("osparc.file.FilePicker", {
this._removeAll();
const isWorkbenchContext = this.getPageContext() === "workbench";
const hasOutput = osparc.file.FilePicker.hasOutputAssigned(this.getNode().getOutputs());
if (isWorkbenchContext && hasOutput) {
this.__buildInfoLayout();
return;
}
this.__addProgressBar();
if (isWorkbenchContext) {
this.__buildDropLayout();
if (hasOutput) {
// WORKBENCH mode WITH output
this.__buildInfoLayout();
} else {
// WORKBENCH mode WITHOUT output
this.__addProgressBar();
this.__buildNoFileWBLayout();
}
} else {
this.__buildTreeLayout();
this.setMargin(10);
if (hasOutput) {
// APP mode WITH output
this.__buildInfoLayout();
} else {
// APP mode WITHOUT output
this.__addProgressBar();
this.__buildNoFileAppLayout();
}
}
},

Expand Down Expand Up @@ -334,11 +339,24 @@ qx.Class.define("osparc.file.FilePicker", {
this._add(formRend);

const hbox = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
const downloadFileBtn = this.__getDownloadFileButton();
hbox.add(downloadFileBtn);
const resetFileBtn = this.__getResetFileButton();
hbox.add(resetFileBtn);
this._add(hbox);
},

__getDownloadFileButton: function() {
const node = this.getNode();
const downloadFileBtn = new qx.ui.form.Button(this.tr("Download"), "@FontAwesome5Solid/cloud-download-alt/14").set({
allowGrowX: false
});
downloadFileBtn.addListener("execute", () => osparc.file.FilePicker.downloadOutput(node));
hbox.add(downloadFileBtn);
return downloadFileBtn;
},

__getResetFileButton: function() {
const node = this.getNode();
const resetFileBtn = new qx.ui.form.Button(this.tr("Reset"), "@FontAwesome5Solid/sync-alt/14").set({
allowGrowX: false
});
Expand All @@ -348,13 +366,36 @@ qx.Class.define("osparc.file.FilePicker", {
node.getStudy().getWorkbench().giveUniqueNameToNode(node, "File Picker");
this.fireEvent("itemReset");
}, this);
hbox.add(resetFileBtn);
this._add(hbox);
return resetFileBtn;
},

__buildDropLayout: function() {
const node = this.getNode();
__buildNoFileWBLayout: function() {
const uploadFileSection = this.__getUploadFileSection();
this._add(uploadFileSection);

const fileDrop = this.__getFileDropSection();
this._add(fileDrop, {
flex: 1
});

const downloadLinkSection = this.__getDownloadLinkSection();
this._add(downloadLinkSection);
},

__getUploadFileSection: function() {
const uploadFileSection = new osparc.ui.form.FileInput();
uploadFileSection.addListener("selectionChanged", () => {
const file = uploadFileSection.getFile();
if (file) {
if (this.uploadPendingFiles([file])) {
setTimeout(() => this.fireEvent("itemSelected"), 500);
}
}
});
return uploadFileSection;
},

__getFileDropSection: function() {
const fileDrop = new osparc.file.FileDrop();
fileDrop.addListener("localFileDropped", e => {
const files = e.getData()["data"];
Expand All @@ -365,25 +406,20 @@ qx.Class.define("osparc.file.FilePicker", {
});
fileDrop.addListener("fileLinkDropped", e => {
const data = e.getData()["data"];
const node = this.getNode();
osparc.file.FilePicker.setOutputValueFromStore(node, data.getLocation(), data.getDatasetId(), data.getFileId(), data.getLabel());
this.fireEvent("itemSelected");
fileDrop.resetDropAction();
});

this._add(fileDrop, {
flex: 1
});


this.__addDownloadLinkSection();
return fileDrop;
},

__addDownloadLinkSection: function() {
__getDownloadLinkSection: function() {
const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5).set({
alignY: "middle"
}));

layout.add(new qx.ui.basic.Label(this.tr("Or provide a Download Link")));
layout.add(new qx.ui.basic.Label(this.tr("Provide Download Link")));

const fileDownloadLink = this.__fileDownloadLink = new osparc.file.FileDownloadLink().set({
allowGrowY: false
Expand All @@ -396,34 +432,64 @@ qx.Class.define("osparc.file.FilePicker", {
}, this);
layout.add(fileDownloadLink);

this._add(layout);
return layout;
},

__buildNoFileAppLayout: function() {
let msg = this.tr("In order to Select a file you have three options:");
const options = [
this.tr("- Upload a file"),
this.tr("- Select a file from tree"),
this.tr("- Provide Download Link")
];
for (let i=0; i<options.length; i++) {
msg += "<br>" + options[i];
}
const intro = new qx.ui.basic.Label(msg).set({
font: "text-16",
rich: true
});
this._add(intro);

const uploadFileSection = this.__getUploadFileSection();
this._add(uploadFileSection);

const fileBrowserLayout = this.__getFileBrowserLayout();
this._add(fileBrowserLayout, {
flex: 1
});

const downloadLinkSection = this.__getDownloadLinkSection();
this._add(downloadLinkSection);
},

__buildTreeLayout: function() {
__getFileBrowserLayout: function() {
const treeLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));

const reloadButton = new qx.ui.form.Button().set({
label: this.tr("Reload"),
icon: "@FontAwesome5Solid/sync-alt/16",
allowGrowX: false
});
this._add(reloadButton);
reloadButton.addListener("execute", () => this.__reloadFilesTree(), this);
treeLayout.add(reloadButton);

const treeFolderLayout = new qx.ui.splitpane.Pane("horizontal");
treeFolderLayout.getChildControl("splitter").set({
width: 2
});
const filesTree = this.__filesTree = new osparc.file.FilesTree().set({
backgroundColor: "background-main-3",
backgroundColor: "background-main-2",
showLeafs: false,
minWidth: 150,
width: 250
});
treeFolderLayout.add(filesTree, 0);
const folderViewer = this.__folderViewer = new osparc.file.FolderViewer();
treeFolderLayout.add(folderViewer, 1);
this._add(treeFolderLayout, {
treeLayout.add(filesTree, {
flex: 1
});
treeFolderLayout.add(treeLayout, 0);
const folderViewer = new osparc.file.FolderViewer();
treeFolderLayout.add(folderViewer, 1);

filesTree.addListener("selectionChanged", () => {
const selectionData = filesTree.getSelectedItem();
Expand Down Expand Up @@ -462,36 +528,16 @@ qx.Class.define("osparc.file.FilePicker", {
filesTree.requestDatasetFiles(data.locationId, data.datasetId);
}, this);


const mainButtonsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
this._add(mainButtonsLayout);

const fileUploader = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
const input = new qx.html.Input("file", {
display: "none"
const selectBtn = this.__selectButton = new qx.ui.form.Button(this.tr("Select")).set({
allowGrowX: false,
alignX: "right"
});
fileUploader.getContentElement().add(input);
const btn = new qx.ui.toolbar.Button(this.tr("Upload"), "@FontAwesome5Solid/cloud-upload-alt/16");
btn.addListener("execute", () => input.getDomElement().click());
input.addListener("change", () => {
input.getDomElement().files.forEach(file => this.__retrieveUrlAndUpload(file));
}, this);
mainButtonsLayout.add(fileUploader);

const selectedFileLayout = this.__selectedFileLayout = new osparc.file.FileLabelWithActions().set({
alignY: "middle"
});
selectedFileLayout.getChildControl("delete-button").exclude();
mainButtonsLayout.add(selectedFileLayout, {
flex: 1
});

const selectBtn = this.__selectButton = new qx.ui.form.Button(this.tr("Select"));
selectBtn.setEnabled(false);
selectBtn.addListener("execute", () => this.__itemSelected(), this);
mainButtonsLayout.add(selectBtn);
// eslint-disable-next-line no-underscore-dangle
folderViewer._add(selectBtn);

this.__addDownloadLinkSection();
return treeFolderLayout;
},

init: function() {
Expand Down Expand Up @@ -519,17 +565,16 @@ qx.Class.define("osparc.file.FilePicker", {
return false;
},

__selectionChanged: function(selectedItem) {
const isFile = osparc.file.FilesTree.isFile(selectedItem);
__selectionChanged: function(selectedData) {
this.__selectedFile = selectedData;
const isFile = osparc.file.FilesTree.isFile(selectedData);
if (this.__selectButton) {
this.__selectButton.setEnabled(isFile);
}

this.__selectedFileLayout.setItemSelected(selectedItem);
},

__itemSelected: function() {
const selectedItem = this.__selectedFileLayout.getItemSelected();
const selectedItem = this.__selectedFile;
if (selectedItem && osparc.file.FilesTree.isFile(selectedItem)) {
this.setOutputValueFromStore(selectedItem.getLocation(), selectedItem.getDatasetId(), selectedItem.getFileId(), selectedItem.getLabel());
this.fireEvent("itemSelected");
Expand Down
Loading