[Library|Trunk]

- QuickSelection component:
	- change resultTypes to a Filter
	- use search-filter compoonent to show the types
	- add actionRoute property
- Action route:
	- add in filters and range filters,
	- set it true in search pages, false for filters in claims




git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59632 d315682c-612b-4755-9ff5-7f18f6832af3

claims/claim-utils/claimProjectSearchForm.component.html

@@ -151,7 +151,7 @@
         </li>
       </ng-container>
       <search-filter *ngFor="let filter of filters " [isDisabled]="false" [filter]="filter" [showResultCount]=true
-                     (onFilterChange)="filterChanged($event)"></search-filter>
+                     (onFilterChange)="filterChanged($event)" [actionRoute]="false"></search-filter>
     </div>
     <div class="uk-width-expand@m uk-width-1-1@s uk-first-column">
      <!-- <div *ngIf="openaireResultsNum != null && openaireResultsNum > 0" class="uk-clearfix portal-hr ">

claims/claim-utils/claimResultSearchForm.component.html

@@ -173,7 +173,7 @@
         <search-filter *ngFor="let filter of openaireResultsfilters " [isDisabled]="openaireResultsStatus ==
                             errorCodes.LOADING" [filter]="filter"
                        [showResultCount]=true
-                       (onFilterChange)="filterChanged($event)"></search-filter>
+                       (onFilterChange)="filterChanged($event)" [actionRoute]="false"></search-filter>
       </div>
       <div class="uk-width-expand@m uk-width-1-1@s uk-first-column">
         <div class="uk-margin-top">

searchPages/searchUtils/newSearchPage.component.html

@@ -8,9 +8,9 @@
         </span>
       </span>
     </ng-container>
-    <ng-container *ngIf="selectedTypesNum > 0 && resultTypes">
+    <ng-container *ngIf="resultTypes.countSelectedValues > 0 && resultTypes">
-      <ng-container *ngFor="let type of resultTypeOptions; let i = index;  let end = last; ">
+      <ng-container *ngFor="let type of resultTypes.values; let i = index;  let end = last; ">
-        <ng-container *ngIf="resultTypes[type.id] == true">
+        <ng-container *ngIf="type.selected">
          <span [title]="'Remove '+ type.name" (click)="removeResultType(type.id) "
                [class]="((disableForms || disableRefineForms) ? 'uk-disabled' : 'clickable') + ' uk-grid-margin'">
             <span class="selectedFilterLabel ">
@@ -81,7 +81,8 @@
   </div>
 </ng-template>
 <ng-template #filters_column>
-  <div class="uk-width-1-1 uk-margin-top">
+  <div [class.filterLoading]="(disableForms || disableRefineForms)">
+  <div class="uk-width-1-1 uk-margin-top" >
     <div class="uk-grid uk-flex uk-flex-bottom">
 <!--      *ngIf="(selectedRangeFilters+selectedFilters + selectedTypesNum  > 0)
 || (filters.length > 0 && (results.length > 0 || disableForms))"-->
@@ -114,20 +115,20 @@
         <search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
                        [isDisabled]="disableForms || disableRefineForms"
                        [filter]="filters[0]" [showResultCount]=showResultCount
-                       (onFilterChange)="filterChanged($event)"></search-filter>
+                       (onFilterChange)="filterChanged($event)" [quickFilter]="quickFilter"
+                       [actionRoute]="true"></search-filter>
       </li>
     </ng-container>
     <li *ngIf="resultTypes && (filters.length > 0)">
-      <quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged()"
+      <quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged($event)"
-                        [isDisabled]="disableForms || disableRefineForms"
+                        [isDisabled]="disableForms || disableRefineForms" [vertical]="true"
-                        [quickFilter]="quickFilter" [QFselected]="(quickFilter)?quickFilter.selected:null"
+                        [properties]="properties" [actionRoute]="true">
-                        [properties]="properties" [vertical]="true" [delayTime]="0">
       </quick-selections>
     </li>
     <ng-container *ngFor="let filter of rangeFilters">
       <li>
         <range-filter [isDisabled]="disableForms || disableRefineForms" [filter]="filter"
