D-Net

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';

import {Subscriber} from "rxjs";

import {properties} from "../../../../environments/environment";

@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'"

       (click)="downloadfile(downloadURLAPI+'?format=csv'+csvParams,type+'-report-'+((totalResults > csvLimit)?'2000 ':totalResults))">

      <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

    </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;

  @Input() piwikSiteId = null;

  @ViewChild(AlertModal) alertApplyAll: AlertModal;

  downloadURLAPI: string;

  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();

  subscriptions = [];

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

  }

  ngOnInit() {

        this.properties = properties;

        this.csvLimit =  this.properties.csvLimit;

        this.downloadURLAPI =  this.properties.csvAPIURL;

        this.isPiwikEnabled =  this.properties.enablePiwikTrack;

  }

  ngOnDestroy() {

    this.subscriptions.forEach(subscription => {

      if (subscription instanceof Subscriber) {

        subscription.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.subscriptions.push(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.subscriptions.push(this._piwikService.trackDownload(this.properties, this.piwikSiteId).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);

  }

}