aboutsummaryrefslogtreecommitdiffstats
path: root/cds-ui
diff options
context:
space:
mode:
Diffstat (limited to 'cds-ui')
-rw-r--r--cds-ui/designer-client/angular.json14
-rw-r--r--cds-ui/designer-client/package-lock.json8
-rw-r--r--cds-ui/designer-client/package.json1
-rw-r--r--cds-ui/designer-client/src/app/app.module.ts2
-rw-r--r--cds-ui/designer-client/src/app/common/core/pipes/search.pipe.ts44
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html58
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts28
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts4
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html19
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts6
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css4
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html25
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts59
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html6
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts2
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/definition.model.ts4
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts3
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/resource-dictionary.model.ts26
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/sources.model.ts2
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.spec.ts31
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.ts37
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.store.ts53
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.css19
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.html22
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.spec.ts44
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts38
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.css19
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html91
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.spec.ts44
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts78
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.css37
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html122
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.spec.ts44
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts76
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.css208
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html85
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.spec.ts44
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts109
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources.store.ts60
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html2
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-routing.module.ts6
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary.module.ts14
42 files changed, 1506 insertions, 92 deletions
diff --git a/cds-ui/designer-client/angular.json b/cds-ui/designer-client/angular.json
index 256c35c1e..e503c1535 100644
--- a/cds-ui/designer-client/angular.json
+++ b/cds-ui/designer-client/angular.json
@@ -25,6 +25,7 @@
],
"styles": [
"src/styles.css",
+ "node_modules/ngx-toastr/toastr.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",
@@ -61,12 +62,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,
@@ -76,8 +75,7 @@
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
- "budgets": [
- {
+ "budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
diff --git a/cds-ui/designer-client/package-lock.json b/cds-ui/designer-client/package-lock.json
index 46997c4ab..89d9c064c 100644
--- a/cds-ui/designer-client/package-lock.json
+++ b/cds-ui/designer-client/package-lock.json
@@ -8101,6 +8101,14 @@
"tslib": "^1.9.0"
}
},
+ "ngx-toastr": {
+ "version": "11.3.3",
+ "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-11.3.3.tgz",
+ "integrity": "sha512-DbLFkSZHsVPuuIIrsY1ziEhdkFUQ0V1yG1N0+1nKXGI5QBVesEDxLUVtntjzxJcWw/uUV+bKApo//tGHHORabQ==",
+ "requires": {
+ "tslib": "^1.9.0"
+ }
+ },
"nice-try": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
diff --git a/cds-ui/designer-client/package.json b/cds-ui/designer-client/package.json
index ec968ba7a..1e5128111 100644
--- a/cds-ui/designer-client/package.json
+++ b/cds-ui/designer-client/package.json
@@ -43,6 +43,7 @@
"ng2-ace-editor": "^0.3.9",
"ngx-bootstrap": "^5.6.1",
"ngx-file-drop": "^8.0.8",
+ "ngx-toastr": "^11.3.3",
"rxjs": "~6.4.0",
"stream": "0.0.2",
"tslib": "^1.10.0",
diff --git a/cds-ui/designer-client/src/app/app.module.ts b/cds-ui/designer-client/src/app/app.module.ts
index da7ddfbd0..fd07d34c0 100644
--- a/cds-ui/designer-client/src/app/app.module.ts
+++ b/cds-ui/designer-client/src/app/app.module.ts
@@ -34,6 +34,7 @@ import {SidebarModule} from 'ng-sidebar';
import {SharedModulesModule} from './modules/shared-modules/shared-modules.module';
import {NgxFileDropModule} from 'ngx-file-drop';
import {ResourceDictionaryModule} from './modules/feature-modules/resource-dictionary/resource-dictionary.module';
+import { ToastrModule } from 'ngx-toastr';
@NgModule({
@@ -53,6 +54,7 @@ import {ResourceDictionaryModule} from './modules/feature-modules/resource-dicti
NgxFileDropModule,
ResourceDictionaryModule,
SidebarModule,
+ ToastrModule.forRoot() // ToastrModule added
],
providers: [ApiService],
diff --git a/cds-ui/designer-client/src/app/common/core/pipes/search.pipe.ts b/cds-ui/designer-client/src/app/common/core/pipes/search.pipe.ts
new file mode 100644
index 000000000..104fe0090
--- /dev/null
+++ b/cds-ui/designer-client/src/app/common/core/pipes/search.pipe.ts
@@ -0,0 +1,44 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+ name: 'search'
+})
+
+export class SearchPipe implements PipeTransform {
+ transform(items: any[], searchText: string): any[] {
+ if (!items) {
+ return [];
+ }
+ if (!searchText) {
+ return items;
+ }
+ searchText = searchText.toLowerCase();
+ return items.filter( it => {
+ if (it.name) {
+ return it.name.toLowerCase().includes(searchText);
+ } else {
+ return items;
+ }
+ });
+ }
+
+}
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 ac02c50e2..d487de3d1 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
@@ -36,38 +36,39 @@
<div class="card">
<div class="card-header" [id]="'head-'+mapIndex">
<h5 class="mb-0 d-flex justify-content-between">
- <button class="btn btn-link " data-toggle="collapse"
- aria-expanded="false"
- (click)="changeDivShow(mapIndex)" >
+ <button class="btn btn-link " data-toggle="collapse" aria-expanded="false"
+ (click)="changeDivShow(mapIndex)">
<i class="icon-file-code"></i> {{file.key}}
</button>
-
- <a data-toggle="modal" data-target="#exampleModal" class="accordion-delete"><i
- class="icon-delete-sm"></i></a>
-
- <!-- <a class="accordion-delete" (click)="removeFile(mapIndex)"><i class="icon-delete-sm"></i></a> -->
- <!-- Delete Modal -->
- <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
- aria-labelledby="exampleModalLabel" aria-hidden="true">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <h5 class="modal-title" id="exampleModalLabel">Delete File</h5>
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">&times;</span>
- </button>
- </div>
- <div class="modal-body">
- <p>Are you sure you want to delete file <span>artifact_types.json</span>?</p>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary"
- data-dismiss="modal">Cancel</button>
- <button type="button" class="btn btn-primary">Delete</button>
+
+ <a data-toggle="modal" (click)="initDelete(file)" data-target="#exampleModal"
+ class="accordion-delete"><i class="icon-delete-sm"></i></a>
+
+ <!-- <a class="accordion-delete" (click)="removeFile(mapIndex)"><i class="icon-delete-sm"></i></a> -->
+ <!-- Delete Modal -->
+ <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
+ aria-labelledby="exampleModalLabel" aria-hidden="true">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="exampleModalLabel">Delete File</h5>
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">&times;</span>
+ </button>
+ </div>
+ <div class="modal-body">
+ <p>Are you sure you want to delete file
+ <span>{{fileToDelete?.key?.split('/')[1]}}</span>?</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary"
+ data-dismiss="modal">Cancel</button>
+ <button type="button" data-dismiss="modal" (click)="removeFile()"
+ class="btn btn-primary">Delete</button>
+ </div>
</div>
</div>
</div>
- </div>
</h5>
</div>
<div [id]="'id-'+mapIndex" class="collapse" [attr.aria-labelledby]="'head-'+mapIndex"
@@ -153,7 +154,8 @@
<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal"
(click)="resetTheUploadedFiles()">Cancel
</button>
- <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal" (click)="setFilesToStore()">
+ <button type="button" class="btn btn-sm btn-primary" [disabled]="uploadedFiles?.length<=0"
+ data-dismiss="modal" (click)="setFilesToStore()">
Import
</button>
</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 35c0918de..9858fd580 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({
@@ -14,7 +14,7 @@ export class ImportsTabComponent implements OnInit {
public definitionFiles: Map<string, string> = new Map<string, string>();
public uploadedFiles: FileSystemFileEntry[] = [];
private fileNames: Set<string> = new Set();
-
+ fileToDelete: any = {};
public files: NgxFileDropEntry[] = [];
constructor(private packageCreationStore: PackageCreationStore, private packageCreationUtils: PackageCreationUtils) {
@@ -40,11 +40,21 @@ export class ImportsTabComponent implements OnInit {
}
}
}
-
- removeFile(fileIndex: number) {
- const filename = 'Definitions/' + this.uploadedFiles[fileIndex].name;
+ initDelete(file) {
+ console.log(file);
+ this.fileToDelete = file;
+ }
+ removeFile() {
+ const filename = this.fileToDelete.key;
this.packageCreationStore.removeFileFromDefinition(filename);
- this.uploadedFiles.splice(fileIndex, 1);
+
+ for (let i = 0; i < this.uploadedFiles.length; i++) {
+ console.log(this.uploadedFiles[i]);
+ if (this.uploadedFiles[i].name === filename) {
+ this.uploadedFiles.splice(i, 1);
+ break;
+ }
+ }
}
public fileOver(event) {
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 0808223cd..8302697fe 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
@@ -84,6 +84,10 @@ export class PackageCreationStore extends Store<CBAPackage> {
this.state.scripts.files.delete(name);
}
+ fileExist(key: string) {
+ return this.state.templates.files.has(key);
+ }
+
removeFileFromDefinition(filename) {
this.state.definitions.imports.delete(filename);
}
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 79c444061..159f7aec4 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
@@ -20,12 +20,12 @@
<div class="card">
<div [id]="'head-script-'+mapIndex" class="card-header">
<h5 class="mb-0 d-flex justify-content-between">
- <button (click)="changeDivShow(mapIndex)"
- aria-expanded="false" class="btn btn-link collapsed" data-toggle="collapse">
+ <button (click)="changeDivShow(mapIndex)" aria-expanded="false" class="btn btn-link collapsed"
+ data-toggle="collapse">
<i class="icon-file-code"></i> {{file.key}}
</button>
- <a data-toggle="modal" data-target="#exampleModal" class="accordion-delete"><i
- class="icon-delete-sm"></i></a>
+ <a data-toggle="modal" (click)="initDelete(file)" data-target="#exampleModal"
+ class="accordion-delete"><i class="icon-delete-sm"></i></a>
<!-- <a (click)="removeFile(file.key,mapIndex)" data-toggle="modal" data-target="#exampleModal" class="accordion-delete"><i
class="icon-delete-sm"></i></a> -->
<!-- Delete Modal -->
@@ -40,12 +40,14 @@
</button>
</div>
<div class="modal-body">
- <p>Are you sure you want to delete script file <span>ConfigDeploy.py</span>?</p>
+ <p>Are you sure you want to delete script file
+ <span>{{fileToDelete?.key?.split('/')[2]}}</span>?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cancel</button>
- <button type="button" class="btn btn-primary">Delete</button>
+ <button type="button" (click)="removeFile(fileToDelete?.key,0)"
+ data-dismiss="modal" class="btn btn-primary">Delete</button>
</div>
</div>
</div>
@@ -114,10 +116,11 @@
<button (click)="resetTheUploadedFiles()" class="btn btn-sm btn-secondary" data-dismiss="modal"
type="button">Cancel
</button>
- <button (click)="setFilesToStore()" class="btn btn-sm btn-primary" data-dismiss="modal" type="button">
+ <button (click)="setFilesToStore()" [disabled]="uploadedFiles?.length<=0" class="btn btn-sm btn-primary"
+ data-dismiss="modal" type="button">
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/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 efe28e9a4..a85ccf146 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
@@ -3,6 +3,7 @@ import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
import { PackageCreationStore } from '../package-creation.store';
import 'ace-builds/src-noconflict/ace';
import 'ace-builds/webpack-resolver';
+declare var $: any;
@Component({
selector: 'app-scripts-tab',
@@ -15,6 +16,7 @@ export class ScriptsTabComponent implements OnInit {
public uploadedFiles: FileSystemFileEntry[] = [];
public files: NgxFileDropEntry[] = [];
private fileNames: Set<string> = new Set();
+ fileToDelete: any = {};
constructor(
private packageCreationStore: PackageCreationStore,
@@ -42,7 +44,9 @@ export class ScriptsTabComponent implements OnInit {
}
}
}
-
+ initDelete(file) {
+ this.fileToDelete = file;
+ }
removeFile(filePath: string, FileIndex: number) {
const filename = filePath.split('/')[2] || '';
// const filename = 'Scripts/' + this.getFileType(this.uploadedFiles[fileIndex].name) + '/' + this.uploadedFiles[fileIndex].name;
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css
index e69de29bb..7273b9c27 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css
@@ -0,0 +1,4 @@
+.accordian-title {
+ color: #a09e9e;
+ font-size: .9em;
+} \ 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.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 16c3101f2..e6149c883 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
@@ -12,13 +12,13 @@
</div>
<div class="template-mapping-accordion">
- <div id="accordion">
+ <div class="accordion" id="accordion">
<div class="card">
<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">
- 1. Create Template
+ 1. Template <span class="accordian-title">{{currentTemplate?.fileName?.split('/')[1]}}</span>
</button>
</h5>
@@ -70,7 +70,8 @@
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
- 2. Manage Mapping
+ 2. Manage Mapping <span
+ class="accordian-title">{{currentMapping?.fileName?.split('/')[1]}}</span>
</button>
</h5>
</div>
@@ -119,8 +120,10 @@
<tbody>
<tr *ngFor="let dict of resourceDictionaryRes">
<td>
- <img *ngIf="dict.definition?.property?.required" src="/assets/img/icon-required-yes.svg">
- <img *ngIf="!dict.definition?.property?.required" src="/assets/img/icon-required-no.svg">
+ <img *ngIf="dict.definition?.property?.required"
+ src="/assets/img/icon-required-yes.svg">
+ <img *ngIf="!dict.definition?.property?.required"
+ src="/assets/img/icon-required-no.svg">
</td>
<td>{{ dict.name }}</td>
<td>{{ dict.name }}</td>
@@ -166,8 +169,10 @@
<tbody>
<tr *ngFor="let dict of mappingRes">
<td>
- <img *ngIf="dict.definition?.property?.required" src="/assets/img/icon-required-yes.svg">
- <img *ngIf="!dict.definition?.property?.required" src="/assets/img/icon-required-no.svg">
+ <img *ngIf="dict.definition?.property?.required"
+ src="/assets/img/icon-required-yes.svg">
+ <img *ngIf="!dict.definition?.property?.required"
+ src="/assets/img/icon-required-no.svg">
</td>
<td>{{ dict['name'] }}</td>
<td>{{ dict['name'] }}</td>
@@ -194,7 +199,7 @@
</div>
<div class="template-mapping-action">
- <button class="btn btn-outline-secondary">Cancel</button>
+ <button (click)="cancel()" class="btn btn-outline-secondary">Cancel</button>
<button (click)="saveToStore()" class="btn btn-primary">Submit</button>
</div>
</div>
@@ -212,8 +217,8 @@
</button>
</div>
<div class="modal-body">
- <ngx-file-drop [multiple]="false" [accept]="allowedExt" dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)"
- (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
+ <ngx-file-drop [multiple]="false" [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" />
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 628d963ce..7d4705d69 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
@@ -7,7 +7,8 @@ import { ResourceDictionary } from '../../mapping-models/ResourceDictionary.mode
import { DataTableDirective } from 'angular-datatables';
import { Mapping, MappingAdapter } from '../../mapping-models/mappingAdapter.model';
import { PackageCreationUtils } from '../../package-creation.utils';
-import { JsonConvert } from 'json2typescript';
+import { JsonConvert, Any } from 'json2typescript';
+import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-templ-mapp-creation',
@@ -40,13 +41,16 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
dependancies = new Map<string, Array<string>>();
dependanciesSource = new Map<string, string>();
mappingRes = [];
+ currentTemplate: any;
+ currentMapping: any;
constructor(
private packageCreationStore: PackageCreationStore,
private templateStore: TemplateStore,
- private packageCreationUtils: PackageCreationUtils
+ private packageCreationUtils: PackageCreationUtils,
+ private toastr: ToastrService
) {
}
@@ -56,13 +60,18 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
console.log(templateInfo);
this.templateInfo = templateInfo;
this.fileName = templateInfo.fileName.split('/')[1];
+ if (this.fileName) {
+ this.fileName = this.fileName.split('-')[0];
+ }
if (templateInfo.type === 'mapping') {
this.mappingRes = templateInfo.mapping;
+ this.currentMapping = templateInfo;
this.resourceDictionaryRes = [];
this.resTableDtTrigger.next();
} else {
this.templateFileContent = templateInfo.fileContent;
+ this.currentTemplate = templateInfo;
}
});
@@ -224,28 +233,44 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
}
return map.key;
}
+ cancel() {
+ this.fileName = '';
+ this.templateFileContent = '';
+ this.resourceDictionaryRes = [];
+ this.mappingRes = [];
+ this.currentMapping = {};
+ this.currentTemplate = {};
+ }
saveToStore() {
- console.log(this.dependancies);
- console.log(this.dependanciesSource);
if (this.fileName) {
- // Save Mapping to Store
- if (this.resourceDictionaryRes && this.resourceDictionaryRes.length > 0) {
- const mapArray = this.convertDictionaryToMap(this.resourceDictionaryRes);
- this.packageCreationStore.addMapping('Templates/' + this.fileName + '-mapping.json',
- this.packageCreationUtils.transformToJson(this.jsonConvert.serialize(mapArray)));
- this.resourceDictionaryRes = [];
- }
- // Save Template to store
- if (this.templateFileContent) {
- this.packageCreationStore.addTemplate('Templates/' + this.fileName + '-template' + this.getFileExtension(),
- this.templateFileContent);
- this.templateFileContent = '';
+ // check file duplication
+ if (!(this.packageCreationStore.fileExist('Templates/' + this.fileName + '-mapping.json')
+ || this.packageCreationStore.fileExist('Templates/' + this.fileName + '-template' + this.getFileExtension()))) {
+ // Save Mapping to Store
+ if (this.resourceDictionaryRes && this.resourceDictionaryRes.length > 0) {
+ const mapArray = this.convertDictionaryToMap(this.resourceDictionaryRes);
+ this.packageCreationStore.addMapping('Templates/' + this.fileName + '-mapping.json',
+ this.packageCreationUtils.transformToJson(this.jsonConvert.serialize(mapArray)));
+ this.resourceDictionaryRes = [];
+ }
+ // Save Template to store
+ if (this.templateFileContent) {
+ this.packageCreationStore.addTemplate('Templates/' + this.fileName + '-template' + this.getFileExtension(),
+ this.templateFileContent);
+ this.templateFileContent = '';
+ }
+ this.fileName = '';
+ this.toastr.success('File is created', 'success');
+ } else {
+ console.log('this file already exist');
+ this.toastr.error('File name already exist', 'Error');
}
} else {
-
+ this.toastr.error('Add the file name', 'Error');
}
}
+
selectSource(dict, e) {
const source = e.target.value;
let keyDepend = null;
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 f5e683f28..a47963a72 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
@@ -4,7 +4,7 @@
<div class="template-mapping-accordion">
- <div id="accordion">
+ <div class="accordion" id="listAccordion">
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0 d-flex justify-content-between">
@@ -16,12 +16,12 @@
</h5>
</div>
- <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordion">
+ <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#listAccordion">
<div class="card-body max-height-list">
<div class="row">
<!-- <div class="col-4" style="color:white" *ngFor="let file of templates.files | keyvalue; let mapIndex = index">-->
<div class="col-4" *ngFor="let file of getKeys(templateAndMappingMap)">
- <a (click)="setSourceCodeEditor(file)" class="template-mapping-list active">{{file}}
+ <a (click)="setSourceCodeEditor(file)" class="template-mapping-list" [ngClass]="{'active':currentFile == file}">{{file}}
<span *ngIf="getValue(file).isMapping">Mapping</span>
<span *ngIf="getValue(file).isTemplate">Template</span>
</a>
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 372fbca03..448899019 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
@@ -17,6 +17,7 @@ export class TemplMappListingComponent implements OnInit {
private templates: Template;
private mapping: Mapping;
isCreate = true;
+ currentFile: string;
constructor(
private packageCreationStore: PackageCreationStore,
@@ -72,6 +73,7 @@ export class TemplMappListingComponent implements OnInit {
}
setSourceCodeEditor(key: string) {
+ this.currentFile = key;
const templateKey = 'Templates/' + key + '-template.vtl';
this.packageCreationStore.state$.subscribe(cba => {
console.log('cba ------');
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/definition.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/definition.model.ts
index 96d188a54..7911c028c 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/definition.model.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/definition.model.ts
@@ -21,10 +21,6 @@
import { Sources } from './sources.model';
export class Definition {
- tag: string;
- name: string;
- property: string;
- updatedBy: string;
sources: Sources[];
}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts
index e4b9be75f..609b066e2 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts
@@ -26,4 +26,7 @@ export class MetaData {
public entrySchema: string;
public updatedBy: string;
public createdDate: string;
+ public libraryInstance: string;
+ public required: string;
+ public derivedFrom: string;
}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/resource-dictionary.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/resource-dictionary.model.ts
new file mode 100644
index 000000000..85686551e
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/resource-dictionary.model.ts
@@ -0,0 +1,26 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { MetaData } from './metaData.model';
+import { Definition } from './definition.model';
+
+export class ResourceDictionary {
+ public metaData: MetaData;
+ public definition: Definition;
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/sources.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/sources.model.ts
index 4074e5138..35d3f77c3 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/sources.model.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/sources.model.ts
@@ -17,8 +17,6 @@
* limitations under the License.
* ============LICENSE_END=========================================================
*/
-
export class Sources {
sources: [];
-
}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.spec.ts
new file mode 100644
index 000000000..896c7caf0
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.spec.ts
@@ -0,0 +1,31 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { TestBed } from '@angular/core/testing';
+
+import { DictionaryCreationService } from './dictionary-creation.service';
+
+describe('DictionaryCreationService', () => {
+ beforeEach(() => TestBed.configureTestingModule({}));
+
+ it('should be created', () => {
+ const service: DictionaryCreationService = TestBed.get(DictionaryCreationService);
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.ts
new file mode 100644
index 000000000..df90e6cd1
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.ts
@@ -0,0 +1,37 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { ResourceDictionaryURLs } from 'src/app/common/constants/app-constants';
+import { Observable } from 'rxjs';
+import { Sources } from '../model/sources.model';
+import { ApiService } from 'src/app/common/core/services/api.service';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class DictionaryCreationService {
+
+ constructor(private api: ApiService) { }
+
+ getSources() {
+ return this.api.get(ResourceDictionaryURLs.getSources);
+}
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.store.ts
new file mode 100644
index 000000000..20cec7448
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.store.ts
@@ -0,0 +1,53 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 'src/app/common/core/stores/Store';
+import { ResourceDictionary } from '../model/resource-dictionary.model';
+import { DictionaryCreationService } from './dictionary-creation.service';
+import { MetaData } from '../model/metaData.model';
+import { Sources } from '../model/sources.model';
+import { SourcesStore } from './sources-template/sources.store';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class DictionaryCreationStore extends Store<ResourceDictionary> {
+ constructor(private dictionaryCreationService: DictionaryCreationService, private sourcesStore: SourcesStore) {
+ super(new ResourceDictionary());
+ }
+
+ changeMetaData(metaDataObject: MetaData) {
+ console.log(metaDataObject);
+ this.setState({
+ ...this.state,
+ metaData: metaDataObject
+ });
+ }
+
+ getSources() {
+ this.sourcesStore.state$.subscribe(data => {
+ console.log(data);
+ });
+ }
+
+ SaveResourceDictionary(resourceDictionary: ResourceDictionary) {
+ console.log(this.setState);
+ }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.css
new file mode 100644
index 000000000..f263c0086
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.css
@@ -0,0 +1,19 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/ \ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.html
new file mode 100644
index 000000000..93d7df7d1
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.html
@@ -0,0 +1,22 @@
+<!--/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/-->
+<ace-editor [(text)]="text" [mode]="'javascript'" [autoUpdateContent]="true"
+[durationBeforeCallback]="1000" (textChanged)="textChanged($event)" [theme]="'tomorrow_night_bright'" #editor style="height:500px;">
+</ace-editor>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.spec.ts
new file mode 100644
index 000000000..09dcdbd37
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.spec.ts
@@ -0,0 +1,44 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DictionaryEditorComponent } from './dictionary-editor.component';
+
+describe('DictionaryEditorComponent', () => {
+ let component: DictionaryEditorComponent;
+ let fixture: ComponentFixture<DictionaryEditorComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ DictionaryEditorComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DictionaryEditorComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts
new file mode 100644
index 000000000..92b27c24c
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts
@@ -0,0 +1,38 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-dictionary-editor',
+ templateUrl: './dictionary-editor.component.html',
+ styleUrls: ['./dictionary-editor.component.css']
+})
+export class DictionaryEditorComponent implements OnInit {
+ constructor() {
+ }
+
+ ngOnInit() {
+ }
+
+ textChanged(event) {
+ console.log(event);
+ }
+}
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.css
new file mode 100644
index 000000000..f263c0086
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.css
@@ -0,0 +1,19 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/ \ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html
new file mode 100644
index 000000000..bea6081c0
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html
@@ -0,0 +1,91 @@
+<!--/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/-->
+<div class="card creat-card col-11">
+ <div class="single-line-model">
+ <label class="label-name">Name</label>
+ <div class="label-input">
+ <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> -->
+ </div>
+
+ <!-- <div class="single-line-model">
+ <label class="label-name">Version <span>*</span></label>
+ <div class="label-input">
+ <input type="input" [readOnly]="!packageNameAndVersionEnables" [(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">Entry Schema</label>
+ <div class="label-input">
+ <input type="input" [(ngModel)]="metaDataTab.entrySchema" placeholder="Entry Schema">
+ </div>
+ </div>
+ <div class="single-line-model">
+ <label class="label-name">Data Type</label>
+ <div class="label-input">
+ <input type="input" [(ngModel)]="metaDataTab.dataType" placeholder="Data Type">
+ </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">
+ </div>
+ </div>
+ <div class="single-line-model">
+ <label class="label-name">Required</label>
+ <div class="label-input">
+ <input type="input" [(ngModel)]="metaDataTab.updatedBy" placeholder="required">
+ </div>
+ </div>
+ <div class="single-line-model">
+ <label class="label-name">Library Instance</label>
+ <div class="label-input">
+ <input type="input" [(ngModel)]="metaDataTab.libraryInstance" placeholder="Library Instance">
+ </div>
+ </div>
+ <div class="single-line-model">
+ <label class="label-name">Derived From</label>
+ <div class="label-input">
+ <input type="input" [(ngModel)]="metaDataTab.derivedFrom" placeholder="Derived From">
+ </div>
+ </div>
+
+ <div class="single-line-model">
+ <label class="label-name">Tags</label>
+ <div class="label-input">
+ <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 *ngFor="let tag of tags" class="single-tage">{{tag}} <i (click)="removeTag(tag)"
+ class="fa fa-times-circle"></i></span>
+ </div>
+ </div>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.spec.ts
new file mode 100644
index 000000000..ce9335ff9
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.spec.ts
@@ -0,0 +1,44 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DictionaryMetadataComponent } from './dictionary-metadata.component';
+
+describe('DictionaryMetadataComponent', () => {
+ let component: DictionaryMetadataComponent;
+ let fixture: ComponentFixture<DictionaryMetadataComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ DictionaryMetadataComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DictionaryMetadataComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts
new file mode 100644
index 000000000..d5c4a109b
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts
@@ -0,0 +1,78 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { DictionaryModel } from '../../model/dictionary.model';
+import { DictionaryCreationService } from '../dictionary-creation.service';
+import { DictionaryCreationStore } from '../dictionary-creation.store';
+import { MetaData } from '../../model/metaData.model';
+
+@Component({
+ selector: 'app-dictionary-metadata',
+ templateUrl: './dictionary-metadata.component.html',
+ styleUrls: ['./dictionary-metadata.component.css']
+})
+export class DictionaryMetadataComponent implements OnInit {
+ packageNameAndVersionEnables = true;
+ counter = 0;
+ tags = new Set<string>();
+ private metaDataTab: MetaData = new MetaData();
+ private errorMessage: string;
+
+ constructor(
+ private route: ActivatedRoute,
+ private dictionaryCreationService: DictionaryCreationService,
+ private dictionaryCreationStore: DictionaryCreationStore
+ ) {}
+
+ ngOnInit() {
+ this.dictionaryCreationStore.state$.subscribe(element => {
+ if (element && element.metaData) {
+ this.metaDataTab.name = element.metaData.name;
+ this.metaDataTab.description = element.metaData.description;
+ this.metaDataTab.dataType = element.metaData.dataType;
+ this.metaDataTab.tags = element.metaData.tags;
+ this.metaDataTab.entrySchema = element.metaData.entrySchema;
+ this.metaDataTab.required = element.metaData.required;
+ this.metaDataTab.libraryInstance = element.metaData.libraryInstance;
+ this.metaDataTab.derivedFrom = element.metaData.derivedFrom;
+ console.log(element);
+ }
+ });
+ console.log(this.metaDataTab.name);
+ }
+
+ removeTag(value) {
+ 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);
+ }
+ }
+
+ saveMetaDataToStore() {
+ this.dictionaryCreationStore.changeMetaData(this.metaDataTab);
+ }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.css
new file mode 100644
index 000000000..f02bd233d
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.css
@@ -0,0 +1,37 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/
+.edit-button{
+ color:white;
+ background:#1B3E6F;
+ margin-right: 60px;
+ border: none;
+ width: 80px;
+ height: 20px;
+ margin-top: 25px;
+ font-size: 10px;
+ padding-left:5px;
+ padding-top: 3px;
+ }
+ .ed{
+ justify-content: space-between;
+ }
+ .single-line-model{
+ margin:20px;
+ } \ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html
new file mode 100644
index 000000000..bf183216d
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html
@@ -0,0 +1,122 @@
+<!--/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/-->
+<app-header></app-header>
+
+<div class="new-wrapper">
+ <div class="container-fluid main-container">
+ <header class="page-title">
+ <div class="row">
+ <h2 class="col m-0 pb-0">
+ <ul class="breadcrumb-header">
+ <li><a routerLink="/resource-dictionary">Resource Dictionary</a></li>
+ <i class="fa fa-angle-right ml-2 mr-2"></i>
+ <li>Dictionary Name</li>
+ </ul>
+ </h2>
+ </div>
+ </header>
+ <div class="container-fluid body-container">
+ <div class="container card creat-card col-11">
+ <div class="single-line-model customKeyTitle">
+ <h5 class="label-name w-100 ">
+ Dictionary Name
+ </h5>
+ <!-- <label class="label-name"></label> -->
+ <span>Last modified {{createDate}} by me</span>
+ </div>
+ </div>
+ </div>
+ <div class="container-fluid body-container">
+ <div class="container">
+ <div class="creat-action-container">
+ <a class="action-button" (click)="saveDictionaryToStore()">
+ <i class="icon-save-sm" aria-hidden="true"></i>
+ <span>Save</span>
+ </a>
+ <a href="#" class="action-button" (click)="goBackToDashBorad()">
+ <i class="icon-discard-sm" aria-hidden="true"></i>
+ <span>Discard Changes</span>
+ </a>
+ <a href="#" class="action-button">
+ <i class="icon-clone-sm" aria-hidden="true"></i>
+ <span>Clone</span>
+ </a>
+ <a href="#" class="action-button delete">
+ <i class="icon-delete-sm" aria-hidden="true"></i>
+ <span>Delete</span>
+ </a>
+ </div>
+ <nav class="row">
+ <!--Nav Tabs-->
+ <div class="col">
+ <div class="nav nav-tabs ed" 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>
+ <a class="edit-button" id="nav-editor-tab" data-toggle="tab" href="#nav-editor"
+ role="tab" aria-controls="nav-editor" aria-selected="false">EDITOR MODE</a>
+
+ </div>
+ </div>
+ </nav>
+ <div>
+ <div class="row mt-4">
+ <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">
+ <app-dictionary-metadata></app-dictionary-metadata>
+ <nav class="row">
+ <!--Nav Tabs-->
+ <div class="col">
+ <div class="nav nav-tabs " id="nav-tab" role="tablist">
+ <a class="nav-item nav-link active" id="nav-source-tab" data-toggle="tab"
+ href="#nav-source" role="tab" aria-controls="nav-source" aria-selected="false"
+ >SOURCES</a>
+ </div>
+ </div>
+ </nav>
+ <div class="row mt-4">
+ <div class="col">
+ <div class="tab-content" id="nav-tabContent">
+ <div class="tab-pane fade show active" id="nav-source" role="tabpanel"
+ aria-labelledby="nav-source-tab">
+ <app-sources-template></app-sources-template>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="tab-pane fade col-11" id="nav-editor" role="tabpanel"
+ aria-labelledby="nav-editor-tab">
+ <div class="card creat-card">
+ <div class="editor-container">
+ <app-dictionary-editor></app-dictionary-editor>
+ </div></div>
+ </div>
+ </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/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.spec.ts
new file mode 100644
index 000000000..b1e6b6d24
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.spec.ts
@@ -0,0 +1,44 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResourceDictionaryCreationComponent } from './resource-dictionary-creation.component';
+
+describe('ResourceDictionaryCreationComponent', () => {
+ let component: ResourceDictionaryCreationComponent;
+ let fixture: ComponentFixture<ResourceDictionaryCreationComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ResourceDictionaryCreationComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ResourceDictionaryCreationComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts
new file mode 100644
index 000000000..1a3484bae
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts
@@ -0,0 +1,76 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Router } from '@angular/router';
+import { DictionaryCreationStore } from './dictionary-creation.store';
+import { DictionaryModel } from '../model/dictionary.model';
+import { Definition } from '../model/definition.model';
+import { DictionaryMetadataComponent } from './dictionary-metadata/dictionary-metadata.component';
+import { SourcesTemplateComponent } from './sources-template/sources-template.component';
+
+@Component({
+ selector: 'app-resource-dictionary-creation',
+ templateUrl: './resource-dictionary-creation.component.html',
+ styleUrls: ['./resource-dictionary-creation.component.css']
+})
+export class ResourceDictionaryCreationComponent implements OnInit {
+
+ constructor(private router: Router, private dictionaryCreationStore: DictionaryCreationStore) {
+ }
+
+ modes: object[] = [
+ {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'},
+ {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}
+ ];
+
+ private metaDataTab: DictionaryModel = new DictionaryModel();
+ private definition: Definition = new Definition();
+
+ @ViewChild(DictionaryMetadataComponent, {static: false})
+ private metadataTabComponent: DictionaryMetadataComponent;
+
+ @ViewChild(SourcesTemplateComponent, {static: false})
+ private sourcesTemplateComponent: SourcesTemplateComponent;
+
+ @ViewChild('nameit', {static: true})
+ private elementRef: ElementRef;
+
+ ngOnInit() {
+ this.elementRef.nativeElement.focus();
+ // this.elementRef2.nativeElement.focus();
+ }
+
+ saveDictionaryToStore() {
+ this.dictionaryCreationStore.getSources();
+ this.dictionaryCreationStore.state$.subscribe(dd => {
+ console.log(dd);
+ });
+ }
+
+ test() {
+ this.metadataTabComponent.saveMetaDataToStore();
+ this.sourcesTemplateComponent.saveSorcesDataToStore();
+ }
+
+ goBackToDashBorad() {
+ this.router.navigate(['/resource-dictionary']);
+ }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.css
new file mode 100644
index 000000000..7799d915f
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.css
@@ -0,0 +1,208 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/
+.source{
+ left: 20px;
+ width: 72%;
+}
+.source1{
+ width: 25%;
+ background-color:#F4F9FE;
+}
+h5{
+ padding-top: 10px;
+ padding-left: 10px;
+ background-color:white;
+ height: 40px;
+ width: 100%;
+}
+.mat-form-field + .mat-form-field {
+ margin-left: 8px;
+}
+mat-expansion-panel-header{
+ background-color:#E0E8F2;
+}
+mat-panel-title{
+ color:#1B3E6F;
+}
+mat-expansion-panel{
+ border-radius: 0px;
+ border-left: none;
+}
+.example-list .card{
+ margin-bottom: 10px !important;
+}
+.expansion-panel{
+ border: none;
+ background: white;
+ border-radius: 0px;
+ overflow: hidden;
+ display: block;
+ width: 100%;
+ color:#1B3E6F;
+ }
+.example-container {
+ width: 230px;
+ max-width: 100%;
+ margin: 10px 10px 15px 0;
+ display: inline-block;
+ vertical-align: top;
+ border-radius: 2px;
+ height: 260px;
+ background-color:#F4F9FE;
+ }
+ .example-container2 {
+ width: 630px;
+ max-width: 100%;
+ margin: 10px 10px 5px 0;
+ display: inline-block;
+ vertical-align: top;
+ border-radius: 2px;
+ height: 300px;
+ background-color:#F4F9FE;
+ }
+
+ .example-list {
+ min-height: 12px;
+ border-radius: 0px;
+ overflow: hidden;
+ display: block;
+ margin: 5px;
+ overflow-y:scroll;
+ overflow-x:hidden;
+ margin-left: 15px;
+ width: 195px;
+ margin-top: 15px;
+ }
+
+ .example-list1 {
+ min-height: 12px;
+ border-radius: 0px;
+ overflow: hidden;
+ display: block;
+ margin: 5px;
+ overflow-y:hidden;
+ overflow-x:hidden;
+ }
+
+ .checkbox{
+ margin-left: 11%;
+ }
+ .example-box {
+ padding: 2px 1px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: left;
+ box-sizing: border-box;
+ cursor: move;
+ font-size: 14px;
+
+ }
+ .example-box1 {
+ padding: 1px 1px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: left;
+ box-sizing: border-box;
+ cursor: move;
+ font-size: 14px;
+ border-radius: 0px !important;
+ }
+
+ .cdk-drag-preview {
+ box-sizing: border-box;
+ border-radius: 4px;
+ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+ 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+ 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+ }
+
+ .cdk-drag-placeholder {
+ opacity: 0;
+ }
+
+ .cdk-drag-animating {
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+ }
+
+ .example-box:last-child {
+ border: none;
+ }
+
+ .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+ }
+
+.searchText{
+ width: 180px;
+ /* border-top: solid 2px #F4F9FE; */
+ border: 0px;
+ color: #1B3E6F;
+ font-size: 13px;
+ margin-top: 2px;
+}
+.searchBox{
+ position: relative;
+ top: 0%;
+ right: 0%;
+ height: 35px;
+ border-top: solid 2px #F4F9FE;
+ width: 100%;
+ margin-left:0px;
+ background-color:white;
+}
+
+.searchButton1{
+ float: left;
+ padding-left: 0 !important;
+ height: 30px;
+ width:30px;
+ background: url(src/assets/img/icon-search.svg) center center no-repeat;
+ border: 0 !important;
+ margin-right:0px;
+}
+.action-button1{
+ margin-left:50px;
+ padding: 1px 6px;
+ box-shadow: none;
+ color:white;
+ font-size: 14px;
+ height: 25px;
+ background-color:#007bff;
+ border-radius:16px;
+ border:solid 0.5px #ededed;
+}
+.footer{
+ margin: 1px 0px;
+}
+.delete{
+ color: red;
+ font-size: 14px;
+ margin: 2px;
+}
+.footer input{
+ margin: 6px 0px 1px 5px;
+}
+.select-button{
+ color: #007bff;
+ font-size: 14px;
+ margin: 2px;
+} \ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html
new file mode 100644
index 000000000..b274ce95d
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html
@@ -0,0 +1,85 @@
+<!--/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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=========================================================
+*/-->
+<div class="col-11">
+ <div class= "row ">
+ <div class="card creat-card source1">
+ <h5 class="label-name"> Sources Options</h5>
+ <div class="searchBox row"><i class="searchButton1 col-1" aria-hidden="true"></i>
+ <input class="searchText col-8" [(ngModel)]="searchText" type="input" placeholder="filter sources">
+ </div>
+
+ <div class="example-container">
+ <div
+ cdkDropList
+ #todoList="cdkDropList"
+ [cdkDropListData]="option"
+ [cdkDropListConnectedTo]="[doneList]"
+ class="example-list"
+ (cdkDropListDropped)="drop($event)">
+ <div class="example-box card creat-card" *ngFor="let item of option| search :searchText" cdkDrag>
+ <input type="checkbox" class="checkbox" [(ngModel)]="checked" (change)="onChange(item, $event.target.checked)">
+ {{item.name}}
+ </div>
+
+ </div>
+
+ </div>
+ <div class="footer row">
+ <a class="select-button col-sm-05">Select all</a>
+ <button class="action-button1 col-sm-04" >Add to list</button>
+ </div>
+ </div>
+
+ <div class="card creat-card source">
+ <h5 class="label-name">Sources List</h5>
+ <div class="example-container2 card creat-card">
+ <div
+ cdkDropList
+ #doneList="cdkDropList"
+ [cdkDropListData]="sourcesOptions"
+ [cdkDropListConnectedTo]="[todoList]"
+ class="example-list1"
+ (cdkDropListDropped)="drop($event)">
+
+ <div class="example-box1" *ngFor="let item of sourcesOptions" cdkDrag>
+ <input type="checkbox" value="item.name">
+ <mat-expansion-panel class="expansion-panel">
+ <mat-expansion-panel-header [collapsedHeight]="'23px'" [expandedHeight]="'23px'">
+ <mat-panel-title>
+ {{item.name}}
+ </mat-panel-title>
+ </mat-expansion-panel-header>
+ <br>
+ <ace-editor [(text)]=item.value [mode]="'javascript'" [autoUpdateContent]="true"
+ [durationBeforeCallback]="1000" (textChanged)="textChanged($event,item)" [theme]="'tomorrow_night_bright'" #editor style="height:300px;">
+ </ace-editor>
+ </mat-expansion-panel>
+ </div>
+
+ </div>
+
+ </div>
+ <div>
+ <a type="submit" class="delete">Delete</a>
+ </div>
+ </div>
+</div>
+</div>
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.spec.ts
new file mode 100644
index 000000000..e9bd4ff43
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.spec.ts
@@ -0,0 +1,44 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SourcesTemplateComponent } from './sources-template.component';
+
+describe('SourcesTemplateComponent', () => {
+ let component: SourcesTemplateComponent;
+ let fixture: ComponentFixture<SourcesTemplateComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ SourcesTemplateComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SourcesTemplateComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts
new file mode 100644
index 000000000..4a4f215cd
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts
@@ -0,0 +1,109 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { Component, OnInit} from '@angular/core';
+import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { SourcesStore } from './sources.store';
+
+@Component({
+ selector: 'app-sources-template',
+ templateUrl: './sources-template.component.html',
+ styleUrls: ['./sources-template.component.css']
+})
+export class SourcesTemplateComponent implements OnInit {
+ private searchQuery = '';
+ lang = 'json';
+ sources = [];
+ option = [];
+ sourcesOptions = [];
+ textValue: any;
+ selectItem: boolean;
+ ddSource = [];
+ checked: boolean;
+ selectedArray = [];
+ constructor(private sourcesStore: SourcesStore) {
+ this.sourcesStore.state$.subscribe(sources => {
+ this.sources = sources.sources;
+ for (const key in this.sources) {
+ if (key) {
+ const sourceObj = { name: key, value: JSON.stringify(this.sources[key] )};
+ this.option.push(sourceObj);
+ }
+ }
+ });
+ }
+
+ ngOnInit() {
+ this.sourcesStore.getAllSources();
+ }
+
+ saveSorcesDataToStore() {
+ this.sourcesStore.saveSources(this.ddSource);
+ }
+
+ drop(event: CdkDragDrop<string[]>) {
+ this.ddSource = [];
+ if (event.previousContainer === event.container) {
+ moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+ } else {
+ transferArrayItem(event.previousContainer.data,
+ event.container.data,
+ event.previousIndex,
+ event.currentIndex);
+ }
+
+ for (const key2 in this.sources) {
+ if (key2) {
+ const originalSources = this.sourcesOptions;
+ for (const key of originalSources) {
+ if (key.name === key2) {
+ const obj = `{${key.name}: ${key.value}}`;
+ this.ddSource.push(obj);
+ }
+ }
+ }
+ }
+ }
+
+ searchDictionary(event: any) {
+ this.searchQuery = event.target.value;
+ this.searchQuery = this.searchQuery.trim();
+ console.log(this.searchQuery);
+ // this.dictionaryStore.search(this.searchQuery);
+ }
+
+ onChange(item: string, isChecked: boolean) {
+ if (isChecked) {
+ this.selectedArray.push(item);
+ }
+ }
+
+ textChanged(event, item) {
+ const editedData = JSON.parse(event);
+ const originalSources = this.sources;
+ for (const key in originalSources) {
+ if (key === item.name) {
+ this.sources[key] = editedData;
+ }
+ }
+ this.option = [];
+ this.sourcesStore.changeSources(this.sources);
+ }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources.store.ts
new file mode 100644
index 000000000..7da8f03d3
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources.store.ts
@@ -0,0 +1,60 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file 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 { Sources } from '../../model/sources.model';
+import { Store } from 'src/app/common/core/stores/Store';
+import { Injectable } from '@angular/core';
+import { DictionaryCreationService } from '../dictionary-creation.service';
+import { Definition } from '../../model/definition.model';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class SourcesStore extends Store<Sources> {
+ constructor(private dictionaryCreationService: DictionaryCreationService) {
+ super(new Sources());
+ }
+
+ public getAllSources() {
+ console.log('getting all sources...');
+ this.getSources();
+ }
+
+ protected getSources() {
+ this.dictionaryCreationService.getSources()
+ .subscribe((sou) => {
+ console.log(sou);
+ this.setState({
+ ...this.state,
+ sources: sou
+ });
+ });
+ }
+
+ public changeSources(sou) {
+ this.setState({
+ ...this.state,
+ sources: sou
+ });
+ }
+
+ public saveSources(sources) {
+ console.log(sources);
+ }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html
index 1cedeeb09..b6fbf5939 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html
@@ -28,7 +28,7 @@
<div class="card-footer row">
<div class="col text-center">
<a routerLink="/resource-dictionary/createDictionary" role="button" aria-pressed="true"
- class="btn-create-package float"><i class="icon-create-white" aria-hidden="true"></i>Create Package
+ class="btn-create-package float"><i class="icon-create-white" aria-hidden="true"></i>Create Dictionary
</a>
<br/>
<a href="#" role="button" aria-pressed="true" class="btn-import-package float mb-3"><i class="icon-import-blue" aria-hidden="true"></i>Import Package
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-routing.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-routing.module.ts
index eb29c4c87..04b66c7bd 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-routing.module.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-routing.module.ts
@@ -17,15 +17,19 @@
* limitations under the License.
* ============LICENSE_END=========================================================
*/
-
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ResourceDictionaryDashboardComponent } from './resource-dictionary-dashboard/resource-dictionary-dashboard.component';
+import { ResourceDictionaryCreationComponent } from './resource-dictionary-creation/resource-dictionary-creation.component';
const routes: Routes = [
{
path: '',
component: ResourceDictionaryDashboardComponent
+ },
+ {
+ path: 'createDictionary',
+ component: ResourceDictionaryCreationComponent
}
];
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary.module.ts
index 5bd6710f8..3f0f89b0d 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary.module.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary.module.ts
@@ -36,6 +36,13 @@ import { SortDictionaryComponent } from './resource-dictionary-dashboard/sort-di
import { DictionaryPaginationComponent } from './resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component';
import { SharedModulesModule } from '../../shared-modules/shared-modules.module';
import { DictionaryListComponent } from './resource-dictionary-dashboard/dictionary-list/dictionary-list.component';
+import { SearchPipe } from 'src/app/common/core/pipes/search.pipe';
+import { ResourceDictionaryCreationComponent } from './resource-dictionary-creation/resource-dictionary-creation.component';
+import { DictionaryMetadataComponent } from './resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component';
+import { SourcesTemplateComponent } from './resource-dictionary-creation/sources-template/sources-template.component';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { MatExpansionModule } from '@angular/material';
+import { DictionaryEditorComponent } from './resource-dictionary-creation/dictionary-editor/dictionary-editor.component';
@NgModule({
declarations: [
@@ -46,6 +53,11 @@ import { DictionaryListComponent } from './resource-dictionary-dashboard/diction
SortDictionaryComponent,
DictionaryPaginationComponent,
DictionaryListComponent,
+ ResourceDictionaryCreationComponent,
+ DictionaryMetadataComponent,
+ SourcesTemplateComponent,
+ SearchPipe,
+ DictionaryEditorComponent,
],
imports: [
CommonModule,
@@ -57,6 +69,8 @@ import { DictionaryListComponent } from './resource-dictionary-dashboard/diction
NgxFileDropModule,
AceEditorModule,
DataTablesModule,
+ DragDropModule,
+ MatExpansionModule,
]
})
export class ResourceDictionaryModule { }