[ADF-1457] Upload Dialog - Cancel all confirmation dialog (#2248)

* cancel all confirmation

* confirmation text

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

@@ -4,12 +4,17 @@
      [class.upload-dialog--position-left]="position === 'left'"
      [class.upload-dialog--position-right]="position === 'right'">
     <header class="upload-dialog__header">
+        <button
+            md-button
+            color="secondary"
+            [disabled]="isConfirmation"
+            (click)="toggleMinimized()">
             <md-icon
                 md-list-icon
-            (click)="toggleMinimized()"
                 title="{{ (isDialogMinimized ? 'ADF_FILE_UPLOAD.BUTTON.MAXIMIZE': 'ADF_FILE_UPLOAD.BUTTON.MINIMIZE') | translate }}">
                     {{ isDialogMinimized ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}
             </md-icon>
+        </button>
 
         <span
             class="upload-dialog__title"
@@ -51,8 +56,11 @@
         }}
     </section>
 
-    <section class="upload-dialog__content">
+    <section
+        class="upload-dialog__content"
+        [class.upload-dialog--padding]="isConfirmation">
         <adf-file-uploading-list
+            [class.upload-dialog--hide]="isConfirmation"
             #uploadList
             [files]="filesUploadingList">
                 <ng-template let-file="$implicit">
@@ -63,14 +71,28 @@
                     </adf-file-uploading-list-row>
                 </ng-template>
         </adf-file-uploading-list>
+
+        <div
+            class="upload-dialog__confirmation"
+            [class.upload-dialog--hide]="!isConfirmation">
+                <p class="upload-dialog__confirmation--title">
+                    {{ 'ADF_FILE_UPLOAD.CONFIRMATION.MESSAGE.TITLE' | translate }}
+                </p>
+
+                <p class="upload-dialog__confirmation--text">
+                    {{ 'ADF_FILE_UPLOAD.CONFIRMATION.MESSAGE.TEXT' | translate }}
+                </p>
+        </div>
     </section>
 
-    <footer class="upload-dialog__actions">
+    <footer
+        class="upload-dialog__actions"
+        [class.upload-dialog--hide]="isConfirmation">
         <button
             color="primary"
-            *ngIf="!uploadList.isUploadCompleted() && !uploadList.isUploadCancelled()"
             md-button
-            (click)="uploadList.cancelAllFiles()">
+            *ngIf="!uploadList.isUploadCompleted() && !uploadList.isUploadCancelled()"
+            (click)="toggleConfirmation()">
             {{ 'ADF_FILE_UPLOAD.BUTTON.CANCEL_ALL' | translate }}
         </button>
 
@@ -82,4 +104,22 @@
             {{ 'ADF_FILE_UPLOAD.BUTTON.CLOSE' | translate }}
         </button>
     </footer>
+
+    <footer
+        class="upload-dialog__actions"
+        [class.upload-dialog--hide]="!isConfirmation">
+        <button
+            color="secondary"
+            md-button
+            (click)="cancelAllUploads()">
+            {{ 'ADF_FILE_UPLOAD.CONFIRMATION.BUTTON.CANCEL' | translate }}
+        </button>
+
+        <button
+            md-button
+            color="primary"
+            (click)="toggleConfirmation()">
+            {{ 'ADF_FILE_UPLOAD.CONFIRMATION.BUTTON.CONTINUE' | translate }}
+        </button>
+    </footer>
 </div>

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

@@ -12,6 +12,14 @@
         width: 40%;
         box-shadow: 1px 5px 15px #888888;
 
+        &--padding {
+            padding: 1em;
+        }
+
+        &--hide {
+            display: none !important;
+        }
+
         &--position-left {
             left: 25px;
         }
@@ -32,6 +40,12 @@
             padding: 1em;
             display: flex;
             align-items: center;
