From 0c5483ac9b0c0f7d1902ab4dbec51d14495e956a Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Tue, 5 Apr 2022 20:08:11 +0300
Subject: [PATCH] [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).

---
 .../search-input/search-input.component.ts       |  1 -
 utils/rangeFilter/rangeFilter.component.html     | 16 ++++++++--------
 utils/rangeFilter/rangeFilter.component.ts       |  3 +++
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/sharedComponents/search-input/search-input.component.ts b/sharedComponents/search-input/search-input.component.ts
index c4e9d4cf..f926b5b4 100644
--- a/sharedComponents/search-input/search-input.component.ts
+++ b/sharedComponents/search-input/search-input.component.ts
@@ -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">
diff --git a/utils/rangeFilter/rangeFilter.component.html b/utils/rangeFilter/rangeFilter.component.html
index 49f2e350..6d438bc5 100644
--- a/utils/rangeFilter/rangeFilter.component.html
+++ b/utils/rangeFilter/rangeFilter.component.html
@@ -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">
diff --git a/utils/rangeFilter/rangeFilter.component.ts b/utils/rangeFilter/rangeFilter.component.ts
index a89d5c55..193d2de4 100644
--- a/utils/rangeFilter/rangeFilter.component.ts
+++ b/utils/rangeFilter/rangeFilter.component.ts
@@ -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