diff options
author | shaaban Altanany <shaaban.eltanany.ext@orange.com> | 2020-02-23 15:23:50 +0200 |
---|---|---|
committer | shaaban Altanany <shaaban.eltanany.ext@orange.com> | 2020-02-23 17:32:27 +0200 |
commit | 4c1e01bdf2835f7c87ec0e7e6ef2630f72c0b728 (patch) | |
tree | c38723045cc9922d95a1c4d1d7df65f38ebbb752 /cds-ui/designer-client | |
parent | ebcc45b8c8703cadc49cf3a0b888545845ccb9e6 (diff) |
adding upload function and getting variables from template at template and mapping tab
Issue-ID: CCSDK-2102
Signed-off-by: shaaban Altanany <shaaban.eltanany.ext@orange.com>
Change-Id: Id92cbd183c700764a55ef016d681a568954dc18f
Diffstat (limited to 'cds-ui/designer-client')
12 files changed, 306 insertions, 157 deletions
diff --git a/cds-ui/designer-client/proxy.conf.json b/cds-ui/designer-client/proxy.conf.json index 11ed26767..6b81a884a 100644 --- a/cds-ui/designer-client/proxy.conf.json +++ b/cds-ui/designer-client/proxy.conf.json @@ -4,5 +4,11 @@ "secure": false, "logLevel": "debug", "changeOrigin": true + }, + "/resourcedictionary/*": { + "target": "https://localhost:3000", + "secure": false, + "logLevel": "debug", + "changeOrigin": true } } diff --git a/cds-ui/designer-client/src/app/common/constants/app-constants.ts b/cds-ui/designer-client/src/app/common/constants/app-constants.ts index 387c35342..eeff3d41f 100644 --- a/cds-ui/designer-client/src/app/common/constants/app-constants.ts +++ b/cds-ui/designer-client/src/app/common/constants/app-constants.ts @@ -106,6 +106,7 @@ export const ResourceDictionaryURLs = { saveResourceDictionary: '/resourcedictionary/save', searchResourceDictionaryByTags: '/resourcedictionary/search', searchResourceDictionaryByName: '', + searchResourceDictionaryByNames: '/resourcedictionary/search/by-names', getSources: '/resourcedictionary/source-mapping', getModelType: '/resourcedictionary/model-type', getResourceDictionary: '/resourcedictionary/model-type/by-definition' 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..30675086c 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 @@ -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/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/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..07c88c330 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 + [(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..836b0f5a6 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,14 @@ export class TemplMappCreationComponent implements OnInit { resetTheUploadedFiles() { this.uploadedFiles = []; } + + openListView() { + this.showListViewParent.emit('tell parent to open create views'); + } + + initTemplateMappingTableFromCurrentTemplate() { + if (this.variables && this.variables.length > 0) { + this.packageCreationStore.getTemplateAndMapping(this.variables); + } + } } 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); + } + + +} |