refactored method import to use preview widgets for input and scripts, added possibility to choose for public or protected link from workspace, fixed several bugs

added index test page for CCP webcomponents
changed gateway to next.dev
2024-04-16 13:07:23 +02:00 · 2024-04-16 13:06:00 +02:00 · 2024-04-16 13:05:06 +02:00 · 2024-04-16 13:03:51 +02:00 · 2024-04-16 13:03:11 +02:00
10 changed files with 921 additions and 724 deletions
--- a/boot/d4s-boot.js
+++ b/boot/d4s-boot.js
@ -124,14 +124,14 @@ window.customElements.define('d4s-boot-2', class extends HTMLElement {
          }).then(token => {
            console.log("Authorized. Token exp: " + this.expirationDate(this.parseJwt(token).exp))
            //transform all queued requests to fetches
-            console.log("All pending requests to promises")
+            //console.log("All pending requests to promises")
            let promises = this.#queue.map(r => {
              r.request.headers["Authorization"] = "Bearer " + token
              return r.resolve( fetch(r.url, r.request) )
            })
            //clear queue
            this.#queue = []
-            console.log("Resolving all fetches")
+            //console.log("Resolving all fetches")
            return Promise.all(promises)

          }).catch(err => console.error("Unable to make calls: " + err)) // Sometimes throws: Unable to make calls: TypeError: Cannot read properties of undefined (reading 'split')
@ -177,7 +177,7 @@ window.customElements.define('d4s-boot-2', class extends HTMLElement {
      } else {
        req.headers = { "Authorization" : null}
      }
-      console.log("Queued request to url ", url)
+      //console.log("Queued request to url ", url)
      this.#queue.push({ url : url, request : req, resolve : resolve, reject : reject})
    })
    return p
