styling, add&del buttons...

2025-10-20 20:44:12 +00:00
parent 7c92bbcdfe
commit 4712946876
11 changed files with 171 additions and 75 deletions
@@ -0,0 +1,63 @@
+if(!app.helpers) app.helpers = {}
+/**
+ * Mixing add-in methods to your view instance.
+ * All of this should not be a helper, but inherited this from WindozDomContent, but not my framework anymore.
+ * @category MyEic
+ */
+app.helpers.formBuilder = {
+
+    fieldsFromJSON(fieldsObj, fieldsetLabel=null){
+        let allFields = []
+        for(const propName in fieldsObj){
+            const fieldRow = ui.create(`<div class="cols-2"><label>${fieldsObj[propName].label}</label></div>`)
+            let component
+            switch(fieldsObj[propName].type){
+                case 'number':
+                    component = document.createElement('input')
+                    component.setAttribute('name',propName)
+                    component.setAttribute('type','number')
+                    if('min' in fieldsObj[propName]) component.setAttribute('min', fieldsObj[propName].min)
+                    if('max' in fieldsObj[propName]) component.setAttribute('max', fieldsObj[propName].max)
+                    component.value = fieldsObj[propName].default
+                    break
+                case 'string': 
+                    component = document.createElement('input')
+                    component.setAttribute('name',propName)
+                    component.setAttribute('type','text')
+                    component.value = fieldsObj[propName].default
+                    break
+                case 'boolean':                        
+                    component = document.createElement('bz-toggler')
+                    component.setAttribute('name',propName)
+                    component.setAttribute('trueValue','1')
+                    component.setAttribute('falseValue','0')
+                    component.value = fieldsObj[propName].default
+                    fieldRow.append(component.el)                    
+                    break                    
+                case 'list':
+                    component = document.createElement('bz-select')
+                    component.setAttribute('name',propName)
+                    component.fillOptions( fieldsObj[propName].choices.map(item => {
+                        return({ markup: `${item}`, value: item})
+                    })) 
+                    break
+                default:
+                    console.warn(`Unknown field type ${fieldsObj[propName].type}`)
+            }
+            fieldRow.append(component)
+            allFields.push(fieldRow)
+        }
+        if(fieldsetLabel!==null){
+            const fieldset = document.createElement('fieldset')
+            if(fieldsetLabel!=''){
+                const lgd = document.createElement('legend')
+                lgd.innerHTML = fieldsetLabel
+                fieldset.append(lgd)
+            }
+            fieldset.append(...allFields)
+            return([fieldset])
+        } else {
+            return(allFields)
+        }
+    },
+}