Editor Component Changes

Implemented code to highlight file o select.

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

3 files changed, 12 insertions, 52 deletions

diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html
index 64b201d81..308f9cc1f 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html
@@ -20,8 +20,8 @@ limitations under the License.
 
 <div class="container">
     <div class="fileViewContainer">
-        <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
-            <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
+        <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" style="background-color: #ebebeb">
+            <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)="selectFileToView(node);activeNode = node" [ngClass]="{ 'background-highlight': activeNode === node }">
                 <button mat-icon-button disabled></button>
                 <button mat-icon-button (click)="selectFileToView(node)">{{node.name}}</button>
             </mat-tree-node>
@@ -31,7 +31,7 @@ limitations under the License.
                   {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                 </mat-icon>
               </button>
-                <button mat-icon-button (click)="selectFileToView(node)">{{node.name}}</button>
+                <button mat-icon-button>{{node.name}}</button>
             </mat-tree-node>
         </mat-tree>
     </div>
@@ -39,50 +39,4 @@ limitations under the License.
         <i class="fa fa-save save-icon" style="font-size:24px" (click)="updateBlueprint()"></i>
         <ace-editor [(text)]="text" [(mode)]="mode" #editor class="aceEditor"></ace-editor>
     </div>
-</div>
-
-<!-- <div style="display: flex;flex-direction: row">
-    <div style="height: 6em;
-    width: 30em;">
-
-    </div>
-    <div style="height: 6em;
-    width: 16em">
-        <button style="margin: 0.5em;
-        background-color: #3f51b5;
-        color: white;
-        border-radius: 2em;
-        padding: 0.5em;
-        min-width: 6em;" (click)="updateBlueprint()">Save Changes</button>
-    </div>
-    <div style="height: 6em;
-    width: 100%;">
-        <div style="margin-left: 38em">
-            <mat-form-field>
-                <select matNativeControl required>
-              <option value="volvo">SDC</option>
-              <option value="saab">CCSDK</option>
-            </select>
-            </mat-form-field>
-            <button style="margin: 0.5em;
-        background-color: #3f51b5;
-        color: white;
-        border-radius: 2em;
-        padding: 0.5em;
-        min-width: 6em;">Deploy</button>
-            <button style="margin: 0.5em;
-        background-color: #3f51b5;
-        color: white;
-        border-radius: 2em;
-        padding: 0.5em;
-        min-width: 6em;">Save</button>
-            <button style="margin: 0.5em;
-        background-color: #3f51b5;
-        color: white;
-        border-radius: 2em;
-        padding: 0.5em;
-        min-width: 6em;" (click)="download()">Download</button>
-
-        </div>
-    </div>
-</div> -->
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss
index 136c08bfa..2f16af7a5 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss
@@ -29,6 +29,7 @@ limitations under the License.
         height: 490px !important;
         overflow-x: scroll;
         overflow-y: scroll;
+        background-color: #ebebeb;
     }
     .editorConatiner {
         width: 80%;
@@ -57,4 +58,8 @@ limitations under the License.
     font-size: 24px;
     cursor: pointer;
     z-index: 1;
-}
\ No newline at end of file
+}
+
+.background-highlight {
+    background-color: whitesmoke !important;
+  }
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts
index 7203dc8b3..e48177d0a 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts
@@ -82,6 +82,7 @@ export class EditorComponent implements OnInit {
   fileExtension: string;
   mode: string;
   private zipFile: JSZip = new JSZip();
+  activeNode: any;
 
   private transformer = (node: Node, level: number) => {
     return {
@@ -143,7 +144,7 @@ export class EditorComponent implements OnInit {
             blueprint.push(this.blueprintdata[key]);
           }
         }
-        this.text = JSON.stringify(this.blueprintdata, null, '\t');
+        // this.text = JSON.stringify(this.blueprintdata, null, '\t');
         // this.editor.getEditor().getSession().setMode("ace/mode/json");
         this.editor.getEditor().getSession().setTabSize(2);
         this.editor.getEditor().getSession().setUseWrapMode(true);