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     value:any;
  28
  29     // Two way binding for value (need to write the "Change" word like this)
  30     @Output('valueChange') emitter: EventEmitter<string> = new EventEmitter<any>();
  31     @Input('value') set setValueValue(value) {
  32         this.value = value;
  33     }
  34
  35     cmpRef: ComponentRef<any>;
  36     private isViewInitialized: boolean = false;
  37     validation = ValidationConfiguration.validation;
  38
  39     constructor(
  40         private componentFactoryResolver: ComponentFactoryResolver,
  41         private compiler: Compiler,
  42         private el: ElementRef) {
  43     }
  44
  45     updateComponent() {
  46         if (!this.isViewInitialized) {
  47             return;
  48         }
  49         if (this.cmpRef) {
  50             this.cmpRef.destroy();
  51         }
  52
  53         // Factory to create component based on type or peroperty name.
  54         switch(this.type) {
  55             case 'list':
  56             case 'integer':
  57                 this.createComponent(UiElementIntegerInputComponent);
  58                 this.cmpRef.instance.pattern = this.validation.validationPatterns.integer;
  59                 break;
  60             case 'string':
  61                 if (this.name.toUpperCase().indexOf("SUBNETPOOLID") !== -1) {
  62                     this.createComponent(UiElementPopoverInputComponent);
  63                 }
  64                 else {
  65                     this.createComponent(UiElementInputComponent);
  66                 }
  67                 break;
  68             case 'boolean':
  69                 //this.createComponent(UiElementCheckBoxComponent);
  70
  71                 this.createComponent(UiElementDropDownComponent);
  72
  73                 // Build drop down values
  74                 let tmp = [];
  75                 tmp.push(new DropdownValue('true','TRUE'));
  76                 tmp.push(new DropdownValue('false','FALSE'));
  77                 this.cmpRef.instance.values = tmp;
  78                 break;
  79             default:
  80                 this.createComponent(UiElementInputComponent);
  81                 console.log("ERROR: No ui component to handle type: " + this.type);
  82         }
  83
  84         // Additional attributes in base element class
  85         if (this.cmpRef) {
  86             this.cmpRef.instance.name = this.name;
  87             this.cmpRef.instance.type = this.type;
  88             this.cmpRef.instance.value = this.value;
  89             this.cmpRef.instance.readonly = this.readonly;
  90         }
  91
  92         // Subscribe to change event of of ui-element-basic and fire event to change the value
  93         this.cmpRef.instance.baseEmitter.subscribe((value):void => {
  94             this.emitter.emit(value)
  95         });
  96
  97     }
  98
  99     createComponent(ComponentToCreate:any):void {
 100         let factory = this.componentFactoryResolver.resolveComponentFactory(ComponentToCreate);
 101         this.cmpRef = this.target.createComponent(factory);
 102     }
 103
 104     ngOnChanges() {
 105         this.updateComponent();
 106     }
 107
 108     ngAfterContentInit() {
 109         //console.log("DynamicElementComponent: ngAfterContentInit: type: " + this.type + " value: " + this.value);
 110         this.isViewInitialized = true;
 111         this.updateComponent();
 112     }
 113
 114     ngOnDestroy() {
 115         if (this.cmpRef) {
 116             this.cmpRef.destroy();
 117         }
 118     }
 119
 120 }