optionally show files in tree

storage/d4s-storage.js

@@ -112,6 +112,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
   #boot = null
   #baseurl = 'https://api.d4science.org/workspace'
   #filedownloadenabled = false;
+  #showfiles = true;
   #d4sworkspace = null;
   #foldersMap = {};
   #currentid = null;
@@ -130,6 +131,14 @@ class D4SStorageTree extends D4SStorageHtmlElement {
   get baseUrl() {
     return this.#baseurl;
   }
+  
+  get showFiles() {
+    return this.#showfiles;
+  }
+  
+  set showFiles(value){
+    this.#showfiles = value
+  }
 
   set baseUrl(url) {
     this.#baseurl = url;
@@ -179,7 +188,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
   }
 
   static get observedAttributes() {
-    return ["base-url", "file-download-enabled"];
+    return ["base-url", "file-download-enabled", "show-files"];
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -191,6 +200,9 @@ class D4SStorageTree extends D4SStorageHtmlElement {
         case "file-download-enabled":
           this.fileDownloadEnabled = (newValue.toLowerCase() === 'true');
           break;
+        case "show-files":
+          this.showFiles = (newValue.toLowerCase() === 'true');
+          break;
         default:
           console.warn("Unexpected attribute changed: " + name);
       }
@@ -393,17 +405,17 @@ class D4SStorageTree extends D4SStorageHtmlElement {
     }
     if (Array.isArray(data)) {
       data
-      .filter(item => item['@class'].includes('FolderItem'))
+      .filter(item => this.showFiles || item['@class'].includes('FolderItem'))
       .forEach(item => {
-        ul.appendChild(this.createListItem(item.name, item.id, parentId));
+        ul.appendChild(this.createListItem(item.name, item.id, item['@class'], parentId));
       })
     } else {
-      ul.appendChild(this.createListItem(data.displayName ? data.displayName : data.name, data.id, parentId));
+      ul.appendChild(this.createListItem(data.displayName ? data.displayName : data.name, data.id, data['@class'], parentId));
     }
     parentElement.appendChild(ul);
   }
 
-  createListItem(label, id, parentId) {
+  createListItem(label, id, type, parentId) {
     const li = document.createElement('li');
     li.setAttribute(D4SStorageTree.dataname_attr, label);
     li.setAttribute(D4SStorageTree.dataid_attr, id);
@@ -411,7 +423,8 @@ class D4SStorageTree extends D4SStorageHtmlElement {
       li.setAttribute(D4SStorageTree.parentid_attr, parentId);
     }
     const child = document.createElement('span');
-    child.innerHTML = /*html*/`<span class="px-2"><img src="${this.srcBaseURL}/img/folder.svg"></img></span>` + label;
+    const icon = type.includes('FolderItem') ? "folder.svg" : "file-earmark.svg"
+    child.innerHTML = /*html*/`<span class="px-2"><img src="${this.srcBaseURL}/img/${icon}"></img></span>` + label;
     li.appendChild(child)
 
     li.addEventListener('click', (ev) => {

storage/index.html

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