org.onap migration
[vid.git] / vid-app-common / src / main / webapp / app / vid / scripts / directives / parameterBlockDirective.js
index 811a51e..d36b382 100755 (executable)
@@ -20,7 +20,7 @@
 \r
 "use strict";\r
 \r
-var parameterBlockDirective = function($log, PARAMETER, UtilityService) {\r
+var parameterBlockDirective = function($log, PARAMETER, UtilityService, $compile) {\r
     /*\r
      * If "IS_SINGLE_OPTION_AUTO_SELECTED" is set to "true" ...\r
      * \r
@@ -49,326 +49,394 @@ var parameterBlockDirective = function($log, PARAMETER, UtilityService) {
     var checkboxInputStyle = "height: 18px; width: 18px; padding: 2px 5px;";\r
     var selectStyle = "height: 25px; padding: 2px; text-align: center;";\r
     var requiredLabelStyle = "width: 25px; padding: 5px 10px 10px 5px;";\r
-    var textInputPrompt = "Enter data";\r
+\r
 \r
     var getParameterHtml = function(parameter, editable) {\r
-       var style = valueStyle;\r
-       var attributeString = "";\r
-       if (parameter.type === PARAMETER.BOOLEAN) {\r
-           style = checkboxValueStyle;\r
-       }\r
-       if (UtilityService.hasContents(parameter.description)) {\r
-           attributeString += " title=' " + parameter.description + " '";\r
-       }\r
-       var html = "<tr><td style='" + nameStyle + "'" + attributeString + ">"\r
-               + getNameHtml(parameter) + "</td><td style='" + style + "'>";\r
-       if (editable === undefined) {\r
-           if (UtilityService.hasContents(parameter.value)) {\r
-               html += parameter.value;\r
-           }\r
-       } else {\r
-           html += getValueHtml(parameter);\r
-       }\r
-       html += "</td></tr>";\r
-       return html;\r
+        var style = valueStyle;\r
+        var attributeString = "";\r
+        if (parameter.type === PARAMETER.BOOLEAN) {\r
+            style = checkboxValueStyle;\r
+        }\r
+        if (UtilityService.hasContents(parameter.description)) {\r
+            attributeString += " title=' " + parameter.description + " '";\r
+        }\r
+        var rowstyle='';\r
+        if(parameter.type == 'file' && !parameter.isVisiblity){\r
+            rowstyle = ' style="display:none;"';\r
+        }\r
+        var html = "<tr"+rowstyle+"><td style='" + nameStyle + "'" + attributeString + ">"\r
+            + getNameHtml(parameter) + "</td>";\r
+        if (editable === undefined) {\r
+            if (UtilityService.hasContents(parameter.value)) {\r
+                html += "<td data-tests-id='" +  getParameterName(parameter) + "' style='" + style + "'>" + parameter.value;\r
+            } else {\r
+                html += "<td data-tests-id='" +  getParameterName(parameter) + "' style='" + style + "'>";\r
+            }\r
+        } else {\r
+            html += "<td style='" + style + "'>" + getValueHtml(parameter);\r
+        }\r
+        html += "</td></tr>";\r
+        return html;\r
     };\r
 \r
     var updateParameter = function(parameter, element, editable) {\r
-       $(element).parent().parent().children("td").first().html(\r
-               getNameHtml(parameter));\r
-       if (editable === undefined) {\r
-           $(element).html(parameter.value);\r
-       } else {\r
-           $(element).parent().html(getValueHtml(parameter));\r
-       }\r
+        $(element).parent().parent().children("td").first().html(\r
+            getNameHtml(parameter));\r
+        if (editable === undefined) {\r
+            $(element).html(parameter.value);\r
+        } else {\r
+            $(element).parent().html(getValueHtml(parameter));\r
+        }\r
     };\r
 \r
     var getNameHtml = function(parameter) {\r
-       if (parameter.isVisible === false) {\r
-           return "";\r
-       }\r
-       var name = "";\r
-       if (UtilityService.hasContents(parameter.name)) {\r
-           name = parameter.name;\r
-       } else {\r
-           name = parameter.id;\r
-       }\r
-       var requiredLabel = "";\r
-       if (parameter.isRequired) {\r
-           requiredLabel = "<img src='app/vid/images/asterisk.png' style='"\r
-                   + requiredLabelStyle + "'></img>";\r
-       }\r
-       return name + ":" + requiredLabel;\r
+        if (parameter.isVisible === false) {\r
+            return "";\r
+        }\r
+        var name = getParameterName(parameter);\r
+\r
+        var requiredLabel = "";\r
+        if (parameter.isRequired) {\r
+            requiredLabel = "<img src='app/vid/images/asterisk.png' style='"\r
+                + requiredLabelStyle + "'></img>";\r
+        }\r
+        return name + ":" + requiredLabel;\r
     };\r
 \r
+    var getParameterName = function(parameter) {\r
+        var name = "";\r
+        if (UtilityService.hasContents(parameter.name)) {\r
+            name = parameter.name;\r
+        } else {\r
+            name = parameter.id;\r
+        }\r
+        return name;\r
+    }\r
+\r
     var getValueHtml = function(parameter) {\r
-       var attributeString = " parameter-id='" + parameter.id + "'";\r
-       var additionalStyle = "";\r
-       if (parameter.isEnabled === false) {\r
-           attributeString += " disabled='disabled'";\r
-       }\r
-       if (parameter.isRequired) {\r
-               attributeString += " is-required='true'";\r
-       }\r
-       if (UtilityService.hasContents(parameter.description)) {\r
-           attributeString += " title=' " + parameter.description + " '";\r
-       }\r
-       if (UtilityService.hasContents(parameter.isReadOnly) && (parameter.isReadOnly === true)) {\r
-               attributeString += " readonly";\r
-       }\r
-       if ( (UtilityService.hasContents(parameter.maxLength)) && (UtilityService.hasContents(parameter.minLength)) ) {\r
-               attributeString += " pattern='.{" + parameter.minLength + "," + parameter.maxLength + "}' required";\r
-       }\r
-       else if (UtilityService.hasContents(parameter.maxLength)) {\r
-               attributeString += " maxlength='" + parameter.maxLength + "'";\r
-       }\r
-       else if (UtilityService.hasContents(parameter.minLength)) {\r
-               attributeString += " pattern='.{" + parameter.minLength + ",}'"\r
-       }\r
-       if (parameter.isVisible === false) {\r
-           additionalStyle = " visibility: hidden;";\r
-       }\r
-       \r
-       var name = "";\r
-       if (UtilityService.hasContents(parameter.name)) {\r
-           name = parameter.name;\r
-       } else {\r
-           name = parameter.id;\r
-       }\r
-       attributeString += " parameter-name='" + name + "'";\r
-\r
-       switch (parameter.type) {\r
-       case PARAMETER.BOOLEAN:\r
-               if (parameter.value) {\r
-                       return "<select" + attributeString + " style='" + selectStyle\r
-                       + additionalStyle + "'>" + "<option value=true>true</option>"\r
-                       + "<option value=false>false</option>";\r
-                       + "</select>";\r
-               }else{\r
-                       return "<select" + attributeString + " style='" + selectStyle\r
-                       + additionalStyle + "'>" + "<option value=false>false</option>"\r
-                       + "<option value=true>true</option>"\r
-                       + "</select>";\r
-               }\r
-           break;\r
-       case PARAMETER.NUMBER:\r
-               var value=parameter.value;\r
-               var parameterSpec = "<input type='number'" + attributeString + " style='" + textInputStyle + additionalStyle + "'";\r
-               \r
-               if ( UtilityService.hasContents(parameter.min) ) {\r
-                       parameterSpec += " min='" + parameter.min + "'";\r
-               }\r
-               if ( UtilityService.hasContents(parameter.max) ) {\r
-                       parameterSpec += " max='" + parameter.max + "'";\r
-               }\r
-               if (UtilityService.hasContents(value)) {\r
-               parameterSpec += " value='" + value + "'";\r
-               }\r
-               parameterSpec += ">";\r
-               \r
-               /*if(!isNaN(value) && value.toString().index('.') != -1){\r
-                       //float\r
-                        return "<input type='text'" + attributeString + " style='"\r
-                           + textInputStyle + additionalStyle + "' only-integers" + value\r
-                           + "></input>";\r
-               } else {\r
-                       //integer\r
-                        return "<input type='text'" + attributeString + " style='"\r
-                           + textInputStyle + additionalStyle + "'  only-float" + value\r
-                           + "></input>";\r
-               }*/\r
-               return (parameterSpec);\r
-           break;\r
-       case PARAMETER.SELECT:\r
-           if (UtilityService.hasContents(parameter.prompt)) {\r
-               attributeString += " prompt='" + parameter.prompt + "'";\r
-           }\r
-           return "<select" + attributeString + " style='" + selectStyle\r
-                   + additionalStyle + "'>" + getOptionListHtml(parameter)\r
-                   + "</select>";\r
-           break;\r
-       case PARAMETER.STRING:\r
-       default:\r
-           var value = "";\r
-           if (UtilityService.hasContents(parameter.value)) {\r
-               value = " value='" + parameter.value + "'";\r
-           }\r
-           if (UtilityService.hasContents(parameter.prompt)) {\r
-               attributeString += " placeholder='" + parameter.prompt + "'";\r
-           } else if (textInputPrompt !== "") {\r
-               attributeString += " placeholder='" + textInputPrompt + "'";\r
-           }\r
-           var finalString = "<input type='text'" + attributeString + " style='"\r
-           + textInputStyle + additionalStyle + "'" + value\r
-           + ">";\r
-           return finalString;\r
-       }\r
+\r
+        var textInputPrompt = "Enter data";\r
+        var attributeString = " data-tests-id='" + parameter.id +"' parameter-id='" + parameter.id + "'";\r
+        var additionalStyle = "";\r
+        if (parameter.isEnabled === false) {\r
+            attributeString += " disabled='disabled'";\r
+        }\r
+        if (parameter.isRequired) {\r
+            attributeString += " is-required='true'";\r
+        }\r
+        if (UtilityService.hasContents(parameter.description)) {\r
+            attributeString += " title=' " + parameter.description + " '";\r
+        }\r
+        if (UtilityService.hasContents(parameter.isReadOnly) && (parameter.isReadOnly === true)) {\r
+            attributeString += " readonly";\r
+        }\r
+        if ( (UtilityService.hasContents(parameter.maxLength)) && (UtilityService.hasContents(parameter.minLength)) ) {\r
+            attributeString += " pattern='.{" + parameter.minLength + "," + parameter.maxLength + "}' required";\r
+        }\r
+        else if (UtilityService.hasContents(parameter.maxLength)) {\r
+            attributeString += " maxlength='" + parameter.maxLength + "'";\r
+        }\r
+        else if (UtilityService.hasContents(parameter.minLength)) {\r
+            attributeString += " pattern='.{" + parameter.minLength + ",}'"\r
+        }\r
+        if (parameter.isVisible === false) {\r
+            additionalStyle = " visibility: hidden;";\r
+        }\r
+\r
+        var name = "";\r
+        if (UtilityService.hasContents(parameter.name)) {\r
+            name = parameter.name;\r
+        } else {\r
+            name = parameter.id;\r
+        }\r
+        attributeString += " parameter-name='" + name + "'";\r
+\r
+        if ( parameter.type === PARAMETER.MAP ) {\r
+            textInputPrompt = "{<key1>: <value1>,\.\.\.,<keyN>: <valueN>}";\r
+        }\r
+\r
+        if ( parameter.type === PARAMETER.LIST ) {\r
+            textInputPrompt = "[<value1>,\.\.\.,<valueN>]";\r
+        }\r
+\r
+        switch (parameter.type) {\r
+            case PARAMETER.BOOLEAN:\r
+                if (parameter.value) {\r
+                    return "<select" + attributeString + " style='" + selectStyle\r
+                        + additionalStyle + "'>" + "<option value=true>true</option>"\r
+                        + "<option value=false>false</option>";\r
+                    + "</select>";\r
+                }else{\r
+                    return "<select" + attributeString + " style='" + selectStyle\r
+                        + additionalStyle + "'>" + "<option value=false>false</option>"\r
+                        + "<option value=true>true</option>"\r
+                        + "</select>";\r
+                }\r
+                break;\r
+            case PARAMETER.CHECKBOX:\r
+                if (parameter.value) {\r
+                    return "<input type='checkbox' "+attributeString+ " checked='checked' style='"+checkboxInputStyle+"'"\r
+                        + " value='true'/>";\r
+                }else{\r
+                    return "<input type='checkbox' "+attributeString+ "' style='"+checkboxInputStyle+"'"\r
+                        + " value='false'/>";\r
+                }\r
+                break;\r
+            case PARAMETER.FILE:\r
+                return "<input type='file' "+attributeString+ " id='"+parameter.id+"' value='"+parameter.value+"'/>";\r
+                break;\r
+            case PARAMETER.NUMBER:\r
+                var value=parameter.value;\r
+                var parameterSpec = "<input type='number'" + attributeString + " style='" + textInputStyle + additionalStyle + "'";\r
+\r
+                if ( UtilityService.hasContents(parameter.min) ) {\r
+                    parameterSpec += " min='" + parameter.min + "'";\r
+                }\r
+                if ( UtilityService.hasContents(parameter.max) ) {\r
+                    parameterSpec += " max='" + parameter.max + "'";\r
+                }\r
+                if (UtilityService.hasContents(value)) {\r
+                    parameterSpec += " value='" + value + "'";\r
+                }\r
+                parameterSpec += ">";\r
+\r
+                /*if(!isNaN(value) && value.toString().index('.') != -1){\r
+                 //float\r
+                 return "<input type='text'" + attributeString + " style='"\r
+                 + textInputStyle + additionalStyle + "' only-integers" + value\r
+                 + "></input>";\r
+                 } else {\r
+                 //integer\r
+                 return "<input type='text'" + attributeString + " style='"\r
+                 + textInputStyle + additionalStyle + "'  only-float" + value\r
+                 + "></input>";\r
+                 }*/\r
+                return (parameterSpec);\r
+                break;\r
+            case PARAMETER.SELECT:\r
+                if (UtilityService.hasContents(parameter.prompt)) {\r
+                    attributeString += " prompt='" + parameter.prompt + "'";\r
+                }\r
+                return "<select" + attributeString + " style='" + selectStyle\r
+                    + additionalStyle + "'>" + getOptionListHtml(parameter)\r
+                    + "</select>";\r
+                break;\r
+            case PARAMETER.MULTI_SELECT:\r
+                return '<multiselect id="' + parameter.id + '"' + attributeString + ' ng-model="multiselectModel.' + parameter.id + '" options="getOptionsList(\'' + parameter.id + '\')" display-prop="name" id-prop="id"></multiselect>';\r
+                break;\r
+            case PARAMETER.STRING:\r
+            default:\r
+                var value = "";\r
+                if (UtilityService.hasContents(parameter.value)) {\r
+                    value = " value='" + parameter.value + "'";\r
+                }\r
+                if (UtilityService.hasContents(parameter.prompt)) {\r
+                    attributeString += " placeholder='" + parameter.prompt + "'";\r
+                } else if (textInputPrompt !== "") {\r
+                    attributeString += " placeholder='" + textInputPrompt + "'";\r
+                }\r
+                var finalString = "<input type='text'" + attributeString + " style='"\r
+                    + textInputStyle + additionalStyle + "'" + value\r
+                    + ">";\r
+                return finalString;\r
+        }\r
     };\r
-    \r
-    \r
+\r
+\r
     var getBooleanListHtml = function(parameter){\r
-       var html = "";\r
-       \r
+        var html = "";\r
+\r
     };\r
 \r
     var getOptionListHtml = function(parameter) {\r
 \r
-       var html = "";\r
-\r
-       if (!angular.isArray(parameter.optionList)\r
-               || parameter.optionList.length === 0) {\r
-           return "";\r
-       }\r
-\r
-       if (UtilityService.hasContents(parameter.prompt)) {\r
-           if (!(IS_SINGLE_OPTION_AUTO_SELECTED && parameter.optionList.length === 1)) {\r
-               html += "<option value=''>" + parameter.prompt + "</option>";\r
-           }\r
-       }\r
-\r
-       for (var i = 0; i < parameter.optionList.length; i++) {\r
-           var option = parameter.optionList[i];\r
-           var name = option.name;\r
-           var value = "";\r
-           if (option.id === undefined) {\r
-               value = option.name;\r
-           } else {\r
-               if (name === undefined) {\r
-                   name = option.id;\r
-               }\r
-               value = option.id;\r
-           }\r
-           if (option.isDefault === undefined || option.isDefault === false )  {\r
-               html += "<option value='" + value + "'>" + name + "</option>";\r
-           }\r
-           else {\r
-               html += "<option value='" + value + "' selected>" + name + "</option>";\r
-           }\r
-       }\r
-       return html;\r
+        var html = "";\r
+\r
+        if (!angular.isArray(parameter.optionList)\r
+            || parameter.optionList.length === 0) {\r
+            return "";\r
+        }\r
+\r
+        if (UtilityService.hasContents(parameter.prompt)) {\r
+                html += "<option value=''>" + parameter.prompt + "</option>";\r
+        }\r
+\r
+        for (var i = 0; i < parameter.optionList.length; i++) {\r
+            var option = parameter.optionList[i];\r
+            var name = option.name;\r
+            var value = "";\r
+            if (option.id === undefined) {\r
+                value = option.name;\r
+            } else {\r
+                if (name === undefined) {\r
+                    name = option.id;\r
+                }\r
+                value = option.id;\r
+            }\r
+            html += getOptionHtml(option.isPermitted, option.isDataLoading, value, name, parameter);\r
+        }\r
+        return html;\r
     };\r
 \r
+    function getOptionHtml(isPermitted, isDefault, value, name, parameter) {\r
+        var html = "";\r
+        if (isDefault === undefined || isDefault === false )  {\r
+            if(isPermitted)\r
+                html = "<option class='" + parameter.id + "Option' value='" + value + "'>" + name + "</option>";\r
+            else {\r
+                html = "<option class='" + parameter.id + "Option' value='" + value + "' disabled>" + name + "</option>";\r
+            }\r
+        }\r
+        else {\r
+            if(isPermitted)\r
+                html = "<option class='" + parameter.id + "Option' value='" + value + "'>" + "' selected>"  + name + "</option>";\r
+            else {\r
+                html = "<option class='" + parameter.id + "Option' value='" + value + "' disabled>" + "' selected>"  + name + "</option>";\r
+            }\r
+        }\r
+        return html;\r
+    }\r
+\r
     var getParameter = function(element, expectedId) {\r
-       var id = $(element).attr("parameter-id");\r
-       if (expectedId !== undefined && expectedId !== id) {\r
-           return undefined;\r
-       }\r
-       var parameter = {\r
-           id : id\r
-       };\r
-       if ($(element).prop("type") === "checkbox") {\r
-           parameter.value = $(element).prop("checked");\r
-       } else {\r
-           if ($(element).prop("type") === "text") {\r
-               $(element).val($(element).val().trim());\r
-           }\r
-           parameter.value = $(element).val();\r
-       }\r
-       if ($(element).prop("selectedIndex") === undefined) {\r
-           parameter.selectedIndex = -1;\r
-       } else {\r
-           parameter.selectedIndex = $(element).prop("selectedIndex");\r
-           if (UtilityService.hasContents($(element).attr("prompt"))) {\r
-               parameter.selectedIndex--;\r
-           }\r
-       }\r
-       return parameter;\r
+        var id = $(element).attr("parameter-id");\r
+        if (!id || (expectedId !== undefined && expectedId !== id)) {\r
+            return undefined;\r
+        }\r
+        var parameter = {\r
+            id : id\r
+        };\r
+        if ($(element).prop("type") === "checkbox") {\r
+            parameter.value = $(element).prop("checked");\r
+        }else if ($(element).prop("type") === "file") {\r
+            parameter.value = $('#'+id).attr("value");\r
+\r
+        } else {\r
+            if ($(element).prop("type") === "text") {\r
+                $(element).val($(element).val().trim());\r
+            }\r
+            parameter.value = $(element).val();\r
+        }\r
+        if ($(element).prop("selectedIndex") === undefined) {\r
+            parameter.selectedIndex = -1;\r
+        } else {\r
+            parameter.selectedIndex = $(element).prop("selectedIndex");\r
+            if (UtilityService.hasContents($(element).attr("prompt"))) {\r
+                parameter.selectedIndex--;\r
+            }\r
+        }\r
+        return parameter;\r
     };\r
 \r
     var getRequiredField = function(element) {\r
-       if ($(element).prop("type") === "text") {\r
-           $(element).val($(element).val().trim());\r
-       }\r
-       if ($(element).val() === "" || $(element).val() === null) {\r
-           return '"' + $(element).attr("parameter-name") + '"';\r
-       } else {\r
-           return "";\r
-       }\r
+        if($(element).is("multiselect")) {\r
+            if(!$(element).find(".active").text().trim()) {\r
+                return '"' + $(element).attr("parameter-name") + '"';\r
+            }\r
+        }\r
+        else {\r
+            if ($(element).prop("type") === "text") {\r
+                $(element).val($(element).val().trim());\r
+            }\r
+            if ($(element).val() === "" || $(element).val() === null) {\r
+                return '"' + $(element).attr("parameter-name") + '"';\r
+            }\r
+        }\r
+        return "";\r
     };\r
 \r
     var callback = function(element, scope) {\r
-       scope.callback({\r
-           id : $(element).attr("parameter-id")\r
-       });\r
+        scope.callback({\r
+            id : $(element).attr("parameter-id")\r
+        });\r
     };\r
 \r
     return {\r
-       restrict : "EA",\r
-       replace  : true,\r
-       template : "<div><table style='" + tableStyle + "'></table></div>",\r
-       scope : {\r
-           control : "=",\r
-           callback : "&"\r
-       },\r
-       link : function(scope, element, attrs) {\r
-               \r
-           var control = scope.control || {};\r
-\r
-           control.setList = function(parameterList) {\r
-               var html = "";\r
-               for (var i = 0; i < parameterList.length; i++) {\r
-                   html += getParameterHtml(parameterList[i], attrs.editable);\r
-               }\r
-               element.html(html);\r
-               element.find("input, select").bind("change", function() {\r
-                   callback(this, scope);\r
-               });\r
-           }\r
-\r
-           control.updateList = function(parameterList) {\r
-               element.find("input, select").each(\r
-                       function() {\r
-                           for (var i = 0; i < parameterList.length; i++) {\r
-                               if (parameterList[i].id === $(this).attr(\r
-                                       "parameter-id")) {\r
-                                   updateParameter(parameterList[i], this,\r
-                                           attrs.editable);\r
-                               }\r
-                           }\r
-                       });\r
-               element.find("input, select").bind("change", function() {\r
-                   callback(this, scope);\r
-               });\r
-           }\r
-\r
-           control.getList = function(expectedId) {\r
-               var parameterList = new Array();\r
-               element.find("input, select").each(function() {\r
-                   var parameter = getParameter(this, expectedId);\r
-                   if (parameter !== undefined) {\r
-                       parameterList.push(parameter);\r
-                   }\r
-               });\r
-               return parameterList;\r
-           }\r
-\r
-           control.getRequiredFields = function() {\r
-               var requiredFields = "";\r
-               var count = 0;\r
-               element.find("input, select").each(function() {\r
-                       if ($(this).attr("is-required") === "true") {\r
-                       var requiredField = getRequiredField(this);\r
-                       if (requiredField !== "") {\r
-                           if (++count == 1) {\r
-                               requiredFields = requiredField;\r
-                           }\r
-                       }\r
-                       }\r
-               });\r
-               if (--count <= 0) {\r
-                   return requiredFields;\r
-               } else if (count == 1) {\r
-                   return requiredFields + " and 1 other field";\r
-               } else {\r
-                   return requiredFields + " and " + count + " other fields";\r
-               }\r
-           }\r
-    }\r
+        restrict : "EA",\r
+        replace  : true,\r
+        template : "<div><table style='" + tableStyle + "'></table></div>",\r
+        scope : {\r
+            control : "=",\r
+            callback : "&"\r
+        },\r
+        link : function(scope, element, attrs) {\r
+\r
+            var control = scope.control || {};\r
+            scope.multiselectModel = {};\r
+\r
+            scope.getOptionsList = function (parameterId) {\r
+                return _.find(scope.parameterList, {'id': parameterId})["optionList"];\r
+            };\r
+            control.setList = function(parameterList) {\r
+                scope.parameterList = parameterList;\r
+                scope.multiselectModel = {};\r
+                var html = "";\r
+                for (var i = 0; i < parameterList.length; i++) {\r
+                    html += getParameterHtml(parameterList[i], attrs.editable);\r
+                }\r
+                element.replaceWith($compile(element.html(html))(scope));\r
+\r
+                element.find("input, select").bind("change", function() {\r
+                    callback(this, scope);\r
+                });\r
+            }\r
+\r
+            control.updateList = function(parameterList) {\r
+                element.find("input, select").each(\r
+                    function() {\r
+                        for (var i = 0; i < parameterList.length; i++) {\r
+                            if (parameterList[i].id === $(this).attr(\r
+                                    "parameter-id")) {\r
+                                updateParameter(parameterList[i], this,\r
+                                    attrs.editable);\r
+                            }\r
+                        }\r
+                    });\r
+                element.find("input, select").bind("change", function() {\r
+                    callback(this, scope);\r
+                });\r
+            }\r
+\r
+            control.getList = function(expectedId) {\r
+                var parameterList = new Array();\r
+                element.find("input, select").each(function() {\r
+                    var parameter = getParameter(this, expectedId);\r
+                    if (parameter !== undefined) {\r
+                        parameterList.push(parameter);\r
+                    }\r
+                });\r
+                angular.forEach(scope.multiselectModel, function(value, key) {\r
+                    parameterList.push({id: key, value: value});\r
+                });\r
+                return parameterList;\r
+            }\r
+\r
+            control.getRequiredFields = function() {\r
+                var requiredFields = "";\r
+                var count = 0;\r
+                element.find("input, select, multiselect").each(function() {\r
+                    if ($(this).attr("is-required") === "true") {\r
+                        var requiredField = getRequiredField(this);\r
+                        if (requiredField !== "") {\r
+                            if (++count == 1) {\r
+                                requiredFields = requiredField;\r
+                            }\r
+                        }\r
+                    }\r
+                });\r
+                if (--count <= 0) {\r
+                    return requiredFields;\r
+                } else if (count == 1) {\r
+                    return requiredFields + " and 1 other field";\r
+                } else {\r
+                    return requiredFields + " and " + count + " other fields";\r
+                }\r
+            }\r
+        }\r
     }\r
 }\r
 \r
