Package > Temp&Mapp: View

Issue-ID: CCSDK-2324

Signed-off-by: AhmedEldeeb50 <ahmed.eldeeb.ext@orange.com>
Change-Id: I39b3a84893d048a6186f6daf4195c20dbcdb98b9

10 files changed, 87 insertions, 38 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/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/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 ------');