File

src/app/workspace-admin/files/iqb-files/iqbFilesUploadQueue/iqbFilesUploadQueue.component.ts

Implements

OnDestroy

Metadata

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

Index

Properties
Methods
Inputs
Outputs

Inputs

fileAlias
Type : string
folder
Type : string
folderName
Type : string
httpRequestHeaders
Type : HttpHeaders | literal type
Default value : new HttpHeaders().set('Content-Type', 'multipart/form-data')
httpRequestParams
Type : HttpParams | literal type
Default value : new HttpParams()
httpUrl
Type : string

Outputs

uploadCompleteEvent
Type : EventEmitter

Methods

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

Properties

Public disableClearButton
Default value : true
Public files
Type : Array<any>
Default value : []
fileUploads
Type : QueryList<IqbFilesUploadComponent>
Decorators :
@ViewChildren(IqbFilesUploadComponent)
import {
  Component, EventEmitter, OnDestroy, QueryList, ViewChildren, Input, Output
} from '@angular/core';
import { HttpHeaders, HttpParams } from '@angular/common/http';
import { IqbFilesUploadComponent, UploadStatus } from '../iqbFilesUpload/iqbFilesUpload.component';

@Component({
  selector: 'iqb-files-upload-queue',
  templateUrl: 'iqbFilesUploadQueue.component.html',
  exportAs: 'iqbFilesUploadQueue',
  styleUrls: ['../iqb-files.scss']
})
export class IqbFilesUploadQueueComponent implements OnDestroy {
  @ViewChildren(IqbFilesUploadComponent) fileUploads: QueryList<IqbFilesUploadComponent>;

  public files: Array<any> = [];

  public disableClearButton = true;

  /* Http request input bindings */
  @Input()
  httpUrl: string;

  @Input()
  httpRequestHeaders: HttpHeaders | {
    [header: string]: string | string[];
  } = new HttpHeaders().set('Content-Type', 'multipart/form-data');

  @Input()
  httpRequestParams: HttpParams | {
    [param: string]: string | string[];
  } = new HttpParams();

  @Input()
  fileAlias: string;

  @Input()
  folderName: string;

  @Input()
  folder: string;

  @Output() uploadCompleteEvent = new EventEmitter<IqbFilesUploadQueueComponent>();

  add(file: any): void {
    this.files.push(file);
  }

  public 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"
    [httpUrl]="httpUrl"
    [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-progress {
  display: flex;
  align-content: center;
  align-items: center;
  height: 25px;
}

.file-info {
  font-size: .85rem;
}

.action {
  cursor: pointer;
  outline: none;
}


Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""