catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts

   1 import { Component, Compiler, EventEmitter, ViewContainerRef, ViewChild, Input, Output, ElementRef, ComponentRef, ComponentFactory, ComponentFactoryResolver } from '@angular/core'
   2 import { UiElementCheckBoxComponent } from './elements-ui/checkbox/ui-element-checkbox.component';
   3 import { UiElementDropDownComponent, DropdownValue } from './elements-ui/dropdown/ui-element-dropdown.component';
   4 import { UiElementInputComponent } from './elements-ui/input/ui-element-input.component';
   5 import {UiElementPopoverInputComponent} from "./elements-ui/popover-input/ui-element-popover-input.component";
   6 import {ValidationConfiguration} from "app/models";
   7 import {UiElementIntegerInputComponent} from "./elements-ui/integer-input/ui-element-integer-input.component";
   8
   9 @Component({
  10     selector: 'dynamic-element',
  11     template: `<div #target></div>`,
  12     styleUrls: ['./dynamic-element.component.less'],
  13     entryComponents: [
  14         UiElementInputComponent,
  15         UiElementDropDownComponent,
  16         UiElementCheckBoxComponent,
  17         UiElementPopoverInputComponent,
  18         UiElementIntegerInputComponent
  19     ]
  20 })
  21 export class DynamicElementComponent {
  22
  23     @ViewChild('target', { read: ViewContainerRef }) target: any;
  24     @Input() type: any;
  25     @Input() name: string;
  26     @Input() readonly:boolean;
  27     @Input() path:string;//optional param. used only for for subnetpoolid type
  28     value:any;
  29
  30     // Two way binding for value (need to write the "Change" word like this)
  31     @Output('valueChange') emitter: EventEmitter<string> = new EventEmitter<any>();
  32     @Input('value') set setValueValue(value) {
  33         this.value = value;
  34     }
  35
  36     cmpRef: ComponentRef<any>;
  37     private isViewInitialized: boolean = false;
  38     validation = ValidationConfiguration.validation;
  39
  40     constructor(
  41         private componentFactoryResolver: ComponentFactoryResolver,
  42         private compiler: Compiler,
  43         private el: ElementRef) {
  44     }
  45
  46     updateComponent() {
  47         if (!this.isViewInitialized) {
  48             return;
  49         }
  50         if (this.cmpRef) {
  51             this.cmpRef.destroy();
  52         }
  53
  54         // Factory to create component based on type or peroperty name.
  55         switch(this.type) {
  56             case 'list':
  57             case 'integer':
  58                 this.createComponent(UiElementIntegerInputComponent);
  59                 this.cmpRef.instance.pattern = this.validation.validationPatterns.integer;
  60                 break;
  61             case 'string':
  62                 if (this.path && this.path.toUpperCase().indexOf("SUBNETPOOLID") !== -1) {
  63                     if(this.name.toUpperCase().indexOf("SUBNETPOOLID") == -1){//if it's an item of subnetpoolid list get the parent name
  64                         let pathArray = this.path.split("#");
  65                         this.name = pathArray[pathArray.length - 2];
  66                     }
  67                     this.createComponent(UiElementPopoverInputComponent);
  68                 }
  69                 else {
  70                     this.createComponent(UiElementInputComponent);
  71                 }
  72                 break;
  73             case 'boolean':
  74                 //this.createComponent(UiElementCheckBoxComponent);
  75
  76                 this.createComponent(UiElementDropDownComponent);
  77
  78                 // Build drop down values
  79                 let tmp = [];
  80                 tmp.push(new DropdownValue('true','TRUE'));
  81                 tmp.push(new DropdownValue('false','FALSE'));
  82                 this.cmpRef.instance.values = tmp;
  83                 break;
  84             default:
  85                 this.createComponent(UiElementInputComponent);
  86                 console.log("ERROR: No ui component to handle type: " + this.type);
  87         }
  88
  89         // Additional attributes in base element class
  90         if (this.cmpRef) {
  91             this.cmpRef.instance.name = this.name;
  92             this.cmpRef.instance.type = this.type;
  93             this.cmpRef.instance.value = this.value;
  94             this.cmpRef.instance.readonly = this.readonly;
  95         }
  96
  97         // Subscribe to change event of of ui-element-basic and fire event to change the value
  98         this.cmpRef.instance.baseEmitter.subscribe((value):void => {
  99             this.emitter.emit(value)
 100         });
 101
 102     }
 103
 104     createComponent(ComponentToCreate:any):void {
 105         let factory = this.componentFactoryResolver.resolveComponentFactory(ComponentToCreate);
 106         this.cmpRef = this.target.createComponent(factory);
 107     }
 108
 109     ngOnChanges() {
 110         this.updateComponent();
 111     }
 112
 113     ngAfterContentInit() {
 114         //console.log("DynamicElementComponent: ngAfterContentInit: type: " + this.type + " value: " + this.value);
 115         this.isViewInitialized = true;
 116         this.updateComponent();
 117     }
 118
 119     ngOnDestroy() {
 120         if (this.cmpRef) {
 121             this.cmpRef.destroy();
 122         }
 123     }
 124
 125 }