[Library | new-theme]: In range filters, use reactive form (formGroup) instead of template driven form (ngModel) & update inputs using new "input" component & move validators in string-utils.class.ts.
This commit is contained in:
parent
8978e1df80
commit
f3cc4520ad
|
|
@ -10,52 +10,43 @@
|
|||
<div>
|
||||
<div class = "uk-animation-fade filterItem searchFilterItem uk-text-small">
|
||||
<div class="searchFilterBoxValues ">
|
||||
<form [class]="(isDisabled ? 'uk-disabled' : '') + ' 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
|
||||
[maxYear]="yearMax" [minYear]="yearMin"
|
||||
[placeholder]="'e.g. ' + yearMin " />
|
||||
<form [class]="(isDisabled ? 'uk-disabled' : '') + ' uk-flex uk-flex-middle uk-flex-wrap'" [formGroup]="rangeForm" >
|
||||
<div #yearFrom input [formInput]="rangeForm.get('yearFrom')" [placeholder]="{label: 'e.g. ' + yearMin, static: true}"
|
||||
inputClass="inner x-small" class=" uk-width-1-3"></div>
|
||||
<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
|
||||
[maxYear]="yearMax" [minYear]="yearMin"
|
||||
[placeholder]="'e.g. ' + yearMax "/>
|
||||
<div #yearTo input [formInput]="rangeForm.get('yearTo')" [placeholder]="{label: 'e.g. ' + yearMax, static: true}"
|
||||
inputClass="inner x-small" class=" uk-width-1-3"></div>
|
||||
<button type="submit" (click)="yearChanged()"
|
||||
[ngStyle]="{'cursor': (rangeForm.valid && (yearFrom.dirty || yearTo.dirty)) ? 'pointer' : 'default'}"
|
||||
[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 || (!yearFrom.dirty && !yearTo.dirty)"
|
||||
[disabled]="isDisabled || rangeForm.invalid || (!yearFrom.dirty && !yearTo.dirty)">
|
||||
[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="(yearFrom.invalid && focusedInput != 'from' && (yearFrom.dirty || yearFrom.touched)) ||
|
||||
(yearTo.invalid && focusedInput != 'to' && (yearTo.dirty || yearTo.touched))"
|
||||
class="alert alert-danger uk-margin-small-top uk-margin-remove-bottom">
|
||||
<div *ngIf="(yearFrom.errors && yearFrom.errors.inValidYear) || (yearTo.errors && yearTo.errors.inValidYear)">
|
||||
<div *ngIf="(rangeForm.get('yearFrom').invalid && !yearFrom.focused && (rangeForm.get('yearFrom').dirty || rangeForm.get('yearFrom').touched)) ||
|
||||
(rangeForm.get('yearTo').invalid && !yearTo.focused && (rangeForm.get('yearTo').dirty || rangeForm.get('yearTo').touched))"
|
||||
class="uk-text-warning 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="yearFrom.valid && yearTo.valid && rangeForm.errors?.fromYearAfterToYear && (rangeForm.touched || rangeForm.dirty)"
|
||||
class="alert alert-danger uk-margin-small-top uk-margin-remove-bottom">
|
||||
<div *ngIf="rangeForm.get('yearFrom').valid && rangeForm.get('yearTo').valid && rangeForm.errors && rangeForm.errors['fromYearAfterToYear'] && (rangeForm.touched || rangeForm.dirty)"
|
||||
class="uk-text-warning uk-margin-small-top uk-margin-remove-bottom uk-width-1-1">
|
||||
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">
|
||||
<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-warning uk-margin-small-top uk-margin-remove-bottom uk-width-1-1">
|
||||
Both starting and ending year are required
|
||||
</div>
|
||||
|
||||
<div *ngIf="showQuickButtons">
|
||||
|
||||
<!-- Natalia's suggestion-->
|
||||
<div class="uk-margin-small uk-margin-top uk-text-left">
|
||||
<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>
|
||||
|
|
@ -107,7 +98,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
<!-- End of Natalia's suggestion -->
|
||||
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import {Component, Input, Output, EventEmitter} from '@angular/core';
|
||||
import { RangeFilter } from './rangeFilterHelperClasses.class';
|
||||
import { Dates } from "../string-utils.class";
|
||||
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
import {RangeFilter} from './rangeFilterHelperClasses.class';
|
||||
import {Dates, StringUtils} from "../string-utils.class";
|
||||
import {ActivatedRoute, Router} from "@angular/router";
|
||||
import {Filter, Value} from "../../searchPages/searchUtils/searchHelperClasses.class";
|
||||
import {properties} from "../../../../environments/environment";
|
||||
import {FormBuilder} from "@angular/forms";
|
||||
|
||||
@Component({
|
||||
selector: 'range-filter',
|
||||
|
|
@ -21,13 +21,23 @@ export class RangeFilterComponent {
|
|||
@Input() yearMax: number = Dates.yearMax;
|
||||
@Input() mandatoryRange:boolean = false;
|
||||
public currentYear: number = Dates.currentYear;
|
||||
public yearValidators = [StringUtils.inValidYearValidator(this.yearMin, this.yearMax)];
|
||||
public formValidators = [StringUtils.fromYearAfterToYearValidator];
|
||||
public rangeForm;
|
||||
|
||||
@Output() onFilterChange = new EventEmitter();
|
||||
@Input() actionRoute:boolean = false;
|
||||
queryParams = {};
|
||||
constructor(private _router: Router, private route: ActivatedRoute) {}
|
||||
constructor(private _router: Router, private route: ActivatedRoute, private _fb: FormBuilder) {}
|
||||
|
||||
ngOnInit() {
|
||||
if(this.mandatoryRange) {
|
||||
this.formValidators.push(StringUtils.rangeRequired(this.mandatoryRange));
|
||||
}
|
||||
this.rangeForm = this._fb.group({
|
||||
yearFrom: [this.filter.selectedFromValue, this.yearValidators],
|
||||
yearTo: [this.filter.selectedToValue, this.yearValidators]
|
||||
}, {validators: this.formValidators});
|
||||
this.route.queryParams.subscribe(params => {
|
||||
this.queryParams = Object.assign({}, params);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
import { NgModule} from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import {NgModule} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {ReactiveFormsModule} from '@angular/forms';
|
||||
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";
|
||||
import {InputModule} from "../../sharedComponents/input/input.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, RouterModule
|
||||
CommonModule, RouterModule, InputModule, ReactiveFormsModule
|
||||
],
|
||||
declarations: [
|
||||
RangeFilterComponent, InValidYearValidatorDirective, FromYearAfterToYearValidatorDirective, RangeYearsRequiredDirective
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {UrlSegment} from '@angular/router';
|
||||
import {AbstractControl, ValidationErrors, ValidatorFn, Validators} from "@angular/forms";
|
||||
import {AbstractControl, FormGroup, ValidationErrors, ValidatorFn, Validators} from "@angular/forms";
|
||||
import {Stakeholder} from "../monitor/entities/stakeholder";
|
||||
import {CommunityInfo} from "../connect/community/communityInfo";
|
||||
import {properties} from "../../../environments/environment";
|
||||
|
|
@ -417,4 +417,24 @@ export class StringUtils {
|
|||
}
|
||||
return html;
|
||||
}
|
||||
|
||||
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);
|
||||
};
|
||||
}
|
||||
|
||||
public static fromYearAfterToYearValidator: ValidatorFn = (control: FormGroup): 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);
|
||||
}
|
||||
|
||||
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);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue