change template&mapping screen

add "back to temmplate list" button
fix mapping table

Issue-ID: CCSDK-2323
Signed-off-by: AhmedEldeeb50 <ahmed.eldeeb.ext@orange.com>
Change-Id: Ifdabb22e550c5b5f950c21b4c657589df980e459

8 files changed, 104 insertions, 36 deletions

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 9858fd580..e18923154 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
@@ -31,7 +31,7 @@ export class ImportsTabComponent implements OnInit {
         this.files = files;
         for (const droppedFile of files) {
             // Is it a file? & Not added before
-            if (droppedFile.fileEntry.isFile && !this.fileNames.has(droppedFile.fileEntry.name)) {
+            if (droppedFile.fileEntry.isFile) {
                 const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
                 this.uploadedFiles.push(fileEntry);
                 console.log(fileEntry.name);
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 a85ccf146..63a734726 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
@@ -35,7 +35,7 @@ export class ScriptsTabComponent implements OnInit {
         this.files = files;
         for (const droppedFile of files) {
             // Is it a file & Not added before ?
-            if (droppedFile.fileEntry.isFile && !this.fileNames.has(droppedFile.fileEntry.name)) {
+            if (droppedFile.fileEntry.isFile) {
                 const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
                 this.uploadedFiles.push(fileEntry);
                 console.log(fileEntry.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.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 164f0ac73..fdf10e0a9 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
@@ -1,7 +1,8 @@
 
 <div class="row template-mapping-action">
     <div class="col">
-        <h6 class="create-title">Create Template</h6>
+        <h6 [hidden]="edit" class="create-title">Create Template</h6>
+        <button (click)="closeCreationForm()" [hidden]="!edit" class="btn btn-outline-secondary"><i class="fa fa-chevron-left mr-2"></i>Template List</button>
     </div>
     <div class="col text-right">
         <button (click)="cancel()" [disabled]="fileName?.length <=0" class="btn btn-outline-secondary">Cancel</button>
@@ -116,7 +117,7 @@
                     </div>
                 </div>
                 <div id="mapping-table" [hidden]="resourceDictionaryRes?.length == 0" class="mx-4 my-2">
-                    <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
+                    <table datatable [dtOptions]="initDtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
                         <thead>
                             <tr>
                                 <th>Required</th>
@@ -164,7 +165,7 @@
                     </table>
                 </div>
 
-                <div id="mapping-table" [hidden]="mappingRes?.length == 0" class="mx-4 my-2">
+                <div id="mapping-table-res" [hidden]="mappingRes?.length == 0" class="mx-4 my-2">
                     <table datatable [dtOptions]="dtOptions" [dtTrigger]="resTableDtTrigger" class="row-border hover">
                         <thead>
                             <tr>
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 5129b38d9..7b777696f 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
@@ -28,6 +28,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     templateInfo = new TemplateInfo();
     variables: string[] = [];
     dtOptions: DataTables.Settings = {};
+    initDtOptions: DataTables.Settings = {};
     // We use this trigger because fetching the list of persons can be quite long,
     // thus we ensure the data is fetched before rendering
     dtTrigger = new Subject();
@@ -62,7 +63,6 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
             console.log('URL contains Id');
             this.sharedService.enableEdit();
         }
-
         this.templateStore.state$.subscribe(templateInfo => {
             // init Template&mapping vars
             console.log('Oninit');
@@ -108,12 +108,18 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
             }
         });
 
-        this.dtOptions = {
+        this.initDtOptions = {
             pagingType: 'full_numbers',
             pageLength: 25,
             destroy: true,
             retrieve: true,
         };
+        this.dtOptions = {
+            pagingType: 'full_numbers',
+            pageLength: 25,
+            // destroy: true,
+            // retrieve: true,
+        };
     }
 
     getFileExtension() {
@@ -164,7 +170,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         this.files = files;
         for (const droppedFile of files) {
             // Is it a file? & Not added before
-            if (droppedFile.fileEntry.isFile && !this.fileNames.has(droppedFile.fileEntry.name)) {
+            if (droppedFile.fileEntry.isFile) {
                 const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
                 this.uploadedFiles.push(fileEntry);
                 this.fileNames.add(fileEntry.name);
@@ -191,6 +197,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
                     this.variables = fileReader.result.toString().split(',');
                     console.log(this.variables);
                     this.getMappingTableFromTemplate(null);
+
                 };
                 fileReader.readAsText(file);
             });
@@ -285,7 +292,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         this.mappingRes = [];
         this.currentMapping = {};
         this.currentTemplate = {};
-        this.closeCreationForm();
+        //   this.closeCreationForm();
     }
     saveToStore() {
         if (this.fileName) {
@@ -304,11 +311,11 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
                     this.resourceDictionaryRes = [];
                 }
                 // Save Template to store
-                if (this.templateFileContent) {
-                    this.packageCreationStore.addTemplate('Templates/' + this.fileName + '-template' + this.getFileExtension(),
-                        this.templateFileContent);
-                    this.templateFileContent = '';
-                }
+                // 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');
                 this.closeCreationForm();
@@ -350,17 +357,19 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     }
 
     rerender(): void {
-        if (this.dtElement.dtInstance) {
-            console.log('rerender');
-            this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
-                dtInstance.destroy();
-                this.dtElement.dtOptions = this.dtOptions;
-                this.dtElement.dtTrigger.next();
-                dtInstance.draw();
-            });
-        } else {
-            this.dtTrigger.next();
-        }
+        this.dtTrigger.next();
+
+        // if (this.dtElement.dtInstance) {
+        //     console.log('rerender');
+        //     this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
+        //         dtInstance.destroy();
+        //         this.dtElement.dtOptions = this.dtOptions;
+        //         this.dtElement.dtTrigger.next();
+        //         dtInstance.draw();
+        //     });
+        // } else {
+        //     this.dtTrigger.next();
+        // }
     }
 
     ngOnDestroy(): void {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.css
index 054b5686e..f330b2f83 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.css
@@ -1,3 +1,23 @@
 .template-mapping-list {
     cursor: pointer;
+}
+
+a.accordion-delete i {
+    color: red;
+}
+
+a.accordion-delete i:hover {
+    color: #007bff;
+    cursor: pointer;
+    transition-duration: .5s;
+    /* for Safari & Chrome */
+    -webkit-transition-duration: .5s;
+}
+
+a.accordion-delete {
+    margin-top: 0;
+}
+
+.template-mapping-list p{
+    display: contents;
 }
\ 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-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 6ae5c1122..3a7b0225e 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,11 +4,11 @@
 
 
 <div class="template-mapping-accordion" [hidden]="templateAndMappingMap?.size <= 0">
-    <div class="accordion" id="listAccordion">
+    <div class="" id="listAccordion">
         <div class="card">
             <div class="card-header" id="headingThree">
                 <h5 class="mb-0 d-flex justify-content-between">
-                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseThree"
+                    <button class="btn" data-toggle="collapse" data-target="#collapseThree"
                         aria-expanded="true" aria-controls="collapseThree">
                         Template and Mapping List
                     </button>
@@ -16,20 +16,21 @@
                 </h5>
             </div>
 
-            <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#listAccordion">
+            <div id="collapseThree" class="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"
-                                [ngClass]="{'active':currentFile == file}">{{file}}
+                            <a class="template-mapping-list" [ngClass]="{'active':currentFile == file}">
+                                <p (click)="setSourceCodeEditor(file)">{{file}}</p>
                                 <span *ngIf="getValue(file).isMapping">Mapping</span>
                                 <span *ngIf="getValue(file).isTemplate">Template</span>
-                                <button type="button" class="deleteTemplate" title="Delete Template">
-                                    <i class="icon-delete-sm"></i>
-                                </button>
+
+                                <a data-toggle="modal" (click)="initDelete(file)" data-target="#templateDeletionModal"
+                                    class="accordion-delete deleteTemplate" title="Delete Template"><i
+                                        class="icon-delete-sm"></i></a>
                             </a>
-                            
+
                         </div>
                     </div>
                 </div>
@@ -37,4 +38,28 @@
         </div>
 
     </div>
+</div>
+
+<!-- Delete Modal -->
+<div class="modal fade" id="templateDeletionModal" tabindex="-1" role="dialog"
+    aria-labelledby="templateDeletionModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="templateDeletionModalLabel">Delete Script</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 Template file
+                    <span>{{fileToDelete}}</span>?</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                <button type="button" (click)="condifrmDelete()" data-dismiss="modal"
+                    class="btn btn-primary">Delete</button>
+            </div>
+        </div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-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 338c8f7cd..2e4d8c6e3 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
@@ -21,6 +21,7 @@ export class TemplMappListingComponent implements OnInit {
     isCreate = true;
     currentFile: string;
     edit = false;
+    fileToDelete: any = {};
 
     constructor(
         private packageCreationStore: PackageCreationStore,
@@ -122,5 +123,17 @@ export class TemplMappListingComponent implements OnInit {
     getValue(file: string) {
         return this.templateAndMappingMap.get(file);
     }
+    initDelete(file) {
+        console.log(file);
+        this.fileToDelete = file;
+    }
+    condifrmDelete() {
+        console.log(this.templateAndMappingMap);
+        this.templateAndMappingMap.delete(this.fileToDelete);
+        if (this.templateAndMappingMap.size <= 0) {
+            this.openCreationView();
+        }
+
+    }
 
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html
index 80df7c637..f4f305ee9 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html
@@ -1,5 +1,5 @@
-<div *ngIf="!listView">
-    <app-templ-mapp-listing (showCreationViewParentNotification)="openCreationView($event)"
+<div [hidden]="listView">
+    <app-templ-mapp-listing [hidden]="!creationView" (showCreationViewParentNotification)="openCreationView($event)"
         (showFullView)="openListView($event)">
     </app-templ-mapp-listing>
 </div>