add delete button in template&mapping view

Issue-ID: CCSDK-2448

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

5 files changed, 75 insertions, 1 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/shared-service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/shared-service.ts
index f2b73016c..57c2bcbfa 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/shared-service.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/shared-service.ts
@@ -9,6 +9,7 @@ export class SharedService {
 
     // based on edit Mode, edit=false
     mode = new BehaviorSubject(false);
+    list = new BehaviorSubject('');
     constructor() {
     }
 
@@ -22,4 +23,12 @@ export class SharedService {
         this.mode.next(false);
     }
 
+    // from file from tempplate&mapping list
+    deleteFromList(filename) {
+        this.list.next(filename);
+    }
+    listAction(): Observable<string> {
+        return this.list.asObservable();
+    }
+
 }
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 8acdd6546..cdc73f1b9 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
@@ -5,7 +5,13 @@
                 class="fa fa-chevron-left mr-2"></i>Template List</button>
     </div>
     <div class="col text-right">
-        <button (click)="cancel()" [hidden]="fileName?.length <=0" class="btn btn-outline-secondary">Clear</button>
+
+        <button data-toggle="modal" [hidden]="!edit" (click)="initDelete()" data-target="#templateDeletionModal2"
+            class="btn btn-outline-danger" title="Delete Template">Delete</button>
+
+
+        <button (click)="cancel()" [hidden]="fileName?.length <=0 || edit"
+            class="btn btn-outline-secondary">Clear</button>
         <button (click)="saveToStore()" [disabled]="fileName?.length <=0" class="btn btn-primary">Finish</button>
     </div>
 </div>
@@ -272,3 +278,27 @@
         </div>
     </div>
 </div>
+
+<!-- Delete Modal -->
+<div class="modal fade" id="templateDeletionModal2" tabindex="-1" role="dialog"
+    aria-labelledby="templateDeletionModal2Label" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="templateDeletionModal2Label">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)="confirmDelete()" data-dismiss="modal"
+                    class="btn btn-primary">Delete</button>
+            </div>
+        </div>
+    </div>
+</div>
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 334b3f484..f6bae0600 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
@@ -47,6 +47,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     currentTemplate: any;
     currentMapping: any;
     edit = false;
+    fileToDelete: any = {};
 
     constructor(
         private packageCreationStore: PackageCreationStore,
@@ -63,6 +64,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
             console.log('Oninit');
             console.log(templateInfo);
             this.templateInfo = templateInfo;
+            this.fileToDelete = templateInfo.fileName;
             this.fileName = templateInfo.fileName.split('/')[1];
             if (this.fileName) {
                 this.fileName = this.fileName.split('-')[0];
@@ -177,6 +179,22 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         this.uploadedFiles.splice(index, 1);
     }
 
+    initDelete(file) {
+    }
+    confirmDelete() {
+        // Delete from templates
+        this.sharedService.deleteFromList(this.fileName);
+        this.packageCreationStore.state.templates.files.delete(this.fileToDelete);
+        // Delete from Mapping
+        this.packageCreationStore.state.mapping.files.delete(this.fileToDelete);
+        if (
+            this.packageCreationStore.state.templates.files.size > 0 ||
+            this.packageCreationStore.state.mapping.files.size > 0
+        ) {
+            this.closeCreationForm();
+        }
+
+    }
     uploadFile() {
         this.dependancies.clear();
         this.dependanciesSource.clear();
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 f25dcb1be..c790422c1 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
@@ -61,6 +61,7 @@ export class TemplMappListingComponent implements OnInit {
                 console.log('hello there ');
                 console.log(this.templateAndMappingMap);
             }
+            this.deleteFromList();
         });
     }
 
@@ -77,6 +78,19 @@ export class TemplMappListingComponent implements OnInit {
 
     }
 
+    deleteFromList() {
+        this.sharedService.listAction().subscribe(res => {
+            console.log('response from actionList');
+            console.log(res);
+            if (res) {
+                this.templateAndMappingMap.delete(res);
+                if (this.templateAndMappingMap.size <= 0) {
+                    this.openCreationView();
+                }
+            }
+        });
+    }
+
     openCreationView() {
         this.showCreationViewParentNotification.emit('tell parent to open create views');
         console.log('disable edit mode');
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts
index 662d8d3f3..af6ced092 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts
@@ -27,6 +27,9 @@ export class TemplateMappingComponent implements OnInit {
             this.listView = false;
             console.log('URL contains Id');
             this.sharedService.enableEdit();
+            if (this.pakcageStore.state.mapping.files.size > 0 || this.pakcageStore.state.templates.files.size > 0) {
+                this.openListView();
+            }
         } else {
             console.log('Create mode');
             this.pakcageStore.clear();