From 468e6e4b9bd9480e119059e25b235b4c1627da37 Mon Sep 17 00:00:00 2001
From: "konstantina.galouni"
 <konstantina.galouni@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Wed, 26 Feb 2020 15:01:16 +0000
Subject: [PATCH] [Trunk | Library]: 1. newSearchPage.module.ts: Use relative
 path for "RangeFilterModule" import. 2. newSearchPage.component.html: Remove
 <csv-download> from offcanvas (search filters in small screens) | Add
 "offcanvas-white" class together with "uk-offcanvas-bar" class (search
 filters in small screens). 3. searchFilter.component.html: Improve code for
 radio buttons | Add <label> in checkboxes and radio buttons to enable
 clicking on filter names. 4. searchPaging.component.ts: [Bug fix] remove
 "uk-flex uk-flex-middle" classes | Add check to hide paging (and its css)
 when not visible pages/results. 5. rangeFilter.component.html: Improve error
 messages & move them above buttons.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58148 d315682c-612b-4755-9ff5-7f18f6832af3
---
 .../searchUtils/newSearchPage.component.html  | 10 ++++----
 .../searchUtils/newSearchPage.component.ts    |  4 ++--
 .../searchUtils/newSearchPage.module.ts       |  4 ++--
 .../searchUtils/searchFilter.component.html   | 15 ++++++------
 .../searchUtils/searchPaging.component.ts     |  9 ++++---
 utils/rangeFilter/rangeFilter.component.html  | 24 +++++++++----------
 6 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/searchPages/searchUtils/newSearchPage.component.html b/searchPages/searchUtils/newSearchPage.component.html
index 4760383e..7a54c6f4 100644
--- a/searchPages/searchUtils/newSearchPage.component.html
+++ b/searchPages/searchUtils/newSearchPage.component.html
@@ -67,7 +67,7 @@
               </a>
 
               <div id="offcanvas-usage" uk-offcanvas overlay style="z-index:10000;">
-                <div class="uk-offcanvas-bar">
+                <div class="uk-offcanvas-bar offcanvas-white">
                   <button class="uk-offcanvas-close" type="button" uk-close></button>
                   <div   class="uk-width-1-1   uk-margin-small-bottom  uk-margin-top">
 
@@ -79,10 +79,10 @@
                         <span uk-tooltip="title: List view" class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="table" ratio="1"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span>
                       </span>
                     </span>
-                    <search-download *ngIf= "!showUnknownFilters && searchUtils.totalResults > 0 && ( entityType !=
-                    'community' && entityType != 'funder') && usedBy == 'search'"
-                                     class="uk-width-1-2" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils" [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults">
-                    </search-download>
+<!--                    <search-download *ngIf= "!showUnknownFilters && searchUtils.totalResults > 0 && ( entityType !=-->
+<!--                    'community' && entityType != 'funder') && usedBy == 'search'"-->
+<!--                                     class="uk-width-1-2" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils" [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults">-->
+<!--                    </search-download>-->
 
                     <div *ngIf="selectedRangeFilters > 0 || selectedFilters > 0" class="uk-margin-small-bottom">
 <!--                      <div class="uk-grid uk-margin-bottom uk-margin-top">-->
