From b939da256c469a8d69eed646548d8605d23fb02d Mon Sep 17 00:00:00 2001
From: Mauro Mugnaini <mauro.mugnaini@nubisware.com>
Date: Wed, 9 Aug 2023 18:25:25 +0200
Subject: [PATCH] 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)

---
 storage/d4s-storage.js | 121 ++++++++++++++++++++++++++++++-----------
 storage/index.html     |   4 +-
 2 files changed, 91 insertions(+), 34 deletions(-)

diff --git a/storage/d4s-storage.js b/storage/d4s-storage.js
index a384523..46e6369 100644
--- a/storage/d4s-storage.js
+++ b/storage/d4s-storage.js
@@ -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);
 /**
diff --git a/storage/index.html b/storage/index.html
index e048882..ef5348e 100644
--- a/storage/index.html
+++ b/storage/index.html
@@ -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">