#118 Add button to cancel all the remaining upload

ng2-components/ng2-alfresco-upload/i18n/en.json

@@ -2,7 +2,8 @@
   "FILE_UPLOAD": {
     "BUTTON": {
       "UPLOAD_FILE": "Upload file",
-      "UPLOAD_FOLDER": "Upload folder"
+      "UPLOAD_FOLDER": "Upload folder",
+      "CANCEL": "CANCEL"
     },
     "MESSAGES": {
       "COMPLETED": "uploads complete",

ng2-components/ng2-alfresco-upload/i18n/it.json

@@ -2,7 +2,8 @@
   "FILE_UPLOAD": {
     "BUTTON": {
       "UPLOAD_FILE": "Carica un file",
-      "UPLOAD_FOLDER": "Carica una cartella"
+      "UPLOAD_FOLDER": "Carica una cartella",
+      "CANCEL": "CANCELLA"
     },
     "MESSAGES": {
       "COMPLETED": "caricamenti completati",

ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.css

@@ -5,4 +5,34 @@
 
 .cursor {
     cursor: pointer;
+}
+
+.body-dialog-header {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    background-color: #f5f5f5;
+    border-bottom: solid 1px #eee;
+    height: 30px;
+    line-height: 30px;
+}
+
+.body-dialog-action {
+    -webkit-flex: 1 1 auto;
+    flex: 1 1 auto;
+    overflow: hidden;
+    padding: 0 18px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-wrap: break-word;
+}
+
+.body-dialog-cancel {
+    -webkit-flex: none;
+    flex: none;
+    display: inline;
+    padding-right: 13px;
+    text-align: right;
 }

ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.html

@@ -1,3 +1,8 @@
+<div [ngClass]="{hide:  isUploadCompleted()}" [ngClass]="{show:   !isUploadCompleted()}"
+     class="body-dialog-header">
+    <div class="body-dialog-action"></div>
+    <div class="body-dialog-cancel"><a href="#" (click)="cancelAllFiles()">{{'FILE_UPLOAD.BUTTON.CANCEL' | translate}}</a></div>
+</div>
 <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
     <tr>
         <th>{{'FILE_UPLOAD.FILE_INFO.NAME' | translate}}</th>

ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.ts

@@ -61,4 +61,30 @@ export class FileUploadingListComponent {
         });
         file[0].setAbort();
     }
+
+    /**
+     * Call the abort method for each file
+     */
+    cancelAllFiles() {
+        this.filesUploadingList.forEach((uploadingFileModel: FileModel) => {
+            uploadingFileModel.setAbort();
+        });
+    }
+
+    /**
+     * Verify if all the files are in state done or abort
+     * @returns {boolean} - false if there is a file in progress
+     */
+    isUploadCompleted() {
+        let isPending = false;
+        let isAllCompleted = true;
+        for (let i = 0; i < this.filesUploadingList.length && !isPending; i++) {
+            let uploadingFileModel = this.filesUploadingList[i];
+            if (!uploadingFileModel.done && !uploadingFileModel.abort) {
+                isPending = true;
+                isAllCompleted = false;
+            }
+        }
+        return isAllCompleted;
+    }
 }