From b64c848cf7168fabf953a5c6a98319bd39c88102 Mon Sep 17 00:00:00 2001
From: ShaabanEltanany <shaaban.eltanany.ext@orange.com>
Date: Sun, 20 Sep 2020 16:04:36 +0200
Subject: adding import package basic functionalities

Issue-ID: CCSDK-2842
Signed-off-by: ShaabanEltanany <shaaban.eltanany.ext@orange.com>
Change-Id: I62a260aca9274900ed32706d79efbb09590e20b1
---
 .../import-package/import-package.component.css    |  0
 .../import-package/import-package.component.html   | 54 +++++++++++++
 .../import-package.component.spec.ts               | 25 ++++++
 .../import-package/import-package.component.ts     | 90 ++++++++++++++++++++++
 .../package-list/package-list.component.html       |  6 +-
 5 files changed, 174 insertions(+), 1 deletion(-)
 create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.css
 create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.html
 create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.spec.ts
 create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.ts

(limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard')

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.html
new file mode 100644
index 000000000..274435cd4
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.html
@@ -0,0 +1,54 @@
+<div class="modal fade" id="importPackageModal" tabindex="-1" role="dialog" aria-labelledby="importPackageModal"
+     aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="importModalLabel">Import File</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <!-- <span aria-hidden="true">&times;</span> -->
+                    <img src="assets/img/icon-close.svg"/>
+                </button>
+            </div>
+            <div class="modal-body">
+                <ngx-file-drop accept=".zip" dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)"
+                               (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
+                    <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
+                        <div class="folder-upload">
+                            <img src="assets/img/folder-upload.svg"/>
+                        </div>
+                        <div class="folder-upload-text">
+                            Drag & Drop file
+                        </div>
+                        <div class="folder-upload-text">or
+                            <button type="button" class="btn btn-sm btn-primary" (click)="openFileSelector()">Browse
+                                Files
+                            </button>
+                        </div>
+                        <div class="folder-upload-type">Allowed file type: zip</div>
+                    </ng-template>
+                </ngx-file-drop>
+                <div class="upload-table">
+                    <table class="table">
+                        <thead>
+                        <tr *ngFor="let item of uploadedFiles; let i=index">
+                            <th width="40"><img src="assets/img/icon-file-code.svg"/></th>
+                            <th>{{ item.name }}</th>
+                            <th (click)="removeInitFile(i)" width="40" class="text-right"><img
+                                    src="assets/img/icon-remove-file.svg"/></th>
+                        </tr>
+                        </thead>
+                    </table>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal"
+                        (click)="resetTheUploadedFiles()">Cancel
+                </button>
+                <button type="button" class="btn btn-sm btn-primary" [disabled]="uploadedFiles?.length<=0"
+                        data-dismiss="modal" (click)="openFilesInCreationPackage();saveFileToStore()">
+                    Import
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.spec.ts
new file mode 100644
index 000000000..c594b34aa
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImportPackageComponent } from './import-package.component';
+
+describe('ImportPackageComponent', () => {
+  let component: ImportPackageComponent;
+  let fixture: ComponentFixture<ImportPackageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ImportPackageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImportPackageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.ts
new file mode 100644
index 000000000..0f582d7f6
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.ts
@@ -0,0 +1,90 @@
+import {Component, OnInit} from '@angular/core';
+import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop';
+import {PackageCreationExtractionService} from '../../package-creation/package-creation-extraction.service';
+import {Router} from '@angular/router';
+
+@Component({
+    selector: 'app-import-package',
+    templateUrl: './import-package.component.html',
+    styleUrls: ['./import-package.component.css']
+})
+export class ImportPackageComponent implements OnInit {
+
+    public uploadedFiles: FileSystemFileEntry[] = [];
+    private fileNames: Set<string> = new Set();
+    fileToDelete: any = {};
+    public files: NgxFileDropEntry[] = [];
+
+    constructor(private packageCreationExtractionService: PackageCreationExtractionService,
+                private router: Router) {
+    }
+
+    ngOnInit() {
+    }
+
+    removeInitFile(index) {
+        this.uploadedFiles.splice(index, 1);
+    }
+
+    public dropped(files: NgxFileDropEntry[]) {
+        this.files = files;
+        for (const droppedFile of files) {
+            // Is it a file? & Not added before
+            if (droppedFile.fileEntry.isFile) {
+                const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
+                this.uploadedFiles.push(fileEntry);
+                console.log(fileEntry.name);
+                this.fileNames.add(fileEntry.name);
+
+            }
+        }
+    }
+
+    initDelete(file) {
+        console.log(file);
+        this.fileToDelete = file;
+    }
+
+    removeFile() {
+        const filename = this.fileToDelete.key;
+        for (let i = 0; i < this.uploadedFiles.length; i++) {
+            console.log(this.uploadedFiles[i]);
+            if (this.uploadedFiles[i].name === filename) {
+                this.uploadedFiles.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    resetTheUploadedFiles() {
+        this.uploadedFiles = [];
+    }
+
+
+    public fileOver(event) {
+        console.log(event);
+    }
+
+    public fileLeave(event) {
+        console.log(event);
+    }
+
+    saveFileToStore() {
+        for (const droppedFile of this.uploadedFiles) {
+            const file = this.getFile(droppedFile);
+            this.packageCreationExtractionService.extractBlobToStore(file);
+        }
+    }
+
+    openFilesInCreationPackage() {
+        this.router.navigate(['/packages/createPackage/']);
+    }
+
+    async getFile(fileEntry) {
+        try {
+            return await new Promise((resolve, reject) => fileEntry.file(resolve, reject));
+        } catch (err) {
+            console.log(err);
+        }
+    }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
index 1390a7b78..0bb4f1f41 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
@@ -12,7 +12,8 @@
                         Package
                     </a>
                     <br />
-                    <a href="#" id="clone-btn" role="button" aria-pressed="true" class="btn-import-package float"><i
+                    <a data-target="#importPackageModal" data-toggle="modal"  id="clone-btn" role="button"
+                       aria-pressed="true" class="btn-import-package float"><i
                             class="icon-import-blue" aria-hidden="true"></i>Import Package
                     </a>
                     <ngx-ui-loader></ngx-ui-loader>
@@ -121,3 +122,6 @@
         </div>
     </div>
 </div>
+
+
+<app-import-package></app-import-package>
-- 
cgit 1.2.3-korg