[Trunk | Library]:

1. properties/searchFields.ts: Range filter for results & projects renamed to "Year range".
2. string-utils.class.ts: "currentYear" field added.
3. rangeFilter.component: Margin & Placeholder fixes | Button for "This year", "Last 5 years", "Last 10 years" added.


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

utils/properties/searchFields.ts

@@ -41,7 +41,7 @@ export class SearchFields {
          ["relfundinglevel2_id"]:{name:"Funding Substream level 2", type:"refine", param:"funderlv2", operator: "fn0", equalityOperator: " exact ", filterType: "checkbox"},
          ["resultacceptanceyear"]:{name:"Publication Date", type:"keyword", param:"year", operator: "ya", equalityOperator: " = ", filterType: null},
          ["resultdateofacceptance"]:{name:"Publication Date", type:"date", param:"date", operator: "dt", equalityOperator: " exact ", filterType: null},
-         ["resultacceptanceyear-range-resultacceptanceyear"]:{name:"Published between", type:"keyword", param:"year", operator: "ya", equalityOperator: " within ", filterType: "range"},
+         ["resultacceptanceyear-range-resultacceptanceyear"]:{name:"Year range", type:"keyword", param:"year", operator: "ya", equalityOperator: " within ", filterType: "range"},
          ["resultbestaccessright"]:{name:"Access Mode", type:"vocabulary", param:"access", operator: "ac", equalityOperator: " exact ", filterType: "radio"},
          ["collectedfrom"]:{name:"Collected From", type:"refine", param:"datasource", operator: "cl", equalityOperator: " exact ", filterType: "checkbox"},
          ["relorganizationid"]:{name:"Organization", type:"entity", param:"organization", operator: "og", equalityOperator: " exact ", filterType: null},
@@ -70,7 +70,7 @@ export class SearchFields {
        ["fundinglevel2_id"]:{name:"Funding Substream level 2", type:"refine", param:"funderlv2", operator: "fn2", equalityOperator: " exact ", filterType: "checkbox"},
        ["projectstartyear"]:{name:"Start Year", type:"year", param:"startyear", operator: "sy", equalityOperator: " <= ", filterType: "checkbox"},
        ["projectendyear"]:{name:"End Year", type:"year", param:"endyear", operator: "ey", equalityOperator: " >= ", filterType: "checkbox"},
-       ["projectendyear-range-projectstartyear"]:{name:"Active years", type:"year", param:"year", operator: "ya", equalityOperator: " = ", filterType: "range"},
+       ["projectendyear-range-projectstartyear"]:{name:"Year range", type:"year", param:"year", operator: "ya", equalityOperator: " = ", filterType: "range"},
       ["projectstartdate"]:{name:"Start Date", type:"date", param:"startdate", operator: "sd", equalityOperator: " within ", filterType: null},
        ["projectenddate"]:{name:"End Date", type:"date", param:"enddate", operator: "ed", equalityOperator: " within ", filterType: null},
        ["projectecsc39"]:{name:"Special Clause 39", type:"boolean", param:"sc39", operator: "sc", equalityOperator: " exact ", filterType: "radio"},

utils/rangeFilter/rangeFilter.component.html

@@ -9,13 +9,13 @@
     <div>
       <div class = "uk-animation-fade filterItem searchFilterItem uk-text-small">
         <div class="searchFilterBoxValues ">
-          <form class="uk-inline uk-text-small form-group" #rangeForm="ngForm" fromYearAfterToYear>
+          <form class="uk-inline uk-text-small form-group uk-margin-remove-bottom" #rangeForm="ngForm" fromYearAfterToYear>
             <input class=" uk-input form-control uk-width-1-3" (focus)="focusedInput = 'from'" (blur)="focusedInput = ''"
                    [(ngModel)]="filter.selectedFromValue" name="yearFrom" #yearFrom="ngModel" inValidYear
-                   placeholder="From"/>
+                   placeholder="e.g. 1931"/>
             <input class=" uk-input form-control uk-width-1-3 uk-margin-left" (focus)="focusedInput = 'to'" (blur)="focusedInput = ''"
                    [(ngModel)]="filter.selectedToValue" name="yearTo" #yearTo="ngModel" inValidYear
-                   placeholder="To"/>
+                   placeholder="e.g. 2020"/>
             <button type="submit" (click)="yearChanged()"
                     [ngStyle]="{'cursor': rangeForm.valid ? 'pointer' : 'not-allowed'}" class="uk-icon uk-width-1-6 uk-text-right"
                     [disabled]="rangeForm.invalid">
@@ -25,15 +25,34 @@
               </svg>
             </button>
 
+            <div>
+              <div class="range-button uk-button-group uk-margin-small-top">
+<!--                padding: 0 25px;-->
+                <button [class]="'uk-button uk-button-default uk-button-small uk-text-small'
+                                + ((filter.selectedFromValue == currentYear && filter.selectedToValue  == currentYear) ? ' uk-text-bold' : '')"
+                        (click)="yearChanged(0)">This year
+                </button>
+                <button [class]="'uk-button uk-button-default uk-button-small uk-text-small'
+                                + ((filter.selectedToValue == currentYear && filter.selectedFromValue  == currentYear-5) ? ' uk-text-bold' : '')"
+                        (click)="yearChanged(5)">Last 5 years
+                </button>
+                <button [class]="'uk-button uk-button-default uk-button-small uk-text-small'
+                                + ((filter.selectedToValue == currentYear && filter.selectedFromValue  == currentYear-10) ? ' uk-text-bold' : '')"
+
+                        (click)="yearChanged(10)">Last 10 years
+                </button>
+              </div>
+            </div>
+
             <div *ngIf="(yearFrom.invalid && focusedInput != 'from' && (yearFrom.dirty || yearFrom.touched)) ||
                         (yearTo.invalid && focusedInput != 'to' && (yearTo.dirty || yearTo.touched))"
-                 class="alert alert-danger uk-margin-small-top">
+                 class="alert alert-danger uk-margin-small-top uk-margin-remove-bottom">
               <div *ngIf="(yearFrom.errors && yearFrom.errors.inValidYear) || (yearTo.errors && yearTo.errors.inValidYear)">
                 Year must be between {{yearMin}} and {{yearMax}}.
               </div>
             </div>
             <div *ngIf="yearFrom.valid && yearTo.valid && rangeForm.errors?.fromYearAfterToYear && (rangeForm.touched || rangeForm.dirty)"
-                 class="alert alert-danger uk-margin-small-top">
+                 class="alert alert-danger uk-margin-small-top uk-margin-remove-bottom">
               "From" year must be equal or greater than "To" year.
             </div>
           </form>

utils/rangeFilter/rangeFilter.component.ts

@@ -13,8 +13,9 @@ export class RangeFilterComponent {
   @Input() isDisabled:boolean = false;
   public _maxCharacters:number =28;
   public focusedInput: string = "";
-  public yearMin = Dates.yearMin;
-  public yearMax = Dates.yearMax;
+  public yearMin: number = Dates.yearMin;
+  public yearMax: number = Dates.yearMax;
+  public currentYear: number = Dates.currentYear;
 
   @Output() onFilterChange = new EventEmitter();
 
@@ -26,7 +27,11 @@ export class RangeFilterComponent {
     return ((title.length > this._maxCharacters)?(title.substring(0,(this._maxCharacters - ('...').length))+"..."):title);
   }
 
-  yearChanged(){
+  yearChanged(yearsSelected: number = null){
+    if(yearsSelected != null) {
+      this.filter.selectedFromValue = (this.currentYear - yearsSelected) + "";
+      this.filter.selectedToValue = this.currentYear + "";
+    }
     this.onFilterChange.emit({
       value: this.filter
     });

utils/string-utils.class.ts

@@ -3,6 +3,7 @@ import {UrlSegment} from '@angular/router';
 export class Dates {
   public static yearMin = 1800;
   public static yearMax = (new Date().getFullYear()) + 10;
+  public static currentYear = (new Date().getFullYear());
 
   public static isValidYear(yearString){
     // First check for the pattern