1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
appDS2
.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>');*/
x = angular.element(
'<div class="listbox-container">'+
'<h3 id="source_listbox-2---multiselectable">'+field.fieldDisplayName+'</h3>'+
'<div class="listbox-list" tabindex="-1">'+
'<b2b-list-box listbox-data= "ngModel.'+field.fieldId+'" aria-multiselectable="true">'+
'<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="{'+
"'b2b-list-box-item--selected'"+
': number.selected}" ng-bind-html="number.title | unsafe"></div>'+
'</b2b-list-box>'+
'</div>'+
'</div>');
} else if (field.fieldType === 'LIST_BOX') {
var temp =
'<div >'+
'<label><i>'+field.fieldDisplayName+'<span ng-show="ngShowFieldId"> [ '+field.fieldId+' ] </span>:</i></label>'+
'<select id="dropdown1" name="dropdown1" aria-describedby="dropdown1" b2b-dropdown placeholder-text="Select" ng-model="ngModel.'+field.fieldId+'" ng-change="triggerFormFields('+field.triggerOtherFormFields+')">'+
' <option b2b-dropdown-list option-repeat="d in formFieldLuValues.'+ field.fieldId +'" value="{{d.value}}">{{d.title}}</option>'+
' </select>'+
'</div>';
x = angular.element(temp);
//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> <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>');
} 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();
}
};
}
};
}]);
|
