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

This commit is contained in:
Konstantinos Triantafyllou 2023-05-10 11:51:59 +03:00
parent 128c03c671
commit 1af14e068d
4 changed files with 20 additions and 40 deletions

View File

@ -10,45 +10,17 @@
<div> <div>
<div class = "uk-animation-fade filterItem searchFilterItem uk-text-small"> <div class = "uk-animation-fade filterItem searchFilterItem uk-text-small">
<div class="searchFilterBoxValues "> <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> <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>
<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"> <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> <ul class="uk-text-small uk-grid uk-grid-small uk-grid-divider" uk-grid>
<!-- + (isDisabled ? ' uk-disabled uk-text-muted' : '')"-->
<li> <li>
<a *ngIf="actionRoute" [routerLink]="getRoute()" <a *ngIf="actionRoute" [routerLink]="getRoute()"
[queryParams]="getParams(0,(stringToNum(filter.selectedToValue) == [queryParams]="getParams(0,(stringToNum(filter.selectedToValue) ==
@ -100,7 +72,7 @@
<!-- End of Natalia's suggestion --> <!-- End of Natalia's suggestion -->
</div> </div>
</form> </div>
</div> </div>
</div> </div>
</div> </div>

View File

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

View File

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

View File

@ -431,21 +431,23 @@ export class StringUtils {
public static inValidYearValidator(minYear, maxYear): ValidatorFn { public static inValidYearValidator(minYear, maxYear): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} | null => { 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 => { public static fromYearAfterToYearValidator: ValidatorFn = (control: UntypedFormGroup): ValidationErrors | null => {
const yearFrom = control.get('yearFrom'); const yearFrom = control.get('yearFrom');
const yearTo = control.get('yearTo'); 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 { public static rangeRequired( enabled:boolean): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => { return (control: AbstractControl): ValidationErrors | null => {
const yearFrom = control.get('yearFrom'); const yearFrom = control.get('yearFrom');
const yearTo = control.get('yearTo'); 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);
}; };
} }