Editor component

Added editor component to modify module

Issue-ID: CCSDK-975
Change-Id: Iee1f9f54e78af199f8e0d6b5133f7a278b900cf9
Signed-off-by: Arundathi Patil <arundpil@in.ibm.com>

3 files changed, 27 insertions, 13 deletions

diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html
index 1ba944a30..d59597021 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html
@@ -50,18 +50,10 @@ limitations under the License.
 
 
   <div class="outerDiv divtwo" (click)="on = !on" ondrop="dropcalled(event)" ondragover="allowDrop(event)" id="svgDiv">
-    <!-- <canvas class="cnv" height="500"> -->
-    <!-- <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done" [cdkDropListConnectedTo]="[pendingList,reviewList]"
-              style="height: 100%;width: 100%" (cdkDropListDropped)="drop($event)"> -->
-    <!-- <canvas id="canvasArea" class="cnv" height="500" width="500" (click)="selected($event)"> -->
-    <!-- <div class="item-box" *ngFor="let item of done" cdkDrag>{{item}}</div> -->
-    <!-- </canvas> -->
-    <!-- </div> -->
-    <!-- </canvas> -->
-    <!-- <svg id="svgArea" width="1000px" height="100%" style="background-color: #C0C0C0"> -->
-    <!-- <rect x="0" y="0" width="300" height="200" fill="yellow"></rect> -->
-    <!-- </svg> -->
-    <app-designer></app-designer>
+    <button style="cursor: pointer; position: absolute;top: 4em;right: 27em; padding: 6px;color: white; background-color:#3f51b5;margin-right: 2em;border-radius: 2em; ">Enrichment</button>
+    <button (click) ="changeView()" style="cursor: pointer; position: absolute;top: 4em;right: 22em; padding: 6px;color: white;background-color:#3f51b5; border-radius: 2em">{{viewText}}</button>
+    <app-designer *ngIf="designerMode" (onNodeSelect)="on = !on; viewNodeDetails($event)"></app-designer>
+    <app-editor *ngIf="editorMode"></app-editor>
   </div>
 
 
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts
index a02bb97fa..1efdefce6 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts
@@ -28,9 +28,29 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ModifyTemplateComponent implements OnInit {
 
+  designerMode: boolean = true;
+  editorMode: boolean = false;
+  viewText: string = "Editor View";
+
   constructor() { }
 
   ngOnInit() {
   }
 
+  viewNodeDetails(nodeTemplate) {
+    console.log(nodeTemplate);
+  }
+
+  changeView() {
+    if(this.viewText == 'Editor View') {
+      this.editorMode =  true;
+      this.designerMode = false;
+      this.viewText = 'Designer View'
+    } else {
+      this.editorMode =  false;
+      this.designerMode = true;
+      this.viewText = 'Editor View'
+    }
+  }
+
 }
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts
index 9ccb9977f..1ab7a8045 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts
@@ -26,11 +26,13 @@ import { ModifyTemplateComponent } from './modify-template.component';
 import { ModifyTemplateRoutingModule } from './modify-template-routing.module';
 import { AppMaterialModule } from '../../../common/modules/app-material.module';
 import { DesignerComponent } from './designer/designer.component';
+import { EditorComponent } from './editor/editor.component';
 
 @NgModule({
   declarations: [
     ModifyTemplateComponent,
-    DesignerComponent
+    DesignerComponent,
+    EditorComponent
   ],
   exports: [
     ModifyTemplateComponent,