From ff76b5ed0aa91d5fdf9dc4f95e8b20f91ed9d072 Mon Sep 17 00:00:00 2001 From: "Sonsino, Ofir (os0695)" Date: Tue, 10 Jul 2018 15:57:37 +0300 Subject: New Angular UI from 1806 Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666 Issue-ID: VID-208 Signed-off-by: Sonsino, Ofir (os0695) --- .../available-models-tree.component.ts | 166 +++++++++++++++++++++ 1 file changed, 166 insertions(+) create mode 100644 vid-webpack-master/src/app/drawingBoard/available-models-tree/available-models-tree.component.ts (limited to 'vid-webpack-master/src/app/drawingBoard/available-models-tree/available-models-tree.component.ts') diff --git a/vid-webpack-master/src/app/drawingBoard/available-models-tree/available-models-tree.component.ts b/vid-webpack-master/src/app/drawingBoard/available-models-tree/available-models-tree.component.ts new file mode 100644 index 00000000..4e5819e4 --- /dev/null +++ b/vid-webpack-master/src/app/drawingBoard/available-models-tree/available-models-tree.component.ts @@ -0,0 +1,166 @@ +import {Component, EventEmitter, Output, ViewChild} from '@angular/core'; +import {ITreeOptions, TreeComponent} from 'angular-tree-component'; +import '../../../../node_modules/angular-tree-component/dist/angular-tree-component.css'; +import {IDType, ITreeNode} from 'angular-tree-component/dist/defs/api'; +import {DialogService} from 'ng2-bootstrap-modal'; +import {AvailableModelsTreeService} from './available-models-tree.service'; +import {NgRedux} from "@angular-redux/store"; +import {ActivatedRoute} from '@angular/router'; +import {AppState} from '../../store/reducers'; +import {AaiService} from '../../services/aaiService/aai.service'; +import {ServicePlanningService} from '../../services/service-planning.service'; +import {VnfPopupComponent} from '../../components/vnf-popup/vnf-popup.components'; +import {ServiceNodeTypes} from '../../shared/models/ServiceNodeTypes'; +import {VfModuleMap} from '../../shared/models/vfModulesMap'; +import {IframeService} from "../../shared/utils/iframe.service"; +import {createVFModuleInstance} from "../../service.actions"; +import {DefaultDataGeneratorService} from "../../shared/services/defaultDataServiceGenerator/default.data.generator.service"; + + +@Component({ + selector: 'available-models-tree', + templateUrl: './available-models-tree.component.html', + styleUrls: ['./available-models-tree.component.scss'] +}) + + +export class AvailableModelsTreeComponent{ + + serviceModelId: string; + serviceHierarchy; + parentElementClassName = 'content'; + _store : NgRedux; + constructor(private _servicePlanningService: ServicePlanningService, + private _iframeService: IframeService, + private _aaiService: AaiService, + private route: ActivatedRoute, + private dialogService: DialogService, + private _availableModelsTreeService: AvailableModelsTreeService, + private _defaultDataGeneratorService: DefaultDataGeneratorService, + private store: NgRedux) { + this._store = store; + this.route + .queryParams + .subscribe(params => { + this.serviceModelId = params['serviceModelId']; + this._aaiService.getServiceModelById(this.serviceModelId).subscribe( + value => { + this.serviceHierarchy = value; + this.nodes = this._servicePlanningService.convertServiceModelToTreeNodes(this.serviceHierarchy); + }, + error => { + console.log('error is ', error) + } + ); + }); + + } + + @Output() + highlightInstances: EventEmitter = new EventEmitter(); + @ViewChild('tree') tree: TreeComponent; + + nodes = []; + service = {name: ''}; + isFilterEnabled: boolean = false; + + options: ITreeOptions = { + nodeHeight: 36, + dropSlotHeight: 0, + nodeClass: (node: ITreeNode) => { + if(node.data.type === ServiceNodeTypes.VFmodule && !this.getNodeCount(node.parent)) + { + node.data.disabled = true; + return 'tree-node tree-node-disabled'; + } + node.data.disabled = false; + return 'tree-node'; + } + }; + + expandParentByNodeId(id: IDType): void { + this.tree.treeModel.getNodeById(id).parent.expand(); + } + + searchTree(searchText: string, event: KeyboardEvent): void { + if (searchText === '') { + return; + } + this.isFilterEnabled = event.key === 'Delete' || event.key === 'Backspace' || searchText.length > 1; + if (this.isFilterEnabled) { + let __this = this; + let results: ITreeNode[] = []; + this.nodes.forEach(function (node) { + __this.searchTreeNode(node, searchText, results); + }); + results.forEach(function (result) { + __this.expandParentByNodeId(result.id) + }); + } + } + + searchTreeNode(node, searchText: string, results): void { + if (node.name.toLowerCase().indexOf(searchText.toLowerCase()) != -1) { + results.push(node); + } + if (node.children != null) { + for (let i = 0; i < node.children.length; i++) { + this.searchTreeNode(node.children[i], searchText, results); + } + } + } + + selectNode(node: ITreeNode): void { + node.expand(); + this.highlightInstances.emit(node.data.id); + } + + onClickAdd(e: MouseEvent, node: ITreeNode): void { + let data = node.data; + let dynamicInputs = data.dynamicInputs; + let userProvidedNaming:boolean = data.userProvidedNaming; + let type:string = data.type; + if(!this.store.getState().global.flags['FLAG_SETTING_DEFAULTS_IN_DRAWING_BOARD']|| node.data.type === ServiceNodeTypes.VF || this._availableModelsTreeService.shouldOpenDialog(type, dynamicInputs, userProvidedNaming)) { + this._iframeService.addClassOpenModal(this.parentElementClassName); + this.dialogService.addDialog(VnfPopupComponent, { + serviceModelId: this.serviceModelId, + parentModelName: node.parent && node.parent.data.name, + modelName: data.name, + modelType: type, + dynamicInputs: dynamicInputs, + userProvidedNaming: userProvidedNaming, + isNewVfModule : true + }); + } + else { + let vfModule = this._defaultDataGeneratorService.generateVFModule(this.serviceHierarchy, node.parent.data.name, node.data.name); + this.store.dispatch(createVFModuleInstance(vfModule, node.data.name, this.serviceModelId)); + } + e.preventDefault(); + e.stopPropagation(); + } + + getNodeCount(node: ITreeNode): number { + let modelName: string = node.data.name; + if (ServicePlanningService.isVfModule(node)) { + let parentVnfModelName = node.parent.data.name; + let vfModuleMap: VfModuleMap = this._servicePlanningService.getVfModuleMap(this.serviceModelId, parentVnfModelName, modelName); + return vfModuleMap ? Object.keys(vfModuleMap).length : 0; + } else if (ServicePlanningService.isVnf(node)) { + let vnfInstance = this._servicePlanningService.getVnfInstance(this.serviceModelId, modelName); + return vnfInstance ? 1 : 0; + } + } + + isShowIconV(node: ITreeNode): boolean { + return this.getNodeCount(node) > 0; + } + + isShowNodeCount(node: ITreeNode): boolean { + return this.getNodeCount(node) > 0; + } + + isShowIconAdd(node: ITreeNode): boolean { + return this._availableModelsTreeService.shouldShowAddIcon(node, this.store.getState().service.serviceHierarchy, this.serviceModelId, this.getNodeCount(node)); + } +} -- cgit 1.2.3-korg