MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[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:
Konstantina Galouni 2022-04-05 16:45:38 +03:00
parent 8978e1df80
commit f3cc4520ad
4 changed files with 64 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
utils/rangeFilter/rangeFilter.component.html
View File

@ -10,51 +10,42 @@
<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-inline uk-text-small form-group uk-margin-remove-bottom'" <form [class]="(isDisabled ? 'uk-disabled' : '') + ' uk-flex uk-flex-middle uk-flex-wrap'" [formGroup]="rangeForm" >
#rangeForm="ngForm" fromYearAfterToYear [rangeRequired]="mandatoryRange"> <div #yearFrom input [formInput]="rangeForm.get('yearFrom')" [placeholder]="{label: 'e.g. ' + yearMin, static: true}"
<input class=" uk-input form-control uk-width-1-3 uk-form-small" (focus)="focusedInput = 'from'" inputClass="inner x-small" class=" uk-width-1-3"></div>
(blur)="focusedInput = ''"
[(ngModel)]="filter.selectedFromValue" name="yearFrom" #yearFrom="ngModel" inValidYear
[maxYear]="yearMax" [minYear]="yearMin"
[placeholder]="'e.g. ' + yearMin " />
<span class="uk-margin-small-left uk-margin-small-right">-</span> <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'" <div #yearTo input [formInput]="rangeForm.get('yearTo')" [placeholder]="{label: 'e.g. ' + yearMax, static: true}"
(blur)="focusedInput = ''" inputClass="inner x-small" class=" uk-width-1-3"></div>
[(ngModel)]="filter.selectedToValue" name="yearTo" #yearTo="ngModel" inValidYear
[maxYear]="yearMax" [minYear]="yearMin"
[placeholder]="'e.g. ' + yearMax "/>
<button type="submit" (click)="yearChanged()" <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-icon uk-icon-button uk-button-default uk-margin-small-left"
[class.uk-disabled]="isDisabled || rangeForm.invalid || (!yearFrom.dirty && !yearTo.dirty)" [class.uk-disabled]="isDisabled || rangeForm.invalid || (!rangeForm.get('yearFrom').dirty && !rangeForm.get('yearTo').dirty)
[disabled]="isDisabled || rangeForm.invalid || (!yearFrom.dirty && !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" <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
icon="chevron-right" ratio="1"> icon="chevron-right" ratio="1">
<polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline> <polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline>
</svg> </svg>
<span class="visually-hidden">GO</span> <span class="visually-hidden">GO</span>
</button> </button>
<div *ngIf="(rangeForm.get('yearFrom').invalid && !yearFrom.focused && (rangeForm.get('yearFrom').dirty || rangeForm.get('yearFrom').touched)) ||
<div *ngIf="(yearFrom.invalid && focusedInput != 'from' && (yearFrom.dirty || yearFrom.touched)) || (rangeForm.get('yearTo').invalid && !yearTo.focused && (rangeForm.get('yearTo').dirty || rangeForm.get('yearTo').touched))"
(yearTo.invalid && focusedInput != 'to' && (yearTo.dirty || yearTo.touched))" class="uk-text-warning uk-margin-small-top uk-margin-remove-bottom uk-width-1-1">
class="alert alert-danger uk-margin-small-top uk-margin-remove-bottom"> <div *ngIf="(rangeForm.get('yearFrom').errors && rangeForm.get('yearFrom').errors['inValidYear']) || (rangeForm.get('yearTo').errors && rangeForm.get('yearTo').errors['inValidYear'])">
<div *ngIf="(yearFrom.errors && yearFrom.errors.inValidYear) || (yearTo.errors && yearTo.errors.inValidYear)">
Year must be between {{yearMin}} and {{yearMax}}. Year must be between {{yearMin}} and {{yearMax}}.
</div> </div>
</div> </div>
<div *ngIf="yearFrom.valid && yearTo.valid && rangeForm.errors?.fromYearAfterToYear && (rangeForm.touched || rangeForm.dirty)" <div *ngIf="rangeForm.get('yearFrom').valid && rangeForm.get('yearTo').valid && rangeForm.errors && rangeForm.errors['fromYearAfterToYear'] && (rangeForm.touched || rangeForm.dirty)"
class="alert alert-danger uk-margin-small-top uk-margin-remove-bottom"> 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. Starting year must be greater than or equal to ending year.
</div> </div>
<div *ngIf="yearFrom.valid && yearTo.valid && !rangeForm.errors?.fromYearAfterToYear && <div *ngIf="rangeForm.get('yearFrom').valid && rangeForm.get('yearTo').valid && rangeForm.errors && !rangeForm.errors['fromYearAfterToYear'] &&
(rangeForm.touched || rangeForm.dirty) && mandatoryRange && rangeForm.errors?.rangeRequired" (rangeForm.touched || rangeForm.dirty) && mandatoryRange && rangeForm.errors['rangeRequired']"
class="alert alert-danger uk-margin-small-top uk-margin-remove-bottom"> class="uk-text-warning uk-margin-small-top uk-margin-remove-bottom uk-width-1-1">
Both starting and ending year are required Both starting and ending year are required
</div> </div>
<div *ngIf="showQuickButtons" class="uk-width-1-1">
<div *ngIf="showQuickButtons">
<!-- Natalia's suggestion-->
<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' : '')"--> <!-- + (isDisabled ? ' uk-disabled uk-text-muted' : '')"-->

20
utils/rangeFilter/rangeFilter.component.ts
View File

@ -1,9 +1,9 @@
import {Component, Input, Output, EventEmitter} from '@angular/core'; import {Component, EventEmitter, Input, Output} from '@angular/core';
import { RangeFilter } from './rangeFilterHelperClasses.class'; import {RangeFilter} from './rangeFilterHelperClasses.class';
import { Dates } from "../string-utils.class"; import {Dates, StringUtils} from "../string-utils.class";
import {ActivatedRoute, Router} from "@angular/router"; import {ActivatedRoute, Router} from "@angular/router";
import {Filter, Value} from "../../searchPages/searchUtils/searchHelperClasses.class";
import {properties} from "../../../../environments/environment"; import {properties} from "../../../../environments/environment";
import {FormBuilder} from "@angular/forms";
@Component({ @Component({
selector: 'range-filter', selector: 'range-filter',
@ -21,13 +21,23 @@ export class RangeFilterComponent {
@Input() yearMax: number = Dates.yearMax; @Input() yearMax: number = Dates.yearMax;
@Input() mandatoryRange:boolean = false; @Input() mandatoryRange:boolean = false;
public currentYear: number = Dates.currentYear; public currentYear: number = Dates.currentYear;
public yearValidators = [StringUtils.inValidYearValidator(this.yearMin, this.yearMax)];
public formValidators = [StringUtils.fromYearAfterToYearValidator];
public rangeForm;
@Output() onFilterChange = new EventEmitter(); @Output() onFilterChange = new EventEmitter();
@Input() actionRoute:boolean = false; @Input() actionRoute:boolean = false;
queryParams = {}; queryParams = {};
constructor(private _router: Router, private route: ActivatedRoute) {} constructor(private _router: Router, private route: ActivatedRoute, private _fb: FormBuilder) {}
ngOnInit() { 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.route.queryParams.subscribe(params => {
this.queryParams = Object.assign({}, params); this.queryParams = Object.assign({}, params);
}); });

11
utils/rangeFilter/rangeFilter.module.ts
View File

@ -1,16 +1,17 @@
import { NgModule} from '@angular/core'; import {NgModule} from '@angular/core';
import { CommonModule } from '@angular/common'; import {CommonModule} from '@angular/common';
import { FormsModule } from '@angular/forms'; import {ReactiveFormsModule} from '@angular/forms';
import { RouterModule } from '@angular/router'; import {RouterModule} from '@angular/router';
import {RangeFilterComponent} from './rangeFilter.component'; import {RangeFilterComponent} from './rangeFilter.component';
import {InValidYearValidatorDirective} from "./inValidYear.directive"; import {InValidYearValidatorDirective} from "./inValidYear.directive";
import {FromYearAfterToYearValidatorDirective} from "./fromYearAfterToYear.directive"; import {FromYearAfterToYearValidatorDirective} from "./fromYearAfterToYear.directive";
import {RangeYearsRequiredDirective} from "./rangeYearsRequired.directive"; import {RangeYearsRequiredDirective} from "./rangeYearsRequired.directive";
import {InputModule} from "../../sharedComponents/input/input.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, RouterModule CommonModule, RouterModule, InputModule, ReactiveFormsModule
], ],
declarations: [ declarations: [
RangeFilterComponent, InValidYearValidatorDirective, FromYearAfterToYearValidatorDirective, RangeYearsRequiredDirective RangeFilterComponent, InValidYearValidatorDirective, FromYearAfterToYearValidatorDirective, RangeYearsRequiredDirective

22
utils/string-utils.class.ts
View File

@ -1,5 +1,5 @@
import {UrlSegment} from '@angular/router'; 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 {Stakeholder} from "../monitor/entities/stakeholder";
import {CommunityInfo} from "../connect/community/communityInfo"; import {CommunityInfo} from "../connect/community/communityInfo";
import {properties} from "../../../environments/environment"; import {properties} from "../../../environments/environment";
@ -417,4 +417,24 @@ export class StringUtils {
} }
return html; 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);
};
}
} }