File
Implements
Metadata
selector |
iqb-files-upload-queue |
styleUrls |
../iqb-files.scss |
templateUrl |
iqb-files-upload-queue.component.html |
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Outputs
|
|
Methods
add
|
add(file: File)
|
|
Parameters :
Name |
Type |
Optional |
file |
File
|
No
|
|
analyseStatus
|
analyseStatus()
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
disableClearButton
|
Default value : true
|
|
files
|
Type : Array<File>
|
Default value : []
|
|
import {
Component, EventEmitter, OnDestroy, QueryList, ViewChildren, Input, Output
} from '@angular/core';
import { IqbFilesUploadComponent } from '../iqb-files-upload/iqb-files-upload.component';
import { UploadStatus } from '../files.interfaces';
@Component({
selector: 'iqb-files-upload-queue',
templateUrl: 'iqb-files-upload-queue.component.html',
styleUrls: ['../iqb-files.scss']
})
export class IqbFilesUploadQueueComponent implements OnDestroy {
@ViewChildren(IqbFilesUploadComponent) fileUploads: QueryList<IqbFilesUploadComponent>;
files: Array<File> = [];
disableClearButton = true;
@Input()
fileAlias: string;
@Input()
folderName: string;
@Input()
folder: string;
@Output()
uploadCompleteEvent = new EventEmitter<IqbFilesUploadQueueComponent>();
add(file: File): void {
this.files.push(file);
}
removeAll(): void {
this.files.splice(0, this.files.length);
}
ngOnDestroy(): void {
if (this.files) {
this.removeAll();
}
}
removeFile(fileToRemove: IqbFilesUploadComponent): void {
this.files.splice(fileToRemove.id, 1);
}
analyseStatus(): void {
let someoneiscomplete = false;
let someoneisbusy = false;
let someoneisready = false;
this.fileUploads.forEach(fileUpload => {
if ((fileUpload.status === UploadStatus.ok) || (fileUpload.status === UploadStatus.error)) {
someoneiscomplete = true;
} else if (fileUpload.status === UploadStatus.busy) {
someoneisbusy = true;
} else if (fileUpload.status === UploadStatus.ready) {
someoneisready = true;
}
});
if (someoneiscomplete && !someoneisbusy) {
this.uploadCompleteEvent.emit();
this.disableClearButton = false;
}
}
}
<mat-card *ngIf="files.length > 0">
<mat-card-header>
<mat-card-title>Upload-Report</mat-card-title>
</mat-card-header>
<iqb-files-upload
*ngFor="let file of files; let i = index"
[file]="file"
[id]="i"
[fileAlias]="fileAlias"
[folderName]="folderName"
[folder]="folder"
(removeFileRequestEvent)="removeFile($event)"
(statusChangedEvent)="analyseStatus()">
</iqb-files-upload>
<mat-card-actions>
<button *ngIf="!disableClearButton" (click)="removeAll()" mat-raised-button color="primary">OK</button>
</mat-card-actions>
</mat-card>
.subheading-2 {
color: #003333;
margin-bottom: 0.7em;
margin-top: 1.7em;
border-bottom: 1px solid silver;
}
.subheading-2.success {
color: green
}
.subheading-2.error {
color: #821324
}
.upload-percentage {
font-size: .85rem;
}
.cancel {
cursor: pointer;
outline: none;
float: right;
background: white;
border: 2px solid white;
}
Legend
Html element with directive