[ADF-778] cancel window for upload dialog shows only on complete (#2003)

* [ADF-778] Added new behaviour to upload dialog

* [ADF-778] cancel window for upload dialog shows only on complete

* [ADF-778] changed variable name to showCloseButton

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

@@ -9,7 +9,7 @@
                 <i class="material-icons up" title="expand upload list">keyboard_arrow_up</i>
             </div>
 
-            <div class="close-button" (click)="toggleVisible()" (keyup.enter)="toggleVisible()" tabindex="0" title="close upload list">
+            <div *ngIf="showCloseButton" id="button-close-upload-list" class="close-button" (click)="toggleVisible()" (keyup.enter)="toggleVisible()" tabindex="0" title="close upload list">
                 <i class="material-icons">clear</i>
             </div>
         </div>

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

@@ -22,8 +22,8 @@ import { CoreModule } from 'ng2-alfresco-core';
 import { FileUploadingDialogComponent } from './file-uploading-dialog.component';
 import { FileUploadingListComponent } from './file-uploading-list.component';
 import { UploadService } from '../services/upload.service';
-import { FileModel } from '../models/file.model';
+import { FileModel, FileUploadStatus } from '../models/file.model';
-import { FileUploadCompleteEvent } from '../events/file.event';
+import { FileUploadCompleteEvent, FileUploadEvent } from '../events/file.event';
 
 describe('FileUploadingDialogComponent', () => {
 
@@ -110,4 +110,38 @@ describe('FileUploadingDialogComponent', () => {
 
         expect(element.querySelector('.minimize-button').getAttribute('class')).toEqual('minimize-button active');
     });
+
+    it('should show the close button when the file upload is completed', async(() => {
+        component.isDialogActive = true;
+        uploadService.addToQueue(new FileModel(<File> { name: 'file' }));
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            let closeButton = element.querySelector('#button-close-upload-list');
+            expect(closeButton).not.toBeNull();
+        });
+
+        uploadService.fileUpload.next(new FileUploadCompleteEvent(file, 1, { status: FileUploadStatus.Complete }, 0));
+    }));
+
+    it('should show the close button when the file upload is in error', async(() => {
+        component.isDialogActive = true;
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            let closeButton = element.querySelector('#button-close-upload-list');
+            expect(closeButton).not.toBeNull();
+        });
+
+        uploadService.fileUpload.next(new FileUploadEvent(file, FileUploadStatus.Error));
+    }));
+
+    it('should show the close button when the file upload is cancelled', async(() => {
+        component.isDialogActive = true;
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            let closeButton = element.querySelector('#button-close-upload-list');
+            expect(closeButton).not.toBeNull();
+        });
+
+        uploadService.fileUpload.next(new FileUploadEvent(file, FileUploadStatus.Cancelled));
+    }));
 });

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

