1 files changed, 133 insertions, 0 deletions
diff --git a/vid-webpack-master/src/app/drawingBoard/drawing-board-tree/drawing-board-tree.component.ts b/vid-webpack-master/src/app/drawingBoard/drawing-board-tree/drawing-board-tree.component.ts
new file mode 100644
index 000000000..6b717a930
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/drawing-board-tree/drawing-board-tree.component.ts
@@ -0,0 +1,133 @@
+import {AfterViewInit, Component, EventEmitter, OnInit, Output, ViewChild} from '@angular/core';
+import { ContextMenuService } from 'ngx-contextmenu';
+import { Constants } from '../../shared/utils/constants';
+import {ServicePlanningService} from "../../services/service-planning.service";
+import {ITreeNode} from "angular-tree-component/dist/defs/api";
+import {ITreeOptions, TreeComponent} from "angular-tree-component";
+import {VnfPopupComponent} from "../../components/vnf-popup/vnf-popup.components";
+import {DialogService} from "ng2-bootstrap-modal";
+import {ActivatedRoute} from "@angular/router";
+import {NgRedux} from "@angular-redux/store";
+import {AppState} from "../../store/reducers";
+import { MessageBoxData, ModalSize, ModalType } from '../../shared/components/messageBox/messageBox.data';
+import { MessageBoxService } from '../../shared/components/messageBox/messageBox.service';
+import { deleteVnfInstance, deleteVfModuleInstance } from '../../service.actions';
+import { isNullOrUndefined } from 'util';
+import {IframeService} from "../../shared/utils/iframe.service";
+
+
+@Component({
+  selector: 'drawing-board-tree',
+  templateUrl: './drawing-board-tree.html',
+  styleUrls : ['./drawing-board-tree.scss']
+})
+
+
+export class DrawingBoardTreeComponent implements OnInit, AfterViewInit {
+  constructor(private _contextMenuService: ContextMenuService,
+              private _servicePlanningService: ServicePlanningService,
+              private _iframeService : IframeService,
+              private dialogService: DialogService,
+              private store: NgRedux<AppState>,
+              private route: ActivatedRoute) {
+    this.route
+      .queryParams
+      .subscribe(params => {
+        this.serviceModelId = params['serviceModelId'];
+      });
+  }
+
+  @Output()
+  highlightNode : EventEmitter<number> = new EventEmitter<number>();
+
+  @ViewChild('tree') tree: TreeComponent;
+  missingDataTooltip: string = Constants.Error.MISSING_VNF_DETAILS;
+  currentNode: ITreeNode = null; //
+  nodes = [];
+  serviceModelId: string;
+  options: ITreeOptions = {
+    nodeHeight: 45,
+    dropSlotHeight: 1
+  };
+  parentElementClassName = 'content';
+
+  ngOnInit(): void {
+    this.store.subscribe(() => {this.updateTree()});
+    this.updateTree()
+  }
+
+  updateTree() {
+    const serviceInstance = this.store.getState().service.serviceInstance[this.serviceModelId];
+    this.nodes = this._servicePlanningService.convertServiceInstanceToTreeData(serviceInstance, this.serviceModelId);
+  }
+
+  ngAfterViewInit():void {
+    // Expand drawing tree on init.
+    this.tree.treeModel.expandAll();
+  }
+
+  public onContextMenu($event: MouseEvent, node: ITreeNode): void {
+    this.currentNode = node;
+    node.focus();
+    node.setActiveAndVisible(false);
+    this.selectNode(node);
+    this._contextMenuService.show.next({
+      event: <any>$event,
+      item: node,
+    });
+    $event.preventDefault();
+    $event.stopPropagation();
+  }
+
+  public editItem(node: ITreeNode): void {
+    node = this.currentNode;
+    this._iframeService.addClassOpenModal(this.parentElementClassName);
+    this.dialogService.addDialog(VnfPopupComponent, {
+      serviceModelId: this.serviceModelId,
+      modelName: node.data.modelName,
+      modelType: node.data.type,
+      parentModelName: node.parent.data.modelName,
+      isNewVfModule : false
+    })
+  }
+
+  public deleteItem(node: ITreeNode): void {
+    if(this.currentNode.data.type === 'VF'){
+      if(!isNullOrUndefined(this.currentNode.data.children) && this.currentNode.data.children.length === 0){
+        this.store.dispatch(deleteVnfInstance(this.currentNode.data.modelName, this.serviceModelId));
+      }else {
+        let messageBoxData : MessageBoxData = new MessageBoxData(
+          "Remove VNF",  // modal title
+          "You are about to remove this VNF and all its children from this service. Are you sure you want to remove it?",
+
+          ModalType.alert,
+          ModalSize.medium,
+          [
+            {text:"Remove VNF", size:"large",  callback: this.removeVnf.bind(this), closeModal:true},
+            {text:"Don’t Remove", size:"medium", closeModal:true}
+          ]);
+
+        MessageBoxService.openModal.next(messageBoxData);
+      }
+    }else {
+        this.store.dispatch(deleteVfModuleInstance(this.currentNode.data.modelName, this.serviceModelId, node.parent.data.modelName));
+    }
+  }
+
+  removeVnf() {
+    this.store.dispatch(deleteVnfInstance(this.currentNode.data.modelName,  this.serviceModelId));
+  }
+
+  public selectNode(node: ITreeNode): void {
+    node.expand();
+    this.highlightNode.emit(node.data.modelId);
+  }
+
+  isDataMissing(node: ITreeNode) {
+    //todo: currently not showing the alert icon. will be implemented in upcoming story.
+    return false;
+  }
+
+}
+
+