diff options
Diffstat (limited to 'cds-ui/designer-client')
14 files changed, 319 insertions, 247 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html index f07258439..6194a9bb3 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html @@ -11,16 +11,16 @@ <li>Package Name</li> </ul> </h2> - <!-- <div class="col d-flex justify-content-end header-button-save"> - <button class="float btn btn-sm btn-outline-secondary" disabled>Discard Changes</button> - <button class="float btn btn-sm btn-primary" (click)="saveBluePrint()">Save</button> - </div>--> + <div class="col d-flex justify-content-end header-button-save"> + <button class="float btn btn-sm btn-outline-secondary" (click)="goBacktoDashboard()" >Discard Changes</button> + <button class="float btn btn-sm btn-primary" (click)="editBluePrint()">Apply Changes</button> + </div> </div> </header> - <div class="container-fluid body-container"> + <div class="container-fluid body-container"> <div class="container"> <!-- <div class="creat-action-container"> @@ -77,7 +77,7 @@ <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab" href="#nav-metadata" role="tab" aria-controls="nav-metadata" - aria-selected="true">METADATA</a> + aria-selected="true" autofocus #nameit (focusout)="saveMetaData()">METADATA</a> <a 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 & MAPPING</a> 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 766e0b120..1fcc35f5a 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 @@ -1,7 +1,16 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { PackageStore } from './package.store'; -import { BluePrintDetailModel } from '../model/BluePrint.detail.model'; +import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; +import {ActivatedRoute, Router} from '@angular/router'; +import {BluePrintDetailModel} from '../model/BluePrint.detail.model'; +import {PackageCreationStore} from '../package-creation/package-creation.store'; +import {FilesContent, FolderNodeElement, MetaDataTabModel} from '../package-creation/mapping-models/metadata/MetaDataTab.model'; +import {MetadataTabComponent} from '../package-creation/metadata-tab/metadata-tab.component'; +import * as JSZip from 'jszip'; +import {ConfigurationDashboardService} from './configuration-dashboard.service'; +import {VlbDefinition} from '../package-creation/mapping-models/definitions/VlbDefinition'; +import {DslDefinition} from '../package-creation/mapping-models/CBAPacakge.model'; +import {PackageCreationUtils} from '../package-creation/package-creation.utils'; +import {PackageCreationModes} from '../package-creation/creationModes/PackageCreationModes'; +import {PackageCreationBuilder} from '../package-creation/creationModes/PackageCreationBuilder'; @Component({ @@ -11,24 +20,156 @@ import { BluePrintDetailModel } from '../model/BluePrint.detail.model'; }) export class ConfigurationDashboardComponent implements OnInit { viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); + @ViewChild(MetadataTabComponent, {static: false}) + private metadataTabComponent: MetadataTabComponent; - constructor(private route: ActivatedRoute, private configurationStore: PackageStore) { + entryDefinitionKeys: string[] = ['template_tags', 'user-groups', + 'author-email', 'template_version', 'template_name', 'template_author']; + @ViewChild('nameit', {static: true}) + private elementRef: ElementRef; + + private zipFile: JSZip = new JSZip(); + private filesData: any = []; + private folder: FolderNodeElement = new FolderNodeElement(); + + constructor(private route: ActivatedRoute, private configurationDashboardService: ConfigurationDashboardService, + private packageCreationStore: PackageCreationStore, + private packageCreationUtils: PackageCreationUtils, + private router: Router) { } - // test + ngOnInit() { + this.elementRef.nativeElement.focus(); const id = this.route.snapshot.paramMap.get('id'); - this.configurationStore.getPagedPackages(id).subscribe( + this.configurationDashboardService.getPagedPackages(id).subscribe( (bluePrintDetailModels) => { - console.log('-------------xxxxxxxxxxx----------------'); - console.log(bluePrintDetailModels); - this.configurationStore.setConfiguration(bluePrintDetailModels); - - console.log('----------------- id ' + id); if (bluePrintDetailModels) { - this.configurationStore.downloadResource( - bluePrintDetailModels[0].artifactName + '/' + bluePrintDetailModels[0].artifactVersion); + this.downloadCBAPackage(bluePrintDetailModels); + } + }); + } + + + private downloadCBAPackage(bluePrintDetailModels: BluePrintDetailModel) { + this.configurationDashboardService.downloadResource( + bluePrintDetailModels[0].artifactName + '/' + bluePrintDetailModels[0].artifactVersion).subscribe(response => { + const blob = new Blob([response], {type: 'application/octet-stream'}); + this.zipFile.loadAsync(blob).then((zip) => { + Object.keys(zip.files).forEach((filename) => { + console.log(filename); + zip.files[filename].async('string').then((fileData) => { + 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); + } else if (filename.includes('TOSCA-Metadata/')) { + const metaDataTabInfo: MetaDataTabModel = this.getMetaDataTabInfo(fileData); + // console.log(metaDataTabInfo); + this.setMetaData(metaDataTabInfo, bluePrintDetailModels[0]); + } + } + }); + }); + }); + }); + } + + private setScripts(filename: string, fileData: any) { + this.packageCreationStore.addScripts(filename, fileData); + } + + private setImports(filename: string, fileData: any) { + if (filename.includes('blueprint.json') || filename.includes('vLB_CDS.json')) { + 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); + } else { + this.packageCreationStore.addDefinition(filename, fileData); + + } + } + + private setTemplates(filename: string, fileData: any) { + this.packageCreationStore.addTemplate(filename, fileData); + } + + private setMapping(fileName: string, fileData: string) { + this.packageCreationStore.addMapping(fileName, fileData); + } + + editBluePrint() { + this.packageCreationStore.state$.subscribe( + cbaPackage => { + console.log(cbaPackage); + FilesContent.clear(); + let packageCreationModes: PackageCreationModes; + cbaPackage = PackageCreationModes.mapModeType(cbaPackage); + cbaPackage.metaData = PackageCreationModes.setEntryPoint(cbaPackage.metaData); + packageCreationModes = PackageCreationBuilder.getCreationMode(cbaPackage); + packageCreationModes.execute(cbaPackage, this.packageCreationUtils); + this.filesData.push(this.folder.TREE_DATA); + this.saveBluePrintToDataBase(); + }); + } + + private setMetaData(metaDataObject: MetaDataTabModel, bluePrintDetailModel: BluePrintDetailModel) { + metaDataObject.description = bluePrintDetailModel.artifactDescription; + this.packageCreationStore.changeMetaData(metaDataObject); + + } + + saveMetaData() { + this.metadataTabComponent.saveMetaDataToStore(); + } + + 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]; + metaDataTabModel.templateTags = new Set<string>(arrayOfLines[7].split(':')[1].split(',')); + console.log(metaDataTabModel.mode); + return metaDataTabModel; + } + + saveBluePrintToDataBase() { + this.create(); + this.zipFile.generateAsync({type: 'blob'}) + .then(blob => { + this.packageCreationStore.saveBluePrint(blob); + this.router.navigate(['/packages']); }); } + + create() { + FilesContent.getMapOfFilesNamesAndContent().forEach((value, key) => { + this.zipFile.folder(key.split('/')[0]); + this.zipFile.file(key, value); + }); + + } + + goBacktoDashboard() { + this.router.navigate(['/packages']); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts index 566339db8..239dd6339 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts @@ -13,13 +13,15 @@ export class ConfigurationDashboardService { } - getBluePrintModel(id: string): Observable<BluePrintDetailModel> { + private getBluePrintModel(id: string): Observable<BluePrintDetailModel> { return this.api.getOne(BlueprintURLs.getOneBlueprint + '/' + id); } + getPagedPackages(id: string) { + return this.getBluePrintModel(id); + } - - public downloadResource(id: string) { - return this.api.getCustomized(id, {responseType: 'blob'}); + public downloadResource(path: string) { + return this.api.getCustomized(BlueprintURLs.download + path, {responseType: 'blob'}); } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/package.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/package.store.ts index 4669ef12d..49de59e62 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/package.store.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/package.store.ts @@ -19,11 +19,11 @@ limitations under the License. ============LICENSE_END============================================ */ -import { Injectable } from '@angular/core'; -import { Store } from '../../../../common/core/stores/Store'; -import { ConfigurationDashboardService } from './configuration-dashboard.service'; -import { PackageDashboardState } from '../model/package-dashboard.state'; -import { BlueprintURLs } from '../../../../common/constants/app-constants'; +import {Injectable} from '@angular/core'; +import {Store} from '../../../../common/core/stores/Store'; +import {ConfigurationDashboardService} from './configuration-dashboard.service'; +import {PackageDashboardState} from '../model/package-dashboard.state'; +import {BlueprintURLs} from '../../../../common/constants/app-constants'; import * as JSZip from 'jszip'; @Injectable({ @@ -37,53 +37,13 @@ export class PackageStore extends Store<PackageDashboardState> { super(new PackageDashboardState()); } - getPagedPackages(id: string) { + /* getPagedPackages(id: string) { return this.configurationDashboardService.getBluePrintModel(id); } public downloadResource(path: string) { - console.log('download resource xx'); - this.configurationDashboardService.downloadResource(BlueprintURLs.download + path).subscribe(response => { - console.log('try to download '); - const blob = new Blob([response], { type: 'application/octet-stream' }); - this.zipFile.loadAsync(blob).then((zip) => { - Object.keys(zip.files).forEach((filename) => { - console.log(filename); - zip.files[filename].async('string').then((fileData) => { - if (fileData) { - if (filename.includes('Scripts/')) { - this.setScripts(filename, fileData); - } else if (filename.includes('templates/')) { - this.setTemplates(filename, fileData); - } else if (filename.includes('definitions/')) { - this.setImports(filename, fileData); - } - } - }); - }); - }); - }); - } - - setConfiguration(bluePrintDetailModels) { - this.setState({ - ...this.state, - configuration: bluePrintDetailModels[0] - }); - } - - private setScripts(filename: string, fileData: any) { - this.setState({ - ...this.state, - scripts: this.state.scripts.setScripts(filename, fileData) - }); - } + return this.configurationDashboardService.downloadResource(BlueprintURLs.download + path); + }*/ - private setImports(filename: string, fileData: any) { - } - - private setTemplates(filename: string, fileData: any) { - - } } 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 1606d6574..e1efc3c22 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 @@ -41,7 +41,7 @@ export class DesignerCreationMode extends PackageCreationModes { FilesContent.putData(key, valueOfFile); }); - const filenameEntry = 'Definitions/vLB_CDS.json'; + const filenameEntry = 'Definitions/blueprint.json'; const vlbDefinition: VlbDefinition = new VlbDefinition(); const metadata: Metadata = new Metadata(); 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 b2a9d14b3..8ccf0c39e 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 @@ -11,7 +11,7 @@ export abstract class PackageCreationModes { public static setEntryPoint(metaDataTab: MetaDataTabModel) { if (metaDataTab.mode.startsWith(ModeType.Designer)) { - metaDataTab.entryFileName = 'Definitions/vLB_CDS.json'; + metaDataTab.entryFileName = 'Definitions/blueprint.json'; } else { // TODO Not implemented metaDataTab.entryFileName = ''; diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html index 6fb1dcfd8..a67d12bcf 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html @@ -1,5 +1,5 @@ <ace-editor [(text)]="dslDefinition.content" [mode]="'javascript'" [autoUpdateContent]="true" - [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'" #editor style="height:300px;"> + [durationBeforeCallback]="1000" (textChanged)="textChanged($event)" [theme]="'tomorrow_night_bright'" #editor style="height:300px;"> </ace-editor> -<!-- <app-source-editor [lang]="'javascript'" (textChanged)="textChanged($event)" [(text)]="dslDefinition.content"></app-source-editor> -->
\ No newline at end of file +<!-- <app-source-editor [lang]="'javascript'" (textChanged)="textChanged($event)" [(text)]="dslDefinition.content"></app-source-editor> --> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts index 7171e730e..1297bc14e 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts @@ -1,6 +1,6 @@ -import { Component, OnInit } from '@angular/core'; -import { DslDefinition } from '../mapping-models/CBAPacakge.model'; -import { PackageCreationStore } from '../package-creation.store'; +import {Component, OnInit} from '@angular/core'; +import {DslDefinition} from '../mapping-models/CBAPacakge.model'; +import {PackageCreationStore} from '../package-creation.store'; @Component({ selector: 'app-dsl-definitions-tab', @@ -16,11 +16,15 @@ export class DslDefinitionsTabComponent implements OnInit { } ngOnInit() { - this.packageCreationStore.changeDslDefinition(this.dslDefinition); + this.packageCreationStore.state$.subscribe(cbaPackage => { + if (cbaPackage && cbaPackage.definitions && cbaPackage.definitions.dslDefinition) { + this.dslDefinition.content = cbaPackage.definitions.dslDefinition.content; + } + }); } textChanged(event) { - console.log('event changed'); + this.packageCreationStore.changeDslDefinition(this.dslDefinition); } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts index 1f8783d5b..7200e1210 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts @@ -31,6 +31,11 @@ export class MetaDataTabModel { templateName: string; templateTags: Set<string> = new Set<string>(); + setCustomKey(mapOfCustomKey: Map<string, string>) { + this.mapOfCustomKey = mapOfCustomKey; + return this; + } + } /*TOSCA-Meta-File-Version: 1.0.0 @@ -59,10 +64,10 @@ export class FolderNodeElement { { name: 'Definitions', children: [ - { name: 'activation-blueprint.json' }, - { name: 'artifacts_types.json' }, - { name: 'data_types.json' }, - { name: 'vLB_CDS.json' }, + {name: 'activation-blueprint.json'}, + {name: 'artifacts_types.json'}, + {name: 'data_types.json'}, + {name: 'vLB_CDS.json'}, ] }, { @@ -71,8 +76,8 @@ export class FolderNodeElement { { name: 'kotlin', children: [ - { name: 'ScriptComponent.cba.kts' }, - { name: 'ResourceAssignmentProcessor.cba.kts' }, + {name: 'ScriptComponent.cba.kts'}, + {name: 'ResourceAssignmentProcessor.cba.kts'}, ] } ] diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html index 6508c96de..0ae8efb47 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html @@ -3,10 +3,11 @@ <label class="label-name">Mode</label> <label name="trst" *ngFor="let mode of modes; let i = index"> <input class="form-check-input" [(ngModel)]="metaDataTab.mode" type="radio" name="exampleRadios" - id="exampleRadios1" value={{mode.name}}> + id="exampleRadios1" value={{mode.name}}> <span> - <i [className]="mode.style" aria-hidden="true" [id]="mode.name"></i> + <i [className]="mode.style" aria-hidden="true" + [id]="mode.name"></i> {{mode.name}} </span> </label> @@ -26,22 +27,23 @@ </div> <div class="card creat-card"> - <div class="single-line-model error"> + <div class="single-line-model"> <label class="label-name">Name <span>*</span></label> <div class="label-input"> - <input type="input" [(ngModel)]="metaDataTab.name" placeholder="Topology name.vLB.CDS"> + <input type="input" [readOnly]="!packageNameAndVersionEnables" [(ngModel)]="metaDataTab.name" + placeholder="Topology name.vLB.CDS"> </div> - <div class="model-note-container error-message"> + <!--<div class="model-note-container error-message"> Package name already exists with this version. Please enter a different name or enter different version number. - </div> + </div>--> </div> <div class="single-line-model"> <label class="label-name">Version <span>*</span></label> <div class="label-input"> - <input type="input" [(ngModel)]="metaDataTab.version" (input)="validatePackageNameAndVersion()" - placeholder="Example: 1.0.0"> + <input type="input" [readOnly]="!packageNameAndVersionEnables" [(ngModel)]="metaDataTab.version" (input)="validatePackageNameAndVersion()" + placeholder="Example: 1.0.0"> </div> <div class="model-note-container error-message">{{errorMessage}}</div> </div> @@ -56,13 +58,13 @@ <label class="label-name">tags</label> <div class="label-input"> <input type="input" (keyup.enter)="addTag($event)" [(ngModel)]="metaDataTab.tags" - placeholder="Ex., vDNS-CDS"> + placeholder="Ex., vDNS-CDS"> </div> <div class="model-note-container tag-notes">Seprate tags with comma or space</div> <div class="model-note-container tages-container"> <span *ngFor="let tag of tags" class="single-tage">{{tag}} <i (click)="removeTag(tag)" - class="fa fa-times-circle"></i></span> + class="fa fa-times-circle"></i></span> </div> </div> </div> @@ -77,7 +79,7 @@ </div> <div *ngFor="let map of customKeysMap | keyvalue; let i=index" class="single-custom-key"> <div class="single-line-custom-key"> - <label class="label-name"><span>{{i+1}}-</span> Name</label> + <label class="label-name"><span>{{i + 1}}-</span> Name</label> <div class="label-input"> <input value="{{map.key}}" name="key" type="input" placeholder="Enter name"> </div> @@ -88,23 +90,25 @@ <input value="{{map.value}}" name="value" type="input" placeholder="Enter value"> </div> </div> - <div class="single-line-custom-key-delete"><button (click)="removeKey($event,map.key)" - class="custom-key-delete"><i aria-hidden="true" class="icon-delete"></i></button></div> + <div class="single-line-custom-key-delete"> + <button (click)="removeKey($event,map.key)" + class="custom-key-delete"><i aria-hidden="true" class="icon-delete"></i></button> + </div> </div> <div class="single-custom-key"> <div class="single-line-custom-key"> - <label class="label-name"><span>{{customKeysMap.size+1}}.</span> Name</label> + <label class="label-name"><span>{{customKeysMap.size + 1}}.</span> Name</label> <div class="label-input"> <input (keyup.enter)="addCustomKey()" name="key" type="input" class="mapKey" - placeholder="Enter name"> + placeholder="Enter name"> </div> </div> <div class="single-line-custom-key"> <label class="label-name">Value</label> <div class="label-input"> <input (keyup.enter)="addCustomKey()" class="mapValue" name="value" type="input" - placeholder="Enter value"> + placeholder="Enter value"> </div> </div> <!-- <div class="single-line-custom-key-delete"><button (click)="removeKey($event)" @@ -113,4 +117,4 @@ </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/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 eb486cf4f..b99925716 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 @@ -1,8 +1,9 @@ -import { Component, OnInit } from '@angular/core'; -import { PackageCreationService } from '../package-creation.service'; -import { MetaDataTabModel } from '../mapping-models/metadata/MetaDataTab.model'; -import { PackageCreationStore } from '../package-creation.store'; -import { PackageStore } from '../../configuration-dashboard/package.store'; +import {Component, OnInit} from '@angular/core'; +import {PackageCreationService} from '../package-creation.service'; +import {MetaDataTabModel} from '../mapping-models/metadata/MetaDataTab.model'; +import {PackageCreationStore} from '../package-creation.store'; +import {PackageStore} from '../../configuration-dashboard/package.store'; +import {ActivatedRoute} from '@angular/router'; @Component({ @@ -11,37 +12,47 @@ import { PackageStore } from '../../configuration-dashboard/package.store'; styleUrls: ['./metadata-tab.component.css'] }) export class MetadataTabComponent implements OnInit { - + packageNameAndVersionEnables = true; counter = 0; tags = new Set<string>(); customKeysMap = new Map(); modes: object[] = [ - { name: 'Designer Mode', style: 'mode-icon icon-designer-mode' }, - { name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode' }, - { name: 'Generic Script Mode', style: 'mode-icon icon-generic-script-mode' }]; + {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'}]; + /* {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}, + {name: 'Generic Script Mode', style: 'mode-icon icon-generic-script-mode'}];*/ private metaDataTab: MetaDataTabModel = new MetaDataTabModel(); private errorMessage: string; - constructor( - private packageCreationService: PackageCreationService, - private packageCreationStore: PackageCreationStore, - private packageStore: PackageStore) { + constructor(private route: ActivatedRoute, + private packageCreationService: PackageCreationService, + private packageCreationStore: PackageCreationStore, + private packageStore: PackageStore) { } ngOnInit() { this.metaDataTab.templateTags = this.tags; this.metaDataTab.mapOfCustomKey = this.customKeysMap; - this.packageCreationStore.changeMetaData(this.metaDataTab); - this.packageStore.state$.subscribe(element => { - if (element && element.configuration) { - console.log('from element2'); + const id = this.route.snapshot.paramMap.get('id'); + id ? this.packageNameAndVersionEnables = false : + this.packageNameAndVersionEnables = true; + this.packageCreationStore.state$.subscribe(element => { + + if (element && element.metaData) { + + this.metaDataTab.name = element.metaData.name; + this.metaDataTab.version = element.metaData.version; + this.metaDataTab.description = element.metaData.description; + this.tags = element.metaData.templateTags; + this.metaDataTab.templateTags = this.tags; console.log(element); - this.metaDataTab.name = element.configuration.artifactName; - this.metaDataTab.version = element.configuration.artifactVersion; - this.metaDataTab.description = element.configuration.artifactDescription; - this.tags = new Set(element.configuration.tags.split(',')); + if (element.metaData.mode && element.metaData.mode.includes(' DEFAULT')) { + this.metaDataTab.mode = 'Designer Mode'; + } + + this.customKeysMap = element.metaData.mapOfCustomKey; + // this.tags = element.metaData.templateTags; } }); @@ -95,4 +106,8 @@ export class MetadataTabComponent implements OnInit { } } + + saveMetaDataToStore() { + this.packageCreationStore.changeMetaData(this.metaDataTab); + } } 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 906904855..af5ed4f21 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 @@ -2,21 +2,20 @@ <div class="new-wrapper"> <div class="container-fluid main-container"> - <header class="page-title"> - <div class="row"> - <h2 class="col m-0"> - <ul class="breadcrumb-header"> - <li>CBA Packages</li> - <li>Package Name</li> - </ul> - </h2> - <div class="col d-flex justify-content-end header-button-save"> - <button class="float btn btn-sm btn-outline-secondary" disabled>Discard Changes</button> - <button class="float btn btn-sm btn-primary" (click)="saveBluePrint()">Save</button> + <header class="page-title"> + <div class="row"> + <h2 class="col m-0"> + <ul class="breadcrumb-header"> + <li>CBA Packages</li> + <li>Package Name</li> + </ul> + </h2> + <div class="col d-flex justify-content-end header-button-save"> + <button class="float btn btn-sm btn-outline-secondary" (click)="goBackToDashBorad()" >Discard Changes</button> + <button class="float btn btn-sm btn-primary" (click)="saveBluePrint()">Save</button> + </div> </div> - </div> - </header> - + </header> <div class="container-fluid body-container"> @@ -39,71 +38,6 @@ </a> </div> - <div class="card creat-card view-package-container"> - <div class="row"> - <div class="col-8"> - <div class="row"> - <div class="col d-flex"> - <i class="package-type-icon icon-designer-mode"></i> - <div class="package-name-container"> - <div class="row"> - <div class="col-12 package-name deployed"> - Package Name - <span>.vLB.CDS</span> - <i class="icon-deploy"></i> - </div> - <div class="col-12 package-description"> - Last modified Oct 4, 2019 03:48 PM By Ahmed Abbas - </div> - </div> - <!-- <div class="row"> - <div class="col-4"> - <div class="package-view-title">Author Name</div> - <p>Abdelmuhaimen Seaudi</p> - </div> - <div class="col-4"> - <div class="package-view-title">Author Email</div> - <p>abdelmuhaimen.seaudi@orange.com</p> - </div> - <div class="col-4"> - <div class="package-view-title">Contributions</div> - <ul class="package-contributers"> - <li> - <button type="button" class="border-fade" data-toggle="tooltip" - data-placement="bottom" - title="User name"> - <img src="/assets/img/img-user1.jpeg"> - </button> - </li> - <li> - <button type="button" data-toggle="tooltip" data-placement="bottom" - title="User name"> - <img src="/assets/img/img-user2.jpg"> - </button> - </li> - <li> - <button type="button" data-toggle="tooltip" data-placement="bottom" - title="User name"> - <img src="/assets/img/img-user3.jpg"> - </button> - </li> - <li> - <a href="">5 contributors</a> - </li> - </ul> - </div> - </div> --> - </div> - </div> - </div> - </div> - <div class="col-4 package-view-button"> - <button class="btn btn-sm btn-outline-secondary"><i class="fa fa-play-circle"></i> Deploy</button> - <button class="btn btn-sm btn-primary">Designer Mode</button> - </div> - </div> - - </div> <nav class="row"> <!--Nav Tabs--> @@ -112,7 +46,7 @@ <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab" href="#nav-metadata" role="tab" aria-controls="nav-metadata" - aria-selected="true">METADATA</a> + aria-selected="false" autofocus #nameit (focusout)="test()">METADATA</a> <a 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 & MAPPING</a> @@ -163,5 +97,5 @@ </div> </div> </div> -</div> + </div> </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 58c04e83e..42db2688e 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 @@ -19,15 +19,17 @@ limitations under the License. ============LICENSE_END============================================ */ -import { Component, OnInit } from '@angular/core'; -import { FilesContent, FolderNodeElement, MetaDataTabModel } from './mapping-models/metadata/MetaDataTab.model'; +import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; +import {FilesContent, FolderNodeElement, MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model'; import * as JSZip from 'jszip'; -import { PackageCreationStore } from './package-creation.store'; -import { Definition } from './mapping-models/CBAPacakge.model'; -import { PackageCreationModes } from './creationModes/PackageCreationModes'; -import { PackageCreationBuilder } from './creationModes/PackageCreationBuilder'; -import { PackageCreationUtils } from './package-creation.utils'; +import {PackageCreationStore} from './package-creation.store'; +import {Definition} from './mapping-models/CBAPacakge.model'; +import {PackageCreationModes} from './creationModes/PackageCreationModes'; +import {PackageCreationBuilder} from './creationModes/PackageCreationBuilder'; +import {PackageCreationUtils} from './package-creation.utils'; +import {MetadataTabComponent} from './metadata-tab/metadata-tab.component'; +import {Router} from '@angular/router'; @Component({ @@ -36,24 +38,33 @@ import { PackageCreationUtils } from './package-creation.utils'; styleUrls: ['./package-creation.component.css'] }) export class PackageCreationComponent implements OnInit { + + // adding initial referencing to designer mode + + + constructor(private packageCreationStore: PackageCreationStore, + private packageCreationUtils: PackageCreationUtils, + private router: Router) { + } + counter = 0; modes: object[] = [ - { name: 'Designer Mode', style: 'mode-icon icon-designer-mode' }, - { name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode' }]; + {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'}, + {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}]; private metaDataTab: MetaDataTabModel = new MetaDataTabModel(); private folder: FolderNodeElement = new FolderNodeElement(); private zipFile: JSZip = new JSZip(); private filesData: any = []; private definition: Definition = new Definition(); - // adding initial referencing to designer mode + @ViewChild(MetadataTabComponent, {static: false}) + private metadataTabComponent: MetadataTabComponent; - - constructor(private packageCreationStore: PackageCreationStore, private packageCreationUtils: PackageCreationUtils) { - } + @ViewChild('nameit', {static: true}) + private elementRef: ElementRef; ngOnInit() { - + this.elementRef.nativeElement.focus(); } saveBluePrint() { @@ -76,9 +87,10 @@ export class PackageCreationComponent implements OnInit { saveBluePrintToDataBase() { this.create(); - this.zipFile.generateAsync({ type: 'blob' }) + this.zipFile.generateAsync({type: 'blob'}) .then(blob => { this.packageCreationStore.saveBluePrint(blob); + this.router.navigate(['/packages']); }); } @@ -88,23 +100,14 @@ export class PackageCreationComponent implements OnInit { this.zipFile.folder(key.split('/')[0]); this.zipFile.file(key, value); }); - /*this.folder.TREE_DATA.forEach((path) => { - const name = path.name; - if (path.children) { - this.zipFile.folder(name); - path.children.forEach(children => { - const name2 = children.name; - if (FilesContent.getMapOfFilesNamesAndContent().has(name2)) { - this.zipFile.file(name + '/' + name2, FilesContent.getMapOfFilesNamesAndContent().get(name2)); - } else { - // this.zipFile.file(name2, FilesContent.getMapOfFilesNamesAndContent().get(name2)); - } - - }); - - } - });*/ + } + test() { + this.metadataTabComponent.saveMetaDataToStore(); + } + goBackToDashBorad() { + this.router.navigate(['/packages']); + } } 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 6a9d9c4b3..b2268f060 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 @@ -19,16 +19,15 @@ limitations under the License. ============LICENSE_END============================================ */ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; -import { Store } from '../../../../common/core/stores/Store'; +import {Store} from '../../../../common/core/stores/Store'; -import { CBAPackage, DslDefinition } from './mapping-models/CBAPacakge.model'; -import { PackageCreationService } from './package-creation.service'; -import { FolderNodeElement, MetaDataTabModel } from './mapping-models/metadata/MetaDataTab.model'; -import * as JSZip from 'jszip'; -import { Observable } from 'rxjs'; -import { ResourceDictionary } from './mapping-models/ResourceDictionary.model'; +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'; @Injectable({ @@ -36,8 +35,6 @@ import { ResourceDictionary } from './mapping-models/ResourceDictionary.model'; }) export class PackageCreationStore extends Store<CBAPackage> { - private folder: FolderNodeElement = new FolderNodeElement(); - private zipFile: JSZip = new JSZip(); constructor(private packageCreationService: PackageCreationService) { super(new CBAPackage()); @@ -51,6 +48,13 @@ export class PackageCreationStore extends Store<CBAPackage> { }); } + setCustomKeys(mapOfCustomKey: Map<string, string>) { + this.setState({ + ...this.state, + metaData: this.state.metaData.setCustomKey(mapOfCustomKey) + }); + } + changeDslDefinition(dslDefinition: DslDefinition) { this.setState({ |