[Library | Trunk]: PIDs add title, fix truncate on 2 lines. Remove input properties
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60852 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou
parent
006c347932
commit
7533e7d3ff
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, Input} from '@angular/core';
|
||||
import {AfterViewInit, Component, ElementRef, HostListener, Input, OnInit, ViewChild} from '@angular/core';
|
||||
import {HelperFunctions} from "../../utils/HelperFunctions.class";
|
||||
import {EnvProperties} from "../../utils/properties/env-properties";
|
||||
import {properties} from "../../../../environments/environment";
|
||||
|
|
@ -6,105 +6,82 @@ import {properties} from "../../../../environments/environment";
|
|||
@Component({
|
||||
selector: 'showIdentifiers',
|
||||
template: `
|
||||
<ng-container *ngFor="let key of getKeys(identifiers) let i=index">
|
||||
<div>
|
||||
<span *ngIf="countSizeOfPreviousIdentifiers(i) < pageSize || showAll" class="uk-margin-right">
|
||||
<span class="uk-text-muted uk-text-uppercase">{{key}}: </span>
|
||||
<div class="uk-text-muted">Persistent Identifiers</div>
|
||||
<div class="uk-height-max-medium uk-overflow-auto uk-margin-small-top">
|
||||
<ng-container *ngFor="let key of keys let i=index">
|
||||
<div [class.multi-line-ellipsis]="large.get(key) && !showAll" [class.lines-2]="keys.length === 1" [class.line-1]="keys.length > 1">
|
||||
<p class="custom-break uk-margin-remove">
|
||||
<span [id]="key">
|
||||
<span class="uk-text-bold uk-text-uppercase">{{key}}: </span>
|
||||
<ng-container *ngFor="let item of identifiers.get(key) let j=index">
|
||||
<span *ngIf="(sizeOfPreviousIdentifiers + j) < pageSize || showAll">
|
||||
<span class="uk-display-inline-block">
|
||||
<a *ngIf="key=='doi'" [href]="properties.doiURL + item" target="_blank">
|
||||
{{item}} <span class="custom-external custom-icon space"></span>
|
||||
</a>
|
||||
<a *ngIf="key=='pmc'" [href]="properties.pmcURL + item" target="_blank">
|
||||
{{item}} <span class="custom-external custom-icon space"></span>
|
||||
</a>
|
||||
<a *ngIf="key=='pmid'" [href]="properties.pmidURL + item" target="_blank">
|
||||
{{item}} <span class="custom-external custom-icon space"></span>
|
||||
</a>
|
||||
<a *ngIf="key=='handle'" [href]="properties.handleURL + item" target="_blank">
|
||||
{{item}} <span class="custom-external custom-icon space"></span>
|
||||
</a>
|
||||
</span>
|
||||
<!-- <span *ngIf="j !== (identifiers.get(key).length - 1)">, </span>-->
|
||||
|
||||
<span *ngIf="(j !== (identifiers.get(key).length - 1)) && (showAll || ((sizeOfPreviousIdentifiers+j+1) < pageSize))">, </span>
|
||||
<span *ngIf="!showAll && (sizeOfPreviousIdentifiers+j+1) == pageSize && sizeOfIdentifiers > pageSize"> ... </span>
|
||||
|
||||
</span>
|
||||
</ng-container>
|
||||
<a *ngIf="key=='doi'" [href]="properties.doiURL + item" target="_blank" class="uk-display-inline">
|
||||
{{item}} <span class="custom-external custom-icon space"></span>
|
||||
</a>
|
||||
<a *ngIf="key=='pmc'" [href]="properties.pmcURL + item" target="_blank">
|
||||
{{item}} <span class="custom-external custom-icon space"></span>
|
||||
</a>
|
||||
<a *ngIf="key=='pmid'" [href]="properties.pmidURL + item" target="_blank">
|
||||
{{item}} <span class="custom-external custom-icon space"></span>
|
||||
</a>
|
||||
<a *ngIf="key=='handle'" [href]="properties.handleURL + item" target="_blank">
|
||||
{{item}} <span class="custom-external custom-icon space"></span>
|
||||
</a>
|
||||
<ng-container *ngIf="(j !== (identifiers.get(key).length - 1))">, </ng-container>
|
||||
</ng-container>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div *ngIf="!showAll && countIdentifiers() > pageSize" class="uk-text-right">
|
||||
<a (click)="showAll = !showAll;">
|
||||
View all {{countIdentifiers() | number}} identifiers
|
||||
</a>
|
||||
</div>
|
||||
<div *ngIf="showAll && countIdentifiers() > pageSize" class="uk-text-right">
|
||||
<a (click)="showAll = !showAll;">View less identifiers</a>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="isLarge && showViewAll" class="uk-text-right uk-margin-small-top">
|
||||
<a (click)="showAll = !showAll">View {{showAll?'less':'all'}}</a>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
|
||||
export class ShowIdentifiersComponent {
|
||||
export class ShowIdentifiersComponent implements OnInit, AfterViewInit {
|
||||
@Input() identifiers: Map<string, string[]>;
|
||||
@Input() properties: EnvProperties = properties;
|
||||
public showAll: boolean = false;
|
||||
public sizeOfIdentifiers: number = -1;
|
||||
public sizeOfPreviousIdentifiers: number = -1;
|
||||
public pageSize: number = 3;
|
||||
@Input() showViewAll: boolean = false;
|
||||
large: Map<string, boolean> = new Map<string, boolean>();
|
||||
showAll: boolean = false;
|
||||
properties: EnvProperties = properties;
|
||||
|
||||
constructor() {}
|
||||
@HostListener('window:resize', ['$event'])
|
||||
onResize(event) {
|
||||
this.checkLarge();
|
||||
}
|
||||
|
||||
ngOnInit() {}
|
||||
ngOnInit() {
|
||||
this.checkLarge();
|
||||
}
|
||||
|
||||
public countIdentifiers(): number {
|
||||
if (this.sizeOfIdentifiers < 0) {
|
||||
let num: number = 0;
|
||||
if (this.identifiers != undefined) {
|
||||
this.identifiers.forEach((value, key, map) => {
|
||||
num += value.length;
|
||||
});
|
||||
ngAfterViewInit() {
|
||||
this.checkLarge();
|
||||
}
|
||||
|
||||
checkLarge() {
|
||||
let overflow = (this.keys.length === 1?42:21);
|
||||
if(typeof document !== "undefined") {
|
||||
this.keys.forEach(key => {
|
||||
this.large.set(key, document.getElementById(key) && document.getElementById(key).offsetHeight > overflow)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
get isLarge() {
|
||||
for(let key of this.keys) {
|
||||
if (this.large.get(key)) {
|
||||
return true;
|
||||
}
|
||||
this.sizeOfIdentifiers = num;
|
||||
}
|
||||
return this.sizeOfIdentifiers;
|
||||
return false;
|
||||
}
|
||||
|
||||
public countSizeOfPreviousIdentifiers(index: number): number {
|
||||
let num: number = 0;
|
||||
let i: number = 0;
|
||||
if (this.identifiers != undefined) {
|
||||
let self = this;
|
||||
this.getKeys(this.identifiers).forEach(function(key: string) {
|
||||
// console.debug("value:", self.identifiers.get(key));
|
||||
if (i < index) {
|
||||
num += self.identifiers.get(key).length;
|
||||
}
|
||||
i++;
|
||||
})
|
||||
// this.identifiers.forEach(function (value, key, map) {
|
||||
// console.debug("value:", value);
|
||||
// if (i < index) {
|
||||
// num += value.length;
|
||||
// }
|
||||
// i++;
|
||||
// });
|
||||
}
|
||||
this.sizeOfPreviousIdentifiers = num;
|
||||
return num;
|
||||
}
|
||||
|
||||
public scroll() {
|
||||
HelperFunctions.scroll();
|
||||
}
|
||||
|
||||
public getKeys(map) {
|
||||
return Array.from(map.keys()).sort((a: string, b: string) => {
|
||||
if(a === 'doi') {
|
||||
public get keys(): string[] {
|
||||
return Array.from(this.identifiers.keys()).sort((a: string, b: string) => {
|
||||
if (a === 'doi') {
|
||||
return -1;
|
||||
} else if(b === 'doi') {
|
||||
} else if (b === 'doi') {
|
||||
return 1;
|
||||
} else {
|
||||
return 0;
|
||||
|
|
|
|||
|
|
@ -6,10 +6,8 @@
|
|||
role="alert">{{warningMessage}}</div>
|
||||
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-margin-large-top"
|
||||
role="alert">{{errorMessage}}</div>
|
||||
<div [style.display]="showLoading ? 'inline' : 'none'"
|
||||
class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert">
|
||||
<span *ngIf="!dashboard" class="loading-gif uk-align-center"></span>
|
||||
<loading *ngIf="dashboard"></loading>
|
||||
<div *ngIf="showLoading" class="uk-position-center">
|
||||
<loading></loading>
|
||||
</div>
|
||||
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
|
||||
[texts]="pageContents['top']"></helper>
|
||||
|
|
@ -177,9 +175,7 @@
|
|||
<!-- Identifiers -->
|
||||
<div *ngIf="resultLandingInfo.identifiers && resultLandingInfo.identifiers.size > 0"
|
||||
class="uk-margin-medium-bottom">
|
||||
<showIdentifiers [identifiers]="resultLandingInfo.identifiers"
|
||||
[properties]="properties">
|
||||
</showIdentifiers>
|
||||
<showIdentifiers [identifiers]="resultLandingInfo.identifiers" [showViewAll]="true"></showIdentifiers>
|
||||
</div>
|
||||
<!-- Subjects -->
|
||||
<div *ngIf="resultLandingInfo.subjects || resultLandingInfo.otherSubjects ||
|
||||
|
|
|
|||
|
|
@ -170,7 +170,7 @@
|
|||
</div>
|
||||
<!-- Identifiers -->
|
||||
<div *ngIf="result.identifiers && result.identifiers.size > 0" class="uk-margin-small-bottom">
|
||||
<showIdentifiers [identifiers]="result.identifiers" [properties]="properties"></showIdentifiers>
|
||||
<showIdentifiers [identifiers]="result.identifiers"></showIdentifiers>
|
||||
</div>
|
||||
<!-- Publisher -->
|
||||
<div *ngIf="result.publisher && result.publisher != ''" class="uk-margin-small-bottom">
|
||||
|
|
|
|||
Loading…
Reference in New Issue