openaire-library/claims/claim-utils/claimResults.component.ts

69 lines
3.1 KiB
TypeScript

import {Component, Input, Output, EventEmitter} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import {ClaimResult} from '../claim-utils/claimEntities.class';
declare var UIkit:any;
@Component({
selector: 'claim-results',
template:`
<ul *ngIf="results.length > 0 " class="uk-list uk-list-divider">
<li *ngFor=" let result of results " [class]="(isSelected(result.id))?'uk-block-muted':''">
<div >
<a *ngIf="result.url" target="_blank" [href]="result.url" >{{result.title?result.title:'[No title available]'}}</a>
<span *ngIf="!result.url" >{{result.title?result.title:'[No title available]'}}</span>
<a class="uk-button-default uk-align-right" *ngIf="!isSelected(result.id)"
(click)="add(result)" class="uk-icon-button"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="1"><rect x="9" y="1" width="1" height="17"></rect>
<rect x="1" y="9" width="17" height="1"></rect></svg></a>
<span *ngIf="isSelected(result.id)" class="uk-label uk-label-success">Added</span>
</div>
<span *ngIf="result.publisher!=null" class="uk-article-meta">Publisher: {{result.publisher}}</span>
<span *ngIf="result.journal!=null" class="uk-article-meta">Journal: {{result.journal}}</span><span *ngIf="(result.date)" class="uk-article-meta"> ({{result.date}})</span>
<div *ngIf="result.authors && result.authors.length >0 " class="uk-article-meta">Authors: <span *ngFor="let author of result.authors.slice(0,10) let i = index">{{author}}{{(i < (result.authors.slice(0,10).length-1))?"; ":""}}{{(i == result.authors.slice(0,10).length-1 && result.authors.length > 10)?"...":""}}</span></div>
<div *ngIf="result.editors && result.editors.length > 0" class="uk-article-meta">Editors: <span *ngFor="let author of result.editors.slice(0,10) let i = index">{{author}}{{(i < (result.authors.slice(0,10).length-1))?"; ":""}}{{(i == result.authors.slice(0,10).length-1 && result.authors.length > 10)?"...":""}}</span></div>
</li>
</ul>`,
})
export class ClaimResultsComponent {
@Input() results;
@Input() selectedResults;
private isSelected(id:string){
var found:boolean = false;
for (var _i = 0; _i < this.selectedResults.length; _i++) {
let item = this.selectedResults[_i];
if(item.id == id){
found=true;
}
}
return found;
}
add(item){
var found:boolean = this.isSelected( item.id);
if (!found) {
this.selectedResults.push(item);
UIkit.notification({
message : 'A new research result is selected.',
status : 'primary',
timeout : 1000,
pos : 'top-center'
});
}else{
UIkit.notification({
message : 'The research result is already on your list.',
status : 'warning',
timeout : 1000,
pos : 'top-center'
});
}
}
}