diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation')
20 files changed, 458 insertions, 250 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/imports-tab/imports-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html index 344e7f599..63d392e35 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html @@ -47,7 +47,7 @@ <div [id]="'id-'+mapIndex" class="collapse" [attr.aria-labelledby]="'head-'+mapIndex" data-parent="#accordion"> <div class="card-body"> - <ace-editor [(text)]="file.value" [mode]="'json'" [autoUpdateContent]="true" + <ace-editor [(text)]="file.value" (textChange)="textChanges($event,file.key)" [mode]="'json'" [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'" #editor style="height:300px;"> </ace-editor> @@ -130,4 +130,4 @@ </div> </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/imports-tab/imports-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts index 106fe3090..bc31e6c25 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts @@ -1,7 +1,7 @@ -import { Component, OnInit } from '@angular/core'; -import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop'; -import { PackageCreationStore } from '../package-creation.store'; -import { PackageCreationUtils } from '../package-creation.utils'; +import {Component, OnInit} from '@angular/core'; +import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop'; +import {PackageCreationStore} from '../package-creation.store'; +import {PackageCreationUtils} from '../package-creation.utils'; @Component({ @@ -74,4 +74,8 @@ export class ImportsTabComponent implements OnInit { resetTheUploadedFiles() { this.uploadedFiles = []; } + + textChanges(code: any, key: string) { + this.packageCreationStore.addDefinition(key, code); + } } 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..3595f7872 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; @@ -59,6 +59,10 @@ export class Template { this.files.set(key, value); return this; } + + public getValue(key: string): string { + return this.files.get(key); + } } export class CBAPackage { 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..c71e2564a 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 @@ -2,6 +2,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 {PackageStore} from '../../configuration-dashboard/package.store'; @Component({ @@ -12,6 +13,8 @@ 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'}, @@ -19,12 +22,60 @@ export class MetadataTabComponent implements OnInit { private metaDataTab: MetaDataTabModel = new MetaDataTabModel(); private errorMessage: string; - constructor(private packageCreationService: PackageCreationService, private packageCreationStore: PackageCreationStore) { + constructor(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) { + this.metaDataTab.name = element.configuration.artifactName; + this.metaDataTab.version = element.configuration.artifactVersion; + this.metaDataTab.tags = element.configuration.tags; + this.metaDataTab.description = element.configuration.artifactDescription; + } + }); + } + + 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() { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts index 36da6a42f..cac27120f 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts @@ -23,7 +23,7 @@ import {Injectable} from '@angular/core'; import {Observable} from 'rxjs'; import {ApiService} from '../../../../common/core/services/api.service'; -import {BlueprintURLs} from '../../../../common/constants/app-constants'; +import {BlueprintURLs, ResourceDictionaryURLs} from '../../../../common/constants/app-constants'; import {PackagesApiService} from '../packages-api.service'; import {PackagesStore} from '../packages.store'; @@ -62,4 +62,7 @@ export class PackageCreationService { }); } + getTemplateAndMapping(variables: string[]): Observable<any> { + return this.api.post(ResourceDictionaryURLs.searchResourceDictionaryByNames, variables); + } } 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 3dae2e570..565603ad1 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 @@ -93,4 +93,10 @@ export class PackageCreationStore extends Store<CBAPackage> { templates: this.state.templates.setTemplates(filePath, fileContent) }); } + + getTemplateAndMapping(variables: string[]) { + this.packageCreationService.getTemplateAndMapping(variables).subscribe(element => { + console.log('the element is ' + element); + }); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html index 824152035..54491488e 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html @@ -30,7 +30,7 @@ <div [attr.aria-labelledby]="'head-script-'+mapIndex" [id]="'id-script-'+mapIndex" class="collapse" data-parent="#accordion-script"> <div class="card-body"> - <ace-editor [(text)]="file.value" [mode]="'kotlin'" [autoUpdateContent]="true" + <ace-editor [(text)]="file.value" (textChange)="textChanges($event,file.key)" [mode]="'kotlin'" [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'" #editor style="height:300px;"> </ace-editor> @@ -91,4 +91,4 @@ </div> </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/scripts-tab/scripts-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts index eee291bba..c70109fc5 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts @@ -1,7 +1,7 @@ -import { Component, OnInit } from '@angular/core'; -import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop'; -import { PackageCreationStore } from '../package-creation.store'; -import { PackageCreationUtils } from '../package-creation.utils'; +import {Component, OnInit} from '@angular/core'; +import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop'; +import {PackageCreationStore} from '../package-creation.store'; +import {PackageCreationUtils} from '../package-creation.utils'; import 'ace-builds/src-noconflict/ace'; import 'ace-builds/webpack-resolver'; @@ -76,4 +76,8 @@ export class ScriptsTabComponent implements OnInit { resetTheUploadedFiles() { this.uploadedFiles = []; } + + textChanges(code: any, key: string) { + this.packageCreationStore.addScripts(key, code); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html index 3c92bc7c7..c3a36c9cb 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html @@ -60,7 +60,8 @@ data-target="#exampleModal">Import File</a></div> <div class="editor-container"> - <app-dsl-definitions-tab></app-dsl-definitions-tab> + <app-source-editor + (textChange)="textChanges($event,templateInfo.fileName)" [(text)]="templateInfo.fileContent"></app-source-editor> </div> </div> </div> @@ -78,7 +79,7 @@ <div class="card-body"> <h6 class="text-center">Select a source to load config parameters</h6> <div class="text-center"> - <a href="#" class="mapping-source-load"> + <a (click)="initTemplateMappingTableFromCurrentTemplate()" class="mapping-source-load"> <i class="icon-current-template"></i> <br/> <span>Use Current Template Instance</span> @@ -160,7 +161,7 @@ (click)="resetTheUploadedFiles()">Cancel </button> <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal" - (click)="setFilesToStore()"> + (click)="setFilesToStore()" (click)="openListView()"> Import </button> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts index 752bd510b..d63eb2a38 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts @@ -1,6 +1,7 @@ import {Component, EventEmitter, OnInit, Output} from '@angular/core'; import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop'; import {PackageCreationStore} from '../../package-creation.store'; +import {TemplateInfo, TemplateStore} from '../../template.store'; @Component({ selector: 'app-templ-mapp-creation', @@ -8,17 +9,57 @@ import {PackageCreationStore} from '../../package-creation.store'; styleUrls: ['./templ-mapp-creation.component.css'] }) export class TemplMappCreationComponent implements OnInit { + @Output() showListViewParent = new EventEmitter<any>(); public uploadedFiles: FileSystemFileEntry[] = []; private fileNames: Set<string> = new Set(); public files: NgxFileDropEntry[] = []; fileName: any; + templateInfo = new TemplateInfo(); + private variables: string[] = []; - constructor(private packageCreationStore: PackageCreationStore) { + + constructor(private packageCreationStore: PackageCreationStore, private templateStore: TemplateStore) { } ngOnInit() { + this.templateStore.state$.subscribe(templateInfo => { + this.templateInfo = templateInfo; + this.fileName = templateInfo.fileName.split('/')[1]; + this.variables = this.getTemplateVariable(templateInfo.fileContent); + }); + } + + public getTemplateVariable(fileContent: string) { + const variables: string[] = []; + const stringsSlittedByBraces = fileContent.split('${'); + const stringsDefaultByDollarSignOnly = fileContent.split('"$'); + + for (let i = 1; i < stringsSlittedByBraces.length; i++) { + const element = stringsSlittedByBraces[i]; + if (element) { + const firstElement = element.split('}')[0]; + if (!variables.includes(firstElement)) { + variables.push(firstElement); + } else { + console.log(firstElement); + } + } + } + + for (let i = 1; i < stringsDefaultByDollarSignOnly.length; i++) { + const element = stringsDefaultByDollarSignOnly[i]; + if (element && !element.includes('$')) { + const firstElement = element.split('"')[0] + .replace('{', '') + .replace('}', '').trim(); + if (!variables.includes(firstElement)) { + variables.push(firstElement); + } + } + } + return variables; } public dropped(files: NgxFileDropEntry[]) { @@ -52,6 +93,7 @@ export class TemplMappCreationComponent implements OnInit { }); } + this.uploadedFiles = []; } public fileOver(event) { @@ -65,4 +107,19 @@ export class TemplMappCreationComponent implements OnInit { resetTheUploadedFiles() { this.uploadedFiles = []; } + + openListView() { + this.showListViewParent.emit('tell parent to open create views'); + } + + initTemplateMappingTableFromCurrentTemplate() { + console.log('happend'); + if (this.variables && this.variables.length > 0) { + this.packageCreationStore.getTemplateAndMapping(this.variables); + } + } + + textChanges(code: any, fileName: string) { + this.packageCreationStore.addTemplate(fileName, code); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html index ddf06c824..9009132e7 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html @@ -1,8 +1,6 @@ - - - <a (click)="openCreationView()" class="create-template-mapping-button"> - <i class="fa fa-plus"></i> <span>Create</span> - </a> +<a (click)="openCreationView()" class="create-template-mapping-button"> + <i class="fa fa-plus"></i> <span>Create</span> +</a> <div class="template-mapping-accordion"> @@ -10,8 +8,9 @@ <div class="card"> <div class="card-header" id="headingThree"> <h5 class="mb-0 d-flex justify-content-between"> - <button class="btn btn-link" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" - aria-controls="collapseThree"> + <button class="btn btn-link" data-toggle="collapse" data-target="#collapseThree" + aria-expanded="true" + aria-controls="collapseThree"> Template and Mapping List </button> @@ -19,138 +18,139 @@ </div> <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordion"> - <div class="card-body max-height-list" *ngFor="let file of templates.files | keyvalue; let mapIndex = index"> - <div class="row"> - <div class="col"> - <a href="#" class="template-mapping-list active">{{file.key}} - <span>Mapping</span> - <span>Template</span> - </a> - </div> - <!-- <div class="col"> - <a href="#" class="template-mapping-list">vf-module-1 - <span>Mapping</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-2 - <span>Mapping</span> - </a> - </div>--> - </div> - <!-- <div class="row"> - <div class="col"> - <a href="#" class="template-mapping-list">hostname - <span>Mapping</span> - <span>Template</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-1 - <span>Mapping</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-2 - <span>Mapping</span> - </a> - </div> - </div> - <div class="row"> - <div class="col"> - <a href="#" class="template-mapping-list">hostname - - <span>Template</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-1 - <span>Template</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-2 - <span>Mapping</span> - <span>Template</span> - </a> - </div> - </div> - <div class="row"> - <div class="col"> - <a href="#" class="template-mapping-list">hostname - - <span>Template</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-1 - <span>Mapping</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-2 - <span>Mapping</span> - </a> - </div> - </div> - <div class="row"> - <div class="col"> - <a href="#" class="template-mapping-list">hostname - <span>Mapping</span> - <span>Template</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-1 - <span>Mapping</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-2 - <span>Mapping</span> - </a> - </div> - </div> + <div class="card-body max-height-list" + *ngFor="let file of templates.files | keyvalue; let mapIndex = index"> <div class="row"> - <div class="col"> - <a href="#" class="template-mapping-list">hostname + <div class="col" style="color:white"> + <a (click)="setSourceCodeEditor(file.key)" class="template-mapping-list active">{{file.key}} <span>Mapping</span> <span>Template</span> </a> </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-1 - <span>Mapping</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-2 - <span>Mapping</span> - </a> - </div> + <!-- <div class="col"> + <a href="#" class="template-mapping-list">vf-module-1 + <span>Mapping</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-2 + <span>Mapping</span> + </a> + </div>--> </div> - <div class="row"> - <div class="col"> - <a href="#" class="template-mapping-list">hostname - - <span>Template</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-1 - <span>Template</span> - </a> - </div> - <div class="col"> - <a href="#" class="template-mapping-list">vf-module-2 - <span>Mapping</span> - <span>Template</span> - </a> - </div> - </div>--> + <!-- <div class="row"> + <div class="col"> + <a href="#" class="template-mapping-list">hostname + <span>Mapping</span> + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-1 + <span>Mapping</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-2 + <span>Mapping</span> + </a> + </div> + </div> + <div class="row"> + <div class="col"> + <a href="#" class="template-mapping-list">hostname + + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-1 + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-2 + <span>Mapping</span> + <span>Template</span> + </a> + </div> + </div> + <div class="row"> + <div class="col"> + <a href="#" class="template-mapping-list">hostname + + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-1 + <span>Mapping</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-2 + <span>Mapping</span> + </a> + </div> + </div> + <div class="row"> + <div class="col"> + <a href="#" class="template-mapping-list">hostname + <span>Mapping</span> + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-1 + <span>Mapping</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-2 + <span>Mapping</span> + </a> + </div> + </div> + <div class="row"> + <div class="col"> + <a href="#" class="template-mapping-list">hostname + <span>Mapping</span> + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-1 + <span>Mapping</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-2 + <span>Mapping</span> + </a> + </div> + </div> + <div class="row"> + <div class="col"> + <a href="#" class="template-mapping-list">hostname + + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-1 + <span>Template</span> + </a> + </div> + <div class="col"> + <a href="#" class="template-mapping-list">vf-module-2 + <span>Mapping</span> + <span>Template</span> + </a> + </div> + </div>--> </div> </div> </div> - + </div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts index 5cb41c35e..9a0cdcdac 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts @@ -1,6 +1,7 @@ import {Component, EventEmitter, OnInit, Output} from '@angular/core'; import {PackageCreationStore} from '../../package-creation.store'; import {Template} from '../../mapping-models/CBAPacakge.model'; +import {TemplateInfo, TemplateStore} from '../../template.store'; @Component({ selector: 'app-templ-mapp-listing', @@ -10,8 +11,12 @@ import {Template} from '../../mapping-models/CBAPacakge.model'; export class TemplMappListingComponent implements OnInit { @Output() showCreationViewParentNotification = new EventEmitter<any>(); private templates: Template; + private sourceCodeEditorContnet: string; - constructor(private packageCreationStore: PackageCreationStore) { + constructor(private packageCreationStore: PackageCreationStore, private templateStore: TemplateStore) { + } + + ngOnInit() { this.packageCreationStore.state$.subscribe(cba => { if (cba.templates) { this.templates = cba.templates; @@ -19,11 +24,19 @@ export class TemplMappListingComponent implements OnInit { }); } - ngOnInit() { - } - openCreationView() { this.showCreationViewParentNotification.emit('tell parent to open create views'); } + setSourceCodeEditor(key: string) { + this.packageCreationStore.state$.subscribe(cba => { + if (cba.templates) { + const fileContent = cba.templates.getValue(key); + const templateInfo = new TemplateInfo(); + templateInfo.fileContent = fileContent; + templateInfo.fileName = key; + this.templateStore.changeTemplateInfo(templateInfo); + } + }); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html index 83f3c84c8..f8cfe7a6a 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html @@ -1,9 +1,9 @@ -<div *ngIf="!creationView"> - <app-templ-mapp-listing - (showCreationViewParentNotification)="openCreationView($event)"> - </app-templ-mapp-listing> +<div *ngIf="!listView"> + <app-templ-mapp-listing + (showCreationViewParentNotification)="openCreationView($event)"> + </app-templ-mapp-listing> </div> -<div *ngIf="creationView"> - <app-templ-mapp-creation></app-templ-mapp-creation> +<div *ngIf="!creationView"> + <app-templ-mapp-creation (showListViewParent)="openListView($event)"></app-templ-mapp-creation> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts index 7e9ae1639..7079f8404 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts @@ -1,20 +1,28 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; @Component({ - selector: 'app-template-mapping', - templateUrl: './template-mapping.component.html', - styleUrls: ['./template-mapping.component.css'] + selector: 'app-template-mapping', + templateUrl: './template-mapping.component.html', + styleUrls: ['./template-mapping.component.css'] }) export class TemplateMappingComponent implements OnInit { - creationView = false; + creationView = true; + listView = false; - constructor() { } + constructor() { + } - ngOnInit() { - } + ngOnInit() { + } - openCreationView() { - this.creationView = true; - } + openCreationView() { + this.creationView = false; + this.listView = true; + } + + openListView() { + this.listView = false; + this.creationView = false; + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template.store.ts new file mode 100644 index 000000000..b3a487bdc --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template.store.ts @@ -0,0 +1,55 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 Orange. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +============LICENSE_END============================================ +*/ + +import {Injectable} from '@angular/core'; + +import {Store} from '../../../../common/core/stores/Store'; + + +export class TemplateInfo { + fileName: string; + fileContent: string; + + + constructor() { + this.fileName = ''; + this.fileContent = ''; + } + + +} + +@Injectable({ + providedIn: 'root' +}) +export class TemplateStore extends Store<TemplateInfo> { + + + constructor() { + super(new TemplateInfo()); + } + + changeTemplateInfo(templateInfo: TemplateInfo) { + this.setState(templateInfo); + } + + +} |