Zip file upload Methods

Added methods for zip file upload functionality

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

diff --git a/cds-ui/client/package.json b/cds-ui/client/package.json
index 796bf3a..9ad4741 100644 (file)
--- a/cds-ui/client/package.json
+++ b/cds-ui/client/package.json
@@ -32,9 +32,11 @@
         "d3": "^5.9.1",
         "font-awesome": "^4.7.0",
         "hammerjs": "^2.0.8",
+        "jszip": "^3.2.0",
         "material-design-icons": "^3.0.1",
         "ng2-ace-editor": "^0.3.9",
         "rxjs": "6.3.3",
+        "stream": "0.0.2",
         "tslib": "^1.9.0",
         "zone.js": "0.8.26"
     },
@@ -59,4 +61,4 @@
         "tslint": "5.11.0",
         "typescript": "3.1.6"
     }
-}
\ No newline at end of file
+}

diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts
index 5fe28e7..c6b6cc7 100644 (file)
--- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts
@@ -19,13 +19,15 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 
-import { Component, OnInit, EventEmitter, Output } from '@angular/core';
+import { Component, OnInit, EventEmitter, Output, ViewChild } from '@angular/core';
 import { Store } from '@ngrx/store';
+import * as JSZip from 'jszip';
+import { Observable } from 'rxjs';
+
 import { IBlueprint } from '../../../../common/core/store/models/blueprint.model';
 import { IBlueprintState } from '../../../../common/core/store/models/blueprintState.model';
 import { IAppState } from '../../../../common/core/store/state/app.state';
 import { LoadBlueprintSuccess } from '../../../../common/core/store/actions/blueprint.action';
-import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-search-template',
@@ -39,6 +41,14 @@ export class SearchTemplateComponent implements OnInit {
   blueprintState: IBlueprintState;
   bpState: Observable<IBlueprintState>;
 
+  @ViewChild('fileInput') fileInput;
+  result: string = '';
+
+  public paths = [];
+  public tree;
+  private zipFile: JSZip = new JSZip();
+  private fileObject: any;
+
   constructor(private store: Store<IAppState>) { }
 
   ngOnInit() {
@@ -46,8 +56,15 @@ export class SearchTemplateComponent implements OnInit {
 
   fileChanged(e: any) {
     this.file = e.target.files[0];
+
+    // this.zipFile.loadAsync(this.file)
+    //   .then((zip) => {
+    //     if(zip) {            
+    //       this.buildFileViewData(zip);
+    //     }
+    //   });
   }
-  
+
   updateBlueprintState() {
     let fileReader = new FileReader();
     fileReader.readAsText(this.file);
@@ -57,4 +74,47 @@ export class SearchTemplateComponent implements OnInit {
       me.store.dispatch(new LoadBlueprintSuccess(data));
     }
   }
+
+  async buildFileViewData(zip) {
+    for (var file in zip.files) {
+      this.fileObject = {
+        name: zip.files[file].name,
+        data: ''
+      };
+      const value = <any>await  zip.files[file].async('string');
+      this.fileObject.data = value;
+      this.paths.push(this.fileObject); 
+    }
+    this.arrangeTreeData(this.paths);
+  }
+
+  arrangeTreeData(paths) {
+    const tree = [];
+
+    paths.forEach((path) => {
+
+      const pathParts = path.name.split('/');
+      pathParts.shift();
+      let currentLevel = tree;
+
+      pathParts.forEach((part) => {
+        const existingPath = currentLevel.filter(level => level.name === part);
+
+        if (existingPath.length > 0) {
+          currentLevel = existingPath[0].children;
+        } else {
+          const newPart = {
+            name: part,
+            children: [],
+            data: path.data
+          };
+
+          currentLevel.push(newPart);
+          currentLevel = newPart.children;
+        }
+      });
+    });
+    console.log('tree: ', tree);
+    return tree;
+  }
 }