Skip to content

Commit 4fa6ee2

Browse files
odeimaizodeimaiz
authored
🎨 [Frontend] UI/UX Data handling: Larger window and list view by default (#7160)
1 parent aed987d commit 4fa6ee2

29 files changed

+208
-247
lines changed

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,10 @@ qx.Class.define("osparc.DownloadLinkTracker", {
3333
downloadAnchorNode.setAttribute("href", url);
3434
downloadAnchorNode.setAttribute("download", fileName);
3535
downloadAnchorNode.setAttribute("osparc", "downloadFile");
36+
document.body.appendChild(downloadAnchorNode);
3637
this.setDownloading(true);
3738
downloadAnchorNode.click();
38-
downloadAnchorNode.remove();
39+
document.body.removeChild(downloadAnchorNode);
3940
// This is needed to make it work in Firefox
4041
setTimeout(() => this.setDownloading(false), 100);
4142
}

‎services/static-webserver/client/source/class/osparc/admin/AdminCenter.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ qx.Class.define("osparc.admin.AdminCenter", {
2424
const miniProfile = osparc.desktop.account.MyAccount.createMiniProfileView().set({
2525
paddingRight: 10
2626
});
27-
this.addWidgetOnTopOfTheTabs(miniProfile);
27+
this.addWidgetToTabs(miniProfile);
2828

2929
this.__addPricingPlansPage();
3030
this.__addMaintenancePage();

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -963,8 +963,8 @@ qx.Class.define("osparc.dashboard.CardBase", {
963963
},
964964

965965
openData: function() {
966-
const moreOpts = this.__openMoreOptions();
967-
moreOpts.openData();
966+
const resourceData = this.getResourceData();
967+
osparc.widget.StudyDataManager.popUpInWindow(resourceData["uuid"]);
968968
},
969969

970970
openBilling: function() {

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

+22-33
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,6 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
9393
__resourceData: null,
9494
__resourceModel: null,
9595
__infoPage: null,
96-
__dataPage: null,
9796
__servicesUpdatePage: null,
9897
__permissionsPage: null,
9998
__tagsPage: null,
@@ -216,10 +215,6 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
216215
this._openPage(this.__infoPage);
217216
},
218217

219-
openData: function() {
220-
this._openPage(this.__dataPage);
221-
},
222-
223218
openUpdateServices: function() {
224219
this._openPage(this.__servicesUpdatePage);
225220
},
@@ -306,7 +301,6 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
306301
this.__getBillingPage,
307302
this.__getServicesUpdatePage,
308303
this.__getServicesBootOptionsPage,
309-
this.__getDataPage,
310304
this.__getCommentsPage,
311305
this.__getPermissionsPage,
312306
this.__getSaveAsTemplatePage,
@@ -323,6 +317,28 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
323317
}
324318
});
325319

320+
const resourceData = this.__resourceData;
321+
if (!osparc.utils.Resources.isService(resourceData)) {
322+
const title = osparc.product.Utils.getStudyAlias({firstUpperCase: true}) + this.tr(" Files...");
323+
const iconSrc = "@FontAwesome5Solid/file/22";
324+
const dataAccess = new qx.ui.basic.Atom().set({
325+
label: title,
326+
icon: iconSrc,
327+
font: "text-14",
328+
padding: 8,
329+
paddingLeft: 12,
330+
gap: 14,
331+
cursor: "pointer",
332+
});
333+
dataAccess.addListener("tap", () => osparc.widget.StudyDataManager.popUpInWindow(resourceData["uuid"]));
334+
this.addWidgetToTabs(dataAccess);
335+
336+
if (resourceData["resourceType"] === "study") {
337+
const canShowData = osparc.study.Utils.canShowStudyData(resourceData);
338+
dataAccess.setEnabled(canShowData);
339+
}
340+
}
341+
326342
if (selectedTabId) {
327343
const pageFound = tabsView.getChildren().find(page => page.tabId === selectedTabId);
328344
if (pageFound) {
@@ -486,33 +502,6 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
486502
return page;
487503
},
488504

489-
__getDataPage: function() {
490-
const resourceData = this.__resourceData;
491-
if (osparc.utils.Resources.isService(resourceData)) {
492-
return null;
493-
}
494-
495-
const id = "Data";
496-
const title = osparc.product.Utils.getStudyAlias({firstUpperCase: true}) + this.tr(" Files");
497-
const iconSrc = "@FontAwesome5Solid/file/22";
498-
const page = this.__dataPage = new osparc.dashboard.resources.pages.BasePage(title, iconSrc, id);
499-
this.__addOpenButton(page);
500-
501-
if (this.__resourceData["resourceType"] === "study") {
502-
const studyData = this.__resourceData;
503-
const canBeOpened = osparc.study.Utils.canShowStudyData(studyData);
504-
page.setEnabled(canBeOpened);
505-
}
506-
507-
const lazyLoadContent = () => {
508-
const studyDataManager = new osparc.widget.NodeDataManager(resourceData["uuid"]);
509-
page.addToContent(studyDataManager);
510-
}
511-
page.addListenerOnce("appear", lazyLoadContent, this);
512-
513-
return page;
514-
},
515-
516505
__getPermissionsPage: function() {
517506
const id = "Permissions";
518507
const title = this.tr("Sharing");

‎services/static-webserver/client/source/class/osparc/desktop/StudyEditor.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -722,7 +722,7 @@ qx.Class.define("osparc.desktop.StudyEditor", {
722722
this.__workbenchView.showPipeline();
723723
} else {
724724
const currentNodeId = this.getStudy().getUi().getCurrentNodeId();
725-
if (currentNodeId) {
725+
if (currentNodeId && this.getStudy().getWorkbench().getNode(currentNodeId)) {
726726
const node = this.getStudy().getWorkbench().getNode(currentNodeId);
727727
if (node && node.isDynamic()) {
728728
this.__workbenchView.fullscreenNode(currentNodeId);

‎services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js

+3-6
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,8 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
5454
});
5555
},
5656

57-
openNodeDataManager: function(node) {
58-
const nodeDataManager = new osparc.widget.NodeDataManager(null, node.getNodeId());
59-
const win = osparc.ui.window.Window.popUpInWindow(nodeDataManager, node.getLabel(), 900, 600).set({
60-
appearance: "service-window"
61-
});
57+
openStudyDataManager: function(node) {
58+
const win = osparc.widget.StudyDataManager.popUpInWindow(null, node.getNodeId(), node.getLabel());
6259
const closeBtn = win.getChildControl("close-button");
6360
osparc.utils.Utils.setIdToWidget(closeBtn, "nodeDataManagerCloseBtn");
6461
}
@@ -1049,7 +1046,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
10491046
allowGrowY: false
10501047
});
10511048
osparc.utils.Utils.setIdToWidget(nodeFilesBtn, "nodeFilesBtn");
1052-
nodeFilesBtn.addListener("execute", () => this.self().openNodeDataManager(node));
1049+
nodeFilesBtn.addListener("execute", () => this.self().openStudyDataManager(node));
10531050
outputsBox.add(nodeFilesBtn);
10541051

10551052
const outputs = new osparc.desktop.PanelView(this.tr("Outputs"), outputsBox);

‎services/static-webserver/client/source/class/osparc/desktop/account/MyAccount.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ qx.Class.define("osparc.desktop.account.MyAccount", {
2424
const miniProfile = osparc.desktop.account.MyAccount.createMiniProfileView().set({
2525
paddingRight: 10
2626
});
27-
this.addWidgetOnTopOfTheTabs(miniProfile);
27+
this.addWidgetToTabs(miniProfile);
2828

2929
this.__profilePage = this.__addProfilePage();
3030

‎services/static-webserver/client/source/class/osparc/desktop/credits/BillingCenter.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ qx.Class.define("osparc.desktop.credits.BillingCenter", {
2424
const miniWallet = this.self().createMiniWalletView().set({
2525
paddingRight: 10
2626
});
27-
this.addWidgetOnTopOfTheTabs(miniWallet);
27+
this.addWidgetToTabs(miniWallet);
2828

2929
this.__walletsPage = this.__addWalletsPage();
3030
this.__paymentMethodsPage = this.__addPaymentMethodsPage();

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

+63-49
Original file line numberDiff line numberDiff line change
@@ -108,23 +108,11 @@ qx.Class.define("osparc.file.FileLabelWithActions", {
108108

109109
setItemSelected: function(selectedItem) {
110110
if (selectedItem) {
111+
this.__selection = [selectedItem];
111112
const isFile = osparc.file.FilesTree.isFile(selectedItem);
112113
this.getChildControl("download-button").setEnabled(isFile);
113-
this.getChildControl("delete-button").setEnabled(isFile);
114-
const selectedLabel = this.getChildControl("selected-label");
115-
if (isFile) {
116-
this.__selection = [selectedItem];
117-
selectedLabel.set({
118-
value: selectedItem.getLabel(),
119-
toolTipText: selectedItem.getFileId()
120-
});
121-
} else {
122-
this.__selection = [];
123-
selectedLabel.set({
124-
value: "",
125-
toolTipText: ""
126-
});
127-
}
114+
this.getChildControl("delete-button").setEnabled(true); // folders can also be deleted
115+
this.getChildControl("selected-label").setValue(selectedItem.getLabel());
128116
} else {
129117
this.resetSelection();
130118
}
@@ -138,7 +126,7 @@ qx.Class.define("osparc.file.FileLabelWithActions", {
138126
} else {
139127
const selectedLabel = this.getChildControl("selected-label");
140128
selectedLabel.set({
141-
value: multiSelectionData.length + " files"
129+
value: multiSelectionData.length + " items"
142130
});
143131
}
144132
} else {
@@ -168,60 +156,86 @@ qx.Class.define("osparc.file.FileLabelWithActions", {
168156
}
169157
},
170158

159+
__retrieveURLAndDownloadFile: function(file) {
160+
const fileId = file.getFileId();
161+
const locationId = file.getLocation();
162+
osparc.utils.Utils.retrieveURLAndDownload(locationId, fileId)
163+
.then(data => {
164+
if (data) {
165+
osparc.DownloadLinkTracker.getInstance().downloadLinkUnattended(data.link, data.fileName);
166+
}
167+
});
168+
},
169+
171170
__deleteSelected: function() {
171+
const toBeDeleted = [];
172+
let isFolderSelected = false;
172173
if (this.isMultiSelect()) {
173-
const requests = [];
174174
this.__selection.forEach(selection => {
175-
if (selection && osparc.file.FilesTree.isFile(selection)) {
176-
const request = this.__deleteFile(selection);
177-
if (request) {
178-
requests.push(request);
175+
if (selection) {
176+
toBeDeleted.push(selection);
177+
if (osparc.file.FilesTree.isDir(selection)) {
178+
isFolderSelected = true;
179179
}
180180
}
181181
});
182-
Promise.all(requests)
183-
.then(datas => {
184-
if (datas.length) {
185-
this.fireDataEvent("fileDeleted", datas[0]);
186-
osparc.FlashMessenger.getInstance().logAs(this.tr("Files successfully deleted"), "INFO");
187-
}
188-
});
189-
requests
190182
} else if (this.__selection.length) {
191183
const selection = this.__selection[0];
192-
if (selection && osparc.file.FilesTree.isFile(selection)) {
193-
const request = this.__deleteFile(selection);
194-
if (request) {
195-
request
196-
.then(data => {
197-
this.fireDataEvent("fileDeleted", data);
198-
osparc.FlashMessenger.getInstance().logAs(this.tr("File successfully deleted"), "INFO");
199-
});
184+
if (selection) {
185+
if (osparc.file.FilesTree.isDir(selection)) {
186+
isFolderSelected = true;
200187
}
201188
}
202189
}
190+
191+
let msg = this.tr("This operation cannot be undone.");
192+
msg += isFolderSelected ? ("<br>"+this.tr("All the content of the folders will be deleted.")) : "";
193+
msg += "<br>" + this.tr("Do you want to proceed?");
194+
const confirmationWin = new osparc.ui.window.Confirmation(msg).set({
195+
caption: this.tr("Delete"),
196+
confirmText: this.tr("Delete"),
197+
confirmAction: "delete"
198+
});
199+
confirmationWin.center();
200+
confirmationWin.open();
201+
confirmationWin.addListener("close", () => {
202+
if (confirmationWin.getConfirmed()) {
203+
this.__doDeleteSelected(toBeDeleted);
204+
}
205+
}, this);
203206
},
204207

205-
__retrieveURLAndDownloadFile: function(file) {
206-
const fileId = file.getFileId();
207-
const locationId = file.getLocation();
208-
osparc.utils.Utils.retrieveURLAndDownload(locationId, fileId)
209-
.then(data => {
210-
if (data) {
211-
osparc.DownloadLinkTracker.getInstance().downloadLinkUnattended(data.link, data.fileName);
208+
__doDeleteSelected: function(toBeDeleted) {
209+
const requests = [];
210+
toBeDeleted.forEach(selection => {
211+
if (selection) {
212+
let request = null;
213+
if (osparc.file.FilesTree.isFile(selection)) {
214+
request = this.__deleteItem(selection.getFileId(), selection.getLocation());
215+
} else {
216+
request = this.__deleteItem(selection.getPath(), selection.getLocation());
217+
}
218+
if (request) {
219+
requests.push(request);
220+
}
221+
}
222+
});
223+
Promise.all(requests)
224+
.then(datas => {
225+
if (datas.length) {
226+
this.fireDataEvent("fileDeleted", datas[0]);
227+
osparc.FlashMessenger.getInstance().logAs(this.tr("Items successfully deleted"), "INFO");
212228
}
213229
});
214230
},
215231

216-
__deleteFile: function(file) {
217-
const fileId = file.getFileId();
218-
const locationId = file.getLocation();
232+
__deleteItem: function(itemId, locationId) {
219233
if (locationId !== 0 && locationId !== "0") {
220-
osparc.FlashMessenger.getInstance().logAs(this.tr("Only files in simcore.s3 can be deleted"));
234+
osparc.FlashMessenger.getInstance().logAs(this.tr("Only items in simcore.s3 can be deleted"));
221235
return null;
222236
}
223237
const dataStore = osparc.store.Data.getInstance();
224-
return dataStore.deleteFile(locationId, fileId);
238+
return dataStore.deleteFile(locationId, itemId);
225239
},
226240
}
227241
});

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

+3-31
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ qx.Class.define("osparc.file.FileTreeItem", {
7979
itemId: {
8080
check: "String",
8181
event: "changeItemId",
82-
apply: "_applyItemId",
82+
apply: "__applyItemId",
8383
nullable: true
8484
},
8585

@@ -144,7 +144,6 @@ qx.Class.define("osparc.file.FileTreeItem", {
144144

145145
// Add lastModified
146146
const lastModifiedWidget = new qx.ui.basic.Label().set({
147-
width: 140,
148147
maxWidth: 140,
149148
textAlign: "right"
150149
});
@@ -162,7 +161,6 @@ qx.Class.define("osparc.file.FileTreeItem", {
162161

163162
// Add size
164163
const sizeWidget = new qx.ui.basic.Label().set({
165-
width: 70,
166164
maxWidth: 70,
167165
textAlign: "right"
168166
});
@@ -175,39 +173,13 @@ qx.Class.define("osparc.file.FileTreeItem", {
175173
}
176174
});
177175
this.addWidget(sizeWidget);
178-
179-
180-
const permissions = osparc.data.Permissions.getInstance();
181-
// Add Path
182-
const pathWidget = new qx.ui.basic.Label().set({
183-
width: 300,
184-
maxWidth: 300,
185-
textAlign: "right"
186-
});
187-
this.bind("path", pathWidget, "value");
188-
this.addWidget(pathWidget);
189-
permissions.bind("role", pathWidget, "visibility", {
190-
converter: () => permissions.canDo("study.nodestree.uuid.read") ? "visible" : "excluded"
191-
});
192-
193-
// Add NodeId
194-
const fileIdWidget = new qx.ui.basic.Label().set({
195-
width: 300,
196-
maxWidth: 300,
197-
textAlign: "right"
198-
});
199-
this.bind("fileId", fileIdWidget, "value");
200-
this.addWidget(fileIdWidget);
201-
permissions.bind("role", fileIdWidget, "visibility", {
202-
converter: () => permissions.canDo("study.nodestree.uuid.read") ? "visible" : "excluded"
203-
});
204176
},
205177

206-
// override
207-
_applyItemId: function(value, old) {
178+
__applyItemId: function(value, old) {
208179
osparc.utils.Utils.setIdToWidget(this, "fileTreeItem_" + value);
209180
},
210181

182+
// override
211183
_applyIcon: function(value, old) {
212184
this.base(arguments, value, old);
213185
const icon = this.getChildControl("icon", true);

0 commit comments

Comments
 (0)