New Angular UI from 1806

Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666
Issue-ID: VID-208
Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>

3 files changed, 106 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.html b/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.html
new file mode 100644
index 00000000..5b2f22d5
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.html
@@ -0,0 +1,13 @@
+<div class="service-planning-header">
+  <drawing-board-header></drawing-board-header>
+</div>
+<div class="service-planning-content row">
+  <available-models-tree class="left-side col-md-6" (highlightInstances)="highlightInstancesBySelectingNode($event)"></available-models-tree>
+  <!--<no-content-message-and-icon *ngIf="!isShowTree()" class="span-over"-->
+                               <!--data-title="Please add objects (VNFs, network, modules etc.) from the left tree to design the service instance"-->
+                               <!--subtitle="Once done, click Deploy to start instantiation"-->
+                               <!--iconPath="./img/UPLOAD.svg"-->
+                               <!--iconClass="upload-icon-service-planing"></no-content-message-and-icon>-->
+  <drawing-board-tree *ngIf="isShowTree()" class="span-over col-md-6" (highlightNode)="highlightNodeBySelectingInstance($event)"></drawing-board-tree>
+</div>
+
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.scss b/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.scss
new file mode 100644
index 00000000..69546a6c
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.scss
@@ -0,0 +1,16 @@
+
+.service-planning-content {
+  display: flex;
+  flex: 1;
+}
+
+.span-over {
+  display: flex;
+  flex: 1;
+}
+
+//css for the icon. :host ::ng-deep are needed for applying css to child component
+:host ::ng-deep .upload-icon-service-planing {
+  height: 117px;
+  margin-top: 32px;
+}
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.ts
new file mode 100644
index 00000000..1ce0e810
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.ts
@@ -0,0 +1,77 @@
+import {Component, ViewChild} from '@angular/core';
+import {DrawingBoardTreeComponent} from "../drawing-board-tree/drawing-board-tree.component";
+import {AvailableModelsTreeComponent} from "../available-models-tree/available-models-tree.component";
+import {ITreeNode} from "angular-tree-component/dist/defs/api";
+import {TreeComponent} from 'angular-tree-component';
+
+@Component({
+  selector: 'service-planning',
+  templateUrl: './service-planning.component.html',
+  styleUrls: ['./service-planning.component.scss']
+})
+
+export class ServicePlanningComponent {
+
+  @ViewChild(DrawingBoardTreeComponent) drawingModelTree;
+  @ViewChild(AvailableModelsTreeComponent) availableModelTree;
+
+  isShowTree(): boolean {
+    return true;
+  }
+
+  public highlightNodeBySelectingInstance(modelId: number): void {
+    this.availableModelTree.tree.treeModel.getNodeBy((node: ITreeNode) => node.data.id === modelId)
+    .setActiveAndVisible().expand();
+  }
+
+  public highlightInstancesBySelectingNode(id: number): void {
+    if(this.isShowTree()) {
+      let _this = this;
+      let matchInstances = _this.searchTree(id);
+      if (!matchInstances.length)
+        _this.clearSelectionInTree(_this.drawingModelTree.tree);
+      matchInstances.forEach(function (instance, index) {
+        let multi : boolean = !!index;
+        _this.drawingModelTree.tree.treeModel.getNodeById(instance.id)
+          .setActiveAndVisible(multi).expand();
+      });
+
+    }
+  }
+
+  clearSelectionInTree(tree: TreeComponent): void {
+    let activateNode = tree.treeModel.getActiveNode();
+    activateNode ? activateNode.toggleActivated().blur() : null;
+  }
+
+  searchTree(modelId: number) {
+    let _this = this;
+    let results = [];
+    let nodes = _this.drawingModelTree.nodes;
+    nodes.forEach(function (node) {
+      _this.searchTreeNode(node, modelId, results);
+    });
+    return results;
+  }
+
+  searchTreeNode(node, modelId: number, results): void {
+    if(node.modelId === modelId){
+      results.push(node);
+    }
+    if (node.children != null){
+      for(let i = 0; i < node.children.length; i++){
+        this.searchTreeNode(node.children[i], modelId, results);
+      }
+    }
+  }
+
+
+}
+
+export class ServicePlanningEmptyComponent extends ServicePlanningComponent {
+  isShowTree() : boolean {
+    return false;
+  }
+}
+
+