[Library|Trunk]

range filter component:
	min, max year can be passed as input
	both start/ end year can be mandatory
	add directive to check if both fields are filled


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

utils/rangeFilter/inValidYear.directive.ts

@@ -2,9 +2,9 @@ import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn, Validators } from '@angular/forms';
 import { Dates } from "../string-utils.class";
 
-export function inValidYearValidator(): ValidatorFn {
+export function inValidYearValidator(minYear, maxYear): ValidatorFn {
   return (control: AbstractControl): {[key: string]: any} | null => {
-    return ((control.value && !Dates.isValidYear(control.value)) ? {'inValidYear': {value: control.value}} : null);
+    return ((control.value && !Dates.isValidYear(control.value, minYear, maxYear)) ? {'inValidYear': {value: control.value}} : null);
   };
 }
 
@@ -13,7 +13,9 @@ export function inValidYearValidator(): ValidatorFn {
   providers: [{provide: NG_VALIDATORS, useExisting: InValidYearValidatorDirective, multi: true}]
 })
 export class InValidYearValidatorDirective implements Validator {
+  @Input() maxYear = Dates.yearMax;
+  @Input() minYear = Dates.yearMin;
   validate(control: AbstractControl): {[key: string]: any} | null {
-    return inValidYearValidator()(control);
+    return inValidYearValidator(this.minYear, this.maxYear)(control);
   }
-}
+}

utils/rangeFilter/rangeFilter.component.html

@@ -9,15 +9,19 @@
     <div>
       <div class = "uk-animation-fade filterItem searchFilterItem uk-text-small">
         <div class="searchFilterBoxValues ">
-          <form class="uk-inline uk-text-small form-group uk-margin-remove-bottom" #rangeForm="ngForm" fromYearAfterToYear>
+          <form class="uk-inline uk-text-small form-group uk-margin-remove-bottom" #rangeForm="ngForm"
+                fromYearAfterToYear [rangeRequired]="mandatoryRange">
             <input class=" uk-input form-control uk-width-1-3 uk-form-small" (focus)="focusedInput = 'from'"
                    (blur)="focusedInput = ''"
                    [(ngModel)]="filter.selectedFromValue" name="yearFrom" #yearFrom="ngModel" inValidYear
-                   placeholder="e.g. 1931" [disabled]="isDisabled"/><span class="uk-margin-small-left uk-margin-small-right">-</span>
+                   [maxYear]="yearMax" [minYear]="yearMin"
+                   [placeholder]="'e.g. ' + yearMin "  [disabled]="isDisabled"/><span
+            class="uk-margin-small-left uk-margin-small-right">-</span>
             <input class=" uk-input form-control uk-width-1-3 uk-form-small" (focus)="focusedInput = 'to'"
                    (blur)="focusedInput = ''"
                    [(ngModel)]="filter.selectedToValue" name="yearTo" #yearTo="ngModel" inValidYear
-                   placeholder="e.g. 2020" [disabled]="isDisabled"/>
+                   [maxYear]="yearMax" [minYear]="yearMin"
+                   [placeholder]="'e.g. ' + yearMax " [disabled]="isDisabled"/>
             <button type="submit" (click)="yearChanged()"
                     [ngStyle]="{'cursor': (rangeForm.valid && (yearFrom.dirty || yearTo.dirty)) ? 'pointer' : 'default'}"
                     class="uk-icon uk-icon-button uk-margin-small-left uk-text-right uk-button-default"
@@ -39,6 +43,11 @@
                  class="alert alert-danger uk-margin-small-top uk-margin-remove-bottom">
               Starting year must be greater than or equal to ending year.
             </div>
+            <div *ngIf="yearFrom.valid && yearTo.valid && !rangeForm.errors?.fromYearAfterToYear &&
+             (rangeForm.touched || rangeForm.dirty) && mandatoryRange && rangeForm.errors?.rangeRequired"
+                 class="alert alert-danger uk-margin-small-top uk-margin-remove-bottom">
+              Both starting and ending year are required
+            </div>
 
             <div *ngIf="showQuickButtons">
 

utils/rangeFilter/rangeFilter.component.ts

@@ -14,8 +14,9 @@ export class RangeFilterComponent {
   @Input() showQuickButtons:boolean = true;
   public _maxCharacters:number =28;
   public focusedInput: string = "";
-  public yearMin: number = Dates.yearMin;
-  public yearMax: number = Dates.yearMax;
+  @Input() yearMin: number = Dates.yearMin;
+  @Input() yearMax: number = Dates.yearMax;
+  @Input() mandatoryRange:boolean = false;
   public currentYear: number = Dates.currentYear;
 
   @Output() onFilterChange = new EventEmitter();

utils/rangeFilter/rangeFilter.module.ts

@@ -6,13 +6,14 @@ import { RouterModule } from '@angular/router';
 import {RangeFilterComponent} from './rangeFilter.component';
 import {InValidYearValidatorDirective} from "./inValidYear.directive";
 import {FromYearAfterToYearValidatorDirective} from "./fromYearAfterToYear.directive";
+import {RangeYearsRequiredDirective} from "./rangeYearsRequired.directive";
 
 @NgModule({
   imports: [
     CommonModule, FormsModule, RouterModule
   ],
   declarations: [
-    RangeFilterComponent, InValidYearValidatorDirective, FromYearAfterToYearValidatorDirective
+    RangeFilterComponent, InValidYearValidatorDirective, FromYearAfterToYearValidatorDirective, RangeYearsRequiredDirective
   ],
   providers:[
   ],
@@ -20,4 +21,4 @@ import {FromYearAfterToYearValidatorDirective} from "./fromYearAfterToYear.direc
     RangeFilterComponent
   ]
 })
-export class RangeFilterModule { }
+export class RangeFilterModule { }

utils/rangeFilter/rangeYearsRequired.directive.ts

@@ -0,0 +1,23 @@
+import {Directive, Input} from '@angular/core';
+import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator, ValidatorFn } from '@angular/forms';
+
+
+export function rangeRequired( enabled:boolean): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const yearFrom = control.get('yearFrom');
+    const yearTo = control.get('yearTo');
+    return ((yearFrom && yearTo && enabled && (yearFrom.value == "" || yearTo.value == "")) ? { 'rangeRequired': true } : null);
+  };
+}
+
+
+@Directive({
+  selector: '[rangeRequired]',
+  providers: [{ provide: NG_VALIDATORS, useExisting: RangeYearsRequiredDirective, multi: true }]
+})
+export class RangeYearsRequiredDirective implements Validator {
+  @Input('rangeRequired') enabled:boolean = false;
+  validate(control: AbstractControl): ValidationErrors {
+    return rangeRequired(this.enabled)(control)
+  }
+}