use the paging component with direct links, add the baseurl in searchPage, reorganizing links in navBar
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@43955 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
parent
f643e4a18c
commit
ebb572a02f
|
@ -20,6 +20,7 @@ import { DepositResultComponent } from './deposit/depositResult.component';
|
|||
import { ErrorPageComponent } from './error/errorPage.component';
|
||||
import { TestComponent } from './test/test.component';
|
||||
|
||||
import { SearchAllComponent } from './searchAll/searchAll.component';
|
||||
|
||||
const appRoutes: Routes = [
|
||||
{ path: '', component: SearchComponent, pathMatch: 'full' },
|
||||
|
@ -41,6 +42,7 @@ const appRoutes: Routes = [
|
|||
{ path: 'deposit', component: DepositComponent},
|
||||
{ path: 'deposit-results', component: DepositResultComponent},
|
||||
{ path: 'test', component: TestComponent},
|
||||
{ path: 'search', component: SearchAllComponent },
|
||||
{ path: 'error', component: ErrorPageComponent},
|
||||
|
||||
{ path: '**', component: ErrorPageComponent } // it has to be the last one - otherwise the next declaration are ignored
|
||||
|
|
|
@ -6,6 +6,7 @@ import {Publication} from '../utils/entities/publication';
|
|||
import {PagingFormatter} from '../utils/pagingFormatter.component';
|
||||
import {PublicationTitleFormatter} from '../utils/publicationTitleFormatter.component';
|
||||
|
||||
import {Location} from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'search-all',
|
||||
|
@ -20,12 +21,12 @@ import {PublicationTitleFormatter} from '../utils/publicationTitleFormatter.comp
|
|||
<h1>Search</h1>
|
||||
<form>
|
||||
<input #term [(ngModel)]="keyword" name= "searchAllTerm" />
|
||||
<button (click)="search(term)" type="submit" class="btn btn-default">Search</button>
|
||||
<button (click)="search(keyword)" type="submit" class="btn btn-default">Search</button>
|
||||
</form>
|
||||
<div>
|
||||
<div *ngIf="resultsNum != null && resultsNum > 0">
|
||||
<p > {{resultsNum }} Total Results </p>
|
||||
<paging [currentPage]="page" [totalResults]="resultsNum" [navigateTo]="navigateTo" [term]="keyword" [size]="size"> </paging>
|
||||
<paging [currentPage]="page" [totalResults]="resultsNum" [baseUrl]="'/search?keyword='+keyword" [size]="size"> </paging>
|
||||
</div>
|
||||
<div >
|
||||
|
||||
|
@ -38,9 +39,10 @@ import {PublicationTitleFormatter} from '../utils/publicationTitleFormatter.comp
|
|||
})
|
||||
export class SearchAllComponent {
|
||||
constructor (private _searchService: SearchCrossrefService,
|
||||
private route: ActivatedRoute) {}
|
||||
private route: ActivatedRoute, private _location: Location) {}
|
||||
ngOnInit() {
|
||||
this.sub = this.route.queryParams.subscribe(params => {
|
||||
console.log("Path: " + this._location.path());
|
||||
this.sub = this.route.queryParams.subscribe(params => {
|
||||
|
||||
let page = (params['page']=== undefined)?1:+params['page'];
|
||||
let size = (params['size']=== undefined)?10:+params['size'];
|
||||
|
@ -71,7 +73,7 @@ export class SearchAllComponent {
|
|||
resultsNum : Observable<number> ;
|
||||
search(term: string, size : number, page : number) {
|
||||
// if(this.source == 'crossref' && this.publication){
|
||||
this.searchCrossref(term,size,page);
|
||||
this.searchCrossref(term,10,1);
|
||||
// }else if(this.source == 'openaire' && this.publication){
|
||||
//
|
||||
// }else if(this.source == 'openaire' && this.publication){
|
||||
|
|
|
@ -13,7 +13,7 @@ import {OpenaireProperties, ErrorCodes} from '../utils/properties/openaireProper
|
|||
|
||||
<search-page pageTitle="Search Publications" type="publication" [(filters)] = "filters"
|
||||
[(results)] = "results" [(totalResults)] = "totalResults" [(keyword)] = "keyword"
|
||||
[(page)] = "page" [(size)] = "size" [(status)] = "status" (queryChange)="queryChanged($event)" >
|
||||
[(page)] = "page" [(size)] = "size" [(status)] = "status" [baseUrl] = "baseUrl" (queryChange)="queryChanged($event)" >
|
||||
</search-page>
|
||||
|
||||
`
|
||||
|
@ -24,6 +24,7 @@ export class SearchPublicationsComponent {
|
|||
private filters =[];
|
||||
public totalResults:number = 0 ;
|
||||
public status:number;
|
||||
private baseUrl:string;
|
||||
private keyword = '';
|
||||
private page :number = 1;
|
||||
private size :number = 10;
|
||||
|
@ -34,6 +35,7 @@ export class SearchPublicationsComponent {
|
|||
this.filters =[];
|
||||
var errorCodes:ErrorCodes = new ErrorCodes();
|
||||
this.status =errorCodes.LOADING;
|
||||
this.baseUrl = OpenaireProperties.getLinkToSearchPublications();
|
||||
|
||||
|
||||
|
||||
|
@ -41,6 +43,7 @@ export class SearchPublicationsComponent {
|
|||
private ngOnInit() {
|
||||
this.sub = this.route.queryParams.subscribe(params => {
|
||||
this.keyword = (params['keyword']?params['keyword']:'');
|
||||
this.page = (params['page']=== undefined)?1:+params['page'];
|
||||
for(var i=0; i<5 ; i++){
|
||||
var values = [];
|
||||
for(var j=0; j<10 ; j++){
|
||||
|
|
|
@ -35,7 +35,8 @@ import {SearchResult} from '../../utils/entities/searchResult';
|
|||
<search-form [(keyword)]="keyword" (keywordChange)="keywordChanged($event)"></search-form>
|
||||
|
||||
<div class="text-right" *ngIf="results && results.length>= size">
|
||||
<paging-no-load [(currentPage)]="page" [totalResults]="totalResults" [size]="size" (pageChange)="pageChanged($event)" > </paging-no-load>
|
||||
<paging [currentPage]="page" [totalResults]="totalResults" [baseUrl]="baseUrl+createQueryParameters()" [size]="size"> </paging>
|
||||
<!--paging-no-load [(currentPage)]="page" [totalResults]="totalResults" [size]="size" (pageChange)="pageChanged($event)" > </paging-no-load-->
|
||||
</div>
|
||||
<div>
|
||||
<!--p *ngFor="let result of results">
|
||||
|
@ -62,6 +63,7 @@ export class SearchPageComponent {
|
|||
@Input() status: number;
|
||||
@Input() totalResults: number = 0;
|
||||
@Input() keyword:string = '';
|
||||
@Input() baseUrl:string = '';
|
||||
|
||||
test= { value: 0};
|
||||
|
||||
|
@ -176,9 +178,9 @@ export class SearchPageComponent {
|
|||
console.info("searchPage: keyword= "+this.keyword);
|
||||
this.goTo(1);
|
||||
}
|
||||
pageChanged($event) {
|
||||
this.page = +$event.value;
|
||||
this.goTo(this.page);
|
||||
}
|
||||
// pageChanged($event) {
|
||||
// this.page = +$event.value;
|
||||
// this.goTo(this.page);
|
||||
// }
|
||||
|
||||
}
|
||||
|
|
|
@ -6,7 +6,6 @@ import { ErrorCodes} from '../../utils/properties/openaireProperties';
|
|||
selector: 'search-result',
|
||||
template: `
|
||||
<ul class="list-unstyled">
|
||||
Status:{{status}}
|
||||
<div *ngIf="status == errorCodes.LOADING" class="alert alert-info" role="alert">Loading...</div>
|
||||
<div *ngIf="status == errorCodes.NONE" class="alert alert-info" role="alert">No Results found</div>
|
||||
<div *ngIf="status == errorCodes.ERROR" class="alert alert-warning" role="alert">An Error Occured</div>
|
||||
|
|
|
@ -21,13 +21,28 @@ import 'rxjs/Rx';
|
|||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a routerLinkActive="active" routerLink="/claims">Claims Admin</a></li>
|
||||
<li><a routerLink="/myclaims">My Claims</a></li>
|
||||
<li><a routerLink="/linking">Linking</a></li>
|
||||
<li><a routerLink="/bulk-linking">Bulk Linking</a></li>
|
||||
<li><a routerLink="/deposit">Deposit</a></li>
|
||||
<li><a routerLink="/search/find/publications">Search Publications</a></li>
|
||||
<li><a routerLink="/search/advanced/publications">Advanced Search Publications</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Search <span class=""></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="/search/find/publications">Publications</a></li>
|
||||
<li><a href="#">Datasets</a></li>
|
||||
<li><a href="#">Projects</a></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="/search/advanced/publications">Advanced Search Publications</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Linking <span class=""></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a routerLinkActive="active" routerLink="/claims">Claims Admin</a></li>
|
||||
<li><a routerLink="/myclaims">My Claims</a></li>
|
||||
<li><a routerLink="/linking">Linking</a></li>
|
||||
<li><a routerLink="/bulk-linking">Bulk Linking</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li><a routerLink="/deposit">Deposit</a></li>
|
||||
<li><a [queryParams]="{articleId: 'od_______908::3a5b2885656a91307156325644e73b92'}" routerLink="search/publication" >Publication </a></li>
|
||||
<li><a [queryParams]="{datasetId: 'datacite____::430ac1c41b7f99b7b543ef737dc41a74'}" routerLink="search/dataset" >Dataset </a></li>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import {Component, Input} from '@angular/core';
|
||||
import {Router} from '@angular/router';
|
||||
|
||||
import {DomSanitizer} from '@angular/platform-browser';
|
||||
//Usage Example <paging [currentPage]="page" [totalResults]="resultsNum" [navigateTo]="Search" [term]="keyword"> </paging>
|
||||
|
||||
@Component({
|
||||
|
@ -9,19 +9,19 @@ import {Router} from '@angular/router';
|
|||
<div *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage && currentPage <= getTotalPages() ) " >
|
||||
<ul class="pagination pagination-sm">
|
||||
|
||||
<li *ngIf=" currentPage > 1" ><a (click)="onPage((1))" aria-label="Previous">
|
||||
<li *ngIf=" currentPage > 1" ><a [href]="onPage((1))" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span></a></li>
|
||||
<!--<li *ngIf=" currentPage > 1"><a (click)="onPage((currentPage -1))">\<</a></li>-->
|
||||
<!--<li *ngIf=" currentPage > 1"><a [href]="onPage((currentPage -1))">\<</a></li>-->
|
||||
|
||||
<li *ngIf=" currentPage -2 > 0"><a (click)="onPage((currentPage -2))">{{currentPage -2}}</a></li>
|
||||
<li *ngIf=" currentPage -1 > 0 "><a (click)="onPage((currentPage -1))">{{currentPage -1}}</a></li>
|
||||
<li *ngIf=" currentPage -2 > 0"><a [href]="onPage((currentPage -2))">{{currentPage -2}}</a></li>
|
||||
<li *ngIf=" currentPage -1 > 0 "><a [href]="onPage((currentPage -1))">{{currentPage -1}}</a></li>
|
||||
<li class="active"><a >{{currentPage}}</a></li>
|
||||
<li *ngIf=" currentPage +1 <= getTotalPages() "><a (click)="onPage((currentPage +1))">{{currentPage +1}}</a></li>
|
||||
<li *ngIf=" currentPage +2 <= getTotalPages() "><a (click)="onPage((currentPage +2))">{{currentPage +2}}</a></li>
|
||||
<li *ngIf=" (currentPage -2 <= 0)&&(currentPage +3 <= getTotalPages()) "><a (click)="onPage((currentPage +3))">{{currentPage +3}}</a></li>
|
||||
<li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) "><a (click)="onPage((currentPage +4))">{{currentPage +4}}</a></li>
|
||||
<li *ngIf=" currentPage +1 <= getTotalPages() "><a [href]="onPage((currentPage +1))">{{currentPage +1}}</a></li>
|
||||
<li *ngIf=" currentPage +2 <= getTotalPages() "><a [href]="onPage((currentPage +2))">{{currentPage +2}}</a></li>
|
||||
<li *ngIf=" (currentPage -2 <= 0)&&(currentPage +3 <= getTotalPages()) "><a [href]="onPage((currentPage +3))">{{currentPage +3}}</a></li>
|
||||
<li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) "><a [href]="onPage((currentPage +4))">{{currentPage +4}}</a></li>
|
||||
|
||||
<li *ngIf="getTotalPages() > currentPage"><a (click)="onPage((getTotalPages()))" aria-label="Next">
|
||||
<li *ngIf="getTotalPages() > currentPage"><a [href]="onPage((getTotalPages()))" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</a></li>
|
||||
|
||||
|
@ -33,13 +33,11 @@ import {Router} from '@angular/router';
|
|||
|
||||
export class PagingFormatter {
|
||||
@Input() currentPage: number = 1;
|
||||
@Input() navigateTo: string;
|
||||
@Input() term: string='';
|
||||
@Input() size: number=10;
|
||||
@Input() totalResults: number = 10;
|
||||
@Input() params;
|
||||
@Input() baseUrl:string="";
|
||||
|
||||
constructor ( private _router: Router) {
|
||||
constructor ( private _router: Router, private sanitizer:DomSanitizer) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
@ -49,34 +47,9 @@ export class PagingFormatter {
|
|||
var i:number =parseInt(''+(this.totalResults/this.size));
|
||||
return (((this.totalResults/this.size) == i )? i :(i+1)) ;
|
||||
}
|
||||
onPrev(){
|
||||
if(this.params){
|
||||
let pageparams= this.params;
|
||||
pageparams.page=this.currentPage -1
|
||||
this._router.navigate( [this.navigateTo, pageparams] );
|
||||
}else{
|
||||
this._router.navigate( [this.navigateTo, { keyword: this.term, page: (this.currentPage -1) }] );
|
||||
}
|
||||
}
|
||||
|
||||
onNext(){
|
||||
if(this.params){
|
||||
let pageparams= this.params;
|
||||
pageparams.page=this.currentPage +1;
|
||||
this._router.navigate( [this.navigateTo, pageparams] );
|
||||
}else{
|
||||
this._router.navigate( [this.navigateTo, { keyword: this.term, page: (this.currentPage +1) }] );
|
||||
}
|
||||
}
|
||||
onPage(pageNum: number){
|
||||
if(this.params){
|
||||
let pageparams= this.params;
|
||||
pageparams.page=pageNum;
|
||||
this._router.navigate( [this.navigateTo, pageparams] );
|
||||
}else if(this.term!=''){
|
||||
this._router.navigate( [this.navigateTo, { keyword: this.term, page: pageNum, size: this.size }] );
|
||||
}else{
|
||||
this._router.navigate( [this.navigateTo, { page: pageNum, size: this.size }] );
|
||||
}
|
||||
return this.sanitizer.bypassSecurityTrustUrl( this.baseUrl+((this.baseUrl.indexOf("?") > -1 )?'&':'?')+ "page=" + (pageNum));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,7 +7,8 @@ export class OpenaireProperties {
|
|||
private static searchLinkToDataProvider = "search/dataprovider?datasourceId=";
|
||||
private static searchLinkToDataset = "search/dataset?datasetId=";
|
||||
private static searchLinkToOrganization = "search/organization?organizationId=";
|
||||
private static searchLinkToPublications = "search-publications?keyword=";
|
||||
//Search pages
|
||||
private static searchLinkToPublications = "search/find/publications?keyword=";
|
||||
|
||||
// Services - APIs
|
||||
|
||||
|
|
Loading…
Reference in New Issue