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 2016-07-14 09:47:28 +00:00
parent 00f9d6c5f6
commit e12d5d0c14
9 changed files with 400 additions and 41 deletions

View File

@ -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);

View File

@ -9,10 +9,8 @@ import {Router, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
<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 (click)="onPage((1))" aria-label="Previous">
<span aria-hidden="true">&laquo;</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">&raquo;</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

View File

@ -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;
}

View File

@ -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
});
}
}

View File

@ -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);
}
}

View File

@ -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() {
}
}

View File

@ -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);
}
}

View File

@ -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');
});