File Download

Added file download functionality

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

3 files changed, 103 insertions, 36 deletions

diff --git a/cds-ui/client/package.json b/cds-ui/client/package.json
index 9ad47413d..0eea31ec1 100644
--- a/cds-ui/client/package.json
+++ b/cds-ui/client/package.json
@@ -31,6 +31,7 @@
         "core-js": "^2.5.4",
         "d3": "^5.9.1",
         "font-awesome": "^4.7.0",
+        "file-saver": "^2.0.1",
         "hammerjs": "^2.0.8",
         "jszip": "^3.2.0",
         "material-design-icons": "^3.0.1",
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 4c1a7dc9e..d7ba14072 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
@@ -25,7 +25,7 @@ limitations under the License.
             <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
                 <!-- use a disabled button to provide padding for tree leaf -->
                 <button mat-icon-button disabled></button>
-                <span (click)="fileClicked(node.name)">{{node.name}}</span>
+                <button mat-icon-button (click)="selectFileToView(node)">{{node.name}}</button>
             </mat-tree-node>
             <!-- This is the tree node template for expandable nodes -->
             <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
@@ -34,7 +34,7 @@ limitations under the License.
                   {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                 </mat-icon>
               </button>
-                <span (click)="fileClicked(node.name)">{{node.name}}</span>
+                <button mat-icon-button (click)="selectFileToView(node)">{{node.name}}</button>
             </mat-tree-node>
         </mat-tree>
     </div>
@@ -43,5 +43,6 @@ limitations under the License.
     </div>
 </div>
 <div style="position:relative">
-    <button mat-button class="savebtn" (click)="updateBlueprint()">Save</button>
+    <button mat-button class="savebtn" (click)="updateBlueprint();SaveToBackend()">Save</button>
+    <button mat-button class="savebtn" (click)="download();">Download</button>
 </div>
\ 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 46dca73dd..96aececcf 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
@@ -27,18 +27,61 @@ import "ace-builds/webpack-resolver";
 import 'brace';
 import 'brace/ext/language_tools';
 import 'ace-builds/src-min-noconflict/snippets/html';
+import * as JSZip from 'jszip';
+import { saveAs } from 'file-saver';
+
 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 } from '../../../../common/core/store/actions/blueprint.action'
 
 
 interface FoodNode {
   name: string;
   children?: FoodNode[];
+  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[] = [
   {
     name: 'Definitions',
@@ -47,35 +90,7 @@ const TREE_DATA: FoodNode[] = [
       { 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'
-      }
-    ]
-  },
+  }
 ];
 
 /** Flat node with expandable and level information */
@@ -98,6 +113,11 @@ export class EditorComponent implements OnInit {
   blueprint: IBlueprint;
   bpState: Observable<IBlueprintState>;
   text: string;
+  filesTree: any = [];
+  filesData: any = [];
+  selectedFile: string;
+  zipFolder: any;
+  private zipFile: JSZip = new JSZip();
 
   private transformer = (node: FoodNode, level: number) => {
     return {
@@ -118,12 +138,14 @@ export class EditorComponent implements OnInit {
   constructor(private store: Store<IAppState>) {
     this.dataSource.data = TREE_DATA;
     this.bpState = this.store.select('blueprint');
+    // this.dataSource.data = TREE_DATA;
   }
 
   hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
 
   ngOnInit() {
     this.editorContent();
+    this.dataSource.data = this.filesTree;
   }
 
   fileClicked(file) {
@@ -147,6 +169,9 @@ export class EditorComponent implements OnInit {
       blueprintdata => {
         var blueprintState: IBlueprintState = { blueprint: blueprintdata.blueprint, isLoadSuccess: blueprintdata.isLoadSuccess, isSaveSuccess: blueprintdata.isSaveSuccess, isUpdateSuccess: blueprintdata.isUpdateSuccess };
         this.blueprintdata = blueprintState.blueprint;
+        this.filesTree = blueprintdata.files;
+        this.filesData = blueprintdata.filesData;
+        this.dataSource.data = this.filesTree;
         let blueprint = [];
         for (let key in this.blueprintdata) {
           if (this.blueprintdata.hasOwnProperty(key)) {
@@ -161,10 +186,50 @@ export class EditorComponent implements OnInit {
         // console.log(this.text);
       })
   }
-   
- updateBlueprint(){
+
+  updateBlueprint() {
+    if (this.selectedFile == 'activation-blueprint.json') {
+      // to do
+    } else {
+      // to do
+    }
     this.blueprint = JSON.parse(this.text);
     this.store.dispatch(new LoadBlueprintSuccess(this.blueprint));
     // console.log(this.text);
-  }  
+  }
+
+  selectFileToView(file) {
+    this.selectedFile = file.name;
+    this.filesData.forEach((fileNode) => {
+      if (fileNode.name.includes(file.name)) {
+        this.text = fileNode.data;
+      }
+    })
+  }
+
+  SaveToBackend() {
+    this.zipFile.generateAsync({ type: "blob" })
+      .then(blob => {
+        
+      });
+  }
+
+  deploy() {
+    // to do
+  }
+
+  create() {    
+    this.filesData.forEach((path) => {
+      this.zipFile.file(path.name, path.data);
+    });
+  }
+
+  download() {
+    this.create();
+    var zipFilename = "baseconfiguration.zip";
+    this.zipFile.generateAsync({ type: "blob" })
+      .then(blob => {
+        saveAs(blob, zipFilename);
+      });
+  }
 }