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:
parent
fbd44d3caf
commit
b939da256c
|
|
@ -111,9 +111,11 @@ class D4SStorageTree extends D4SStorageHtmlElement {
|
|||
|
||||
#boot = null
|
||||
#baseurl = 'https://api.d4science.org/workspace'
|
||||
#filedownloadenabled = false;
|
||||
#d4sworkspace = null;
|
||||
#foldersMap = {};
|
||||
#currentid = null;
|
||||
#pendingIdRequests = new Set();
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
|
|
@ -124,6 +126,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
|
|||
get boot() {
|
||||
return this.#boot;
|
||||
}
|
||||
|
||||
get baseUrl() {
|
||||
return this.#baseurl;
|
||||
}
|
||||
|
|
@ -134,6 +137,14 @@ class D4SStorageTree extends D4SStorageHtmlElement {
|
|||
this.#d4sworkspace = new D4SWorkspace(this.#baseurl, this.#boot);
|
||||
}
|
||||
|
||||
set fileDownloadEnabled(value) {
|
||||
this.#filedownloadenabled = value;
|
||||
}
|
||||
|
||||
get fileDownloadEnabled() {
|
||||
return this.#filedownloadenabled;
|
||||
}
|
||||
|
||||
get d4sWorkspace() {
|
||||
return this.#d4sworkspace;
|
||||
}
|
||||
|
|
@ -148,6 +159,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
|
|||
|
||||
setFolderItems(id, items, fireEvent = true) {
|
||||
this.#foldersMap[id] = items;
|
||||
this.#pendingIdRequests.delete(id);
|
||||
if (fireEvent) {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent(
|
||||
|
|
@ -166,10 +178,29 @@ class D4SStorageTree extends D4SStorageHtmlElement {
|
|||
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() {
|
||||
super.connectedCallback();
|
||||
|
||||
var div = document.createElement('div')
|
||||
const div = document.createElement('div')
|
||||
div.innerHTML = /*css*/`
|
||||
<style>
|
||||
.selected > *:first-child {
|
||||
|
|
@ -186,16 +217,23 @@ class D4SStorageTree extends D4SStorageHtmlElement {
|
|||
li {
|
||||
cursor: pointer;
|
||||
}
|
||||
.dragover {
|
||||
background-color: purple;
|
||||
}
|
||||
</style>`;
|
||||
|
||||
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.parseItemsData(div, data);
|
||||
this.parseItemsData(workspaceDIV, data);
|
||||
}).catch(err => console.error(err));
|
||||
|
||||
this.d4sWorkspace.getVREFolder().then(data => {
|
||||
this.parseItemsData(div, data);
|
||||
this.parseItemsData(vreFolderDIV, data);
|
||||
}).catch(err => console.error(err))
|
||||
|
||||
this.addEventListener(D4SStorageTree.folder_data_event_name, this.folderDataEventHandler);
|
||||
|
|
@ -222,9 +260,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
|
|||
}
|
||||
|
||||
folderDataEventHandler(event) {
|
||||
if (event.detail.id === this.currentId) {
|
||||
this.fillWithContent(this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${this.currentId}']`))
|
||||
}
|
||||
this.fillWithContent(this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${event.detail.id}']`))
|
||||
}
|
||||
|
||||
toolbarEventHandler(event) {
|
||||
|
|
@ -281,8 +317,12 @@ class D4SStorageTree extends D4SStorageHtmlElement {
|
|||
folderEventHandler(event) {
|
||||
switch (event.detail.itemtype) {
|
||||
case D4SStorageFolder.file_selected_detail_itemtype:
|
||||
console.info("Download of file: " + event.detail.name + " [" + event.detail.id + "]");
|
||||
this.d4sWorkspace.download(event.detail.id, event.detail.name).catch(err => {alert(err)});
|
||||
if (this.fileDownloadEnabled) {
|
||||
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;
|
||||
case D4SStorageFolder.folder_selected_detail_itemtype:
|
||||
this.select(event.detail.id);
|
||||
|
|
@ -295,7 +335,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
|
|||
|
||||
select(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);
|
||||
|
||||
if (li.classList.contains(this.#selectedClass)) {
|
||||
|
|
@ -334,16 +374,19 @@ class D4SStorageTree extends D4SStorageHtmlElement {
|
|||
if (contents) {
|
||||
this.parseItemsData(element, contents);
|
||||
} else {
|
||||
this.d4sWorkspace.listFolder(id).then(data => {
|
||||
this.setFolderItems(id, data);
|
||||
}).catch(err => console.error(err));
|
||||
if (!this.#pendingIdRequests.has(id)) {
|
||||
this.#pendingIdRequests.add(id);
|
||||
this.d4sWorkspace.listFolder(id).then(data => {
|
||||
this.setFolderItems(id, data);
|
||||
}).catch(err => console.error(err));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
parseItemsData(parentElement, data) {
|
||||
parentElement.classList.add(this.#loadedClass);
|
||||
const parentId = parentElement.getAttribute(D4SStorageTree.dataid_attr);
|
||||
var ul = document.createElement('ul');
|
||||
const ul = document.createElement('ul');
|
||||
ul.classList.add('nested');
|
||||
if (!parentId) {
|
||||
ul.classList.add('root');
|
||||
|
|
@ -367,7 +410,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
|
|||
if (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;
|
||||
li.appendChild(child)
|
||||
|
||||
|
|
@ -375,11 +418,38 @@ class D4SStorageTree extends D4SStorageHtmlElement {
|
|||
ev.stopPropagation();
|
||||
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;
|
||||
}
|
||||
|
||||
displayPath(li) {
|
||||
var curr = li
|
||||
let curr = li
|
||||
while (curr.parentElement != null) {
|
||||
if (curr.parentElement.tagName == 'UL') {
|
||||
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) {
|
||||
const folder = this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${id}']`);
|
||||
console.log("Refreshing folder: " + folder.getAttribute(D4SStorageTree.dataname_attr));
|
||||
|
|
@ -480,7 +534,7 @@ class D4SStorageFolder extends D4SStorageHtmlElement {
|
|||
static file_selected_detail_itemtype = "file_selected";
|
||||
|
||||
#selectedbgcolor = 'lightgray'
|
||||
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
}
|
||||
|
|
@ -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
|
||||
* <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);
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -18,7 +18,9 @@
|
|||
<div class="col-3 border">
|
||||
<div class="row">
|
||||
<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 class="col w-100 border overflow-auto mh-100">
|
||||
|
|
|
|||
Loading…
Reference in New Issue