-
<app-header></app-header>
<div class="new-wrapper">
<div class="row">
<h2 class="col m-0">
<ul class="breadcrumb-header">
- <li>CBA Packages</li>
+ <li><a routerLink="/packages">CBA Packages</a></li>
<li>Package Name</li>
</ul>
</h2>
<div class="col d-flex justify-content-end header-button-save">
- <button class="float btn btn-sm btn-outline-secondary" (click)="goBacktoDashboard()" >Discard Changes</button>
+ <button class="float btn btn-sm btn-outline-secondary" (click)="goBacktoDashboard()">Discard
+ Changes</button>
<button class="float btn btn-sm btn-primary" (click)="editBluePrint()">Apply Changes</button>
</div>
</div>
<div class="container-fluid body-container">
<div class="container">
- <!-- <div class="creat-action-container">
+
<!-- <div class="creat-action-container">
<a href="#" class="action-button">
<i class="icon-clone" aria-hidden="true"></i>
<span>Clone</span>
<i class="icon-deploy"></i>
</div>
<div class="col-12 package-description">
- Last modified {{ viewedPackage.createdDate | date:'short' }} By {{viewedPackage.updatedBy}}
+ Last modified {{ viewedPackage.createdDate | date:'short' }} By
+ {{viewedPackage.updatedBy}}
</div>
</div>
</div>
</div>
<div class="col-4 package-view-button">
- <button class="btn btn-sm btn-outline-secondary" (click)="deployCurrentPackage()"><i class="fa fa-play-circle"></i> Deploy</button>
- <button class="btn btn-sm btn-outline-secondary" (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)"><i class="fa"></i> Download</button>
+ <button class="btn btn-sm btn-outline-secondary" (click)="deployCurrentPackage()"><i
+ class="fa fa-play-circle"></i> Deploy</button>
+ <button class="btn btn-sm btn-outline-secondary"
+ (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)"><i
+ class="fa"></i> Download</button>
<button class="btn btn-sm btn-primary">Designer Mode</button>
</div>
<div class="col">
<div class="nav nav-tabs " id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab"
- href="#nav-metadata"
- role="tab" aria-controls="nav-metadata"
- aria-selected="true" autofocus #nameit (focusout)="saveMetaData()">METADATA</a>
+ href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true"
+ autofocus #nameit (focusout)="saveMetaData()">METADATA</a>
<a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
- role="tab" aria-controls="nav-template"
- aria-selected="false">TEMPLATE & MAPPING</a>
+ role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a>
<a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
- role="tab" aria-controls="nav-scripts"
- aria-selected="false">SCRIPTS</a>
+ role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a>
<a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
- role="tab" aria-controls="nav-imports"
- aria-selected="false">IMPORTS</a>
+ role="tab" aria-controls="nav-imports" aria-selected="false">IMPORTS</a>
<a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
- href="#nav-authentication"
- role="tab" aria-controls="nav-authentication"
- aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
+ href="#nav-authentication" role="tab" aria-controls="nav-authentication"
+ aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
</div>
</div>
<div class="col">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
- aria-labelledby="nav-metadata-tab">
+ aria-labelledby="nav-metadata-tab">
<app-metadata-tab></app-metadata-tab>
</div>
<div class="tab-pane fade" id="nav-template" role="tabpanel"
- aria-labelledby="nav-template-tab">
+ aria-labelledby="nav-template-tab">
<app-template-mapping></app-template-mapping>
</div>
<div class="tab-pane fade" id="nav-scripts" role="tabpanel"
- aria-labelledby="nav-scripts-tab">
+ aria-labelledby="nav-scripts-tab">
<app-scripts-tab></app-scripts-tab>
</div>
<div class="tab-pane fade" id="nav-imports" role="tabpanel"
- aria-labelledby="nav-imports-tab">
+ aria-labelledby="nav-imports-tab">
<app-imports-tab></app-imports-tab>
</div>
<div class="tab-pane fade" id="nav-authentication" role="tabpanel"
- aria-labelledby="nav-authentication-tab">
+ aria-labelledby="nav-authentication-tab">
<div class="card creat-card">
<div class="editor-container">
<app-dsl-definitions-tab></app-dsl-definitions-tab>
</div>
</div>
</div>
-</div>
-
+</div>
\ No newline at end of file
<a class="enter-link" href="#"><i class="icon-enter"></i></a>
</div>
<span class="import-container-span">Or you can also <a href="#" data-toggle="modal"
- data-target="#exampleModal">Import File</a></span>
+ data-target="#importModal">Import File</a></span>
</div>
</div>
-<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+<div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
- <h5 class="modal-title" id="exampleModalLabel">Import File</h5>
+ <h5 class="modal-title" id="importModalLabel">Import File</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="row">
<h2 class="col m-0">
<ul class="breadcrumb-header">
- <li>CBA Packages</li>
+ <li><a routerLink="/packages">CBA Packages</a></li>
<li>Package Name</li>
</ul>
</h2>
<div class="col d-flex justify-content-end header-button-save">
- <button class="float btn btn-sm btn-outline-secondary" (click)="goBackToDashBorad()" >Discard Changes</button>
+ <button class="float btn btn-sm btn-outline-secondary" (click)="goBackToDashBorad()">Discard
+ Changes</button>
<button class="float btn btn-sm btn-primary" (click)="saveBluePrint()">Save</button>
</div>
</div>
<div class="col">
<div class="nav nav-tabs " id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab"
- href="#nav-metadata"
- role="tab" aria-controls="nav-metadata"
- aria-selected="false" autofocus #nameit (focusout)="test()">METADATA</a>
+ href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="false"
+ autofocus #nameit (focusout)="test()">METADATA</a>
<a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
- role="tab" aria-controls="nav-template"
- aria-selected="false">TEMPLATE & MAPPING</a>
+ role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a>
<a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
- role="tab" aria-controls="nav-scripts"
- aria-selected="false">SCRIPTS</a>
+ role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a>
<a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
- role="tab" aria-controls="nav-imports"
- aria-selected="false">IMPORTS</a>
+ role="tab" aria-controls="nav-imports" aria-selected="false">IMPORTS</a>
<a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
- href="#nav-authentication"
- role="tab" aria-controls="nav-authentication"
- aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
+ href="#nav-authentication" role="tab" aria-controls="nav-authentication"
+ aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
</div>
</div>
<div class="col">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
- aria-labelledby="nav-metadata-tab">
+ aria-labelledby="nav-metadata-tab">
<app-metadata-tab></app-metadata-tab>
</div>
<div class="tab-pane fade" id="nav-template" role="tabpanel"
- aria-labelledby="nav-template-tab">
+ aria-labelledby="nav-template-tab">
<app-template-mapping></app-template-mapping>
</div>
<div class="tab-pane fade" id="nav-scripts" role="tabpanel"
- aria-labelledby="nav-scripts-tab">
+ aria-labelledby="nav-scripts-tab">
<app-scripts-tab></app-scripts-tab>
</div>
<div class="tab-pane fade" id="nav-imports" role="tabpanel"
- aria-labelledby="nav-imports-tab">
+ aria-labelledby="nav-imports-tab">
<app-imports-tab></app-imports-tab>
</div>
<div class="tab-pane fade" id="nav-authentication" role="tabpanel"
- aria-labelledby="nav-authentication-tab">
+ aria-labelledby="nav-authentication-tab">
<div class="card creat-card">
<div class="editor-container">
<app-dsl-definitions-tab></app-dsl-definitions-tab>
</div>
</div>
</div>
-</div>
+</div>
\ No newline at end of file
============LICENSE_END============================================
*/
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
-import {Store} from '../../../../common/core/stores/Store';
+import { Store } from '../../../../common/core/stores/Store';
-import {CBAPackage, DslDefinition} from './mapping-models/CBAPacakge.model';
-import {PackageCreationService} from './package-creation.service';
-import {MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model';
-import {Observable} from 'rxjs';
-import {ResourceDictionary} from './mapping-models/ResourceDictionary.model';
+import { CBAPackage, DslDefinition } from './mapping-models/CBAPacakge.model';
+import { PackageCreationService } from './package-creation.service';
+import { MetaDataTabModel } from './mapping-models/metadata/MetaDataTab.model';
+import { Observable } from 'rxjs';
+import { ResourceDictionary } from './mapping-models/ResourceDictionary.model';
@Injectable({
}
addScripts(name: string, content: string) {
-
this.setState({
...this.state,
scripts: this.state.scripts.setScripts(name, content)
getTemplateAndMapping(variables: string[]): Observable<ResourceDictionary[]> {
return this.packageCreationService.getTemplateAndMapping(variables);
}
+
+ clear() {
+ this.setState(new CBAPackage());
+ }
}
<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" (textChange)="textChanges($event,file.key)" [mode]="'kotlin'" [autoUpdateContent]="true"
- [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'" #editor
- style="height:300px;">
+ <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>
</div>
</div>
</button>
</div>
<div class="modal-body">
- <ngx-file-drop accept=".kt" (onFileDrop)="dropped($event)" (onFileLeave)="fileLeave($event)"
+ <ngx-file-drop accept=".kt,.py" (onFileDrop)="dropped($event)" (onFileLeave)="fileLeave($event)"
(onFileOver)="fileOver($event)" dropZoneLabel="Drop files here">
<ng-template let-openFileSelector="openFileSelector" ngx-file-drop-content-tmp>
<div class="folder-upload">
Files
</button>
</div>
- <div class="folder-upload-type">Allowed file type: Kotlin(Kt)</div>
+ <div class="folder-upload-type">Allowed file type: Kotlin(kt), Python(py)</div>
</ng-template>
</ngx-file-drop>
<div *ngFor="let item of uploadedFiles; let i=index" class="upload-table">
</div>
</div>
</div>
-</div>
+</div>
\ No newline at end of file
</span>
</label>
</div>
- </div>
+ </div>
<div class="create-template-import">Use the editor to add parameters or you can also
<a href="#" data-toggle="modal" (click)="allowedExt=[getFileExtension()]"
- data-target="#exampleModal">Import
+ data-target="#templateModal">Import
File</a></div>
<div class="editor-container">
<app-source-editor (textChange)="textChanges($event,templateInfo.fileName)"
<br />
<span>Use Current Template Instance</span>
</a>
- <a href="#" (click)="allowedExt=['.csv']" data-toggle="modal" data-target="#exampleModal"
+ <a href="#" (click)="allowedExt=['.csv']" data-toggle="modal" data-target="#templateModal"
class="mapping-source-load">
<i class="icon-Upload-attribute"></i>
<br />
<td>{{ dict.name }}</td>
<td>{{ dict.name }}</td>
<td>
- <select class="custom-select" (click)="testOption(dict,$event)">
+ <select class="custom-select" (click)="selectSource(dict,$event)">
<option *ngFor="let val of dict.definition.sources | keyvalue">
{{initMap(dict.name,val)}}
</option>
</table>
</div>
+ <div id="mapping-table" [hidden]="mappingRes?.length == 0" class="mx-4 my-2">
+ <table datatable [dtOptions]="dtOptions" [dtTrigger]="resTableDtTrigger" class="row-border hover">
+ <thead>
+ <tr>
+ <th>Required</th>
+ <th>Parameter Name</th>
+ <th>Dictionary Name</th>
+ <th>Dictionary Source</th>
+ <th>Dependancies</th>
+ <th>Default</th>
+ <th>Data Type</th>
+ <th>Entry Schema</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let dict of mappingRes">
+ <td>
+ <i *ngIf="dict.definition?.property?.required" class="fa fa-check-square mx-2"></i>
+ <i *ngIf="!dict.definition?.property?.required" class="fa fa-square mx-2"></i>
+ </td>
+ <td>{{ dict['name'] }}</td>
+ <td>{{ dict['name'] }}</td>
+ <td>
+ <input type="text" class="form-control" [value]="dict['dictionary-source']"
+ disabled>
+
+ </td>
+ <td>
+ <input type="text" class="form-control" [value]="dict['dependencies']" disabled>
+ <!-- {{ dict.definition.sources }} -->
+ </td>
+ <td>{{ dict['property']['default'] }}</td>
+ <td>{{ dict['property']['type'] }}</td>
+ <td>{{ dict['property']['entry_schema'] }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
</div>
</div>
-<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+<div class="modal fade" id="templateModal" tabindex="-1" role="dialog" aria-labelledby="templateModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
- <h5 class="modal-title" id="exampleModalLabel">Import File</h5>
+ <h5 class="modal-title" id="templateModalLabel">Import File</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
// We use this trigger because fetching the list of persons can be quite long,
// thus we ensure the data is fetched before rendering
dtTrigger = new Subject();
+ resTableDtTrigger = new Subject();
resourceDictionaryRes: ResourceDictionary[] = [];
allowedExt = ['.vtl'];
@ViewChild(DataTableDirective, { static: false })
templateExt = 'Velcoity';
dependancies = new Map<string, Array<string>>();
dependanciesSource = new Map<string, string>();
+ mappingRes = [];
ngOnInit() {
this.templateStore.state$.subscribe(templateInfo => {
+ console.log('----------');
console.log(templateInfo);
this.templateInfo = templateInfo;
this.fileName = templateInfo.fileName.split('/')[1];
- this.templateFileContent = templateInfo.fileContent;
+ if (templateInfo.type === 'mapping') {
+ this.mappingRes = templateInfo.mapping;
+ this.resourceDictionaryRes = [];
+ this.resTableDtTrigger.next();
+ } else {
+
+ this.templateFileContent = templateInfo.fileContent;
+ }
});
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 10,
destroy: true,
- // retrieve: true,
+ retrieve: true,
};
}
}
uploadFile() {
+ this.dependancies.clear();
+ this.dependanciesSource.clear();
if (this.allowedExt.includes('.csv')) {
this.fetchCSVkeys();
} else {
public fileLeave(event) {
console.log(event);
}
-
+ //
resetTheUploadedFiles() {
this.uploadedFiles = [];
}
}
getMappingTableFromTemplate(e) {
+ this.resourceDictionaryRes = [];
if (e) {
e.preventDefault();
}
if (this.variables && this.variables.length > 0) {
console.log('base');
this.packageCreationStore.getTemplateAndMapping(this.variables).subscribe(res => {
+ this.mappingRes = [];
this.resourceDictionaryRes = res;
console.log(this.resourceDictionaryRes);
this.rerender();
}
}
- testOption(dict, e) {
+ selectSource(dict, e) {
const source = e.target.value;
let keyDepend = null;
try {
console.log(source);
if (keyDepend) {
this.dependancies.set(dict.name, keyDepend);
- this.dependanciesSource.set(dict.name, source);
} else {
// this.dependancies.delete(dict.name);
// this.dependanciesSource.delete(dict.name);
}
+ this.dependanciesSource.set(dict.name, source);
console.log(this.dependancies);
+ console.log(this.dependanciesSource);
}
getKeys(map: Map<string, any>) {
+.template-mapping-list {
+ cursor: pointer;
+}
\ No newline at end of file
-<a (click)="openCreationView()" class="create-template-mapping-button">
+<a *ngIf="isCreate" (click)="openCreationView()" class="create-template-mapping-button">
<i class="fa fa-plus"></i> <span>Create</span>
</a>
<div class="row">
<!-- <div class="col-4" style="color:white" *ngFor="let file of templates.files | keyvalue; let mapIndex = index">-->
<div class="col-4" style="color:white" *ngFor="let file of getKeys(templateAndMappingMap)">
- <a (click)="setSourceCodeEditor(file)"
- class="template-mapping-list active">{{file}}
+ <a (click)="setSourceCodeEditor(file)" class="template-mapping-list active">{{file}}
<span *ngIf="getValue(file).isMapping">Mapping</span>
<span *ngIf="getValue(file).isTemplate">Template</span>
</a>
</div>
</div>
-</div>
+</div>
\ No newline at end of file
-import {Component, EventEmitter, OnInit, Output} from '@angular/core';
-import {PackageCreationStore} from '../../package-creation.store';
-import {Mapping, Template} from '../../mapping-models/CBAPacakge.model';
-import {TemplateInfo, TemplateStore} from '../../template.store';
-import {TemplateAndMapping} from '../TemplateAndMapping';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { PackageCreationStore } from '../../package-creation.store';
+import { Mapping, Template } from '../../mapping-models/CBAPacakge.model';
+import { TemplateInfo, TemplateStore } from '../../template.store';
+import { TemplateAndMapping } from '../TemplateAndMapping';
+import { ActivatedRoute } from '@angular/router';
+
@Component({
selector: 'app-templ-mapp-listing',
private templateAndMappingMap = new Map<string, TemplateAndMapping>();
private templates: Template;
private mapping: Mapping;
+ isCreate = true;
- constructor(private packageCreationStore: PackageCreationStore, private templateStore: TemplateStore) {
+ constructor(
+ private packageCreationStore: PackageCreationStore,
+ private templateStore: TemplateStore,
+ private route: ActivatedRoute
+ ) {
}
ngOnInit() {
+ if (this.route.snapshot.paramMap.has('id')) {
+ this.isCreate = false;
+ }
this.packageCreationStore.state$.subscribe(cba => {
if (cba.templates) {
this.templates = cba.templates;
}
setSourceCodeEditor(key: string) {
- key = 'Templates/' + key + '-template.vtl';
+ const templateKey = 'Templates/' + key + '-template.vtl';
this.packageCreationStore.state$.subscribe(cba => {
- if (cba.templates) {
- console.log(cba.templates);
- console.log(key);
- const fileContent = cba.templates.getValue(key.trim());
+ console.log('cba ------');
+ console.log(cba);
+ console.log(key);
+ console.log(this.templateAndMappingMap);
+ if (cba.templates && cba.templates.files.has(templateKey)) {
+ const fileContent = cba.templates.getValue(templateKey.trim());
console.log(fileContent);
const templateInfo = new TemplateInfo();
templateInfo.fileContent = fileContent;
- templateInfo.fileName = key;
+ templateInfo.fileName = templateKey;
+ this.templateStore.changeTemplateInfo(templateInfo);
+ }
+ const mappingKey = 'Templates/' + key + '-mapping.json';
+ if (cba.mapping && cba.mapping.files.has(mappingKey)) {
+ const obj = JSON.parse(cba.mapping.getValue(mappingKey));
+ const templateInfo = new TemplateInfo();
+ templateInfo.mapping = obj;
+ templateInfo.fileName = mappingKey;
+ templateInfo.type = 'mapping';
this.templateStore.changeTemplateInfo(templateInfo);
}
});
-import {Component, OnInit} from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { PackageCreationStore } from '../package-creation.store';
@Component({
selector: 'app-template-mapping',
creationView = true;
listView = false;
- constructor() {
+ constructor(private route: ActivatedRoute, private pakcageStore: PackageCreationStore) {
}
ngOnInit() {
+ if (this.route.snapshot.paramMap.has('id')) {
+ console.log('Edit mode');
+ this.creationView = false;
+ this.listView = false;
+ } else {
+ console.log('Create mode');
+ this.pakcageStore.clear();
+ }
}
-
openCreationView() {
this.creationView = false;
this.listView = true;
============LICENSE_END============================================
*/
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
-import {Store} from '../../../../common/core/stores/Store';
+import { Store } from '../../../../common/core/stores/Store';
export class TemplateInfo {
fileName: string;
fileContent: string;
+ type: string;
+ mapping = [];
constructor() {
this.fileName = '';
this.fileContent = '';
+ this.type = '';
}
Code Review / ccsdk / cds.git / commitdiff