Change range-filter with new year-range input and add messages in the validators.
This commit is contained in:
parent
128c03c671
commit
1af14e068d
|
|
@ -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 input [formInput]="rangeForm.get('yearFrom')" [placeholder]="{label: 'e.g. ' + yearMin, static: true}"
|
||||
inputClass="flat small" class=" uk-width-1-3"></div>
|
||||
<span class="uk-margin-small-left uk-margin-small-right">-</span>
|
||||
<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>
|
||||
<div class="uk-width-4-5" input [formInput]="rangeForm" type="year-range" [yearRange]="yearRange" inputClass="flat small">
|
||||
<div action (click)="yearChanged()" class="action-icon"
|
||||
[class.disabled]="isDisabled || rangeForm.invalid || (!rangeForm.get('yearFrom').dirty && !rangeForm.get('yearTo').dirty) || rangeForm.get('yearFrom').invalid || rangeForm.get('yearTo').invalid">
|
||||
<icon name="chevron_right" [flex]="true"></icon>
|
||||
<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)"
|
||||
class="uk-text-danger 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="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>
|
||||
<div class="uk-flex uk-flex-middle uk-flex-wrap">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue