diff options
Diffstat (limited to 'ecomp-sdk-app/src/main/webapp/static/fusion/raptor/ebz/dynamicform.js')
| -rw-r--r-- | ecomp-sdk-app/src/main/webapp/static/fusion/raptor/ebz/dynamicform.js | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/ecomp-sdk-app/src/main/webapp/static/fusion/raptor/ebz/dynamicform.js b/ecomp-sdk-app/src/main/webapp/static/fusion/raptor/ebz/dynamicform.js new file mode 100644 index 000000000..e711f414e --- /dev/null +++ b/ecomp-sdk-app/src/main/webapp/static/fusion/raptor/ebz/dynamicform.js @@ -0,0 +1,112 @@ +angular.module('quantum') + .directive('formBuilder', ['$q', '$parse', '$http', '$templateCache', '$compile', '$document', '$timeout', function ($q, $parse, $http, $templateCache, $compile, $document, $timeout) { + return { + restrict: 'E', // supports using directive as element only + scope:{ + ngModel: '=', + ngFormFields: '=', + ngNumFormCols: '=', + ngTriggerMethod: '=', + ngShowFieldId: '=' + }, + link: function ($scope, element, attrs) { + $scope.element=element; + $scope.datetimeformat = "MM/dd/yyyy hh:mm a"; + + $scope.buildField = function (field, parentElement) { + var x = ''; + if(field.visible) { + if (field.fieldType === 'LIST_MULTI_SELECT') { + x = angular.element('<label><i>'+field.fieldDisplayName+'<span ng-show="ngShowFieldId"> [ '+field.fieldId+' ] </span>:</i></label><br>'+ + '<div class="select2-container ebz-listbox form-field" style="height:100px;" tabindex="0" >'+ + '<label ng-repeat="item in ngModel.'+field.fieldId+'" style="display:block;">'+ + '<input type="checkbox" style="margin-top: 10px;" ng-model="item.defaultValue" ng-change="triggerFormFields('+field.triggerOtherFormFields+')" att-checkbox title="{{item.title}}"/> {{item.title}}<br/>'+ + '</label>'+ + '</div>'); + } else if (field.fieldType === 'LIST_BOX') { + x = angular.element('<label><i>'+field.fieldDisplayName+'<span ng-show="ngShowFieldId"> [ '+field.fieldId+' ] </span>:</i></label><br> <div class="form-field" att-select="formFieldLuValues.'+field.fieldId+'" ng-model="ngModel.'+field.fieldId+'" ng-change="triggerFormFields('+field.triggerOtherFormFields+')"></div>'); + } else if((field.fieldType === 'text' || field.fieldType === 'TEXT') && field.validationType === 'DATE'){ + x = angular.element('<label><i>'+field.fieldDisplayName+'<span ng-show="ngShowFieldId"> [ '+field.fieldId+' ] </span>:</i></label><br> <input id="'+field.fieldId+'" type="text" ng-model="ngModel.'+field.fieldId+'" tabindex="0" ng-change="triggerFormFields('+field.triggerOtherFormFields+')" att-datepicker>'); + } else if((field.fieldType === 'text' || field.fieldType === 'TEXT') && field.validationType === 'TIMESTAMP_MIN'){ + x = angular.element('<label><i>'+field.fieldDisplayName+'<span ng-show="ngShowFieldId"> [ '+field.fieldId+' ] </span>:</i></label><br> <input id="'+field.fieldId+'" type="text" date-format="datetimeformat" ng-model="ngModel.'+field.fieldId+'" tabindex="0" ng-change="triggerFormFields('+field.triggerOtherFormFields+')" att-date-time-picker>'); + } else if(field.fieldType === 'text' || field.fieldType === 'TEXT'){ + x = angular.element('<label><i>'+field.fieldDisplayName+'<span ng-show="ngShowFieldId"> [ '+field.fieldId+' ] </span>:</i></label><br> <input type="text" class="form-field" ng-model="ngModel.'+field.fieldId+'" maxlength="'+field.length+'" ng-blur="triggerFormFields('+field.triggerOtherFormFields+')" />'); + } else if(field.fieldType === 'CHECK_BOX'){ + x = angular.element('<label><i>'+field.fieldDisplayName+'<span ng-show="ngShowFieldId"> [ '+field.fieldId+' ] </span>:</i></label><br> <input type="checkbox" ng-model="ngModel.'+field.fieldId+'" tabindex="0" ng-change="triggerFormFields('+field.triggerOtherFormFields+')" att-checkbox>'); + } + } + parentElement.append(x); + $compile(x)($scope); + }; + $scope.buildForm = function() { + // create elements <table> and a <tbody> + var tbl = angular.element("<table></table>"); + var tblBody = angular.element("<tbody></tbody>"); + var row = angular.element("<tr></tr>"); + + var ngFormFieldsLength = $scope.ngFormFields.length; + + for (var j = 0; j < ngFormFieldsLength; j++) { + var cell = angular.element("<td style='padding: 5px;'></td>"); + $scope.buildField($scope.ngFormFields[j],cell); + row.append(cell); + + if((j!=0 && (j+1)%$scope.ngNumFormCols==0) || j==(ngFormFieldsLength-1)){ + tblBody.append(row); + row = angular.element("<tr></tr>"); + } + } + tbl.append(tblBody); + angular.element($scope.element).html(''); + $scope.element.append(tbl); + }; + + + $scope.formFieldLuValues = {}; + $scope.getEBZFormat = function() { + if($scope.ngFormFields && $scope.ngFormFields.length>0){ + $scope.ngFormFields.forEach(function(formField) { + if(formField.fieldType === 'LIST_MULTI_SELECT') { + $scope.ngModel[formField.fieldId]= []; + if(formField.formFieldValues && formField.formFieldValues.length>0){ + formField.formFieldValues.forEach(function(entry,i) { + $scope.ngModel[formField.fieldId].push({ index: i, value: entry.id, title: entry.name, defaultValue: entry.defaultValue}); + }); + } + } else if(formField.fieldType==='LIST_BOX') { + $scope.formFieldLuValues[formField.fieldId]= []; + if(formField.formFieldValues && formField.formFieldValues.length>0){ + formField.formFieldValues.forEach(function(entry,i) { + $scope.formFieldLuValues[formField.fieldId].push({ index: i, value: entry.id, title: entry.name}); + if(entry.defaultValue){ + $scope.ngModel[formField.fieldId]={ index: i, value: entry.id, title: entry.name}; + } + }); + } + } else if(formField.fieldType === 'text' || formField.fieldType === 'TEXT' || + formField.validationType === 'DATE' || formField.validationType === 'TIMESTAMP_MIN') { + if(formField.formFieldValues && formField.formFieldValues.length>0){ + $scope.ngModel[formField.fieldId]=formField.formFieldValues[0].id; + } + } + }); + } + }; + + $scope.$watch("ngFormFields",function(newValue,oldValue) { + if($scope.ngFormFields){ + $scope.getEBZFormat(); + $scope.buildForm(); + } + }); + + $scope.triggerFormFields = function(triggerFlag) { + if(triggerFlag){ + $scope.element.html('Loading...'); + $scope.ngTriggerMethod(); + } + }; + + } + }; + }]); |