-Delete uploaded files

-Show confirmation modal before delete any file

- disable import button until the user select a file

Issue-ID: CCSDK-2346

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

2 files changed, 49 insertions, 37 deletions

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) {