inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* cancel all confirmation

* confirmation text
This commit is contained in:
Cilibiu Bogdan 2017-08-25 18:11:41 +03:00 committed by Mario Romano
parent 9e0d132353
commit e199d0cb6d
6 changed files with 222 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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;

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

@ -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();

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

@ -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 = [];

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

@ -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) {
border-top: 1px solid ;
&:hover {
background: $file-uploading-row-hover-color;
}
&__name {

10
ng2-components/ng2-alfresco-upload/src/i18n/en.json
View File

@ -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": {