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           $scope.buildField = function (field, parentElement) {
  16             var x = '';
  17             if(field.visible) {
  18
  19                 if (field.fieldType === 'LIST_MULTI_SELECT') {
  20                         /*x = angular.element('<label><i>'+field.fieldDisplayName+'<span ng-show="ngShowFieldId"> [ '+field.fieldId+' ] </span>:</i></label><br>'+
  21                                         '<div class="select2-container ebz-listbox form-field" style="height:100px;" tabindex="0" >'+
  22                                                 '<label ng-repeat="item in ngModel.'+field.fieldId+'" style="display:block;">'+
  23                                                 '<input type="checkbox" style="margin-top: 10px;" ng-model="item.defaultValue" ng-change="triggerFormFields('+field.triggerOtherFormFields+')" att-checkbox title="{{item.title}}"/> {{item.title}}<br/>'+
  24                                                 '</label>'+
  25                                         '</div>');*/
  26
  27                         x = angular.element(
  28                                 '<div class="listbox-container">'+
  29                                         '<h3 id="source_listbox-2---multiselectable">'+field.fieldDisplayName+'</h3>'+
  30                                         '<div class="listbox-list" tabindex="-1">'+
  31                                                 '<b2b-list-box listbox-data= "ngModel.'+field.fieldId+'" aria-multiselectable="true">'+
  32                                                         '<div tabindex="-1" data-index="{{$index}}" b2b-accessibility-click="13,32" ng-repeat="number in ngModel.'+field.fieldId+'" role="option" class="b2b-list-box-item" ng-class="{'+
  33                                                         "'b2b-list-box-item--selected'"+
  34                                                         ': number.selected}" ng-bind-html="number.title | unsafe"></div>'+
  35                                                 '</b2b-list-box>'+
  36                                         '</div>'+
  37                                 '</div>');
  38                 } else if (field.fieldType === 'LIST_BOX') {
  39                         var temp =
  40                                 '<div >'+
  41                                         '<label><i>'+field.fieldDisplayName+'<span ng-show="ngShowFieldId"> [ '+field.fieldId+' ] </span>:</i></label>'+
  42                                                 '<select id="dropdown1" name="dropdown1" aria-describedby="dropdown1" b2b-dropdown placeholder-text="Select"  ng-model="ngModel.'+field.fieldId+'"   ng-change="triggerFormFields('+field.triggerOtherFormFields+')">'+
  43                                                    ' <option b2b-dropdown-list option-repeat="d in formFieldLuValues.'+ field.fieldId +'" value="{{d.value}}">{{d.title}}</option>'+
  44                                                ' </select>'+
  45                                                 '</div>';
  46
  47                     x = angular.element(temp);
  48                         //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>');
  49                 } else if((field.fieldType === 'text' || field.fieldType === 'TEXT') && field.validationType === 'DATE'){
  50                         x = angular.element('<label><i>'+field.fieldDisplayName+'<span ng-show="ngShowFieldId"> [ '+field.fieldId+' ] </span>:</i></label><br>  <div class="datepicker-container" > <input id="'+field.fieldId+'" type="text" ng-model="ngModel.'+field.fieldId+'" tabindex="0" ng-change="triggerFormFields('+field.triggerOtherFormFields+')" b2b-datepicker></div>');
  51                 } else if((field.fieldType === 'text' || field.fieldType === 'TEXT') && field.validationType === 'TIMESTAMP_MIN'){
  52                         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>');
  53                 } else if(field.fieldType === 'text' || field.fieldType === 'TEXT'){
  54                                 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+')" />');
  55                 } else if(field.fieldType === 'CHECK_BOX'){
  56                         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>');
  57                 }
  58                 parentElement.append(x);
  59                 $compile(x)($scope);
  60             }
  61
  62           };
  63           $scope.buildForm = function() {
  64                 // create elements <table> and a <tbody>
  65                 var tbl     = angular.element("<table></table>");
  66                 var tblBody = angular.element("<tbody></tbody>");
  67                 var row = angular.element("<tr></tr>");
  68
  69                 var ngFormFieldsLength = $scope.ngFormFields.length;
  70
  71                 for (var j = 0; j < ngFormFieldsLength; j++) {
  72                     var cell = angular.element("<td style='padding: 5px;'></td>");
  73                     $scope.buildField($scope.ngFormFields[j],cell);
  74                     row.append(cell);
  75
  76                     if((j!=0 && (j+1)%$scope.ngNumFormCols==0) || j==(ngFormFieldsLength-1)){
  77                             tblBody.append(row);
  78                         row = angular.element("<tr></tr>");
  79                     }
  80                 }
  81                 tbl.append(tblBody);
  82                 angular.element($scope.element).html('');
  83                 $scope.element.append(tbl);
  84         };
  85
  86
  87                 $scope.formFieldLuValues = {};
  88                 $scope.getEBZFormat = function() {
  89                         if($scope.ngFormFields && $scope.ngFormFields.length>0){
  90                 $scope.ngFormFields.forEach(function(formField) {
  91                                 if(formField.fieldType === 'LIST_MULTI_SELECT') {
  92                                         $scope.ngModel[formField.fieldId]= [];
  93                                         if(formField.formFieldValues && formField.formFieldValues.length>0){
  94                                                 formField.formFieldValues.forEach(function(entry,i) {
  95                                                         $scope.ngModel[formField.fieldId].push({ index: i, value: entry.id, title: entry.name, defaultValue: entry.defaultValue});
  96                                                 });
  97                                         }
  98                                 } else if(formField.fieldType==='LIST_BOX') {
  99                                         $scope.formFieldLuValues[formField.fieldId]= [];
 100                                         if(formField.formFieldValues && formField.formFieldValues.length>0){
 101                                                 formField.formFieldValues.forEach(function(entry,i) {
 102                                                         $scope.formFieldLuValues[formField.fieldId].push({ index: i, value: entry.id, title: entry.name});
 103                                                         if(entry.defaultValue){
 104                                                                 //$scope.ngModel[formField.fieldId]={ index: i, value: entry.id, title: entry.name};
 105                                                         }
 106                                                 });
 107                                         }
 108                                 } else if(formField.fieldType === 'text' || formField.fieldType === 'TEXT' ||
 109                                                 formField.validationType === 'DATE' || formField.validationType === 'TIMESTAMP_MIN') {
 110                                                 if(formField.formFieldValues && formField.formFieldValues.length>0){
 111                                                         $scope.ngModel[formField.fieldId]=formField.formFieldValues[0].id;
 112                                                 }
 113                     }
 114                         });
 115                 }
 116                 };
 117
 118                 $scope.$watch("ngFormFields",function(newValue,oldValue) {
 119                   if($scope.ngFormFields){
 120                         $scope.getEBZFormat();
 121                     $scope.buildForm();
 122                   }
 123                 });
 124
 125                 $scope.triggerFormFields = function(triggerFlag) {
 126                         if(triggerFlag){
 127                                 $scope.element.html('Loading...');
 128                                 $scope.ngTriggerMethod();
 129                         }
 130         };
 131
 132       }
 133     };
 134   }]);