From 9af993ac6c9a6b73f680b4fdaf29800042b878df Mon Sep 17 00:00:00 2001
From: dcore94 <m.lettere@gmail.com>
Date: Tue, 24 Sep 2024 18:22:25 +0200
Subject: [PATCH] improved consistency between config changes and default value

---
 ccp/js/inputwidgeteditorcontroller.js | 223 +++++++++++++++++---------
 1 file changed, 143 insertions(+), 80 deletions(-)

diff --git a/ccp/js/inputwidgeteditorcontroller.js b/ccp/js/inputwidgeteditorcontroller.js
index 9adf5d5..ab47a2a 100644
--- a/ccp/js/inputwidgeteditorcontroller.js
+++ b/ccp/js/inputwidgeteditorcontroller.js
@@ -1,103 +1,103 @@
-class CCPInputWidgetEditorController extends HTMLElement{
-  
+class CCPInputWidgetEditorController extends HTMLElement {
+
   #input = null
   #index = null
   #type = null
   #messages = {
-    "en" : {
-      "input_id_help" : "The Id of the input. This has to be unique accross all the inputs the method. This is used as variable expansion in scripts.",
-      "input_delete_help" : "Delete this input",
-      "title" : "Title",
-      "title_help" : "Title of the input. This is how the input will appear in forms.",
-      "description" : "Description",
-      "description_help" : "A description for this input",
-      "min_occurs" : "Min. count",
-      "max_occurs" : "Max. count",
-      "min_occurs_help" : "Minimum cardinality of this input",
-      "max_occurs_help" : "Maximum cardinality of this input",
-      "type" : "Type",
-      "type_help" : "Set the type of the input. Either String or Enumeration",
-      "mime" : "Mime",
-      "mime_help" : "Set MIME type of expected input",
-      "format" : "Format",
-      "format_help" : "Set specific format to tune the widget that will be used in forms",
-      "readonly" : "Read only",
-      "readonly_help" : "If enabled this input will not be editable in forms",
-      "string" : "String",
-      "enum" : "Enumerated",
-      "options" : "Options",
-      "options_help" : "A comma separated list of options for this enumerated input",
-      "options_ext_help" : "Comma separated list of options",
-      "choice" : "Single choice",
-      "multichoice" : "Multiple choices",
-      "default" : "Default value",
-      "default_help" : "The default value applied for this input when nothing is set explicitly"
+    "en": {
+      "input_id_help": "The Id of the input. This has to be unique accross all the inputs the method. This is used as variable expansion in scripts.",
+      "input_delete_help": "Delete this input",
+      "title": "Title",
+      "title_help": "Title of the input. This is how the input will appear in forms.",
+      "description": "Description",
+      "description_help": "A description for this input",
+      "min_occurs": "Min. count",
+      "max_occurs": "Max. count",
+      "min_occurs_help": "Minimum cardinality of this input",
+      "max_occurs_help": "Maximum cardinality of this input",
+      "type": "Type",
+      "type_help": "Set the type of the input. Either String or Enumeration",
+      "mime": "Mime",
+      "mime_help": "Set MIME type of expected input",
+      "format": "Format",
+      "format_help": "Set specific format to tune the widget that will be used in forms",
+      "readonly": "Read only",
+      "readonly_help": "If enabled this input will not be editable in forms",
+      "string": "String",
+      "enum": "Enumerated",
+      "options": "Options",
+      "options_help": "A comma separated list of options for this enumerated input",
+      "options_ext_help": "Comma separated list of options",
+      "choice": "Single choice",
+      "multichoice": "Multiple choices",
+      "default": "Default value",
+      "default_help": "The default value applied for this input when nothing is set explicitly"
     }
   }
-  
+
   #delete_icon = `
     <svg style="width:24px;height:24px;pointer-events: none;" viewBox="0 0 24 24">
       <path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
     </svg>
   `
-    
-  constructor(){
+
+  constructor() {
     super();
-    
+
   }
-  
-  connectedCallback(){
-    
+
+  connectedCallback() {
+
   }
-  
-  getLabel(key, localehint){
+
+  getLabel(key, localehint) {
     const locale = localehint ? localehint : navigator.language
     const actlocale = this.#messages[locale] ? locale : "en"
     const msg = this.#messages[actlocale][key]
     return msg == null || msg == undefined ? key : this.#messages[actlocale][key]
   }
 
-  get index(){
+  get index() {
     return this.#index
   }
-   
-  isSelectedFormat(fmt){
+
+  isSelectedFormat(fmt) {
     return this.#input.schema.format === fmt
   }
- 
-  renderDefaultByType(){
+
+  renderDefaultByType() {
     return `<d4s-ccp-input name="default" input="${btoa(JSON.stringify(this.#input))}"></d4s-ccp-input>`
   }
 
-  renderDeleteButton(){
-    return  `<button data-index="${this.#index}" name="delete-input" title="${this.getLabel("input_delete_help")}" class="btn btn-danger ccp-toolbar-button">
+  renderDeleteButton() {
+    return `<button data-index="${this.#index}" name="delete-input" title="${this.getLabel("input_delete_help")}" class="btn btn-danger ccp-toolbar-button">
       ${this.#delete_icon} 
     </button>`
   }
 
-  render(input, i, reopen){
+  render(input, i, reopen) {
     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' : ''}>
+        <details ${reopen ? 'open' : ''}>
           <summary class="mb-3">
-            <input class="form-control" style="width:auto;display:inline" required="required" name="id" value="${input.id}" title="${this.getLabel("input_id_help")}" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
-            ${ input.id !== 'ccpimage' ? this.renderDeleteButton() : ''}  
+            <input class="form-control" style="width:auto;display:inline" required="required" name="id" value="${input.id}" title="${this.getLabel("input_id_help")}" ${input.id === 'ccpimage' ? 'readonly' : ''}/>
+            ${input.id !== 'ccpimage' ? this.renderDeleteButton() : ''}  
           </summary>
           <div style="padding-left: 1rem;border-left: 1px solid gray;">
             <div class="row mb-3">
               <div class="col">
                 <div class="form-field" title="${this.getLabel("title_help")}">
-                  <input name="title" class="form-control" placeholder="${this.getLabel("title")}" value="${input.title}" required="required" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
+                  <input name="title" class="form-control" placeholder="${this.getLabel("title")}" value="${input.title}" required="required" ${input.id === 'ccpimage' ? 'readonly' : ''}/>
                 </div>
               </div>
             </div>
             <div class="mb-3">
               <div class="form-field" title="${this.getLabel("description_help")}">
-                <textarea rows="1" name="description" class="form-control" placeholder="${this.getLabel("description")}" required="required" ${ input.id === 'ccpimage' ? 'readonly' : ''}>${input.description}</textarea>
+                <textarea rows="1" name="description" class="form-control" placeholder="${this.getLabel("description")}" required="required" ${input.id === 'ccpimage' ? 'readonly' : ''}>${input.description}</textarea>
               </div>
             </div>
             <div class="row mb-3">
@@ -106,20 +106,20 @@ class CCPInputWidgetEditorController extends HTMLElement{
                   <label>${this.getLabel("type")}</label>
                   <select name="type" class="form-control" placeholder="${this.getLabel("type")}" value="${this.#type}">
                     <option value="string" ${this.#type === "string" ? "selected" : ""}>${this.getLabel("string")}</option>
-                    ${ input.id === 'ccpimage' ? '' : `<option value="enum" ${this.#type === "enum" ? "selected" : ""}>${this.getLabel("enum")}</option>` }
+                    ${input.id === 'ccpimage' ? '' : `<option value="enum" ${this.#type === "enum" ? "selected" : ""}>${this.getLabel("enum")}</option>`}
                   </select>
                 </div>
               </div>
               <div class="col">
                 <div class="form-field" title="${this.getLabel("min_occurs_help")}">
                   <label>${this.getLabel("min_occurs")}</label>
-                  <input value="${minOccurs}" type="number" min="0" step="1" name="minOccurs" value="${minOccurs}" required="required" class="form-control" placeholder="${this.getLabel("min_occurs")}" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
+                  <input value="${minOccurs}" type="number" min="0" step="1" name="minOccurs" value="${minOccurs}" required="required" class="form-control" placeholder="${this.getLabel("min_occurs")}" ${input.id === 'ccpimage' ? 'readonly' : ''}/>
                 </div>
               </div>
               <div class="col">
                 <div class="form-field" title="${this.getLabel("max_occurs_help")}">
                   <label>${this.getLabel("max_occurs")}</label>
-                  <input value="${maxOccurs}" type="number" min="0" step="1" name="maxOccurs" value="${maxOccurs}" required="required" class="form-control" placeholder="${this.getLabel("max_occurs")}" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
+                  <input value="${maxOccurs}" type="number" min="0" step="1" name="maxOccurs" value="${maxOccurs}" required="required" class="form-control" placeholder="${this.getLabel("max_occurs")}" ${input.id === 'ccpimage' ? 'readonly' : ''}/>
                 </div>
               </div>
               <div class="col" title="${this.getLabel("readonly_help")}">
@@ -133,7 +133,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
               <div class="col-3">
                 <div class="form-field" title="${this.getLabel("format_help")}">
                   <label>${this.getLabel("format")}</label>
-                  <select value="${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="date" ${this.isSelectedFormat('date') ? "selected" : ""}>Date</option>
                     <option value="time" ${this.isSelectedFormat('time') ? "selected" : ""}>Time</option>
@@ -152,7 +152,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
               <div class="col" title="${this.getLabel("mime_help")}">
                 <label>${this.getLabel("mime")}</label>
                 <div class="form-field">
-                  <input value="${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>
@@ -165,7 +165,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
                 <label>${this.getLabel("format")}</label>
                 <select value="${input.schema.format}" name="format" class="form-control">
                   <option value="select" ${this.isSelectedFormat('select') ? "selected" : ""}>${this.getLabel("choice")}</option>
-                  <option value="checklist" ${this.isSelectedFormat('checklist') ? "selected" : ""}>${this.getLabel("multi_choice")}e</option>
+                  <option value="checklist" ${this.isSelectedFormat('checklist') ? "selected" : ""}>${this.getLabel("multi_choice")}</option>
                 </select>
               </div>
             </div>
@@ -178,10 +178,10 @@ class CCPInputWidgetEditorController extends HTMLElement{
             </div>
           </div>
         </details>
-    `    
-    this.addEventListener("click", ev=>{
+    `
+    this.addEventListener("click", ev => {
       const ename = ev.target.getAttribute("name")
-      if(ename === "password_toggle"){
+      if (ename === "password_toggle") {
         const w = this.querySelector("div[name=input-default] input[name=default]")
         w.type = (w.type === "password" ? "" : "password")
         ev.preventDefault()
@@ -189,17 +189,17 @@ class CCPInputWidgetEditorController extends HTMLElement{
     })
 
     const defaultinp = this.querySelector("div[name='input-default']")
-    defaultinp.addEventListener("input", ev=>{
+    defaultinp.addEventListener("input", ev => {
       const inp = this.querySelector("d4s-ccp-input")
       this.#input.schema.default = inp.value
     })
 
-    defaultinp.addEventListener("change", ev=>{
+    defaultinp.addEventListener("change", ev => {
       const inp = this.querySelector("d4s-ccp-input")
       this.#input.schema.default = inp.value
     })
 
-    defaultinp.addEventListener("click", ev=>{
+    defaultinp.addEventListener("click", ev => {
       const src = ev.target.getAttribute("name")
       if (src === "plus" || src === "minus") {
         const inp = this.querySelector("d4s-ccp-input")
@@ -207,60 +207,123 @@ class CCPInputWidgetEditorController extends HTMLElement{
       }
     })
 
-    this.addEventListener("input", ev=>{
+    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"){
+      if (ename === "id") {
         this.#input.id = val
       }
-      else if(ename === "title"){
+      else if (ename === "title") {
         this.#input.title = val
-        display.innerHTML = this.renderDefaultByType() 
+        display.innerHTML = this.renderDefaultByType()
       }
-      else if(ename === "description"){
+      else if (ename === "description") {
         this.#input.description = val
         display.innerHTML = this.renderDefaultByType()
       }
-      else if(ename === "minOccurs"){
+      else if (ename === "minOccurs") {
         this.#input.minOccurs = Number(val) ? Number(val) : 0
         display.innerHTML = this.renderDefaultByType()
       }
-      else if(ename === "maxOccurs"){
+      else if (ename === "maxOccurs") {
         this.#input.maxOccurs = Number(val) ? Number(val) : 0
         display.innerHTML = this.renderDefaultByType()
       }
-      else if(ename === "format"){
+      else if (ename === "format") {
+        this.#input.schema.default = this.formatConversion(this.#input.schema.format, this.#input.schema.default, val)
         this.#input.schema.format = val
         display.innerHTML = this.renderDefaultByType()
       }
-      else if(ename === "contentMediaType"){
+      else if (ename === "contentMediaType") {
         this.#input.schema.contentMediaType = val
         display.innerHTML = this.renderDefaultByType()
       }
-      else if(ename === "options"){
+      else if (ename === "options") {
         this.#input.schema.enum = val.split(",")
+        if (this.#input.schema.enum.indexOf(this.#input.schema.default) === -1) {
+          this.#input.schema.default = this.#input.schema.enum[0]
+        }
         display.innerHTML = this.renderDefaultByType()
       }
-      else if(ename === "readonly"){
+      else if (ename === "readonly") {
         this.#input.schema.readOnly = ev.target.checked
         display.innerHTML = this.renderDefaultByType()
       }
-      else if(ename === "type"){
+      else if (ename === "type") {
         this.#type = ev.target.value
-        if(this.#type === "enum"){
+        if (this.#type === "enum") {
           this.querySelector("div[name=string-input]").classList.add("d-none")
           this.querySelector("div[name=enum-input]").classList.remove("d-none")
+          this.querySelector("div[name=enum-input] select[name=format]").value = "select"
+          this.#input.schema.format = "select"
           this.#input.schema.enum = this.querySelector("input[name=options]").value.split(",")
-        }else if(this.#type === "string"){
+          if (this.#input.schema.enum.indexOf(this.#input.schema.default) === -1) {
+            this.#input.schema.default = this.#input.schema.enum[0]
+          }
+        } else if (this.#type === "string") {
           this.querySelector("div[name=enum-input]").classList.add("d-none")
           this.querySelector("div[name=string-input]").classList.remove("d-none")
+          this.#input.schema.format = "none"
           delete this.#input.schema['enum']
         }
-        display.innerHTML = this.renderDefaultByType() 
+        display.innerHTML = this.renderDefaultByType()
       }
     })
   }
-  
+
+  boolean2number(prev){
+    if(Array.isArray(prev)){
+      return prev.map(v=>(v === "true" || v === true ? "1" : "0"))
+    } else return prev === "true" || prev === true ? "1" : "0"
+  }
+
+  none2number(prev){
+    if(Array.isArray(prev)){
+      return prev.map(v=>(isNaN(Number(v)) ? "0" : v))
+    } else return isNaN(Number(prev)) ? "0" : prev
+  }
+
+  number2boolean(prev){
+    if(Array.isArray(prev)){
+      return prev.map(v=>(Number(v) !== 0 ? "true" : "false"))
+    } else return Number(prev) !== 0 ? "true" : "false"
+  }
+
+  none2boolean(prev){
+    if(Array.isArray(prev)){
+      return prev.map(v=>(["true", "false"].indexOf(v.toLowerCase()) !== -1 ? v.toLowerCase() : "false"))
+    } else return ["true", "false"].indexOf(prev.toLowerCase()) !== -1 ? prev.toLowerCase() : "false"
+  }
+
+  any2boolean(prev){
+    if(Array.isArray(prev)){
+      return prev.map(v=>String(!!v))
+    } else return String(!!v);
+  }
+
+  any2empty(prev){
+    if(Array.isArray(prev)){
+      return prev.map(v=>"")
+    } else return "";
+  }
+
+  formatConversion(prevformat, prevvalue, format){
+    if(format === "none"){
+      return prevvalue;
+    }
+    if(format === "number"){
+      if(prevformat === "boolean") return this.boolean2number(prevvalue);
+      if(!prevformat || prevformat === "none") return this.none2number(prevvalue);
+      return "0";
+    }
+    if(format === "boolean"){
+      if(prevformat === "number") return this.number2boolean(prevvalue)
+      if(!prevformat || prevformat === "none") return this.none2boolean(prevvalue)
+      return this.any2boolean(prevvalue)
+    }
+    return this.any2empty(prevvalue)
+  }
+
 }
 window.customElements.define('d4s-ccp-input-editor', CCPInputWidgetEditorController);
-- 
2.17.1