D-Net

import {Component, Input, Output, EventEmitter, ViewChild} from '@angular/core';

import {Observable}       from 'rxjs';

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 uk-tooltip="title: Download results in csv file" class="" *ngIf="totalResults > 0 && totalResults <= csvLimit">

            <span class="clickable" (click)="downloadfile(downloadURLAPI+'?type='+type+'&format=csv'+csvParams,type+'-report-'+totalResults)">

            <!--a [href]="downloadURLAPI+'s'+'?type='+type+'&format=csv'+csvParams" target="_blank"-->

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

            <!--/a-->

            </span>

        </a>

        <!--*ngIf="totalResults > csvLimit" -->

        <!-- [attr.uk-tooltip]="'pos:right'" -->

        <span class="cursor-not-allowed " *ngIf="(!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING) || totalResults > csvLimit"

                    [attr.uk-tooltip]="'pos:top'"

                    [title]="'Download up to '+csvLimit+' results'">

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

        </span>

    <modal-loading></modal-loading>

    <modal-alert #AlertModalCsvError></modal-alert>

    `

})

export class SearchDownloadComponent {

    @Input() searchUtils;

    @Input() oldTotalResults:number = 0;

    @Input() loadPaging: boolean = true;

    @Input() totalResults:number = 0;

    @Input() csvParams: string;

    @Input() type: string;

    @ViewChild(AlertModal) alertApplyAll;

    private 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.isOpen = true;

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

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

    }

}