gCubeSystem
/
web-components
17
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

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

This commit is contained in:
dcore94 2024-04-16 13:07:23 +02:00
parent 2f8f9483b8
commit cc792a3e62
5 changed files with 877 additions and 718 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ccp/js/executionformcontroller.js
View File

@ -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>

742
ccp/js/inputwidgetcontroller.js
View File

File diff suppressed because it is too large Load Diff

86
ccp/js/inputwidgeteditorcontroller.js
View File

@ -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()
}
})
}
}

760
ccp/js/methodeditorcontroller.js
View File

File diff suppressed because it is too large Load Diff

6
ccp/js/methodlistcontroller.js
View File

@ -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()