@@ -16,7 +16,7 @@
  */
 
 import { Component, Input, ChangeDetectorRef, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
-import { FileModel } from '../models/file.model';
+import { FileModel, FileUploadStatus } from '../models/file.model';
 import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 import { UploadService } from '../services/upload.service';
 import { FileUploadCompleteEvent } from '../events/file.event';
@@ -39,6 +39,7 @@ export class FileUploadingDialogComponent implements OnInit, OnDestroy {
 
     private listSubscription: any;
     private counterSubscription: any;
+    private showCloseButton: boolean = false;
 
     constructor(private cd: ChangeDetectorRef,
                 translateService: AlfrescoTranslationService,
@@ -56,17 +57,21 @@ export class FileUploadingDialogComponent implements OnInit, OnDestroy {
                 this.isDialogActive = true;
                 this.cd.detectChanges();
             }
+            this.showCloseButton = false;
         });
 
-        this.counterSubscription = this.uploadService.fileUploadComplete.subscribe((e: FileUploadCompleteEvent) => {
+        this.counterSubscription = this.uploadService.fileUploadComplete.subscribe((event: FileUploadCompleteEvent) => {
-            this.totalCompleted = e.totalComplete;
+            this.totalCompleted = event.totalComplete;
             if (this.totalCompleted > 1) {
                 this.totalCompletedMsg = 'FILE_UPLOAD.MESSAGES.COMPLETED';
             }
             this.cd.detectChanges();
         });
 
-        this.uploadService.fileUpload.subscribe(e => {
+        this.uploadService.fileUpload.subscribe((event: FileUploadCompleteEvent) => {
+            if (event.status !== FileUploadStatus.Progress) {
+                this.isUploadProcessCompleted(event);
+            }
             this.cd.detectChanges();
         });
     }
@@ -76,6 +81,7 @@ export class FileUploadingDialogComponent implements OnInit, OnDestroy {
      */
     toggleVisible(): void {
         this.isDialogActive = !this.isDialogActive;
+        this.uploadService.clearQueue();
         this.cd.detectChanges();
     }
 
@@ -91,4 +97,24 @@ export class FileUploadingDialogComponent implements OnInit, OnDestroy {
         this.listSubscription.unsubscribe();
         this.counterSubscription.unsubscribe();
     }
+
+    private isUploadProcessCompleted(event: FileUploadCompleteEvent) {
+        if (this.isAllFileUploadEnded(event) && this.isUploadStateCompleted(event.status)) {
+            this.showCloseDialogButton();
+        } else if (event.status === FileUploadStatus.Error || event.status === FileUploadStatus.Cancelled) {
+            this.showCloseDialogButton();
+        }
+    }
+
+    private showCloseDialogButton() {
+        this.showCloseButton = true;
+    }
+
+    private isAllFileUploadEnded(event: FileUploadCompleteEvent) {
+        return event.totalComplete === this.uploadService.getQueue().length - event.totalAborted;
+    }
+
+    private isUploadStateCompleted(state): boolean {
+        return FileUploadStatus.Complete === state;
+    }
 }

ng2-components/ng2-alfresco-upload/src/events/file.event.ts

@@ -29,7 +29,7 @@ export class FileUploadEvent {
 
 export class FileUploadCompleteEvent extends FileUploadEvent {
 
-    constructor(file: FileModel, public totalComplete: number = 0, public data?: any) {
+    constructor(file: FileModel, public totalComplete: number = 0, public data?: any, public totalAborted: number = 0) {
         super(file, FileUploadStatus.Complete);
     }
 

ng2-components/ng2-alfresco-upload/src/services/upload.service.spec.ts

@@ -168,4 +168,26 @@ describe('UploadService', () => {
             responseText: 'File uploaded'
         });
     });
+
+    it('should start downloading the next one if a file of the list is aborted', (done) => {
+        let emitter = new EventEmitter();
+
+        service.fileUploadAborted.subscribe(e => {
+            expect(e).not.toBeNull();
+        });
+
+        service.fileUploadCancelled.subscribe(e => {
+            expect(e).not.toBeNull();
+            done();
+        });
+
+        let fileFake1 = new FileModel(<File>{ name: 'fake-name1', size: 10 });
+        let fileFake2 = new FileModel(<File>{ name: 'fake-name2', size: 10 });
+        let filelist = [fileFake1, fileFake2];
+        service.addToQueue(...filelist);
+        service.uploadFilesInTheQueue(emitter);
+
+        let file = service.getQueue();
+        service.cancelUpload(...file);
+    });
 });

ng2-components/ng2-alfresco-upload/src/services/upload.service.ts

@@ -27,6 +27,7 @@ export class UploadService {
     private queue: FileModel[] = [];
     private cache: { [key: string]: any } = {};
     private totalComplete: number = 0;
+    private totalAborted: number = 0;
     private activeTask: Promise<any> = null;
 
     queueChanged: Subject<FileModel[]> = new Subject<FileModel[]>();
@@ -98,6 +99,8 @@ export class UploadService {
                     setTimeout(() => this.uploadFilesInTheQueue(emitter), 100);
                 };
 
+                promise.next = next;
+
                 promise.then(
                     () => next(),
                     () => next()
@@ -122,6 +125,12 @@ export class UploadService {
         });
     }
 
+    clearQueue() {
+        this.queue = [];
+        this.totalComplete = 0;
+        this.totalAborted = 0;
+    }
+
     private beginUpload(file: FileModel, /* @deprecated */emitter: EventEmitter<any>): any {
         let opts: any = {
                 renditions: 'doclib'
@@ -209,7 +218,7 @@ export class UploadService {
                 delete this.cache[file.id];
             }
 
-            const event = new FileUploadCompleteEvent(file, this.totalComplete, data);
+            const event = new FileUploadCompleteEvent(file, this.totalComplete, data, this.totalAborted);
             this.fileUpload.next(event);
             this.fileUploadComplete.next(event);
 
@@ -220,6 +229,7 @@ export class UploadService {
     private onUploadAborted(file: FileModel): void {
         if (file) {
             file.status = FileUploadStatus.Aborted;
+            this.totalAborted++;
 
             const promise = this.cache[file.id];
             if (promise) {
@@ -229,6 +239,7 @@ export class UploadService {
             const event = new FileUploadEvent(file, FileUploadStatus.Aborted);
             this.fileUpload.next(event);
             this.fileUploadAborted.next(event);
+            promise.next();
         }
     }
 }