added support for remote files from d4s workspace

ccp/js/inputwidgetcontroller.js

@@ -29,6 +29,9 @@ class CCPInputWidgetController extends HTMLElement {
     }else if(this.isFile()){
       this.innerHTML += `<d4s-ccp-input-file readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-file>`
     
+    }else if(this.isRemoteFile()){
+      this.innerHTML += `<d4s-ccp-input-remotefile readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-remotefile>`
+    
     }else if(this.isSecret()){
       this.innerHTML += `<d4s-ccp-input-secret readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-secret>`
     
@@ -80,6 +83,13 @@ class CCPInputWidgetController extends HTMLElement {
       (this.#data.schema.format.toLowerCase() === "file") 
   }
   
+  isRemoteFile(){
+    return (this.#data.schema.type === "string") && 
+      ("format" in this.#data.schema) && 
+      (this.#data.schema.format != null) && 
+      (this.#data.schema.format.toLowerCase() === "remotefile") 
+  }
+  
   isDateTime(){
     return (this.#data.schema.type === "string") && 
       ("format" in this.#data.schema) &&
@@ -196,30 +206,52 @@ class CCPBaseInputWidgetController extends HTMLElement{
     return this.#type
   }
   
+  renderPlusMinus(){
+    this.rootdoc.querySelector("div[name=plusminus]").innerHTML = `
+        ${this.isIncrementable() ? `<span name="plus" title="add one" class="badge text-success border-success btn">+</span>` : ``}
+        ${this.isDecrementable() ? `<span name="minus" title="remove one" class="badge border border-danger  text-danger btn">-</span>` : ``}
+    `
+  }
+  
+  renderContent(){
+    this.rootdoc.querySelector("div[name=content]").innerHTML = this.content()
+  }
+  
   render(){
     this.rootdoc.innerHTML = `
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
       <div name="root" class="my-3 ccp-input-widget form-field row">
         <label class="form-label">
+          <div class="d-flex justify-content-between">
+            <div>
               ${this.required ? `<span title="Required" class="p-1 text-danger">*</span>` : ``}
               ${this.title}
               <span class="badge text-primary" title="${this.#description}" alt="${this.#description}">?</span>
-          <div style="float:right">
-            ${this.isIncrementable() ? `<span name="plus" title="add one" class="badge text-success border-success btn">+</span>` : ``}
-            ${this.isDecrementable() ? `<span name="minus" title="remove one" class="badge border border-danger  text-danger btn">-</span>` : ``}
             </div>
-          ${this.content()}
+            <div name="tools" class="d-flex" style="gap:2px">
+              <div name="plusminus">
+              </div>
+            </div>
+          </div>
+          <div name="content">
+          </div>
         </label>
      </div>        
     `
+    
+    this.renderPlusMinus()
+    this.renderContent()
+    
     this.#rootdoc.querySelector("div[name=root]").addEventListener("click", ev=>{
       const src = ev.target.getAttribute("name")
       if(src === "plus"){
         this.#value.push(this.#default)
-        this.render()
+        this.renderPlusMinus()
+        this.renderContent()
       }else if(src === "minus"){
         this.#value.pop()
-        this.render()
+        this.renderPlusMinus()
+        this.renderContent()
       }
     })
   }
@@ -418,6 +450,82 @@ class CCPFileInputWidgetController extends CCPBaseInputWidgetController{
 }
 window.customElements.define('d4s-ccp-input-file', CCPFileInputWidgetController);
 
+class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
+  
+  #iss = null;
+  #addresses = {
+    "https://accounts.dev.d4science.org/auth/realms/d4science" : "https://workspace-repository.dev.d4science.org/storagehub/workspace",
+    "https://accounts.pre.d4science.org/auth/realms/d4science" : "https://pre.d4science.org/workspace",
+    "https://accounts.d4science.org/auth/realms/d4science" : "https://api.d4science.org/workspace"
+  };
+  
+  constructor(){
+    super()
+    this.#iss = document.querySelector("d4s-boot-2").loginToken.iss
+  }
+  
+  get baseurl(){
+    return this.#addresses[this.#iss]
+  }
+  
+  connectedCallback(){
+    this.rootdoc.addEventListener("input", ev=>{
+      if(ev.target.getAttribute("name") === this.name){
+        const index = Number(ev.target.getAttribute("data-index"))
+        this.value[index] = ev.target.value 
+      }
+    })
+    this.rootdoc.querySelector("div[name=tools]").innerHTML += `
+      <svg name="trigger" style="width:24;height:24;fill:#007bff; cursor:pointer" viewBox="0 -960 960 960">
+          <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>
+      <d4s-storage-tree 
+        class="d-none position-absolute shadow border border-primary bg-light"
+        style="left: 100%; margin: 0 0 0 -.5rem;min-width:350px; max-width:500px;z-index:1000; line-height:1.5rem;overflow-x:hidden;text-wrap:nowrap;text-overflow: ellipsis;min-height:5rem; max-height:10rem; padding:5px;"
+        base-url="${this.baseurl}"
+        file-download-enabled="true" 
+        show-files="true"
+        allow-drag="true"/>
+    `
+    const ws = this.rootdoc.querySelector("d4s-storage-tree")
+    this.rootdoc.querySelector("svg[name=trigger]").addEventListener("click", ev=>{
+      ws.classList.toggle("d-none")
+    })
+    
+    this.addEventListener("dragover", ev=>{
+      ev.preventDefault()
+    })
+    
+    this.addEventListener("drop", ev=>{
+      ev.stopPropagation()
+      if(ev.target.getAttribute("name") == this.name && ev.target.getAttribute("data-index") != null){
+        const index = Number(ev.target.getAttribute("data-index"))
+        ev.target.value = ev.dataTransfer.getData("text/plain+downloadlink")
+        this.value[index] = ev.target.value
+      }
+    })
+    
+    document.addEventListener("keydown", ev=>{
+      if(ev.code == 'Escape' ) ws.classList.add("d-none");
+    })
+  }
+    
+  content(){
+    if(this.value.length <= 1){
+      return `
+       <input data-index="0" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>`
+    }
+    var out = 
+      this.value.map((c,i)=>{
+        return `
+          <input name="${this.name}" value="${c}" data-index="${i}" class="ccp-input my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>
+        `
+      }).join("\n")
+    return out
+  }
+}
+window.customElements.define('d4s-ccp-input-remotefile', CCPRemoteFileInputWidgetController);
+
 class CCPSecretInputWidgetController extends CCPBaseInputWidgetController{
     
   constructor(){

ccp/js/inputwidgeteditorcontroller.js

@@ -121,6 +121,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
                     <option value="dateTime" ${this.isSelectedFormat('dateTime') ? "selected" : ""}>Date time</option>
                     <option value="code" ${this.isSelectedFormat('code') ? "selected" : ""}>Code</option>
                     <option value="file" ${this.isSelectedFormat('file') ? "selected" : ""}>File</option>
+                    <option value="remotefile" ${this.isSelectedFormat('file') ? "selected" : ""}>Remote file</option>
                     <option value="secret" ${this.isSelectedFormat('secret') ? "selected" : ""}>Secret</option>
                     <option value="url" ${this.isSelectedFormat('url') ? "selected" : ""}>Url</option>
                   </select>