gCubeSystem
/
web-components
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

Beta3: fixed multiple requestes for rapid click in folders with pending requests, fixed double rendering of already received data, added attribute to enable the download of a file selected in folder browser (disabled by default)

This commit is contained in:
Mauro Mugnaini 2023-08-09 18:25:25 +02:00
parent fbd44d3caf
commit b939da256c
2 changed files with 91 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
storage/d4s-storage.js
View File

@ -111,9 +111,11 @@ class D4SStorageTree extends D4SStorageHtmlElement {
#boot = null #boot = null
#baseurl = 'https://api.d4science.org/workspace' #baseurl = 'https://api.d4science.org/workspace'
#filedownloadenabled = false;
#d4sworkspace = null; #d4sworkspace = null;
#foldersMap = {}; #foldersMap = {};
#currentid = null; #currentid = null;
#pendingIdRequests = new Set();
constructor() { constructor() {
super() super()
@ -124,6 +126,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
get boot() { get boot() {
return this.#boot; return this.#boot;
} }
get baseUrl() { get baseUrl() {
return this.#baseurl; return this.#baseurl;
} }
@ -134,6 +137,14 @@ class D4SStorageTree extends D4SStorageHtmlElement {
this.#d4sworkspace = new D4SWorkspace(this.#baseurl, this.#boot); this.#d4sworkspace = new D4SWorkspace(this.#baseurl, this.#boot);
} }
set fileDownloadEnabled(value) {
this.#filedownloadenabled = value;
}
get fileDownloadEnabled() {
return this.#filedownloadenabled;
}
get d4sWorkspace() { get d4sWorkspace() {
return this.#d4sworkspace; return this.#d4sworkspace;
} }
@ -148,6 +159,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
setFolderItems(id, items, fireEvent = true) { setFolderItems(id, items, fireEvent = true) {
this.#foldersMap[id] = items; this.#foldersMap[id] = items;
this.#pendingIdRequests.delete(id);
if (fireEvent) { if (fireEvent) {
this.dispatchEvent( this.dispatchEvent(
new CustomEvent( new CustomEvent(
@ -166,10 +178,29 @@ class D4SStorageTree extends D4SStorageHtmlElement {
this.getFolderItems(this.currentId); this.getFolderItems(this.currentId);
} }
static get observedAttributes() {
return ["base-url", "file-download-enabled"];
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
switch (name) {
case "base-url":
this.baseUrl = newValue;
break;
case "file-download-enabled":
this.fileDownloadEnabled = (newValue.toLowerCase() === 'true');
break;
default:
console.warn("Unexpected attribute changed: " + name);
}
}
}
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
var div = document.createElement('div') const div = document.createElement('div')
div.innerHTML = /*css*/` div.innerHTML = /*css*/`
<style> <style>
.selected > *:first-child { .selected > *:first-child {
@ -186,16 +217,23 @@ class D4SStorageTree extends D4SStorageHtmlElement {
li { li {
cursor: pointer; cursor: pointer;
} }
.dragover {
background-color: purple;
}
</style>`; </style>`;
this.shadowRoot.appendChild(div); this.shadowRoot.appendChild(div);
const workspaceDIV = document.createElement('div');
const vreFolderDIV = document.createElement('div');
div.appendChild(workspaceDIV);
div.appendChild(vreFolderDIV);
this.d4sWorkspace.getWorkspace().then(data => { this.d4sWorkspace.getWorkspace().then(data => {
this.parseItemsData(div, data); this.parseItemsData(workspaceDIV, data);
}).catch(err => console.error(err)); }).catch(err => console.error(err));
this.d4sWorkspace.getVREFolder().then(data => { this.d4sWorkspace.getVREFolder().then(data => {
this.parseItemsData(div, data); this.parseItemsData(vreFolderDIV, data);
}).catch(err => console.error(err)) }).catch(err => console.error(err))
this.addEventListener(D4SStorageTree.folder_data_event_name, this.folderDataEventHandler); this.addEventListener(D4SStorageTree.folder_data_event_name, this.folderDataEventHandler);
@ -222,9 +260,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
} }
folderDataEventHandler(event) { folderDataEventHandler(event) {
if (event.detail.id === this.currentId) { this.fillWithContent(this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${event.detail.id}']`))
this.fillWithContent(this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${this.currentId}']`))
}
} }
toolbarEventHandler(event) { toolbarEventHandler(event) {
@ -281,8 +317,12 @@ class D4SStorageTree extends D4SStorageHtmlElement {
folderEventHandler(event) { folderEventHandler(event) {
switch (event.detail.itemtype) { switch (event.detail.itemtype) {
case D4SStorageFolder.file_selected_detail_itemtype: case D4SStorageFolder.file_selected_detail_itemtype:
console.info("Download of file: " + event.detail.name + " [" + event.detail.id + "]"); if (this.fileDownloadEnabled) {
this.d4sWorkspace.download(event.detail.id, event.detail.name).catch(err => {alert(err)}); console.info("Download of file: " + event.detail.name + " [" + event.detail.id + "]");
this.d4sWorkspace.download(event.detail.id, event.detail.name).catch(err => {alert(err)});
} else {
console.log("File download is disabled");
}
break; break;
case D4SStorageFolder.folder_selected_detail_itemtype: case D4SStorageFolder.folder_selected_detail_itemtype:
this.select(event.detail.id); this.select(event.detail.id);
@ -295,7 +335,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
select(id) { select(id) {
this.currentId = id; this.currentId = id;
var li = this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${id}']`); const li = this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${id}']`);
this.displayPath(li); this.displayPath(li);
if (li.classList.contains(this.#selectedClass)) { if (li.classList.contains(this.#selectedClass)) {
@ -334,16 +374,19 @@ class D4SStorageTree extends D4SStorageHtmlElement {
if (contents) { if (contents) {
this.parseItemsData(element, contents); this.parseItemsData(element, contents);
} else { } else {
this.d4sWorkspace.listFolder(id).then(data => { if (!this.#pendingIdRequests.has(id)) {
this.setFolderItems(id, data); this.#pendingIdRequests.add(id);
}).catch(err => console.error(err)); this.d4sWorkspace.listFolder(id).then(data => {
this.setFolderItems(id, data);
}).catch(err => console.error(err));
}
} }
} }
parseItemsData(parentElement, data) { parseItemsData(parentElement, data) {
parentElement.classList.add(this.#loadedClass); parentElement.classList.add(this.#loadedClass);
const parentId = parentElement.getAttribute(D4SStorageTree.dataid_attr); const parentId = parentElement.getAttribute(D4SStorageTree.dataid_attr);
var ul = document.createElement('ul'); const ul = document.createElement('ul');
ul.classList.add('nested'); ul.classList.add('nested');
if (!parentId) { if (!parentId) {
ul.classList.add('root'); ul.classList.add('root');
@ -367,7 +410,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
if (parentId) { if (parentId) {
li.setAttribute(D4SStorageTree.parentid_attr, parentId); li.setAttribute(D4SStorageTree.parentid_attr, parentId);
} }
var child = document.createElement('span'); const child = document.createElement('span');
child.innerHTML = /*html*/`<span class="px-2"><img src="${this.srcBaseURL}/img/folder.svg"></img></span>` + label; child.innerHTML = /*html*/`<span class="px-2"><img src="${this.srcBaseURL}/img/folder.svg"></img></span>` + label;
li.appendChild(child) li.appendChild(child)
@ -375,11 +418,38 @@ class D4SStorageTree extends D4SStorageHtmlElement {
ev.stopPropagation(); ev.stopPropagation();
this.select(ev.currentTarget.getAttribute(D4SStorageTree.dataid_attr)); this.select(ev.currentTarget.getAttribute(D4SStorageTree.dataid_attr));
}); });
// li.addEventListener("dragenter", dee =>{
// dee.stopPropagation();
// dee.preventDefault();
// if (li == dee.target) {
// dee.target.classList.add("dragover");
// }
// }, false);
// li.addEventListener("dragleave", dle =>{
// dle.stopPropagation();
// dle.preventDefault();
// if (li == dle.target) {
// dle.target.classList.remove("dragover");
// }
// }, false);
// li.addEventListener("dragover", doe => {
// doe.stopPropagation();
// doe.preventDefault();
// }, false);
// li.addEventListener("drop", de => {
// de.stopPropagation();
// de.preventDefault();
// const dt = de.dataTransfer;
// const files = dt.files;
// console.log(files);
// }, false);
return li; return li;
} }
displayPath(li) { displayPath(li) {
var curr = li let curr = li
while (curr.parentElement != null) { while (curr.parentElement != null) {
if (curr.parentElement.tagName == 'UL') { if (curr.parentElement.tagName == 'UL') {
curr.parentElement.style.display = 'block' curr.parentElement.style.display = 'block'
@ -395,22 +465,6 @@ class D4SStorageTree extends D4SStorageHtmlElement {
} }
} }
static get observedAttributes() {
return ["base-url"];
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
switch (name) {
case "base-url":
this.baseUrl = newValue
break
default:
console.warn("Unexpected attribute changed: " + name);
}
}
}
refreshFolder(id) { refreshFolder(id) {
const folder = this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${id}']`); const folder = this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${id}']`);
console.log("Refreshing folder: " + folder.getAttribute(D4SStorageTree.dataname_attr)); console.log("Refreshing folder: " + folder.getAttribute(D4SStorageTree.dataname_attr));
@ -997,7 +1051,8 @@ window.customElements.define('d4s-storage-tool', D4SStorageToolbar);
/** /**
* Builds storagehub VRE folder or Workspace root tree, linked to toolbar and foldr list by events * Builds storagehub VRE folder or Workspace root tree, linked to toolbar and foldr list by events
* <d4s-storage-tree * <d4s-storage-tree
* /@base-url: the base endpoint url [defaults to: https://api.d4science.org/workspace] * /@base-url: the base endpoint url string [defaults to: https://api.d4science.org/workspace]
* /@file-download-enabled: true/false to enable/disable the file download on d4s-storage-tool click event (false by default)
*/ */
window.customElements.define('d4s-storage-tree', D4SStorageTree); window.customElements.define('d4s-storage-tree', D4SStorageTree);
/** /**

4
storage/index.html
View File

@ -18,7 +18,9 @@
<div class="col-3 border"> <div class="col-3 border">
<div class="row"> <div class="row">
<d4s-storage-tool></d4s-storage-tool> <d4s-storage-tool></d4s-storage-tool>
<d4s-storage-tree base-url="https://workspace-repository.dev.d4science.org/storagehub/workspace"></d4s-storage-tree> <d4s-storage-tree
base-url="https://workspace-repository.dev.d4science.org/storagehub/workspace"
file-download-enabled="true" />
</div> </div>
</div> </div>
<div class="col w-100 border overflow-auto mh-100"> <div class="col w-100 border overflow-auto mh-100">