explore-services/src/app/searchPages/common/searchPage.component.ts

import {Component, Input, ViewChild, Output, EventEmitter} from '@angular/core';
import {JSONP_PROVIDERS}  from '@angular/http';
import {Observable}       from 'rxjs/Observable';
import { RouteParams, RouteConfig, ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated';
import {Location} from '@angular/common';
import {SearchResultComponent} from './searchResult.component';
import {SearchFilterComponent} from './searchFilter.component';
import {pagingFormatterNoLoad} from '../../common/pagingFormatterNoLoad.component';
import { Filter, Value} from './search.class';

@Component({
    selector: 'search-page',
    template: `

    <div class="container">
      <div class="page-header">
          <h1>{{pageTitle}}</h1>
      </div>
      <div>
        <div class="row row-offcanvas row-offcanvas-right">
          <div class="col-xs-12 col-sm-3">
            <a *ngIf="isFiltered()" (click)="clearFilters()" > Clear Filters</a>
            <p *ngFor="let filter of filters " >
              <search-filter [filter]="filter"   (change)="filterChanged($event)" >

              </search-filter>
             </p>

          </div>
          <div class="col-xs-6 col-sm-9 sidebar-offcanvas" id="sidebar">
            <form>
             <div class="input-group">
               <span class="input-group-addon" id="sizing-addon2">Filter</span>
               <input type="text" class="form-control" placeholder="Type keywords..." aria-describedby="sizing-addon2"  [(ngModel)]="keyword" >
               <span class="input-group-btn">
                 <button (click)="goTo(1)"  type="submit" class="btn btn-default">Search</button>
               </span>
             </div>
            </form>
            <div class="text-right" *ngIf="results  && results.length>= size">
                <paging-no-load [(currentPage)]="page" [totalResults]="totalResults" [size]="size"  (pageChange)="pageChanged($event)" > </paging-no-load>
            </div>
            <div>
            <p *ngFor="let result of results " >
              <search-result [id]="result.id" [title]="result.title"  >

              </search-result>
             </p>
            </div>

          </div>
        </div>
      </div>
    </div>

    `,
    directives:[SearchResultComponent, SearchFilterComponent, pagingFormatterNoLoad]
})
export class SearchPageComponent {
  @Input() pageTitle = "";
  @Input() results = [];
  @Input() filters = [];
  @Input() type;
  @Input() page:number = 1;
  @Input() size: number = 10;
  @Input() totalResults: number = 0;
  @Input() keyword:string = '';

  test= { value: 0};

  @Output() queryChange  = new EventEmitter();
  constructor (private location: Location) {

  }
  ngOnInit() {
    console.info("  page  - value: "+this.page);

  }

  changekeyword(){

  }

  private createUrlParameters(){
    var allLimits="";
    for (let filter of this.filters){
      var filterLimits="";
      if(filter.countSelectedValues > 0){
        for (let value of filter.values){
          if(value.selected == true){
            filterLimits+=((filterLimits.length == 0)?'':',') + value.id;
           }
        }
        allLimits+=((filterLimits.length == 0 )?'':((allLimits.length == 0)?'':'&') +filter.filterId + '='+ filterLimits) ;
      }
    }
    if(this.keyword.length > 0 ){
       allLimits+=((allLimits.length == 0)?'':'&') + 'keyword=' + this.keyword;
    }
    if(this.page != 1 ){
       allLimits+=((allLimits.length == 0)?'':'&') + 'page=' + this.page;
    }
    return allLimits;
  }
  private createQueryParameters(){
    var allLimits="";
    for (let filter of this.filters){
      if(filter.countSelectedValues > 0){
        var filterLimits="";
        for (let value of filter.values){
          if(value.selected == true){
            filterLimits+=((filterLimits.length == 0)?'':' or ') + filter.filterId + '='+ value.id;
           }
        }
        allLimits+=((filterLimits.length == 0 )?'':((allLimits.length == 0)?'':' and ')+'('+filterLimits +')') ;
      }
    }
    if(this.keyword.length > 0 ){
       allLimits+=((allLimits.length == 0)?'':' and ') + ' keyword=' + this.keyword;
    }
    return allLimits;
  }
  private isFiltered(){
    var filtered=false;
    for (let filter of this.filters){
       if(filter.countSelectedValues > 0){
           filtered = true;
           break;
       }
     }
    if(this.keyword.length > 0 ){
      filtered = true;
    }
    return filtered;
  }
  clearFilters(){
    for (let filter of this.filters){
      if(filter.countSelectedValues > 0){
         for (let value of filter.values){
          if(value.selected == true){
            value.selected = false;
           }
        }
        filter.countSelectedValues = 0;
      }
    }
    if(this.keyword.length > 0 ){
      this.keyword ='';
    }
  }

  goTo(page:number = 1){
    this.page = page;
    var urlParameters = this.createUrlParameters();
    var queryParameters = this.createQueryParameters();
    this.location.go(location.pathname,urlParameters);
    this.queryChange.emit({
     value: queryParameters
   });

  }
  filterChanged($event){
    this.goTo(1);
  }
  pageChanged($event) {
    this.page = +$event.value
    this.goTo(this.page);
  }

}