-                      (onFilterChange)="filterChanged($event)"></range-filter>
+                      (onFilterChange)="filterChanged($event)" [actionRoute]="true"></range-filter>
       </li>
     </ng-container>
     <ng-container *ngFor="let filter of filters ">
@@ -135,10 +136,11 @@
         <search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
                        [isDisabled]="disableForms || disableRefineForms"
                        [filter]="filter" [showResultCount]=showResultCount
-                       (onFilterChange)="filterChanged($event)"></search-filter>
+                       (onFilterChange)="filterChanged($event)" [actionRoute]="true"></search-filter>
       </li>
     </ng-container>
   </ul>
+  </div>
 </ng-template>
 
 

searchPages/searchUtils/newSearchPage.component.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, Input, Output, ViewChild} from '@angular/core';
+import {ChangeDetectorRef, Component, ElementRef, Input, Output, ViewChild} from '@angular/core';
 import {Location} from '@angular/common';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Meta, Title} from '@angular/platform-browser';
@@ -79,9 +79,9 @@ export class NewSearchPageComponent {
   @Input() keywordFields = [];
   @Input() simpleView: boolean = true;
   @Input() formPlaceholderText = "Type Keywords...";
-  @Input() resultTypes = null;
+  @Input() resultTypes:Filter = {values:[],filterId:"type", countSelectedValues: 0, filterType: 'checkbox', originalFilterId: "", valueIsExact: true, title: "Result Types",filterOperator:"or"};
-  resultTypeOptions = [{"id":"publication", "name":"Publications"},{"id":"dataset", "name":"Research data"},
+  resultTypeOptions = {"publications":{"id":"publication", "name":"Publications"},"datasets":{"id":"dataset", "name":"Research data"},
-    {"id":"software", "name":"Software"},{"id":"other", "name":" Other research products"}];
+    "software":{"id":"software", "name":"Software"},"other":{"id":"other", "name":" Other research products"}};
   selectedTypesNum = 0;
   @Input() quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string };
   @Input() includeOnlyResultsAndFilter:boolean = false;
