1 /* Copyright (c) 2019 AT&T Intellectual Property. #
\r
3 # Licensed under the Apache License, Version 2.0 (the "License"); #
\r
4 # you may not use this file except in compliance with the License. #
\r
5 # You may obtain a copy of the License at #
\r
7 # http://www.apache.org/licenses/LICENSE-2.0 #
\r
9 # Unless required by applicable law or agreed to in writing, software #
\r
10 # distributed under the License is distributed on an "AS IS" BASIS, #
\r
11 # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. #
\r
12 # See the License for the specific language governing permissions and #
\r
13 # limitations under the License. #
\r
14 ##############################################################################*/
\r
17 import { Component, OnInit, Input, Output, EventEmitter, ViewChild, NgModuleRef, Injector, Compiler, NgModule, ViewContainerRef } from '@angular/core';
\r
18 import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
\r
19 import { MatSnackBar } from '@angular/material';
\r
20 import { AlertSnackbarComponent } from '../alert-snackbar/alert-snackbar.component';
\r
24 selector: 'app-form-generator',
\r
25 templateUrl: './form-generator.component.html',
\r
26 styleUrls: ['./form-generator.component.scss']
\r
28 export class FormGeneratorComponent implements OnInit {
\r
31 text1: "Hello please enter text1",
\r
32 text2: "Hello please enter text2",
\r
40 list: ["Enter", "some", "values"],
\r
41 list2: [{"test": "hello"}, {"test2": "hello2"}]
\r
43 public isSaved = false;
\r
45 @Input() public JSONData : any;
\r
46 @Input() public taskId: any;
\r
47 @ViewChild('test', { read: ViewContainerRef }) public containerDiv;
\r
48 @Output() public childEvent = new EventEmitter();
\r
50 form = new FormGroup({
\r
53 //public textAreaTemplate = "<textarea [(value)]='";
\r
55 constructor(private _compiler: Compiler,
\r
56 private _injector: Injector,
\r
57 private _m: NgModuleRef<any>) {
\r
61 const template = '<span>generated on the fly: {{name}}</span>';
\r
63 const tmpCmp = Component({template: template})(class {
\r
65 const tmpModule = NgModule({declarations: [tmpCmp]})(class {
\r
68 this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
\r
69 .then((factories) => {
\r
70 const f = factories.componentFactories[0];
\r
71 const cmpRef = this.vc.createComponent(f);
\r
72 cmpRef.instance.name = 'dynamic';
\r
77 //public containerDiv;// = document.getElementById(tas);
\r
78 constructor(private compiler: Compiler,
\r
79 private injector: Injector,
\r
80 private snack: MatSnackBar,
\r
81 private m: NgModuleRef<any>) { }
\r
82 public testing = "hello";
\r
83 //public textAreaTemplate = '';
\r
86 //this.JSONData = this.test;
\r
88 this.arrayCheck = JSON.parse(JSON.stringify(this.JSONData));
\r
90 this.populatePage(arr, 1);
\r
91 this.onFormChange();
\r
97 this.form.valueChanges.subscribe(val => {
\r
98 this.copyValues([]);
\r
101 object: this.JSONData,
\r
102 taskId: this.taskId
\r
104 this.childEvent.emit(event);
\r
107 //checks if data was supplied to form
\r
110 if(Object.keys(this.form.controls).length == 0){
\r
117 copyValues(keyArr){
\r
118 // console.log("Fixed");
\r
119 let data = this.JSONData;
\r
120 let tempArrCheck = this.arrayCheck;
\r
122 for(let k in keyArr){
\r
123 tempArrCheck = tempArrCheck[keyArr[k]];
\r
124 data = data[keyArr[k]];
\r
125 keyPath += keyArr[k];
\r
128 for(let key in data){
\r
129 if(this.form.get(keyPath + key)){
\r
130 if(tempArrCheck[key] === "_ConvertThisArray_"){
\r
131 let temp = this.form.get(keyPath + key).value;
\r
132 data[key] = temp.split(',');
\r
134 data[key] = this.form.get(keyPath + key).value;
\r
138 this.copyValues(keyArr);
\r
139 keyArr.splice(keyArr.length - 1);
\r
142 // Object.keys(this.form.controls).forEach(key => {
\r
143 // data[key] = this.form.get(key).value;
\r
148 populatePage(keyArr, level){//vthinput and testInput
\r
149 let data = this.JSONData;
\r
150 //used to detect and convert arrays after input is entered
\r
151 let tempArrCheck = this.arrayCheck;
\r
153 for(let k in keyArr){
\r
154 tempArrCheck = tempArrCheck[keyArr[k]];
\r
155 data = data[keyArr[k]];
\r
156 keyPath += keyArr[k];
\r
158 //console.log(data);
\r
160 for( let key in data){
\r
161 let indent = 'ml-' + level;
\r
163 if((typeof data[key] === "object" && !data[key].length) || (typeof data[key] === "object" && data[key].length &&
\r
164 typeof data[key][0] === "object")){
\r
170 }else if(level === 3){
\r
173 }else if (level === 2){
\r
180 if(data.constructor === Array){
\r
183 this.populatePage(keyArr, level);
\r
184 keyArr.splice(keyArr.length - 1);
\r
187 const textHeaderTemplate = '<' + str + ' class="'+ indent +'" style="font-weight:bold">' + key.trim() + '</'+ str + '>';
\r
188 const tmpCmp = Component({template: textHeaderTemplate})(class {
\r
190 const tmpModule = NgModule({imports:[ReactiveFormsModule] ,declarations: [tmpCmp]})(class {
\r
193 this.compiler.compileModuleAndAllComponentsAsync(tmpModule)
\r
194 .then((factories) => {
\r
195 const f = factories.componentFactories[0];
\r
196 const cmpRef = this.containerDiv.createComponent(f);
\r
201 this.populatePage(keyArr, level);
\r
203 keyArr.splice(keyArr.length - 1);
\r
205 else if(typeof data[key] === "string"){
\r
206 // this.containerDiv.
\r
208 this.form.addControl(keyPath + key.trim(), new FormControl(data[key]));
\r
212 const textInputTemplate = '<div class=" mb-1 '+ indent + '" [formGroup]="form"> <label class="mr-2">' + key.trim() + '</label><input formControlName="' + keyPath + key.trim() + '"> </div>';
\r
213 const tmpCmp = Component({template: textInputTemplate})(class {
\r
215 const tmpModule = NgModule({imports:[ReactiveFormsModule], declarations: [tmpCmp]})(class {
\r
218 //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();
\r
220 this.compiler.compileModuleAndAllComponentsAsync(tmpModule)
\r
221 .then((factories) => {
\r
222 const f = factories.componentFactories[0];
\r
223 const cmpRef = this.containerDiv.createComponent(f);
\r
224 cmpRef.instance.form = this.form;
\r
228 const textInputTemplate = '<div class=" mb-1 '+ indent + '" [formGroup]="form"> <h5 style="font-weight:bold" class="mr-2">' + key.trim() + '</h5><input formControlName="' + keyPath + key.trim() + '"> </div>';
\r
229 const tmpCmp = Component({template: textInputTemplate})(class {
\r
231 const tmpModule = NgModule({imports:[ReactiveFormsModule], declarations: [tmpCmp]})(class {
\r
234 //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();
\r
236 this.compiler.compileModuleAndAllComponentsAsync(tmpModule)
\r
237 .then((factories) => {
\r
238 const f = factories.componentFactories[0];
\r
239 const cmpRef = this.containerDiv.createComponent(f);
\r
240 cmpRef.instance.form = this.form;
\r
246 else if(typeof data[key] === "object" && data[key].length){
\r
248 //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();
\r
250 for(let i = 0; i < data[key].length; i++){
\r
251 if(i != data[key].length - 1)
\r
252 temp += data[key][i] + ",";
\r
254 temp += data[key][i] + "";
\r
256 //this.containerDiv.element.nativeElement.appendChild(document.createElement("textarea")).innerHTML = temp.trim();
\r
257 this.form.addControl(keyPath + key.trim(), new FormControl(temp));
\r
259 tempArrCheck[key] = "_ConvertThisArray_";
\r
263 const textAreaTemplate = '<div class= " mb-1 '+ indent + '" [formGroup]="form"> <label class="mr-2">' + key.trim() + '</label><textarea rows="' + data[key].length + '" formControlName="' + keyPath + key.trim() + '"> </textarea></div>';// + path + "'> "+ data[key] + "</textarea>"
\r
264 const tmpCmp = Component({template: textAreaTemplate})(class {
\r
266 const tmpModule = NgModule({imports:[ReactiveFormsModule], declarations: [tmpCmp]})(class {
\r
269 //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();
\r
271 this.compiler.compileModuleAndAllComponentsAsync(tmpModule)
\r
272 .then((factories) => {
\r
273 const f = factories.componentFactories[0];
\r
274 const cmpRef = this.containerDiv.createComponent(f);
\r
275 cmpRef.instance.form = this.form;
\r
279 const textAreaTemplate = '<div class= " mb-1 '+ indent + '" [formGroup]="form"> <h5 style="font-weight:bold" class="mr-2">' + key.trim() + '</h5><textarea rows="' + data[key].length + '" formControlName="' + keyPath + key.trim() + '"> </textarea></div>';// + path + "'> "+ data[key] + "</textarea>"
\r
280 const tmpCmp = Component({template: textAreaTemplate})(class {
\r
282 const tmpModule = NgModule({imports:[ReactiveFormsModule], declarations: [tmpCmp]})(class {
\r
285 //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();
\r
287 this.compiler.compileModuleAndAllComponentsAsync(tmpModule)
\r
288 .then((factories) => {
\r
289 const f = factories.componentFactories[0];
\r
290 const cmpRef = this.containerDiv.createComponent(f);
\r
291 cmpRef.instance.form = this.form;
\r
294 // const textAreaTemplate = '<div class= "mb-2" [formGroup]="form"> <label class="mr-2">' + key.trim() + '</label><textarea rows="' + data[key].length + '" formControlName="' + keyPath + key.trim() + '"> </textarea></div>';// + path + "'> "+ data[key] + "</textarea>"
\r
295 // const tmpCmp = Component({template: textAreaTemplate})(class {
\r
297 // const tmpModule = NgModule({imports:[ReactiveFormsModule] ,declarations: [tmpCmp]})(class {
\r
300 // //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();
\r
302 // this.compiler.compileModuleAndAllComponentsAsync(tmpModule)
\r
303 // .then((factories) => {
\r
304 // const f = factories.componentFactories[0];
\r
305 // const cmpRef = this.containerDiv.createComponent(f);
\r
306 // cmpRef.instance.form = this.form;
\r
310 else if(typeof data[key] === 'boolean'){
\r
313 let bold = ' style="font-weight:bold"'
\r
319 str = '<option [ngValue]="true">true</option><option [ngValue]="false">false</option>';
\r
321 str = '<option [ngValue]="false">false</option><option [ngValue]="true">true</option>';
\r
323 this.form.addControl(keyPath + key.trim(), new FormControl(data[key]));
\r
324 const textAreaTemplate = '<div class= " mb-1 '+ indent + '" [formGroup]="form"> <' + str2 + bold + ' class="mr-2">' + key.trim() + '</' + str2 + '><select formControlName="' + keyPath + key.trim() + '">' + str + ' </select></div>';// + path + "'> "+ data[key] + "</textarea>"
\r
325 const tmpCmp = Component({template: textAreaTemplate})(class {
\r
327 const tmpModule = NgModule({imports:[ReactiveFormsModule], declarations: [tmpCmp]})(class {
\r
330 //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();
\r
332 this.compiler.compileModuleAndAllComponentsAsync(tmpModule)
\r
333 .then((factories) => {
\r
334 const f = factories.componentFactories[0];
\r
335 const cmpRef = this.containerDiv.createComponent(f);
\r
336 cmpRef.instance.form = this.form;
\r
339 else if(typeof data[key] === typeof 23){
\r
341 let bold = ' style="font-weight:bold"';
\r
346 this.form.addControl(keyPath + key.trim(), new FormControl(data[key]));
\r
347 const textInputTemplate = '<div class=" mb-1 '+ indent + '" [formGroup]="form"> <' + str + bold + ' class="mr-2">' + key.trim() + '</' + str + '><input type="number" formControlName="' + keyPath + key.trim() + '"> </div>';
\r
348 const tmpCmp = Component({template: textInputTemplate})(class {
\r
350 const tmpModule = NgModule({imports:[ReactiveFormsModule], declarations: [tmpCmp]})(class {
\r
353 //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();
\r
355 this.compiler.compileModuleAndAllComponentsAsync(tmpModule)
\r
356 .then((factories) => {
\r
357 const f = factories.componentFactories[0];
\r
358 const cmpRef = this.containerDiv.createComponent(f);
\r
359 cmpRef.instance.form = this.form;
\r
363 const textAreaTemplate = ' <h5 style="font-weight:bold" class="mr-2 '+ indent + '">' + key.trim() + ': Type Not Supported</h5>';// + path + "'> "+ data[key] + "</textarea>"
\r
364 const tmpCmp = Component({template: textAreaTemplate})(class {
\r
366 const tmpModule = NgModule({imports:[ReactiveFormsModule], declarations: [tmpCmp]})(class {
\r
369 //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();
\r
371 this.compiler.compileModuleAndAllComponentsAsync(tmpModule)
\r
372 .then((factories) => {
\r
373 const f = factories.componentFactories[0];
\r
374 const cmpRef = this.containerDiv.createComponent(f);
\r
375 cmpRef.instance.form = this.form;
\r