File

src/app/workspace-admin/files/iqb-files-upload-queue/iqb-files-upload-queue.component.ts

Implements

OnDestroy

Metadata

selector iqb-files-upload-queue
styleUrls ../iqb-files.scss
templateUrl iqb-files-upload-queue.component.html

Index

Properties
Methods
Inputs
Outputs

Inputs

fileAlias
Type : string
folder
Type : string
folderName
Type : string

Outputs

uploadCompleteEvent
Type : EventEmitter

Methods

add
add(file: File)
Parameters :
Name Type Optional
file File No
Returns : void
analyseStatus
analyseStatus()
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
removeAll
removeAll()
Returns : void
removeFile
removeFile(fileToRemove: IqbFilesUploadComponent)
Parameters :
Name Type Optional
fileToRemove IqbFilesUploadComponent No
Returns : void

Properties

disableClearButton
Default value : true
files
Type : Array<File>
Default value : []
fileUploads
Type : QueryList<IqbFilesUploadComponent>
Decorators :
@ViewChildren(IqbFilesUploadComponent)
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>

../iqb-files.scss

.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
Component
Html element with directive

results matching ""

    No results matching ""