explore-services/portal-2/src/app/claimPages/linking/bulkClaim/bulkClaim.component.ts

import {Component, Input, Output, EventEmitter,ViewChild} from '@angular/core';
import {Observable}       from 'rxjs/Observable';
import {SearchCrossrefService} from '../../../services/searchCrossref.service';
import {ModalLoading} from '../../../utils/modal/loading.component';



@Component({
    selector: 'bulk-claim',
    template: `
    <form class="form-inline">
      <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input id="exampleInputFile"  type="file"  (change)="fileChangeEvent($event)" placeholder="Upload file..." />
      </div>
      <div class="form-group">
        <button class="btn btn-success" type="button" (click)="upload()">Upload</button>
      </div>
    </form>
    <p class="help-block">Upload a csv file with DOIs. For each DOI, metadata will be fetched from CrossRef. Available Results can be linked with the selected Projects and Contexts</p>
    <div *ngIf="showReport" class="alert alert-info" role="alert" >
    {{all}} DOIs found in . {{found}} fetched from CrossRef, {{duplicate}} were duplicates and {{notFound}} not found in crossref.

    </div>
      <div *ngIf="errorMessage.length > 0 "> <div class="alert alert-danger" role="alert">{{errorMessage}}</div></div>
    <modal-loading [message]= "'Please wait...'"></modal-loading>
    `

})
//[(ngModel)]="date"
export class BulkClaimComponent {
  filesToUpload: Array<File>;
  navigateTo: string = "Search";
  source: string = "crossref";
  type : string = "publication";
  resultsFromSearch:number;
  @Input() public select:boolean = true ;
  @Input() public publications;
  // @Output() publicationsChange = new EventEmitter();
  all:number = 0;
  allIds:string[] = [];
  found:number = 0;
  foundIds:string[] = [];
  duplicate:number = 0;
  duplicateIds:string[] = [];
  notFound:number = 0;
  notFoundIds:string[] = [];
  todayDate = '';
  nextDate = '';
  showReport:boolean = false;
  @ViewChild (ModalLoading) loading : ModalLoading ;
  errorMessage = "";
  infoMEssage = "";
  constructor(private _searchCrossrefService: SearchCrossrefService) {
      this.filesToUpload = [];
      var myDate = new Date();
      this.todayDate = myDate.getFullYear()+ "-" +(myDate.getMonth() + 1) + "-" + myDate.getDate() ;
      this.nextDate =  (myDate.getFullYear()+100)+ "-" +(myDate.getMonth() + 1) + "-" + myDate.getDate() ;

  }
  ngOnInit() {}

  upload() {
    this.showReport = false;
    this.errorMessage = "";
    if(this.filesToUpload.length == 0){
      this.errorMessage = "There is no selected file to upload.";
      return ;
    }
    this.makeFileRequest("http://localhost:8000/upload", [], this.filesToUpload).then((result) => {
          var k = (result as any).split('\n');  // I have used space, you can use any thing.
          var i = 0;
          this.all = 0;
          this.duplicate = 0;
          this.duplicateIds = [];
          this.allIds = [];
          this.found = 0;
          this.foundIds = [];
          this.publications.slice(0,this.publications.length);
          this.notFound = 0;
          this.notFoundIds = [];

          for(i=0;i<k.length;i++){
            if(k[i] && k[i] != null ){

              this.all++;
              var id=k[i];
              if(this.allIds.indexOf(id)>-1){
                this.duplicate++;
                this.duplicateIds.push(id);
              }else{
                this.allIds.push(id);
                this.fetchResult(id);
              }
             }

         }

       }, (error) => {
          console.error(error);
          // this.loading.close();
          this.errorMessage = "An error occured while uploading...";
      });
  }


  fileChangeEvent(fileInput: any){
      this.filesToUpload = <Array<File>> fileInput.target.files;
  }

  makeFileRequest(url: string, params: Array<string>, files: Array<File>) {
      return new Promise((resolve, reject) => {
          var formData: any = new FormData();
          var xhr = new XMLHttpRequest();
          for(var i = 0; i < files.length; i++) {
              formData.append("uploads[]", files[i], files[i].name);
          }
          xhr.onreadystatechange = function () {
              if (xhr.readyState == 4) {
                  if (xhr.status == 200) {
                      resolve(xhr.response);
                  } else {
                      reject(xhr.response);
                  }
              }
          }
          xhr.open("POST", url, true);
          xhr.send(formData);
      });
  }

  fetchResult(id:string){
        this._searchCrossrefService.searchCrossrefByDOI(id).subscribe(
          data => {

            var crossrefResult = data.items[0];
            if(data.items.length > 0){
               this.found++;
              this.foundIds.push(id);
              var result = {id: id, type :'publication', source : 'crossref',
              title: crossrefResult.title,url: crossrefResult.URL, result: crossrefResult, accessRights: 'OPEN', embargoEndDate: this.nextDate, date : crossrefResult.created['date-time']};
              this.publications.push(result);
              // this.publicationsChange.emit({
              //    value: this.publications
              //  });

            }else{
               this.notFound++;
              this.notFoundIds.push(id);
            }
            this.endOfFetching();
           },
          err => {
            console.error(err);
            this.notFound++;
            this.notFoundIds.push(id);
            this.endOfFetching();
          }
        );
  }

  endOfFetching(){
    console.info("here");
    if(this.all == this.found+this.notFound+ this.duplicate ){
      this.showReport = true;
      // this.loading.close();
      console.debug("theeere");
    }

  }
}