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

import {Component, Input}                 from '@angular/core';
import {ViewChild, Output}                from '@angular/core';
import {EventEmitter, ViewEncapsulation}  from '@angular/core';
import {OnInit, AfterViewInit}            from '@angular/core';
import {Location}                         from '@angular/common';
import {ActivatedRoute}                   from '@angular/router';
import {Title, Meta}                      from '@angular/platform-browser';

import {Observable}                       from 'rxjs/Observable';
import {Subject}                          from 'rxjs/Subject';

import {DataTableDirective }              from 'angular-datatables';

import {EnvProperties}                    from '../../utils/properties/env-properties';

import {Filter, Value}                    from './searchHelperClasses.class';
import {SearchResult}                     from '../../utils/entities/searchResult';
import {SearchFields, FieldDetails}       from '../../utils/properties/searchFields';
import {SearchUtilsClass}                 from './searchUtils.class';
import {DOI, StringUtils}                 from '../../utils/string-utils.class';
import {ModalLoading}                     from '../../utils/modal/loading.component';
import {SearchFilterComponent}            from './searchFilter.component';
import {SearchFilterModalComponent}       from './searchFilterModal.component';
import {ErrorCodes}                       from '../../utils/properties/errorCodes';
import {PiwikService}                     from '../../utils/piwik/piwik.service';
//import {SearchDataprovidersService} from '../../services/searchDataproviders.service';

@Component({
    selector: 'search-page-table',
    templateUrl:'searchPageTableView.component.html',
    styles: [`
      #dpTable_info, #dpTable_paginate,  #dpTable_length,  #dpTable_filter{
        display: none;
      }

      `],
      encapsulation: ViewEncapsulation.None // this used in order styles to work

  })
export class SearchPageTableViewComponent  implements OnInit, AfterViewInit {
  @Input() piwikSiteId = null;
  @Input() pageTitle = "";
  @Input() results;
  @Input() filters = [];
  @Input() columnNames = [];
  @Input() type:string = "";
  @Input() entityType: string = "";
  @Input() searchUtils:SearchUtilsClass;// = new SearchUtilsClass();
  //@Output() downloadClick = new EventEmitter();
  @Input() showResultCount:boolean = true;
  @Input() showRefine:boolean = true;
  @Input() refineFields = [];
  //@Input() csvParams: string;
  //@Input() csvPath: string;
  @Input() openaireLink: string;
  @Input() searchViewLink: string;
  @Input() disableForms: boolean = false;
  @Input() enableSearchView: boolean = true;
  @Input() searchFormClass: string = "searchForm";
  @Input() formPlaceholderText = "Type Keywords...";
  @ViewChild (ModalLoading) loading : ModalLoading ;
  private searchFieldsHelper:SearchFields = new SearchFields();
  private queryParameters: Map<string, string>  = new Map<string,string>();
  public countFilters= 0;
  public parameterNames:string[] =[];
  public parameterValues:string[] =[];

  public rowsOnPage:number  = 10;
  public isPiwikEnabled;


  @ViewChild (SearchFilterModalComponent) searchFilterModal : SearchFilterModalComponent ;
  public currentFilter: Filter;
  public errorCodes:ErrorCodes = new ErrorCodes();
  piwiksub: any;
  dtOptions: DataTables.Settings = {};
  showTable = false; filteringAdded = false;
  @ViewChild(DataTableDirective) datatableElement: DataTableDirective;
  dtTrigger: Subject<any> = new Subject(); //necessary

  constructor (private route: ActivatedRoute,
               private location: Location,
               private _meta: Meta,
               private _title: Title,
               private _piwikService:PiwikService) { }

  ngOnInit() {
    this.route.data
      .subscribe((data: { envSpecific: EnvProperties }) => {


        this.isPiwikEnabled = data.envSpecific.enablePiwikTrack;
        if(typeof window !== 'undefined') {
          this.updateUrl(data.envSpecific.baseLink+location.pathname);
        }
        if(typeof document !== 'undefined' && this.isPiwikEnabled){
          this.piwiksub = this._piwikService.trackView(data.envSpecific, this.pageTitle, this.piwikSiteId).subscribe();
        }
      });
        this.dtOptions = {
          "paging": true,
          "searching": false,
          "lengthChange": false,
          "pageLength": this.rowsOnPage
        };
        this.updateTitle(this.pageTitle);
        var description = "Openaire, search, repositories, open access, type, content provider, funder, project, " + this.type + "," +this.pageTitle;
        this.updateDescription(description);

   }
  ngOnDestroy() {
     if(this.piwiksub){
        this.piwiksub.unsubscribe();
      }

  }
    ngAfterViewInit(): void {
       $.fn['dataTable'].ext.search.push((settings, data, dataIndex) => {

          if (this.filterData(data, this.searchUtils.keyword, this.filters)) {
            return true;
          }
          return false;
        });


    }