+
+            button {
+                min-width: 0;
+                padding: 0;
+                line-height: 0;
+            }
         }
 
         &__title {
@@ -45,11 +59,26 @@
 
         &__content {
             overflow: auto;
-            max-height: 195px;
+            max-height: 194px;
             border-top: 1px solid mat-color($foreground, text, 0.14);
             border-bottom: 1px solid mat-color($foreground, text, 0.14);
         }
 
+        &__confirmation {
+            padding: 0 0.5em 0 0.5em;
+        }
+
+        &__confirmation--title {
+            font-size: 16px;
+            line-height: 1.5;
+            letter-spacing: -0.4px;
+            color: $black-87-opacity;
+        }
+
+        &__confirmation--text {
+            margin-bottom: 0;
+        }
+
         &__actions {
             display: flex;
             justify-content: flex-end;

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

@@ -17,7 +17,7 @@
 
 import { EventEmitter } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { FileModel, FileUploadCompleteEvent, UploadService } from 'ng2-alfresco-core';
+import { FileModel, FileUploadCompleteEvent, FileUploadErrorEvent, UploadService } from 'ng2-alfresco-core';
 import { UploadModule } from '../../index';
 import { FileUploadingDialogComponent } from './file-uploading-dialog.component';
 
@@ -55,45 +55,109 @@ describe('FileUploadingDialogComponent', () => {
     });
 
     describe('upload service subscribers', () => {
-        it('does not render when uploading list is empty', () => {
+        it('should not render dialog when uploading list is empty', () => {
             uploadService.addToQueue();
             uploadService.uploadFilesInTheQueue(emitter);
 
             expect(component.isDialogActive).toBe(false);
         });
 
-        it('opens when uploading list is not empty', () => {
+        it('should open dialog when uploading list is not empty', () => {
             uploadService.addToQueue(...filelist);
             uploadService.uploadFilesInTheQueue(emitter);
 
             expect(component.isDialogActive).toBe(true);
         });
 
-        it('updates uploading file list', () => {
+        it('should update uploading file list', () => {
             uploadService.addToQueue(...filelist);
             uploadService.uploadFilesInTheQueue(emitter);
 
             expect(component.filesUploadingList.length).toBe(2);
         });
 
-        it('updates completed uploaded files', () => {
+        it('should update completed uploaded files count', () => {
             const completedFiles = 2;
             const completeEvent = new FileUploadCompleteEvent(null, completedFiles, null, null);
             uploadService.fileUploadComplete.next(completeEvent);
 
             expect(component.totalCompleted).toEqual(completedFiles);
         });
+
+        it('should update error files count', () => {
+            const totalErrors = 2;
+            const errorEvent = new FileUploadErrorEvent(null, null, totalErrors);
+            uploadService.fileUploadError.next(errorEvent);
+
+            expect(component.totalErrors).toEqual(totalErrors);
+        });
+    });
+
+    describe('toggleConfirmation()', () => {
+        it('should change state to true when false', () => {
+            component.isConfirmation = false;
+
+            component.toggleConfirmation();
+
+            expect(component.isConfirmation).toBe(true);
+        });
+
+        it('should change state to false when true', () => {
+            component.isConfirmation = true;
+
+            component.toggleConfirmation();
+
+            expect(component.isConfirmation).toBe(false);
+        });
+
+        it('should change dialog minimize state to false', () => {
+            component.isDialogMinimized = true;
+
+            component.toggleConfirmation();
+
+            expect(component.isDialogMinimized).toBe(false);
+        });
+
+        it('should not change dialog minimize state', () => {
+            component.isDialogMinimized = false;
+
+            component.toggleConfirmation();
+
+            expect(component.isDialogMinimized).toBe(false);
+        });
+    });
+
+    describe('cancelAllUploads()', () => {
+        beforeEach(() => {
+            (<any> component).uploadList = {
+                cancelAllFiles: jasmine.createSpy('cancelAllFiles')
+            };
+        });
+
+        it('should toggle confirmation dialog', () => {
+            spyOn(component, 'toggleConfirmation');
+
+            component.cancelAllUploads();
+
+            expect(component.toggleConfirmation).toHaveBeenCalled();
+        });
+
+        it('should call upload list cancel method', () => {
+            component.cancelAllUploads();
+
+            expect(component.uploadList.cancelAllFiles).toHaveBeenCalled();
+        });
     });
 
     describe('toggleMinimized()', () => {
-        it('minimzes the dialog', () => {
+        it('should minimze the dialog', () => {
             component.isDialogMinimized = true;
             component.toggleMinimized();
 
             expect(component.isDialogMinimized).toBe(false);
         });
 
-        it('maximizes the dialog', () => {
+        it('should maximize the dialog', () => {
             component.isDialogMinimized = false;
             component.toggleMinimized();
 
@@ -102,21 +166,42 @@ describe('FileUploadingDialogComponent', () => {
     });
 
     describe('close()', () => {
-        it('closes the dialog', () => {
+        it('should reset confirmation state', () => {
+            component.isConfirmation = true;
+            component.close();
+
+            expect(component.isConfirmation).toBe(false);
+        });
+
+        it('should reset total files count', () => {
+            component.totalCompleted = 1;
+            component.close();
+
+            expect(component.totalCompleted).toBe(0);
+        });
+
+        it('should reset total errors count', () => {
+            component.totalErrors = 1;
+            component.close();
+
+            expect(component.totalErrors).toBe(0);
+        });
+
+        it('should closes the dialog', () => {
             component.isDialogActive = true;
             component.close();
 
             expect(component.isDialogActive).toBe(false);
         });
 
-        it('resets dialog minimize state', () => {
+        it('should reset dialog minimize state', () => {
             component.isDialogMinimized = true;
             component.close();
 
             expect(component.isDialogMinimized).toBe(false);
         });
 
-        it('resets upload queue', () => {
+        it('should reset upload queue', () => {
             uploadService.addToQueue(...filelist);
             uploadService.uploadFilesInTheQueue(emitter);
             component.close();

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

@@ -15,10 +15,11 @@
  * limitations under the License.
  */
 
-import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { FileModel, FileUploadCompleteEvent, FileUploadDeleteEvent,
          FileUploadErrorEvent, UploadService } from 'ng2-alfresco-core';
 import { Observable, Subscription } from 'rxjs/Rx';
+import { FileUploadingListComponent } from './file-uploading-list.component';
 
 @Component({
     selector: 'adf-file-uploading-dialog, file-uploading-dialog',
@@ -26,6 +27,9 @@ import { Observable, Subscription } from 'rxjs/Rx';
     styleUrls: ['./file-uploading-dialog.component.scss']
 })
 export class FileUploadingDialogComponent implements OnInit, OnDestroy {
+    @ViewChild(FileUploadingListComponent)
+    uploadList: FileUploadingListComponent;
+
     @Input()
     position: string = 'right';
 
@@ -34,6 +38,7 @@ export class FileUploadingDialogComponent implements OnInit, OnDestroy {
     totalCompleted: number = 0;
     totalErrors: number = 0;
     isDialogMinimized: boolean = false;
+    isConfirmation: boolean = false;
 
     private listSubscription: Subscription;
     private counterSubscription: Subscription;
@@ -75,6 +80,26 @@ export class FileUploadingDialogComponent implements OnInit, OnDestroy {
             });
     }
 
+    /**
+     * Toggle confirmation message.
+     */
+    toggleConfirmation() {
+        this.isConfirmation = !this.isConfirmation;
+
+        if (this.isDialogMinimized) {
+            this.isDialogMinimized = false;
+        }
+    }
+
+    /**
+     * Cancel uploads and hide confiramtion
+     */
+    cancelAllUploads() {
+        this.toggleConfirmation();
+
+        this.uploadList.cancelAllFiles();
+    }
+
     /**
      * Toggle dialog minimized state.
      */
@@ -87,6 +112,7 @@ export class FileUploadingDialogComponent implements OnInit, OnDestroy {
      * Dismiss dialog
      */
     close(): void {
+        this.isConfirmation = false;
         this.totalCompleted = 0;
         this.totalErrors = 0;
         this.filesUploadingList = [];

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

@@ -1,10 +1,18 @@
 @import 'colors';
 
 @mixin mat-file-uploading-row-theme($theme) {
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
     $warn: map-get($theme, warn);
 
+    $file-uploading-row-hover-color: #eeeeee !default;
+
+    adf-file-uploading-list-row:not(:first-child) {
+        display: block;
+        border-top: 1px solid mat-color($foreground, text, 0.14);
+    }
 
     .adf-file-uploading-row {
         display: flex;
@@ -12,8 +20,8 @@
         padding: 0.5em 1em 0.5em 1em;
         cursor: default;
 
-        &:not(:first-child) {
+        &:hover {
-            border-top: 1px solid ;
+            background: $file-uploading-row-hover-color;
         }
 
         &__name {

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

@@ -10,6 +10,16 @@
         },
         "STATUS": {
             "FILE_CANCELED_STATUS": "Cancelled"
+        },
+        "CONFIRMATION": {
+            "BUTTON": {
+                "CANCEL": "Yes",
+                "CONTINUE": "No"
+            },
+            "MESSAGE": {
+                "TITLE": "Cancel Upload",
+                "TEXT": "Stop uploading and remove files already uploaded."
+            }
         }
     },
     "FILE_UPLOAD": {