openaire-library/searchPages/searchUtils/searchDownload.component.ts

import {Component, Input, ViewChild} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {AlertModal} from '../../utils/modal/alert';
import {ReportsService} from '../../services/reports.service';
import {ModalLoading} from '../../utils/modal/loading.component';
import {PiwikService} from '../../utils/piwik/piwik.service';
import {EnvProperties} from '../../utils/properties/env-properties';
import {ErrorCodes} from '../../utils/properties/errorCodes';

import 'rxjs';

@Component({
    selector: 'search-download',
    template: `
        <a [attr.uk-tooltip]="'title: Download'
        + ((totalResults > csvLimit)?' the first 2000 ':' ')
        + 'results'" [class]="isDisabled ? 'uk-disabled uk-link-muted' : 'uk-link-text'">
<!--          type: {{type}}-->
            <span class="clickable" (click)="downloadfile(downloadURLAPI+'?format=csv'+csvParams,type+'-report-'+((totalResults > csvLimit)?'2000 ':totalResults))">
                <span aria-hidden="true" class="glyphicon glyphicon-download"></span>
                <span  class="uk-icon">
                  <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="download" ratio="1">
                    <polyline fill="none" stroke="#000" points="14,10 9.5,14.5 5,10"></polyline>
                    <rect x="3" y="17" width="13" height="1"></rect>
                    <line fill="none" stroke="#000" x1="9.5" y1="13.91" x2="9.5" y2="3"></line>
                  </svg>
                </span> 
                Download Results
            </span>
        </a>
    <modal-loading></modal-loading>
    <modal-alert #AlertModalCsvError></modal-alert>
    `
})

export class SearchDownloadComponent {
    @Input() isDisabled: boolean = false;
    @Input() totalResults:number = 0;
    @Input() csvParams: string;
    @Input() type: string;
    @ViewChild(AlertModal) alertApplyAll: AlertModal;
    downloadURLAPI: string;

    sub: any;
    downloadFilePiwikSub: any;

    public csvLimit: number = 0;

    @ViewChild (ModalLoading) loading : ModalLoading ;
    // Alert box when something is wrong with CSV requests
    @ViewChild('AlertModalCsvError') alertCsvError;
    public isPiwikEnabled;
    public properties:EnvProperties;
    public errorCodes:ErrorCodes = new ErrorCodes();

    constructor (private route: ActivatedRoute, private _reportsService: ReportsService, private _piwikService:PiwikService) {}

    ngOnInit() {
      this.route.data
        .subscribe((data: { envSpecific: EnvProperties }) => {
          this.properties = data.envSpecific;
          this.csvLimit = data.envSpecific.csvLimit;
          this.downloadURLAPI = data.envSpecific.csvAPIURL;
          this.isPiwikEnabled = data.envSpecific.enablePiwikTrack;
        });
    }

    ngOnDestroy() {
      if(this.sub) {
        this.sub.unsubscribe();
      }
      if(this.downloadFilePiwikSub) {
        this.downloadFilePiwikSub.unsubscribe();
      }
    }

    denialOfDownload() {
        this.alertApplyAll.cancelButton = true;
        this.alertApplyAll.okButton = false;
        this.alertApplyAll.alertTitle = "Download Results in CSV";
        this.alertApplyAll.message = "Sorry, but the results are too many! Use the api instead!";
        this.alertApplyAll.cancelButtonText = "Ok";
        this.alertApplyAll.open();

        console.error("Error downloading file. Results are too many!");
        //this.handleError("Error downloading file. Results are too many!", err);
    }
    downloadfile(url:string,filename:string){
      //var newWindow = window.open("", "_parent");
      //var newWindow = window.open();
      //console.log("Downloading file: "+ url);
      this.openLoading();
      this.setMessageLoading("Downloading CSV file");

      this._reportsService.downloadCSVFile(url).subscribe(
          data => {
              this.closeLoading();
              //window.open(window.URL.createObjectURL(data),filename+".csv");
              //console.info("Fill window with data for csv");
            if(typeof document !== 'undefined'){
              var url = window.URL.createObjectURL(data);
              var a = window.document.createElement('a');
              window.document.body.appendChild(a);
              a.setAttribute('style', 'display: none');
              a.href = url;
              a.download = filename+".csv";
              a.click();
              window.URL.revokeObjectURL(url);
              a.remove(); // remove the element
            }
              //newWindow.location.assign(window.URL.createObjectURL(data));

              //window.location.href = window.URL.createObjectURL(data);

              if(this.isPiwikEnabled && (typeof document !== 'undefined')){
                this.downloadFilePiwikSub = this._piwikService.trackDownload(this.properties, url).subscribe();
              }
          },
          error => {
            //console.error("Error downloading the file.");
            this.handleError("Error downloading file: "+filename, error);

            //newWindow.close();
            this.closeLoading();
            this.confirmOpenCsvError();
          }/*,
          () => {
            console.log('Completed file download.');
            //setTimeout(function(){ newWindow.close(); }, 500);
          }*/
      );
    }


    public openLoading(){
      if(this.loading){
        this.loading.open();
      }
    }
    public closeLoading(){
      if(this.loading){
        this.loading.close();
      }
    }
    public setMessageLoading(message: string){
      if(this.loading){
        this.loading.message = message;
      }
    }

    public confirmOpenCsvError(){
      this.alertCsvError.cancelButton = false;
      this.alertCsvError.okButton = true;
      this.alertCsvError.alertTitle = "ERROR DOWNLOADING CSV FILE";
      this.alertCsvError.message = "There was an error in csv downloading. Please try again later.";
      this.alertCsvError.okButtonText = "OK";
      this.alertCsvError.open();
    }

    private handleError(message: string, error) {
      console.error("Search Download (component): "+message, error);
    }
}