otf-frontend/client/src/app/shared/modules/form-generator/form-generator.component.ts

   1 /*  Copyright (c) 2019 AT&T Intellectual Property.                             #\r
   2 #                                                                              #\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
   6 #                                                                              #\r
   7 #       http://www.apache.org/licenses/LICENSE-2.0                             #\r
   8 #                                                                              #\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
  15 \r
  16 \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
  21 \r
  22 \r
  23 @Component({\r
  24   selector: 'app-form-generator',\r
  25   templateUrl: './form-generator.component.html',\r
  26   styleUrls: ['./form-generator.component.scss']\r
  27 })\r
  28 export class FormGeneratorComponent implements OnInit {\r
  29 \r
  30   public test = {\r
  31     text1: "Hello please enter text1",\r
  32     text2: "Hello please enter text2",\r
  33     one: {\r
  34       text1: "lol"\r
  35     },\r
  36     siteSpecific: {\r
  37       port: "1234",\r
  38       host: "google.com"\r
  39     },\r
  40     list: ["Enter", "some", "values"],\r
  41     list2: [{"test": "hello"}, {"test2": "hello2"}]\r
  42   }\r
  43   public isSaved = false;\r
  44   public arrayCheck;\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
  49 \r
  50   form = new FormGroup({\r
  51   });\r
  52 \r
  53   //public textAreaTemplate = "<textarea [(value)]='";\r
  54   /*\r
  55   constructor(private _compiler: Compiler,\r
  56             private _injector: Injector,\r
  57             private _m: NgModuleRef<any>) {\r
  58 }\r
  59 \r
  60 ngAfterViewInit() {\r
  61   const template = '<span>generated on the fly: {{name}}</span>';\r
  62 \r
  63   const tmpCmp = Component({template: template})(class {\r
  64   });\r
  65   const tmpModule = NgModule({declarations: [tmpCmp]})(class {\r
  66   });\r
  67 \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
  73     })\r
  74 }\r
  75   */\r
  76  \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
  84   ngOnInit() {\r
  85    \r
  86    //this.JSONData = this.test;\r
  87     if(this.JSONData){\r
  88       this.arrayCheck = JSON.parse(JSON.stringify(this.JSONData));\r
  89       let arr = [];\r
  90       this.populatePage(arr, 1);\r
  91       this.onFormChange();\r
  92     }\r
  93   }\r
  94 \r
  95   onFormChange(){\r
  96     \r
  97     this.form.valueChanges.subscribe(val => {\r
  98       this.copyValues([]);\r
  99       \r
 100       let event = {\r
 101         object: this.JSONData,\r
 102         taskId: this.taskId\r
 103       };\r
 104       this.childEvent.emit(event);\r
 105     });\r
 106   }\r
 107   //checks if data was supplied to form\r
 108   noData(){\r
 109    \r
 110     if(Object.keys(this.form.controls).length == 0){\r
 111       return true;\r
 112     }else{\r
 113       return false;\r
 114     }\r
 115   }\r
 116 \r
 117   copyValues(keyArr){\r
 118     // console.log("Fixed");\r
 119     let data = this.JSONData;\r
 120     let tempArrCheck = this.arrayCheck;\r
 121     let keyPath = "";\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
 126     }\r
 127     \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
 133         }else{\r
 134           data[key] = this.form.get(keyPath + key).value;\r
 135         }\r
 136       }else{\r
 137         keyArr.push(key);\r
 138         this.copyValues(keyArr);\r
 139         keyArr.splice(keyArr.length - 1);\r
 140       }\r
 141     }\r
 142     // Object.keys(this.form.controls).forEach(key => {\r
 143     //   data[key] = this.form.get(key).value;\r
 144     // });\r
 145     \r
 146   }\r
 147 \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
 152     let keyPath = "";\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
 157     }\r
 158     //console.log(data);\r
 159     \r
 160     for( let key in data){\r
 161       let indent = 'ml-' + level;\r
 162       \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
 165         \r
 166         let str = '';\r
 167         if(level >= 4){\r
 168           str = 'h5';\r
 169           //indent = 'ml-5';\r
 170         }else if(level === 3){\r
 171           str = 'h4';\r
 172           //indent = 'ml-4';\r
 173         }else if (level === 2){\r
 174           str = 'h3';\r
 175           //indent = 'ml-3';\r
 176         }else{\r
 177           str = 'h2'\r
 178           //indent = 'ml-2';\r
 179         }\r
 180         if(data.constructor === Array){\r
 181           \r
 182           keyArr.push(key);\r
 183           this.populatePage(keyArr, level);\r
 184           keyArr.splice(keyArr.length - 1);\r
 185           continue;\r
 186         }\r
 187         const textHeaderTemplate = '<' + str + ' class="'+ indent +'" style="font-weight:bold">' + key.trim() + '</'+ str + '>';\r
 188         const tmpCmp = Component({template: textHeaderTemplate})(class {\r
 189         });\r
 190         const tmpModule = NgModule({imports:[ReactiveFormsModule] ,declarations: [tmpCmp]})(class {\r
 191         });\r
 192              \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
 197           })\r
 198         \r
 199         keyArr.push(key);\r
 200         level ++;\r
 201         this.populatePage(keyArr, level);\r
 202         level = level -1;\r
 203         keyArr.splice(keyArr.length - 1);\r
 204       }\r
 205       else if(typeof data[key] === "string"){\r
 206        // this.containerDiv.\r
 207      \r
 208        this.form.addControl(keyPath + key.trim(), new FormControl(data[key]));\r
 209       \r
 210         if(level > 1){\r
 211           \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
 214           });\r
 215          const tmpModule = NgModule({imports:[ReactiveFormsModule], declarations: [tmpCmp]})(class {\r
 216           });\r
 217           \r
 218           //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();\r
 219           \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
 225             })\r
 226         }\r
 227         else{\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
 230           });\r
 231          const tmpModule = NgModule({imports:[ReactiveFormsModule], declarations: [tmpCmp]})(class {\r
 232           });\r
 233           \r
 234           //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();\r
 235           \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
 241             })\r
 242         }\r
 243        \r
 244         \r
 245       }\r
 246       else if(typeof data[key] === "object" && data[key].length){\r
 247         \r
 248         //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();\r
 249         let temp = "";\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
 253           else\r
 254             temp += data[key][i] + "";\r
 255         }\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
 258         \r
 259         tempArrCheck[key] = "_ConvertThisArray_";\r
 260 \r
 261         if(level > 1){\r
 262          \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
 265           });\r
 266          const tmpModule = NgModule({imports:[ReactiveFormsModule], declarations: [tmpCmp]})(class {\r
 267           });\r
 268           \r
 269           //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();\r
 270           \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
 276             })\r
 277         }\r
 278         else{\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
 281           });\r
 282          const tmpModule = NgModule({imports:[ReactiveFormsModule], declarations: [tmpCmp]})(class {\r
 283           });\r
 284           \r
 285           //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();\r
 286           \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
 292             })\r
 293         }\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
 296         // });\r
 297         // const tmpModule = NgModule({imports:[ReactiveFormsModule] ,declarations: [tmpCmp]})(class {\r
 298         // });\r
 299         \r
 300         // //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();\r
 301         \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
 307         //   })\r
 308         \r
 309       }\r
 310       else if(typeof data[key] === 'boolean'){\r
 311         let str = '';\r
 312         let str2 = 'h5';\r
 313         let bold = ' style="font-weight:bold"'\r
 314         if(level > 1){\r
 315           str2 = 'label';\r
 316           bold = '';\r
 317         }\r
 318         if(data[key]){\r
 319           str = '<option [ngValue]="true">true</option><option [ngValue]="false">false</option>';\r
 320         }else{\r
 321           str = '<option [ngValue]="false">false</option><option [ngValue]="true">true</option>';\r
 322         }\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
 326         });\r
 327         const tmpModule = NgModule({imports:[ReactiveFormsModule], declarations: [tmpCmp]})(class {\r
 328         });\r
 329         \r
 330         //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();\r
 331         \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
 337           })\r
 338       }\r
 339       else if(typeof data[key] === typeof 23){\r
 340         let str = 'h5';\r
 341         let bold = ' style="font-weight:bold"';\r
 342         if(level > 1){\r
 343           str = 'label';\r
 344           bold = '';\r
 345         }\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
 349         });\r
 350         const tmpModule = NgModule({imports:[ReactiveFormsModule], declarations: [tmpCmp]})(class {\r
 351         });\r
 352         \r
 353         //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();\r
 354         \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
 360           })\r
 361       }\r
 362       else{\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
 365           });\r
 366          const tmpModule = NgModule({imports:[ReactiveFormsModule], declarations: [tmpCmp]})(class {\r
 367           });\r
 368           \r
 369           //this.containerDiv.element.nativeElement.appendChild(document.createElement("label")).innerHTML = key.trim();\r
 370           \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
 376             })\r
 377       }\r
 378 \r
 379     }\r
 380   }\r
 381 }\r