X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?p=it%2Fotf.git;a=blobdiff_plain;f=otf-frontend%2Fclient%2Fsrc%2Fapp%2Fshared%2Fmodules%2Fform-generator%2Fform-generator.component.ts;fp=otf-frontend%2Fclient%2Fsrc%2Fapp%2Fshared%2Fmodules%2Fform-generator%2Fform-generator.component.ts;h=6f205db0e6259e58bf2a3ca010e558c03f94bbcd;hp=0000000000000000000000000000000000000000;hb=14f6f95c84a4a1fa8774190db4a03fd0214ec55f;hpb=f49bd1efeaaddd4891c1f329b18d8cfb28b3e75b

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