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
|
import {
Component,
ViewEncapsulation,
ViewChild,
Input,
Output,
EventEmitter
} from '@angular/core';
import { TreeModel, TreeComponent, ITreeOptions } from 'angular-tree-component';
import {
trigger,
state,
animate,
transition,
style
} from '@angular/animations';
import { fuzzysearch, getBranchRequierds, validation } from './target.util';
import { environment } from '../../../environments/environment';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-target',
templateUrl: './target.component.html',
styleUrls: ['./target.component.scss'],
encapsulation: ViewEncapsulation.None,
animations: [
trigger('toggleDropdown', [
transition('void => *', [
style({ opacity: 0, offset: 0, height: 0 }),
animate('300ms cubic-bezier(0.17, 0.04, 0.03, 0.94)')
]),
transition('* => void', [
style({ opacity: 1, offset: 1, height: 'auto' }),
animate('100ms cubic-bezier(0.17, 0.04, 0.03, 0.94)')
])
])
]
})
export class TargetComponent {
imgBase = environment.imagePath;
showOption = false;
selectedNode = { name: '', id: '' };
@Input() nodes;
@Output() onTargetChange = new EventEmitter();
@ViewChild(TreeComponent) private tree: TreeComponent;
@ViewChild('targetFrm') targetFrm: NgForm;
options: ITreeOptions = {
animateExpand: true,
animateSpeed: 30,
animateAcceleration: 1.2
};
filterFn(value, treeModel: TreeModel) {
treeModel.filterNodes(node => fuzzysearch(value, node.data.name));
}
inputChange() {
this.onTargetChange.emit(this.selectedNode.id);
}
updateMode(action) {
this.selectedNode = {
id: action.target,
name: ''
};
}
onEvent(event) {
if (event.eventName === 'activate') {
if (event.node.data.children === null) {
this.selectedNode = event.node.data;
this.onTargetChange.emit(this.selectedNode);
this.showOption = false;
}
}
}
}
|
