inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-08-07 17:48:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* [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
This commit is contained in:
Vito
2017-06-22 03:43:54 -07:00
committed by Eugenio Romano
parent bffaf2c407
commit ef340a398e
6 changed files with 110 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -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 { FileUploadCompleteEvent } from '../events/file.event';
import { FileModel, FileUploadStatus } from '../models/file.model';
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));
}));
});

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

@@ -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.totalCompleted = e.totalComplete;
this.counterSubscription = this.uploadService.fileUploadComplete.subscribe((event: FileUploadCompleteEvent) => {
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;
}
}