Skip to content

Commit

Permalink
🎨 [Frontend] Multiselect data (#6896)
Browse files Browse the repository at this point in the history
  • Loading branch information
@odeimaiz
odeimaiz authored Dec 12, 2024
1 parent 065bd8f commit ed110f4
Show file tree
Hide file tree
Showing 13 changed files with 563 additions and 319 deletions.
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/dashboard/DataBrowser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
},

Expand Down
11 changes: 11 additions & 0 deletions services/static-webserver/client/source/class/osparc/data/model/Study.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -635,6 +635,17 @@ qx.Class.define("osparc.data.model.Study", {
return !this.getUi().getSlideshow().isEmpty();
},

sendMessageToIframe: function(nodeId, msg) {
if (nodeId) {
const node = this.getWorkbench().getNode(nodeId);
if (node && node.getIFrame()) {
node.getIFrame().sendMessageToIframe(msg);
return true;
}
}
return false;
},

patchStudy: function(studyChanges) {
const matches = this.self().OwnPatch.filter(el => Object.keys(studyChanges).indexOf(el) !== -1);
if (matches.length) {
Expand Down
165 changes: 120 additions & 45 deletions services/static-webserver/client/source/class/osparc/file/FileLabelWithActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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)) {
Expand All @@ -116,40 +160,71 @@ 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);
}
}
},

__deleteSelected: function() {
if (this.isMultiSelect()) {
const requests = [];
this.__multiSelection.forEach(selection => {
const request = this.__deleteFile(selection);
if (request) {
requests.push(request);
}
});
Promise.all(requests)
.then(datas => {
if (datas.length) {
this.fireDataEvent("fileDeleted", datas[0]);
osparc.FlashMessenger.getInstance().logAs(this.tr("Files successfully deleted"), "ERROR");
}
});
requests
} else {
const selection = this.getItemSelected();
if (selection) {
const request = this.__deleteFile(selection);
if (request) {
request
.then(data => {
this.fireDataEvent("fileDeleted", data);
osparc.FlashMessenger.getInstance().logAs(this.tr("File successfully deleted"), "ERROR");
});
}
}
}
},

__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;
}
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) {
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 null;
}
return false;
}
const dataStore = osparc.store.Data.getInstance();
return dataStore.deleteFile(locationId, fileId);
},
}
});
5 changes: 3 additions & 2 deletions services/static-webserver/client/source/class/osparc/file/FilePicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand All @@ -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)) {
Expand Down
5 changes: 5 additions & 0 deletions services/static-webserver/client/source/class/osparc/file/FileTreeItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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") + " " +
Expand Down
Loading

0 comments on commit ed110f4

Please sign in to comment.