|
1
|
import {Component, Input, Output, EventEmitter} from '@angular/core';
|
|
2
|
import { ActivatedRoute } from '@angular/router';
|
|
3
|
|
|
4
|
import {ClaimResult} from '../claim-utils/claimEntities.class';
|
|
5
|
|
|
6
|
declare var UIkit:any;
|
|
7
|
|
|
8
|
@Component({
|
|
9
|
selector: 'claim-results',
|
|
10
|
template:`
|
|
11
|
|
|
12
|
<ul *ngIf="results.length > 0 " class="uk-list uk-list-divider">
|
|
13
|
<li *ngFor=" let result of results " [class]="(isSelected(result.id))?'uk-block-muted':''">
|
|
14
|
<div >
|
|
15
|
<a *ngIf="result.url" target="_blank" [href]="result.url" >{{result.title?result.title:'[No title available]'}}</a>
|
|
16
|
<span *ngIf="!result.url" >{{result.title?result.title:'[No title available]'}}</span>
|
|
17
|
<a class="uk-button-default uk-align-right" *ngIf="!isSelected(result.id)"
|
|
18
|
(click)="add(result)" class="uk-icon-button icon-button-small">
|
|
19
|
<span class="uk-icon">
|
|
20
|
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="0.8"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg>
|
|
21
|
</span>
|
|
22
|
|
|
23
|
</a>
|
|
24
|
<span *ngIf="isSelected(result.id)" class="uk-label uk-label-success">Added</span>
|
|
25
|
</div>
|
|
26
|
<span *ngIf="result.publisher!=null" class="uk-article-meta">Publisher: {{result.publisher}}</span>
|
|
27
|
<span *ngIf="result.journal!=null" class="uk-article-meta">Journal: {{result.journal}}</span><span *ngIf="(result.date)" class="uk-article-meta"> ({{result.date}})</span>
|
|
28
|
<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>
|
|
29
|
<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>
|
|
30
|
</li>
|
|
31
|
</ul>`,
|
|
32
|
|
|
33
|
})
|
|
34
|
export class ClaimResultsComponent {
|
|
35
|
@Input() results;
|
|
36
|
@Input() selectedResults;
|
|
37
|
@Input() localStoragePrefix:string = "";
|
|
38
|
private isSelected(id:string){
|
|
39
|
|
|
40
|
var found:boolean = false;
|
|
41
|
for (var _i = 0; _i < this.selectedResults.length; _i++) {
|
|
42
|
let item = this.selectedResults[_i];
|
|
43
|
if(item.id == id){
|
|
44
|
found=true;
|
|
45
|
}
|
|
46
|
}
|
|
47
|
return found;
|
|
48
|
|
|
49
|
|
|
50
|
}
|
|
51
|
add(item){
|
|
52
|
if(this.selectedResults.length > 150){
|
|
53
|
UIkit.notification({
|
|
54
|
message : 'Your basket exceeds the number of allowed results (150)',
|
|
55
|
status : 'warning',
|
|
56
|
timeout : 1500,
|
|
57
|
pos : 'top-center'
|
|
58
|
});
|
|
59
|
return;
|
|
60
|
}
|
|
61
|
var found:boolean = this.isSelected( item.id);
|
|
62
|
if (!found) {
|
|
63
|
this.selectedResults.push(item);
|
|
64
|
|
|
65
|
UIkit.notification({
|
|
66
|
message : 'A new research result added in your basket.',
|
|
67
|
status : 'primary',
|
|
68
|
timeout : 1500,
|
|
69
|
pos : 'top-center'
|
|
70
|
});
|
|
71
|
if(this.results != null){
|
|
72
|
localStorage.setItem(this.localStoragePrefix + "results", JSON.stringify(this.selectedResults));
|
|
73
|
}
|
|
74
|
}else{
|
|
75
|
UIkit.notification({
|
|
76
|
message : 'The research result is already in your basket.',
|
|
77
|
status : 'warning',
|
|
78
|
timeout : 1500,
|
|
79
|
pos : 'top-center'
|
|
80
|
});
|
|
81
|
}
|
|
82
|
|
|
83
|
}
|
|
84
|
}
|