diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard')
10 files changed, 256 insertions, 29 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts index 0555fd5ab..6f02bbab8 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts @@ -114,6 +114,7 @@ export class TagsFilteringComponent implements OnInit { this.checkBoxTages = ''; this.checkboxes.forEach((element) => { element.nativeElement.checked = false; + this.packagesStore.getAll(); }); } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/guideSteps.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/guideSteps.ts index 5026980de..6601e2f17 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/guideSteps.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/guideSteps.ts @@ -23,28 +23,28 @@ export const steps = [ }, { anchorId: 'metadataTab', - content: 'Set your package basic information', + content: 'It captures the model entities that compose the cba package name, version, description and searchable tags.', title: 'Metadata Tab', route: 'packages/createPackage' }, { anchorId: 'mt-packageName', - content: 'Set your package name (required)', + content: 'Set your package name (required).', title: 'Package name', }, { anchorId: 'mt-packageVersion', - content: 'Set your package version like 1.0.0 (required)', + content: 'Set your package version like 1.0.0 (required).', title: 'Package version', }, { anchorId: 'mt-packageDescription', - content: 'Set your package description (required)', + content: 'Set your package description (required).', title: 'Package description', }, { anchorId: 'mt-packageTags', - content: 'Set your package Tags (Optional)', + content: 'Set your package Tags (Optional).', title: 'Package tag', }, // { @@ -55,66 +55,66 @@ export const steps = [ // Temaplate & Mapping { anchorId: 'tm-templateTab', - content: 'Create Your \'Template & Mapping \' files', + content: 'A template is an artifact, and uses Modeling Concepts#artifact-mapping-resource and artifact-template-velocity. ', title: 'Temaplate & Mapping', stepId: 'tm-templateTab' }, { anchorId: 'tm-templateName', - content: 'Set your Template & Mapping Name', + content: 'Set your Template & Mapping Name.', title: 'Temaplte & Mapping name', stepId: 'tm-templateName' }, { anchorId: 'tm-templateType', - content: 'Set your Template Type', + content: 'Set your Template Type.', title: 'Temaplte Type', }, { anchorId: 'tm-templateContent', - content: 'Click \'Import File\' to get content from a file, or write template content manually', + content: 'Click \'Import File\' to get content from a file, or write template content manually.', title: 'Template Content', }, { anchorId: 'tm-mappingContent', - content: 'Set your mapping content from the current template, or from an external file (XML, CSV)', + content: 'Set your mapping content from the current template, or from an external file (XML, CSV).', title: 'Mapping Content', }, { anchorId: 'tm-templateFinish', - content: 'Click your \' Finish \' button when you finish ', + content: 'Click your \'Finish\' button to save your template.', title: 'Finish', stepId: 'tm-templateFinish' }, - { - anchorId: 'tm-templateEdit', - content: 'Create another new Template or Click on the previous one to edit', - title: 'Create & Edit', - stepId: 'tm-templateEdit' - }, + // { + // anchorId: 'tm-templateEdit', + // content: 'Create another new Template or Click on the previous one to edit.', + // title: 'Create & Edit', + // stepId: 'tm-templateEdit' + // }, // Script { anchorId: 'st-scriptsTab', - content: 'Move To Scripts Tab to set your Kotlin and Python scripts', + content: 'It is Kotlin/Python scripts that allows the execution of a sequence of instructions as part of CDS workflow execution.', title: 'Scripts', stepId: 'st-scriptsTab' }, { anchorId: 'st-scriptsImport', - content: 'Click \' Import File\'button kotlin and python files', + content: 'Click to import kotlin or python files.', title: 'Import File' }, // DSL { anchorId: 'dslTab', - content: 'Write your Authentication Properties in Javascript', - title: 'ESAP', + content: 'Interaction with external systems is made dynamic, removing development cycle to support new endpoint.', + title: 'External Systems support', stepId: 'dslTab' }, // save package { anchorId: 'packageSave', - content: 'Click \' Save \' button to create your package', + content: 'Click to save your package.', title: 'Save' } ]; 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..d578582fd --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.html @@ -0,0 +1,59 @@ +<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)="importAndSave()"> + Import&Save + </button> + <button type="button" class="btn btn-sm btn-primary" [disabled]="uploadedFiles?.length<=0" + data-dismiss="modal" (click)="importPackageAndViewIt()"> + 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..7496338d6 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.ts @@ -0,0 +1,126 @@ +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'; +import {PackageCreationStore} from '../../package-creation/package-creation.store'; +import * as JSZip from 'jszip'; +import {PackageCreationService} from '../../package-creation/package-creation.service'; +import {ToastrService} from 'ngx-toastr'; +import {PackagesStore} from '../../packages.store'; + +@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 = {}; + zipFile: JSZip = new JSZip(); + public files: NgxFileDropEntry[] = []; + + constructor(private packageCreationExtractionService: PackageCreationExtractionService, + private packageCreationStore: PackageCreationStore, + private packageCreationService: PackageCreationService, + private toastService: ToastrService, + private packagesStore: PackagesStore, + 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); + } + + importPackageAndViewIt() { + this.openFilesInCreationPackage(); + this.saveFileToStore(); + } + + saveFileToStore() { + console.log(this.uploadedFiles.length); + const file = this.getFile(this.uploadedFiles[this.uploadedFiles.length - 1]); + this.packageCreationStore.clear(); + 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); + } + } + + importAndSave() { + const file = this.getFile(this.uploadedFiles[this.uploadedFiles.length - 1]); + this.zipFile = new JSZip(); + this.zipFile.loadAsync(file).then(zip => { + this.zipFile = zip; + console.log(this.zipFile); + this.resetTheUploadedFiles(); + this.zipFile.generateAsync({type: 'blob'}).then(blob => { + this.packageCreationService.savePackage(blob).subscribe( + bluePrintDetailModels => { + this.toastService.info('package is imported and saved successfully '); + this.router.navigate(['/packages']); + this.packagesStore.getAll(); + }, error => + this.toastService.error('there is an error happened ' + error)); + }); + }); + } +} 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-dashboard/package-list/package-list.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts index 3cecd33fd..4d0e108cf 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts @@ -39,10 +39,6 @@ export class PackageListComponent implements OnInit { ngOnInit() { this.packagesStore.getAll(); - - - - } view(id) { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts index c6b9c41f6..9862608b4 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts @@ -39,8 +39,6 @@ export class PackagesDashboardComponent implements OnInit, OnDestroy { ngOnInit() { console.log('PackagesDashboardComponent'); - - this.tourService.initialize([...steps]); this.checkTour(); } @@ -53,10 +51,17 @@ export class PackagesDashboardComponent implements OnInit, OnDestroy { } start() { + + this.tourService.initialize([...steps]); console.log('start .................'); this.tourService.start(); + localStorage.setItem('tour-guide', 'start'); this.tourService.events$.subscribe(res => { console.log(res); + + if (res.name === 'end') { + localStorage.setItem('tour-guide', 'end'); + } if (res.value && res.value.anchorId) { if (res.value.anchorId.includes('mt-')) { $('#nav-metadata-tab').trigger('click'); @@ -76,6 +81,7 @@ export class PackagesDashboardComponent implements OnInit, OnDestroy { if (res.value.anchorId.includes('st-')) { $('#nav-scripts-tab').trigger('click'); } + } }); } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html index 936c2da8d..17955ec4e 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html @@ -23,6 +23,16 @@ </p> </li> --> <li> + <i class="icon-get_started" aria-hidden="true"></i> + <p> + <input id="clicker3" type="checkbox" /> + <label for="clicker"> + Getting Started + <span>Quick steps to help you get started</span> + </label> + </p> + </li> + <li> <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank"> <i class="icon-user_guide" aria-hidden="true"></i> <p> |