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

import {Component, Input}                 from '@angular/core';
import {ViewChild}                from '@angular/core';
import {ViewEncapsulation}  from '@angular/core';
import {OnInit, AfterViewInit}            from '@angular/core';
import {Location}                         from '@angular/common';
import {ActivatedRoute, Router}                   from '@angular/router';
import {Title, Meta}                      from '@angular/platform-browser';
import {Subject}                       from 'rxjs';
import {DataTableDirective }              from 'angular-datatables';
import {EnvProperties}                    from '../../utils/properties/env-properties';
import {Filter, Value}                    from './searchHelperClasses.class';
import {SearchFields}       from '../../utils/properties/searchFields';
import {SearchCustomFilter, SearchUtilsClass} from './searchUtils.class';
import {StringUtils}                 from '../../utils/string-utils.class';
import {ModalLoading}                     from '../../utils/modal/loading.component';
import {SearchFilterModalComponent}       from './searchFilterModal.component';
import {ErrorCodes}                       from '../../utils/properties/errorCodes';
import {PiwikService}                     from '../../utils/piwik/piwik.service';
import { SEOService } from '../../sharedComponents/SEO/SEO.service';
import {HelperService} from "../../utils/helper/helper.service";
import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";

@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() hasPrefix: boolean = true;
  @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...";
  @Input() mapUrl: string = "";
  @Input() mapTooltipType: string ="content providers";
  @ViewChild (ModalLoading) loading : ModalLoading ;
  private searchFieldsHelper:SearchFields = new SearchFields();
  private queryParameters: Map<string, string>  = new Map<string,string>();
  public parameterNames:string[] =[];
  public parameterValues:string[] =[];

  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
  properties:EnvProperties;
  url = null;
  public pageContents = null;
  @Input() customFilter: SearchCustomFilter = null;
  @Input() enableEntitySelection: boolean = false;
  @Input() includeOnlyResultsAndFilter:boolean = false;
  @Input() showBreadcrumb:boolean = false;
  breadcrumbs:Breadcrumb[] = [];

  constructor (private route: ActivatedRoute,
               private router: Router,
               private location: Location,
               private _meta: Meta,
               private _title: Title,
               private _piwikService:PiwikService,
             private seoService: SEOService,
               private helper: HelperService) { }

  ngOnInit() {
    this.route.data
      .subscribe((data: { envSpecific: EnvProperties }) => {
        this.properties = data.envSpecific;
        this.getPageContents();
        this.isPiwikEnabled = data.envSpecific.enablePiwikTrack;
        if(typeof window !== 'undefined') {
          this.updateUrl(this.properties.domain+this.properties.baseLink+location.pathname);
          this.url =this.properties.domain+this.properties.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.searchUtils.size
        };
        this.updateTitle(this.pageTitle);
        var description = "Openaire, search, repositories, open access, type, content provider, funder, project, " + this.type + "," +this.pageTitle;
        this.updateDescription(description);
        this.seoService.createLinkForCanonicalURL(this.properties.domain+ this.properties.baseLink +this.router.url,false);
        this.breadcrumbs.push({name: 'home', route: '/'}, {name: this.pageTitle, route: null});


   }
  ngOnDestroy() {
     if(this.piwiksub){
        this.piwiksub.unsubscribe();
      }
      try{
        $.fn['dataTable'].ext.search.pop();
      }catch(e){
        console.error("An error occured in ngOnDestroy of SearchPageTableViewComponent ", e)
    }
  }
    ngAfterViewInit(): void {
      try{
       $.fn['dataTable'].ext.search.push((settings, data, dataIndex) => {
//console.info(dataIndex+": "+data);
//console.info(this.results);
          //if (this.filterData(this.results[dataIndex], this.searchUtils.keyword, this.filters)) {
          if(this.filterAll(this.results[dataIndex], this.searchUtils.keyword.toLowerCase(),this.filters)) {
            // console.info("filter true (keyword:"+this.searchUtils.keyword+")");

            return true;
          }
          // console.info("filter false (keyword:"+this.searchUtils.keyword+")");

          return false;
        });
      }catch(e){
        console.error("An error occured in ngAfterViewInit of SearchPageTableViewComponent ", e)
    }

    }


  totalPages(): number {
      let totalPages:any = this.searchUtils.totalResults/(this.searchUtils.size);
      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: string = "";
    if(this.hasPrefix) {
      _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?"?":"&")+'fv0=' + this.searchUtils.keyword;
      this.parameterNames.push("fv0");
      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;
    }
  }

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

  sizeChanged($event) {
    this.searchUtils.size = $event;
    var table = $('#dpTable').DataTable();
    table.page.len( this.searchUtils.size ).draw();
    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, searchUtils:SearchUtilsClass = null  ): any {
      if(searchUtils!=null) {
        this.searchUtils = searchUtils;
      }
      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;
        //console.info(result);
        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 = "";
              /*
              let index: number = -1;
              for(let i=0; i<this.columnNames.length; i++) {
                if(filter.title == this.columnNames[i]) {
                  index = i;
                }
              }
              */
              if(filter.title == "Type") {
                field = "type";
              } else if(filter.title == "Compatibility") {
                field = "compatibility";
              } else if(filter.title == "Funder") {
                field = "funder";
              } else if(filter.title == "Country") {
                field = "countries";
              }
              //console.info(row);
//console.info("|"+row[field]+"|"+"   "+"|"+value.name+"|");
              //if(row[field] == value.name) {
              if(row[field] &&
                ((filter.valueIsExact && (row[field].trim() == value.name.trim()))
                || (!filter.valueIsExact && (row[field].includes(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
              }*/
              for(let i=0; i<this.columnNames.length; i++) {
                if(filter.title == this.columnNames[i]) {
                  field = i;
                }
              }

              //if(row[field].trim() == value.name.trim()) {
              if((filter.valueIsExact && (row[field].trim() == value.name.trim()))
                || (!filter.valueIsExact && (row[field].includes(value.name)))){
                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);
    }
    public countFilters():number{
      var filters=0;
      for (let filter of this.filters){
         if(filter.countSelectedValues > 0){
             filters+=filter.countSelectedValues;
         }
       }
      return filters;
    }
  private getPageContents() {
    this.helper.getPageHelpContents(this.properties,  (this.customFilter) ? this.customFilter.valueId : null, this.router.url).subscribe(contents => {

      this.pageContents = contents;
    })
  }
}