added support for mulitichoice enum
This commit is contained in:
parent
50ee54a8ff
commit
8c80ab6f76
|
@ -9,10 +9,15 @@ class CCPInputWidgetController extends HTMLElement {
|
||||||
connectedCallback(){
|
connectedCallback(){
|
||||||
this.#data = JSON.parse(this.getAttribute("input"))
|
this.#data = JSON.parse(this.getAttribute("input"))
|
||||||
|
|
||||||
if(this.isEnum()){
|
if(this.isChecklist()){
|
||||||
|
|
||||||
const opts = this.#data.schema.enum.join(",")
|
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="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-enum>`
|
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="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-checklist>`
|
||||||
|
|
||||||
|
} 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="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-enum>`
|
||||||
}else if(this.isCode()){
|
}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="${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||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-textarea>`
|
||||||
|
|
||||||
|
@ -46,7 +51,11 @@ class CCPInputWidgetController extends HTMLElement {
|
||||||
return this.firstElementChild.name
|
return this.firstElementChild.name
|
||||||
}
|
}
|
||||||
|
|
||||||
isEnum(input){
|
isChecklist(){
|
||||||
|
return this.isEnum() && (this.#data.schema.format === "checklist")
|
||||||
|
}
|
||||||
|
|
||||||
|
isEnum(){
|
||||||
return (this.#data.schema.type === "string") && ("enum" in this.#data.schema)
|
return (this.#data.schema.type === "string") && ("enum" in this.#data.schema)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -117,6 +126,11 @@ class CCPBaseInputWidgetController extends HTMLElement{
|
||||||
this.value = Array(Math.max(this.#minOccurs,1)).fill(this.#default)
|
this.value = Array(Math.max(this.#minOccurs,1)).fill(this.#default)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setValue(v){
|
||||||
|
this.#value = v
|
||||||
|
this.render()
|
||||||
|
}
|
||||||
|
|
||||||
set value(v){
|
set value(v){
|
||||||
const actual = Array.isArray(v) ? v : [v]
|
const actual = Array.isArray(v) ? v : [v]
|
||||||
if(actual.length < this.#minOccurs || actual.length > this.#maxOccurs){
|
if(actual.length < this.#minOccurs || actual.length > this.#maxOccurs){
|
||||||
|
@ -272,6 +286,55 @@ class CCPEnumInputWidgetController extends CCPBaseInputWidgetController{
|
||||||
}
|
}
|
||||||
window.customElements.define('d4s-ccp-input-enum', CCPEnumInputWidgetController);
|
window.customElements.define('d4s-ccp-input-enum', CCPEnumInputWidgetController);
|
||||||
|
|
||||||
|
class CCPChecklistInputWidgetController extends CCPBaseInputWidgetController{
|
||||||
|
|
||||||
|
constructor(){
|
||||||
|
super()
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback(){
|
||||||
|
this.rootdoc.addEventListener("change", ev=>{
|
||||||
|
if(ev.target.getAttribute("name") === this.name){
|
||||||
|
const index = Number(ev.target.getAttribute("data-index"))
|
||||||
|
|
||||||
|
const elems = Array.prototype.slice.call(ev.currentTarget.querySelectorAll(`input[name='${this.name}'][data-index='${index}']`))
|
||||||
|
|
||||||
|
this.value[index] = elems.filter(e=>e.checked).map(e=>e.value).join(",")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
buildOpts(index, selections){
|
||||||
|
return 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")
|
||||||
|
}
|
||||||
|
|
||||||
|
content(){
|
||||||
|
if(this.value.length === 1){
|
||||||
|
const opts = this.buildOpts(0, this.value.length ? this.value[0].split(",") : [])
|
||||||
|
return `
|
||||||
|
<div class="my-2">
|
||||||
|
${opts}
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
var out =
|
||||||
|
this.value.map((c,i)=>{
|
||||||
|
const opts = this.buildOpts(i, c.split(","))
|
||||||
|
return `
|
||||||
|
<div class="my-2">
|
||||||
|
${opts}
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}).join("\n")
|
||||||
|
return out
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.customElements.define('d4s-ccp-input-checklist', CCPChecklistInputWidgetController);
|
||||||
|
|
||||||
class CCPTextAreaWidgetController extends CCPBaseInputWidgetController{
|
class CCPTextAreaWidgetController extends CCPBaseInputWidgetController{
|
||||||
|
|
||||||
constructor(){
|
constructor(){
|
||||||
|
@ -382,15 +445,19 @@ class CCPSecretInputWidgetController extends CCPBaseInputWidgetController{
|
||||||
content(){
|
content(){
|
||||||
if(this.value.length <= 1){
|
if(this.value.length <= 1){
|
||||||
return `
|
return `
|
||||||
<input data-index="0" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" type="password" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>
|
<div style="position:relative">
|
||||||
<span data-index="0" class="btn" style="position:relative;top:-2.7rem;float:right" name="password_toggle">👁</span>
|
<input data-index="0" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" type="password" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>
|
||||||
|
<span data-index="0" class="btn" style="position:absolute; right:0; bottom:0" name="password_toggle">👁</span>
|
||||||
|
</div>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
var out =
|
var out =
|
||||||
this.value.map((c,i)=>{
|
this.value.map((c,i)=>{
|
||||||
return `
|
return `
|
||||||
<input name="${this.name}" value="${c}" data-index="${i}" class="ccp-input my-2 form-control" placeholder="${this.title}" type="password" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>
|
<div style="position:relative">
|
||||||
<span data-index="${i}" class="btn" style="position:relative;top:-2.7rem;float:right" name="password_toggle">👁</span>
|
<input name="${this.name}" value="${c}" data-index="${i}" class="ccp-input my-2 form-control" placeholder="${this.title}" type="password" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>
|
||||||
|
<span data-index="${i}" class="btn" style="position:absolute; right:0; bottom:0" name="password_toggle">👁</span>
|
||||||
|
</div>
|
||||||
`
|
`
|
||||||
}).join("\n")
|
}).join("\n")
|
||||||
return out
|
return out
|
||||||
|
|
|
@ -65,27 +65,27 @@ class CCPInputWidgetEditorController extends HTMLElement{
|
||||||
this.innerHTML = `
|
this.innerHTML = `
|
||||||
<details ${ reopen ? 'open' : ''}>
|
<details ${ reopen ? 'open' : ''}>
|
||||||
<summary class="mb-3">
|
<summary class="mb-3">
|
||||||
<input class="form-control" style="width:auto;display:inline" required="required" name="id" value="${this.#input.id}" title="Id of input" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
<input class="form-control" style="width:auto;display:inline" required="required" name="id" value="${input.id}" title="Id of input" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
||||||
${ input.id !== 'ccpimage' ? this.renderDeleteButton() : ''}
|
${ input.id !== 'ccpimage' ? this.renderDeleteButton() : ''}
|
||||||
</summary>
|
</summary>
|
||||||
<div style="padding-left: 1rem;border-left: 1px solid gray;">
|
<div style="padding-left: 1rem;border-left: 1px solid gray;">
|
||||||
<div class="row mb-3">
|
<div class="row mb-3">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="form-field" title="Title">
|
<div class="form-field" title="Title">
|
||||||
<input name="title" class="form-control" placeholder="title" value="${this.#input.title}" required="required" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
<input name="title" class="form-control" placeholder="title" value="${input.title}" required="required" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<div class="form-field" title="description">
|
<div class="form-field" title="description">
|
||||||
<input name="description" class="form-control" placeholder="description" value="${this.#input.description}" required="required" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
<input name="description" class="form-control" placeholder="description" value="${input.description}" required="required" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row mb-3">
|
<div class="row mb-3">
|
||||||
<div class="col-3">
|
<div class="col-3">
|
||||||
<div class="form-field" title="Type">
|
<div class="form-field" title="Type">
|
||||||
<label>Type</label>
|
<label>Type</label>
|
||||||
<select name="type" class="form-control" placeholder="type" value="${this.#input.schema.type}" ${ input.id === 'ccpimage' ? 'readonly' : ''}>
|
<select name="type" class="form-control" placeholder="type" value="${input.schema.type}" ${ input.id === 'ccpimage' ? 'readonly' : ''}>
|
||||||
<option value="string">String</option>
|
<option value="string">String</option>
|
||||||
<option value="enum">Enum</option>
|
<option value="enum">Enum</option>
|
||||||
</select>
|
</select>
|
||||||
|
@ -94,13 +94,19 @@ class CCPInputWidgetEditorController extends HTMLElement{
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="form-field" title="Minimum occurrences">
|
<div class="form-field" title="Minimum occurrences">
|
||||||
<label>Min occurs</label>
|
<label>Min occurs</label>
|
||||||
<input value="${this.#input.minOccurs}" type="number" min="0" step="1" name="minOccurs" value="${this.#input.minOccurs}" required="required" class="form-control" placeholder="minOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
<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' : ''}/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="form-field" title="Maximum occurrences">
|
<div class="form-field" title="Maximum occurrences">
|
||||||
<label>Max occurs</label>
|
<label>Max occurs</label>
|
||||||
<input value="${this.#input.maxOccurs}" type="number" min="0" step="1" name="maxOccurs" value="${this.#input.maxOccurs}" required="required" class="form-control" placeholder="maxOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
<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' : ''}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col" title="Read only">
|
||||||
|
<label>Read only</label>
|
||||||
|
<div class="form-field">
|
||||||
|
<input type="checkbox" ${input.schema.readOnly ? 'checked' : ''} name="readonly" class="form-check-input">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -108,7 +114,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
|
||||||
<div class="col-3">
|
<div class="col-3">
|
||||||
<div class="form-field" title="Format">
|
<div class="form-field" title="Format">
|
||||||
<label>Format</label>
|
<label>Format</label>
|
||||||
<select value="${this.#input.schema.format}" name="format" class="form-control" ${ input.id === 'ccpimage' ? 'readonly' : ''}>
|
<select value="${input.schema.format}" name="format" class="form-control" ${ input.id === 'ccpimage' ? 'readonly' : ''}>
|
||||||
<option value="none" ${this.isSelectedFormat('none') ? "selected" : ""}>None</option>
|
<option value="none" ${this.isSelectedFormat('none') ? "selected" : ""}>None</option>
|
||||||
<option value="date" ${this.isSelectedFormat('date') ? "selected" : ""}>Date</option>
|
<option value="date" ${this.isSelectedFormat('date') ? "selected" : ""}>Date</option>
|
||||||
<option value="time" ${this.isSelectedFormat('time') ? "selected" : ""}>Time</option>
|
<option value="time" ${this.isSelectedFormat('time') ? "selected" : ""}>Time</option>
|
||||||
|
@ -116,32 +122,34 @@ class CCPInputWidgetEditorController extends HTMLElement{
|
||||||
<option value="code" ${this.isSelectedFormat('code') ? "selected" : ""}>Code</option>
|
<option value="code" ${this.isSelectedFormat('code') ? "selected" : ""}>Code</option>
|
||||||
<option value="file" ${this.isSelectedFormat('file') ? "selected" : ""}>File</option>
|
<option value="file" ${this.isSelectedFormat('file') ? "selected" : ""}>File</option>
|
||||||
<option value="secret" ${this.isSelectedFormat('secret') ? "selected" : ""}>Secret</option>
|
<option value="secret" ${this.isSelectedFormat('secret') ? "selected" : ""}>Secret</option>
|
||||||
|
<option value="url" ${this.isSelectedFormat('url') ? "selected" : ""}>Url</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col" title="Mime type">
|
<div class="col" title="Mime type">
|
||||||
<label>Mime</label>
|
<label>Mime</label>
|
||||||
<div class="form-field">
|
<div class="form-field">
|
||||||
<input value="${this.#input.schema.contentMediaType}" name="contentMediaType" class="form-control" placeholder="mime" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
<input value="${input.schema.contentMediaType}" name="contentMediaType" class="form-control" placeholder="mime" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col" title="Read only">
|
|
||||||
<label>Read only</label>
|
|
||||||
<div class="form-field">
|
|
||||||
<input type="checkbox" ${this.#input.schema.readOnly ? 'checked' : ''} name="readonly" class="form-check-input">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div name="enum-input" class="${this.#type !== 'enum' ? 'd-none' : ''} mb-3">
|
<div name="enum-input" class="${this.#type !== 'enum' ? 'd-none' : ''} mb-3">
|
||||||
<div class="form-field" title="options">
|
<div class="form-field" title="options">
|
||||||
<input name="options" class="form-control" type="text" placeholder="option" value="${this.#input.schema.enum ? this.#input.schema.enum.join(',') : ''}"/>
|
<input name="options" class="form-control" type="text" placeholder="option" value="${input.schema.enum ? input.schema.enum.join(',') : ''}"/>
|
||||||
<small class="form-text text-muted">Comma separated list of options</small>
|
<small class="form-text text-muted">Comma separated list of options</small>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-field" title="Format">
|
||||||
|
<label>Format</label>
|
||||||
|
<select value="${input.schema.format}" name="format" class="form-control">
|
||||||
|
<option value="select" ${this.isSelectedFormat('select') ? "selected" : ""}>Choice</option>
|
||||||
|
<option value="checklist" ${this.isSelectedFormat('list') ? "selected" : ""}>Multi Choice</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div name="input-default" class="mb-3">
|
<div name="input-default" class="mb-3">
|
||||||
<div class="form-field" title="Default value">
|
<div class="form-field" title="Default value">
|
||||||
${this.renderDefaultByType()}
|
${this.renderDefaultByType()}
|
||||||
<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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -176,7 +184,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
|
||||||
}
|
}
|
||||||
else if(ename === "format"){
|
else if(ename === "format"){
|
||||||
this.#input.schema.format = val
|
this.#input.schema.format = val
|
||||||
this.render(this.#input, this.#index, true)
|
//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] span[name=password_toggle]").classList.add("d-none")
|
||||||
this.querySelector("div[name=input-default] input[name=default]").type = ""
|
this.querySelector("div[name=input-default] input[name=default]").type = ""
|
||||||
if(this.#input.schema.format === "secret"){
|
if(this.#input.schema.format === "secret"){
|
||||||
|
|
Loading…
Reference in New Issue