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
parent
2f8f9483b8
commit
cc792a3e62
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -12,37 +12,57 @@ class CCPInputWidgetController extends HTMLElement {
|
|||
if (this.isChecklist()) {
|
||||
|
||||
const opts = this.#data.schema.enum.join(",")
|
||||
this.innerHTML += `<d4s-ccp-input-checklist readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-checklist>`
|
||||
this.innerHTML += `<d4s-ccp-input-checklist readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-checklist>`
|
||||
this.querySelector("d4s-ccp-input-checklist").default = this.#data.schema.default
|
||||
|
||||
} else if (this.isEnum()) {
|
||||
|
||||
const opts = this.#data.schema.enum.join(",")
|
||||
this.innerHTML += `<d4s-ccp-input-enum readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-enum>`
|
||||
this.innerHTML += `<d4s-ccp-input-enum readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-enum>`
|
||||
this.querySelector("d4s-ccp-input-enum").default = this.#data.schema.default
|
||||
|
||||
} else if (this.isCode()) {
|
||||
this.innerHTML += `<d4s-ccp-input-textarea 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="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-textarea>`
|
||||
|
||||
this.innerHTML += `<d4s-ccp-input-textarea readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-textarea>`
|
||||
this.querySelector("d4s-ccp-input-textarea").default = this.#data.schema.default
|
||||
|
||||
} else if (this.isDateTime()) {
|
||||
|
||||
const t = this.#data.schema.format.toLowerCase() === "datetime" ?
|
||||
"datetime-local" : this.#data.schema.format.toLowerCase()
|
||||
this.innerHTML += `<d4s-ccp-input-simple type="${t}" 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="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
|
||||
this.innerHTML += `<d4s-ccp-input-simple type="${t}" readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
|
||||
this.querySelector("d4s-ccp-input-simple").default = this.#data.schema.default
|
||||
|
||||
} 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="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-file>`
|
||||
|
||||
this.innerHTML += `<d4s-ccp-input-file readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-file>`
|
||||
this.querySelector("d4s-ccp-input-file").default = this.#data.schema.default
|
||||
|
||||
} 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="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-remotefile>`
|
||||
|
||||
this.innerHTML += `<d4s-ccp-input-remotefile readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-remotefile>`
|
||||
this.querySelector("d4s-ccp-input-remotefile").default = this.#data.schema.default
|
||||
|
||||
} 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="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-secret>`
|
||||
|
||||
this.innerHTML += `<d4s-ccp-input-secret readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs }" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-secret>`
|
||||
this.querySelector("d4s-ccp-input-secret").default = this.#data.schema.default
|
||||
|
||||
} else if (this.isBoolean()) {
|
||||
this.innerHTML += `<d4s-ccp-input-boolean 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="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-boolean>`
|
||||
|
||||
this.innerHTML += `<d4s-ccp-input-boolean readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-boolean>`
|
||||
this.querySelector("d4s-ccp-input-boolean").default = this.#data.schema.default
|
||||
|
||||
} else if (this.isNumber()) {
|
||||
this.innerHTML += `<d4s-ccp-input-simple type="number" 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="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
|
||||
|
||||
this.innerHTML += `<d4s-ccp-input-simple type="number" readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
|
||||
this.querySelector("d4s-ccp-input-simple").default = this.#data.schema.default
|
||||
|
||||
} else {
|
||||
this.innerHTML += `<d4s-ccp-input-simple 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="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
|
||||
|
||||
this.innerHTML += `<d4s-ccp-input-simple readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
|
||||
this.querySelector("d4s-ccp-input-simple").default = this.#data.schema.default
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -142,9 +162,10 @@ class CCPBaseInputWidgetController extends HTMLElement{
|
|||
this.#name = this.getAttribute("name")
|
||||
this.#title = this.getAttribute("title")
|
||||
this.#description = this.getAttribute("description")
|
||||
this.#default = this.getAttribute("default")
|
||||
//this.#default = this.getAttribute("default")
|
||||
this.#minOccurs = Number(this.getAttribute("minoccurs") ? this.getAttribute("minoccurs") : 1)
|
||||
this.#maxOccurs = Number(this.getAttribute("maxoccurs") ? this.getAttribute("maxoccurs") : 1)
|
||||
this.#maxOccurs = Math.max(this.#minOccurs, this.#maxOccurs)
|
||||
this.#readonly = this.getAttribute("readonly") === "true"
|
||||
|
||||
// coalesce all basic input types
|
||||
|
|
@ -153,7 +174,22 @@ class CCPBaseInputWidgetController extends HTMLElement{
|
|||
// Handle enum case
|
||||
this.#options = (this.getAttribute("options") ? this.getAttribute("options").split(",") : null)
|
||||
|
||||
this.value = Array(Math.max(this.#minOccurs,1)).fill(this.#default)
|
||||
//this.value = Array(Math.max(this.#minOccurs, 1)).fill(this.#default)
|
||||
}
|
||||
|
||||
set default(def){
|
||||
this.#default = def
|
||||
const defarr = Array.isArray(def) ? def : [def]
|
||||
const min = Math.max(this.#minOccurs, 1)
|
||||
var v = []
|
||||
for(let j=0; j < this.#maxOccurs; j++){
|
||||
if(j < defarr.length){
|
||||
v.push(defarr[j])
|
||||
}else if(j < min){
|
||||
v.push(defarr[defarr.length - 1])
|
||||
}
|
||||
}
|
||||
this.value = v
|
||||
}
|
||||
|
||||
setValue(v) {
|
||||
|
|
@ -218,10 +254,6 @@ class CCPBaseInputWidgetController extends HTMLElement{
|
|||
return this.#options
|
||||
}
|
||||
|
||||
set default(v){
|
||||
this.#default = v
|
||||
}
|
||||
|
||||
get type() {
|
||||
return this.#type
|
||||
}
|
||||
|
|
@ -267,13 +299,15 @@ class CCPBaseInputWidgetController extends HTMLElement{
|
|||
this.#rootdoc.querySelector("div[name=root]").addEventListener("click", ev => {
|
||||
const src = ev.target.getAttribute("name")
|
||||
if (src === "plus") {
|
||||
this.#value.push(this.#default)
|
||||
this.#value.push(this.#value[this.#value.length - 1])
|
||||
this.renderPlusMinus()
|
||||
this.renderContent()
|
||||
ev.preventDefault()
|
||||
} else if (src === "minus") {
|
||||
this.#value.pop()
|
||||
this.renderPlusMinus()
|
||||
this.renderContent()
|
||||
ev.preventDefault()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -326,14 +360,18 @@ class CCPEnumInputWidgetController extends CCPBaseInputWidgetController{
|
|||
|
||||
content() {
|
||||
if (this.value.length <= 1) {
|
||||
const opts = this.options.map(o=>`<option value="${o}" ${ this.value.length && o === this.value[0] ? 'selected' : ''}>${o}</option>`).join("\n")
|
||||
const opts = this.options ?
|
||||
this.options.map(o => `<option value="${o}" ${this.value.length && o === this.value[0] ? 'selected' : ''}>${o}</option>`).join("\n") :
|
||||
''
|
||||
return `<select data-index="0" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'disabled' : ''} ${this.required ? 'required' : ''}>${opts}</select>`
|
||||
}
|
||||
var out =
|
||||
this.value.map((c,i)=>{
|
||||
const opts = this.options.map(o=>`<option value="${o}" ${ this.value.length >= i && c === this.value[i] ? 'selected' : ''}>${o}</option>`).join("\n")
|
||||
this.value.map((v, i) => {
|
||||
const opts = this.options ?
|
||||
this.options.map(o => `<option value="${o}" ${o === v ? 'selected' : ''}>${o}</option>`).join("\n") :
|
||||
''
|
||||
return `
|
||||
<select data-index="${i}" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'disabled' : ''} ${this.required ? 'required' : ''}>${opts}</select>
|
||||
<select data-index="${i}" value="${v}" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'disabled' : ''} ${this.required ? 'required' : ''}>${opts}</select>
|
||||
`
|
||||
}).join("\n")
|
||||
return out
|
||||
|
|
@ -360,11 +398,16 @@ class CCPChecklistInputWidgetController extends CCPBaseInputWidgetController{
|
|||
}
|
||||
|
||||
buildOpts(index, selections) {
|
||||
return this.options.map(o=>`
|
||||
return this.options ? this.options.map(o => `
|
||||
<div class="form-check form-switch form-check-inline">
|
||||
<label>${o}</label>
|
||||
<input data-index="${index}" class="form-check-input" type="checkbox" name="${this.name}" value="${o}" ${this.readonly ? 'readonly' : ''} ${selections.indexOf(o) > -1 ? 'checked' : ''}/></div>
|
||||
`).join("\n")
|
||||
`).join("\n") :
|
||||
`
|
||||
<div class="form-check form-switch form-check-inline">
|
||||
<span class="muted text-danger">No options supplied</span>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
content() {
|
||||
|
|
@ -397,7 +440,6 @@ class CCPBooleanInputWidgetController extends CCPBaseInputWidgetController{
|
|||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.value.forEach((v,i)=>{ this.value[i] = v === "" ? false : v})
|
||||
this.rootdoc.addEventListener("input", ev => {
|
||||
if (ev.target.getAttribute("name") === this.name) {
|
||||
const index = Number(ev.target.getAttribute("data-index"))
|
||||
|
|
@ -410,7 +452,7 @@ class CCPBooleanInputWidgetController extends CCPBaseInputWidgetController{
|
|||
if (this.value.length <= 1) {
|
||||
return `
|
||||
<div class="my-2 form-check form-switch form-check-inline">
|
||||
<input data-index="0" value="${this.value.length ? this.value[0] : false}" class="my-2 form-check-input" type="checkbox" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.value[0] == "true" ? 'checked' : ''} value="${ this.value[0]}"/>
|
||||
<input data-index="0" value="${this.value.length ? this.value[0] : false}" class="my-2 form-check-input" type="checkbox" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.value[0] === "true" || this.value[0] === true ? 'checked' : ''} value="${this.value[0]}"/>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
|
@ -418,7 +460,7 @@ class CCPBooleanInputWidgetController extends CCPBaseInputWidgetController{
|
|||
this.value.map((c, i) => {
|
||||
return `
|
||||
<div class="my-2 form-check form-switch form-check-inline">
|
||||
<input data-index="${i}" value="${c}" class="my-2 form-check-input" type="checkbox" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${c == "true" ? 'checked' : ''} value="${this.value[i]}"/>
|
||||
<input data-index="${i}" value="${c}" class="my-2 form-check-input" type="checkbox" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${c === "true" || c === true ? 'checked' : ''}/>
|
||||
</div>
|
||||
`
|
||||
}).join("\n")
|
||||
|
|
@ -493,16 +535,18 @@ class CCPFileInputWidgetController extends CCPBaseInputWidgetController{
|
|||
content() {
|
||||
if (this.value.length <= 1) {
|
||||
const v = this.value.length ? this.value[0] : ''
|
||||
const preview = typeof(v) === "string" ? v.substring(0, 5) + "..." + v.substring(v.length - 5) : ""
|
||||
return `
|
||||
<input type="file" data-index="0" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required && !v ? 'required' : ''} value="${v}"/>
|
||||
<small name ="preview" class="form-text text-muted">${v.substr(0,5) + "..." + v.substr(v.length-5)}</small>
|
||||
<small name ="preview" class="form-text text-muted">${preview}</small>
|
||||
`
|
||||
}
|
||||
var out =
|
||||
this.value.map((c, i) => {
|
||||
const preview = typeof(v) === "string" ? c.substring(0, 5) + "..." + c.substring(v.length - 5) : ""
|
||||
return `
|
||||
<input type="file" data-index="${i}" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''} value="${c}"/>
|
||||
<small name ="preview" class="form-text text-muted">${c.substr(0,5) + "..." + c.substr(s.length-5)}</small>
|
||||
<small name ="preview" class="form-text text-muted">${preview}</small>
|
||||
`
|
||||
}).join("\n")
|
||||
return out
|
||||
|
|
@ -512,17 +556,31 @@ window.customElements.define('d4s-ccp-input-file', CCPFileInputWidgetController)
|
|||
|
||||
class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController {
|
||||
|
||||
#publicorprotected_dialog = null;
|
||||
#target = null
|
||||
#publiclink = null;
|
||||
#protectedlink = null;
|
||||
#index = null;
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
}
|
||||
|
||||
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
|
||||
async setPublicLink(l){
|
||||
const b = document.querySelector("d4s-boot-2")
|
||||
const link = await b.secureFetch(l)
|
||||
if(link.ok){
|
||||
const result = await link.json()
|
||||
this.#target.value = this.value[this.#index] = result
|
||||
this.#publicorprotected_dialog.style.display = "none"
|
||||
this.#publicorprotected_dialog.classList.remove("show")
|
||||
this.#publiclink = this.#protectedlink = this.#target = this.#index = null
|
||||
const newev = new Event("input", { bubbles : true})
|
||||
this.dispatchEvent(newev)
|
||||
}else{
|
||||
alert("Unable to get public link for item")
|
||||
this.#target.value = this.value[this.#index] = ""
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
addToolContent() {
|
||||
|
|
@ -549,14 +607,53 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
|
|||
allow-drag="true"/>
|
||||
</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-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).
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
this.#publicorprotected_dialog = this.rootdoc.querySelector("div.modal[name=publicorprotected]")
|
||||
this.#publicorprotected_dialog.addEventListener("click", ev => {
|
||||
ev.stopPropagation()
|
||||
ev.preventDefault()
|
||||
const name = ev.target.getAttribute("name")
|
||||
if(this.#index != null && this.#target != null){
|
||||
if(name === "public") {
|
||||
this.setPublicLink(this.#publiclink);
|
||||
}
|
||||
else if(name === "protected"){
|
||||
this.#target.value = this.value[this.#index] = this.#protectedlink;
|
||||
this.#publicorprotected_dialog.style.display = "none"
|
||||
this.#publicorprotected_dialog.classList.remove("show")
|
||||
this.#publiclink = this.#protectedlink = this.#target = this.#index = null
|
||||
const newev = new Event("input", { bubbles : true})
|
||||
this.dispatchEvent(newev)
|
||||
}
|
||||
else return;
|
||||
}
|
||||
})
|
||||
|
||||
const ws = this.rootdoc.querySelector("div[name=ws]")
|
||||
this.rootdoc.querySelector("svg[name=trigger]").addEventListener("click", ev => {
|
||||
ws.classList.toggle("d-none")
|
||||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
})
|
||||
|
||||
this.rootdoc.querySelector("span[name=closebtn]").addEventListener("click", ev => {
|
||||
ws.classList.add("d-none")
|
||||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
})
|
||||
|
||||
this.addEventListener("dragover", ev => {
|
||||
|
|
@ -566,9 +663,12 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
|
|||
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
|
||||
this.#publicorprotected_dialog.style.display = "block"
|
||||
this.#publicorprotected_dialog.classList.add("show")
|
||||
this.#target = ev.target
|
||||
this.#index = Number(ev.target.getAttribute("data-index"))
|
||||
this.#publiclink = ev.dataTransfer.getData("text/plain+publiclink")
|
||||
this.#protectedlink = ev.dataTransfer.getData("text/plain+downloadlink")
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -578,7 +678,7 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
|
|||
}
|
||||
|
||||
content() {
|
||||
this.addToolContent()
|
||||
if(!this.readonly && !this.querySelector("div[name=ws]")) this.addToolContent();
|
||||
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' : ''}/>`
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
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'}">👁</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -167,53 +171,63 @@ class CCPInputWidgetEditorController extends HTMLElement{
|
|||
}
|
||||
})
|
||||
|
||||
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
|
||||
|
|
@ -226,9 +240,9 @@ class CCPInputWidgetEditorController extends HTMLElement{
|
|||
this.querySelector("div[name=string-input]").classList.remove("d-none")
|
||||
delete this.#input.schema['enum']
|
||||
}
|
||||
display.innerHTML = this.renderDefaultByType()
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -487,12 +487,12 @@ class CCPMethodEditorController extends HTMLElement{
|
|||
<select name="script-selector" style="border:none; padding:.3rem">
|
||||
<option value="deploy-script">Deploy</option>
|
||||
<option value="execute-script">Execute</option>
|
||||
<option value="undeploy-script">Undeploy</option>
|
||||
<!--option value="undeploy-script">Undeploy</option-->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</summary>
|
||||
<div class="card-body" name="input_container">
|
||||
<div class="card-body" name="scripts_container">
|
||||
${this.renderScripts()}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -671,6 +671,7 @@ class CCPMethodEditorController extends HTMLElement{
|
|||
}
|
||||
)
|
||||
this.renderInputs()
|
||||
this.reRenderScripts()
|
||||
})
|
||||
|
||||
this.#rootdoc.querySelector("button[name=add-ccpannotation]").addEventListener("click", ev => {
|
||||
|
|
@ -692,6 +693,7 @@ class CCPMethodEditorController extends HTMLElement{
|
|||
}
|
||||
)
|
||||
this.renderInputs()
|
||||
this.reRenderScripts()
|
||||
})
|
||||
|
||||
this.#rootdoc.querySelector("div[name=input-list]").addEventListener("click", ev => {
|
||||
|
|
@ -703,6 +705,23 @@ class CCPMethodEditorController extends HTMLElement{
|
|||
console.log("deleting input at index", index)
|
||||
this.deleteTmpInputAt(index)
|
||||
this.renderInputs()
|
||||
this.reRenderScripts()
|
||||
}
|
||||
})
|
||||
|
||||
//when any input changes update scripts so that possibly variable get re-expanded
|
||||
this.#rootdoc.querySelector("div[name=input-list]").addEventListener("input", ev => {
|
||||
this.reRenderScripts()
|
||||
})
|
||||
|
||||
this.#rootdoc.querySelector("div[name=input-list]").addEventListener("change", ev => {
|
||||
this.reRenderScripts()
|
||||
})
|
||||
|
||||
this.#rootdoc.querySelector("div[name=input-list]").addEventListener("click", ev => {
|
||||
const src = ev.target.getAttribute("name")
|
||||
if (src === "plus" || src === "minus" || src === "maxOccurs" || src === "minOccurs") {
|
||||
this.reRenderScripts()
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -800,19 +819,17 @@ class CCPMethodEditorController extends HTMLElement{
|
|||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
const scriptname = ev.target.value
|
||||
const areas = Array.prototype.slice.call(this.#rootdoc.querySelectorAll("textarea.script-area"))
|
||||
areas.forEach(a=>{
|
||||
if(a.getAttribute("name") === scriptname) a.classList.remove("d-none");
|
||||
else a.classList.add("d-none")
|
||||
})
|
||||
this.reRenderScripts(scriptname)
|
||||
})
|
||||
|
||||
this.#rootdoc.querySelector("details[name=script-list]").addEventListener("input", ev=>{
|
||||
this.#rootdoc.querySelector("div[name=scripts_container]").addEventListener("input", ev => {
|
||||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
const scriptname = ev.target.getAttribute("name")
|
||||
const script = this.#current.additionalParameters.parameters.filter(p=>p.name === scriptname)[0]
|
||||
const scriptname = this.getCurrentScriptName()
|
||||
const script = this.#current.additionalParameters.parameters.find(p => p.name === scriptname)
|
||||
if (script) script.value = ev.target.value.split(/\r?\n/);
|
||||
const preview = ev.currentTarget.querySelector("textarea[name=preview]")
|
||||
preview.value = this.codeToPreview(ev.target.value)
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -948,8 +965,7 @@ class CCPMethodEditorController extends HTMLElement{
|
|||
const available = this.#infrastructures.filter(i => { return selectedinfras.indexOf(i.id) === -1 })
|
||||
return `
|
||||
<option></option>
|
||||
${
|
||||
available.map(infra=>{
|
||||
${available.map(infra => {
|
||||
return `
|
||||
<option value="${infra.id}" title="${infra.description}">${infra.name}</option>
|
||||
`
|
||||
|
|
@ -989,16 +1005,44 @@ class CCPMethodEditorController extends HTMLElement{
|
|||
})
|
||||
}
|
||||
|
||||
renderScripts(){
|
||||
const val = 'deploy-script'
|
||||
return this.#current.additionalParameters.parameters.map(
|
||||
(script, i) => {
|
||||
let code = script.value && script.value.length ? script.value.join("\r\n") : ""
|
||||
codeToPreview(code) {
|
||||
return this.#tmp_inputs.reduce((acc, i) => {
|
||||
const r = new RegExp(`{{\\s*${i.id}\\s*}}`, 'g');
|
||||
var def = i.schema.default
|
||||
if(i.schema.format === "secret"){
|
||||
def = Array.isArray(def) ? def : [def]
|
||||
def = def.map(v=>"***")
|
||||
}
|
||||
if(i.schema.format === "file"){
|
||||
def = Array.isArray(def) ? def : [def]
|
||||
def = def.map(v=>v.substring(0,5) + "......" + v.substring(v.length-5))
|
||||
}
|
||||
return acc.replaceAll(r, def)
|
||||
}, code)
|
||||
}
|
||||
|
||||
getCurrentScriptName() {
|
||||
return this.#rootdoc.querySelector("div[name=scripts_container] div.script-area").getAttribute("name")
|
||||
}
|
||||
|
||||
renderScripts(scriptname) {
|
||||
const val = scriptname ? scriptname : 'deploy-script'
|
||||
const script = this.#current.additionalParameters.parameters.find(s => s.name === val)
|
||||
if (!script) return '';
|
||||
const code = script.value && script.value.length ? script.value.join("\r\n") : ""
|
||||
return `
|
||||
<textarea rows="5" class="script-area form-control ${script.name === val ? '' : 'd-none'}" name="${script.name}">${code}</textarea>
|
||||
<div class="script-area" ${script.name === val ? 'd-block' : 'd-none'}" name="${script.name}">
|
||||
<textarea rows="5" class="form-control">${code}</textarea>
|
||||
<span name="preview" class="d-inline-block fst-italic text-muted position-absolute m-0 end-0 px-4 py-2 pe-none">Preview</span>
|
||||
<textarea rows="5" name="preview" class="script-area form-control my-1 text-muted border-0" readonly>${this.codeToPreview(code)}</textarea>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
).join("\n")
|
||||
|
||||
reRenderScripts(scriptname) {
|
||||
const container = this.#rootdoc.querySelector("div[name=scripts_container]")
|
||||
const sn = scriptname ? scriptname : this.getCurrentScriptName()
|
||||
container.innerHTML = this.renderScripts(sn)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
Loading…
Reference in New Issue