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

[Library | new-theme]: rangeFilter.component: [Bug fix] In range filters, years were not updating & errors were not properly displayed | search-input.component.ts: Remove styleUrls (file is deleted).

This commit is contained in:
Konstantina Galouni 2022-04-05 20:08:11 +03:00
parent 3af4eabea7
commit 0c5483ac9b
3 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
sharedComponents/search-input/search-input.component.ts
View File

@ -4,7 +4,6 @@ import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
@Component({
selector: '[search-input]',
styleUrls: ['search-input.component.css'],
template: `
<div class="uk-flex uk-flex-middle uk-flex-center search-input" [ngClass]="colorClass">
<div *ngIf="control" class="uk-width-expand" [class.bordered]="bordered && (showSearch || selected)" [class.focused]="showSearch">

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

@ -2,7 +2,7 @@
<div class="uk-margin-small-top uk-margin-bottom uk-grid uk-flex uk-flex-bottom">
<h6 class="uk-margin-bottom-remove">{{_formatTitle(filter.title)}}</h6>
<a *ngIf="filter.selectedFromValue || filter.selectedToValue" (click)="clearFilter()"
[class]="(isDisabled ? 'uk-disabled' : '') + ' portal-link'">
[class]="(isDisabled ? 'uk-disabled' : '') + ' uk-text-small'">
Clear
</a>
</div>
@ -11,10 +11,10 @@
<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 #yearFrom input [formInput]="rangeForm.get('yearFrom')" [placeholder]="{label: 'e.g. ' + yearMin, static: true}"
<div 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>
<div #yearTo input [formInput]="rangeForm.get('yearTo')" [placeholder]="{label: 'e.g. ' + yearMax, static: true}"
<div 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 && (rangeForm.get('yearFrom').dirty || rangeForm.get('yearTo').dirty)) ? 'pointer' : 'default'}"
@ -29,20 +29,20 @@
</svg>
<span class="visually-hidden">GO</span>
</button>
<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').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-warning uk-margin-small-top uk-margin-remove-bottom uk-width-1-1">
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-warning uk-margin-small-top uk-margin-remove-bottom uk-width-1-1">
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">

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

@ -51,6 +51,9 @@ export class RangeFilterComponent {
if(yearsSelected != null) {
this.filter.selectedFromValue = (this.currentYear - yearsSelected) + "";
this.filter.selectedToValue = this.currentYear + "";
} else {
this.filter.selectedFromValue = this.rangeForm.get('yearFrom').value;
this.filter.selectedToValue = this.rangeForm.get('yearTo').value;
}
this.onFilterChange.emit({
value: this.filter