Change range-filter with new year-range input and add messages in the validators.

utils/rangeFilter/rangeFilter.component.html

@@ -10,45 +10,17 @@
     <div>
       <div class = "uk-animation-fade filterItem searchFilterItem uk-text-small">
         <div class="searchFilterBoxValues ">
-          <form [class]="(isDisabled ? 'uk-disabled' : '') + ' uk-flex uk-flex-middle uk-flex-wrap'" [formGroup]="rangeForm">
+          <div class="uk-width-4-5" input [formInput]="rangeForm" type="year-range" [yearRange]="yearRange" inputClass="flat small">
-            <div input [formInput]="rangeForm.get('yearFrom')" [placeholder]="{label: 'e.g. ' + yearMin, static: true}"
+            <div action (click)="yearChanged()" class="action-icon"
-                 inputClass="flat small" class=" uk-width-1-3"></div>
+                 [class.disabled]="isDisabled || rangeForm.invalid || (!rangeForm.get('yearFrom').dirty && !rangeForm.get('yearTo').dirty) || rangeForm.get('yearFrom').invalid || rangeForm.get('yearTo').invalid">
-            <span class="uk-margin-small-left uk-margin-small-right">-</span>
+              <icon name="chevron_right" [flex]="true"></icon>
-            <div input [formInput]="rangeForm.get('yearTo')" [placeholder]="{label: 'e.g. ' + yearMax, static: true}"
-                 inputClass="flat small" class=" uk-width-1-3"></div>
-            <button type="submit" (click)="yearChanged()"
-                    [ngStyle]="{'cursor': (rangeForm.valid && (rangeForm.get('yearFrom').dirty || rangeForm.get('yearTo').dirty)) ? 'pointer' : 'default'}"
-                    class="uk-icon uk-icon-button uk-button-default uk-margin-small-left"
-                    [class.uk-disabled]="isDisabled || rangeForm.invalid || (!rangeForm.get('yearFrom').dirty && !rangeForm.get('yearTo').dirty)
-                                        || rangeForm.get('yearFrom').invalid || rangeForm.get('yearTo').invalid"
-										[disabled]="isDisabled || rangeForm.invalid || (!rangeForm.get('yearFrom').dirty && !rangeForm.get('yearTo').dirty)
-										            || rangeForm.get('yearFrom').invalid || rangeForm.get('yearTo').invalid">
-              <svg  width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                    icon="chevron-right" ratio="1">
-                <polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline>
-              </svg>
               <span class="visually-hidden">GO</span>
-            </button>
-            <div *ngIf="(rangeForm.get('yearFrom').invalid && rangeForm.get('yearFrom').dirty && rangeForm.get('yearFrom').touched) ||
-                        (rangeForm.get('yearTo').invalid && rangeForm.get('yearTo').dirty && rangeForm.get('yearTo').touched)"
-                 class="uk-text-danger uk-margin-small-top uk-margin-remove-bottom uk-width-1-1">
-              <div *ngIf="(rangeForm.get('yearFrom').errors && rangeForm.get('yearFrom').errors['inValidYear']) || (rangeForm.get('yearTo').errors && rangeForm.get('yearTo').errors['inValidYear'])">
-                Year must be between {{yearMin}} and {{yearMax}}.
-              </div>
             </div>
-            <div *ngIf="rangeForm.get('yearFrom').valid && rangeForm.get('yearTo').valid && rangeForm.errors && rangeForm.errors['fromYearAfterToYear'] && (rangeForm.touched || rangeForm.dirty)"
+          </div>
-                 class="uk-text-danger uk-margin-small-top uk-margin-remove-bottom uk-width-1-1">
+          <div class="uk-flex uk-flex-middle uk-flex-wrap">
-              Starting year must be greater than or equal to ending year.
+            <div *ngIf="showQuickButtons" class="uk-width-1-1">
-            </div>
-            <div *ngIf="rangeForm.get('yearFrom').valid && rangeForm.get('yearTo').valid && rangeForm.errors && !rangeForm.errors['fromYearAfterToYear'] &&
-             (rangeForm.touched || rangeForm.dirty) && mandatoryRange && rangeForm.errors['rangeRequired']"
-                 class="uk-text-danger uk-margin-small-top uk-margin-remove-bottom uk-width-1-1">
-              Both starting and ending year are required
-            </div>
-          <div *ngIf="showQuickButtons" class="uk-width-1-1">
              <div class="uk-margin-small uk-margin-top uk-text-left">
                 <ul class="uk-text-small uk-grid uk-grid-small uk-grid-divider" uk-grid>
