--- /dev/null
+/* Copyright (c) 2019 AT&T Intellectual Property. #\r
+# #\r
+# Licensed under the Apache License, Version 2.0 (the "License"); #\r
+# you may not use this file except in compliance with the License. #\r
+# You may obtain a copy of the License at #\r
+# #\r
+# http://www.apache.org/licenses/LICENSE-2.0 #\r
+# #\r
+# Unless required by applicable law or agreed to in writing, software #\r
+# distributed under the License is distributed on an "AS IS" BASIS, #\r
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. #\r
+# See the License for the specific language governing permissions and #\r
+# limitations under the License. #\r
+##############################################################################*/\r
+\r
+\r
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild, NgModuleRef, Injector, Compiler, NgModule, ViewContainerRef } from '@angular/core';\r
+import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';\r
+import { MatSnackBar } from '@angular/material';\r
+import { AlertSnackbarComponent } from '../alert-snackbar/alert-snackbar.component';\r
+\r
+\r
+@Component({\r
+ selector: 'app-form-generator',\r
+ templateUrl: './form-generator.component.html',\r
+ styleUrls: ['./form-generator.component.scss']\r
+})\r
+export class FormGeneratorComponent implements OnInit {\r
+\r
+ public test = {\r
+ text1: "Hello please enter text1",\r
+ text2: "Hello please enter text2",\r
+ one: {\r
+ text1: "lol"\r
+ },\r
+ siteSpecific: {\r
+ port: "1234",\r
+ host: "google.com"\r
+ },\r
+ list: ["Enter", "some", "values"],\r
+ list2: [{"test": "hello"}, {"test2": "hello2"}]\r
+ }\r
+ public isSaved = false;\r
+ public arrayCheck;\r
+ @Input() public JSONData : any;\r
+ @Input() public taskId: any;\r
+ @ViewChild('test', { read: ViewContainerRef }) public containerDiv;\r
+ @Output() public childEvent = new EventEmitter();\r
+\r
+ form = new FormGroup({\r
+ });\r
+\r
+ //public textAreaTemplate = "<textarea [(value)]='";\r
+ /*\r
+ constructor(private _compiler: Compiler,\r
+ private _injector: Injector,\r
+ private _m: NgModuleRef<any>) {\r
+}\r
+\r
+ngAfterViewInit() {\r
+ const template = '<span>generated on the fly: {{name}}</span>';\r
+\r
+ const tmpCmp = Component({template: template})(class {\r
+ });\r
+ const tmpModule = NgModule({declarations: [tmpCmp]})(class {\r
+ });\r
+\r
+ this._compiler.compileModuleAndAllComponentsAsync(tmpModule)\r
+ .then((factories) => {\r
+ const f = factories.componentFactories[0];\r
+ const cmpRef = this.vc.createComponent(f);\r
+ cmpRef.instance.name = 'dynamic';\r
+ })\r
+}\r
+ */\r
+ \r
+ //public containerDiv;// = document.getElementById(tas);\r
+ constructor(private compiler: Compiler,\r
+ private injector: Injector,\r
+ private snack: MatSnackBar,\r
+ private m: NgModuleRef<any>) { }\r
+ public testing = "hello";\r
+ //public textAreaTemplate = '';\r
+ ngOnInit() {\r
+ \r
+ //this.JSONData = this.test;\r
+ if(this.JSONData){\r
+ this.arrayCheck = JSON.parse(JSON.stringify(this.JSONData));\r
+ let arr = [];\r
+ this.populatePage(arr, 1);\r
+ this.onFormChange();\r
+ }\r
+ }\r
+\r
+ onFormChange(){\r
+ \r
+ this.form.valueChanges.subscribe(val => {\r
+ this.copyValues([]);\r
+ \r
+ let event = {\r
+ object: this.JSONData,\r
+ taskId: this.taskId\r
+ };\r
+ this.childEvent.emit(event);\r
+ });\r
+ }\r
+ //checks if data was supplied to form\r
+ noData(){\r
+ \r
+ if(Object.keys(this.form.controls).length == 0){\r
+ return true;\r
+ }else{\r
+ return false;\r
+ }\r
+ }\r
+\r
+ copyValues(keyArr){\r
+ // console.log("Fixed");\r
+ let data = this.JSONData;\r
+ let tempArrCheck = this.arrayCheck;\r
+ let keyPath = "";\r
+ for(let k in keyArr){\r
+ tempArrCheck = tempArrCheck[keyArr[k]];\r
+ data = data[keyArr[k]];\r
+ keyPath += keyArr[k];\r
+ }\r
+ \r
+ for(let key in data){\r
+ if(this.form.get(keyPath + key)){\r
+ if(tempArrCheck[key] === "_ConvertThisArray_"){\r
+ let temp = this.form.get(keyPath + key).value;\r
+ data[key] = temp.split(',');\r
+ }else{\r
+ data[key] = this.form.get(keyPath + key).value;\r
+ }\r
+ }else{\r
+ keyArr.push(key);\r
+ this.copyValues(keyArr);\r
+ keyArr.splice(keyArr.length - 1);\r
+ }\r
+ }\r
+ // Object.keys(this.form.controls).forEach(key => {\r
+ // data[key] = this.form.get(key).value;\r
+ // });\r
+ \r
+ }\r
+\r
+ populatePage(keyArr, level){//vthinput and testInput\r
+ let data = this.JSONData;\r
+ //used to detect and convert arrays after input is entered\r
+ let tempArrCheck = this.arrayCheck;\r
+ let keyPath = "";\r
+ for(let k in keyArr){\r
+ tempArrCheck = tempArrCheck[keyArr[k]];\r
+ data = data[keyArr[k]];\r
+ keyPath += keyArr[k];\r
+ }\r
+ //console.log(data);\r
+ \r
+ for( let key in data){\r
+ let indent = 'ml-' + level;\r
+ \r
+ if((typeof data[key] === "object" && !data[key].length) || (typeof data[key] === "object" && data[key].length && \r
+ typeof data[key][0] === "object")){\r
+ \r
+ let str = '';\r
+ if(level >= 4){\r
+ str = 'h5';\r
+ //indent = 'ml-5';\r
+ }else if(level === 3){\r
+ str = 'h4';\r
+ //indent = 'ml-4';\r
+ }else if (level === 2){\r
+ str = 'h3';\r
+ //indent = 'ml-3';\r
+ }else{\r
+ str = 'h2'\r
+ //indent = 'ml-2';\r
+ }\r
+ if(data.constructor === Array){\r
+ \r
+ keyArr.push(key);\r
+ this.populatePage(keyArr, level);\r
+ keyArr.splice(keyArr.length - 1);\r
+ continue;\r
+ }\r
+ const textHeaderTemplate = '<' + str + ' class="'+ indent +'" style="font-weight:bold">' + key.trim() + '</'+ str + '>';\r
+ const tmpCmp = Component({template: textHeaderTemplate})(class {\r
+ });\r
+ const tmpModule = NgModule({imports:[ReactiveFormsModule] ,declarations: [tmpCmp]})(class {\r
+ });\r
+ \r
+ this.compiler.compileModuleAndAllComponentsAsync(tmpModule)\r
+ .then((factories) => {\r
+ const f = factories.componentFactories[0];\r
+ const cmpRef = this.containerDiv.createComponent(f);\r
+ })\r
+ \r
+ keyArr.push(key);\r
+ level ++;\r
+ this.populatePage(keyArr, level);\r
+ level = level -1;\r
+ keyArr.splice(keyArr.length - 1);\r
+ }\r
+ else if(typeof data[key] === "string"){\r
+ // this.containerDiv.\r
+ \r
+ this.form.addControl(keyPath + key.trim(), new FormControl(data[key]));\r
+ \r
+ if(level > 1){\r
+ \r
+ const textInputTemplate = '<div class=" mb-1 '+ indent + '" [formGroup]="form"> <label class="mr-2">' + key.trim() + '</label><input formControlName="' + keyPath + key.trim() + '"> </div>';\r
+ const tmpCmp = Component({template: textInputTemplate})(class {\r
+ });\r
+ const tmpModule = NgModule({imports:[ReactiveFormsModule], declarations: [tmpCmp]})(class {\r
+ });\r
+ \r
+ //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();\r
+ \r
+ this.compiler.compileModuleAndAllComponentsAsync(tmpModule)\r
+ .then((factories) => {\r
+ const f = factories.componentFactories[0];\r
+ const cmpRef = this.containerDiv.createComponent(f);\r
+ cmpRef.instance.form = this.form;\r
+ })\r
+ }\r
+ else{\r
+ 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
+ const tmpCmp = Component({template: textInputTemplate})(class {\r
+ });\r
+ const tmpModule = NgModule({imports:[ReactiveFormsModule], declarations: [tmpCmp]})(class {\r
+ });\r
+ \r
+ //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();\r
+ \r
+ this.compiler.compileModuleAndAllComponentsAsync(tmpModule)\r
+ .then((factories) => {\r
+ const f = factories.componentFactories[0];\r
+ const cmpRef = this.containerDiv.createComponent(f);\r
+ cmpRef.instance.form = this.form;\r
+ })\r
+ }\r
+ \r
+ \r
+ }\r
+ else if(typeof data[key] === "object" && data[key].length){\r
+ \r
+ //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();\r
+ let temp = "";\r
+ for(let i = 0; i < data[key].length; i++){\r
+ if(i != data[key].length - 1)\r
+ temp += data[key][i] + ",";\r
+ else\r
+ temp += data[key][i] + "";\r
+ }\r
+ //this.containerDiv.element.nativeElement.appendChild(document.createElement("textarea")).innerHTML = temp.trim();\r
+ this.form.addControl(keyPath + key.trim(), new FormControl(temp));\r
+ \r
+ tempArrCheck[key] = "_ConvertThisArray_";\r
+\r
+ if(level > 1){\r
+ \r
+ 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
+ const tmpCmp = Component({template: textAreaTemplate})(class {\r
+ });\r
+ const tmpModule = NgModule({imports:[ReactiveFormsModule], declarations: [tmpCmp]})(class {\r
+ });\r
+ \r
+ //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();\r
+ \r
+ this.compiler.compileModuleAndAllComponentsAsync(tmpModule)\r
+ .then((factories) => {\r
+ const f = factories.componentFactories[0];\r
+ const cmpRef = this.containerDiv.createComponent(f);\r
+ cmpRef.instance.form = this.form;\r
+ })\r
+ }\r
+ else{\r
+ 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
+ const tmpCmp = Component({template: textAreaTemplate})(class {\r
+ });\r
+ const tmpModule = NgModule({imports:[ReactiveFormsModule], declarations: [tmpCmp]})(class {\r
+ });\r
+ \r
+ //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();\r
+ \r
+ this.compiler.compileModuleAndAllComponentsAsync(tmpModule)\r
+ .then((factories) => {\r
+ const f = factories.componentFactories[0];\r
+ const cmpRef = this.containerDiv.createComponent(f);\r
+ cmpRef.instance.form = this.form;\r
+ })\r
+ }\r
+ // 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
+ // const tmpCmp = Component({template: textAreaTemplate})(class {\r
+ // });\r
+ // const tmpModule = NgModule({imports:[ReactiveFormsModule] ,declarations: [tmpCmp]})(class {\r
+ // });\r
+ \r
+ // //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();\r
+ \r
+ // this.compiler.compileModuleAndAllComponentsAsync(tmpModule)\r
+ // .then((factories) => {\r
+ // const f = factories.componentFactories[0];\r
+ // const cmpRef = this.containerDiv.createComponent(f);\r
+ // cmpRef.instance.form = this.form;\r
+ // })\r
+ \r
+ }\r
+ else if(typeof data[key] === 'boolean'){\r
+ let str = '';\r
+ let str2 = 'h5';\r
+ let bold = ' style="font-weight:bold"'\r
+ if(level > 1){\r
+ str2 = 'label';\r
+ bold = '';\r
+ }\r
+ if(data[key]){\r
+ str = '<option [ngValue]="true">true</option><option [ngValue]="false">false</option>';\r
+ }else{\r
+ str = '<option [ngValue]="false">false</option><option [ngValue]="true">true</option>';\r
+ }\r
+ this.form.addControl(keyPath + key.trim(), new FormControl(data[key]));\r
+ 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
+ const tmpCmp = Component({template: textAreaTemplate})(class {\r
+ });\r
+ const tmpModule = NgModule({imports:[ReactiveFormsModule], declarations: [tmpCmp]})(class {\r
+ });\r
+ \r
+ //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();\r
+ \r
+ this.compiler.compileModuleAndAllComponentsAsync(tmpModule)\r
+ .then((factories) => {\r
+ const f = factories.componentFactories[0];\r
+ const cmpRef = this.containerDiv.createComponent(f);\r
+ cmpRef.instance.form = this.form;\r
+ })\r
+ }\r
+ else if(typeof data[key] === typeof 23){\r
+ let str = 'h5';\r
+ let bold = ' style="font-weight:bold"';\r
+ if(level > 1){\r
+ str = 'label';\r
+ bold = '';\r
+ }\r
+ this.form.addControl(keyPath + key.trim(), new FormControl(data[key]));\r
+ 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
+ const tmpCmp = Component({template: textInputTemplate})(class {\r
+ });\r
+ const tmpModule = NgModule({imports:[ReactiveFormsModule], declarations: [tmpCmp]})(class {\r
+ });\r
+ \r
+ //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();\r
+ \r
+ this.compiler.compileModuleAndAllComponentsAsync(tmpModule)\r
+ .then((factories) => {\r
+ const f = factories.componentFactories[0];\r
+ const cmpRef = this.containerDiv.createComponent(f);\r
+ cmpRef.instance.form = this.form;\r
+ })\r
+ }\r
+ else{\r
+ const textAreaTemplate = ' <h5 style="font-weight:bold" class="mr-2 '+ indent + '">' + key.trim() + ': Type Not Supported</h5>';// + path + "'> "+ data[key] + "</textarea>"\r
+ const tmpCmp = Component({template: textAreaTemplate})(class {\r
+ });\r
+ const tmpModule = NgModule({imports:[ReactiveFormsModule], declarations: [tmpCmp]})(class {\r
+ });\r
+ \r
+ //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();\r
+ \r
+ this.compiler.compileModuleAndAllComponentsAsync(tmpModule)\r
+ .then((factories) => {\r
+ const f = factories.componentFactories[0];\r
+ const cmpRef = this.containerDiv.createComponent(f);\r
+ cmpRef.instance.form = this.form;\r
+ })\r
+ }\r
+\r
+ }\r
+ }\r
+}\r
Code Review / it / otf.git / blobdiff