Skip to content

Commit ed110f4

Browse files
odeimaizodeimaiz
authored
🎨 [Frontend] Multiselect data (#6896)
1 parent 065bd8f commit ed110f4

File tree

13 files changed

+563
-319
lines changed

13 files changed

+563
-319
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ qx.Class.define("osparc.dashboard.DataBrowser", {
7575
const reloadButton = treeFolderView.getChildControl("reload-button");
7676
reloadButton.addListener("execute", () => this.__reloadTree(), this);
7777

78-
const selectedFileLayout = treeFolderView.getChildControl("selected-file-layout");
78+
const selectedFileLayout = treeFolderView.getChildControl("folder-viewer").getChildControl("selected-file-layout");
7979
selectedFileLayout.addListener("fileDeleted", e => this.__fileDeleted(e.getData()), this);
8080
},
8181

‎services/static-webserver/client/source/class/osparc/data/model/Study.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -635,6 +635,17 @@ qx.Class.define("osparc.data.model.Study", {
635635
return !this.getUi().getSlideshow().isEmpty();
636636
},
637637

638+
sendMessageToIframe: function(nodeId, msg) {
639+
if (nodeId) {
640+
const node = this.getWorkbench().getNode(nodeId);
641+
if (node && node.getIFrame()) {
642+
node.getIFrame().sendMessageToIframe(msg);
643+
return true;
644+
}
645+
}
646+
return false;
647+
},
648+
638649
patchStudy: function(studyChanges) {
639650
const matches = this.self().OwnPatch.filter(el => Object.keys(studyChanges).indexOf(el) !== -1);
640651
if (matches.length) {

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

Lines changed: 120 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -45,18 +45,29 @@ qx.Class.define("osparc.file.FileLabelWithActions", {
4545
this.getChildControl("selected-label");
4646

4747
const downloadBtn = this.getChildControl("download-button");
48-
downloadBtn.addListener("execute", () => this.__retrieveURLAndDownload(), this);
48+
downloadBtn.addListener("execute", () => this.__retrieveURLAndDownloadSelected(), this);
4949

5050
const deleteBtn = this.getChildControl("delete-button");
51-
deleteBtn.addListener("execute", () => this.__deleteFile(), this);
51+
deleteBtn.addListener("execute", () => this.__deleteSelected(), this);
5252
},
5353

5454
events: {
5555
"fileDeleted": "qx.event.type.Data"
5656
},
5757

58+
properties: {
59+
multiSelect: {
60+
check: "Boolean",
61+
init: false,
62+
nullable: false,
63+
event: "changeMultiSelect",
64+
apply: "__enableMultiSelection",
65+
},
66+
},
67+
5868
members: {
5969
__selection: null,
70+
__multiSelection: null,
6071

6172
_createChildControlImpl: function(id) {
6273
let control;
@@ -88,26 +99,59 @@ qx.Class.define("osparc.file.FileLabelWithActions", {
8899
return control || this.base(arguments, id);
89100
},
90101

102+
__enableMultiSelection: function() {
103+
this.resetItemSelected();
104+
this.__multiSelection = [];
105+
},
106+
91107
setItemSelected: function(selectedItem) {
92-
const isFile = osparc.file.FilesTree.isFile(selectedItem);
93-
this.getChildControl("download-button").setEnabled(isFile);
94-
this.getChildControl("delete-button").setEnabled(isFile);
95-
const selectedLabel = this.getChildControl("selected-label");
96-
if (isFile) {
97-
this.__selection = selectedItem;
98-
selectedLabel.set({
99-
value: selectedItem.getLabel(),
100-
toolTipText: selectedItem.getFileId()
101-
});
108+
if (selectedItem) {
109+
const isFile = osparc.file.FilesTree.isFile(selectedItem);
110+
this.getChildControl("download-button").setEnabled(isFile);
111+
this.getChildControl("delete-button").setEnabled(isFile);
112+
const selectedLabel = this.getChildControl("selected-label");
113+
if (isFile) {
114+
this.__selection = selectedItem;
115+
selectedLabel.set({
116+
value: selectedItem.getLabel(),
117+
toolTipText: selectedItem.getFileId()
118+
});
119+
} else {
120+
this.__selection = null;
121+
selectedLabel.set({
122+
value: "",
123+
toolTipText: ""
124+
});
125+
}
102126
} else {
103-
this.__selection = null;
104-
selectedLabel.set({
105-
value: "",
106-
toolTipText: ""
107-
});
127+
this.resetItemSelected();
128+
}
129+
},
130+
131+
setMultiItemSelected: function(multiSelectionData) {
132+
this.__multiSelection = multiSelectionData;
133+
if (multiSelectionData && multiSelectionData.length) {
134+
if (multiSelectionData.length === 1) {
135+
this.setItemSelected(multiSelectionData[0]);
136+
} else {
137+
const selectedLabel = this.getChildControl("selected-label");
138+
selectedLabel.set({
139+
value: multiSelectionData.length + " files"
140+
});
141+
}
142+
} else {
143+
this.resetItemSelected();
108144
}
109145
},
110146

147+
resetItemSelected: function() {
148+
this.__selection = null;
149+
this.__multiSelection = [];
150+
this.getChildControl("download-button").setEnabled(false);
151+
this.getChildControl("delete-button").setEnabled(false);
152+
this.getChildControl("selected-label").resetValue();
153+
},
154+
111155
getItemSelected: function() {
112156
const selectedItem = this.__selection;
113157
if (selectedItem && osparc.file.FilesTree.isFile(selectedItem)) {
@@ -116,40 +160,71 @@ qx.Class.define("osparc.file.FileLabelWithActions", {
116160
return null;
117161
},
118162

119-
// Request to the server and download
120-
__retrieveURLAndDownload: function() {
121-
let selection = this.getItemSelected();
122-
if (selection) {
123-
const fileId = selection.getFileId();
124-
const locationId = selection.getLocation();
125-
osparc.utils.Utils.retrieveURLAndDownload(locationId, fileId)
126-
.then(data => {
127-
if (data) {
128-
osparc.DownloadLinkTracker.getInstance().downloadLinkUnattended(data.link, data.fileName);
163+
__retrieveURLAndDownloadSelected: function() {
164+
if (this.isMultiSelect()) {
165+
this.__multiSelection.forEach(selection => {
166+
this.__retrieveURLAndDownloadFile(selection);
167+
});
168+
} else {
169+
const selection = this.getItemSelected();
170+
if (selection) {
171+
this.__retrieveURLAndDownloadFile(selection);
172+
}
173+
}
174+
},
175+
176+
__deleteSelected: function() {
177+
if (this.isMultiSelect()) {
178+
const requests = [];
179+
this.__multiSelection.forEach(selection => {
180+
const request = this.__deleteFile(selection);
181+
if (request) {
182+
requests.push(request);
183+
}
184+
});
185+
Promise.all(requests)
186+
.then(datas => {
187+
if (datas.length) {
188+
this.fireDataEvent("fileDeleted", datas[0]);
189+
osparc.FlashMessenger.getInstance().logAs(this.tr("Files successfully deleted"), "ERROR");
129190
}
130191
});
192+
requests
193+
} else {
194+
const selection = this.getItemSelected();
195+
if (selection) {
196+
const request = this.__deleteFile(selection);
197+
if (request) {
198+
request
199+
.then(data => {
200+
this.fireDataEvent("fileDeleted", data);
201+
osparc.FlashMessenger.getInstance().logAs(this.tr("File successfully deleted"), "ERROR");
202+
});
203+
}
204+
}
131205
}
132206
},
133207

134-
__deleteFile: function() {
135-
let selection = this.getItemSelected();
136-
if (selection) {
137-
console.log("Delete ", selection);
138-
const fileId = selection.getFileId();
139-
const locationId = selection.getLocation();
140-
if (locationId !== 0 && locationId !== "0") {
141-
osparc.FlashMessenger.getInstance().logAs(this.tr("Only files in simcore.s3 can be deleted"));
142-
return false;
143-
}
144-
const dataStore = osparc.store.Data.getInstance();
145-
dataStore.addListenerOnce("deleteFile", e => {
146-
if (e) {
147-
this.fireDataEvent("fileDeleted", e.getData());
208+
__retrieveURLAndDownloadFile: function(file) {
209+
const fileId = file.getFileId();
210+
const locationId = file.getLocation();
211+
osparc.utils.Utils.retrieveURLAndDownload(locationId, fileId)
212+
.then(data => {
213+
if (data) {
214+
osparc.DownloadLinkTracker.getInstance().downloadLinkUnattended(data.link, data.fileName);
148215
}
149-
}, this);
150-
return dataStore.deleteFile(locationId, fileId);
216+
});
217+
},
218+
219+
__deleteFile: function(file) {
220+
const fileId = file.getFileId();
221+
const locationId = file.getLocation();
222+
if (locationId !== 0 && locationId !== "0") {
223+
osparc.FlashMessenger.getInstance().logAs(this.tr("Only files in simcore.s3 can be deleted"));
224+
return null;
151225
}
152-
return false;
153-
}
226+
const dataStore = osparc.store.Data.getInstance();
227+
return dataStore.deleteFile(locationId, fileId);
228+
},
154229
}
155230
});

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -545,7 +545,8 @@ qx.Class.define("osparc.file.FilePicker", {
545545
flex: 1
546546
});
547547
treeFolderLayout.add(treeLayout, 0);
548-
const folderViewer = new osparc.file.FolderViewer();
548+
const allowMultiselection = false;
549+
const folderViewer = new osparc.file.FolderViewer(allowMultiselection);
549550
treeFolderLayout.add(folderViewer, 1);
550551

551552
filesTree.addListener("selectionChanged", () => {
@@ -562,7 +563,7 @@ qx.Class.define("osparc.file.FilePicker", {
562563
const selectionData = e.getData();
563564
this.__selectionChanged(selectionData);
564565
}, this);
565-
folderViewer.addListener("itemSelected", e => {
566+
folderViewer.addListener("openItemSelected", e => {
566567
const selectionData = e.getData();
567568
this.__selectionChanged(selectionData);
568569
if (osparc.file.FilesTree.isFile(selectionData)) {

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@ qx.Class.define("osparc.file.FileTreeItem", {
4545
construct: function() {
4646
this.base(arguments);
4747

48+
this.set({
49+
indent: 12, // defaults to 19,
50+
decorator: "rounded",
51+
});
52+
4853
// create a date format like "Oct. 19, 2018 11:31 AM"
4954
this._dateFormat = new qx.util.format.DateFormat(
5055
qx.locale.Date.getDateFormat("medium") + " " +

0 commit comments

Comments
 (0)