  totalPages(): number {
      let totalPages:any = this.searchUtils.totalResults/(this.rowsOnPage);
      if(!(Number.isInteger(totalPages))) {
          totalPages = (parseInt(totalPages, 10) + 1);
      }
      return totalPages;
  }

  toggleModal($event) {
    this.currentFilter = $event.value;
    this.searchFilterModal.open();

  }

  updateDescription(description:string) {
    this._meta.updateTag({content:description},"name='description'");
    this._meta.updateTag({content:description},"property='og:description'");
  }
  updateTitle(title:string) {
    var _prefix ="OpenAIRE | ";
    var _title = _prefix + ((title.length> 50 ) ?title.substring(0,50):title);
    this._title.setTitle(_title);
    this._meta.updateTag({content:_title},"property='og:title'");
  }
  updateUrl(url:string) {
    this._meta.updateTag({content:url},"property='og:url'");
  }

public getParametersFromUrl(params) {
  for(var i=0; i< this.refineFields.length ; i++) {
    var filterId =  this.refineFields[i];
    if(params[filterId] != undefined) {
      if(this.queryParameters == undefined){
        this.queryParameters = new Map<string,string>();
      }
      this.queryParameters[filterId]=decodeURIComponent(params[filterId]);
    }
  }
}
 /*
 * Mark as check the new filters that are selected, when you get them from search
 */
  public checkSelectedFilters(filters:Filter[]){

    this.filters = filters;
       for(var i=0; i< filters.length ; i++){
            var filter:Filter = filters[i];
            filter.countSelectedValues = 0;

              if(this.queryParameters[filter.filterId] != undefined) {
                let values = (decodeURIComponent(this.queryParameters[filter.filterId])).split(/,(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)/,-1);
                     for(let filterValue of filter.values) {
                       if(values.indexOf(StringUtils.quote(filterValue.id)) > -1) {
                            filterValue.selected = true;
                            filter.countSelectedValues++;
                         }else{
                           filterValue.selected = false;
                         }
                    }
            }else{
              for(let filterValue of filter.values) {
                 filterValue.selected = false;
              }
            }
        }

        return filters;
  }

  /*
  *
  */
  private createUrlParameters(filters:Filter[], includePage:boolean){
    var allLimits="";//location.search.slice(1);
    this.parameterNames.splice(0,this.parameterNames.length);
    this.parameterValues.splice(0,this.parameterValues.length);

    for (let filter of filters){
      var filterLimits="";
      if(filter.countSelectedValues > 0){
        for (let value of filter.values){
          if(value.selected == true){
            filterLimits+=((filterLimits.length == 0)?'':',') +'"'+ StringUtils.URIEncode(value.id)+'"';
           }
        }
        this.queryParameters[filter.filterId]=filterLimits;
        if(filterLimits.length > 0){
          this.parameterNames.push(filter.filterId);
          this.parameterValues.push(filterLimits);
        }
        allLimits+=(allLimits.length==0?"?":"&")+((filterLimits.length == 0 )?'':filter.filterId + '='+ filterLimits) ;
      }
    }
    if(this.searchUtils.keyword.length > 0 ){
       allLimits+=(allLimits.length==0?"?":"&")+'keyword=' + this.searchUtils.keyword;
      this.parameterNames.push("keyword");
      this.parameterValues.push(this.searchUtils.keyword);
     }

    return allLimits;
  }

  public isFiltered(){
    var filtered=false;
    for (let filter of this.filters){
       if(filter.countSelectedValues > 0){
           filtered = true;
           break;
       }
     }
    if(this.searchUtils.keyword.length > 0 ){
      filtered = true;
    }
    return filtered;
  }
  private clearKeywords(){
    if(this.searchUtils.keyword.length > 0 ){
      this.searchUtils.keyword ='';
    }
    this.goTo(1);
  }
  private clearFilters(){
    for (var i =0 ; i <  this.filters.length; i++) {
         for (var j=0; j <  this.filters[i].values.length; j++) {
          if(this.filters[i].values[j].selected) {
            this.filters[i].values[j].selected = false;
          }
         }
        this.filters[i].countSelectedValues = 0;
    }
    this.clearKeywords();
  }

  private removeFilter(value:Value,filter:Filter){
    filter.countSelectedValues--;
    if(value.selected == true){
      value.selected = false;
     }
    this.goTo(1);
  }
  goTo(page:number = 1){

    this.searchUtils.page=page;
   var table = $('#dpTable').DataTable();

   table.page( page - 1  ).draw( false );

   // Object { page: 0, pages: 3, start: 0, end: 10, length: 10, recordsTotal: 28, recordsDisplay: 21, serverSide: false }
   var info = table.page.info();
   this.searchUtils.totalResults = info.recordsDisplay;

    var urlParameters = this.createUrlParameters(this.filters,true);
    this.location.go(location.pathname,urlParameters);

  }

  filterChanged($event){
       this.goTo(1);
  }
  keywordChanged($event) {
       this.searchUtils.keyword = $event.value;
       this.goTo(1);
  }
/*
	downloadClicked($event) {
		if($event.value == true) {
		    var queryParameters = this.createSearchQueryParameters(this.filters);

		    this.downloadClick.emit({
		        value: queryParameters
		    });
		}
	}
*/


