From cc752abe409b1ef75db3c1a07e40aafa37f2a68b Mon Sep 17 00:00:00 2001
From: dcore94 <m.lettere@gmail.com>
Date: Wed, 17 Apr 2024 14:52:36 +0200
Subject: [PATCH] Added select button for storage tree, added icons for
 well-known file types, corrected bug with direct input to ws link input field

---
 ccp/index.html                  |  6 ++-
 ccp/js/inputwidgetcontroller.js | 45 ++++++++++++++++----
 storage/d4s-storage.js          | 74 +++++++++++++++++++++++++++------
 3 files changed, 102 insertions(+), 23 deletions(-)
diff --git a/ccp/index.html b/ccp/index.html
index 9beac90..563c11e 100644
--- a/ccp/index.html
+++ b/ccp/index.html
@@ -12,16 +12,18 @@
         <link href="css/common.css" rel="stylesheet">
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
         <script src="https://cdn.cloud-dev.d4science.org/common/js/bss-min-1.2.6.js"></script>
-        <script src="https://cdn.cloud-dev.d4science.org/storage/d4s-storage.js"></script>
+        <script src="../storage/d4s-storage.js"></script>
     </head>
 
     <body class="m-4">
         <d4s-boot-2 clientid="https://next.dev.d4science.org" context="%2Fgcube%2Fdevsec%2FCCP" gateway="next.dev.d4science.org" redirect-url="http://localhost:8080/ccp/index.html" url="https://accounts.dev.d4science.org/auth"> <script src="https://cdn.dev.d4science.org/boot/d4s-boot.js"></script> </d4s-boot-2>
+        <span class="badge badge-info material-icons">&#xe415;</span>
         <div class="row">
             <div class="col">
-                <d4s-ccp-methodlist serviceurl="https://ccp.cloud-dev.d4science.org"></d4s-ccp-methodlist>
+                <d4s-ccp-methodlist serviceurl="https://ccp.cloud-dev.d4science.org" allow-edit="true"></d4s-ccp-methodlist>
             </div>
             <div class="col">
+                <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
                 <d4s-ccp-methodeditor serviceurl="https://ccp.cloud-dev.d4science.org"></d4s-ccp-methodeditor>
             </div>
             <div class="col">