@@ -130,7 +130,8 @@ export class NewSearchPageComponent {
               private _piwikService: PiwikService,
               private router: Router,
               private seoService: SEOService,
-              private helper: HelperService) {
+              private helper: HelperService,
+              private cdr:ChangeDetectorRef) {
   }
 
   ngOnInit() {
@@ -276,10 +277,12 @@ export class NewSearchPageComponent {
     if (this.quickFilter) {
       this.removeValueFromQuickFilter();
     }
-    this.resultTypes = {};
+    // this.resultTypes = new Filter();
-    for(let type of this.resultTypeOptions){
+    // this.resultTypes.filterId = "";
-      this.resultTypes[type.id]=false;
+    this.resultTypes.values = [];
-    }
+    // for(let type of this.resultTypeOptions){
+    //   this.resultTypes.values.push({name: type.name , id:type.id,selected:false, number:0});
+    // }
     this.goTo(1);
     // this.clearKeywords();
   }
@@ -306,8 +309,11 @@ export class NewSearchPageComponent {
     /* End Piwik Code */
   }
 
-  queryChanged() {
+  queryChanged($event) {
-
+    if($event == "filters_update"){
+      this.cdr.detectChanges();
+      return;
+    }
     this.goTo(1, false);
   }
 
@@ -1022,12 +1028,17 @@ export class NewSearchPageComponent {
 
     if (this.entityType == "result") {
       if (URLparams["type"]) {
-        let types = URLparams["type"].split(",");
+        let types = URLparams["type"];
+        types = Array.isArray(types) ? types.join(',').split(","):types.split(",");
+        types.map( function (t) {
+          return StringUtils.unquote(StringUtils.URIDecode(t));
+        } );
+
         if(types.indexOf("publications")!=-1 && types.indexOf("datasets")!=-1 && types.indexOf("software")!=-1 && types.indexOf("other")!=-1 ){
           allFqs += "&type=results";
         }else{
           for (let type of types) {
-            allFqs += "&type=" + type;
+            allFqs += "&type=" + StringUtils.unquote(StringUtils.URIDecode(type));
           }
         }
       }else{
@@ -1309,17 +1320,8 @@ public static createRangeFilterQuery(rangeField,selectedFromValue, selectedToVal
 
     if (this.resultTypes && this.entityType == "result") {
       let values = [];
-      if (this.resultTypes.publication) {
+      for(let value of this.resultTypes.values){
-        values.push("publications");
+        values.push(value.id);
-      }
-      if (this.resultTypes.dataset) {
-        values.push("datasets");
-      }
-      if (this.resultTypes.software) {
-        values.push("software");
-      }
-      if (this.resultTypes.other) {
-        values.push("other");
       }
       this.selectedTypesNum = 0;
       if (values.length > 0 && values.length != 4) {
@@ -1398,23 +1400,16 @@ public static createRangeFilterQuery(rangeField,selectedFromValue, selectedToVal
       }
     }
     if (this.entityType == "result") {
-      this.resultTypes = null;
+      this.resultTypes.values = [];
-      this.resultTypes = {
-
-      };
-
       if (URLparams["type"]) {
+        let types = URLparams["type"];
+        types = Array.isArray(types) ? types.join(',').split(","):types.split(",");
+        for(let type of types){
+          if(["publications", "datasets","software", "other"].indexOf(StringUtils.unquote(type))!=-1 && this.resultTypeOptions[StringUtils.unquote(type)]){
+            this.resultTypes.values.push({name: this.resultTypeOptions[StringUtils.unquote(type)].name , id:StringUtils.unquote(type),selected:true, number:0});
+            }
+          }
 
-        this.resultTypes['publication'] = (URLparams["type"].split(",").indexOf("publications") != -1);
-        this.resultTypes['dataset'] = (URLparams["type"].split(",").indexOf("datasets") != -1);
-        this.resultTypes['software'] = (URLparams["type"].split(",").indexOf("software") != -1);
-        this.resultTypes['other'] = (URLparams["type"].split(",").indexOf("other") != -1);
-
-      } else {
-        this.resultTypes['publication'] = false;
-        this.resultTypes['dataset'] = false;
-        this.resultTypes['software'] = false;
-        this.resultTypes['other'] = false;
       }
 
     }

searchPages/searchUtils/quick-selections.component.ts

@@ -1,86 +1,48 @@
-import {Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
+import {ChangeDetectorRef, Component, EventEmitter, Input, Output} from '@angular/core';
-import {FormBuilder, FormGroup} from "@angular/forms";
+import {FormBuilder} from "@angular/forms";
 import {Filter} from "./searchHelperClasses.class";
 import {EnvProperties} from "../../utils/properties/env-properties";
 import {ConfigurationService} from "../../utils/configuration/configuration.service";
-import {Subject, Subscription} from "rxjs";
+import {Subscription} from "rxjs";
-import {debounceTime} from "rxjs/operators";
+import {ActivatedRoute, Router} from "@angular/router";
 
 @Component({
   selector: 'quick-selections',
   template: `
-    <form *ngIf="!vertical && (resultTypes || quickFilter)" [formGroup]="control" 
+    <div *ngIf="!vertical && (resultTypes || quickFilter)"  
           [class]="(isDisabled ? 'uk-disabled' : '') + ' uk-text-small uk-margin-small-bottom uk-grid uk-inline uk-flex uk-margin-small-left'">
       <div  *ngIf="quickFilter" class="uk-margin-small-top uk-padding-remove-left uk-margin-right ">
         <span class="uk-text-bold">{{quickFilter.value}}</span>
         <mat-slide-toggle
-                          class="uk-margin-small-left" formControlName="QFselected" (change)="quickFilterChanged()">
+                          class="uk-margin-small-left" name="qf" [(ngModel)]="quickFilter.selected" (ngModelChange)="quickFilterChanged()">
         </mat-slide-toggle>
       </div>
       <div *ngIf="resultTypes && showEntities" class="uk-margin-small-top uk-padding-remove-left">
         <span class="uk-text-muted">Include: </span>
         <span>
-          <span *ngIf="showPublications" class="uk-margin-small-left"> <input type="checkbox" id="publ" name="Publications" formControlName="publication" (change)="changed()"> Publications </span>
+          <ng-container *ngFor="let value of resultTypes.values">
-          <span *ngIf="showDatasets" class="uk-margin-small-left"> <input type="checkbox" formControlName="dataset" (change)="changed()"> Research data </span>
+            <span class="uk-margin-small-left">  <input  type="checkbox" class="uk-checkbox"
-          <span *ngIf="showSoftware" class="uk-margin-small-left"> <input type="checkbox" formControlName="software" (change)="changed()"> Software </span>
+                                                        [(ngModel)]="value.selected" (ngModelChange)="changed()" />{{value.name}}</span>
-          <span *ngIf="showOrp" class="uk-margin-small-left"> <input type="checkbox" formControlName="other" (change)="changed()"> Other research products </span>
+          </ng-container>
         </span>
       </div>
-    </form>
+    </div>
-    <form *ngIf="vertical && (resultTypes || quickFilter)" [formGroup]="control" 
+    <div *ngIf="vertical && (resultTypes || quickFilter)"  
           [class]="(isDisabled ? 'uk-disabled' : '') + ' uk-margin-small-bottom uk-list uk-list-divider'">
-    <!--  <li   *ngIf="quickFilter" class="uk-margin-small-bottom ">
+      <search-filter 
-        <div class="uk-margin-small-top uk-padding-remove-left uk-margin-right ">
+                     [isDisabled]="isDisabled"
-          <h6 class="">{{quickFilter.value}}</h6>
+                     [filter]="resultTypes" [showResultCount]='false'
-          <mat-slide-toggle
+                     (onFilterChange)="changed()" [actionRoute]="actionRoute"></search-filter>
-            class="uk-margin-small-left" formControlName="QFselected" (change)="quickFilterChanged()">
+    </div>
-          </mat-slide-toggle>
+ 
-        </div>
-      </li>-->
-<!--      {{showEntities}} - {{showPublications}} - {{showDatasets}} - {{showSoftware}} &#45;&#45; {{showOrp}}-->
-      <li *ngIf="resultTypes && showEntities" class="uk-margin-small-bottom ng-star-inserted">
-        <div class="uk-margin-small-top uk-margin-bottom uk-grid uk-flex uk-flex-bottom">
-          <h6 class="uk-margin-bottom-remove" title="Community">Research Type ({{(this.showPublications + this.showDatasets + this.showSoftware + this.showOrp)}})</h6>
-          <a *ngIf="selectedTypesNum>0" (click)="clearTypes()" class="portal-link">
-            Clear
-          </a>
-        </div>
-        <div>
-          <div>
-            <div *ngIf="showPublications" class="uk-animation-fade filterItem searchFilterItem uk-text-small ng-star-inserted">
-              <div title="Publications">
-                <label class="ng-star-inserted"><input class="uk-checkbox" type="checkbox" id="publ" name="Publications" formControlName="publication" (change)="changed()"> Publications</label>
-              </div>
-            </div>
-            <div *ngIf="showDatasets"  class="uk-animation-fade filterItem searchFilterItem uk-text-small ng-star-inserted">
-              <div title="Research data">
-                <label class="ng-star-inserted"><input class="uk-checkbox" type="checkbox" formControlName="dataset" (change)="changed()"> Research data </label>
-              </div>
-            </div>
-            <div *ngIf="showSoftware" class="uk-animation-fade filterItem searchFilterItem uk-text-small ng-star-inserted">
-              <div title="Software">
-                <label class="ng-star-inserted"> <input class="uk-checkbox" type="checkbox" formControlName="software" (change)="changed()"> Software</label>
-              </div>
-            </div>
-            <div *ngIf="showOrp" class="uk-animation-fade filterItem searchFilterItem uk-text-small ng-star-inserted">
-              <div title=" Other research products">
-                <label class="ng-star-inserted"><input class="uk-checkbox" type="checkbox" formControlName="other" (change)="changed()"> Other research products</label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </li>
-    </form>
   `
 })
 
-export class QuickSelectionsComponent implements OnChanges {
+export class QuickSelectionsComponent {
-  @Input() resultTypes;
+  @Input() resultTypes:Filter;
   @Output() typeChange = new EventEmitter();
   @Input() isDisabled;
   @Input() quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string };
-  @Input() QFselected: boolean;
-  control: FormGroup;
   initialized = false;
   @Input() properties: EnvProperties;
   @Input() vertical: boolean=false;
@@ -89,55 +51,23 @@ export class QuickSelectionsComponent implements OnChanges {
   showSoftware: boolean = false;
   showOrp: boolean = false;
   showEntities = false;
-  selectedTypesNum = 0;
+  @Input() actionRoute:boolean = false;
-  @Input() delayTime = 0;
+  queryParams = {};
-  private clicks = new Subject();
 
   subs: Subscription[] = [];
 
-  constructor(private _fb: FormBuilder, private config: ConfigurationService) {
+  constructor(private _fb: FormBuilder, private config: ConfigurationService, private _router: Router, private route: ActivatedRoute, private cdr:ChangeDetectorRef) {
-
-    this.control = this._fb.group({
-      publication: true,
-      dataset: true,
-      software: true,
-      other: true,
-      QFselected: true
-    });
-
-
   }
 
   changed() {
-    if (!this.initialized && this.isDisabled) {
-      this.initialized = true;
-      return;
-    }
-    this.clicks.next();
-  }
-  actuallyChanged(){
 
-    let value = this.control.getRawValue();
-    this.resultTypes.publication = value.publication;
-    this.resultTypes.dataset = value.dataset;
-    this.resultTypes.software = value.software;
-    this.resultTypes.other = value.other;
-    if (this.resultTypes && !this.resultTypes.publication && !this.resultTypes.dataset && !this.resultTypes.software && !this.resultTypes.other && !this.vertical) {
-      this.resultTypes.publication = true;
-      this.resultTypes.dataset = true;
-      this.resultTypes.software = true;
-      this.resultTypes.other = true;
-      this.setFormValues();
-    }
     this.typeChange.emit({});
   }
 
   quickFilterChanged() {
-    let value = this.control.getRawValue();
-    this.quickFilter.selected = value.QFselected;
     if(this.quickFilter.filter) {
       this.quickFilter.filter.countSelectedValues = 0;
-      if (value.QFselected) {
+      if (this.quickFilter.selected) {
         for (let filterValue of this.quickFilter.filter.values) {
           if((filterValue.name == this.quickFilter.value)) {
             filterValue.selected = true
@@ -156,13 +86,14 @@ export class QuickSelectionsComponent implements OnChanges {
   }
 
   ngOnInit() {
-    if (this.resultTypes) {
+    this.route.queryParams.subscribe(params => {
-      this.setFormValues();
+      this.queryParams = Object.assign({}, params);
-    }
+      this.initializeFilters();
-    if(this.properties) {
+    });
+
+    if(this.properties && !this.initialized) {
       if(this.properties.adminToolsCommunity !== "monitor") {
-        //this.subs.push(this.config.getCommunityInformation(this.properties, this.properties.adminToolsCommunity).subscribe(data => {
+         this.subs.push(this.config.communityInformationState.subscribe(data => {
-        this.subs.push(this.config.communityInformationState.subscribe(data => {
           if(data) {
             var showEntity = {};
             for (var i = 0; i < data['entities'].length; i++) {
@@ -173,6 +104,8 @@ export class QuickSelectionsComponent implements OnChanges {
             this.showSoftware = showEntity["software"];
             this.showOrp = showEntity["orp"];
             this.showEntities = this.showPublications || this.showDatasets || this.showSoftware || this.showOrp;
+            this.initialized = true;
+            this.initializeFilters();
           }
         }, error => {
           this.showPublications = true;
@@ -180,6 +113,7 @@ export class QuickSelectionsComponent implements OnChanges {
           this.showSoftware = true;
           this.showOrp = true;
           this.showEntities = true;
+          this.initializeFilters();
         }));
       } else {
         this.showPublications = true;
@@ -187,59 +121,43 @@ export class QuickSelectionsComponent implements OnChanges {
         this.showSoftware = true;
         this.showOrp = true;
         this.showEntities = true;
+        this.initialized = true;
+        this.initializeFilters();
       }
+
+    }else{
+      this.initializeFilters();
     }
-    this.subs.push(this.clicks.pipe(
-      debounceTime(this.delayTime)
-    ).subscribe(e =>{this.actuallyChanged()} ));
 
   }
-
+  initializeFilters(){
+    if(this.showEntities ){
+      let selected = [];
+      for(let value of this.resultTypes.values){
+        if(value.selected){
+          selected.push(value.id);
+        }
+      }
+      this.resultTypes.countSelectedValues = selected.length;
+      this.resultTypes.values = [];
+      if(this.showPublications){
+        this.resultTypes.values.push({name: "Publications" , id:"publications",selected:selected.indexOf("publications")!=-1, number:0});
+      }
+      if(this.showDatasets){
+        this.resultTypes.values.push({name: "Research data" , id:"datasets",selected:selected.indexOf("datasets")!=-1, number:0});
+      }
+      if(this.showSoftware){
+        this.resultTypes.values.push({name: "Software" , id:"software",selected:selected.indexOf("software")!=-1, number:0});
+      }
+      if(this.showOrp){
+        this.resultTypes.values.push({name: "Other research products" , id:"other",selected:selected.indexOf("other")!=-1, number:0});
+      }
+    }
+    this.typeChange.emit("filters_update");
+  }
   public ngOnDestroy() {
     for (let sub of this.subs) {
       sub.unsubscribe();
     }
   }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.isDisabled) {
-      if (changes.isDisabled.currentValue == true) {
-        this.control.disable();
-      } else if (changes.isDisabled.currentValue == false) {
-        this.control.enable();
-      }
-    }
-
-    if (changes.QFselected) {
-      let value = this.control.getRawValue();
-      if (changes.QFselected.currentValue != value.QFselected) {
-        this.setFormValues();
-      }
-
-    }
-    if (changes.resultTypes) {
-      this.setFormValues();
-    }
-  }
-
-  setFormValues() {
-    this.control.setValue({
-      publication: (this.resultTypes && this.resultTypes.publication)?this.resultTypes.publication:null,
-      dataset: (this.resultTypes && this.resultTypes.dataset)?this.resultTypes.dataset:null,
-      software: (this.resultTypes && this.resultTypes.software)?this.resultTypes.software:null,
-      other: (this.resultTypes && this.resultTypes.other)?this.resultTypes.other:null,
-      QFselected: this.QFselected
-    });
-    this.selectedTypesNum = (this.resultTypes && this.resultTypes.publication)?this.resultTypes.publication:0 + (this.resultTypes && this.resultTypes.dataset)?this.resultTypes.dataset:0+ (this.resultTypes && this.resultTypes.software)?this.resultTypes.software:0 + (this.resultTypes && this.resultTypes.other)?this.resultTypes.other:null;
-  }
-
-  clearTypes(){
-    this.resultTypes.publication = false;
-    this.resultTypes.dataset = false;
-    this.resultTypes.software = false;
-    this.resultTypes.other = false;
-    this.setFormValues();
-    this.changed()
-  }
-
 }

searchPages/searchUtils/quick-selections.module.ts

@@ -4,11 +4,12 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {QuickSelectionsComponent} from "./quick-selections.component";
 import {MatCheckboxModule, MatSlideToggleModule} from "@angular/material";
+import {SearchFilterModule} from "./searchFilter.module";
 
 @NgModule({
   imports: [
     CommonModule, FormsModule,
-    RouterModule,  MatCheckboxModule, ReactiveFormsModule, MatSlideToggleModule
+    RouterModule, MatCheckboxModule, ReactiveFormsModule, MatSlideToggleModule, SearchFilterModule
   ],
   declarations: [
     QuickSelectionsComponent,

searchPages/searchUtils/searchFilter.component.html

@@ -12,7 +12,7 @@
           <div *ngFor="let value of getSelectedAndTopValues(filter, filterValuesNum)"
                class="uk-animation-fade filterItem searchFilterItem uk-text-small">
             <div title = "{{value.name}}">
-              <ng-container *ngTemplateOutlet="input_label; context: {filter: filter, value: value}"></ng-container>
+              <ng-container *ngTemplateOutlet="input_label_wrapper; context: {filter: filter, value: value}"></ng-container>
             </div>
           </div>
         </ng-container>
@@ -59,7 +59,7 @@
               <ng-container *ngFor="let value of sort(filter.values)">
                 <div *ngIf="filterKeywords(value.name)" title = "{{value.name}}"
                      class="uk-animation-fade filterItem searchFilterItem uk-text-small">
-                  <ng-container *ngTemplateOutlet="input_label; context: {filter: filter, value: value}"></ng-container>
+                  <ng-container *ngTemplateOutlet="input_label_wrapper; context: {filter: filter, value: value}"></ng-container>
                 </div>
               </ng-container>
             </div>
@@ -89,3 +89,13 @@
     </span>
   </label>
 </ng-template>
+
+<ng-template #input_label_wrapper let-filter="filter" let-value="value">
+  <a *ngIf="actionRoute" class="filterLabel"  [routerLink]="getRoute()"
+     [queryParams]="getParams(filter,value)">
+    <ng-container *ngTemplateOutlet="input_label; context: {filter: filter, value: value}"></ng-container>
+  </a>
+  <ng-container *ngIf="!actionRoute">
+    <ng-container *ngTemplateOutlet="input_label; context: {filter: filter, value: value}"></ng-container>
+  </ng-container>
+</ng-template>

searchPages/searchUtils/searchFilter.component.ts

@@ -10,7 +10,9 @@ import {
   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'
@@ -33,13 +35,18 @@ export class SearchFilterComponent implements OnInit, OnChanges{
   @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 () {
+    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 = "";
@@ -229,4 +236,32 @@ export class SearchFilterComponent implements OnInit, OnChanges{
     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) + '"' ;
+      }
+      return params;
+  }
 }

searchPages/searchUtils/searchFilter.module.ts

@@ -6,10 +6,11 @@ import {SearchFilterComponent} from './searchFilter.component';
 import{SearchFilterModalComponent} from './searchFilterModal.component';
 import {ModalModule} from '../../utils/modal/modal.module';
 import {MatSelectModule} from "@angular/material";
+import {RouterModule} from "@angular/router";
 
 @NgModule({
   imports: [
-    CommonModule, FormsModule, ModalModule, MatSelectModule
+    CommonModule, FormsModule, ModalModule, MatSelectModule, RouterModule
   ],
   declarations: [
     SearchFilterComponent, SearchFilterModalComponent

utils/rangeFilter/rangeFilter.component.html

@@ -56,24 +56,52 @@
               <div class="uk-margin-small uk-margin-top uk-text-left">
                 <ul class="uk-subnav uk-subnav-divider recentyears">
 <!--                  + (isDisabled ? ' uk-disabled uk-text-muted' : '')"-->
-                  <li><a
+                  <li>
+                    <a *ngIf="actionRoute" [routerLink]="getRoute()"
+                         [queryParams]="getParams(0,(stringToNum(filter.selectedToValue) ==
+                  currentYear
+                  &&stringToNum(filter.selectedFromValue)  == currentYear))"
                     [class]="'portal-link uk-text-center '
                                 + ((stringToNum(filter.selectedFromValue) == currentYear && stringToNum(filter.selectedToValue)  == currentYear) ? ' uk-text-bold' : '')
                                 "
                     (click)="yearChanged(0)"
-                  >This year</a></li>
+                  >This year</a>
-                  <li><a
+                    <a *ngIf="!actionRoute"
+                       [class]="'portal-link uk-text-center '
+                                + ((stringToNum(filter.selectedFromValue) == currentYear && stringToNum(filter.selectedToValue)  == currentYear) ? ' uk-text-bold' : '')
+                                "
+                       (click)="yearChanged(0)"
+                    >This year</a>
+                  </li>
+                  <li><a *ngIf="actionRoute" [routerLink]="getRoute()"
+                         [queryParams]="getParams(4,(stringToNum(filter.selectedToValue) == currentYear
+                  &&stringToNum(filter.selectedFromValue)  == currentYear-4))"
                     [class]="'portal-link uk-text-center '
                                 + ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue)  == currentYear-4) ? ' uk-text-bold' : '')
                                 "
                     (click)="yearChanged(4)"
-                  >Last 5 years</a></li>
+                  >Last 5 years</a>
-                  <li><a
+                    <a *ngIf="!actionRoute"
+                       [class]="'portal-link uk-text-center '
+                                + ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue)  == currentYear-4) ? ' uk-text-bold' : '')
+                                "
+                       (click)="yearChanged(4)"
+                    >Last 5 years</a>
+                  </li>
+                  <li><a *ngIf="actionRoute" [routerLink]="getRoute()"
+                         [queryParams]="getParams(9,(stringToNum(filter.selectedToValue) == currentYear &&stringToNum(filter.selectedFromValue)  == currentYear-9))"
                     [class]="'portal-link uk-text-center '
                                 + ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue)  == currentYear-9) ? ' uk-text-bold' : '')
                                 "
                     (click)="yearChanged(9)"
-                  >Last 10 years</a></li>
+                  >Last 10 years</a>
+                    <a *ngIf="!actionRoute"
+                       [class]="'portal-link uk-text-center '
+                                + ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue)  == currentYear-9) ? ' uk-text-bold' : '')
+                                "
+                       (click)="yearChanged(9)"
+                    >Last 10 years</a>
+                  </li>
                 </ul>
               </div>
 <!--              End of Natalia's suggestion -->

utils/rangeFilter/rangeFilter.component.ts

@@ -1,6 +1,9 @@
 import {Component, Input, Output, EventEmitter} from '@angular/core';
 import { RangeFilter } from './rangeFilterHelperClasses.class';
 import { Dates } from "../string-utils.class";
+import {ActivatedRoute, Router} from "@angular/router";
+import {Filter, Value} from "../../searchPages/searchUtils/searchHelperClasses.class";
+import {properties} from "../../../../environments/environment";
 
 @Component({
   selector: 'range-filter',
@@ -20,10 +23,15 @@ export class RangeFilterComponent {
   public currentYear: number = Dates.currentYear;
 
   @Output() onFilterChange = new EventEmitter();
+  @Input() actionRoute:boolean = false;
+  queryParams = {};
+  constructor(private _router: Router, private route: ActivatedRoute) {}
 
-  constructor() {}
+  ngOnInit() {
-
+    this.route.queryParams.subscribe(params => {
-  ngOnInit() {}
+      this.queryParams = Object.assign({}, params);
+    });
+  }
 
   public _formatTitle(title){
     return ((title.length > this._maxCharacters)?(title.substring(0,(this._maxCharacters - ('...').length))+"..."):title);
@@ -55,4 +63,19 @@ export class RangeFilterComponent {
   stringToNum(value: string): number {
     return +(value);
   }
+  getFilterUrl(year:number, selected:boolean){
+    return properties.baseLink + (this._router.url.indexOf('year=range') == -1 ? this._router.url: (this._router.url.split("year=range"+this.filter.selectedFromValue+':'+this.filter.selectedToValue).join(''))) + (selected ? '' : (this._router.url.indexOf('?')!=-1?'&':'?') +'year=range'+(this.currentYear - year) + ':'+ this.currentYear);
+  }
+  getRoute(){
+    return properties.baseLink + this._router.url.split("?")[0];
+  }
+  getParams(year:number, selected:boolean){
+    let params = Object.assign({}, this.queryParams);
+    if(!selected){
+      params['year'] = 'range'+(this.currentYear - year) + ':'+ this.currentYear;
+    }else{
+      delete params['year'];
+    }
+    return params;
+  }
 }