[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
This commit is contained in:
konstantina.galouni
parent
1909165ad8
commit
468e6e4b9b
|
|
@ -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">-->
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue