Add package deletion button

Issue-ID: CCSDK-2483

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

3 files changed, 51 insertions, 13 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
index 18c9277eb..8e2ae5dbb 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
@@ -48,7 +48,7 @@
                         <span>Download</span>
                     </a>
 
-                    <a class="action-button delete">
+                    <a data-target="#removePackageModal" data-toggle="modal" class="action-button">
                         <i class="icon-delete-sm" aria-hidden="true"></i>
                         <span>Delete</span>
                     </a>
@@ -720,4 +720,28 @@
             </div>
         </div>
     </div>
+</div>
+
+
+<!-- Delete Modal -->
+<div class="modal fade" id="removePackageModal" tabindex="-1" role="dialog" aria-labelledby="removePackageModalLabel"
+    aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="removePackageModalLabel">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 this package?</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                <button type="button" (click)="deletePackage()" 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/configuration-dashboard/configuration-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
index 0ff8d952f..0e1d4cd11 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
@@ -36,6 +36,7 @@ export class ConfigurationDashboardComponent implements OnInit {
     zipFile: JSZip = new JSZip();
     filesData: any = [];
     folder: FolderNodeElement = new FolderNodeElement();
+    id: any;
 
     currentBlob = new Blob();
 
@@ -46,15 +47,14 @@ export class ConfigurationDashboardComponent implements OnInit {
         private packageCreationUtils: PackageCreationUtils,
         private router: Router,
         private designerStore: DesignerStore,
-        private designerService: DesignerService,
         private toastService: ToastrService
     ) {
     }
 
     ngOnInit() {
         this.elementRef.nativeElement.focus();
-        const id = this.route.snapshot.paramMap.get('id');
-        this.configurationDashboardService.getPagedPackages(id).subscribe(
+        this.id = this.route.snapshot.paramMap.get('id');
+        this.configurationDashboardService.getPagedPackages(this.id).subscribe(
             (bluePrintDetailModels) => {
                 if (bluePrintDetailModels) {
                     this.viewedPackage = bluePrintDetailModels[0];
@@ -62,8 +62,11 @@ export class ConfigurationDashboardComponent implements OnInit {
                     this.packageCreationStore.clear();
                 }
             });
-    }
 
+        if (this.route.snapshot.paramMap.has('id')) {
+            console.log('The id is equal to ' + this.route.snapshot.paramMap.get('id'));
+        }
+    }
 
     private downloadCBAPackage(bluePrintDetailModels: BluePrintDetailModel) {
         this.configurationDashboardService.downloadResource(
@@ -185,7 +188,15 @@ export class ConfigurationDashboardComponent implements OnInit {
             });
     }
 
-
+    deletePackage() {
+        this.configurationDashboardService.deletePackage(this.id).subscribe(res => {
+            console.log('Deleted');
+            console.log(res);
+            this.router.navigate(['/packages']);
+        }, err => {
+            console.log(err);
+        });
+    }
     create() {
         this.zipFile = new JSZip();
         FilesContent.getMapOfFilesNamesAndContent().forEach((value, key) => {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts
index 164d76601..c7f557121 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts
@@ -1,8 +1,8 @@
-import {Injectable} from '@angular/core';
-import {ApiService} from '../../../../common/core/services/api.typed.service';
-import {BlueprintURLs} from '../../../../common/constants/app-constants';
-import {Observable} from 'rxjs';
-import {BluePrintDetailModel} from '../model/BluePrint.detail.model';
+import { Injectable } from '@angular/core';
+import { ApiService } from '../../../../common/core/services/api.typed.service';
+import { BlueprintURLs } from '../../../../common/constants/app-constants';
+import { Observable } from 'rxjs';
+import { BluePrintDetailModel } from '../model/BluePrint.detail.model';
 
 
 @Injectable({
@@ -22,10 +22,13 @@ export class ConfigurationDashboardService {
     }
 
     public downloadResource(path: string) {
-        return this.api.getCustomized(BlueprintURLs.download + path, {responseType: 'blob'});
+        return this.api.getCustomized(BlueprintURLs.download + path, { responseType: 'blob' });
     }
 
     deployPost(body: any | null): Observable<any> {
-        return this.api.post(BlueprintURLs.deploy, body, {responseType: 'text'});
+        return this.api.post(BlueprintURLs.deploy, body, { responseType: 'text' });
+    }
+    deletePackage(id: string) {
+        return this.api.delete(BlueprintURLs.getOneBlueprint + '/' + id, { observe: 'response' });
     }
 }