@ -202,7 +202,7 @@ window.customElements.define('d4s-boot-2', class extends HTMLElement {
        .then(response => response.json())
        .then(json => {
          this.#config = json
-          console.log("Keycloak uma2 configuration loaded")
+          //console.log("Keycloak uma2 configuration loaded")
          resolve(true)
        })
        .catch(err => reject("Failed to fetch uma2-configuration from server: " + err))
--- a/ccp/index.html
+++ b/ccp/index.html
@ -0,0 +1,33 @@
+<html lang="en">
+
+    <head>
+        <meta charset="UTF-8" />
+        <script src="js/methodlistcontroller.js"></script>
+        <script src="js/methodeditorcontroller.js"></script>
+        <script src="js/inputwidgeteditorcontroller.js"></script>
+        <script src="js/outputwidgeteditorcontroller.js"></script>
+        <script src="js/executionformcontroller.js"></script>
+        <script src="js/inputwidgetcontroller.js"></script>
+        <script src="js/outputwidgetcontroller.js"></script>
+        <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>
+    </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>
+        <div class="row">
+            <div class="col">
+                <d4s-ccp-methodlist serviceurl="https://ccp.cloud-dev.d4science.org"></d4s-ccp-methodlist>
+            </div>
+            <div class="col">
+                <d4s-ccp-methodeditor serviceurl="https://ccp.cloud-dev.d4science.org"></d4s-ccp-methodeditor>
+            </div>
+            <div class="col">
+                <d4s-ccp-executionform serviceurl="https://ccp.cloud-dev.d4science.org"></d4s-ccp-executionform>
+            </div>
+        </div>
+        
+    </body>
+</html>
--- a/ccp/js/executionformcontroller.js
+++ b/ccp/js/executionformcontroller.js
@ -55,6 +55,7 @@ class CCPExecutionForm extends HTMLElement{
  render(){
    this.#rootdoc.innerHTML = `
      <div>
+        <link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/modal/">
        <link rel="stylesheet" href="https://cdn.dev.d4science.org/ccp/css/common.css"></link>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <style>
--- a/ccp/js/inputwidgetcontroller.js
+++ b/ccp/js/inputwidgetcontroller.js
--- a/ccp/js/inputwidgeteditorcontroller.js
+++ b/ccp/js/inputwidgeteditorcontroller.js
@ -23,7 +23,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
    return this.#index
  }
  
-  computeDefaultInputType(){
+  /*computeDefaultInputType(){
    if(this.#input.schema.format === "secret"){
       return "password"
    }else if(this.#input.schema.format === "date"){
@ -34,14 +34,15 @@ class CCPInputWidgetEditorController extends HTMLElement{
      return "datetime-local"
    }
    return "text"
-  }
+  }*/
  
  isSelectedFormat(fmt){
-    return this.#input.schema.format === fmt  
+    return this.#input.schema.format === fmt
  }
 
  renderDefaultByType(){
-    if(this.#input.schema.format === "code"){
+    return `<d4s-ccp-input name="default" input="${btoa(JSON.stringify(this.#input))}"></d4s-ccp-input>`
+    /*if(this.#input.schema.format === "code"){
      return `
        <textarea rows="5" name="default" class="form-control" placeholder="default">${this.#input.schema.default}</textarea>
      `
@ -49,7 +50,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
      return `
        <input type="${this.computeDefaultInputType()}" value="${this.#input.schema.default}" name="default" class="form-control" placeholder="default"/>	    
      `   
-    }
+    }*/
  }

  renderDeleteButton(){
@ -62,6 +63,8 @@ class CCPInputWidgetEditorController extends HTMLElement{
    this.#index = i
    this.#input = input
    this.#type = input.schema.enum ? "enum" : "string"
+    const minOccurs = input.minOccurs = Number(input.minOccurs) ? Number(input.minOccurs) : 0
+    const maxOccurs = input.maxOccurs = Number(input.maxOccurs) ? Number(input.maxOccurs) : 0
    this.innerHTML = `
        <details ${ reopen ? 'open' : ''}>
          <summary class="mb-3">
@ -85,22 +88,22 @@ class CCPInputWidgetEditorController extends HTMLElement{
              <div class="col-3">
                <div class="form-field" title="Type">
                  <label>Type</label>
-                  <select name="type" class="form-control" placeholder="type" value="${this.#type}" ${ input.id === 'ccpimage' ? 'readonly' : ''}>
+                  <select name="type" class="form-control" placeholder="type" value="${this.#type}">
                    <option value="string" ${this.#type === "string" ? "selected" : ""}>String</option>
-                    <option value="enum" ${this.#type === "enum" ? "selected" : ""}>Enum</option>
+                    ${ input.id === 'ccpimage' ? '' : `<option value="enum" ${this.#type === "enum" ? "selected" : ""}>Enum</option>` }
                  </select>
                </div>
              </div>
              <div class="col">
                <div class="form-field" title="Minimum occurrences">
                  <label>Min occurs</label>
-                  <input value="${input.minOccurs}" type="number" min="0" step="1" name="minOccurs" value="${input.minOccurs}" required="required" class="form-control" placeholder="minOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
+                  <input value="${minOccurs}" type="number" min="0" step="1" name="minOccurs" value="${minOccurs}" required="required" class="form-control" placeholder="minOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
                </div>
              </div>
              <div class="col">
                <div class="form-field" title="Maximum occurrences">
                  <label>Max occurs</label>
-                  <input value="${input.maxOccurs}" type="number" min="0" step="1" name="maxOccurs" value="${input.maxOccurs}" required="required" class="form-control" placeholder="maxOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
+                  <input value="${maxOccurs}" type="number" min="0" step="1" name="maxOccurs" value="${maxOccurs}" required="required" class="form-control" placeholder="maxOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
                </div>
              </div>
              <div class="col" title="Read only">
@ -123,7 +126,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
                    <option value="boolean" ${this.isSelectedFormat('boolean') ? "selected" : ""}>True/False</option>
                    <option value="code" ${this.isSelectedFormat('code') ? "selected" : ""}>Code</option>
                    <option value="file" ${this.isSelectedFormat('file') ? "selected" : ""}>File</option>
-                    <option value="remotefile" ${this.isSelectedFormat('remotefile') ? "selected" : ""}>Remote file</option>
+                    <option value="remotefile" ${this.isSelectedFormat('remotefile') ? "selected" : ""}>Workspace file</option>
                    <option value="secret" ${this.isSelectedFormat('secret') ? "selected" : ""}>Secret</option>
                    <option value="url" ${this.isSelectedFormat('url') ? "selected" : ""}>Url</option>
                  </select>
@ -150,8 +153,9 @@ class CCPInputWidgetEditorController extends HTMLElement{
              </div>
            </div>
            <div name="input-default" class="mb-3">
-              <div class="form-field" title="Default value">
-                ${this.renderDefaultByType()}
+              <label>Default value</label>
+              <div class="form-field border border-info px-2 py-1" style="background-color:#0dcaf022" title="Default value">
+                <div name="default-container">${this.renderDefaultByType()}</div>
                <span style="user-select:none;position:relative;top:-1.6rem;float:right;cursor:pointer" name="password_toggle" class="${this.isSelectedFormat('secret') ? 'inline' : 'd-none'}">&#128065;</span>
              </div>
            </div>
@ -166,54 +170,64 @@ class CCPInputWidgetEditorController extends HTMLElement{
        ev.preventDefault()
      }
    })
-    
+
+    const defaultinp = this.querySelector("div[name='input-default']")
+    defaultinp.addEventListener("input", ev=>{
+      const inp = this.querySelector("d4s-ccp-input")
+      this.#input.schema.default = inp.value
+    })
+
+    defaultinp.addEventListener("change", ev=>{
+      const inp = this.querySelector("d4s-ccp-input")
+      this.#input.schema.default = inp.value
+    })
+
+    defaultinp.addEventListener("click", ev=>{
+      const src = ev.target.getAttribute("name")
+      if (src === "plus" || src === "minus") {
+        const inp = this.querySelector("d4s-ccp-input")
+        this.#input.schema.default = inp.value
+      }
+    })
+
    this.addEventListener("input", ev=>{
      const val = ev.target.value
      const ename = ev.target.getAttribute("name")
+      const display = this.querySelector("div[name='default-container']")
      if(ename === "id"){
        this.#input.id = val
      }
      else if(ename === "title"){
        this.#input.title = val
+        display.innerHTML = this.renderDefaultByType() 
      }
      else if(ename === "description"){
        this.#input.description = val
+        display.innerHTML = this.renderDefaultByType()
      }
      else if(ename === "minOccurs"){
-        this.#input.minOccurs = val
+        this.#input.minOccurs = Number(val) ? Number(val) : 0
+        display.innerHTML = this.renderDefaultByType()
      }
      else if(ename === "maxOccurs"){
-        this.#input.maxOccurs = val
+        this.#input.maxOccurs = Number(val) ? Number(val) : 0
+        display.innerHTML = this.renderDefaultByType()
      }
      else if(ename === "format"){
        this.#input.schema.format = val
-        //this.render(this.#input, this.#index, true)
-	/*this.querySelector("div[name=input-default] span[name=password_toggle]").classList.add("d-none")
-        this.querySelector("div[name=input-default] input[name=default]").type = ""
-        if(this.#input.schema.format === "secret"){
-           this.querySelector("div[name=input-default] input[name=default]").type = "password"
-           this.querySelector("div[name=input-default] span[name=password_toggle]").classList.remove("d-none")
-        }else if(this.#input.schema.format === "date"){
-          this.querySelector("div[name=input-default] input[name=default]").type = "date"
-        }else if(this.#input.schema.format === "time"){
-          this.querySelector("div[name=input-default] input[name=default]").type = "time"
-        }else if(this.#input.schema.format === "dateTime"){
-          this.querySelector("div[name=input-default] input[name=default]").type = "dateTime"
-        }else if(this.#input.schema.format === "file"){
-          this.querySelector("div[name=input-default] input[name=default]").type = "file"
-        }*/
+        display.innerHTML = this.renderDefaultByType()
      }
      else if(ename === "contentMediaType"){
        this.#input.schema.contentMediaType = val
+        display.innerHTML = this.renderDefaultByType()
      }
      else if(ename === "options"){
        this.#input.schema.enum = val.split(",")
-      }
-      else if(ename === "default"){
-        this.#input.schema.default = val
+        display.innerHTML = this.renderDefaultByType()
      }
      else if(ename === "readonly"){
        this.#input.schema.readOnly = ev.target.checked
+        display.innerHTML = this.renderDefaultByType()
      }
      else if(ename === "type"){
        this.#type = ev.target.value
@ -225,10 +239,10 @@ class CCPInputWidgetEditorController extends HTMLElement{
          this.querySelector("div[name=enum-input]").classList.add("d-none")
          this.querySelector("div[name=string-input]").classList.remove("d-none")
          delete this.#input.schema['enum']
-        } 
-      } 
+        }
+        display.innerHTML = this.renderDefaultByType() 
+      }
    })
-    
  }
  
 }
--- a/ccp/js/methodeditorcontroller.js
+++ b/ccp/js/methodeditorcontroller.js
--- a/ccp/js/methodlistcontroller.js
+++ b/ccp/js/methodlistcontroller.js
@ -220,9 +220,9 @@ class CCPMethodList extends HTMLElement{
        const f = filter.toLowerCase()
        this.#filtered = this.#data.filter(d=>{
          return false || 
-            (d.title.toLowerCase().indexOf(f) !== -1)|| 
-            (d.description.indexOf(f) !== -1) ||
-            (d.keywords.map(k=>k.toLowerCase()).filter(i=>i.indexOf(f) !== -1)).length
+            (d.title && d.title.toLowerCase().indexOf(f) !== -1)|| 
+            (d.description && d.description.indexOf(f) !== -1) ||
+            (Array.isArray(d.keywords) && d.keywords.map(k=>k.toLowerCase()).filter(i=>i.indexOf(f) !== -1)).length
        })
      }
      this.groupBy()
--- a/index.html
+++ b/index.html
@ -12,10 +12,13 @@
            <h3>CDN sandbox</h3>
            <p>Select the section you want to enter</p>
        </header>
-        <div class="d-flex">
+        <div class="d-flex flex-column">
            <div class="d-inline-block">
                <a href="storage/index.html">D4S Workspace</a> (OIDC protected)
            </div>
+            <div class="d-inline-block">
+                <a href="ccp/index.html">CCP</a> (OIDC protected)
+            </div>
        </div>
    </body>

--- a/storage/d4s-storage.js
+++ b/storage/d4s-storage.js
@ -442,6 +442,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {

    li.addEventListener('click', (ev) => {
      ev.stopPropagation();
+      ev.preventDefault()
      this.select(ev.currentTarget.getAttribute(D4SStorageTree.dataid_attr));
    });
    
@ -668,6 +669,7 @@ class D4SStorageFolder extends D4SStorageHtmlElement {
    const isFolder = item['@class'].includes('FolderItem')
    filename.addEventListener('click', (ev) => {
      ev.stopPropagation()
+      ev.preventDefault()
      if (isFolder) {
        const span = ev.currentTarget.querySelector(':nth-child(2)')
        if (span) {
--- a/storage/index.html
+++ b/storage/index.html
@ -10,7 +10,7 @@

    <body class="m-4">
        <d4s-boot-2 context="%2Fgcube%2Fdevsec%2FdevVRE"
-        gateway="next.d4science.org"
+        gateway="next.dev.d4science.org"
        redirect-url="https://cdn.dev.d4science.org/storage/"
        url="https://accounts.dev.d4science.org/auth">
        <!-- redirect-url="http://localhost:8080/storage/"  -->
Author	SHA1	Message	Date
dcore94	cc792a3e62	refactored method import to use preview widgets for input and scripts, added possibility to choose for public or protected link from workspace, fixed several bugs	2024-04-16 13:07:23 +02:00
dcore94	2f8f9483b8	added index test page for CCP webcomponents	2024-04-16 13:06:00 +02:00
dcore94	f4faebc9f1	changed gateway to next.dev	2024-04-16 13:05:06 +02:00
dcore94	687be71314	added some prevent defaults to events	2024-04-16 13:03:51 +02:00
dcore94	1078e7abbb	removed redundant logs	2024-04-16 13:03:11 +02:00