adding design of first two tabs in creation package component

Issue-ID: CCSDK-2014

Signed-off-by: shaaban Altanany <shaaban.eltanany.ext@orange.com>
Change-Id: Ib4cf67f38511fbabc9d69313e9e88edadd7b6c4a

1 files changed, 33 insertions, 3 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
index 8aa9d5e6d..9b65885a5 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
@@ -1,6 +1,8 @@
 import {Component, OnInit} from '@angular/core';
 import {NgxFileDropEntry, FileSystemFileEntry, FileSystemDirectoryEntry} from 'ngx-file-drop';
 import {PackageCreationStore} from '../package-creation.store';
+import {Observable} from 'rxjs';
+import {HttpClient} from '@angular/common/http';
 
 
 @Component({
@@ -9,7 +11,10 @@ import {PackageCreationStore} from '../package-creation.store';
     styleUrls: ['./imports-tab.component.css']
 })
 export class ImportsTabComponent {
-    constructor(private packageCreationStore: PackageCreationStore) {
+
+    fileContent: string | ArrayBuffer = '';
+
+    constructor(private packageCreationStore: PackageCreationStore, private http: HttpClient) {
     }
 
     public files: NgxFileDropEntry[] = [];
@@ -21,16 +26,28 @@ export class ImportsTabComponent {
             // Is it a file?
             if (droppedFile.fileEntry.isFile) {
                 const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
+
                 fileEntry.file((file: File) => {
                     console.log(droppedFile.relativePath, file);
-                    this.packageCreationStore.addDefinition(droppedFile.relativePath, '');
+
+                    const formData = new FormData();
+                    formData.append('logo', file, droppedFile.relativePath);
+                    console.log(formData);
+
+                    this.packageCreationStore.addDefinition(droppedFile.relativePath, this.getContent(droppedFile.relativePath));
 
                 });
             } else {
                 // It was a directory (empty directories are added, otherwise only files)
                 const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
                 console.log(droppedFile.relativePath, fileEntry);
-                this.packageCreationStore.addDefinition(droppedFile.relativePath, '');
+
+
+               /* const formData = new FormData();
+                formData.append('logo', droppedFile, droppedFile.relativePath);
+                console.log(formData);*/
+
+                this.packageCreationStore.addDefinition(droppedFile.relativePath, this.getContent(droppedFile.relativePath));
 
             }
         }
@@ -43,4 +60,17 @@ export class ImportsTabComponent {
     public fileLeave(event) {
         console.log(event);
     }
+
+
+    getContent(filePath: string) {
+        let content = '';
+        this.getJSON(filePath).subscribe(data => {
+            content = data;
+        });
+        return content;
+    }
+
+    public getJSON(filePath: string): Observable<any> {
+        return this.http.get(filePath);
+    }
 }