diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab')
3 files changed, 97 insertions, 73 deletions
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 => { |