Issue #SH-653 fix: Backward compatibility - POC for existing form

js/dependency.js

@@ -1,9 +1,9 @@
-
 var dependency = {
     fields: undefined,
     init: function(fields) {
         this.fields = fields;
         const DROPDOWN_INPUT_TYPES = ['select', 'multiSelect'];
+        SBdynamicForm.initialized();
     },
     getTargetField: function(target){
         var object = [];
@@ -25,9 +25,11 @@ var dependency = {
         }
     },
     getFormValues: function(){
-        var updatedFormData = [];
+        var updatedFormData = new Object();
         this.fields.forEach(function(field){
             updatedFormData[field.code] = $('#df_' + field.code).val();
+            var count = Array.isArray(updatedFormData[field.code]) ? updatedFormData[field.code].length : (updatedFormData[field.code] ? 1 : 0) ;
+            $("#selectedCount_" + field.code).text(count);
         });
         return updatedFormData;
     },

js/elements.js

@@ -1,24 +1,60 @@
-
 var dfElements = {
     create: function() {
 
     },
-    createElement: function(obj) {
+    createElement: function(obj, showSelectedCount) {
         switch(obj.inputType) {
             case "text": dfElements.addElement(obj, 'input'); break;
             case "textarea": dfElements.addElement(obj, 'textarea'); break;
-            case "checkbox": dfElements.addElement(obj, 'input', 'checkbox'); break;            
-            case "select": dfElements.addElement(obj, 'select'); break;
-            case "multiselect": dfElements.addElement(obj, 'select'); break;
+            case "checkbox": dfElements.addElement(obj, 'input', 'checkbox'); break;
+            case "checkboxstandard": dfElements.addElement(obj, 'input', 'checkboxstandard'); break;
+            case "radio": dfElements.addElement(obj, 'input', 'radio', undefined, showSelectedCount); break;          
+            case "select": dfElements.addElement(obj, 'select', undefined, showSelectedCount); break;
+            case "multiselect": dfElements.addElement(obj, 'select', undefined, showSelectedCount); break;
             case "label": dfElements.addElement(obj, 'label'); break;
-            default: console.log("no element added");
+            default: (obj.renderingHints.html) ? dfElements.addHtmlElement(obj) : console.log("no element added");
         }
     },
-    addElement: function(obj, tag, type) {
+    addHtmlElement: function(obj){
+        // var ele = $('[name ="'+ obj.code+'"]');
+        // if(ele) {
+        //     var parentEle = ele[0];
+        //     $(parentEle).html(obj.renderingHints.html);
+        // }
+    },
+    updateElement: function(directive, configObj){
+        var ele = $('[name ="'+ directive.code+'"]');
+        var directiveElement =  $("#" + directive.id);
+        var directiveObj = {};
+        configObj.fields.forEach(function(obj){
+            if(obj.code === directive.code)
+                directiveObj = obj
+        })
+        var style = {
+            "display": "block"
+        }
+        directiveElement.css(style);
+        ecEditor.addEventListener(directive.event, function (event, data) {
+            console.log("lib:editor:form:change", data)
+        });
+        if(ele) {
+            ele.append(document.getElementById(directive.id))
+        }
+
+    },
+    addElement: function(obj, tag, type, showSelectedCount) {
         var ele = $('[name ="'+ obj.code+'"]');
         if(ele) {
             var parentEle = ele[0];
-            var eleStr = '<span>'+obj.name+'</span><' + tag + ' id="df_' + obj.code + '" onChange="dfElements.updateForm(this)" code="'+obj.code +'" data="'+obj.name+'"></' + tag + '>' ;
+            if (showSelectedCount){
+                var eleStr = '<div><span>'+obj.name+'</span> (<span id="selectedCount_'+obj.code+'">0</span>)</div><' + tag + ' id="df_' + obj.code + '" onChange="dfElements.updateForm(this)" code="'+obj.code +'" data="'+obj.name+'"></' + tag + '>' ;
+            }else{
+                var eleStr = '<span>'+obj.name+'</span><' + tag + ' id="df_' + obj.code + '" onChange="dfElements.updateForm(this)" code="'+obj.code +'" data="'+obj.name+'"></' + tag + '>' ;
+            }
+
+            if (obj.inputType === "multiselect"){
+                $('#df_'+obj.code).attr('multiple', true);
+            }
             $(parentEle).html(eleStr);
             if(type) $('#df_'+obj.code).attr('type', type);
         }
@@ -54,8 +90,8 @@ var dfElements = {
         return uniqueOptions;
     },
     setOptions: function(obj, optionData){
-        optionData = this.getUniqOptions(optionData);
-        optionData = this.getSortedOptions(optionData);
+        //optionData = this.getUniqOptions(optionData);
+        //optionData = this.getSortedOptions(optionData);
         if (obj.inputType == "select" || obj.inputType =="multiselect"){
             var select = $('#df_' + obj.code);
             select.empty();
@@ -68,7 +104,7 @@ var dfElements = {
                 }
                 options[0] = new Option(obj.placeholder, "");
                 $.each(optionData, function(index, option) {
-                    options[index + 1] = new Option(option.name, option.name);
+                    options[index + 1] = (option.name) ? new Option(option.name, option.name) : new Option(option, option)
                 });
             }
         }
@@ -82,8 +118,12 @@ var dfElements = {
         var element = $('#df_' + code);
         if (element.length &&  Array.isArray(data)){
             dfElements.setSelect(code, data[0]);
+            var count = data.length || 0 ;
+            $("#selectedCount_" + code).text(count);
         }else{
             $('#df_' + code).val(data);
+            var count = data ? 1 : 0;
+            $("#selectedCount_" + code).text(count);
         }
     }
 }