-<!--                  + (isDisabled ? ' uk-disabled uk-text-muted' : '')"-->
                   <li>
                     <a *ngIf="actionRoute" [routerLink]="getRoute()"
                          [queryParams]="getParams(0,(stringToNum(filter.selectedToValue) ==
@@ -100,7 +72,7 @@
 <!--              End of Natalia's suggestion -->
 
             </div>
-          </form>
+          </div>
         </div>
       </div>
     </div>

utils/rangeFilter/rangeFilter.component.ts

@@ -4,6 +4,7 @@ import {Dates, StringUtils} from "../string-utils.class";
 import {ActivatedRoute, Router} from "@angular/router";
 import {properties} from "../../../../environments/environment";
 import {UntypedFormBuilder, UntypedFormGroup} from "@angular/forms";
+import {YearRange} from "../../sharedComponents/input/input.component";
 
 @Component({
   selector: 'range-filter',
@@ -24,6 +25,10 @@ export class RangeFilterComponent {
   public yearValidators = [StringUtils.inValidYearValidator(this.yearMin, this.yearMax)];
   public formValidators = [StringUtils.fromYearAfterToYearValidator];
   public rangeForm: UntypedFormGroup;
+  public yearRange: YearRange = {
+    from: {control: 'yearFrom', placeholder: this.yearMin.toString()},
+    to: {control: 'yearTo', placeholder: this.yearMax.toString()}
+  }
 
   @Output() onFilterChange = new EventEmitter();
   @Input() actionRoute:boolean = false;

utils/rangeFilter/rangeFilter.module.ts

@@ -5,10 +5,11 @@ import {RouterModule} from '@angular/router';
 
 import {RangeFilterComponent} from './rangeFilter.component';
 import {InputModule} from "../../sharedComponents/input/input.module";
+import {IconsModule} from "../icons/icons.module";
 
 @NgModule({
   imports: [
-    CommonModule, RouterModule, InputModule, ReactiveFormsModule
+    CommonModule, RouterModule, InputModule, ReactiveFormsModule, IconsModule
   ],
   declarations: [
     RangeFilterComponent

utils/string-utils.class.ts

@@ -431,21 +431,23 @@ export class StringUtils {
 
   public static inValidYearValidator(minYear, maxYear): ValidatorFn {
     return (control: AbstractControl): {[key: string]: any} | null => {
-      return ((control.value && !Dates.isValidYear(control.value, minYear, maxYear)) ? {'inValidYear': {value: control.value}} : null);
+      return ((control.value && !Dates.isValidYear(control.value, minYear, maxYear)) ?
+        {error: 'Year must be between ' + minYear + ' and ' + maxYear + '.'} : null);
     };
   }
 
   public static fromYearAfterToYearValidator: ValidatorFn = (control: UntypedFormGroup): ValidationErrors | null => {
     const yearFrom = control.get('yearFrom');
     const yearTo = control.get('yearTo');
-    return ((yearFrom && yearTo && (parseInt(yearFrom.value, 10) >  parseInt(yearTo.value, 10))) ? { 'fromYearAfterToYear': true } : null);
+    return ((yearFrom && yearTo && (parseInt(yearFrom.value, 10) >  parseInt(yearTo.value, 10))) ?
+      {error: 'Starting year must be greater than or equal to ending year.' } : null);
   }
 
   public static 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);
+      return ((yearFrom && yearTo && enabled && (yearFrom.value == "" || yearTo.value == "")) ? { error: 'Both starting and ending year are required' } : null);
     };
   }