aboutsummaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client
diff options
context:
space:
mode:
authorahmedeldeeb50 <ahmed.eldeeb.ext@orange.com>2020-02-23 10:57:13 +0200
committerahmedeldeeb50 <ahmed.eldeeb.ext@orange.com>2020-02-23 10:57:13 +0200
commit2d0ed11baea5d866dfd3b8485a65ca178bd52fd3 (patch)
tree9a238beefd036c5b0ed45d68d4392bc8c0a89b5a /cds-ui/designer-client
parentebcc45b8c8703cadc49cf3a0b888545845ccb9e6 (diff)
adding tags and custom keys to metadata
Issue-ID: CCSDK-2014 Signed-off-by: ahmedeldeeb50 <ahmed.eldeeb.ext@orange.com> Change-Id: I0ebd08a1f12ebccc4c0487850f28f6e395ed65cd
Diffstat (limited to 'cds-ui/designer-client')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts16
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts12
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts2
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts13
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.css4
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html115
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts51
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 => {