Landing pages: Paging (no-load) added in every tab with no extra queries | Publication & Dataset landing pages: 'handle' identifier is parsed and displayed like 'doi' and 'pmc

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@48573 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2017-07-17 09:53:19 +00:00
parent a6c5f4a38b
commit d0df3d127a
14 changed files with 249 additions and 55 deletions

View File

@ -25,7 +25,7 @@ import {RouterHelper} from '../../utils/routerHelper.class';
<div class="uk-width-1-1 uk-margin uk-padding uk-panel uk-background-muted">
<form class= "uk-margin uk-text-center uk-margin-top">
<input type="text" [(ngModel)]="subject" class=" uk-input uk-width-1-2" name="subject" placeholder="Search for classifications..." />
<input type="text" [(ngModel)]="newSubject" class=" uk-input uk-width-1-2" name="subject" placeholder="Search for classifications..." />
<button class=" uk-button uk-button-default" type="submit" (click)="searchDataproviders()" >
Search
@ -103,6 +103,7 @@ export class DepositBySubjectResultComponent {
@Input() compatibility: string = '';
@Input() requestFor: string = "Research Data";
@Input() subject: string = "";
public newSubject: string= "";
constructor (private _router: Router,
private route: ActivatedRoute,
@ -136,8 +137,8 @@ export class DepositBySubjectResultComponent {
this.sub = this.route.queryParams.subscribe(params => {
this.subject = params['q'];
this.searchDataproviders();
this.newSubject = this.subject;
this.searchDataproviders();
});
}
totalPages(): number {
@ -163,6 +164,7 @@ export class DepositBySubjectResultComponent {
}
public searchDataproviders() {
this.subject = this.newSubject;
this.fetchDataproviders.getResultsBySubjectsForDeposit( (this.subject =="")?"*":this.subject, this.requestFor, this.page, 10);
this.linkToSearchDataproviders = OpenaireProperties.getLinkToSearchDataProviders();
}

View File

@ -8,7 +8,12 @@ import {Component, Input} from '@angular/core';
</div>
<div *ngIf=" organizations && organizations.length > 0">
<div *ngFor="let item of organizations">
<div *ngIf="organizations.length > pageSize" class="uk-margin-bottom">
{{organizations.length}} organizations, page {{organizationsPage}} of {{totalPages(organizations.length)}}
<paging-no-load class="uk-float-right" [currentPage]="organizationsPage" [totalResults]="organizations.length" [size]="pageSize" (pageChange)="updateOrganizationsPage($event)"></paging-no-load>
</div>
<div *ngFor="let item of organizations.slice((organizationsPage-1)*pageSize, organizationsPage*pageSize)">
<p *ngIf=" item != undefined && item['id'] != undefined">
<!--a href="{{item['url']}}"-->
<a [queryParams]="{organizationId: item.id}" routerLinkActive="router-link-active" routerLink="/search/organization">
@ -25,11 +30,25 @@ import {Component, Input} from '@angular/core';
export class OrganizationsTabComponent {
@Input() organizations: {"name": string, "id": string}[] ;
@Input() organizations: {"name": string, "id": string}[];
public organizationsPage: number = 1;
public pageSize: number = 10;
constructor () {}
ngOnInit() {}
ngOnDestroy() {}
totalPages(totalResults: number): number {
let totalPages:any = totalResults/this.pageSize;
if(!(Number.isInteger(totalPages))) {
totalPages = (parseInt(totalPages, this.pageSize) + 1);
}
return totalPages;
}
updateOrganizationsPage($event) {
this.organizationsPage = $event.value;
}
}

View File

@ -329,7 +329,7 @@ export class ParsingFunctions {
let identifiers = new Map<string, string[]>();
if(pid.hasOwnProperty("classname") && pid['classname'] != "") {
if(pid.classname == "doi" || pid.classname == "pmc") {
if(pid.classname == "doi" || pid.classname == "pmc" || pid.classname == "handle") {
if(!identifiers.has(pid.classname)) {
identifiers.set(pid.classname, new Array<string>());
}
@ -338,7 +338,7 @@ export class ParsingFunctions {
}
} else {
for(let i=0; i<pid.length; i++) {
if(pid[i].classname == "doi" || pid[i].classname == "pmc") {
if(pid[i].classname == "doi" || pid[i].classname == "pmc" || pid[i].classname == "handle") {
if(!identifiers.has(pid[i].classname)) {
identifiers.set(pid[i].classname, new Array<string>());
}

View File

@ -7,9 +7,9 @@ import { FormsModule } from '@angular/forms';
import {TabPagingComponent} from './tabPaging.component';
import {ShowTitleComponent} from './showTitle.component';
import {AddThisComponent} from './addThis.component';
@NgModule({
imports: [
CommonModule, FormsModule
],
declarations: [

View File

@ -127,6 +127,7 @@ export class OrganizationComponent {
this._organizationService.getOrganizationInfo(this.organizationId).subscribe(
data => {
if(data == null) {
this.showLoading = false;
this.errorMessage = 'No organization found';
} else {
this.organizationInfo = data;

View File

@ -200,9 +200,13 @@
<div *ngIf="publicationInfo.references">
<tabPaging [showAll]="showAllReferences" [length]="publicationInfo.references.length" (changeShowAll)="showChange($event)"></tabPaging>
<!--tabPaging [showAll]="showAllReferences" [length]="publicationInfo.references.length" (changeShowAll)="showChange($event)"></tabPaging-->
<div *ngIf="publicationInfo.references && publicationInfo.references.length > pageSize" class="uk-margin-bottom">
{{publicationInfo.references.length}} references, page {{referencesPage}} of {{totalPages(publicationInfo.references.length)}}
<paging-no-load class="uk-float-right" [currentPage]="referencesPage" [totalResults]="publicationInfo.references.length" [size]="pageSize" (pageChange)="updateReferencesPage($event)"></paging-no-load>
</div>
<div *ngFor="let item of publicationInfo.references.slice(0,10)">
<div *ngFor="let item of publicationInfo.references.slice((referencesPage-1)*pageSize, referencesPage*pageSize)">
<p *ngIf=" item && item['url']"
class="custom-external custom-icon">
<a href="{{item['url']}}" target="_blank">
@ -214,7 +218,7 @@
</p>
</div>
<div *ngIf="showAllReferences">
<!--div *ngIf="showAllReferences">
<div *ngFor="let item of publicationInfo.references.slice(10)">
<p *ngIf=" item && item['url']"
class="custom-external custom-icon">
@ -226,9 +230,9 @@
{{item['name']}}
</p>
</div>
</div>
</div-->
<tabPaging [showAll]="showAllReferences" [length]="publicationInfo.references.length" (changeShowAll)="showChange($event)"></tabPaging>
<!--tabPaging [showAll]="showAllReferences" [length]="publicationInfo.references.length" (changeShowAll)="showChange($event)"></tabPaging-->
</div>
</li>
@ -239,7 +243,7 @@
</div>
<div *ngIf="publicationInfo.relatedResearchResults">
<div *ngFor="let provenanceaction of publicationInfo.relatedResearchResults.keys()">
<div class="uk-text-large">{{provenanceaction}}</div>
<div class="uk-text-large uk-margin-bottom">{{provenanceaction}}</div>
<tabTable [info]="publicationInfo.relatedResearchResults.get(provenanceaction)"></tabTable>
</div>
@ -262,6 +266,10 @@
There are no related organizations
</div>
<div *ngIf="publicationInfo.organizations">
<div *ngIf="publicationInfo.organizations && publicationInfo.organizations.length > pageSize" class="uk-margin-bottom">
{{publicationInfo.organizations.length}} organizations, page {{organizationsPage}} of {{totalPages(publicationInfo.organizations.length)}}
<paging-no-load class="uk-float-right" [currentPage]="organizationsPage" [totalResults]="publicationInfo.organizations.length" [size]="pageSize" (pageChange)="updateOrganizationsPage($event)"></paging-no-load>
</div>
<table class="uk-table uk-table-striped">
<thead>
@ -271,7 +279,7 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let organization of publicationInfo.organizations">
<tr *ngFor="let organization of publicationInfo.organizations.slice((organizationsPage-1)*pageSize, organizationsPage*pageSize)">
<td>
<a *ngIf="(organization['id']) && ((organization['name']) || (organization['shortname']))"
[queryParams]="{organizationId: organization.id}" routerLinkActive="router-link-active" routerLink="/search/organization">
@ -309,6 +317,11 @@
</li>
<li *ngIf="publicationInfo.bioentities" class="uk-animation-fade">
<div *ngIf="publicationInfo.bioentities && bioentitiesNum > pageSize" class="uk-margin-bottom">
{{bioentitiesNum}} bioentities, page {{bioentitiesPage}} of {{totalPages(bioentitiesNum)}}
<paging-no-load class="uk-float-right" [currentPage]="bioentitiesPage" [totalResults]="bioentitiesNum" [size]="pageSize" (pageChange)="updateBioentitiesPage($event)"></paging-no-load>
</div>
<table id="bioentitiesTable" class="uk-table uk-table-striped">
<thead>
<tr>
@ -316,24 +329,32 @@
<th class="uk-text-center">Site Name</th>
</tr>
</thead>
<tbody *ngFor="let key of publicationInfo.bioentities.keys()">
<tr *ngFor="let keyIn of publicationInfo.bioentities.get(key).keys()">
<td class="uk-text-center" *ngIf="keyIn">
<span class="custom-external custom-icon">
<a href="{{publicationInfo.bioentities.get(key).get(keyIn)}}"
target="_blank">
{{keyIn}}
</a>
</span>
</td>
<td class="uk-text-center">
{{key}}
</td>
</tr>
<tbody>
<ng-container *ngFor="let key of publicationInfo.bioentities.keys() let i=index">
<!--ng-container *ngIf="stop(i, bioentitiesPage) - start(i, bioentitiesPage) > 0"-->
<tr *ngFor="let keyIn of keysToArray(publicationInfo.bioentities.get(key)).slice((bioentitiesPage-1)*pageSize, bioentitiesPage*pageSize)">
<td class="uk-text-center" *ngIf="keyIn">
<span class="custom-external custom-icon">
<a href="{{publicationInfo.bioentities.get(key).get(keyIn)}}"
target="_blank">
{{keyIn}}
</a>
</span>
</td>
<td class="uk-text-center">
{{key}}
</td>
</tr>
</ng-container>
<!--/ng-container-->
</tbody>
</table>
</li>
<li *ngIf="publicationInfo.software" class="uk-animation-fade">
<div *ngIf="publicationInfo.software && publicationInfo.software.length > pageSize" class="uk-margin-bottom">
{{publicationInfo.software.length}} software results, page {{softwarePage}} of {{totalPages(publicationInfo.software.length)}}
<paging-no-load class="uk-float-right" [currentPage]="softwarePage" [totalResults]="publicationInfo.software.length" [size]="pageSize" (pageChange)="updateSoftwarePage($event)"></paging-no-load>
</div>
<table id="softwareTable" class="uk-table uk-table-striped">
<thead>
@ -342,7 +363,7 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let item of publicationInfo.software" class="uk-text-center">
<tr *ngFor="let item of publicationInfo.software.slice((softwarePage-1)*pageSize, softwarePage*pageSize)" class="uk-text-center">
<td>
<span class="custom-external custom-icon">
<a href="{{item.url}}" target="_blank">

View File

@ -32,10 +32,14 @@ export class PublicationComponent {
private totalDownloads: number;
private pageViews: number;
public showAllReferences: boolean = false;
//public showAllReferences: boolean = false;
public referencesPage: number = 1;
public organizationsPage: number = 1;
public softwarePage: number = 1;
public bioentitiesPage: number = 1;
public showAllRelResData: boolean = false;
public showAllSimilPubl: boolean = false;
public showAllBioentities: boolean = false;
public showFundingDetails: boolean = false;
public bioentitiesNum: number = 0;
@ -53,6 +57,11 @@ export class PublicationComponent {
public activeTab: string = "References";
public startt: number = 0;
public stopp: number = 0;
public pageSize: number = 10;
constructor ( private element: ElementRef,
private _publicationService: PublicationService,
private route: ActivatedRoute, private _meta: Meta,
@ -167,9 +176,9 @@ export class PublicationComponent {
);
}
showChange($event) {
/*showChange($event) {
this.showAllReferences=$event.value;
}
}*/
public downloadClicked($event) {
this.totalViews = $event.totalViews;
@ -253,4 +262,97 @@ export class PublicationComponent {
this._meta.updateProperty("og:url", url);
}
totalPages(totalResults: number): number {
let totalPages:any = totalResults/this.pageSize;
if(!(Number.isInteger(totalPages))) {
totalPages = (parseInt(totalPages, this.pageSize) + 1);
}
return totalPages;
}
updateReferencesPage($event) {
this.referencesPage = $event.value;
}
updateOrganizationsPage($event) {
this.organizationsPage = $event.value;
}
updateSoftwarePage($event) {
this.softwarePage = $event.value;
}
updateBioentitiesPage($event) {
this.bioentitiesPage = $event.value;
}
start(i: number, bioentitiesPage: number) {
let sum = 0;
let index=0;
let retValue = 0;
let valuesToPage = this.pageSize*bioentitiesPage;
let valuesToPreviousPage = valuesToPage - this.pageSize;
if(bioentitiesPage == 1) {
return 0;
}
this.publicationInfo.bioentities.forEach(function (value, key, map) {
sum += map.get(key).size;
if(index == i) {
if(sum <= valuesToPreviousPage) {
retValue = 0;
} else if((sum-map.get(key).size) >= valuesToPage){
retValue = 0;
} else {
if(map.get(key).size < (sum - valuesToPreviousPage)) {
retValue = 0;
} else {
retValue = map.get(key).size - (sum - valuesToPreviousPage);
}
}
}
index++;
});
this.startt = retValue;
return retValue;
}
stop(i: number, bioentitiesPage: number) {
let sum = 0;
let index=0;
let retValue = 0;
let valuesToPage = this.pageSize*bioentitiesPage;
let valuesToPreviousPage = valuesToPage - this.pageSize;
this.publicationInfo.bioentities.forEach(function (value, key, map) {
sum += map.get(key).size;
if(index == i) {
if(sum <= valuesToPreviousPage) {
retValue = 0;
} else if((sum - map.get(key).size) >= valuesToPage){
retValue = 0;
} else {
if(sum < valuesToPage) {
retValue = map.get(key).size;
} else {
retValue = map.get(key).size - (sum - valuesToPage);
}
}
}
index++;
});
this.stopp = retValue;
return retValue;
}
keysToArray(bioentities: Map<string, string>) : string[] {
let keys: string[] = [];
bioentities.forEach(function (value, key, map) {
keys.push(key);
});
return keys;
}
}

View File

@ -12,7 +12,7 @@ import {MetricsModule} from '../metrics.module';
import {IFrameModule} from '../../utils/iframe.module';
import {AltMetricsModule} from '../../utils/altmetrics.module';
import {CiteThisModule} from '../landing-utils/citeThis/citeThis.module';
import {PagingModule} from '../../utils/paging.module';
import { ResultLandingModule } from '../resultLanding.module';
import { LandingModule } from '../landing.module';
@ -20,7 +20,7 @@ import {FreeGuard} from'../../login/freeGuard.guard';
@NgModule({
imports: [
CommonModule, FormsModule, LandingModule,SharedModule, RouterModule, CiteThisModule,
CommonModule, FormsModule, LandingModule,SharedModule, RouterModule, CiteThisModule, PagingModule,
ResultLandingModule, PublicationRoutingModule, IFrameModule, MetricsModule, AltMetricsModule
],
declarations: [

View File

@ -311,6 +311,7 @@ export class PublicationService {
}
}
}
return [bioentities, software];
}

View File

@ -3,6 +3,7 @@ import { NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import {PagingModule} from '../utils/paging.module';
import {ShowAuthorsComponent} from './showAuthors.component';
import {ShowIdentifiersComponent} from './showIdentifiers.component';
@ -11,7 +12,7 @@ import {TabTableComponent} from './tabTable.component';
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule
CommonModule, FormsModule, RouterModule, PagingModule
],
declarations: [
ShowAuthorsComponent,ShowIdentifiersComponent,ShowSubjectsComponent, TabTableComponent

View File

@ -5,27 +5,30 @@ import {OpenaireProperties} from '../utils/properties/openaireProperties';
selector: 'showIdentifiers',
template: `
<span *ngIf="showAll && countIdentifiers() > 10">
<span *ngIf="showAll && countIdentifiers() > pageSize">
<a class="uk-text-muted" (click)="showAll = !showAll;">View less identifiers</a>
</span>
<ng-container *ngFor="let key of identifiers.keys() let i=index">
<ng-container *ngIf="countSizeOfPreviousIdentifiers(i) < pageSize">
<ng-container *ngFor="let item of identifiers.get(key) let j=index">
<span *ngIf="(i+j)<10 || showAll" class="custom-external custom-icon">
<span *ngIf="(sizeOfPreviousIdentifiers + j) < pageSize || showAll" class="custom-external custom-icon">
<a *ngIf="key=='doi'" href="{{doiURL}}{{item}}" target="_blank">{{key}}: {{item}}</a><a
*ngIf="key=='pmc'" href="{{pmcURL}}{{item}}" target="_blank">{{key}}: {{item}}</a></span><span
*ngIf="key=='pmc'" href="{{pmcURL}}{{item}}" target="_blank">{{key}}: {{item}}</a><a
*ngIf="key=='handle'" href="{{handleURL}}{{item}}" target="_blank">{{key}}: {{item}}</a></span><span
*ngIf="((i+j)<10 || showAll) && ((i+j) < countIdentifiers()-1)">{{", "}}</span>
<span *ngIf="!showAll && (i+j)==10"> ... </span>
*ngIf="((sizeOfPreviousIdentifiers + j) < pageSize || showAll) && ((sizeOfPreviousIdentifiers + j) < countIdentifiers()-1)">{{", "}}</span>
<span *ngIf="!showAll && (sizeOfPreviousIdentifiers + j)==pageSize"> ... </span>
</ng-container>
</ng-container>
</ng-container>
<span *ngIf="!showAll && countIdentifiers() > 10">
<span *ngIf="!showAll && countIdentifiers() > pageSize">
<a class="uk-text-muted" (click)="showAll = !showAll;">
view all {{countIdentifiers()}} identifiers
</a>
</span>
<span *ngIf="showAll && countIdentifiers() > 10">
<span *ngIf="showAll && countIdentifiers() > pageSize">
<a class="uk-text-muted" (click)="showAll = !showAll; scroll()">View less identifiers</a>
</span>
@ -35,29 +38,48 @@ import {OpenaireProperties} from '../utils/properties/openaireProperties';
export class ShowIdentifiersComponent {
@Input() identifiers: Map<string, string[]>;
doiURL: string;
pmcURL: string;
public doiURL: string;
public pmcURL: string;
public handleURL: string;
public showAll: boolean = false;
public num: number = -1;
public sizeOfIdentifiers: number = -1;
public sizeOfPreviousIdentifiers: number = -1;
public pageSize: number = 10;
constructor (private element: ElementRef) {
this.doiURL = OpenaireProperties.getDoiURL();
this.pmcURL = OpenaireProperties.getPmcURL();
this.handleURL = OpenaireProperties.getHandleURL();
}
ngOnInit() {}
public countIdentifiers() {
if(this.num < 0) {
let num = 0;
public countIdentifiers(): number {
if(this.sizeOfIdentifiers < 0) {
let num: number = 0;
if(this.identifiers != undefined) {
this.identifiers.forEach(function (value, key, map) {
num += value.length;
});
}
this.num = num;
this.sizeOfIdentifiers = num;
}
return this.num;
return this.sizeOfIdentifiers;
}
public countSizeOfPreviousIdentifiers(index: number): number {
let num: number = 0;
let i: number = 0;
if(this.identifiers != undefined) {
this.identifiers.forEach(function (value, key, map) {
if(i < index) {
num += value.length;
}
i++;
});
}
this.sizeOfPreviousIdentifiers= num;
return num;
}
public scroll() {

View File

@ -1,10 +1,16 @@
import {Component, Input} from '@angular/core';
import {RouterHelper} from '../utils/routerHelper.class';
import {OpenaireProperties} from '../utils/properties/openaireProperties';
//import {PagingModule} from '../utils/paging.module';
@Component({
selector: 'tabTable',
template: `
<div *ngIf="info && info.length > pageSize" class="uk-margin">
{{info.length}} research results, page {{page}} of {{totalPages(info.length)}}
<paging-no-load class="uk-float-right" [currentPage]="page" [totalResults]="info.length" [size]="pageSize" (pageChange)="updatePage($event)"></paging-no-load>
</div>
<table class="uk-table uk-table-striped">
<thead>
<tr>
@ -13,7 +19,7 @@ import {OpenaireProperties} from '../utils/properties/openaireProperties';
</tr>
</thead>
<tbody>
<tr *ngFor="let item of info" class="{{item['class']}}">
<tr *ngFor="let item of info.slice((page-1)*pageSize, page*pageSize)" class="{{item['class']}}">
<td *ngIf="item != undefined">
<!--span *ngIf="item['class'] == 'dataset'" class="glyphicon glyphicon-star" aria-hidden="true"-->
<img *ngIf="item['class'] == 'publication'" class= "entityIcon" src="assets/publication.png" alt="(Publication)">
@ -62,6 +68,9 @@ export class TabTableComponent {
public searchLinkToPublication: string;
public searchLinkToDataset: string;
public page: number = 1;
public pageSize: number = 10;
constructor () {
}
@ -69,4 +78,16 @@ export class TabTableComponent {
this.searchLinkToPublication = OpenaireProperties.getsearchLinkToPublication();
this.searchLinkToDataset = OpenaireProperties.getsearchLinkToDataset();
}
totalPages(totalResults: number): number {
let totalPages:any = totalResults/this.pageSize;
if(!(Number.isInteger(totalPages))) {
totalPages = (parseInt(totalPages, this.pageSize) + 1);
}
return totalPages;
}
updatePage($event) {
this.page = $event.value;
}
}

View File

@ -45,9 +45,9 @@ import {Open} from '../../utils/modal/open.component';
<div class="filtersModal uk-modal-dialog uk-small-1-2 uk-width-medium-1-3 uk-width-1-3 uk-padding-small uk-padding-remove-top uk-padding-remove-horizontal">
<button type="button" class="uk-modal-close-default" uk-close (click)="close()"></button>
<h3 class="uk-margin-remove uk-padding uk-padding-remove-bottom">
<h5 class="uk-margin-remove uk-padding uk-padding-remove-bottom">
{{filter.title}}
</h3>
</h5>
<div class="uk-modal-body uk-overflow-auto uk-height-medium uk-padding-remove
uk-margin-medium-left uk-margin-medium-right uk-margin-medium-top uk-margin-bottom">
<div *ngFor = "let value of getSelectedValues(filter)" class = "uk-animation-fade filterItem">

View File

@ -68,6 +68,7 @@ export class OpenaireProperties {
private static doiURL = "https://dx.doi.org/";
private static cordisURL = "http://cordis.europa.eu/projects/";
private static pmcURL = "http://europepmc.org/articles/";
private static handleURL = "http://hdl.handle.net/";
// Zenodo's url
private static zenodo = "https://zenodo.org/";
@ -271,6 +272,9 @@ export class OpenaireProperties {
public static getPmcURL():string{
return this.pmcURL;
}
public static getHandleURL():string{
return this.handleURL;
}
// Zenodo's getter
public static getZenodoURL():string{