|
1
|
import {Component, Input,Output, EventEmitter, ViewChild} from '@angular/core';
|
|
2
|
import {AlertModal} from '../../../utils/modal/alert';
|
|
3
|
import {ClaimResult} from '../../claim-utils/claimEntities.class';
|
|
4
|
import {IMyOptions, IMyDateModel} from '../../../utils/my-date-picker/interfaces/index';
|
|
5
|
import {Dates} from '../../../utils/string-utils.class';
|
|
6
|
|
|
7
|
@Component({
|
|
8
|
selector: 'claim-selected-results',
|
|
9
|
template: `
|
|
10
|
|
|
11
|
|
|
12
|
<ul class="uk-accordion " uk-accordion="{showfirst:true}" ><li class="uk-open">
|
|
13
|
<h3 class="uk-accordion-title" > {{title}} ({{results.length}}) </h3>
|
|
14
|
<div class="uk-accordion-content uk-grid uk-width-1-1" >
|
|
15
|
|
|
16
|
<div *ngIf="showSearch " class="uk-width-1-2 ">
|
|
17
|
<div class="uk-clearfix"><button (click)="bulkMode = !bulkMode;" class="uk-button uk-button-default uk-animation uk-float-right">
|
|
18
|
<span *ngIf="!bulkMode">Bulk mode <i uk-icon="icon: upload"></i></span>
|
|
19
|
<span *ngIf="bulkMode">Search mode <i uk-icon="icon: search"></i></span>
|
|
20
|
</button></div><!-- (resultsChange)="resultsChanged($event)" -->
|
|
21
|
<claim-result-search-form *ngIf="!bulkMode" [selectedResults]="results" > </claim-result-search-form>
|
|
22
|
<bulk-claim *ngIf="bulkMode" [results]="results" > </bulk-claim>
|
|
23
|
</div>
|
|
24
|
<div [ngClass]="showAccessRights && !showSearch?'uk-width-1-1':'uk-width-1-2'">
|
|
25
|
<!--div class="uk-clearfix"><button *ngIf=" !showSearch " (click)="showSearch = true;" class="uk-button-default uk-float-right uk-animation ">Add more <span uk-icon="icon: plus"></span></button></div-->
|
|
26
|
<div *ngIf="results.length == 0 " class="uk-alert uk-alert-primary">There are no research results</div>
|
|
27
|
|
|
28
|
<ul *ngIf="results.length > 0 " class="uk-list uk-list-divider">
|
|
29
|
<li *ngFor="let pub of results" >
|
|
30
|
<div uk-grid>
|
|
31
|
<div [ngClass]="showAccessRights?'uk-width-2-3':'uk-width-1-1'" >
|
|
32
|
<div>
|
|
33
|
<span *ngIf="showAccessRights" (click)="removePublication(pub)" aria-hidden="true" class="uk-icon-button"><span uk-icon="icon: close"></span></span>
|
|
34
|
<a *ngIf="pub.url" target="_blank" href="{{pub.url}}" > <span class="custom-external"></span> {{pub.title}}</a>
|
|
35
|
<span *ngIf="!pub.url" >{{pub.title}}</span>
|
|
36
|
<span *ngIf="!showAccessRights" (click)="removePublication(pub)" aria-hidden="true" class="uk-icon-button"><span uk-icon="icon: close"></span></span>
|
|
37
|
</div>
|
|
38
|
|
|
39
|
<span *ngIf="pub.publisher" class="uk-article-meta">Publisher: {{pub.publisher}}</span>
|
|
40
|
<!--Orcid --><span *ngIf="pub.result['journal-title'] && pub.result['journal-title'].value " class="uk-article-meta">Journal: {{pub.result['journal-title'].value}}</span>
|
|
41
|
<span *ngIf="pub.date" class="uk-article-meta" >({{pub.date.substring(0,4)}})</span>
|
|
42
|
<div *ngIf="pub.authors && pub.authors.length > 0" class="uk-article-meta">Authors: <span *ngFor="let author of pub.authors.slice(0,10) let i = index">{{author}}{{(i < (pub.authors.slice(0,10).length-1))?"; ":""}}{{(i == pub.authors.slice(0,10).length-1 && pub.authors.length > 10)?"...":""}}</span></div>
|
|
43
|
|
|
44
|
<!-- Crossref -->
|
|
45
|
<!--span *ngIf="pub.result.publisher" class="uk-article-meta">Publisher: {{pub.result.publisher}}</span><span *ngIf="pub.date" class="uk-article-meta" >({{pub.date.substring(0,4)}})</span>
|
|
46
|
<div *ngIf="pub.result.author && pub.result.author.length > 0" class="uk-article-meta">Authors: <span *ngFor="let author of pub.result.author.slice(0,10) let i = index">{{author.family}} {{author.given}}{{(i < (pub.result.author.slice(0,10).length-1))?"; ":""}}{{(i == pub.result.author.slice(0,10).length-1 && pub.result.author.length > 10)?"...":""}}</span></div-->
|
|
47
|
<div *ngIf="pub.result.editor && pub.result.editor.length > 0" class="uk-article-meta">Editors: <span *ngFor="let author of pub.result.editor.slice(0,10) let i = index">{{author.family}} {{author.given}}{{(i < (pub.result.editor.slice(0,10).length-1))?"; ":""}}{{(i == pub.result.editor.slice(0,10).length-1 && pub.result.editor.length > 10)?"...":""}}</span></div>
|
|
48
|
|
|
49
|
<!-- Openaire -->
|
|
50
|
<div *ngIf="pub.result.authors && pub.result.authors.length >0 " class="uk-article-meta">Authors: <span *ngFor="let author of pub.result.authors.slice(0,10) let i = index">{{author.name}}{{(i < (pub.result.authors.slice(0,10).length-1))?"; ":""}}{{(i == pub.result.authors.slice(0,10).length-1 && pub.result.authors.length > 10)?"...":""}}</span></div>
|
|
51
|
|
|
52
|
<!-- Orcid -->
|
|
53
|
|
|
54
|
<!--span *ngIf="pub.result['journal-title'] && pub.result['journal-title'].value " class="uk-article-meta">Journal: {{pub.result['journal-title'].value}}</span>
|
|
55
|
<div *ngIf="pub.result.contributors && pub.result.contributors.length > 0" class="uk-article-meta">Authors: <span *ngFor="let author of pub.result.contributors.slice(0,10) let i = index">{{author}}{{(i < (pub.result.contributors.slice(0,10).length-1))?"; ":""}}{{(i == pub.result.contributors.slice(0,10).length-1 && pub.result.contributors.length > 10)?"...":""}}</span></div-->
|
|
56
|
<!-- Datacite -->
|
|
57
|
<!--span *ngIf="pub.result.attributes['container-title']" class="uk-article-meta">Publisher: {{pub.result.attributes['container-title']}}</span><span *ngIf="pub.date" class="uk-article-meta" >({{pub.date.substring(0,4)}})</span>
|
|
58
|
<div *ngIf="pub.result.attributes.author && pub.result.attributes.author.length > 0" class="uk-article-meta">Authors: <span *ngFor="let author of pub.result.attributes.author.slice(0,10) let i = index">{{(author.family)?author.family+', '+author.given:author.literal}}{{(i < (pub.result.attributes.author.slice(0,10).length-1))?"; ":""}}{{(i == pub.result.attributes.author.slice(0,10).length-1 && pub.result.attributes.author.length > 10)?"...":""}}</span></div-->
|
|
59
|
</div>
|
|
60
|
<div *ngIf="showAccessRights && pub.source != 'openaire' " class = "uk-width-1-3 uk-grid">
|
|
61
|
<div class="uk-width-1-3 uk-padding-remove-left">
|
|
62
|
<select [(ngModel)]="pub.type" name="{{'select_type_'+pub.id}}" >
|
|
63
|
<option [value]="'publication'" >Publication</option>
|
|
64
|
<option [value]="'dataset'" >Dataset</option>
|
|
65
|
</select>
|
|
66
|
</div>
|
|
67
|
<div class="uk-width-1-3 uk-padding-remove-left">
|
|
68
|
<select [(ngModel)]="pub.accessRights" name="{{'select_rights_'+pub.id}}" >
|
|
69
|
<option *ngFor="let type of accessTypes" [value]="type" (click)="accessRightsTypeChanged(type,pub)">{{type}}</option>
|
|
70
|
</select>
|
|
71
|
</div>
|
|
72
|
<!--input *ngIf="pub.accessRights== 'EMBARGO'" class="-width-small" id="{{'date'+pub.id}}" type="text" data-uk-datepicker="{format:'YYYY-MM-DD'}"-->
|
|
73
|
<div class="uk-width-1-3 uk-padding-remove-left">
|
|
74
|
<my-date-picker *ngIf="pub.accessRights== 'EMBARGO'" name="{{'date'+pub.id}}" [options]="myDatePickerOptions"
|
|
75
|
[(ngModel)]="nextDate" (dateChanged)="onDateChanged($event,pub)" ></my-date-picker>
|
|
76
|
</div>
|
|
77
|
|
|
78
|
|
|
79
|
</div>
|
|
80
|
<div *ngIf="showAccessRights && pub.source == 'openaire' " class = "uk-width-1-3">
|
|
81
|
<button class="uk-button uk-button-default " disabled type="button" >
|
|
82
|
{{pub.type}}
|
|
83
|
</button>
|
|
84
|
<button class="uk-button uk-button-default" disabled type="button" >
|
|
85
|
{{pub.accessRights}}
|
|
86
|
</button>
|
|
87
|
|
|
88
|
</div>
|
|
89
|
</div>
|
|
90
|
</li>
|
|
91
|
|
|
92
|
</ul>
|
|
93
|
<modal-alert (alertOutput)="confirmClose($event)">
|
|
94
|
</modal-alert>
|
|
95
|
</div>
|
|
96
|
</div>
|
|
97
|
</li></ul>
|
|
98
|
|
|
99
|
`
|
|
100
|
|
|
101
|
})
|
|
102
|
export class ClaimSelectedResultsComponent {
|
|
103
|
ngOnInit() {
|
|
104
|
var myDate = new Date();
|
|
105
|
this.nextDate = { date: { year: myDate.getFullYear()+10, month: (myDate.getMonth()+1), day: myDate.getDate() } };
|
|
106
|
//2015-05-01
|
|
107
|
|
|
108
|
}
|
|
109
|
|
|
110
|
@Input() results: ClaimResult[];
|
|
111
|
@Input() title:string = "Research Results";
|
|
112
|
@Input() showAccessRights:boolean = false;
|
|
113
|
@Input() bulkMode:boolean = false;
|
|
114
|
// @Output()resultsChange = new EventEmitter();
|
|
115
|
@Input() showSearch:boolean = false;
|
|
116
|
nextDate = {};
|
|
117
|
@ViewChild(AlertModal) alertApplyAll;
|
|
118
|
|
|
119
|
public commonAccessRights = "OPEN"; // for access rights- changes when user apply a change to every result
|
|
120
|
public commonEmbargoEndDate; // for access rights: embargoEndDate - changes when user apply a change to every result
|
|
121
|
accessTypes = ["OPEN","CLOSED","EMBARGO","RESTRICTED"];
|
|
122
|
private myDatePickerOptions: IMyOptions = {
|
|
123
|
// other options...
|
|
124
|
dateFormat: 'yyyy-mm-dd',
|
|
125
|
selectionTxtFontSize: '15px',
|
|
126
|
height:'28px',
|
|
127
|
width: '100%',
|
|
128
|
editableDateField: false,
|
|
129
|
showClearDateBtn: false
|
|
130
|
};
|
|
131
|
|
|
132
|
|
|
133
|
removePublication(item:any){
|
|
134
|
var index:number =this.results.indexOf(item);
|
|
135
|
if (index > -1) {
|
|
136
|
this.results.splice(index, 1);
|
|
137
|
}
|
|
138
|
// this.resultsChange.emit({
|
|
139
|
// value: this.results
|
|
140
|
// });
|
|
141
|
}
|
|
142
|
|
|
143
|
|
|
144
|
onDateChanged (event:any, item:any) {
|
|
145
|
item.embargoEndDate = Dates.getDateFromString(event.formatted);
|
|
146
|
if(this.results.length > 1 ){
|
|
147
|
this.commonAccessRights = "EMBARGO";
|
|
148
|
this.commonEmbargoEndDate = item.embargoEndDate;
|
|
149
|
this.confirmOpen();
|
|
150
|
}
|
|
151
|
|
|
152
|
}
|
|
153
|
// resultsChanged($event) {
|
|
154
|
// this.results=$event.value;
|
|
155
|
// this.resultsChange.emit({
|
|
156
|
// value: this.results
|
|
157
|
// });
|
|
158
|
// }
|
|
159
|
/* The following methods:
|
|
160
|
*typeChanged
|
|
161
|
*confirmOpen
|
|
162
|
*confirmClose
|
|
163
|
implement the functionality: change accessRights of a publication - apply to all if asked */
|
|
164
|
accessRightsTypeChanged (type:any, item:any) {
|
|
165
|
item.accessRights = type;
|
|
166
|
if(this.results.length > 1 ){
|
|
167
|
this.commonAccessRights = type;
|
|
168
|
if(this.commonAccessRights != "EMBARGO"){
|
|
169
|
this.commonEmbargoEndDate = item.embargoEndDate;
|
|
170
|
this.confirmOpen();
|
|
171
|
}
|
|
172
|
}
|
|
173
|
|
|
174
|
}
|
|
175
|
confirmOpen(){
|
|
176
|
this.alertApplyAll.cancelButton = true;
|
|
177
|
this.alertApplyAll.okButton = true;
|
|
178
|
this.alertApplyAll.alertTitle = "Change access rights";
|
|
179
|
this.alertApplyAll.message = "Do you wish to apply the change to every result?";
|
|
180
|
this.alertApplyAll.okButtonText = "Yes";
|
|
181
|
this.alertApplyAll.cancelButtonText = "No";
|
|
182
|
this.alertApplyAll.open();
|
|
183
|
}
|
|
184
|
confirmClose(data){
|
|
185
|
for (var i = 0; i < this.results.length; i++) {
|
|
186
|
if(this.results[i].source != 'openaire' ){
|
|
187
|
this.results[i].accessRights = this.commonAccessRights;
|
|
188
|
if(this.commonAccessRights == "EMBARGO"){
|
|
189
|
this.results[i].embargoEndDate = this.commonEmbargoEndDate;
|
|
190
|
}
|
|
191
|
}
|
|
192
|
}
|
|
193
|
}
|
|
194
|
}
|