ecomp-sdk-app/src/main/webapp/static/fusion/raptor/ebz/dynamicform.js

   1 angular.module('quantum')
   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
  16           $scope.buildField = function (field, parentElement) {
  17             var x = '';
  18             if(field.visible) {
  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                 } else if (field.fieldType === 'LIST_BOX') {
  27                         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>');
  28                 } else if((field.fieldType === 'text' || field.fieldType === 'TEXT') && field.validationType === 'DATE'){
  29                         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>');
  30                 } else if((field.fieldType === 'text' || field.fieldType === 'TEXT') && field.validationType === 'TIMESTAMP_MIN'){
  31                         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>');
  32                 } else if(field.fieldType === 'text' || field.fieldType === 'TEXT'){
  33                                 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+')" />');
  34                 } else if(field.fieldType === 'CHECK_BOX'){
  35                         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>');
  36                 }
  37             }
  38                 parentElement.append(x);
  39             $compile(x)($scope);
  40           };
  41           $scope.buildForm = function() {
  42                 // create elements <table> and a <tbody>
  43                 var tbl     = angular.element("<table></table>");
  44                 var tblBody = angular.element("<tbody></tbody>");
  45                 var row = angular.element("<tr></tr>");
  46
  47                 var ngFormFieldsLength = $scope.ngFormFields.length;
  48
  49                 for (var j = 0; j < ngFormFieldsLength; j++) {
  50                     var cell = angular.element("<td style='padding: 5px;'></td>");
  51                     $scope.buildField($scope.ngFormFields[j],cell);
  52                     row.append(cell);
  53
  54                     if((j!=0 && (j+1)%$scope.ngNumFormCols==0) || j==(ngFormFieldsLength-1)){
  55                             tblBody.append(row);
  56                         row = angular.element("<tr></tr>");
  57                     }
  58                 }
  59                 tbl.append(tblBody);
  60                 angular.element($scope.element).html('');
  61                 $scope.element.append(tbl);
  62         };
  63
  64
  65                 $scope.formFieldLuValues = {};
  66                 $scope.getEBZFormat = function() {
  67                         if($scope.ngFormFields && $scope.ngFormFields.length>0){
  68                 $scope.ngFormFields.forEach(function(formField) {
  69                                 if(formField.fieldType === 'LIST_MULTI_SELECT') {
  70                                         $scope.ngModel[formField.fieldId]= [];
  71                                         if(formField.formFieldValues && formField.formFieldValues.length>0){
  72                                                 formField.formFieldValues.forEach(function(entry,i) {
  73                                                         $scope.ngModel[formField.fieldId].push({ index: i, value: entry.id, title: entry.name, defaultValue: entry.defaultValue});
  74                                                 });
  75                                         }
  76                                 } else if(formField.fieldType==='LIST_BOX') {
  77                                         $scope.formFieldLuValues[formField.fieldId]= [];
  78                                         if(formField.formFieldValues && formField.formFieldValues.length>0){
  79                                                 formField.formFieldValues.forEach(function(entry,i) {
  80                                                         $scope.formFieldLuValues[formField.fieldId].push({ index: i, value: entry.id, title: entry.name});
  81                                                         if(entry.defaultValue){
  82                                                                 $scope.ngModel[formField.fieldId]={ index: i, value: entry.id, title: entry.name};
  83                                                         }
  84                                                 });
  85                                         }
  86                                 } else if(formField.fieldType === 'text' || formField.fieldType === 'TEXT' ||
  87                                                 formField.validationType === 'DATE' || formField.validationType === 'TIMESTAMP_MIN') {
  88                                                 if(formField.formFieldValues && formField.formFieldValues.length>0){
  89                                                         $scope.ngModel[formField.fieldId]=formField.formFieldValues[0].id;
  90                                                 }
  91                     }
  92                         });
  93                 }
  94                 };
  95
  96                 $scope.$watch("ngFormFields",function(newValue,oldValue) {
  97                   if($scope.ngFormFields){
  98                         $scope.getEBZFormat();
  99                     $scope.buildForm();
 100                   }
 101                 });
 102
 103                 $scope.triggerFormFields = function(triggerFlag) {
 104                         if(triggerFlag){
 105                                 $scope.element.html('Loading...');
 106                                 $scope.ngTriggerMethod();
 107                         }
 108         };
 109
 110       }
 111     };
 112   }]);