[ADF-1358] Upload Dialog - Uploaded indicator should take in consideration cancelled files (#2197)

* indicate the number of files completed over cancelled ones

* changed test names

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

@@ -14,13 +14,23 @@
         <span
             class="upload-dialog__title"
             *ngIf="!uploadList.isUploadCompleted() && !uploadList.isUploadCancelled()">
-            {{ 'FILE_UPLOAD.MESSAGES.UPLOAD_PROGRESS' | translate: { completed: totalCompleted, total: filesUploadingList.length } }}
+            {{ 'FILE_UPLOAD.MESSAGES.UPLOAD_PROGRESS'
+                | translate: {
+                    completed: totalCompleted,
+                    total: filesUploadingList.length
+                }
+            }}
         </span>
 
         <span
             class="upload-dialog__title"
             *ngIf="uploadList.isUploadCompleted()">
-            {{ 'FILE_UPLOAD.MESSAGES.UPLOAD_COMPLETED' | translate: { completed: totalCompleted, total: filesUploadingList.length } }}
+            {{ 'FILE_UPLOAD.MESSAGES.UPLOAD_COMPLETED'
+                | translate: {
+                    completed: (totalCompleted - uploadList.uploadCancelledFiles.length),
+                    total: filesUploadingList.length
+                }
+            }}
         </span>
 
         <span
@@ -32,12 +42,12 @@
 
     <section
         class="upload-dialog__info"
-        *ngIf="uploadList.totalErrorFiles()">
+        *ngIf="uploadList.uploadErrorFiles.length">
         {{
-            (uploadList.totalErrorFiles() > 1
+            (uploadList.uploadErrorFiles.length > 1
                  ? 'FILE_UPLOAD.MESSAGES.UPLOAD_ERRORS'
                  : 'FILE_UPLOAD.MESSAGES.UPLOAD_ERROR')
-                 | translate: { total: uploadList.totalErrorFiles() }
+                 | translate: { total: uploadList.uploadErrorFiles.length }
         }}
     </section>
 

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

@@ -79,6 +79,8 @@ export class FileUploadingDialogComponent implements OnInit, OnDestroy {
      * Dismiss dialog
      */
     close(): void {
+        this.totalCompleted = 0;
+        this.filesUploadingList = [];
         this.isDialogActive = false;
         this.isDialogMinimized = false;
         this.uploadService.clearQueue();

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

@@ -55,7 +55,7 @@ describe('FileUploadingListComponent', () => {
     });
 
     describe('cancelFileUpload()', () => {
-        it('calls cancelUpload()', () => {
+        it('should call uploadService api when cancelling a file', () => {
             spyOn(uploadService, 'cancelUpload');
             component.cancelFileUpload(file);
 
@@ -64,7 +64,7 @@ describe('FileUploadingListComponent', () => {
     });
 
     describe('removeFile()', () => {
-        it('removes file successfully', () => {
+        it('should remove file successfully when api returns success', () => {
             spyOn(nodesApiService, 'deleteNode').and.returnValue(Observable.of('success'));
             spyOn(fileUploadService, 'emitFileRemoved');
 
@@ -74,7 +74,7 @@ describe('FileUploadingListComponent', () => {
             expect(fileUploadService.emitFileRemoved).toHaveBeenCalledWith(file);
         });
 
-        it('notify on remove file fail', () => {
+        it('should notify on remove file fail when api returns error', () => {
             spyOn(nodesApiService, 'deleteNode').and.returnValue(Observable.throw({}));
             spyOn(notificationService, 'openSnackMessage');
 
@@ -91,14 +91,14 @@ describe('FileUploadingListComponent', () => {
             spyOn(component, 'cancelFileUpload');
         });
 
-        it('calls remove method if file was uploaded', () => {
+        it('should call removeFile() if file was uploaded', () => {
             file.status = FileUploadStatus.Complete;
             component.cancelAllFiles(null);
 
             expect(component.removeFile).toHaveBeenCalledWith(file);
         });
 
-        it('calls cancel method if file is in progress', () => {
+        it('should call cancelFileUpload() if file is being uploaded', () => {
             file.status = FileUploadStatus.Progress;
             component.cancelAllFiles(null);
 
@@ -107,7 +107,7 @@ describe('FileUploadingListComponent', () => {
     });
 
     describe('isUploadCompleted()', () => {
-        it('returns false when at least one file is in progress', () => {
+        it('should return false when at least one file is in progress', () => {
             component.files = <any> [
                 { status: FileUploadStatus.Progress },
                 { status: FileUploadStatus.Cancelled },
@@ -117,7 +117,7 @@ describe('FileUploadingListComponent', () => {
             expect(component.isUploadCompleted()).toBe(false);
         });
 
-        it('returns false when at least one file is in pending', () => {
+        it('should return false when at least one file is in pending', () => {
             component.files = <any> [
                 { status: FileUploadStatus.Pending },
                 { status: FileUploadStatus.Cancelled },
@@ -127,7 +127,7 @@ describe('FileUploadingListComponent', () => {
             expect(component.isUploadCompleted()).toBe(false);
         });
 
-        it('returns false when none of the files is completed', () => {
+        it('should return false when none of the files is completed', () => {
             component.files = <any> [
                 { status: FileUploadStatus.Error },
                 { status: FileUploadStatus.Error },
@@ -137,7 +137,7 @@ describe('FileUploadingListComponent', () => {
             expect(component.isUploadCompleted()).toBe(false);
         });
 
-        it('returns true when none of the files is in progress', () => {
+        it('should return true when none of the files is in progress', () => {
             component.files = <any> [
                 { status: FileUploadStatus.Error },
                 { status: FileUploadStatus.Cancelled },
@@ -149,7 +149,7 @@ describe('FileUploadingListComponent', () => {
     });
 
     describe('isUploadCancelled()', () => {
-        it('return false when not all files are cancelled', () => {
+        it('should return false when not all files are cancelled', () => {
             component.files = <any> [
                 { status: FileUploadStatus.Complete },
                 { status: FileUploadStatus.Cancelled },
@@ -159,7 +159,7 @@ describe('FileUploadingListComponent', () => {
             expect(component.isUploadCancelled()).toBe(false);
         });
 
-        it('return false when there are no cancelled files', () => {
+        it('should return false when there are no cancelled files', () => {
             component.files = <any> [
                 { status: FileUploadStatus.Complete },
                 { status: FileUploadStatus.Error },
@@ -169,7 +169,7 @@ describe('FileUploadingListComponent', () => {
             expect(component.isUploadCancelled()).toBe(false);
         });
 
-        it('return false when there is at leat one file in progress', () => {
+        it('should return false when there is at leat one file in progress', () => {
             component.files = <any> [
                 { status: FileUploadStatus.Progress },
                 { status: FileUploadStatus.Error },
@@ -179,7 +179,7 @@ describe('FileUploadingListComponent', () => {
             expect(component.isUploadCancelled()).toBe(false);
         });
 
-        it('return false when there is at leat one file in pendding', () => {
+        it('should return false when there is at leat one file in pendding', () => {
             component.files = <any> [
                 { status: FileUploadStatus.Pending },
                 { status: FileUploadStatus.Error },
@@ -189,7 +189,7 @@ describe('FileUploadingListComponent', () => {
             expect(component.isUploadCancelled()).toBe(false);
         });
 
-        it('return true when all files are aborted', () => {
+        it('should return true when all files are aborted', () => {
             component.files = <any> [
                 { status: FileUploadStatus.Aborted },
                 { status: FileUploadStatus.Aborted }
@@ -198,7 +198,7 @@ describe('FileUploadingListComponent', () => {
             expect(component.isUploadCancelled()).toBe(true);
         });
 
-        it('return true when all files are cancelled', () => {
+        it('should return true when all files are cancelled', () => {
             component.files = <any> [
                 { status: FileUploadStatus.Cancelled },
                 { status: FileUploadStatus.Cancelled },
@@ -210,18 +210,45 @@ describe('FileUploadingListComponent', () => {
     });
 
     describe('uploadErrorFiles()', () => {
-        it('returns the error files', () => {
-            file.status = 6;
+        it('should return array of error files', () => {
+            component.files = <any> [
+                { status: FileUploadStatus.Complete },
+                { status: FileUploadStatus.Error },
+                { status: FileUploadStatus.Error }
+            ];
 
-            expect(component.uploadErrorFiles()).toEqual([file]);
+            expect(component.uploadErrorFiles.length).toEqual(2);
+        });
+
+        it('should return empty array when no error files found', () => {
+            component.files = <any> [
+                { status: FileUploadStatus.Complete },
+                { status: FileUploadStatus.Pending }
+            ];
+
+            expect(component.uploadErrorFiles.length).toEqual(0);
         });
     });
 
-    describe('totalErrorFiles()', () => {
-        it('returns the number of error files', () => {
-            file.status = 6;
+    describe('uploadCancelledFiles()', () => {
+        it('should return array of cancelled files', () => {
+            component.files = <any> [
+                { status: FileUploadStatus.Cancelled },
+                { status: FileUploadStatus.Complete },
+                { status: FileUploadStatus.Error }
+            ];
 
-            expect(component.totalErrorFiles()).toEqual(1);
+            expect(component.uploadCancelledFiles.length).toEqual(1);
+        });
+
+        it('should return emty array when no cancelled files found', () => {
+            component.files = <any> [
+                { status: FileUploadStatus.Error },
+                { status: FileUploadStatus.Complete },
+                { status: FileUploadStatus.Pending }
+            ];
+
+            expect(component.uploadCancelledFiles.length).toEqual(0);
         });
     });
 });

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

@@ -87,8 +87,8 @@ export class FileUploadingListComponent {
     }
 
     /**
-     * Check if all the files are not in the Progress state.
-     * @returns {boolean} - false if there is at least one file in Progress
+     * Checks if all the files are uploaded
+     * @returns {boolean} - false if there is at least one file in Progress | Starting | Pending
      */
     isUploadCompleted(): boolean {
          return !this.isUploadCancelled() &&
@@ -102,8 +102,8 @@ export class FileUploadingListComponent {
     }
 
     /**
-     * Check if all the files are not in the Progress state.
-     * @returns {boolean} - false if there is at least one file in Progress
+     * Check if all the files are Cancelled | Aborted | Error.
+     * @returns {boolean} - false if there is at least one file in uploading states
      */
     isUploadCancelled(): boolean {
         return !!this.files.length &&
@@ -115,12 +115,20 @@ export class FileUploadingListComponent {
                 );
     }
 
-    uploadErrorFiles(): FileModel[] {
-        return this.files.filter((item) => item.status === FileUploadStatus.Error);
+    /**
+     * Gets all the files with status Error.
+     * @returns {boolean} - false if there is none
+     */
+    get uploadErrorFiles(): FileModel[] {
+        return this.files.filter(({status}) => status === FileUploadStatus.Error);
     }
 
-    totalErrorFiles(): number {
-        return this.files.filter((item) => item.status === FileUploadStatus.Error).length;
+    /**
+     * Gets all the files with status Cancelled.
+     * @returns {boolean} - false if there is none
+     */
+    get uploadCancelledFiles(): FileModel[] {
+        return this.files.filter(({status}) => status === FileUploadStatus.Cancelled);
     }
 
     private onRemoveSuccess(file: FileModel): void {

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

@@ -18,7 +18,7 @@
             "UPLOAD_FOLDER": "Upload folder"
         },
         "MESSAGES": {
-            "UPLOAD_CANCELED": "Upload canceled",
+            "UPLOAD_CANCELED": "Upload cancelled",
             "UPLOAD_COMPLETED": "Uploaded {{ completed }} / {{ total }}",
             "UPLOAD_PROGRESS": "Uploading {{ completed }} / {{ total }}",
             "UPLOAD_ERROR": "{{ total }} error",