-appDS2.directive('parameterBlock', [ "$log", "PARAMETER", "UtilityService",\r
-       parameterBlockDirective ]);\r
+appDS2.directive('parameterBlock', [ "$log", "PARAMETER", "UtilityService", "$compile",\r
+    parameterBlockDirective ]);\r
 \r
 \r
 appDS2.directive('onlyIntegers', function () {\r
@@ -387,7 +455,7 @@ appDS2.directive('onlyIntegers', function () {
                 } else if (event.which >= 96 && event.which <= 105) {\r
                     // numpad number\r
                     return true;\r
-                } \r
+                }\r
                 // else if ([110, 190].indexOf(event.which) > -1) {\r
                 //     // dot and numpad dot\r
                 //     return true;\r
@@ -406,13 +474,13 @@ appDS2.directive('onlyFloat', function () {
         restrict: 'A',\r
         link: function (scope, elm, attrs, ctrl) {\r
             elm.on('keydown', function (event) {\r
-              if ([110, 190].indexOf(event.which) > -1) {\r
+                if ([110, 190].indexOf(event.which) > -1) {\r
                     // dot and numpad dot\r
                     event.preventDefault();\r
                     return true;\r
                 }\r
                 else{\r
-                  return false;\r
+                    return false;\r
                 }\r
             });\r
         }\r