[Trunk | Library]: Add 'landing-utils/relatedTo.component.ts' and use this in 'resultLanding.component.html' to show 'Related to' section in the APP BOX.
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@57240 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
parent
6105b39302
commit
8ae241c208
|
@ -0,0 +1,48 @@
|
||||||
|
import {Component, Input} from '@angular/core';
|
||||||
|
import {HelperFunctions} from "../../utils/HelperFunctions.class";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'relatedTo',
|
||||||
|
template: `
|
||||||
|
<dl relatedTo [class]="'uk-description-list-line' + ((contexts && contexts.length > threshold) ? ' uk-margin-remove-bottom' : '')">
|
||||||
|
<dt class="sideInfoTitle">Related to</dt>
|
||||||
|
<dd class="line" *ngFor="let item of contexts.slice(0, showNum) let i=index">
|
||||||
|
<span *ngIf="!item['inline']">
|
||||||
|
<span>{{item['labelContext']}}</span>
|
||||||
|
<span *ngIf="item['labelCategory']"><span uk-icon="icon: arrow-right"></span>{{item['labelCategory']}}</span>
|
||||||
|
<span *ngIf="item['labelConcept']">: {{item['labelConcept']}}</span>
|
||||||
|
</span>
|
||||||
|
<mark *ngIf="item['inline']">
|
||||||
|
<span>{{item['labelContext']}}</span>
|
||||||
|
<span *ngIf="item['labelCategory']"><span uk-icon="icon: arrow-right"></span>{{item['labelCategory']}}</span>
|
||||||
|
<span *ngIf="item['labelConcept']">: {{item['labelConcept']}}</span>
|
||||||
|
</mark>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
<div *ngIf="showNum > threshold" class="uk-text-right uk-margin-bottom">
|
||||||
|
<a (click)="showNum = threshold; scroll()">
|
||||||
|
View less
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="showNum == threshold && contexts && contexts.length > threshold" class="uk-text-right uk-margin-bottom">
|
||||||
|
<a (click)="showNum = contexts.length;">
|
||||||
|
View more
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
})
|
||||||
|
|
||||||
|
export class RelatedToComponent {
|
||||||
|
@Input() contexts: { "labelContext": string, "labelCategory": string, "labelConcept": string, "inline": boolean}[];
|
||||||
|
|
||||||
|
public threshold: number = 5;
|
||||||
|
public showNum: number = 5;
|
||||||
|
|
||||||
|
constructor () {}
|
||||||
|
|
||||||
|
ngOnInit() {}
|
||||||
|
|
||||||
|
public scroll() {
|
||||||
|
HelperFunctions.scroll();
|
||||||
|
}
|
||||||
|
}
|
|
@ -14,6 +14,7 @@ import {AvailableOnComponent} from './availableOn.component';
|
||||||
import {TabTableComponent} from './tabTable.component';
|
import {TabTableComponent} from './tabTable.component';
|
||||||
import {ShowPublisherComponent} from "./showPublisher.component";
|
import {ShowPublisherComponent} from "./showPublisher.component";
|
||||||
import {ShowPublisherModule} from "./showPublisher.module";
|
import {ShowPublisherModule} from "./showPublisher.module";
|
||||||
|
import {RelatedToComponent} from "./relatedTo.component";
|
||||||
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
@ -22,13 +23,15 @@ import {ShowPublisherModule} from "./showPublisher.module";
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
ShowIdentifiersComponent,ShowSubjectsComponent,
|
ShowIdentifiersComponent,ShowSubjectsComponent,
|
||||||
FundedByComponent,PublishedInComponent,AvailableOnComponent,TabTableComponent
|
FundedByComponent,PublishedInComponent,AvailableOnComponent,TabTableComponent,
|
||||||
|
RelatedToComponent
|
||||||
],
|
],
|
||||||
providers:[
|
providers:[
|
||||||
],
|
],
|
||||||
exports: [
|
exports: [
|
||||||
ShowIdentifiersComponent, ShowSubjectsComponent,
|
ShowIdentifiersComponent, ShowSubjectsComponent,
|
||||||
FundedByComponent, PublishedInComponent, AvailableOnComponent, TabTableComponent, ShowPublisherComponent
|
FundedByComponent, PublishedInComponent, AvailableOnComponent, TabTableComponent, ShowPublisherComponent,
|
||||||
|
RelatedToComponent
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class ResultLandingUtilsModule { }
|
export class ResultLandingUtilsModule { }
|
||||||
|
|
|
@ -444,22 +444,7 @@
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length >0 ">
|
<li *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length >0 ">
|
||||||
<dl class="uk-description-list-line">
|
<relatedTo [contexts]="resultLandingInfo.contexts"></relatedTo>
|
||||||
<dt class="sideInfoTitle">Related to</dt>
|
|
||||||
<dd class="line" *ngFor="let item of resultLandingInfo.contexts">
|
|
||||||
<span *ngIf="!item['inline']">
|
|
||||||
<span>{{item['labelContext']}}</span>
|
|
||||||
<span *ngIf="item['labelCategory']">-> {{item['labelCategory']}}</span>
|
|
||||||
<span *ngIf="item['labelConcept']">: {{item['labelConcept']}}</span>
|
|
||||||
</span>
|
|
||||||
<mark *ngIf="item['inline']">
|
|
||||||
<span>{{item['labelContext']}}</span>
|
|
||||||
<span *ngIf="item['labelCategory']">-> {{item['labelCategory']}}</span>
|
|
||||||
<span *ngIf="item['labelConcept']">: {{item['labelConcept']}}</span>
|
|
||||||
</mark>
|
|
||||||
</dd>
|
|
||||||
</dl>
|
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
<!-- <li>-->
|
<!-- <li>-->
|
||||||
<!-- <metrics [pageViews]="pageViews" shortView=true-->
|
<!-- <metrics [pageViews]="pageViews" shortView=true-->
|
||||||
|
|
Loading…
Reference in New Issue