diff --git a/ccp/js/inputwidgetcontroller.js b/ccp/js/inputwidgetcontroller.js
index e5c599f..c858bff 100644
--- a/ccp/js/inputwidgetcontroller.js
+++ b/ccp/js/inputwidgetcontroller.js
@@ -289,7 +289,7 @@ class CCPBaseInputWidgetController extends HTMLElement {
           <div name="content">
           </div>
         </label>
-     </div>        
+     </div>
     `
 
     this.renderPlusMinus()
@@ -594,9 +594,12 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController {
           <path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640H447l-80-80H160v480l96-320h684L837-217q-8 26-29.5 41.5T760-160H160Zm84-80h516l72-240H316l-72 240Zm0 0 72-240-72 240Zm-84-400v-80 80Z"/>
       </svg>
       <div name="ws" class="d-none position-absolute shadow border border-primary bg-light p-2" style="left: 100%;z-index:1000; line-height:1.5rem;overflow:hidden;padding:5px;">
-        <div class="d-flex justify-content-between" style="border-bottom: solid 1px gray;">
-          <h5 class="text-secondary">Access your workspace</h5>
-          <span class="btn text-danger p-0" style="font-weight:bold" name="closebtn">x</span>
+        <div class="mb-1" style="border-bottom: solid 1px gray;">
+          <div class="d-flex justify-content-between m-0">
+            <h5 class="text-secondary m-0">Access your workspace</h5>
+            <span class="btn text-danger p-0" style="font-weight:bold" name="closebtn">x</span>
+          </div>
+          <small class="text-muted m-0">Select an item or drag and drop it to a proper input</small>
         </div>
         <div style="min-width:350px; max-width:500px;overflow-x:hidden;text-wrap:nowrap;text-overflow: ellipsis;min-height:5rem; max-height:10rem;">
           <d4s-storage-tree 
@@ -605,10 +608,12 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController {
             show-files="true"
             allow-drag="true"/>
         </div>
+        <div class="d-flex justify-content-end mt-1 pt-1" style="border-top: solid 1px gray;">
+          <button class="btn btn-primary" name="selectbtn">SELECT</span>
+        </div>
       </div>
       <div class="modal fade" style="background-color:rgba(0,0,0,0.3)" name="publicorprotected" tabindex="-1" role="dialog">
-        <div class="modal-dialog" role=    this.#publicorprivate = 
-        "document">
+        <div class="modal-dialog" role="document">
           <div class="modal-content shadow-lg border-primary">
             <div class="modal-body">
               Choose whether you want to use the public link or the protected link (requires authentication and authorization).
@@ -616,6 +621,7 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController {
             <div class="modal-footer">
               <button name="public" type="button" class="btn btn-info">Public link</button>
               <button name="protected" type="button" class="btn btn-primary">Protected link</button>
+              <button name="cancel" type="button" class="btn btn-danger">Cancel</button>
             </div>
           </div>
         </div>
@@ -637,12 +643,28 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController {
           this.#publiclink = this.#protectedlink = this.#target =  this.#index = null
           const newev = new Event("input", { bubbles : true})
           this.dispatchEvent(newev)
-        } 
-        else return;
+        }else{
+          this.#publicorprotected_dialog.style.display = "none"
+          this.#publicorprotected_dialog.classList.remove("show")
+          this.#publiclink = this.#protectedlink = this.#target =  this.#index = null
+        }
       }
     })
 
     const ws = this.rootdoc.querySelector("div[name=ws]")
+    const st = ws.querySelector("d4s-storage-tree")
+    this.addEventListener("click", ev=>{
+      ev.stopPropagation()
+      ev.preventDefault()
+      if (ev.target.getAttribute("name") == "selectbtn") {
+        this.#publicorprotected_dialog.style.display = "block"
+        this.#publicorprotected_dialog.classList.add("show")
+        this.#target = this.querySelector("input")
+        this.#index = 0
+        this.#publiclink = st.d4sWorkspace.getPublicLink(st.currentId)
+        this.#protectedlink = st.d4sWorkspace.getDownloadLink(st.currentId)
+      }
+    })
     this.rootdoc.querySelector("svg[name=trigger]").addEventListener("click", ev => {
       ws.classList.toggle("d-none")
       ev.preventDefault()
@@ -671,6 +693,13 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController {
       }
     })
 
+    this.addEventListener("input", ev => {
+      ev.stopPropagation()
+      if (ev.target.getAttribute("name") == this.name && ev.target.getAttribute("data-index") != null) {
+        this.value[Number(ev.target.getAttribute("data-index"))] = ev.target.value
+      }
+    })
+
     document.addEventListener("keydown", ev => {
       if (ev.code == 'Escape') ws.classList.add("d-none");
     })
diff --git a/storage/d4s-storage.js b/storage/d4s-storage.js
index 435090a..9f30865 100644
--- a/storage/d4s-storage.js
+++ b/storage/d4s-storage.js
@@ -16,10 +16,7 @@ class D4SStorageHtmlElement extends HTMLElement {
   }
 
   connectedCallback() {
-    let linkElem = document.createElement('link');
-    linkElem.setAttribute('rel', 'stylesheet');
-    linkElem.setAttribute('href', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css');
-    this.shadowRoot.appendChild(linkElem);
+    
   }
 
   get srcBaseURL() {
@@ -98,7 +95,7 @@ class D4SStorageToolbar extends D4SStorageHtmlElement {
 
 class D4SStorageTree extends D4SStorageHtmlElement {
 
-  static tree_event_name = "d4s-toolbar";
+  static tree_event_name = "d4s-tree";
   static folder_data_event_name = "d4s-folder-data";
 
   static dataid_attr = 'data-id';
@@ -226,8 +223,10 @@ class D4SStorageTree extends D4SStorageHtmlElement {
 
     const div = document.createElement('div')
     div.innerHTML = /*css*/`
+      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
       <style>
-        .selected > span {
+        .selected > .li-title {
           background-color: ${this.#selectedbgcolor};
         }
         ul.root {
@@ -238,6 +237,12 @@ class D4SStorageTree extends D4SStorageHtmlElement {
           margin-bottom: 0;
           padding-left: 0.6em;
         }
+        li{
+          color: #444444;
+        }
+        li:hover{
+          color: #555555;
+        }
         li {
           cursor: pointer;
         }
@@ -378,7 +383,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
     this.dispatchEvent(
       new CustomEvent(
         D4SStorageTree.tree_event_name,
-        {detail: {id: id}}
+        {detail: {id: id, bubbles: true}}
       )
     );
   }
@@ -417,15 +422,43 @@ class D4SStorageTree extends D4SStorageHtmlElement {
       data
       .filter(item => this.showFiles || item['@class'].includes('FolderItem'))
       .forEach(item => {
-        ul.appendChild(this.createListItem(item.title, item.id, item['@class'], parentId));
+        ul.appendChild(this.createListItem(item, parentId));
       })
     } else {
-      ul.appendChild(this.createListItem(data.displayName ? data.displayName : data.title, data.id, data['@class'], parentId));
+      ul.appendChild(this.createListItem(data, parentId));
     }
     parentElement.appendChild(ul);
   }
 
-  createListItem(label, id, type, parentId) {
+  getIconByMIME(mime){
+    if(mime.startsWith("image")) return "image";
+    if(mime.startsWith("application/pdf")) return "picture_as_pdf";
+    if(mime.startsWith("application/zip")) return "archive";
+    if(mime.startsWith("application/xml")) return "code";
+    if(mime.match(/tar|compressed|gzip|gz|tgz/)) return 'archive';
+    return null;
+  }
+
+  getIconByExtension(name){
+    const tks = name.split(".")
+    if(tks.length === 0) return null;
+    const ext = tks[tks.length - 1]
+    if(ext.match(/java$|py$|^r$|^c$|ccp|lua|jl|^sh$|json|xml|xsl|xslt|md$|xq$|xqm$/i)) return "code";
+    if(ext.match(/js$/i)) return "javascript";
+    if(ext.match(/html$|css$|php$/i)) return ext;
+    if(ext.match(/kml$/i)) return "place";
+    if(ext.match(/ics$/i)) return "event";
+    if(ext.match(/csv$|xls$|ods$/i)) return "assessment";
+    if(ext.match(/txt$|odt$|rtf$|doc$|docx$/i)) return "description";
+    if(ext.match(/ppt$|odp$/i)) return "slideshow";
+    return null;
+  }
+
+  createListItem(item, parentId) {
+    const label = item.displayName ? item.displayName : item.title
+    const id = item.id
+    const type = item["@class"]
+    const mime = item.content && item.content.mimeType ? item.content.mimeType : null
     const li = document.createElement('li');
     li.setAttribute(D4SStorageTree.dataname_attr, label);
     li.setAttribute(D4SStorageTree.dataid_attr, id);
@@ -434,10 +467,25 @@ class D4SStorageTree extends D4SStorageHtmlElement {
     if (parentId) {
       li.setAttribute(D4SStorageTree.parentid_attr, parentId);
     }
-    const icon = type.includes('FolderItem') || type.includes("SharedFolder")? "folder.svg" : "file-earmark.svg"
+    //const icon = type.includes('FolderItem') || type.includes("SharedFolder")? "folder.svg" : "file-earmark.svg"
+    var icon = "insert_drive_file";
+    if(type.includes('FolderItem')){
+      icon = "folder"
+    }else if(type.includes("SharedFolder")){
+      icon = "folder_shared"
+    }else{
+      const im = mime ? this.getIconByMIME(mime) : null
+      if(im) icon = im;
+      else{
+        const ie = this.getIconByExtension(label)
+        if(ie) icon = ie;
+      }
+    }
     li.innerHTML = `
-      <img class="px-1" src="${this.srcBaseURL}/img/${icon}"</img>
-      <span>${label}</span>
+      <div class="li-title d-flex gap-1">
+        <span class="material-icons">${icon}</span>
+        <span>${label}</span>
+      </div>
     `
 
     li.addEventListener('click', (ev) => {
