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

import {
  Component,
  Input,
  Output,
  EventEmitter,
  ViewChild,
  ElementRef,
  OnInit,
  OnChanges,
  SimpleChanges
} from '@angular/core';
import { Filter, Value} from './searchHelperClasses.class';
import {ActivatedRoute, NavigationStart, Router} from "@angular/router";
import {properties} from "../../../../environments/environment";
import 'rxjs/add/operator/filter';
@Component({
    selector: 'search-filter',
    templateUrl: 'searchFilter.component.html'
})

export class SearchFilterComponent implements OnInit, OnChanges{

  @Input() filter:Filter;
  @Input() showResultCount:boolean = true;
  @Input() isDisabled:boolean = false;
  @Input() addShowMore:boolean = true;
  @Input() showMoreInline: boolean = true;
  @Input() filterValuesNum: number = 6;
  public showAll:boolean = false;
  public _maxCharacters:number =28;

  @Output() toggleModal = new EventEmitter();

  @Output() modalChange = new EventEmitter();
  @Output() onFilterChange = new EventEmitter();
  keyword = "";
  sortBy = "name";
  queryParams = {};
  @Input() actionRoute:boolean = false;
  @Input() quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string };
  public isOpen:boolean=false;

    constructor (private _router: Router, private route: ActivatedRoute) {
    }

    ngOnInit() {
      this.route.queryParams.subscribe(params => {
        this.queryParams = Object.assign({}, params);
      });
      this.filter.values = this.filter.values.filter(value => !value.name.toLowerCase().includes('unknown') && !value.name.toLowerCase().includes('not available'));
      if(this.filter.filterType == "radio"){
        this.filter.radioValue = "";
        this.filter.values.forEach(value => {
          if(value.selected){
            this.filter.radioValue = value.id
          }
        });
      }
    }
    
    ngOnChanges(changes: SimpleChanges) {
      if(changes.filter) {
        this.filter.values = this.filter.values.filter(value => !value.name.toLowerCase().includes('unknown') && !value.name.toLowerCase().includes('not available'));
        if(this.filter.filterType == "radio"){
          this.filter.radioValue = "";
          this.filter.values.forEach(value => {
            if(value.selected){
              this.filter.radioValue = value.id
            }
          });
        }
      }
    }
  
  public _formatTitle(title,length){
      return (((title+" ("+length+")").length >this._maxCharacters)?(title.substring(0,(this._maxCharacters - (" ("+length+")").length - ('...').length))+"..."):title)+" ("+(length>95?"100":length)+")";
    }
    public _formatName(value){
      //let maxLineLength = 24;
      let maxLineLength = 35;

      //1 space after checkbox
      //3 space before number + parenthesis
      if(!this.showResultCount && value.name.length+1 > maxLineLength ){
        return value.name.substr(0, maxLineLength -3 -1)+'...';
      }
      if(value.name.length+value.number.toLocaleString().length +1 +3> maxLineLength){
        return value.name.substr(0, (maxLineLength- 3 -4 - value.number.toLocaleString().length))+'...';
      }

      return value.name;
    }

    filterKeywords(value){
      if(this.keyword.length > 0){
        if(value.toLowerCase().indexOf(this.keyword.toLowerCase()) ==-1){
          return false;
        }
      }
      return true;
    }
    filterChange(selected:boolean){
      if(selected){
          this.filter.countSelectedValues++;
      }else{
          this.filter.countSelectedValues--;
      }
      this.onFilterChange.emit({
          value: this.filter
      });
    }
    uniqueFilterChange(value: Value) {
      let tmp = value.selected;
      value.selected = !tmp;

      if(value.selected){
        this.filter.countSelectedValues = 1;
      }else{
        this.filter.countSelectedValues = 0;
      }

      this.filter.values.forEach(value => {
          value.selected = (value.id == this.filter.radioValue);
      });
      this.onFilterChange.emit({
        value: this.filter
      });
    }
    clearFilter() {
      for (var i=0; i < this.filter.values.length; i++){
        this.filter.values[i].selected = false;
      }
      this.filter.countSelectedValues = 0;
      this.onFilterChange.emit({
        value: this.filter
      });
      this.filter.radioValue = "";
    }

  getSelectedAndTopValues(filter, topNum: number = 6):any{
    var values = [];

    for (let i=0; i < topNum; i++){
      if(filter.values.length <= i) {
        break;
      }
      values.push(filter.values[i]);
    }

    if(filter.countSelectedValues >0){
      for (let i=topNum; i < filter.values.length; i++){
        if(filter.values[i].selected){
          values.push(filter.values[i]);
        }
      }
    }

    return values;
  }

    getSelectedValues(filter, sortBy:string = "num"):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]);
          }
        }
      }
      if(sortBy == "name"){

        selected.sort((n1,n2)=> {
          if (n1.name > n2.name) {
              return 1;
          }

          if (n1.name < n2.name) {
              return -1;
          }

          return 0;
        });
      }
      return selected;

    }
    getNotSelectedValues(filter, sortBy:string = "num"):any{
      var notSselected = [];
      for (var i=0; i < filter.values.length; i++){
        if(!filter.values[i].selected){
          notSselected.push(filter.values[i]);
        }
      }

      if(sortBy == "name"){

        notSselected.sort((n1,n2)=> {
          if (n1.name > n2.name) {
              return 1;
          }
          if (n1.name < n2.name) {
              return -1;
          }

          return 0;
        });
      }
      return notSselected;
    }

    sort(values: Value[]) {
      let sorted: Value[] = values.slice();
      if(this.sortBy == "name"){

        sorted.sort((n1,n2)=> {
          if (n1.name.toLowerCase() > n2.name.toLowerCase()) {
            return 1;
          }

          if (n1.name < n2.name) {
            return -1;
          }

          return 0;
        });
      }
      return sorted;
    }

  toggle() {
    this.isOpen = !this.isOpen;
  }

  getFilterName(value){
    let name = value.name +" ("+ value.number.format()+")";
    console.log(name);
    return name;
  }
  getRoute(){
    return properties.baseLink + this._router.url.split("?")[0];
  }
  getParams(filter:Filter, value:Value){
      let params = Object.assign({}, this.queryParams);
      let qf=false;
      if(this.quickFilter && this.quickFilter.filterId == filter.filterId && this.quickFilter.selected && value.id == this.quickFilter.value){
        params['qf']="false";
        qf=true;
      }
      if(params[filter.filterId] && params[filter.filterId].indexOf(encodeURIComponent(value.id))==-1 && !qf) {
        //has other values of this filter --> add this value
        params[filter.filterId] = params[filter.filterId] + ',' + '"' + encodeURIComponent(value.id) + '"';
      }else if(params[filter.filterId] && params[filter.filterId].indexOf(encodeURIComponent(value.id))!=-1) {
        // has this filter and the value -- > remove it

        let values = params[filter.filterId].split(',');
        values.splice(values.indexOf('"' + encodeURIComponent(value.id)+'"'), 1);
        params[filter.filterId] =values.join(',');
        if(values.length == 0){
          delete params[filter.filterId];
        }
      } else if(!qf){
        //has no filter, no value --> add the value
          params[filter.filterId] = '"' + encodeURIComponent(value.id) + '"' ;
      }
      delete params['page'];
      return params;
  }
}