First mock-search-page for publications
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@43229 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki
parent
00f9d6c5f6
commit
e12d5d0c14
|
|
@ -1,7 +1,7 @@
|
|||
import {Component, Directive, ElementRef, Renderer} from '@angular/core';
|
||||
import {RouteConfig, ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated';
|
||||
import {Http} from '@angular/http';
|
||||
import {SearchComponent} from './search/search.component';
|
||||
import {SearchComponent} from './searchPages/search.component';
|
||||
import {ClaimComponent} from './claimPages/claim/claim.component';
|
||||
import {ClaimsAdminComponent} from './claimPages/claims/claimsAdmin.component';
|
||||
import {HomeComponent} from './home/home.component';
|
||||
|
|
@ -11,6 +11,7 @@ import {MyClaimsComponent} from './claimPages/myClaims/myClaims.component';
|
|||
import {ProjectComponent} from './landingPages/project/project.component';
|
||||
import {PublicationComponent} from './landingPages/publication/publication.component';
|
||||
import {MyClaimsDemoComponent} from './claimPages/myClaimsDemo.component';
|
||||
import {SearchPublicationsComponent} from './searchPages/searchPublications.component';
|
||||
import 'rxjs/Rx';
|
||||
|
||||
|
||||
|
|
@ -18,7 +19,7 @@ import 'rxjs/Rx';
|
|||
@Component({
|
||||
selector: 'app',
|
||||
directives: [
|
||||
...ROUTER_DIRECTIVES
|
||||
...ROUTER_DIRECTIVES, SearchPublicationsComponent
|
||||
],
|
||||
styles: [`
|
||||
.router-link-active {
|
||||
|
|
@ -27,7 +28,7 @@ import 'rxjs/Rx';
|
|||
`],
|
||||
template: `
|
||||
<div>
|
||||
<nav class="navbar navbar-default">
|
||||
<nav class="navbar navbar-default" id="top">
|
||||
<div class="container-fluid">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
|
|
@ -46,7 +47,7 @@ import 'rxjs/Rx';
|
|||
<!-- <li class="active"><a [routerLink]=" ['/Search']" >Search <span class="sr-only">(current)</span></a></li>-->
|
||||
<li><a [routerLink]=" ['/Linking']">Linking</a></li>
|
||||
<li><a [routerLink]=" ['/Claims']">Claims Admin</a></li>
|
||||
|
||||
<li><a [routerLink]=" ['/SearchPublications']" >Search Publications </a></li>
|
||||
<!-- <li><a [routerLink]=" ['/Home']">Home</a></li>-->
|
||||
<li><a [routerLink]=" ['/MyClaims']">My claims</a></li>
|
||||
|
||||
|
|
@ -73,7 +74,8 @@ import 'rxjs/Rx';
|
|||
{ path: '/my-claims', component: MyClaimsComponent, name: 'MyClaims' },
|
||||
{ path: '/demo', component: MyClaimsDemoComponent, name: 'MyClaimsDemo' },
|
||||
{ path: '/project', component: ProjectComponent, name: 'Project' },
|
||||
{ path: '/publication', component: PublicationComponent, name: 'Publication' }
|
||||
{ path: '/publication', component: PublicationComponent, name: 'Publication' },
|
||||
{ path: '/search-publications', component: SearchPublicationsComponent, name: 'SearchPublications' }
|
||||
|
||||
])
|
||||
export class App {
|
||||
|
|
@ -82,13 +84,11 @@ export class App {
|
|||
server;
|
||||
|
||||
constructor(public http: Http ) {
|
||||
console.info('App constructor');
|
||||
|
||||
}
|
||||
|
||||
|
||||
ngOnInit() {
|
||||
console.info('App init');
|
||||
setTimeout(() => {
|
||||
this.server = 'Rendered on the Server';
|
||||
}, 10);
|
||||
|
|
|
|||
|
|
@ -11,8 +11,6 @@ import {Router, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
|
|||
|
||||
<li *ngIf=" currentPage > 1" ><a (click)="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 -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 class="active"><a >{{currentPage}}</a></li>
|
||||
|
|
@ -20,11 +18,10 @@ import {Router, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
|
|||
<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=" getTotalPages() > currentPage "><a (click)="onPage((currentPage+1))">\></a></li>-->
|
||||
<li *ngIf="getTotalPages() > currentPage"><a (click)="onPage((getTotalPages()))" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</a></li>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
|
@ -57,42 +54,22 @@ export class pagingFormatterNoLoad {
|
|||
return parseInt(''+((i==integerI)?i:i+1));
|
||||
}
|
||||
onPrev(){
|
||||
this.currentPage=-1;
|
||||
this.currentPage=this.currentPage-1;
|
||||
this.pageChange.emit({
|
||||
value: this.currentPage
|
||||
});
|
||||
// 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) }] );
|
||||
// }
|
||||
this.currentPage=+1;
|
||||
|
||||
this.currentPage=this.currentPage+1;
|
||||
this.pageChange.emit({
|
||||
value: this.currentPage
|
||||
});
|
||||
}
|
||||
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 }] );
|
||||
// }
|
||||
|
||||
this.currentPage=pageNum;
|
||||
this.pageChange.emit({
|
||||
value: this.currentPage
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
export class Filter{
|
||||
public title: string;
|
||||
public filterId: string;
|
||||
public countSelectedValues: number;
|
||||
public values: Value[];
|
||||
|
||||
}
|
||||
export class Value{
|
||||
public name: string;
|
||||
public id: string;
|
||||
public selected: boolean;
|
||||
public number: number;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
import {Component, Input, Output, EventEmitter} from '@angular/core';
|
||||
import {JSONP_PROVIDERS} from '@angular/http';
|
||||
import {Observable} from 'rxjs/Observable';
|
||||
import { RouteParams, RouteConfig, ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated';
|
||||
import { Filter, Value} from './search.class';
|
||||
|
||||
@Component({
|
||||
selector: 'search-filter',
|
||||
template: `
|
||||
<p>{{filter.title}} </p>
|
||||
<p *ngFor = "let value of filter.values.slice(0,5)" >
|
||||
<input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" /> <span> {{value.name}} ({{value.number}}) </span>
|
||||
|
||||
</p>
|
||||
<a *ngIf = "!showAll && filter.values.length > 5" (click)="toggleShowAll()" > More</a>
|
||||
<span *ngIf = "filter.values.length > 5 && showAll" >
|
||||
<p *ngFor = "let value of filter.values.slice(5)" >
|
||||
<input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" /> <span> {{value.name}} ({{value.number}}) </span>
|
||||
</p>
|
||||
<a (click)="toggleShowAll()" > Less</a>
|
||||
</span>
|
||||
|
||||
`
|
||||
})
|
||||
export class SearchFilterComponent {
|
||||
@Input() title;
|
||||
@Input() filterId;
|
||||
@Input() values; //array[] " name, id, number, selected"
|
||||
@Input() countSelectedValues:number = 0; //array[] " name, id, number, selected"
|
||||
@Output() change = new EventEmitter();
|
||||
@Input() test:{value:number} ;
|
||||
@Input() filter:Filter;
|
||||
private showAll:boolean = false;
|
||||
constructor () {
|
||||
|
||||
}
|
||||
ngOnInit() {
|
||||
|
||||
}
|
||||
|
||||
toggleShowAll(){
|
||||
this.showAll = !this.showAll;
|
||||
}
|
||||
|
||||
filterChange(selected:boolean){
|
||||
if(selected){
|
||||
this.filter.countSelectedValues++;
|
||||
}else{
|
||||
this.filter.countSelectedValues--;
|
||||
}
|
||||
this.change.emit({
|
||||
value: true
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
import {Component, Input, ViewChild, Output, EventEmitter} from '@angular/core';
|
||||
import {JSONP_PROVIDERS} from '@angular/http';
|
||||
import {Observable} from 'rxjs/Observable';
|
||||
import { RouteParams, RouteConfig, ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated';
|
||||
import {Location} from '@angular/common';
|
||||
import {SearchResultComponent} from './searchResult.component';
|
||||
import {SearchFilterComponent} from './searchFilter.component';
|
||||
import {pagingFormatterNoLoad} from '../../common/pagingFormatterNoLoad.component';
|
||||
import { Filter, Value} from './search.class';
|
||||
|
||||
@Component({
|
||||
selector: 'search-page',
|
||||
template: `
|
||||
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1>{{pageTitle}}</h1>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row row-offcanvas row-offcanvas-right">
|
||||
<div class="col-xs-12 col-sm-3">
|
||||
<a *ngIf="isFiltered()" (click)="clearFilters()" > Clear Filters</a>
|
||||
<p *ngFor="let filter of filters " >
|
||||
<search-filter [filter]="filter" (change)="filterChanged($event)" >
|
||||
|
||||
</search-filter>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-9 sidebar-offcanvas" id="sidebar">
|
||||
<form>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon" id="sizing-addon2">Filter</span>
|
||||
<input type="text" class="form-control" placeholder="Type keywords..." aria-describedby="sizing-addon2" [(ngModel)]="keyword" >
|
||||
<span class="input-group-btn">
|
||||
<button (click)="goTo(1)" type="submit" class="btn btn-default">Search</button>
|
||||
</span>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
<div>
|
||||
<p *ngFor="let result of results " >
|
||||
<search-result [id]="result.id" [title]="result.title" >
|
||||
|
||||
</search-result>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
`,
|
||||
directives:[SearchResultComponent, SearchFilterComponent, pagingFormatterNoLoad]
|
||||
})
|
||||
export class SearchPageComponent {
|
||||
@Input() pageTitle = "";
|
||||
@Input() results = [];
|
||||
@Input() filters = [];
|
||||
@Input() type;
|
||||
@Input() page:number = 1;
|
||||
@Input() size: number = 10;
|
||||
@Input() totalResults: number = 0;
|
||||
@Input() keyword:string = '';
|
||||
|
||||
test= { value: 0};
|
||||
|
||||
@Output() queryChange = new EventEmitter();
|
||||
constructor (private location: Location) {
|
||||
|
||||
}
|
||||
ngOnInit() {
|
||||
console.info(" page - value: "+this.page);
|
||||
|
||||
}
|
||||
|
||||
changekeyword(){
|
||||
|
||||
}
|
||||
|
||||
private createUrlParameters(){
|
||||
var allLimits="";
|
||||
for (let filter of this.filters){
|
||||
var filterLimits="";
|
||||
if(filter.countSelectedValues > 0){
|
||||
for (let value of filter.values){
|
||||
if(value.selected == true){
|
||||
filterLimits+=((filterLimits.length == 0)?'':',') + value.id;
|
||||
}
|
||||
}
|
||||
allLimits+=((filterLimits.length == 0 )?'':((allLimits.length == 0)?'':'&') +filter.filterId + '='+ filterLimits) ;
|
||||
}
|
||||
}
|
||||
if(this.keyword.length > 0 ){
|
||||
allLimits+=((allLimits.length == 0)?'':'&') + 'keyword=' + this.keyword;
|
||||
}
|
||||
if(this.page != 1 ){
|
||||
allLimits+=((allLimits.length == 0)?'':'&') + 'page=' + this.page;
|
||||
}
|
||||
return allLimits;
|
||||
}
|
||||
private createQueryParameters(){
|
||||
var allLimits="";
|
||||
for (let filter of this.filters){
|
||||
if(filter.countSelectedValues > 0){
|
||||
var filterLimits="";
|
||||
for (let value of filter.values){
|
||||
if(value.selected == true){
|
||||
filterLimits+=((filterLimits.length == 0)?'':' or ') + filter.filterId + '='+ value.id;
|
||||
}
|
||||
}
|
||||
allLimits+=((filterLimits.length == 0 )?'':((allLimits.length == 0)?'':' and ')+'('+filterLimits +')') ;
|
||||
}
|
||||
}
|
||||
if(this.keyword.length > 0 ){
|
||||
allLimits+=((allLimits.length == 0)?'':' and ') + ' keyword=' + this.keyword;
|
||||
}
|
||||
return allLimits;
|
||||
}
|
||||
private isFiltered(){
|
||||
var filtered=false;
|
||||
for (let filter of this.filters){
|
||||
if(filter.countSelectedValues > 0){
|
||||
filtered = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(this.keyword.length > 0 ){
|
||||
filtered = true;
|
||||
}
|
||||
return filtered;
|
||||
}
|
||||
clearFilters(){
|
||||
for (let filter of this.filters){
|
||||
if(filter.countSelectedValues > 0){
|
||||
for (let value of filter.values){
|
||||
if(value.selected == true){
|
||||
value.selected = false;
|
||||
}
|
||||
}
|
||||
filter.countSelectedValues = 0;
|
||||
}
|
||||
}
|
||||
if(this.keyword.length > 0 ){
|
||||
this.keyword ='';
|
||||
}
|
||||
}
|
||||
|
||||
goTo(page:number = 1){
|
||||
this.page = page;
|
||||
var urlParameters = this.createUrlParameters();
|
||||
var queryParameters = this.createQueryParameters();
|
||||
this.location.go(location.pathname,urlParameters);
|
||||
this.queryChange.emit({
|
||||
value: queryParameters
|
||||
});
|
||||
|
||||
}
|
||||
filterChanged($event){
|
||||
this.goTo(1);
|
||||
}
|
||||
pageChanged($event) {
|
||||
this.page = +$event.value
|
||||
this.goTo(this.page);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
import {Component, Input} from '@angular/core';
|
||||
import {JSONP_PROVIDERS} from '@angular/http';
|
||||
import {Observable} from 'rxjs/Observable';
|
||||
import { RouteParams, RouteConfig, ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated';
|
||||
|
||||
@Component({
|
||||
selector: 'search-result',
|
||||
template: `
|
||||
<h3>{{title}}</h3>
|
||||
|
||||
`
|
||||
})
|
||||
export class SearchResultComponent {
|
||||
@Input() title;
|
||||
@Input() id;
|
||||
//publications & organizations:
|
||||
@Input() projects;
|
||||
//datasets & publications
|
||||
@Input() description;
|
||||
@Input() year;
|
||||
@Input() authors;
|
||||
//datasets:
|
||||
@Input() publisher;
|
||||
//dataproviders & projects:
|
||||
@Input() organizations;
|
||||
//projects:
|
||||
@Input() funders;
|
||||
//organizations:
|
||||
@Input() country;
|
||||
//dataproviders:
|
||||
@Input() type;
|
||||
@Input() websiteURL;
|
||||
@Input() OAIPMHURL;
|
||||
|
||||
constructor () {
|
||||
|
||||
}
|
||||
ngOnInit() {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
import {Component, Input, ViewChild} from '@angular/core';
|
||||
import {JSONP_PROVIDERS} from '@angular/http';
|
||||
import {Observable} from 'rxjs/Observable';
|
||||
import { RouteParams, RouteConfig, ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated';
|
||||
import {SearchPageComponent} from './common/searchPage.component';
|
||||
import { Filter, Value} from './common/search.class';
|
||||
|
||||
@Component({
|
||||
selector: 'search-publications',
|
||||
template: `
|
||||
<search-page pageTitle="Search Publications" type="publication" [(filters)] = "filters" [(results)] = "results" [(totalResults)] = "totalResults" [(keyword)] = "keyword" [(page)] = "page" (queryChange)="queryChanged($event)" >
|
||||
</search-page>
|
||||
|
||||
`,
|
||||
directives:[SearchPageComponent]
|
||||
})
|
||||
export class SearchPublicationsComponent {
|
||||
results =[];
|
||||
filters =[];
|
||||
totalResults:number = 0 ;
|
||||
keyword = '';
|
||||
page :number = 1;
|
||||
constructor (private _routeParams: RouteParams) {
|
||||
this.results =[];
|
||||
this.filters =[];
|
||||
this.totalResults = 123;
|
||||
for(var i=0; i<10 ; i++){
|
||||
var result = {title: "title"+i, id: "id"+i}
|
||||
this.results.push(result);
|
||||
}
|
||||
|
||||
for(var i=0; i<5 ; i++){
|
||||
var values = [];
|
||||
for(var j=0; j<10 ; j++){
|
||||
var value:Value = {name: "name"+j, id: "filter_"+i+ "_id_"+j, number:j, selected:false}
|
||||
values.push(value);
|
||||
}
|
||||
values.sort((n2,n1) => {
|
||||
if (n1.number > n2.number) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
if (n1.number < n2.number) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
var filter:Filter = {title: "title"+i, filterId: "filter_"+i, values : values, countSelectedValues:0}
|
||||
this.filters.push(filter);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
ngOnInit() {
|
||||
|
||||
let page = +this._routeParams.get('page');
|
||||
let size = +this._routeParams.get('size');
|
||||
this.page= (page?page:1);
|
||||
this.keyword = (this._routeParams.get('keyword')?this._routeParams.get('keyword'):'');
|
||||
//TODO get the rest parameters to create query
|
||||
|
||||
|
||||
}
|
||||
|
||||
getResults(parameters:string){
|
||||
//http://rudie.di.uoa.gr:8080/dnet-functionality-services-1.2.0-SNAPSHOT/search?action=searchNrefine&sTransformer=results_openaire&rTransformer=results_openaire_browse&query=%28oaftype+exact+result%29+and+%28resulttypeid+exact+publication%29&page=5&size=10&fields=instancetypenameid&fields=resultlanguageid&fields=relfunderid&fields=relprojectid&fields=resultacceptanceyear&fields=resultbestlicense&fields=resulthostingdatasourceid&fields=communityid&locale=en_GB
|
||||
console.info("Execute search query "+parameters);
|
||||
// this.results =[];
|
||||
// this.filters =[];
|
||||
// for(var i=0; i<30 ; i++){
|
||||
// var result = {title: "title"+i, id: "id"+i}
|
||||
// this.results.push(result);
|
||||
// }
|
||||
//
|
||||
// for(var i=0; i<5 ; i++){
|
||||
// var values = [];
|
||||
// for(var j=0; j<10 ; j++){
|
||||
// var value = {name: "name"+j, id: "id"+j, number:j, selected:false}
|
||||
// values.push(value);
|
||||
// }
|
||||
// var filter = {title: "title"+i, filterId: "id"+i, values : values}
|
||||
// this.filters.push(filter);
|
||||
// }
|
||||
|
||||
}
|
||||
private setFilters(){
|
||||
//TODO set filters from
|
||||
}
|
||||
|
||||
private queryChanged($event) {
|
||||
var parameters = $event.value
|
||||
this.getResults(parameters)
|
||||
console.info("Execute search query "+parameters);
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -40,7 +40,7 @@ function ngApp(req, res) {
|
|||
let config: ExpressEngineConfig = {
|
||||
directives: [ App ],
|
||||
platformProviders: [
|
||||
provide(ORIGIN_URL, {useValue: 'http://localhost:5000'}),
|
||||
provide(ORIGIN_URL, {useValue: 'http://localhost:3000'}),
|
||||
provide(BASE_URL, {useValue: baseUrl}),
|
||||
],
|
||||
providers: [
|
||||
|
|
@ -74,6 +74,6 @@ app.use('/', ngApp);
|
|||
app.use('/home', ngApp);
|
||||
app.use('/search', ngApp);
|
||||
// Server
|
||||
app.listen(5000, () => {
|
||||
console.log('Listening on: http://localhost:5000');
|
||||
app.listen(3000, () => {
|
||||
console.log('Listening on: http://localhost:3000');
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue