Add 'searchResultsPerPage' and 'searchSorting' components to be used in search pages.
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@53918 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni
parent
de7e1cae2e
commit
d17ca55f06
|
|
@ -0,0 +1,87 @@
|
|||
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() {
|
||||
console.info("SearchResultsPerPage: onInit");
|
||||
}
|
||||
|
||||
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)});
|
||||
}*/
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { NgModule} from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
import{SearchResultsPerPageComponent} from './searchResultsPerPage.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, RouterModule
|
||||
],
|
||||
declarations: [
|
||||
SearchResultsPerPageComponent
|
||||
],
|
||||
|
||||
providers:[
|
||||
],
|
||||
exports: [
|
||||
SearchResultsPerPageComponent
|
||||
|
||||
]
|
||||
})
|
||||
export class SearchResultsPerPageModule { }
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
import {Component, Input, Output, EventEmitter} from '@angular/core';
|
||||
import {Observable} from 'rxjs/Observable';
|
||||
|
||||
import {Router, ActivatedRoute} from '@angular/router';
|
||||
import {RouterHelper} from '../../utils/routerHelper.class';
|
||||
@Component({
|
||||
selector: 'search-sorting',
|
||||
template: `
|
||||
<!--form class="uk-form-horizontal uk-width-1-1">
|
||||
<div class="uk-form-label inherit-color">Sort By:</div>
|
||||
<div class="uk-form-controls">
|
||||
<select class="uk-select" id="form-horizontal-select" name="select_sort_results"
|
||||
[(ngModel)]="sortBy" (ngModelChange)="navigateSort(sortBy)">
|
||||
<option value="">Relevance score</option>
|
||||
<option value="resultdateofacceptance,descending">Year</option>
|
||||
</select>
|
||||
</div>
|
||||
</form-->
|
||||
|
||||
<!--select class="uk-select uk-width-2-3 uk-float-right" id="form-horizontal-select" name="select_sort_results"
|
||||
[(ngModel)]="sortBy" (ngModelChange)="navigateSort(sortBy)">
|
||||
<option value="">Most relevant first</option>
|
||||
<option value="resultdateofacceptance,descending">Most recent first</option>
|
||||
</select-->
|
||||
|
||||
<span class="uk-width-2-3@m uk-width-1-1@s uk-float-right">
|
||||
<span class="uk-width-1-3"> Sort by:</span>
|
||||
<select class="uk-select uk-width-2-3@m uk-width-auto" id="form-horizontal-select" name="select_results_per_page"
|
||||
[(ngModel)]="sortBy" (ngModelChange)="sortByChanged()">
|
||||
<option value="">Relevance</option>
|
||||
<option value="resultdateofacceptance,descending">Date</option>
|
||||
</select>
|
||||
</span>
|
||||
|
||||
<!--ul class="uk-subnav uk-subnav-pill">
|
||||
<li [class]="sortBy == '' ? 'uk-active' : ''"><a [queryParams]="routerHelper.createQueryParams(parameterNames,parameterValues)" routerLinkActive="router-link-active" [routerLink]=baseUrl>Sort by Relevance</a></li>
|
||||
<li [class]="sortBy == 'resultdateofacceptance,descending'? 'uk-active' : ''"><a [queryParams]="routerHelper.createQueryParamsSortBy(parameterNames,parameterValues,'sortBy',sortBy)" routerLinkActive="router-link-active" [routerLink]=baseUrl>Sort by Date</a></li>
|
||||
</ul-->
|
||||
`
|
||||
})
|
||||
|
||||
export class SearchSortingComponent {
|
||||
/*@Input() searchUtils;
|
||||
@Input() baseUrl;
|
||||
@Input() parameterNames:string[];
|
||||
@Input() parameterValues:string[];
|
||||
*/
|
||||
@Input() sortBy: string="";
|
||||
@Output() sortByChange = new EventEmitter();
|
||||
|
||||
//public routerHelper:RouterHelper = new RouterHelper();
|
||||
|
||||
constructor (/*private route: ActivatedRoute, private _router: Router*/) {}
|
||||
|
||||
ngOnInit() {}
|
||||
|
||||
/*navigateSort(sortBy: string) {
|
||||
this.searchUtils.page = 1;
|
||||
|
||||
console.info("sortBy="+sortBy);
|
||||
if(sortBy) {
|
||||
this._router.navigate([this.baseUrl], { queryParams: this.routerHelper.createQueryParamsSortBy(this.parameterNames, this.parameterValues, 'sortBy', sortBy)});
|
||||
} else {
|
||||
let index: number = this.parameterNames.findIndex(function(element) {
|
||||
return element == "sortBy";
|
||||
});
|
||||
console.info("index of sortby: "+index);
|
||||
if(index >= 0) {
|
||||
this.parameterNames.splice(index, 1);
|
||||
this.parameterValues.splice(index, 1);
|
||||
}
|
||||
this._router.navigate([this.baseUrl], { queryParams: this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)});
|
||||
}
|
||||
}*/
|
||||
|
||||
sortByChanged() {
|
||||
this.sortByChange.emit({
|
||||
value: this.sortBy
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { NgModule} from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
import{SearchSortingComponent} from './searchSorting.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, RouterModule
|
||||
],
|
||||
declarations: [
|
||||
SearchSortingComponent
|
||||
],
|
||||
|
||||
providers:[
|
||||
],
|
||||
exports: [
|
||||
SearchSortingComponent
|
||||
|
||||
]
|
||||
})
|
||||
export class SearchSortingModule { }
|
||||
Loading…
Reference in New Issue