openaire-library/searchPages/searchUtils/searchResultsPerPage.compon...

86 lines
4.8 KiB
TypeScript
Raw Normal View History

import {Component, Input, Output, EventEmitter} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {ErrorCodes} from '../../utils/properties/errorCodes';
import {Router, ActivatedRoute} from '@angular/router';
import {RouterHelper} from '../../utils/routerHelper.class';
@Component({
selector: 'search-results-per-page',
template: `
<!--div class= "searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom"-->
<!--form class="uk-form-horizontal uk-width-1-2">
<div class="uk-form-label inherit-color">Results per page:</div>
<div class="uk-form-controls">
<select class="uk-select" id="form-horizontal-select" name="select_results_per_page"
[(ngModel)]="searchUtils.size" (ngModelChange)="navigate(searchUtils.size)">
<option [ngValue]="5" > 5</option>
<option [ngValue]="10">10</option>
<option [ngValue]="20">20</option>
<option [ngValue]="50">50</option>
</select>
</div>
</form-->
<!--select class="uk-select uk-width-2-3" id="form-horizontal-select" name="select_results_per_page"
[(ngModel)]="searchUtils.size" (ngModelChange)="navigate(searchUtils.size)">
<option [ngValue]="5" > 5 Results per page</option>
<option [ngValue]="10">10 Results per page</option>
<option [ngValue]="20">20 Results per page</option>
<option [ngValue]="50">50 Results per page</option>
</select-->
<!--/div-->
<!--span>Results per page:</span>
<span>
<ul class="uk-subnav uk-subnav-divider">
<li [class]="searchUtils.size == 5 ? 'uk-active' : ''"><a [queryParams]="routerHelper.createQueryParamsResultsPerPage(parameterNames,parameterValues,'size',5)" routerLinkActive="router-link-active" [routerLink]=baseUrl> 5</a></li>
<li [class]="searchUtils.size == 10 ? 'uk-active' : ''"><a [queryParams]="routerHelper.createQueryParamsResultsPerPage(parameterNames,parameterValues,'size',10)" routerLinkActive="router-link-active" [routerLink]=baseUrl>10</a></li>
<li [class]="searchUtils.size == 20 ? 'uk-active' : ''"><a [queryParams]="routerHelper.createQueryParamsResultsPerPage(parameterNames,parameterValues,'size',20)" routerLinkActive="router-link-active" [routerLink]=baseUrl>20</a></li>
<li [class]="searchUtils.size == 50 ? 'uk-active' : ''"><a [queryParams]="routerHelper.createQueryParamsResultsPerPage(parameterNames,parameterValues,'size',50)" routerLinkActive="router-link-active" [routerLink]=baseUrl>50</a></li>
</ul>
</span-->
<!--ul class="uk-subnav uk-subnav-divider">
<li>Results per page:</li>
<li [class]="searchUtils.size == 5 ? 'uk-active' : ''"><a [queryParams]="routerHelper.createQueryParamsResultsPerPage(parameterNames,parameterValues,'size',5)" routerLinkActive="router-link-active" [routerLink]=baseUrl> 5</a></li>
<li [class]="searchUtils.size == 10 ? 'uk-active' : ''"><a [queryParams]="routerHelper.createQueryParamsResultsPerPage(parameterNames,parameterValues,'size',10)" routerLinkActive="router-link-active" [routerLink]=baseUrl>10</a></li>
<li [class]="searchUtils.size == 20 ? 'uk-active' : ''"><a [queryParams]="routerHelper.createQueryParamsResultsPerPage(parameterNames,parameterValues,'size',20)" routerLinkActive="router-link-active" [routerLink]=baseUrl>20</a></li>
<li [class]="searchUtils.size == 50 ? 'uk-active' : ''"><a [queryParams]="routerHelper.createQueryParamsResultsPerPage(parameterNames,parameterValues,'size',50)" routerLinkActive="router-link-active" [routerLink]=baseUrl>50</a></li>
</ul-->
<!--[(ngModel)]="searchUtils.size" (ngModelChange)="navigate(searchUtils.size)"-->
<!--[(ngModel)]="=size" (ngModelChange)="sizeChanged()"-->
<span class="uk-width-2-3@m uk-width-1-1@s">
<span class="uk-width-5-6@m"> Results per page:</span>
<select class="uk-select uk-width-1-6@m uk-width-auto" id="form-horizontal-select" name="select_results_per_page"
[(ngModel)]="size" (ngModelChange)="sizeChanged()">
<option [ngValue]="5" > 5</option>
<option [ngValue]="10">10</option>
<option [ngValue]="20">20</option>
<option [ngValue]="50">50</option>
</select>
</span>
`
})
export class SearchResultsPerPageComponent {
@Input() size: number;
@Output() sizeChange = new EventEmitter();
constructor () {}
ngOnInit() {}
sizeChanged() {
this.sizeChange.emit({
value: this.size
});
}
/*navigate(size: number) {
this.searchUtils.page = 1;
console.info(size);
console.info(this.baseUrl);
this._router.navigate([this.baseUrl], { queryParams: this.routerHelper.createQueryParamsResultsPerPage(this.parameterNames,this.parameterValues,'size',size)});
}*/
}