summaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client
diff options
context:
space:
mode:
authorKAPIL SINGAL <ks220y@att.com>2020-02-26 04:16:14 +0000
committerGerrit Code Review <gerrit@onap.org>2020-02-26 04:16:14 +0000
commitc99df5dd491c9f18044ec483e696739080e80950 (patch)
tree6f2a271ec154656c69d34743d498968c2b877b0c /cds-ui/designer-client
parent2ef7909fd0b9d12a7fe1619639e787c5ee0cf4c3 (diff)
parente70a0e413947cc3e5e21d041f0ed3d7582b44d7a (diff)
Merge "import maaping from CSV file or the current template"
Diffstat (limited to 'cds-ui/designer-client')
-rw-r--r--cds-ui/designer-client/angular.json24
-rw-r--r--cds-ui/designer-client/package.json8
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts13
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts22
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/ResourceDictionary.model.ts23
-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/mappingAdapter.model.ts38
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts3
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts23
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html106
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts150
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts60
12 files changed, 366 insertions, 106 deletions
diff --git a/cds-ui/designer-client/angular.json b/cds-ui/designer-client/angular.json
index 6219bf68a..a84b95e39 100644
--- a/cds-ui/designer-client/angular.json
+++ b/cds-ui/designer-client/angular.json
@@ -25,21 +25,23 @@
],
"styles": [
"src/styles.css",
+ "./node_modules/datatables.net-dt/css/jquery.dataTables.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/@angular/material/prebuilt-themes/purple-green.css",
"./node_modules/font-awesome/css/font-awesome.css",
"./node_modules/jointjs/css/layout.css",
"./node_modules/jointjs/css/themes/material.css",
"./node_modules/jointjs/css/themes/default.css"
-
],
"scripts": [
+ "./node_modules/jquery/dist/jquery.js",
+ "./node_modules/datatables.net/js/jquery.dataTables.js",
+ "./node_modules/bootstrap/dist/js/bootstrap.js",
"./node_modules/ace-builds/src-min/ace.js",
"./node_modules/ace-builds/src-min/theme-eclipse.js",
"./node_modules/ace-builds/src-min/theme-tomorrow_night_bright.js",
"./node_modules/ace-builds/src-min/mode-json.js",
"./node_modules/ace-builds/src-min/mode-javascript.js",
- "./node_modules/ace-builds/src-min/mode-python.js",
"./node_modules/ace-builds/src-min/mode-xml.js",
"./node_modules/ace-builds/src-min/mode-kotlin.js",
"./node_modules/ace-builds/src-min/mode-text.js",
@@ -52,7 +54,6 @@
"./node_modules/ace-builds/src-min/ext-language_tools.js",
"./node_modules/ace-builds/src-min/worker-json.js",
"./node_modules/ace-builds/src-min/worker-javascript.js",
- "./node_modules/jquery/dist/jquery.js",
"./node_modules/lodash/index.js",
"./node_modules/backbone/backbone.js",
"./node_modules/jointjs/dist/joint.js"
@@ -60,12 +61,10 @@
},
"configurations": {
"production": {
- "fileReplacements": [
- {
- "replace": "src/environments/environment.ts",
- "with": "src/environments/environment.prod.ts"
- }
- ],
+ "fileReplacements": [{
+ "replace": "src/environments/environment.ts",
+ "with": "src/environments/environment.prod.ts"
+ }],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
@@ -75,8 +74,7 @@
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
- "budgets": [
- {
+ "budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
@@ -126,7 +124,7 @@
],
"scripts": [
-
+
]
}
},
@@ -159,4 +157,4 @@
}
},
"defaultProject": "designer-client"
-}
+} \ No newline at end of file
diff --git a/cds-ui/designer-client/package.json b/cds-ui/designer-client/package.json
index 22defe502..5149300d1 100644
--- a/cds-ui/designer-client/package.json
+++ b/cds-ui/designer-client/package.json
@@ -24,14 +24,17 @@
"@angular/router": "~8.2.9",
"@ng-bootstrap/ng-bootstrap": "^5.1.1",
"angular-animations": "0.0.10",
+ "angular-datatables": "^8.0.0",
"angular-font-awesome": "^3.1.2",
"angular-material-expansion-panel": "^0.7.2",
"backbone": "^1.4.0",
"bootstrap": "^4.3.1",
+ "datatables.net": "^1.10.20",
+ "datatables.net-dt": "^1.10.20",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"jointjs": "^3.0.4",
- "jquery": "^3.1.1",
+ "jquery": "^3.4.1",
"json2typescript": "^1.2.3",
"lodash": "^4.17.15",
"ng-sidebar": "^9.1.1",
@@ -48,10 +51,11 @@
"@angular/compiler-cli": "~8.2.9",
"@angular/language-service": "~8.2.9",
"@types/backbone": "^1.4.1",
+ "@types/datatables.net": "^1.10.18",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/jointjs": "^2.0.0",
- "@types/jquery": "^3.3.31",
+ "@types/jquery": "^3.3.33",
"@types/lodash": "^3.10.1",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
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 db6d0420b..162efff9e 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
@@ -7,6 +7,7 @@ import { PackageCreationUtils } from '../package-creation.utils';
export class DesignerCreationMode extends PackageCreationModes {
+ // Refactor methods params to be in constructor level
constructor() {
super();
}
@@ -15,6 +16,7 @@ export class DesignerCreationMode extends PackageCreationModes {
this.addToscaMetaDataFile(cbaPackage.metaData);
this.createDefinitionsFolder(cbaPackage, packageCreationUtils);
this.addScriptsFolder(cbaPackage.scripts);
+ this.addTemplateFolder(cbaPackage);
}
private addScriptsFolder(scripts: Scripts) {
@@ -23,6 +25,17 @@ export class DesignerCreationMode extends PackageCreationModes {
});
}
+ private addTemplateFolder(cbaPackage: CBAPackage) {
+ // Create Template Files Folder
+ cbaPackage.templates.files.forEach((value, key) => {
+ FilesContent.putData(key, value);
+ });
+ // Create Mapping Files Folder
+ cbaPackage.mapping.files.forEach((value, key) => {
+ FilesContent.putData(key, value);
+ });
+ }
+
private createDefinitionsFolder(cbaPackage: CBAPackage, packageCreationUtils: PackageCreationUtils) {
cbaPackage.definitions.imports.forEach((valueOfFile, key) => {
FilesContent.putData(key, valueOfFile);
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 3595f7872..45a00ff06 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
@@ -1,4 +1,4 @@
-import {MetaDataTabModel} from './metadata/MetaDataTab.model';
+import { MetaDataTabModel } from './metadata/MetaDataTab.model';
export class Definition {
@@ -34,6 +34,22 @@ export class DslDefinition {
content: string;
}
+export class Base {
+ public files: Map<string, string>;
+
+ constructor() {
+ this.files = new Map<string, string>();
+ }
+
+ public setContent(key: string, value: string) {
+ this.files.set(key, value);
+ return this;
+ }
+
+ public getValue(key: string): string {
+ return this.files.get(key);
+ }
+}
export class Scripts {
public files: Map<string, string>;
@@ -65,12 +81,15 @@ export class Template {
}
}
+export class Mapping extends Base {
+}
export class CBAPackage {
public metaData: MetaDataTabModel;
public definitions: Definition;
public scripts: Scripts;
public templates: Template;
+ public mapping: Mapping;
constructor() {
@@ -78,6 +97,7 @@ export class CBAPackage {
this.scripts = new Scripts();
this.metaData = new MetaDataTabModel();
this.templates = new Template();
+ this.mapping = new Mapping();
}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/ResourceDictionary.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/ResourceDictionary.model.ts
new file mode 100644
index 000000000..558d1c7d0
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/ResourceDictionary.model.ts
@@ -0,0 +1,23 @@
+import { JsonObject, JsonProperty } from 'json2typescript';
+
+@JsonObject('ResourceDictionary')
+export class ResourceDictionary {
+ @JsonProperty()
+ name: string;
+ @JsonProperty('creation_date')
+ creationDate: string;
+ @JsonProperty('data_type')
+ dataType: string;
+ @JsonObject('definition')
+ definition?: any | null;
+ @JsonProperty('description')
+ description: string;
+ @JsonProperty('entry_schema')
+ entrySchema: string;
+ @JsonProperty('esource_dictionary_group')
+ resourceDictionaryGroup: string;
+ @JsonProperty('tags')
+ tags: string;
+ @JsonProperty('upadted_by')
+ updatedBy: string;
+}
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 b797050dd..8e2ff475e 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
@@ -17,7 +17,7 @@ export class VlbDefinition {
export class DslContent {
}
-
+// Refactor varaibles name and use JsonConverteri
@JsonObject('metadata')
export class Metadata {
@JsonProperty('template_author')
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts
new file mode 100644
index 000000000..638654a95
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts
@@ -0,0 +1,38 @@
+import { ResourceDictionary } from './ResourceDictionary.model';
+import { JsonObject, JsonProperty, JsonConvert } from 'json2typescript';
+
+// Convert ResourceDictionary object to store Mapping
+export class MappingAdapter {
+
+ constructor(private resourceDictionary: ResourceDictionary) { }
+
+ ToMapping(): Mapping {
+ const mapping = new Mapping();
+ mapping.name = this.resourceDictionary.name;
+ mapping.dictionaryName = this.resourceDictionary.name;
+ mapping.property = this.resourceDictionary.definition.property;
+ mapping.inputParam = false;
+ mapping.dictionarySource = 'sdnc';
+ mapping.dependencies = [];
+ mapping.version = 0;
+ return mapping;
+ }
+}
+
+@JsonObject('Mapping')
+export class Mapping {
+ @JsonProperty('name')
+ name: string;
+ @JsonProperty()
+ property: any;
+ @JsonProperty('input-param', Boolean)
+ inputParam: boolean;
+ @JsonProperty('dictionary-name')
+ dictionaryName: string;
+ @JsonProperty('dictionary-source')
+ dictionarySource: string;
+ @JsonProperty()
+ dependencies: [];
+ @JsonProperty()
+ version: number;
+}
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 cac27120f..494c9e555 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
@@ -26,6 +26,7 @@ import {ApiService} from '../../../../common/core/services/api.service';
import {BlueprintURLs, ResourceDictionaryURLs} from '../../../../common/constants/app-constants';
import {PackagesApiService} from '../packages-api.service';
import {PackagesStore} from '../packages.store';
+import { ResourceDictionary } from './mapping-models/ResourceDictionary.model';
@Injectable({
providedIn: 'root'
@@ -62,7 +63,7 @@ export class PackageCreationService {
});
}
- getTemplateAndMapping(variables: string[]): Observable<any> {
+ getTemplateAndMapping(variables: string[]): Observable<ResourceDictionary[]> {
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 565603ad1..6a9d9c4b3 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
@@ -19,14 +19,16 @@ limitations under the License.
============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 {FolderNodeElement, MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model';
+import { CBAPackage, DslDefinition } from './mapping-models/CBAPacakge.model';
+import { PackageCreationService } from './package-creation.service';
+import { FolderNodeElement, MetaDataTabModel } from './mapping-models/metadata/MetaDataTab.model';
import * as JSZip from 'jszip';
+import { Observable } from 'rxjs';
+import { ResourceDictionary } from './mapping-models/ResourceDictionary.model';
@Injectable({
@@ -94,9 +96,14 @@ export class PackageCreationStore extends Store<CBAPackage> {
});
}
- getTemplateAndMapping(variables: string[]) {
- this.packageCreationService.getTemplateAndMapping(variables).subscribe(element => {
- console.log('the element is ' + element);
+ addMapping(filePath: string, fileContent: string) {
+ this.setState({
+ ...this.state,
+ mapping: this.state.mapping.setContent(filePath, fileContent)
});
}
+
+ getTemplateAndMapping(variables: string[]): Observable<ResourceDictionary[]> {
+ return this.packageCreationService.getTemplateAndMapping(variables);
+ }
}
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 c3a36c9cb..d08ada98d 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
@@ -17,7 +17,7 @@
<div class="card-header" id="headingOne">
<h5 class="mb-0 d-flex justify-content-between">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
- aria-controls="collapseOne">
+ aria-controls="collapseOne">
1. Create Template
</button>
@@ -29,25 +29,24 @@
<div class="single-line">
<label class="label-name">Template Type</label>
<div class="label-input">
- <label name="trst">
- <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1"
- value=Velcoity>
-
+ <label name="trst" (click)="allowedExt=['.vtl']">
+ <input class="form-check-input" [(ngModel)]="templateExt" type="radio"
+ name="exampleRadios" id="exampleRadios1" value=Velcoity>
<span>
Velcoity
</span>
</label>
- <label name="trst">
- <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1"
- value=Velcoity>
+ <label name="trst" (click)="allowedExt=['.j2','.jinja2']">
+ <input class="form-check-input" [(ngModel)]="templateExt" type="radio"
+ name="exampleRadios" id="exampleRadios1" value=Jinja>
<span>
Jinja
</span>
</label>
- <label name="trst">
- <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1"
- value=Velcoity>
+ <label name="trst" (click)="allowedExt=['.kt']">
+ <input class="form-check-input" [(ngModel)]="templateExt" type="radio"
+ name="exampleRadios" id="exampleRadios1" value=Kotlin>
<span>
Kotlin
@@ -56,12 +55,11 @@
</div>
</div>
<div class="create-template-import">Use the editor to add parameters or you can also <a href="#"
- data-toggle="modal"
- data-target="#exampleModal">Import
- File</a></div>
+ data-toggle="modal" data-target="#exampleModal">Import
+ File</a></div>
<div class="editor-container">
- <app-source-editor
- (textChange)="textChanges($event,templateInfo.fileName)" [(text)]="templateInfo.fileContent"></app-source-editor>
+ <app-source-editor (textChange)="textChanges($event,templateInfo.fileName)"
+ [(text)]="templateFileContent"></app-source-editor>
</div>
</div>
</div>
@@ -70,7 +68,7 @@
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"
- aria-expanded="false" aria-controls="collapseTwo">
+ aria-expanded="false" aria-controls="collapseTwo">
2. Manage Mapping
</button>
</h5>
@@ -79,14 +77,15 @@
<div class="card-body">
<h6 class="text-center">Select a source to load config parameters</h6>
<div class="text-center">
- <a (click)="initTemplateMappingTableFromCurrentTemplate()" class="mapping-source-load">
+ <a href="#" (click)="getMappingTableFromTemplate($event)" class="mapping-source-load">
<i class="icon-current-template"></i>
- <br/>
+ <br />
<span>Use Current Template Instance</span>
</a>
- <a href="#" data-toggle="modal" data-target="#exampleModal" class="mapping-source-load">
+ <a href="#" (click)="allowedExt=['.csv']" data-toggle="modal" data-target="#exampleModal"
+ class="mapping-source-load">
<i class="icon-Upload-attribute"></i>
- <br/>
+ <br />
<div>Upload attribute list</div>
<div class="source-load-note">(Should be comma delimited file)</div>
</a>
@@ -102,23 +101,64 @@
</div>
</div>
+ <div id="mapping-table" [hidden]="resourceDictionaryRes?.length == 0" class="mx-4 my-2">
+ <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" 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 resourceDictionaryRes">
+ <td>{{ dict.definition?.property?.required }}</td>
+ <td>{{ dict.name }}</td>
+ <td>{{ dict.name }}</td>
+ <td>
+ <select class="custom-select">
+ <option *ngFor="let val of dict.definition.sources | keyvalue">{{val.key}}
+ </option>
+
+ </select>
+ </td>
+ <td>
+ <select class="custom-select">
+ <option
+ *ngFor="let val of dict?.definition?.sources?.sdnc?.properties['key-dependencies'] ">
+ {{val}}</option>
+
+ </select>
+ <!-- {{ dict.definition.sources }} -->
+ </td>
+ <td>{{ dict.definition?.property?.default }}</td>
+ <td>{{ dict.dataType }}</td>
+ <td>{{ dict.entrySchema }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</div>
</div>
-
<div class="template-mapping-action">
<button class="btn btn-sm btn-outline-secondary">Cancel</button>
- <button class="btn btn-sm btn-primary">Finish</button>
+ <button (click)="saveToStore()" class="btn btn-sm btn-primary">Finish</button>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
- aria-hidden="true">
+ aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
@@ -128,11 +168,11 @@
</button>
</div>
<div class="modal-body">
- <ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)"
- (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
+ <ngx-file-drop [accept]="allowedExt" dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)"
+ (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
<ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
<div class="folder-upload">
- <img src="assets/img/folder-upload.svg"/>
+ <img src="assets/img/folder-upload.svg" />
</div>
<div class="folder-upload-text">
Drag & Drop file
@@ -148,9 +188,9 @@
<div class="upload-table" *ngFor="let item of uploadedFiles; let i=index">
<table class="table">
<thead>
- <tr>
- <th>Name : {{ item.name }}</th>
- </tr>
+ <tr>
+ <th>Name : {{ item.name }}</th>
+ </tr>
</thead>
</table>
</div>
@@ -158,13 +198,13 @@
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal"
- (click)="resetTheUploadedFiles()">Cancel
+ (click)="resetTheUploadedFiles()">Cancel
</button>
<button type="button" class="btn btn-sm btn-primary" data-dismiss="modal"
- (click)="setFilesToStore()" (click)="openListView()">
+ (click)="uploadFile();openListView()">
Import
</button>
</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/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 d63eb2a38..4ab96ee3c 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,36 +1,74 @@
-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';
+import { Component, EventEmitter, OnInit, Output, OnDestroy, ViewChild } from '@angular/core';
+import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
+import { PackageCreationStore } from '../../package-creation.store';
+import { TemplateInfo, TemplateStore } from '../../template.store';
+import { Subject } from 'rxjs';
+import { ResourceDictionary } from '../../mapping-models/ResourceDictionary.model';
+import { DataTableDirective } from 'angular-datatables';
+import { MappingAdapter, Mapping } from '../../mapping-models/mappingAdapter.model';
+import { PackageCreationUtils } from '../../package-creation.utils';
+import { JsonConvert } from 'json2typescript';
@Component({
selector: 'app-templ-mapp-creation',
templateUrl: './templ-mapp-creation.component.html',
styleUrls: ['./templ-mapp-creation.component.css']
})
-export class TemplMappCreationComponent implements OnInit {
+export class TemplMappCreationComponent implements OnInit, OnDestroy {
@Output() showListViewParent = new EventEmitter<any>();
public uploadedFiles: FileSystemFileEntry[] = [];
private fileNames: Set<string> = new Set();
-
+ private jsonConvert = new JsonConvert();
public files: NgxFileDropEntry[] = [];
fileName: any;
templateInfo = new TemplateInfo();
private variables: string[] = [];
-
-
- constructor(private packageCreationStore: PackageCreationStore, private templateStore: TemplateStore) {
+ private mappingFileValues = [];
+ dtOptions: DataTables.Settings = {};
+ // 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();
+ resourceDictionaryRes: ResourceDictionary[] = [];
+ allowedExt = ['.vtl'];
+ @ViewChild(DataTableDirective, { static: false })
+ dtElement: DataTableDirective;
+ MappingAdapter: MappingAdapter;
+ mapping = new Map();
+ templateFileContent: string;
+ templateExt = 'Velcoity';
+
+
+ constructor(
+ private packageCreationStore: PackageCreationStore,
+ private templateStore: TemplateStore,
+ private packageCreationUtils: PackageCreationUtils
+ ) {
}
ngOnInit() {
this.templateStore.state$.subscribe(templateInfo => {
+ console.log(templateInfo);
this.templateInfo = templateInfo;
this.fileName = templateInfo.fileName.split('/')[1];
- this.variables = this.getTemplateVariable(templateInfo.fileContent);
});
+
+ this.dtOptions = {
+ pagingType: 'full_numbers',
+ pageLength: 10,
+ destroy: true,
+ // retrieve: true,
+ };
}
+ getFileExtension() {
+ switch (this.templateExt) {
+ case 'Velcoity': return '.vtl';
+ case 'Koltin': return '.ktl';
+ case 'Jinja': return '.j2';
+ default: return '.vtl';
+ }
+ }
public getTemplateVariable(fileContent: string) {
const variables: string[] = [];
const stringsSlittedByBraces = fileContent.split('${');
@@ -81,21 +119,59 @@ export class TemplMappCreationComponent implements OnInit {
this.uploadedFiles.splice(fileIndex, 1);*/
}
- setFilesToStore() {
+ uploadFile() {
+ if (this.allowedExt.includes('.csv')) {
+ this.fetchCSVkeys();
+ } else {
+ this.setTemplateFilesToStore();
+ }
+ }
+
+ fetchCSVkeys() {
for (const droppedFile of this.uploadedFiles) {
droppedFile.file((file: File) => {
const fileReader = new FileReader();
fileReader.onload = (e) => {
- this.packageCreationStore.addTemplate('Templates/' + this.fileName,
- fileReader.result.toString());
+ this.variables = fileReader.result.toString().split(',');
+ console.log(this.variables);
+ this.getMappingTableFromTemplate(null);
};
fileReader.readAsText(file);
});
+ }
+ this.uploadedFiles = [];
+ }
+
+ private convertDictionaryToMap(resourceDictionaries: ResourceDictionary[]): Mapping[] {
+ const mapArray: Mapping[] = [];
+ for (const resourceDictionary of resourceDictionaries) {
+ this.MappingAdapter = new MappingAdapter(resourceDictionary);
+ mapArray.push(this.MappingAdapter.ToMapping());
+ }
+ console.log(mapArray);
+ return mapArray;
+ }
+
+ setTemplateFilesToStore() {
+ for (const droppedFile of this.uploadedFiles) {
+ droppedFile.file((file: File) => {
+ const fileReader = new FileReader();
+ fileReader.onload = (e) => {
+ this.templateFileContent = fileReader.result.toString();
+ this.variables = this.getTemplateVariable(this.templateFileContent);
+ };
+ fileReader.readAsText(file);
+ });
}
this.uploadedFiles = [];
}
+ textChanges(code: any, fileName: string) {
+ // this.packageCreationStore.addTemplate(fileName, code);
+ this.templateFileContent = code;
+ }
+
public fileOver(event) {
console.log(event);
}
@@ -112,14 +188,52 @@ export class TemplMappCreationComponent implements OnInit {
this.showListViewParent.emit('tell parent to open create views');
}
- initTemplateMappingTableFromCurrentTemplate() {
- console.log('happend');
+ getMappingTableFromTemplate(e) {
+ if (e) { e.preventDefault(); }
if (this.variables && this.variables.length > 0) {
- this.packageCreationStore.getTemplateAndMapping(this.variables);
+ console.log('base');
+ this.packageCreationStore.getTemplateAndMapping(this.variables).subscribe(res => {
+ this.resourceDictionaryRes = res;
+ console.log(this.resourceDictionaryRes);
+ this.rerender();
+ });
}
}
- textChanges(code: any, fileName: string) {
- this.packageCreationStore.addTemplate(fileName, code);
+ saveToStore() {
+ if (this.fileName) {
+ // Save Mapping to Store
+ if (this.resourceDictionaryRes) {
+ const mapArray = this.convertDictionaryToMap(this.resourceDictionaryRes);
+ this.packageCreationStore.addMapping('Templates/' + this.fileName + '-mapping.json',
+ this.packageCreationUtils.transformToJson(this.jsonConvert.serialize(mapArray)));
+ }
+ // Save Template to store
+ if (this.templateFileContent) {
+ this.packageCreationStore.addTemplate('Templates/' + this.fileName + '-template' + this.getFileExtension(),
+ this.templateFileContent);
+ }
+ } else {
+
+ }
+ }
+
+ rerender(): void {
+ if (this.dtElement.dtInstance) {
+ console.log('rerender');
+ this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
+ dtInstance.destroy();
+ this.dtElement.dtOptions = this.dtOptions;
+ this.dtElement.dtTrigger.next();
+ dtInstance.draw();
+ });
+ } else {
+ this.dtTrigger.next();
+ }
+ }
+
+ ngOnDestroy(): void {
+ // Do not forget to unsubscribe the event
+ this.dtTrigger.unsubscribe();
}
}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
index 7935e12a3..0d56014b5 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
@@ -1,33 +1,34 @@
-import {NgModule} from '@angular/core';
-import {CommonModule, JsonPipe} from '@angular/common';
-import {ApiService} from '../../../common/core/services/api.typed.service';
-import {PackagesRoutingModule} from './packages.routing.module';
-import {NgbPaginationModule} from '@ng-bootstrap/ng-bootstrap';
-import {SharedModulesModule} from '../../shared-modules/shared-modules.module';
-import {PackagesDashboardComponent} from './packages-dashboard/packages-dashboard.component';
-import {PackageListComponent} from './packages-dashboard/package-list/package-list.component';
-import {DesignerComponent} from './designer/designer.component';
-import {SidebarModule} from 'ng-sidebar';
-import {PackagePaginationComponent} from './packages-dashboard/package-pagination/package-pagination.component';
-import {SortPackagesComponent} from './packages-dashboard/sort-packages/sort-packages.component';
-import {PackagesHeaderComponent} from './packages-dashboard/packages-header/packages-header.component';
-import {PackagesSearchComponent} from './packages-dashboard/search-by-packages/search-by-packages.component';
-import {TagsFilteringComponent} from './packages-dashboard/filter-by-tags/filter-by-tags.component';
-import {ConfigurationDashboardComponent} from './configuration-dashboard/configuration-dashboard.component';
-import {FunctionsComponent} from './designer/functions/functions.component';
-import {ActionsComponent} from './designer/actions/actions.component';
-import {PackageCreationComponent} from './package-creation/package-creation.component';
-import {FormsModule} from '@angular/forms';
-import {ImportsTabComponent} from './package-creation/imports-tab/imports-tab.component';
-import {NgxFileDropModule} from 'ngx-file-drop';
-import {TemplateMappingComponent} from './package-creation/template-mapping/template-mapping.component';
-import {SourceEditorComponent} from './source-editor/source-editor.component';
-import {ScriptsTabComponent} from './package-creation/scripts-tab/scripts-tab.component';
-import {AceEditorModule} from 'ng2-ace-editor';
-import {MetadataTabComponent} from './package-creation/metadata-tab/metadata-tab.component';
-import {DslDefinitionsTabComponent} from './package-creation/dsl-definitions-tab/dsl-definitions-tab.component';
+import { NgModule } from '@angular/core';
+import { CommonModule, JsonPipe } from '@angular/common';
+import { ApiService } from '../../../common/core/services/api.typed.service';
+import { PackagesRoutingModule } from './packages.routing.module';
+import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { SharedModulesModule } from '../../shared-modules/shared-modules.module';
+import { PackagesDashboardComponent } from './packages-dashboard/packages-dashboard.component';
+import { PackageListComponent } from './packages-dashboard/package-list/package-list.component';
+import { DesignerComponent } from './designer/designer.component';
+import { SidebarModule } from 'ng-sidebar';
+import { PackagePaginationComponent } from './packages-dashboard/package-pagination/package-pagination.component';
+import { SortPackagesComponent } from './packages-dashboard/sort-packages/sort-packages.component';
+import { PackagesHeaderComponent } from './packages-dashboard/packages-header/packages-header.component';
+import { PackagesSearchComponent } from './packages-dashboard/search-by-packages/search-by-packages.component';
+import { TagsFilteringComponent } from './packages-dashboard/filter-by-tags/filter-by-tags.component';
+import { ConfigurationDashboardComponent } from './configuration-dashboard/configuration-dashboard.component';
+import { FunctionsComponent } from './designer/functions/functions.component';
+import { ActionsComponent } from './designer/actions/actions.component';
+import { PackageCreationComponent } from './package-creation/package-creation.component';
+import { FormsModule } from '@angular/forms';
+import { ImportsTabComponent } from './package-creation/imports-tab/imports-tab.component';
+import { NgxFileDropModule } from 'ngx-file-drop';
+import { TemplateMappingComponent } from './package-creation/template-mapping/template-mapping.component';
+import { SourceEditorComponent } from './source-editor/source-editor.component';
+import { ScriptsTabComponent } from './package-creation/scripts-tab/scripts-tab.component';
+import { AceEditorModule } from 'ng2-ace-editor';
+import { MetadataTabComponent } from './package-creation/metadata-tab/metadata-tab.component';
+import { DslDefinitionsTabComponent } from './package-creation/dsl-definitions-tab/dsl-definitions-tab.component';
import { TemplMappCreationComponent } from './package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component';
import { TemplMappListingComponent } from './package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component';
+import { DataTablesModule } from 'angular-datatables';
@NgModule({
declarations: [PackagesDashboardComponent,
@@ -59,7 +60,8 @@ import { TemplMappListingComponent } from './package-creation/template-mapping/t
SidebarModule.forRoot(),
FormsModule,
NgxFileDropModule,
- AceEditorModule
+ AceEditorModule,
+ DataTablesModule
],
providers: [ApiService, JsonPipe],
bootstrap: []