diff --git a/searchPages/searchUtils/newSearchPage.component.ts b/searchPages/searchUtils/newSearchPage.component.ts
index 7de228f8..c6e47f0c 100644
--- a/searchPages/searchUtils/newSearchPage.component.ts
+++ b/searchPages/searchUtils/newSearchPage.component.ts
@@ -368,9 +368,9 @@ export class NewSearchPageComponent {
               if(yearFrom && yearTo) {
                 filter.selectedFromAndToValues = yearFrom + "-" + yearTo;
               } else if(yearFrom) {
-                filter.selectedFromAndToValues = "from " + yearFrom;
+                filter.selectedFromAndToValues = "From " + yearFrom;
               } else if(yearTo) {
-                filter.selectedFromAndToValues = "until " + yearTo;
+                filter.selectedFromAndToValues = "Until " + yearTo;
               }
 
               if(!yearFrom && !yearTo) {
diff --git a/searchPages/searchUtils/newSearchPage.module.ts b/searchPages/searchUtils/newSearchPage.module.ts
index 1f5817c1..40b6d1f2 100644
--- a/searchPages/searchUtils/newSearchPage.module.ts
+++ b/searchPages/searchUtils/newSearchPage.module.ts
@@ -6,8 +6,8 @@ import { RouterModule } from '@angular/router';
 import{NewSearchPageComponent} from './newSearchPage.component';
 import{SearchFormModule} from './searchForm.module';
 import {SearchFilterModule} from './searchFilter.module';
-import {RangeFilterModule} from 'app/openaireLibrary/utils/rangeFilter/rangeFilter.module';
-import{LoadingModalModule} from '../../utils/modal/loadingModal.module';
+import {RangeFilterModule} from "../../utils/rangeFilter/rangeFilter.module";
+import {LoadingModalModule} from '../../utils/modal/loadingModal.module';
 import {ReportsServiceModule} from '../../services/reportsService.module';
 import{SearchPagingModule} from './searchPaging.module';
 import {SearchResultsPerPageModule} from './searchResultsPerPage.module';
diff --git a/searchPages/searchUtils/searchFilter.component.html b/searchPages/searchUtils/searchFilter.component.html
index 956eff5a..04b8e57e 100644
--- a/searchPages/searchUtils/searchFilter.component.html
+++ b/searchPages/searchUtils/searchFilter.component.html
@@ -36,17 +36,18 @@
           <div *ngFor="let value of getSelectedAndTopValues(filter, 6)"
                class="uk-animation-fade filterItem searchFilterItem uk-text-small">
             <div title = "{{value.name}}">
-              <ng-container *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'">
+              <label *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'">
                 <input *ngIf="filter.filterType == 'checkbox'" type="checkbox"
                        [disabled]="isDisabled || (showResultCount && value.number === 0)"
                        [(ngModel)]="value.selected" (ngModelChange)="filterChange(value.selected)" />
                 <input *ngIf="filter.filterType == 'radio'" type="radio"
                        [disabled]="isDisabled || (showResultCount && value.number === 0)"
-                       [name]=filter.filterId [checked]="value.selected" (click)="uniqueFilterChange(value)"/>
+                       [name]=filter.filterId  [value]="true" [(ngModel)]="value.selected" (click)="uniqueFilterChange(value)"/>
                 {{' '+_formatName(value)}}
                 <span *ngIf = "showResultCount === true" >
-                      {{' ('+(value.number|number)+')'}}</span>
-              </ng-container>
+                  {{' ('+(value.number|number)+')'}}
+                </span>
+              </label>
             </div>
           </div>
         </ng-container>
@@ -106,17 +107,17 @@
               <ng-container *ngFor="let value of sort(filter.values)"
                    class="uk-animation-fade filterItem searchFilterItem uk-text-small">
                 <div title = "{{value.name}}">
-                  <ng-container *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'">
+                  <label *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'">
                     <input *ngIf="filter.filterType == 'checkbox'" type="checkbox"
                            [disabled]="isDisabled || (showResultCount && value.number === 0)"
                            [(ngModel)]="value.selected" (ngModelChange)="filterChange(value.selected)" />
                     <input *ngIf="filter.filterType == 'radio'" type="radio"
                            [disabled]="isDisabled || (showResultCount && value.number === 0)"
-                           [name]=filter.filterId [checked]="value.selected" (click)="uniqueFilterChange(value)"/>
+                           [name]=filter.filterId  [value]="true" [(ngModel)]="value.selected" (click)="uniqueFilterChange(value)"/>
                     {{' '+_formatName(value)}}
                     <span *ngIf = "showResultCount === true" >
                       {{' ('+(value.number|number)+')'}}</span>
-                  </ng-container>
+                  </label>
                 </div>
               </ng-container>
             </div>
diff --git a/searchPages/searchUtils/searchPaging.component.ts b/searchPages/searchUtils/searchPaging.component.ts
index 67c75d6f..c25e8cc7 100644
--- a/searchPages/searchUtils/searchPaging.component.ts
+++ b/searchPages/searchUtils/searchPaging.component.ts
@@ -5,16 +5,19 @@ import {ErrorCodes} from '../../utils/properties/errorCodes';
 @Component({
     selector: 'search-paging',
     template: `
-    <div class= "paging-hr searchPaging uk-margin-small-bottom">
+    <div class= "paging-hr searchPaging uk-margin-small-bottom"
+         *ngIf="(results && searchUtils.totalResults > 0) || (!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING)">
       <div class="uk-panel uk-margin-small-top uk-grid  uk-flex uk-flex-middle">
-        <div class="uk-width-1-1@s uk-width-1-2@m  uk-text-uppercase" *ngIf="results && searchUtils.totalResults > 0">
+        <div class="uk-width-1-1@s uk-width-1-2@m  uk-text-uppercase" 
+             *ngIf="results && searchUtils.totalResults > 0">
           {{searchUtils.totalResults|number}}
           <span class="uk-text-muted uk-text-uppercase"> {{type}}, page </span>
           {{searchUtils.page | number}}
           <span class="uk-text-muted uk-text-uppercase"> of </span>
           {{(totalPages(searchUtils.totalResults)|number)}}
         </div>
-        <div class="uk-width-1-1@s uk-width-1-2@m uk-flex uk-flex-middle" *ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING">
+        <div class="uk-width-1-1@s uk-width-1-2@m" 
+             *ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING">
           {{oldTotalResults|number}}
           <span class="uk-text-muted uk-text-uppercase"> {{type}}, page </span>
           {{searchUtils.page | number}}
diff --git a/utils/rangeFilter/rangeFilter.component.html b/utils/rangeFilter/rangeFilter.component.html
index 0e3f1607..abba1401 100644
--- a/utils/rangeFilter/rangeFilter.component.html
+++ b/utils/rangeFilter/rangeFilter.component.html
@@ -26,6 +26,18 @@
               </svg>
             </button>
 
+            <div *ngIf="(yearFrom.invalid && focusedInput != 'from' && (yearFrom.dirty || yearFrom.touched)) ||
+                        (yearTo.invalid && focusedInput != 'to' && (yearTo.dirty || yearTo.touched))"
+                 class="alert alert-danger uk-margin-small-top uk-margin-remove-bottom">
+              <div *ngIf="(yearFrom.errors && yearFrom.errors.inValidYear) || (yearTo.errors && yearTo.errors.inValidYear)">
+                Year must be between {{yearMin}} and {{yearMax}}.
+              </div>
+            </div>
+            <div *ngIf="yearFrom.valid && yearTo.valid && rangeForm.errors?.fromYearAfterToYear && (rangeForm.touched || rangeForm.dirty)"
+                 class="alert alert-danger uk-margin-small-top uk-margin-remove-bottom">
+              Starting year must be greater than or equal to ending year.
+            </div>
+
             <div>
               <div class="range-button uk-button-group uk-margin-small-top">
 <!--                padding: 0 25px;-->
@@ -44,18 +56,6 @@
                 </button>
               </div>
             </div>
-
-            <div *ngIf="(yearFrom.invalid && focusedInput != 'from' && (yearFrom.dirty || yearFrom.touched)) ||
-                        (yearTo.invalid && focusedInput != 'to' && (yearTo.dirty || yearTo.touched))"
-                 class="alert alert-danger uk-margin-small-top uk-margin-remove-bottom">
-              <div *ngIf="(yearFrom.errors && yearFrom.errors.inValidYear) || (yearTo.errors && yearTo.errors.inValidYear)">
-                Year must be between {{yearMin}} and {{yearMax}}.
-              </div>
-            </div>
-            <div *ngIf="yearFrom.valid && yearTo.valid && rangeForm.errors?.fromYearAfterToYear && (rangeForm.touched || rangeForm.dirty)"
-                 class="alert alert-danger uk-margin-small-top uk-margin-remove-bottom">
-              "From" year must be equal or greater than "To" year.
-            </div>
           </form>
         </div>
       </div>