diff options
15 files changed, 378 insertions, 46 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts index 449312f99..2b0521bb2 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts @@ -267,6 +267,10 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl goToDesignerMode(id) { // this.designerService.setActionName(this.customActionName); + this.packageCreationStore.state$.subscribe(cba => { + console.log(cba); + sessionStorage.setItem('cba', this.packageCreationUtils.transformToJson(cba)); + }); this.router.navigate(['/packages/designer', id, {actionName: this.customActionName}]); } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts index f739ceb2e..b8938043c 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts @@ -37,9 +37,11 @@ export class DesignerCreationMode extends PackageCreationModes { } private createDefinitionsFolder(cbaPackage: CBAPackage, packageCreationUtils: PackageCreationUtils) { - cbaPackage.definitions.imports.forEach((valueOfFile, key) => { - FilesContent.putData(key, valueOfFile); - }); + if (cbaPackage.definitions.imports && cbaPackage.definitions.imports.size > 0) { + cbaPackage.definitions.imports.forEach((valueOfFile, key) => { + FilesContent.putData(key, valueOfFile); + }); + } const filenameEntry = 'Definitions/' + cbaPackage.metaData.name + '.json'; const vlbDefinition: VlbDefinition = new VlbDefinition(); @@ -51,28 +53,34 @@ export class DesignerCreationMode extends PackageCreationModes { metadata['author-email'] = 'shaaban.eltanany.ext@orange.com'; metadata['user-groups'] = 'test'; metadata.template_description = cbaPackage.metaData.description; - cbaPackage.metaData.mapOfCustomKey.forEach((customKeyValue, key) => { - metadata[key] = customKeyValue; - }); + if (cbaPackage.metaData.mapOfCustomKey && cbaPackage.metaData.mapOfCustomKey.size > 0) { + cbaPackage.metaData.mapOfCustomKey.forEach((customKeyValue, key) => { + metadata[key] = customKeyValue; + }); + } // create Tags let fullTags = ''; let setCount = 0; - cbaPackage.metaData.templateTags.forEach(val => { - setCount++; - if (setCount === cbaPackage.metaData.templateTags.size) { - fullTags += val; - } else { - fullTags += val + ', '; - } - }); + if (cbaPackage.metaData.templateTags && cbaPackage.metaData.templateTags.size > 0) { + cbaPackage.metaData.templateTags.forEach(val => { + setCount++; + if (setCount === cbaPackage.metaData.templateTags.size) { + fullTags += val; + } else { + fullTags += val + ', '; + } + }); + } metadata.template_tags = fullTags; vlbDefinition.metadata = metadata; const files: Import[] = []; - cbaPackage.definitions.imports.forEach((valueOfFile, key) => { - if (!key.includes(cbaPackage.metaData.name)) { - files.push({file: key}); - } - }); + if (cbaPackage.definitions.imports && cbaPackage.definitions.imports.size > 0) { + cbaPackage.definitions.imports.forEach((valueOfFile, key) => { + if (!key.includes(cbaPackage.metaData.name)) { + files.push({file: key}); + } + }); + } console.log(vlbDefinition); vlbDefinition.imports = files; console.log(cbaPackage.definitions.dslDefinition.content); @@ -83,6 +91,7 @@ export class DesignerCreationMode extends PackageCreationModes { vlbDefinition.topology_template = JSON.parse(cbaPackage.templateTopology.content); } console.log(vlbDefinition); + const value = packageCreationUtils.transformToJson(vlbDefinition); FilesContent.putData(filenameEntry, value); console.log('hello there'); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/PackageCreationModes.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/PackageCreationModes.ts index 6b80358fd..8b82cc0eb 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/PackageCreationModes.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/PackageCreationModes.ts @@ -1,7 +1,7 @@ -import { CBAPackage } from '../mapping-models/CBAPacakge.model'; -import { ModeType } from '../mapping-models/ModeType'; -import { FilesContent, MetaDataTabModel } from '../mapping-models/metadata/MetaDataTab.model'; -import { PackageCreationUtils } from '../package-creation.utils'; +import {CBAPackage} from '../mapping-models/CBAPacakge.model'; +import {ModeType} from '../mapping-models/ModeType'; +import {FilesContent, MetaDataTabModel} from '../mapping-models/metadata/MetaDataTab.model'; +import {PackageCreationUtils} from '../package-creation.utils'; export abstract class PackageCreationModes { @@ -21,25 +21,28 @@ export abstract class PackageCreationModes { public static mapModeType(cbaPackage: CBAPackage) { console.log(cbaPackage.metaData.mode); - if (cbaPackage.metaData.mode.includes('Scripting')) { - cbaPackage.metaData.mode = ModeType.Scripting; - } else if (cbaPackage.metaData.mode.includes('Designer') || cbaPackage.metaData.mode.includes('DEFAULT') ) { - cbaPackage.metaData.mode = ModeType.Designer; - } else { - cbaPackage.metaData.mode = ModeType.Generic; - } + /* if (cbaPackage.metaData.mode.includes('Scripting')) { + cbaPackage.metaData.mode = ModeType.Scripting; + } else if (cbaPackage.metaData.mode.includes('Designer') || cbaPackage.metaData.mode.includes('DEFAULT') ) { + cbaPackage.metaData.mode = ModeType.Designer; + } else { + cbaPackage.metaData.mode = ModeType.Generic; + }*/ + cbaPackage.metaData.mode = ModeType.Designer; return cbaPackage; } getValueOfMetaData(metaDataTab: MetaDataTabModel): string { let tags = ''; let count = 0; - for (const tag of metaDataTab.templateTags) { - count++; - if (count === metaDataTab.templateTags.size) { - tags += tag; - } else { - tags += tag + ', '; + if (metaDataTab.templateTags && metaDataTab.templateTags.size > 0) { + for (const tag of metaDataTab.templateTags) { + count++; + if (count === metaDataTab.templateTags.size) { + tags += tag; + } else { + tags += tag + ', '; + } } } return 'TOSCA-Meta-File-Version: 1.0.0\n' + diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts index 0e809674a..20cee7340 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts @@ -48,7 +48,6 @@ export class MetadataTabComponent implements OnInit { this.tags = element.metaData.templateTags; this.tags.delete(''); this.metaDataTab.templateTags = this.tags; - console.log(element); if (element.metaData.mode && element.metaData.mode.includes('DEFAULT')) { this.metaDataTab.mode = 'Designer Mode'; this.modeType = this.metaDataTab.mode; @@ -56,8 +55,12 @@ export class MetadataTabComponent implements OnInit { this.customKeysMap = element.metaData.mapOfCustomKey; this.metaDataTab.mapOfCustomKey = this.customKeysMap; + if (this.isNameEditable) { + this.validatePackageNameAndVersion(); + } // this.tags = element.metaData.templateTags; + } }); } @@ -99,6 +102,8 @@ export class MetadataTabComponent implements OnInit { } validatePackageNameAndVersion() { + console.log('in validate'); + console.log('in this.metaDataTab.name' + this.metaDataTab.name); if (this.metaDataTab.name && this.metaDataTab.version) { this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => { if (element) { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation-extraction.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation-extraction.service.ts new file mode 100644 index 000000000..31a5c3c35 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation-extraction.service.ts @@ -0,0 +1,130 @@ +import {Injectable, ViewChild} from '@angular/core'; +import {MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model'; +import {VlbDefinition} from './mapping-models/definitions/VlbDefinition'; +import {DslDefinition} from './mapping-models/CBAPacakge.model'; +import {PackageCreationStore} from './package-creation.store'; +import * as JSZip from 'jszip'; +import {PackageCreationUtils} from './package-creation.utils'; +import {MetadataTabComponent} from './metadata-tab/metadata-tab.component'; +import {DesignerStore} from '../designer/designer.store'; + +@Injectable({ + providedIn: 'root' +}) +export class PackageCreationExtractionService { + + zipFile: JSZip = new JSZip(); + entryDefinitionKeys: string[] = ['template_tags', 'user-groups', + 'author-email', 'template_version', 'template_name', 'template_author', 'template_description']; + @ViewChild(MetadataTabComponent, {static: false}) + metadataTabComponent: MetadataTabComponent; + + constructor(private packageCreationStore: PackageCreationStore, + private packageCreationUtils: PackageCreationUtils, + private designerStore: DesignerStore) { + } + + public extractBlobToStore(blob) { + let packageName = null; + this.zipFile.loadAsync(blob).then((zip) => { + Object.keys(zip.files).filter(fileName => fileName.includes('TOSCA-Metadata/')) + .forEach((filename) => { + zip.files[filename].async('string').then((fileData) => { + if (fileData) { + if (filename.includes('TOSCA-Metadata/')) { + const metaDataTabInfo: MetaDataTabModel = this.getMetaDataTabInfo(fileData); + packageName = metaDataTabInfo.name; + this.setMetaData(metaDataTabInfo); + console.log('found file ' + packageName); + } + } + }); + }); + }); + + this.zipFile.loadAsync(blob).then((zip) => { + Object.keys(zip.files).forEach((filename) => { + zip.files[filename].async('string').then((fileData) => { + console.log(filename); + if (fileData) { + if (filename.includes('Scripts/')) { + this.setScripts(filename, fileData); + } else if (filename.includes('Templates/')) { + if (filename.includes('-mapping.')) { + this.setMapping(filename, fileData); + } else if (filename.includes('-template.')) { + this.setTemplates(filename, fileData); + } + + } else if (filename.includes('Definitions/')) { + this.setImports(filename, fileData, packageName); + } + } + }); + }); + }); + } + + setScripts(filename: string, fileData: any) { + this.packageCreationStore.addScripts(filename, fileData); + } + + setImports(filename: string, fileData: any, packageName: string) { + console.log(filename); + if (filename.includes(packageName)) { + let definition = new VlbDefinition(); + definition = fileData as VlbDefinition; + definition = JSON.parse(fileData); + const dslDefinition = new DslDefinition(); + dslDefinition.content = this.packageCreationUtils.transformToJson(definition.dsl_definitions); + const mapOfCustomKeys = new Map<string, string>(); + for (const metadataKey in definition.metadata) { + if (!this.entryDefinitionKeys.includes(metadataKey + '')) { + mapOfCustomKeys.set(metadataKey + '', definition.metadata[metadataKey + '']); + } + } + this.packageCreationStore.changeDslDefinition(dslDefinition); + this.packageCreationStore.setCustomKeys(mapOfCustomKeys); + this.setPackageDescription(definition.metadata.template_description); + if (definition.topology_template && definition.topology_template.content) { + this.designerStore.saveSourceContent(definition.topology_template.content); + } + + } + this.packageCreationStore.addDefinition(filename, fileData); + + } + + setTemplates(filename: string, fileData: any) { + this.packageCreationStore.addTemplate(filename, fileData); + } + + setMapping(fileName: string, fileData: string) { + this.packageCreationStore.addMapping(fileName, fileData); + } + + setMetaData(metaDataObject: MetaDataTabModel) { + this.packageCreationStore.changeMetaData(metaDataObject); + } + + getMetaDataTabInfo(fileData: string) { + const metaDataTabModel = new MetaDataTabModel(); + const arrayOfLines = fileData.split('\n'); + metaDataTabModel.entryFileName = arrayOfLines[3].split(':')[1]; + metaDataTabModel.name = arrayOfLines[4].split(':')[1]; + metaDataTabModel.version = arrayOfLines[5].split(':')[1]; + metaDataTabModel.mode = arrayOfLines[6].split(':')[1]; + console.log(arrayOfLines[7]); + if (arrayOfLines[7].split(':')) { + metaDataTabModel.templateTags = new Set<string>(arrayOfLines[7].split(':')[1].split(',')); + } + return metaDataTabModel; + } + + private setPackageDescription(templateDescription: string) { + const metaData = this.packageCreationStore.getMetaData(); + metaData.description = templateDescription; + this.setMetaData(metaData); + + } +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html index a09951cd2..03bbc72f4 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html @@ -83,8 +83,9 @@ <div class="nav nav-tabs " id="nav-tab" role="tablist"> <a (click)="openTourGuide('metadataTab')" tourAnchor="metadataTab" class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab" href="#nav-metadata" role="tab" aria-controls="nav-metadata" - aria-selected="false" autofocus #nameit (focusout)="saveMetaData()" - [classList]="metadataClasses">METADATA</a> + aria-selected="false" autofocus #nameit (focusout)="saveMetaData()" [classList]="metadataClasses">METADATA</a> + + <a (click)="openTourGuide('tm-templateTab')" tourAnchor="tm-templateTab" class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template" role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & @@ -134,4 +135,4 @@ </div> </div> </div> -</div>
\ No newline at end of file +</div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts index 6b29ec4fd..f74015956 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts @@ -34,6 +34,7 @@ import {ToastrService} from 'ngx-toastr'; import {TourService} from 'ngx-tour-md-menu'; import {PackageCreationService} from './package-creation.service'; import {ComponentCanDeactivate} from '../../../../common/core/canDactivate/ComponentCanDeactivate'; +import {DesignerStore} from '../designer/designer.store'; @Component({ @@ -53,7 +54,8 @@ export class PackageCreationComponent extends ComponentCanDeactivate implements private packageCreationUtils: PackageCreationUtils, private router: Router, private tourService: TourService, - private toastService: ToastrService) { + private toastService: ToastrService, + private designerStore: DesignerStore) { super(); } @@ -110,6 +112,7 @@ export class PackageCreationComponent extends ComponentCanDeactivate implements cbaPackage = PackageCreationModes.mapModeType(cbaPackage); cbaPackage.metaData = PackageCreationModes.setEntryPoint(cbaPackage.metaData); packageCreationModes = PackageCreationBuilder.getCreationMode(cbaPackage); + cbaPackage.templateTopology.content = this.designerStore.state.sourceContent; packageCreationModes.execute(cbaPackage, this.packageCreationUtils); this.filesData.push(this.folder.TREE_DATA); this.saveBluePrintToDataBase(); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts index bd8360a14..bd0944146 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts @@ -84,4 +84,6 @@ export class PackageCreationService { } + + } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts index 7b1c6bfb1..bca6903f6 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts @@ -24,11 +24,7 @@ import {Injectable} from '@angular/core'; import {Store} from '../../../../common/core/stores/Store'; import {CBAPackage, DslDefinition} from './mapping-models/CBAPacakge.model'; -import {PackageCreationService} from './package-creation.service'; import {MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model'; -import {Observable} from 'rxjs'; -import {ResourceDictionary} from './mapping-models/ResourceDictionary.model'; -import {BluePrintDetailModel} from '../model/BluePrint.detail.model'; import {TemplateTopology} from './mapping-models/definitions/VlbDefinition'; @@ -127,4 +123,8 @@ export class PackageCreationStore extends Store<CBAPackage> { templateTopology }); } + + getMetaData() { + return this.state.metaData; + } } 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> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts index c0ec679f7..4cfbb897c 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts @@ -32,6 +32,7 @@ import {DesignerSourceViewComponent} from './designer/source-view/source-view.co import {NgxUiLoaderModule} from 'ngx-ui-loader'; import {TourMatMenuModule} from 'ngx-tour-md-menu'; import {ComponentCanDeactivateGuard} from '../../../common/core/canDactivate/ComponentCanDeactivateGuard'; +import { ImportPackageComponent } from './packages-dashboard/import-package/import-package.component'; @NgModule({ declarations: [PackagesDashboardComponent, @@ -54,6 +55,7 @@ import {ComponentCanDeactivateGuard} from '../../../common/core/canDactivate/Com MetadataTabComponent, DslDefinitionsTabComponent, DesignerSourceViewComponent, + ImportPackageComponent, ], imports: [ |