  getSelectedValues(filter):any{
    var selected = [];
    if(filter.countSelectedValues >0){
      for (var i=0; i < filter.values.length; i++){
        if(filter.values[i].selected){
          selected.push(filter.values[i]);
        }
      }
    }
    return selected;

  }
  /*
  Trigger a table draw in order to get the initial filtering
  */
  triggerInitialLoad(){
      setTimeout(function(){
        var table = $('#dpTable').DataTable();
        table.page( 0  ).draw( false );

      }, 500);
  }

/*
Transform initial - not filtered results to get the filtered number
*/
    transform(results): any {
      if(results.length > 0) {
        var errorCodes:ErrorCodes = new ErrorCodes();
        this.searchUtils.status = errorCodes.LOADING;

        var result = results.filter(row=>this.filterAll(row, this.searchUtils.keyword.toLowerCase(),this.filters));

        let oldTotal = this.searchUtils.totalResults;
        this.searchUtils.totalResults = result.length;

        var errorCodes:ErrorCodes = new ErrorCodes();
        this.searchUtils.status = errorCodes.DONE;
        if(this.searchUtils.totalResults == 0 ){
          this.searchUtils.status = errorCodes.NONE;
        }

        // if(oldTotal != this.searchUtils.totalResults) {
        //   args[3].detectChanges();
        // }
         return result;
      }
       return [];
    }

    filterAll(row: any, query: string, filters:Filter[]) {
      let returnValue: boolean = false;

      if(query) {
        if(row.title && row.title.name.toLowerCase().indexOf(query) > -1) {
          returnValue = true;
        }

        if(row.type && row.type.toLowerCase().indexOf(query) > -1) {
          returnValue = true;
        }

        if(row.countries && row.countries.length > 0) {
          for(let country of row.countries) {
            if(country.toLowerCase().indexOf(query) > -1) {
              returnValue = true;
              break;
            }
          }
        }

        if(row.compatibility && row.compatibility.toLowerCase().indexOf(query) > -1) {
          returnValue = true;
        }

        if(row.organizations && row.organizations.length > 0) {
          for(let organization of row.organizations) {
            if(organization.name.toLowerCase().indexOf(query) > -1) {
              returnValue = true;
              break;
            }
          }
        }

        if(row.name && row.name.toLowerCase().indexOf(query) > -1) {
          returnValue = true;
        }

        if(row.acronym && row.acronym.toLowerCase().indexOf(query) > -1) {
          returnValue = true;
        }

        if(row.grantId && row.grantId.toLowerCase().indexOf(query) > -1) {
          returnValue = true;
        }

        if(row.funder && row.funder.toLowerCase().indexOf(query) > -1) {
          returnValue = true;
        }

        if(!returnValue) {
          return false;
        }
      }

      for (let filter of filters){
        if(filter.countSelectedValues > 0){
          for (let value of filter.values){
            if(value.selected == true){

              // make it generic in future commit
              let field:string = "";
              if(filter.title == "Type") {
                field = "type";
              } else if(filter.title == "Compatibility Level") {
                field = "compatibility";
              } else if(filter.title == "Funder") {
                field = "funder";
              }

              if(row[field] == value.name) {
                returnValue = true;
                if(filter.filterOperator == "or") {
                  break;
                }
              } else {
                  if(filter.filterOperator == "and") {
                    return false;
                  }
                  returnValue = false;
              }
            }
          }
          if(!returnValue) {
            return false;
          }
        }
      }

      return true;
    }
    filterQuery(data, query){
      if(data.toLowerCase().indexOf(query.toLowerCase()) > -1){
        return true;
      }else{
        return false;
      }
    }
    filterData(row: any, query: string, filters:Filter[]) {


      let returnValue: boolean = false;

      if(query) {
        for(var i=0; i <this.columnNames.length; i++){
          var r= this.filterQuery(row[i], query);
          // console.log(query+" "+ row+" "+r);
          if(r) {
            returnValue = true;
            break;
          }
        }

        if(!returnValue) {
          return false;
        }
      }

      for (let filter of filters){
        if(filter.countSelectedValues > 0){
          for (let value of filter.values){
            if(value.selected == true){
              let field = 1;
              if(filter.title == "Type") {
                field = 1;
              } else if(filter.title == "Compatibility Level") {
                field = 4;
              } else if(filter.title == "Funder") {
                field = 3
              }
              r= this.filterQuery(row[field], value.name);
              if(r) {
                returnValue = true;
                if(filter.filterOperator == "or") {
                  break;
                }
              } else {
                  if(filter.filterOperator == "and") {
                    return false;
                  }
                  returnValue = false;
              }
            }
          }
          if(!returnValue) {
            return false;
          }
        }
      }

      return true;
    }

    public encode(param: string): string {
      return StringUtils.URIEncode(param);
    }
}