SFM-Broker/src/app/lender-uploads/lender-uploads.component.ts

import {AfterViewInit, Component, ElementRef, EventEmitter, OnInit, Output, ViewChild, ViewEncapsulation} from '@angular/core';
import {FileInfo, FileRestrictions, SuccessEvent, UploadComponent, UploadEvent, UploadProgressEvent} from '@progress/kendo-angular-upload';
import {AuthService} from '../service/auth.service';
import {range} from '@progress/kendo-angular-dateinputs/dist/es2015/util';
import {Router} from '@angular/router';
import {PageChangeEvent} from '@progress/kendo-angular-pager';

@Component({
  selector: 'app-lender-uploads',
  templateUrl: './lender-uploads.component.html',
  styleUrls: ['./lender-uploads.component.scss'],
})
export class LenderUploadsComponent implements OnInit {
  @Output() success: EventEmitter<SuccessEvent> = new EventEmitter<SuccessEvent>();
  @Output() click: EventEmitter<FileInfo> = new EventEmitter<FileInfo>();
  @Output() complete: EventEmitter<FileInfo> = new EventEmitter<FileInfo>();
  @Output() upload: EventEmitter<boolean> = new EventEmitter<boolean>();


  private uploads: SuccessEvent[] = [];
  public  value = 0 ;
  public map: Map<string, SuccessEvent> = new Map<string, SuccessEvent>();

  uploadSaveUrl = 'https://svr2021.lawipac.com:8080/api/v1/lender-upload/'; // should represent an actual API endpoint
  uploadRemoveUrl =  'https://svr2021.lawipac.com:8080/api/v1/lender-upload-remove/'; // should represent an actual API endpoint

  public allUploads = [...range(30, 44 )];
  public displayedUploads: any[] = [];
  public filteredUploads: any[] = [];


  public skip = 0;
  public pageSize = 12;
  public total = 0;

  myRestrictions: FileRestrictions = {
    allowedExtensions: ['.pdf', '.xls', '.xlsx']
  };

  constructor(private auth: AuthService, private router: Router) {
  }


  ngOnInit(): void {
    this.uploadSaveUrl = this.auth.getUrl('lender-upload/');
    this.uploadRemoveUrl = this.auth.getUrl('lender-upload-remove/');
    this.loadDisplayedUploads();
  }



  public onClick( files: any): void{
    this.click.emit(files[0]);
  }

  public onSuccess(ss: SuccessEvent ): void {
    this.uploads.push(ss);
    this.map.set(ss.files[0].uid, ss);
    this.success.emit(ss);
    this.allUploads.unshift(this.allUploads.length + 100);
  }

  public onUpload(ss: UploadEvent ): void {
    this.upload.emit(true);
  }

  public onComplete(): void {
    this.upload.emit(false);
  }

  public hasResp(uid): boolean {
    let found = false;
    this.uploads.every(v => {
      if ( v.files[0].uid === uid ) {
        found = true;
        return false; // stop search
      }
    });
    return found;
  }

  public uploadProgress(prog: UploadProgressEvent): void {
      this.value = prog.percentComplete.valueOf();
  }
  public show( i: number): void{
    this.router.navigate(['/upload-details/' + i]);
  }


  public onPageChange(e: PageChangeEvent): void {
    this.skip = e.skip;
    this.pageSize = e.take;
    this.loadDisplayedUploads();
  }

  private loadDisplayedUploads(): void {
    this.filteredUploads = this.allUploads ;
    this.displayedUploads = this.filteredUploads.slice(this.skip, this.skip + this.pageSize);
    this.total = this.displayedUploads.length;
  }

  public onFilterUploads(hint: string): void {
    this.loadDisplayedUploads();
  }
}