gerrit.onap Code Review - portal/sdk.git/blob

   1 appDS2
   2 .directive('formBuilder', ['$q', '$parse', '$http', '$templateCache', '$compile', '$document', '$timeout', function ($q, $parse, $http, $templateCache, $compile, $document, $timeout) {
   3     return {
   4       restrict: 'E', // supports using directive as element only
   5       scope:{
   6                 ngModel: '=',
   7                 ngFormFields: '=',
   8                 ngNumFormCols: '=',
   9                 ngTriggerMethod: '=',
  10                 ngShowFieldId: '='
  11                 },
  12       link: function ($scope, element, attrs) {
  13           $scope.element=element;
  14           $scope.datetimeformat = "MM/dd/yyyy hh:mm a";
  15           console.log("$scope");
  16           console.log($scope);
  17           $scope.buildField = function (field, parentElement) {
  18             var x = '';
  19             if(field.visible) {
  20                 if (field.fieldType === 'LIST_MULTI_SELECT') {
  21                         x = angular.element('<label><i>'+field.fieldDisplayName+'<span ng-show="ngShowFieldId"> [ '+field.fieldId+' ] </span>:</i></label><br>'+
  22                                         '<div class="select2-container ebz-listbox form-field" style="height:100px;" tabindex="0" >'+
  23                                                 '<label ng-repeat="item in ngModel.'+field.fieldId+'" style="display:block;">'+
  24                                                 '<input type="checkbox" style="margin-top: 10px;" ng-model="item.defaultValue" ng-change="triggerFormFields('+field.triggerOtherFormFields+')" att-checkbox title="{{item.title}}"/> {{item.title}}<br/>'+
  25                                                 '</label>'+
  26                                         '</div>');
  27                 } else if (field.fieldType === 'LIST_BOX') {
  28                         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>');
  29                 } else if((field.fieldType === 'text' || field.fieldType === 'TEXT') && field.validationType === 'DATE'){
  30                         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>');
  31                 } else if((field.fieldType === 'text' || field.fieldType === 'TEXT') && field.validationType === 'TIMESTAMP_MIN'){
  32                         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>');
  33                 } else if(field.fieldType === 'text' || field.fieldType === 'TEXT'){
  34                                 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+')" />');
  35                 } else if(field.fieldType === 'CHECK_BOX'){
  36                         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>');
  37                 }
  38             }
  39                 parentElement.append(x);
  40             $compile(x)($scope);
  41           };
  42           $scope.buildForm = function() {
  43                 // create elements <table> and a <tbody>
  44                 var tbl     = angular.element("<table></table>");
  45                 var tblBody = angular.element("<tbody></tbody>");
  46                 var row = angular.element("<tr></tr>");
  47
  48                 var ngFormFieldsLength = $scope.ngFormFields.length;
  49
  50                 for (var j = 0; j < ngFormFieldsLength; j++) {
  51                     var cell = angular.element("<td style='padding: 5px;'></td>");
  52                     $scope.buildField($scope.ngFormFields[j],cell);
  53                     row.append(cell);
  54
  55                     if((j!=0 && (j+1)%$scope.ngNumFormCols==0) || j==(ngFormFieldsLength-1)){
  56                             tblBody.append(row);
  57                         row = angular.element("<tr></tr>");
  58                     }
  59                 }
  60                 tbl.append(tblBody);
  61                 angular.element($scope.element).html('');
  62                 $scope.element.append(tbl);
  63         };
  64
  65
  66                 $scope.formFieldLuValues = {};
  67                 $scope.getEBZFormat = function() {
  68                         if($scope.ngFormFields && $scope.ngFormFields.length>0){
  69                 $scope.ngFormFields.forEach(function(formField) {
  70                                 if(formField.fieldType === 'LIST_MULTI_SELECT') {
  71                                         $scope.ngModel[formField.fieldId]= [];
  72                                         if(formField.formFieldValues && formField.formFieldValues.length>0){
  73                                                 formField.formFieldValues.forEach(function(entry,i) {
  74                                                         $scope.ngModel[formField.fieldId].push({ index: i, value: entry.id, title: entry.name, defaultValue: entry.defaultValue});
  75                                                 });
  76                                         }
  77                                 } else if(formField.fieldType==='LIST_BOX') {
  78                                         $scope.formFieldLuValues[formField.fieldId]= [];
  79                                         if(formField.formFieldValues && formField.formFieldValues.length>0){
  80                                                 formField.formFieldValues.forEach(function(entry,i) {
  81                                                         $scope.formFieldLuValues[formField.fieldId].push({ index: i, value: entry.id, title: entry.name});
  82                                                         if(entry.defaultValue){
  83                                                                 $scope.ngModel[formField.fieldId]={ index: i, value: entry.id, title: entry.name};
  84                                                         }
  85                                                 });
  86                                         }
  87                                 } else if(formField.fieldType === 'text' || formField.fieldType === 'TEXT' ||
  88                                                 formField.validationType === 'DATE' || formField.validationType === 'TIMESTAMP_MIN') {
  89                                                 if(formField.formFieldValues && formField.formFieldValues.length>0){
  90                                                         $scope.ngModel[formField.fieldId]=formField.formFieldValues[0].id;
  91                                                 }
  92                     }
  93                         });
  94                 }
  95                 };
  96
  97                 $scope.$watch("ngFormFields",function(newValue,oldValue) {
  98                   if($scope.ngFormFields){
  99                         $scope.getEBZFormat();
 100                     $scope.buildForm();
 101                   }
 102                 });
 103
 104                 $scope.triggerFormFields = function(triggerFlag) {
 105                         if(triggerFlag){
 106                                 $scope.element.html('Loading...');
 107                                 $scope.ngTriggerMethod();
 108                         }
 109         };
 110
 111       }
 112     };
 113   }]);