diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard')
5 files changed, 174 insertions, 1 deletions
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 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.css 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">×</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> |