D-Net

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

import {Observable}       from 'rxjs/Observable';

import {Location} from '@angular/common';

import {Filter, Value,AdvancedField} from '../searchUtils/searchHelperClasses.class';

import {SearchResult}     from '../../utils/entities/searchResult';

import {SearchFields} from '../../utils/properties/searchFields';

@Component({

    selector: 'advanced-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>

                [(fields)]="fields"

                                      [(selectedFields)]="selectedFields"

                                      [(quantifiers)]="quantifiers"

                                      [(selectedQuantifiers)]="selectedQuantifiers"

                                      [(keywords)]="keywords"

                <div class="col-xs-6 col-sm-9 sidebar-offcanvas" id="sidebar"-->

                    <advanced-search-form

                     [entityType] = "entityType"

                     [(fieldIds)]="fieldIds"

                     [(fieldIdsMap)]="fieldIdsMap"

                     [(selectedFields)]="selectedFields"

                                          (queryChange)="queryChanged($event)">

                    </advanced-search-form>

                    <div class="text-right" *ngIf="results  && results.length>= size">

                        <search-paging [(page)] = "page" [(size)] = "size" [(results)] = "results" [(baseUrl)] = "baseURLWithParameters"  [(totalResults)] = "totalResults" ></search-paging>

                    </div>

                    <div>

                        <search-result [results]="results" [status]=status  [page]="page"></search-result>

                    </div>

                <!--/div>

            </div-->

        </div>

    </div>

    `

})

export class AdvancedSearchPageComponent {

  @Input() pageTitle = "";

  @Input() results = [];

  @Input() entityType;

  @Input() page:number = 1;

  @Input() size: number = 10;

  @Input() totalResults: number = 0;

  @Input() fieldIds:  string[];

  @Input() fieldIdsMap:{ [key:string]:{ name:string, operator:string, type:string, indexField:string }} ;

  @Input() selectedFields:AdvancedField[];

  @Input() baseUrl:string = '';

  @Input() status: number;

  @Input() simpleSearchUrl: string;

  private baseURLWithParameters:string = '';

  // private searchFields:SearchFields = new SearchFields();

  @Output() queryChange  = new EventEmitter();

  constructor (private location: Location) {

    console.log("Constr: AdvancedSearchPageComponent");

  }

  ngOnInit() {

    console.log("Init: AdvancedSearchPageComponent");

     this.totalResults = this.results.length;

  }

  public getSelectedFiltersFromUrl(params){

    for(var i=0; i< this.fieldIds.length ; i++){

         var fieldId =  this.fieldIds[i];

         var operatorId =  this.fieldIdsMap[fieldId].operator;

          if(params[fieldId] != undefined && params[operatorId] != undefined) {

            console.log(fieldId + " " + params[fieldId]+" Op: "+ operatorId + " "+ params[operatorId] );

             var values:string [] = decodeURIComponent(params[fieldId]).split(",");

             var operators:string [] = decodeURIComponent(params[operatorId]).split(",");

             console.log(values + " " + " Op: "+ operators  );

             if(values.length == operators.length){

               for(var j=0; j< values.length ; j++){

                 this.selectedFields.push(new AdvancedField(fieldId,this.fieldIdsMap[fieldId].name,this.fieldIdsMap[fieldId].type,values[j],operators[j]) )

               }

             }

         }

   }

   if(this.selectedFields.length == 0){

     this.selectedFields.push(new AdvancedField(this.fieldIds[0],this.fieldIdsMap[this.fieldIds[0]].name,this.fieldIdsMap[this.fieldIds[0]].type,"","and"));

   }

  }

  private createUrlParameters(includePage:boolean){

    var params="";

    var fields: { [key:string]:{ values:string[], operators:string[] }}={};

    for(var i = 0; i< this.selectedFields.length; i++){

      if(this.fieldIdsMap[this.selectedFields[i].id] != undefined && this.selectedFields[i].value.length > 0){

        if(!fields[this.selectedFields[i].id]){

          fields[this.selectedFields[i].id] = {values:[], operators:[]};

          fields[this.selectedFields[i].id].values =[];

          fields[this.selectedFields[i].id].operators =[];

        }

        fields[this.selectedFields[i].id].values.push(this.selectedFields[i].value);

        fields[this.selectedFields[i].id].operators.push(this.selectedFields[i].operatorId);

      }

    }

    for(var i = 0; i< this.fieldIds.length; i++){

      if(fields[this.fieldIds[i]]){

        params+="&"+this.fieldIds[i]+"="+fields[this.fieldIds[i]].values.join()+

        "&"+this.fieldIdsMap[this.fieldIds[i]].operator+"="+fields[this.fieldIds[i]].operators.join()

      }

    }

    if(includePage && this.page != 1){

      params += "&page="+this.page;

    }

    return params;

  }

  public createQueryParameters(){

    var params="";

    for(var i = 0; i< this.selectedFields.length; i++){

      console.info("Creating Parameter:" + this.selectedFields[i].id+" :"+this.selectedFields[i].value);

      if(this.fieldIdsMap[this.selectedFields[i].id] != undefined && this.selectedFields[i].value != ""){

        params +="&"+ this.selectedFields[i].id

        + "="+ encodeURIComponent(this.selectedFields[i].value)+"&"+this.fieldIdsMap[this.selectedFields[i].id].operator

        + "=" + this.selectedFields[i].operatorId;

      }

    }

    console.info("Parameter:" + params);

    return params;

  }

  clearFilters(){

  }

  goTo(page:number = 1){

      console.info("goto");

      //console.info("keyword: "+this.keyword);

    this.page = page;

    var urlParameters = this.createUrlParameters(true);

    var queryParameters = this.createQueryParameters();

    this.location.go(location.pathname,urlParameters);

    this.queryChange.emit({

        value: queryParameters

    });

  }

  queryChanged($event) {

     this.goTo(1);

  }

  pageChanged($event) {

    this.page = +$event.value;

    this.goTo(this.page);

  }

  /*

  * Update the url with proper parameters. This is used as base url in Paging Component

  */

  public updateBaseUrlWithParameters(){

    this.baseURLWithParameters = this.baseUrl + this.createUrlParameters(false);

  }

}