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