From 1222d6d69a7589ec42b97a46b9e6cc886dd4d652 Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Tue, 3 Dec 2024 14:50:59 +0100 Subject: [PATCH 01/11] refactor --- .../source/class/osparc/file/FolderContent.js | 256 ++++++++++++++++++ .../source/class/osparc/file/FolderViewer.js | 232 +--------------- 2 files changed, 270 insertions(+), 218 deletions(-) create mode 100644 services/static-webserver/client/source/class/osparc/file/FolderContent.js diff --git a/services/static-webserver/client/source/class/osparc/file/FolderContent.js b/services/static-webserver/client/source/class/osparc/file/FolderContent.js new file mode 100644 index 00000000000..4330672866f --- /dev/null +++ b/services/static-webserver/client/source/class/osparc/file/FolderContent.js @@ -0,0 +1,256 @@ +/* ************************************************************************ + + osparc - the simcore frontend + + https://osparc.io + + Copyright: + 2024 IT'IS Foundation, https://itis.swiss + + License: + MIT: https://opensource.org/licenses/MIT + + Authors: + * Odei Maiz (odeimaiz) + +************************************************************************ */ + +qx.Class.define("osparc.file.FolderContent", { + extend: qx.ui.container.Stack, + + construct: function() { + this.base(arguments); + + this.getChildControl("icons-layout"); + this.getChildControl("table"); + }, + + properties: { + folder: { + check: "qx.core.Object", + init: null, + nullable: true, + event: "changeFolder", + apply: "__applyFolder" + }, + + mode: { + check: ["list", "icons"], + init: "icons", + nullable: false, + event: "changeMode", + apply: "__reloadFolderContent" + }, + }, + + events: { + "selectionChanged": "qx.event.type.Data", // tap + "itemSelected": "qx.event.type.Data", // dbltap + "requestDatasetFiles": "qx.event.type.Data", + }, + + statics: { + getItemButton: function() { + const item = new qx.ui.form.ToggleButton().set({ + iconPosition: "top", + width: 100, + height: 80, + padding: 3 + }); + item.getChildControl("label").set({ + rich: true, + textAlign: "center", + maxWidth: 100, + maxHeight: 31 + }); + osparc.utils.Utils.setIdToWidget(item, "FolderViewerItem"); + return item; + }, + + T_POS: { + TYPE: 0, + NAME: 1, + DATE: 2, + SIZE: 3, + ID: 4 + } + }, + + members: { + _createChildControlImpl: function(id) { + let control; + switch (id) { + case "table": { + const tableModel = new qx.ui.table.model.Simple(); + tableModel.setColumns([ + "", + this.tr("Name"), + this.tr("Date Modified"), + this.tr("Size"), + this.tr("Id") + ]); + control = new osparc.ui.table.Table(tableModel, { + // tableColumnModel: obj => new qx.ui.table.columnmodel.Resize(obj), + initiallyHiddenColumns: [this.self().T_POS.ID] + }); + control.getTableColumnModel().setDataCellRenderer(this.self().T_POS.TYPE, new qx.ui.table.cellrenderer.Image()); + control.setColumnWidth(this.self().T_POS.TYPE, 30); + control.setColumnWidth(this.self().T_POS.NAME, 360); + control.setColumnWidth(this.self().T_POS.DATE, 170); + control.setColumnWidth(this.self().T_POS.SIZE, 70); + this.bind("mode", control, "visibility", { + converter: mode => mode === "list" ? "visible" : "excluded" + }); + const scroll = new qx.ui.container.Scroll(); + scroll.add(control); + this.add(scroll); + break; + } + case "icons-layout": { + control = new qx.ui.container.Composite(new qx.ui.layout.Flow(5, 5)); + osparc.utils.Utils.setIdToWidget(control, "FolderViewerIconsContent"); + this.bind("mode", control, "visibility", { + converter: mode => mode === "icons" ? "visible" : "excluded" + }); + const scroll = new qx.ui.container.Scroll(); + scroll.add(control); + this.add(scroll); + break; + } + } + return control || this.base(arguments, id); + }, + + __convertEntries: function(content) { + const items = []; + if (this.getMode() === "list") { + content.forEach(entry => { + const row = []; + row.push(entry.getIcon ? entry.getIcon() : this.__getIcon(entry)); + row.push(entry.getLabel()); + row.push(entry.getLastModified ? osparc.utils.Utils.formatDateAndTime(new Date(entry.getLastModified())) : ""); + row.push(entry.getSize ? osparc.utils.Utils.bytesToSize(entry.getSize()) : ""); + if (entry.getItemId) { + row.push(entry.getItemId()); + } + row.entry = entry; + items.push(row); + }); + } else if (this.getMode() === "icons") { + content.forEach(entry => { + let tt = entry.getLabel(); + if (entry.getSize) { + tt += "
" + osparc.utils.Utils.bytesToSize(entry.getSize()); + } + if (entry.getLastModified) { + tt += "
" + osparc.utils.Utils.formatDateAndTime(new Date(entry.getLastModified())); + } + const item = this.self().getItemButton().set({ + label: entry.getLabel(), + icon: entry.getIcon ? entry.getIcon() : this.__getIcon(entry), + toolTipText: tt + }); + const icon = item.getChildControl("icon", true); + if (icon.getSource() === "@FontAwesome5Solid/circle-notch/12") { + icon.setPadding(0); + icon.setMarginRight(4); + icon.getContentElement().addClass("rotate"); + } + + if (entry.getItemId) { + item.itemId = entry.getItemId(); + this.__attachListenersToItems(item, entry); + } + items.push(item); + }); + } + return items; + }, + + __getIcon: function(entry) { + return osparc.file.FilesTree.isDir(entry) ? "@MaterialIcons/folder" : "@MaterialIcons/insert_drive_file"; + }, + + __getEntries: function() { + if (this.getFolder()) { + const children = this.getFolder().getChildren().toArray(); + return this.__convertEntries(children); + } + return []; + }, + + __applyFolder: function(folder) { + if (folder) { + if (folder.getLoaded && !folder.getLoaded()) { + this.fireDataEvent("requestDatasetFiles", { + locationId: folder.getLocation(), + datasetId: folder.getPath() + }); + } + + folder.getChildren().addListener("change", () => { + this.__reloadFolderContent(); + }, this); + } + + this.__reloadFolderContent(); + }, + + __reloadFolderContent: function() { + const entries = this.__getEntries(); + if (this.getMode() === "list") { + const table = this.getChildControl("table"); + table.setData(entries); + this.__attachListenersTotable(table); + } else if (this.getMode() === "icons") { + const iconsLayout = this.getChildControl("icons-layout"); + iconsLayout.removeAll(); + const iconsGroup = new qx.ui.form.RadioGroup().set({ + allowEmptySelection: true + }); + entries.forEach(entry => { + iconsGroup.add(entry); + iconsLayout.add(entry); + }); + } + this.setSelection([this.getSelectables()[this.getMode() === "icons" ? 0 : 1]]); + }, + + __itemTapped: function(item) { + this.fireDataEvent("selectionChanged", item); + }, + + __itemDblTapped: function(item) { + this.fireDataEvent("itemSelected", item); + if (osparc.file.FilesTree.isDir(item)) { + this.setFolder(item); + } + }, + + __attachListenersToItems: function(btn, entry) { + btn.addListener("tap", () => { + this.__itemTapped(entry); + }, this); + btn.addListener("dbltap", () => { + this.__itemDblTapped(entry); + }, this); + }, + + __attachListenersTotable: function(table) { + table.addListener("cellTap", e => { + const selectedRow = e.getRow(); + const rowData = table.getTableModel().getRowData(selectedRow); + if ("entry" in rowData) { + this.__itemTapped(rowData.entry); + } + }, this); + table.addListener("cellDbltap", e => { + const selectedRow = e.getRow(); + const rowData = table.getTableModel().getRowData(selectedRow); + if ("entry" in rowData) { + this.__itemDblTapped(rowData.entry); + } + }, this); + } + } +}); diff --git a/services/static-webserver/client/source/class/osparc/file/FolderViewer.js b/services/static-webserver/client/source/class/osparc/file/FolderViewer.js index 26fb4433bf3..f326823c3b6 100644 --- a/services/static-webserver/client/source/class/osparc/file/FolderViewer.js +++ b/services/static-webserver/client/source/class/osparc/file/FolderViewer.js @@ -32,10 +32,9 @@ qx.Class.define("osparc.file.FolderViewer", { const folderUpBtn = this.getChildControl("folder-up"); folderUpBtn.addListener("execute", () => this.fireDataEvent("folderUp", this.getFolder()), this); this.getChildControl("folder-path"); - this.getChildControl("view-options-icons"); - this.getChildControl("view-options-list"); - this.getChildControl("icons-layout"); - this.getChildControl("table"); + const iconsButton = this.getChildControl("view-options-icons"); + const listButton = this.getChildControl("view-options-list"); + const folderContent = this.getChildControl("folder-content"); this.bind("folder", this.getChildControl("folder-up"), "enabled", { converter: folder => Boolean(folder && folder.getPathLabel && folder.getPathLabel().length > 1) @@ -44,6 +43,15 @@ qx.Class.define("osparc.file.FolderViewer", { this.bind("folder", this.getChildControl("folder-path"), "value", { converter: folder => folder ? folder.getPathLabel().join(" / ") : this.tr("Select folder") }); + + this.bind("folder", folderContent, "folder"); + + iconsButton.addListener("execute", () => folderContent.setMode("icons")); + listButton.addListener("execute", () => folderContent.setMode("list")); + + folderContent.addListener("selectionChanged", e => this.fireDataEvent("selectionChanged", e.getData())); + folderContent.addListener("itemSelected", e => this.fireDataEvent("itemSelected", e.getData())); + folderContent.addListener("requestDatasetFiles", e => this.fireDataEvent("requestDatasetFiles", e.getData())); }, properties: { @@ -52,16 +60,7 @@ qx.Class.define("osparc.file.FolderViewer", { init: null, nullable: true, event: "changeFolder", - apply: "__applyFolder" }, - - mode: { - check: ["list", "icons"], - init: "icons", - nullable: false, - event: "changeMode", - apply: "__reloadFolderContent" - } }, events: { @@ -71,33 +70,6 @@ qx.Class.define("osparc.file.FolderViewer", { "requestDatasetFiles": "qx.event.type.Data" }, - statics: { - getItemButton: function() { - const item = new qx.ui.form.ToggleButton().set({ - iconPosition: "top", - width: 100, - height: 80, - padding: 3 - }); - item.getChildControl("label").set({ - rich: true, - textAlign: "center", - maxWidth: 100, - maxHeight: 31 - }); - osparc.utils.Utils.setIdToWidget(item, "FolderViewerItem"); - return item; - }, - - T_POS: { - TYPE: 0, - NAME: 1, - DATE: 2, - SIZE: 3, - ID: 4 - } - }, - members: { _createChildControlImpl: function(id) { let control; @@ -135,9 +107,6 @@ qx.Class.define("osparc.file.FolderViewer", { control = new qx.ui.form.ToggleButton(null, "@MaterialIcons/apps/18"); const group = this.getChildControl("view-options-rgroup"); group.add(control); - control.addListener("execute", () => { - this.setMode("icons"); - }); const header = this.getChildControl("header"); header.addAt(control, 2); break; @@ -146,192 +115,19 @@ qx.Class.define("osparc.file.FolderViewer", { control = new qx.ui.form.ToggleButton(null, "@MaterialIcons/reorder/18"); const group = this.getChildControl("view-options-rgroup"); group.add(control); - control.addListener("execute", () => { - this.setMode("list"); - }); const header = this.getChildControl("header"); header.addAt(control, 3); break; } - case "content-stack": { - control = new qx.ui.container.Stack(); + case "folder-content": { + control = new osparc.file.FolderContent(); this._add(control, { flex: 1 }); break; } - case "table": { - const tableModel = new qx.ui.table.model.Simple(); - tableModel.setColumns([ - "", - this.tr("Name"), - this.tr("Date Modified"), - this.tr("Size"), - this.tr("Id") - ]); - control = new osparc.ui.table.Table(tableModel, { - // tableColumnModel: obj => new qx.ui.table.columnmodel.Resize(obj), - initiallyHiddenColumns: [this.self().T_POS.ID] - }); - control.getTableColumnModel().setDataCellRenderer(this.self().T_POS.TYPE, new qx.ui.table.cellrenderer.Image()); - control.setColumnWidth(this.self().T_POS.TYPE, 30); - control.setColumnWidth(this.self().T_POS.NAME, 360); - control.setColumnWidth(this.self().T_POS.DATE, 170); - control.setColumnWidth(this.self().T_POS.SIZE, 70); - this.bind("mode", control, "visibility", { - converter: mode => mode === "list" ? "visible" : "excluded" - }); - const scroll = new qx.ui.container.Scroll(); - scroll.add(control); - this.getChildControl("content-stack").add(scroll); - break; - } - case "icons-layout": { - control = new qx.ui.container.Composite(new qx.ui.layout.Flow(5, 5)); - osparc.utils.Utils.setIdToWidget(control, "FolderViewerIconsContent"); - this.bind("mode", control, "visibility", { - converter: mode => mode === "icons" ? "visible" : "excluded" - }); - const scroll = new qx.ui.container.Scroll(); - scroll.add(control); - this.getChildControl("content-stack").add(scroll); - break; - } } return control || this.base(arguments, id); }, - - __convertEntries: function(content) { - const items = []; - if (this.getMode() === "list") { - content.forEach(entry => { - const row = []; - row.push(entry.getIcon ? entry.getIcon() : this.__getIcon(entry)); - row.push(entry.getLabel()); - row.push(entry.getLastModified ? osparc.utils.Utils.formatDateAndTime(new Date(entry.getLastModified())) : ""); - row.push(entry.getSize ? osparc.utils.Utils.bytesToSize(entry.getSize()) : ""); - if (entry.getItemId) { - row.push(entry.getItemId()); - } - row.entry = entry; - items.push(row); - }); - } else if (this.getMode() === "icons") { - content.forEach(entry => { - let tt = entry.getLabel(); - if (entry.getSize) { - tt += "
" + osparc.utils.Utils.bytesToSize(entry.getSize()); - } - if (entry.getLastModified) { - tt += "
" + osparc.utils.Utils.formatDateAndTime(new Date(entry.getLastModified())); - } - const item = this.self().getItemButton().set({ - label: entry.getLabel(), - icon: entry.getIcon ? entry.getIcon() : this.__getIcon(entry), - toolTipText: tt - }); - const icon = item.getChildControl("icon", true); - if (icon.getSource() === "@FontAwesome5Solid/circle-notch/12") { - icon.setPadding(0); - icon.setMarginRight(4); - icon.getContentElement().addClass("rotate"); - } - - if (entry.getItemId) { - item.itemId = entry.getItemId(); - this.__attachListenersToItems(item, entry); - } - items.push(item); - }); - } - return items; - }, - - __getIcon: function(entry) { - return osparc.file.FilesTree.isDir(entry) ? "@MaterialIcons/folder" : "@MaterialIcons/insert_drive_file"; - }, - - __getEntries: function() { - if (this.getFolder()) { - const children = this.getFolder().getChildren().toArray(); - return this.__convertEntries(children); - } - return []; - }, - - __applyFolder: function(folder) { - if (folder) { - if (folder.getLoaded && !folder.getLoaded()) { - this.fireDataEvent("requestDatasetFiles", { - locationId: folder.getLocation(), - datasetId: folder.getPath() - }); - } - - folder.getChildren().addListener("change", () => { - this.__reloadFolderContent(); - }, this); - } - - this.__reloadFolderContent(); - }, - - __reloadFolderContent: function() { - const entries = this.__getEntries(); - if (this.getMode() === "list") { - const table = this.getChildControl("table"); - table.setData(entries); - this.__attachListenersTotable(table); - } else if (this.getMode() === "icons") { - const iconsLayout = this.getChildControl("icons-layout"); - iconsLayout.removeAll(); - const iconsGroup = new qx.ui.form.RadioGroup().set({ - allowEmptySelection: true - }); - entries.forEach(entry => { - iconsGroup.add(entry); - iconsLayout.add(entry); - }); - } - const stack = this.getChildControl("content-stack"); - stack.setSelection([stack.getSelectables()[this.getMode() === "icons" ? 0 : 1]]); - }, - - __itemTapped: function(item) { - this.fireDataEvent("selectionChanged", item); - }, - - __itemDblTapped: function(item) { - this.fireDataEvent("itemSelected", item); - if (osparc.file.FilesTree.isDir(item)) { - this.setFolder(item); - } - }, - - __attachListenersToItems: function(btn, entry) { - btn.addListener("tap", () => { - this.__itemTapped(entry); - }, this); - btn.addListener("dbltap", () => { - this.__itemDblTapped(entry); - }, this); - }, - - __attachListenersTotable: function(table) { - table.addListener("cellTap", e => { - const selectedRow = e.getRow(); - const rowData = table.getTableModel().getRowData(selectedRow); - if ("entry" in rowData) { - this.__itemTapped(rowData.entry); - } - }, this); - table.addListener("cellDbltap", e => { - const selectedRow = e.getRow(); - const rowData = table.getTableModel().getRowData(selectedRow); - if ("entry" in rowData) { - this.__itemDblTapped(rowData.entry); - } - }, this); - } } }); From 74c1fd8bd2d675c26cbd7b1a2424a78577f0c8bc Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Tue, 3 Dec 2024 15:08:03 +0100 Subject: [PATCH 02/11] multiselect propoerty --- .../source/class/osparc/file/FolderContent.js | 8 ++++++++ .../source/class/osparc/file/FolderViewer.js | 14 ++++++++++++-- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/file/FolderContent.js b/services/static-webserver/client/source/class/osparc/file/FolderContent.js index 4330672866f..5165795fb24 100644 --- a/services/static-webserver/client/source/class/osparc/file/FolderContent.js +++ b/services/static-webserver/client/source/class/osparc/file/FolderContent.js @@ -41,6 +41,14 @@ qx.Class.define("osparc.file.FolderContent", { event: "changeMode", apply: "__reloadFolderContent" }, + + multiSelect: { + check: "Boolean", + init: false, + nullable: false, + event: "changeMultiSelect", + apply: "__reloadFolderContent" + }, }, events: { diff --git a/services/static-webserver/client/source/class/osparc/file/FolderViewer.js b/services/static-webserver/client/source/class/osparc/file/FolderViewer.js index f326823c3b6..15f71fc61fb 100644 --- a/services/static-webserver/client/source/class/osparc/file/FolderViewer.js +++ b/services/static-webserver/client/source/class/osparc/file/FolderViewer.js @@ -32,6 +32,7 @@ qx.Class.define("osparc.file.FolderViewer", { const folderUpBtn = this.getChildControl("folder-up"); folderUpBtn.addListener("execute", () => this.fireDataEvent("folderUp", this.getFolder()), this); this.getChildControl("folder-path"); + const multiSelectButton = this.getChildControl("multi-select-button"); const iconsButton = this.getChildControl("view-options-icons"); const listButton = this.getChildControl("view-options-list"); const folderContent = this.getChildControl("folder-content"); @@ -46,6 +47,7 @@ qx.Class.define("osparc.file.FolderViewer", { this.bind("folder", folderContent, "folder"); + multiSelectButton.addListener("changeValue", e => folderContent.setMultiSelect(e.getData())); iconsButton.addListener("execute", () => folderContent.setMode("icons")); listButton.addListener("execute", () => folderContent.setMode("list")); @@ -100,6 +102,14 @@ qx.Class.define("osparc.file.FolderViewer", { }); break; } + case "multi-select-button": + control = new qx.ui.form.ToggleButton(this.tr("Multiselect")).set({ + value: false, + marginRight: 10, + }); + const header = this.getChildControl("header"); + header.addAt(control, 2); + break; case "view-options-rgroup": control = new qx.ui.form.RadioGroup(); break; @@ -108,7 +118,7 @@ qx.Class.define("osparc.file.FolderViewer", { const group = this.getChildControl("view-options-rgroup"); group.add(control); const header = this.getChildControl("header"); - header.addAt(control, 2); + header.addAt(control, 3); break; } case "view-options-list": { @@ -116,7 +126,7 @@ qx.Class.define("osparc.file.FolderViewer", { const group = this.getChildControl("view-options-rgroup"); group.add(control); const header = this.getChildControl("header"); - header.addAt(control, 3); + header.addAt(control, 4); break; } case "folder-content": { From 67ed884949c7c7c9ac7b0bbfb3fe11429d716e96 Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Tue, 3 Dec 2024 15:30:22 +0100 Subject: [PATCH 03/11] refactor --- .../source/class/osparc/file/FolderContent.js | 53 +++++++++++-------- 1 file changed, 32 insertions(+), 21 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/file/FolderContent.js b/services/static-webserver/client/source/class/osparc/file/FolderContent.js index 5165795fb24..71643ff9e43 100644 --- a/services/static-webserver/client/source/class/osparc/file/FolderContent.js +++ b/services/static-webserver/client/source/class/osparc/file/FolderContent.js @@ -130,33 +130,45 @@ qx.Class.define("osparc.file.FolderContent", { }, __convertEntries: function(content) { + const datas = []; + content.forEach(entry => { + const data = { + icon: entry.getIcon ? entry.getIcon() : this.__getIcon(entry), + label: entry.getLabel(), + lastModified: entry.getLastModified ? osparc.utils.Utils.formatDateAndTime(new Date(entry.getLastModified())) : "", + size: entry.getSize ? osparc.utils.Utils.bytesToSize(entry.getSize()) : "", + itemId: entry.getItemId ? entry.getItemId() : null, + entry: entry, + }; + datas.push(data); + }); const items = []; if (this.getMode() === "list") { - content.forEach(entry => { + datas.forEach(data => { const row = []; - row.push(entry.getIcon ? entry.getIcon() : this.__getIcon(entry)); - row.push(entry.getLabel()); - row.push(entry.getLastModified ? osparc.utils.Utils.formatDateAndTime(new Date(entry.getLastModified())) : ""); - row.push(entry.getSize ? osparc.utils.Utils.bytesToSize(entry.getSize()) : ""); - if (entry.getItemId) { - row.push(entry.getItemId()); + row.push(data["icon"]); + row.push(data["label"]); + row.push(data["lastModified"]); + row.push(data["size"]); + if (data["itemId"]) { + row.push(data["itemId"]); } - row.entry = entry; + row.entry = data["entry"]; items.push(row); }); } else if (this.getMode() === "icons") { - content.forEach(entry => { - let tt = entry.getLabel(); - if (entry.getSize) { - tt += "
" + osparc.utils.Utils.bytesToSize(entry.getSize()); + datas.forEach(data => { + let toolTip = data["label"]; + if (data["size"]) { + toolTip += "
" + data["size"]; } - if (entry.getLastModified) { - tt += "
" + osparc.utils.Utils.formatDateAndTime(new Date(entry.getLastModified())); + if (data["lastModified"]) { + toolTip += "
" + data["lastModified"]; } const item = this.self().getItemButton().set({ - label: entry.getLabel(), - icon: entry.getIcon ? entry.getIcon() : this.__getIcon(entry), - toolTipText: tt + label: data["label"], + icon: data["icon"], + toolTipText: toolTip }); const icon = item.getChildControl("icon", true); if (icon.getSource() === "@FontAwesome5Solid/circle-notch/12") { @@ -164,10 +176,9 @@ qx.Class.define("osparc.file.FolderContent", { icon.setMarginRight(4); icon.getContentElement().addClass("rotate"); } - - if (entry.getItemId) { - item.itemId = entry.getItemId(); - this.__attachListenersToItems(item, entry); + if (data["itemId"]) { + item.itemId = data["itemId"]; + this.__attachListenersToItems(item, data["entry"]); } items.push(item); }); From 7cc1727a67765005a6ef838cddf6a04f983541ea Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Tue, 3 Dec 2024 16:06:25 +0100 Subject: [PATCH 04/11] more compact icon --- .../client/source/class/osparc/file/FolderContent.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/file/FolderContent.js b/services/static-webserver/client/source/class/osparc/file/FolderContent.js index 71643ff9e43..6b2ca0f9ba5 100644 --- a/services/static-webserver/client/source/class/osparc/file/FolderContent.js +++ b/services/static-webserver/client/source/class/osparc/file/FolderContent.js @@ -63,13 +63,14 @@ qx.Class.define("osparc.file.FolderContent", { iconPosition: "top", width: 100, height: 80, - padding: 3 + padding: 2 }); item.getChildControl("label").set({ + font: "text-12", rich: true, textAlign: "center", maxWidth: 100, - maxHeight: 31 + maxHeight: 33 // two lines }); osparc.utils.Utils.setIdToWidget(item, "FolderViewerItem"); return item; From b5988fdc007a0b4d96877d1a8a4b80b2f34be032 Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Tue, 3 Dec 2024 16:26:45 +0100 Subject: [PATCH 05/11] aesthetics --- .../client/source/class/osparc/file/FileTreeItem.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/services/static-webserver/client/source/class/osparc/file/FileTreeItem.js b/services/static-webserver/client/source/class/osparc/file/FileTreeItem.js index 45fe07c10ce..5e7a4a02236 100644 --- a/services/static-webserver/client/source/class/osparc/file/FileTreeItem.js +++ b/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") + " " + From d12974492206a3ac536322fa5baee4e5cf8c7e8c Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Tue, 3 Dec 2024 16:40:00 +0100 Subject: [PATCH 06/11] [skip ci] allowMultiselection --- .../client/source/class/osparc/file/FilePicker.js | 3 ++- .../client/source/class/osparc/file/FolderViewer.js | 11 ++++++++--- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/file/FilePicker.js b/services/static-webserver/client/source/class/osparc/file/FilePicker.js index 67d67c8455a..0a04558952d 100644 --- a/services/static-webserver/client/source/class/osparc/file/FilePicker.js +++ b/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", () => { diff --git a/services/static-webserver/client/source/class/osparc/file/FolderViewer.js b/services/static-webserver/client/source/class/osparc/file/FolderViewer.js index 15f71fc61fb..218c3a90a49 100644 --- a/services/static-webserver/client/source/class/osparc/file/FolderViewer.js +++ b/services/static-webserver/client/source/class/osparc/file/FolderViewer.js @@ -22,7 +22,7 @@ qx.Class.define("osparc.file.FolderViewer", { extend: qx.ui.core.Widget, - construct: function() { + construct: function(allowMultiselection = true) { this.base(arguments); this._setLayout(new qx.ui.layout.VBox(10)); @@ -32,7 +32,10 @@ qx.Class.define("osparc.file.FolderViewer", { const folderUpBtn = this.getChildControl("folder-up"); folderUpBtn.addListener("execute", () => this.fireDataEvent("folderUp", this.getFolder()), this); this.getChildControl("folder-path"); - const multiSelectButton = this.getChildControl("multi-select-button"); + let multiSelectButton = null; + if (allowMultiselection) { + multiSelectButton = this.getChildControl("multi-select-button"); + } const iconsButton = this.getChildControl("view-options-icons"); const listButton = this.getChildControl("view-options-list"); const folderContent = this.getChildControl("folder-content"); @@ -47,7 +50,9 @@ qx.Class.define("osparc.file.FolderViewer", { this.bind("folder", folderContent, "folder"); - multiSelectButton.addListener("changeValue", e => folderContent.setMultiSelect(e.getData())); + if (allowMultiselection) { + multiSelectButton.addListener("changeValue", e => folderContent.setMultiSelect(e.getData())); + } iconsButton.addListener("execute", () => folderContent.setMode("icons")); listButton.addListener("execute", () => folderContent.setMode("list")); From a95fc6e0662066e7997d01ad2f1727dbab14186f Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Wed, 4 Dec 2024 11:58:09 +0100 Subject: [PATCH 07/11] minor --- .../client/source/class/osparc/file/FolderContent.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/static-webserver/client/source/class/osparc/file/FolderContent.js b/services/static-webserver/client/source/class/osparc/file/FolderContent.js index 6b2ca0f9ba5..e4bbde452ae 100644 --- a/services/static-webserver/client/source/class/osparc/file/FolderContent.js +++ b/services/static-webserver/client/source/class/osparc/file/FolderContent.js @@ -179,8 +179,8 @@ qx.Class.define("osparc.file.FolderContent", { } if (data["itemId"]) { item.itemId = data["itemId"]; - this.__attachListenersToItems(item, data["entry"]); } + this.__attachListenersToItems(item, data["entry"]); items.push(item); }); } From 82c013d369774f91c312395e55e241a280fd7710 Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Wed, 4 Dec 2024 12:36:50 +0100 Subject: [PATCH 08/11] multiSelectionChanged --- .../client/source/class/osparc/file/FolderContent.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/file/FolderContent.js b/services/static-webserver/client/source/class/osparc/file/FolderContent.js index e4bbde452ae..7424f89ed45 100644 --- a/services/static-webserver/client/source/class/osparc/file/FolderContent.js +++ b/services/static-webserver/client/source/class/osparc/file/FolderContent.js @@ -53,6 +53,7 @@ qx.Class.define("osparc.file.FolderContent", { events: { "selectionChanged": "qx.event.type.Data", // tap + "multiSelectionChanged": "qx.event.type.Data", // tap "itemSelected": "qx.event.type.Data", // dbltap "requestDatasetFiles": "qx.event.type.Data", }, @@ -229,7 +230,9 @@ qx.Class.define("osparc.file.FolderContent", { allowEmptySelection: true }); entries.forEach(entry => { - iconsGroup.add(entry); + if (!this.isMultiSelect()) { + iconsGroup.add(entry); + } iconsLayout.add(entry); }); } @@ -237,7 +240,11 @@ qx.Class.define("osparc.file.FolderContent", { }, __itemTapped: function(item) { - this.fireDataEvent("selectionChanged", item); + if (this.isMultiSelect()) { + this.fireDataEvent("multiSelectionChanged", item); + } else { + this.fireDataEvent("selectionChanged", item); + } }, __itemDblTapped: function(item) { From 8e28e68edf2ffe8ac42f96baf1a8817ea08ed5cf Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Wed, 4 Dec 2024 13:09:54 +0100 Subject: [PATCH 09/11] minor --- .../source/class/osparc/desktop/preferences/pages/GeneralPage.js | 1 + 1 file changed, 1 insertion(+) diff --git a/services/static-webserver/client/source/class/osparc/desktop/preferences/pages/GeneralPage.js b/services/static-webserver/client/source/class/osparc/desktop/preferences/pages/GeneralPage.js index dffafeabc72..1c218487d31 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/preferences/pages/GeneralPage.js +++ b/services/static-webserver/client/source/class/osparc/desktop/preferences/pages/GeneralPage.js @@ -147,6 +147,7 @@ qx.Class.define("osparc.desktop.preferences.pages.GeneralPage", { allowGrowX: false, enabled: true }); + const preferences = osparc.Preferences.getInstance(); preferences.bind("lowDiskSpaceThreshold", diskUsageSpinner, "value"); diskUsageSpinner.addListener("changeValue", e => osparc.Preferences.patchPreferenceField("lowDiskSpaceThreshold", diskUsageSpinner, e.getData())); From 7104733c7d563e0b022586779793fa2c7ec53a3b Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Wed, 4 Dec 2024 13:19:52 +0100 Subject: [PATCH 10/11] tag accessRights --- .../source/class/osparc/data/Resources.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/services/static-webserver/client/source/class/osparc/data/Resources.js b/services/static-webserver/client/source/class/osparc/data/Resources.js index 1332df084a9..830aff303fc 100644 --- a/services/static-webserver/client/source/class/osparc/data/Resources.js +++ b/services/static-webserver/client/source/class/osparc/data/Resources.js @@ -1237,7 +1237,23 @@ qx.Class.define("osparc.data.Resources", { delete: { method: "DELETE", url: statics.API + "/tags/{tagId}" - } + }, + getAccessRights: { + method: "GET", + url: statics.API + "/tags/{tagId}/groups" + }, + putAccessRights: { + method: "PUT", + url: statics.API + "/tags/{tagId}/groups/{groupId}" + }, + postAccessRights: { + method: "POST", + url: statics.API + "/tags/{tagId}/groups/{groupId}" + }, + deleteAccessRights: { + method: "DELETE", + url: statics.API + "/tags/{tagId}/groups/{groupId}" + }, } } }; From d86c0611c42a95bfe2812ce4356a61d053b56126 Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Wed, 4 Dec 2024 13:21:41 +0100 Subject: [PATCH 11/11] fetchAccessRights --- .../client/source/class/osparc/store/Tags.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/store/Tags.js b/services/static-webserver/client/source/class/osparc/store/Tags.js index c07e9d8d8ae..748300f0cb9 100644 --- a/services/static-webserver/client/source/class/osparc/store/Tags.js +++ b/services/static-webserver/client/source/class/osparc/store/Tags.js @@ -45,6 +45,7 @@ qx.Class.define("osparc.store.Tags", { tagsData.forEach(tagData => { const tag = this.__addToCache(tagData); tags.push(tag); + this.fetchAccessRights(tag); }); return tags; }); @@ -54,6 +55,10 @@ qx.Class.define("osparc.store.Tags", { return this.tagsCached; }, + getTag: function(tagId = null) { + return this.tagsCached.find(f => f.getTagId() === tagId); + }, + postTag: function(newTagData) { const params = { data: newTagData @@ -97,8 +102,15 @@ qx.Class.define("osparc.store.Tags", { .catch(console.error); }, - getTag: function(tagId = null) { - return this.tagsCached.find(f => f.getTagId() === tagId); + fetchAccessRights: function(tag) { + const params = { + url: { + "tagId": tag.getTagId() + } + }; + osparc.data.Resources.fetch("tags", "getAccessRights", params) + .then(accessRights => tag.setAccessRights(accessRights)) + .catch(err => console.error(err)); }, __addToCache: function(tagData) {