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

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * SDC
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 import { Component, Compiler, EventEmitter, ViewContainerRef, ViewChild, Input, Output, ElementRef, ComponentRef, ComponentFactory, ComponentFactoryResolver } from '@angular/core'
  22 import { UiElementCheckBoxComponent } from './elements-ui/checkbox/ui-element-checkbox.component';
  23 import { UiElementDropDownComponent, DropdownValue } from './elements-ui/dropdown/ui-element-dropdown.component';
  24 import { UiElementInputComponent } from './elements-ui/input/ui-element-input.component';
  25 import {UiElementPopoverInputComponent} from "./elements-ui/popover-input/ui-element-popover-input.component";
  26 import {ValidationConfiguration} from "app/models";
  27 import {UiElementIntegerInputComponent} from "./elements-ui/integer-input/ui-element-integer-input.component";
  28
  29 @Component({
  30     selector: 'dynamic-element',
  31     template: `<div #target></div>`,
  32     styleUrls: ['./dynamic-element.component.less'],
  33     entryComponents: [
  34         UiElementInputComponent,
  35         UiElementDropDownComponent,
  36         UiElementCheckBoxComponent,
  37         UiElementPopoverInputComponent,
  38         UiElementIntegerInputComponent
  39     ]
  40 })
  41 export class DynamicElementComponent {
  42
  43     @ViewChild('target', { read: ViewContainerRef }) target: any;
  44     @Input() type: any;
  45     @Input() name: string;
  46     @Input() readonly:boolean;
  47     @Input() path:string;//optional param. used only for for subnetpoolid type
  48     value:any;
  49
  50     // Two way binding for value (need to write the "Change" word like this)
  51     @Output('valueChange') emitter: EventEmitter<string> = new EventEmitter<any>();
  52     @Input('value') set setValueValue(value) {
  53         this.value = value;
  54     }
  55
  56     cmpRef: ComponentRef<any>;
  57     private isViewInitialized: boolean = false;
  58     validation = ValidationConfiguration.validation;
  59
  60     constructor(
  61         private componentFactoryResolver: ComponentFactoryResolver,
  62         private compiler: Compiler,
  63         private el: ElementRef) {
  64     }
  65
  66     updateComponent() {
  67         if (!this.isViewInitialized) {
  68             return;
  69         }
  70         if (this.cmpRef) {
  71             this.cmpRef.destroy();
  72         }
  73
  74         // Factory to create component based on type or peroperty name.
  75         switch(this.type) {
  76             case 'list':
  77             case 'integer':
  78                 this.createComponent(UiElementIntegerInputComponent);
  79                 this.cmpRef.instance.pattern = this.validation.validationPatterns.integer;
  80                 break;
  81             case 'string':
  82                 if (this.path && this.path.toUpperCase().indexOf("SUBNETPOOLID") !== -1) {
  83                     if(this.name.toUpperCase().indexOf("SUBNETPOOLID") == -1){//if it's an item of subnetpoolid list get the parent name
  84                         let pathArray = this.path.split("#");
  85                         this.name = pathArray[pathArray.length - 2];
  86                     }
  87                     this.createComponent(UiElementPopoverInputComponent);
  88                 }
  89                 else {
  90                     this.createComponent(UiElementInputComponent);
  91                 }
  92                 break;
  93             case 'boolean':
  94                 //this.createComponent(UiElementCheckBoxComponent);
  95
  96                 this.createComponent(UiElementDropDownComponent);
  97
  98                 // Build drop down values
  99                 let tmp = [];
 100                 tmp.push(new DropdownValue('true','TRUE'));
 101                 tmp.push(new DropdownValue('false','FALSE'));
 102                 this.cmpRef.instance.values = tmp;
 103                 break;
 104             default:
 105                 this.createComponent(UiElementInputComponent);
 106                 console.log("ERROR: No ui component to handle type: " + this.type);
 107         }
 108
 109         // Additional attributes in base element class
 110         if (this.cmpRef) {
 111             this.cmpRef.instance.name = this.name;
 112             this.cmpRef.instance.type = this.type;
 113             this.cmpRef.instance.value = this.value;
 114             this.cmpRef.instance.readonly = this.readonly;
 115         }
 116
 117         // Subscribe to change event of of ui-element-basic and fire event to change the value
 118         this.cmpRef.instance.baseEmitter.subscribe((value):void => {
 119             this.emitter.emit(value)
 120         });
 121
 122     }
 123
 124     createComponent(ComponentToCreate:any):void {
 125         let factory = this.componentFactoryResolver.resolveComponentFactory(ComponentToCreate);
 126         this.cmpRef = this.target.createComponent(factory);
 127     }
 128
 129     ngOnChanges() {
 130         this.updateComponent();
 131     }
 132
 133     ngAfterContentInit() {
 134         //console.log("DynamicElementComponent: ngAfterContentInit: type: " + this.type + " value: " + this.value);
 135         this.isViewInitialized = true;
 136         this.updateComponent();
 137     }
 138
 139     ngOnDestroy() {
 140         if (this.cmpRef) {
 141             this.cmpRef.destroy();
 142         }
 143     }
 144
 145 }