Save edited changes

Implemented code to save chnages to store on click of save button in
editor view

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

4 files changed, 96 insertions, 56 deletions

diff --git a/cds-ui/client/src/app/common/modules/app-material.module.ts b/cds-ui/client/src/app/common/modules/app-material.module.ts
index c0e8425c2..9ad2063f5 100644
--- a/cds-ui/client/src/app/common/modules/app-material.module.ts
+++ b/cds-ui/client/src/app/common/modules/app-material.module.ts
@@ -54,7 +54,8 @@ import { MatAutocompleteModule,
   MatTabsModule,
   MatToolbarModule,
   MatTooltipModule,
-  MatTreeModule } from '@angular/material';
+  MatTreeModule,
+  MatFormFieldModule } from '@angular/material';
 
 @NgModule({
   imports: [
@@ -92,7 +93,8 @@ import { MatAutocompleteModule,
   MatToolbarModule,
   MatTooltipModule,
   MatTreeModule,
-  MatListModule
+  MatListModule,
+  MatFormFieldModule
   ],
   exports: [
     MatAutocompleteModule,
@@ -128,7 +130,8 @@ import { MatAutocompleteModule,
   MatTabsModule,
   MatToolbarModule,
   MatTooltipModule,
-  MatTreeModule 
+  MatTreeModule,
+  MatFormFieldModule
   ]
 })
 export class AppMaterialModule { }
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 d7ba14072..01e6e80af 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
@@ -42,7 +42,64 @@ limitations under the License.
         <ace-editor [(text)]="text" mode="json" #editor class="aceEditor"></ace-editor>
     </div>
 </div>
-<div style="position:relative">
+<!-- <div style="position:relative">
     <button mat-button class="savebtn" (click)="updateBlueprint();SaveToBackend()">Save</button>
-    <button mat-button class="savebtn" (click)="download();">Download</button>
+    <button mat-button class="savebtn" style="margin-left: 82px;" (click)="download();">Download</button>
+</div>
+
+<div>
+    <mat-form-field>
+        <select matNativeControl required>
+          <option value="volvo">SDC</option>
+          <option value="saab">CCSDK</option>
+        </select>
+    </mat-form-field>
+    <button  mat-button class="savebtn">Deploy</button>
+    <button  mat-button class="savebtn">Save</button>
+</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;">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;">Download</button>
+
+    </div>
+    </div>
 </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 f2778840c..f189af656 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
@@ -25,13 +25,15 @@ limitations under the License.
     margin-top: 8px;
     .fileViewContainer {
         width: 20%;
-        margin: 2px
+        margin: 2px;
+        height: 450px !important;
+        overflow-x: scroll;
+        overflow-y: scroll;
     }
     .editorConatiner {
         width: 80%;
         background-color: gainsboro;
         height: 450px !important;
-        margin-left: 5em;
     }
 }
 
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 96aececcf..ac701806e 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
@@ -34,55 +34,16 @@ import { IAppState } from '../../../../common/core/store/state/app.state';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import { IBlueprintState } from 'src/app/common/core/store/models/blueprintState.model';
-import { LoadBlueprintSuccess } from '../../../../common/core/store/actions/blueprint.action'
+import { LoadBlueprintSuccess, SetBlueprintState } from '../../../../common/core/store/actions/blueprint.action'
 
 
-interface FoodNode {
+interface Node {
   name: string;
-  children?: FoodNode[];
+  children?: Node[];
   data?: any
 }
 
-// const TREE_DATA: FoodNode[] = [
-//   {
-//     name: 'Definitions',
-//     children: [
-//       { name: 'activation-blueprint.json' },
-//       { name: 'artifacts_types.json' },
-//       { name: 'data_types.json' },
-//     ]
-//   },
-//   {
-//     name: 'Scripts',
-//     children: [
-//       {
-//         name: 'kotlin',
-//         children: [
-//           { name: 'ScriptComponent.cba.kts' },
-//           { name: 'ResourceAssignmentProcessor.cba.kts' },
-//         ]
-//       }
-//     ]
-//   },
-//   {
-//     name: 'Templates',
-//     children: [
-//       {
-//         name: 'baseconfig-template'
-//       }
-//     ]
-//   },
-//   {
-//     name: 'TOSCA-Metada',
-//     children: [
-//       {
-//         name: 'TOSCA.meta'
-//       }
-//     ]
-//   },
-// ];
-
-const TREE_DATA: FoodNode[] = [
+const TREE_DATA: Node[] = [
   {
     name: 'Definitions',
     children: [
@@ -117,9 +78,10 @@ export class EditorComponent implements OnInit {
   filesData: any = [];
   selectedFile: string;
   zipFolder: any;
+  blueprintName: string;
   private zipFile: JSZip = new JSZip();
 
-  private transformer = (node: FoodNode, level: number) => {
+  private transformer = (node: Node, level: number) => {
     return {
       expandable: !!node.children && node.children.length > 0,
       name: node.name,
@@ -172,6 +134,7 @@ export class EditorComponent implements OnInit {
         this.filesTree = blueprintdata.files;
         this.filesData = blueprintdata.filesData;
         this.dataSource.data = this.filesTree;
+        this.blueprintName = blueprintdata.name;
         let blueprint = [];
         for (let key in this.blueprintdata) {
           if (this.blueprintdata.hasOwnProperty(key)) {
@@ -188,13 +151,28 @@ export class EditorComponent implements OnInit {
   }
 
   updateBlueprint() {
-    if (this.selectedFile == 'activation-blueprint.json') {
-      // to do
+    console.log(this.blueprint);
+    this.filesData.forEach(fileNode=>{
+      if(fileNode.name.includes(this.blueprintName.trim()) && fileNode.name.includes(this.selectedFile.trim())) {
+        fileNode.data = this.text;
+      } else if(fileNode.name.includes(this.selectedFile.trim())) {
+        fileNode.data = this.text;
+      }
+    });
+
+    if(this.selectedFile == this.blueprintName) {
+      this.blueprint = JSON.parse(this.text);
     } else {
-      // to do
+      this.blueprint = this.blueprintdata;
+    }
+
+    let blueprintState = {
+      blueprint: this.blueprint,
+      name: this.blueprintName,
+      files: this.filesTree,
+      filesData: this.filesData
     }
-    this.blueprint = JSON.parse(this.text);
-    this.store.dispatch(new LoadBlueprintSuccess(this.blueprint));
+    this.store.dispatch(new SetBlueprintState(blueprintState));
     // console.log(this.text);
   }