diff options
Diffstat (limited to 'cds-ui/designer-client')
7 files changed, 126 insertions, 87 deletions
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 b44e844be..db6d0420b 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 @@ -38,13 +38,25 @@ export class DesignerCreationMode extends PackageCreationModes { metadata.template_version = cbaPackage.metaData.version; metadata['author-email'] = 'shaaban.eltanany.ext@orange.com'; metadata['user-groups'] = 'test'; - cbaPackage.definitions.metaDataTab.mapOfCustomKey.forEach((customKeyValue, key) => { + cbaPackage.metaData.mapOfCustomKey.forEach((customKeyValue, key) => { metadata[key] = customKeyValue; }); + // create Tags + let fullTags = ''; + let setCount = 0; + cbaPackage.metaData.templateTags.forEach(val => { + if (setCount === cbaPackage.metaData.templateTags.size) { + fullTags += val; + } else { + fullTags += val + ', '; + } + setCount++; + }); + metadata.template_tags = fullTags; vlbDefinition.metadata = metadata; const files: Import[] = []; cbaPackage.definitions.imports.forEach((valueOfFile, key) => { - files.push({ file: valueOfFile }); + files.push({ file: key }); }); console.log(vlbDefinition); vlbDefinition.imports = files; diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts index d94a64ca3..53aac3bc4 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts @@ -2,7 +2,7 @@ import {MetaDataTabModel} from './metadata/MetaDataTab.model'; export class Definition { - public metaDataTab: MetaDataTabModel; + // public metaDataTab: MetaDataTabModel; public imports: Map<string, string>; public dslDefinition: DslDefinition; @@ -10,7 +10,7 @@ export class Definition { constructor() { this.imports = new Map<string, string>(); - this.metaDataTab = new MetaDataTabModel(); + // this.metaDataTab = new MetaDataTabModel(); this.dslDefinition = new DslDefinition(); } @@ -19,10 +19,10 @@ export class Definition { return this; } - public setMetaData(metaDataTab: MetaDataTabModel) { - this.metaDataTab = metaDataTab; - return this; - } + // public setMetaData(metaDataTab: MetaDataTabModel) { + // this.metaDataTab = metaDataTab; + // return this; + // } public setDslDefinition(dslDefinition: DslDefinition): Definition { this.dslDefinition = dslDefinition; diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts index c4f3ee8bd..b797050dd 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts @@ -38,6 +38,8 @@ export class Metadata { @JsonProperty('dictionary_group') // tslint:disable-next-line:variable-name dictionary_group: string; + @JsonProperty('template_tags') + templateTags: string; /* @JsonProperty('custom_keys', {String}, false) 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 df723d58f..57b9408c2 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 @@ -30,6 +30,7 @@ export class MetaDataTabModel { mapOfCustomKey: Map<string, string> = new Map<string, string>(); entryFileName: string; templateName: string; + templateTags: Set<string> = new Set<string>(); } @@ -59,10 +60,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 +72,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.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.css index e69de29bb..856f458f0 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.css @@ -0,0 +1,4 @@ +.fa-times-circle:hover { + cursor: pointer; + color: #1f64c3 +}
\ No newline at end of file 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 09393c403..6508c96de 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 @@ -2,13 +2,13 @@ <div class="single-line"> <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}}> + <input class="form-check-input" [(ngModel)]="metaDataTab.mode" type="radio" name="exampleRadios" + 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> + </span> </label> </div> <div class="single-line"> @@ -20,7 +20,7 @@ <option>Library Instance 3</option> <option>Library Instance 4</option> <option>Library Instance 5</option> - </select> + </select> </div> </div> @@ -29,44 +29,40 @@ <div class="single-line-model error"> <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" [(ngModel)]="metaDataTab.name" placeholder="Topology name.vLB.CDS"> </div> <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> + Package name already exists with this version. Please enter a different name or enter different version + number. + </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" [(ngModel)]="metaDataTab.version" (input)="validatePackageNameAndVersion()" + placeholder="Example: 1.0.0"> </div> <div class="model-note-container error-message">{{errorMessage}}</div> </div> <div class="single-line-model"> <label class="label-name">Description</label> <div class="label-input"> - <input type="input" [(ngModel)]="metaDataTab.description" - placeholder="Descripe the package"> + <input type="input" [(ngModel)]="metaDataTab.description" placeholder="Descripe the package"> </div> </div> - + <div class="single-line-model"> <label class="label-name">tags</label> <div class="label-input"> - <input type="input" [(ngModel)]="metaDataTab.tags" - placeholder="Ex., vDNS-CDS"> - + <input type="input" (keyup.enter)="addTag($event)" [(ngModel)]="metaDataTab.tags" + 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 class="single-tage">vDNS-CDS <a href="#"> <i class="fa fa-times-circle"></i></a></span> - <span class="single-tage">vDNS-CDS <a href="#"> <i class="fa fa-times-circle"></i></a></span> - <span class="single-tage">vDNS-CDS <a href="#"> <i class="fa fa-times-circle"></i></a></span> - <span class="single-tage">vDNS-CDS <a href="#"> <i class="fa fa-times-circle"></i></a></span> + <span *ngFor="let tag of tags" class="single-tage">{{tag}} <i (click)="removeTag(tag)" + class="fa fa-times-circle"></i></span> </div> </div> </div> @@ -75,59 +71,46 @@ <div class="card creat-card"> <div class="single-line"> <h5 class="label-name"> - Custom key + Custom key </h5> </div> - <div class="single-custom-key"> - <div class="single-line-custom-key"> - <label class="label-name"><span>1-</span> Name</label> - <div class="label-input"> - <input name="key" type="input" placeholder="Enter name"> - </div> - </div> - <div class="single-line-custom-key"> - <label class="label-name">Value</label> - <div class="label-input"> - <input name="value" type="input" - placeholder="Enter value"> - </div> - </div> - <div class="single-line-custom-key-delete"><button 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>2-</span> Name</label> - <div class="label-input"> - <input name="key" type="input" placeholder="Enter name"> + <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> + <div class="label-input"> + <input value="{{map.key}}" name="key" type="input" placeholder="Enter name"> + </div> </div> - </div> - <div class="single-line-custom-key"> - <label class="label-name">Value</label> - <div class="label-input"> - <input name="value" type="input" - placeholder="Enter value"> + <div class="single-line-custom-key"> + <label class="label-name">Value</label> + <div class="label-input"> + <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> - <div class="single-line-custom-key-delete"><button 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>3-</span> Name</label> - <div class="label-input"> - <input name="key" type="input" placeholder="Enter name"> + <div class="single-custom-key"> + <div class="single-line-custom-key"> + <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"> + </div> </div> - </div> - <div class="single-line-custom-key"> - <label class="label-name">Value</label> - <div class="label-input"> - <input name="value" type="input" - placeholder="Enter value"> + <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"> + </div> </div> + <!-- <div class="single-line-custom-key-delete"><button (click)="removeKey($event)" + class="custom-key-delete"><i aria-hidden="true" class="icon-delete"></i></button></div> --> </div> - </div> </div> </div> -</div> +</div>
\ No newline at end of file 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 97040ee90..2f8ebcc7c 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,7 +1,7 @@ -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 { 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'; @Component({ @@ -12,10 +12,12 @@ import {PackageCreationStore} from '../package-creation.store'; export class MetadataTabComponent implements OnInit { 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; @@ -24,9 +26,44 @@ export class MetadataTabComponent implements OnInit { } ngOnInit() { + this.metaDataTab.templateTags = this.tags; + this.metaDataTab.mapOfCustomKey = this.customKeysMap; this.packageCreationStore.changeMetaData(this.metaDataTab); } + removeTag(value) { + // console.log(event); + this.tags.delete(value); + } + addTag(event) { + const value = event.target.value; + console.log(value); + if (value && value.trim().length > 0) { + event.target.value = ''; + this.tags.add(value); + } + } + + removeKey(event, key) { + console.log(event); + this.customKeysMap.delete(key); + } + addCustomKey() { + // tslint:disable-next-line: no-string-literal + const key = document.getElementsByClassName('mapKey')[0]; + // tslint:disable-next-line: no-string-literal + const value = document.getElementsByClassName('mapValue')[0]; + + // tslint:disable-next-line: no-string-literal + if (key['value'] && value['value']) { + // tslint:disable-next-line: no-string-literal + this.customKeysMap.set(key['value'], value['value']); + // tslint:disable-next-line: no-string-literal + key['value'] = ''; + // tslint:disable-next-line: no-string-literal + value['value'] = ''; + } + } validatePackageNameAndVersion() { if (this.metaDataTab.name && this.metaDataTab.version) { this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => { |