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
|
|
13
|
|
14
|
<!--div *ngIf="showSearch " class="uk-width-1-2 ">
|
15
|
<div class="uk-clearfix"><a (click)="bulkMode = !bulkMode;" class=" uk-animation uk-float-right">
|
16
|
<span *ngIf="!bulkMode">Switch to Upload mode <i class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="upload" ratio="1"><polyline fill="none" stroke="#000" points="5 8 9.5 3.5 14 8 "></polyline><rect x="3" y="17" width="13" height="1"></rect><line fill="none" stroke="#000" x1="9.5" y1="15" x2="9.5" y2="4"></line></svg></i></span>
|
17
|
<span *ngIf="bulkMode">Switch to Search mode <span class="uk-icon">
|
18
|
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg>
|
19
|
</span></span>
|
20
|
</a></div>
|
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 class="uk-placeholder" >
|
25
|
<div *ngIf="results.length == 0 " class="uk-text-center">There are no selected research results</div>
|
26
|
<div *ngIf="results.length > 0 ">
|
27
|
<h3 > {{title}} ({{results.length}}) </h3>
|
28
|
<table class="uk-table uk-table-responsive">
|
29
|
<thead *ngIf="showAccessRights">
|
30
|
<tr>
|
31
|
<th> Research Result</th>
|
32
|
<th> Change type and access mode</th>
|
33
|
</tr>
|
34
|
</thead>
|
35
|
<tbody>
|
36
|
<tr *ngFor="let pub of results" >
|
37
|
<td >
|
38
|
<div>
|
39
|
<span *ngIf="showAccessRights" (click)="removePublication(pub)" aria-hidden="true" class="uk-icon-button"><span class="uk-icon">
|
40
|
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>
|
41
|
</span></span>
|
42
|
<a *ngIf="pub.url" target="_blank" href="{{pub.url}}" > <span class="custom-external"></span> {{pub.title}}</a>
|
43
|
<span *ngIf="!pub.url" >{{pub.title}}</span>
|
44
|
<span *ngIf="!showAccessRights" (click)="removePublication(pub)" aria-hidden="true" class="uk-icon-button"><span class="uk-icon">
|
45
|
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>
|
46
|
</span></span>
|
47
|
</div>
|
48
|
|
49
|
<span *ngIf="pub.publisher" >Publisher: {{pub.publisher}}</span>
|
50
|
<!--Orcid --><span *ngIf="pub.result['journal-title'] && pub.result['journal-title'].value " >Journal: {{pub.result['journal-title'].value}}</span>
|
51
|
<span *ngIf="pub.date" >({{pub.date.substring(0,4)}})</span>
|
52
|
|
53
|
<div *ngIf="pub.authors && pub.authors.length > 0" >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>
|
54
|
|
55
|
<!-- Crossref -->
|
56
|
<!--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>
|
57
|
<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-->
|
58
|
<div *ngIf="pub.result.editor && pub.result.editor.length > 0" >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>
|
59
|
|
60
|
<!-- Openaire -->
|
61
|
<div *ngIf="pub.result.authors && pub.result.authors.length >0 " >Authors: <span *ngFor="let author of pub.result.authors.slice(0,10) let i = index">{{author}}{{(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>
|
62
|
|
63
|
<!-- Orcid -->
|
64
|
|
65
|
<!--span *ngIf="pub.result['journal-title'] && pub.result['journal-title'].value " class="uk-article-meta">Journal: {{pub.result['journal-title'].value}}</span>
|
66
|
<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-->
|
67
|
<!-- Datacite -->
|
68
|
<!--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>
|
69
|
<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-->
|
70
|
<div><span class="uk-label">{{pub.source}}</span>
|
71
|
<span *ngIf="pub.accessRights" class=" uk-label label-grey" > {{pub.accessRights}}</span>
|
72
|
<span *ngIf="pub.type" class="uk-label label-grey" > {{pub.type}}</span>
|
73
|
</div>
|
74
|
</td>
|
75
|
<td *ngIf="showAccessRights && pub.source != 'openaire' " >
|
76
|
|
77
|
<select [(ngModel)]="pub.type" name="{{'select_type_'+pub.id}}" >
|
78
|
<option [value]="'publication'" (click)="onTypeChanged('publication',pub)" >Publication</option>
|
79
|
<option [value]="'dataset'" (click)="onTypeChanged('dataset',pub)" >Research Data</option>
|
80
|
</select>
|
81
|
|
82
|
<select [(ngModel)]="pub.accessRights" name="{{'select_rights_'+pub.id}}" >
|
83
|
<option *ngFor="let type of accessTypes" [value]="type" (click)="accessRightsTypeChanged(type,pub)">{{type}}</option>
|
84
|
</select>
|
85
|
<my-date-picker *ngIf="pub.accessRights== 'EMBARGO'" name="{{'date'+pub.id}}" [options]="myDatePickerOptions"
|
86
|
[(ngModel)]="nextDate" (dateChanged)="onDateChanged($event,pub)" ></my-date-picker>
|
87
|
|
88
|
</td>
|
89
|
|
90
|
|
91
|
|
92
|
<td *ngIf="showAccessRights && pub.source == 'openaire' " >
|
93
|
Currently you cannot change metadata from OpenAIRE
|
94
|
|
95
|
</td>
|
96
|
</tr>
|
97
|
</tbody>
|
98
|
|
99
|
</table>
|
100
|
<div>
|
101
|
<modal-alert (alertOutput)="confirmClose($event)">
|
102
|
</modal-alert>
|
103
|
</div>
|
104
|
</div>
|
105
|
</div>
|
106
|
|
107
|
|
108
|
`
|
109
|
|
110
|
})
|
111
|
export class ClaimSelectedResultsComponent {
|
112
|
ngOnInit() {
|
113
|
var myDate = new Date();
|
114
|
this.nextDate = { date: { year: myDate.getFullYear()+10, month: (myDate.getMonth()+1), day: myDate.getDate() } };
|
115
|
//2015-05-01
|
116
|
|
117
|
}
|
118
|
|
119
|
@Input() results: ClaimResult[];
|
120
|
@Input() title:string = "Research Results";
|
121
|
@Input() showAccessRights:boolean = false;
|
122
|
@Input() bulkMode:boolean = false;
|
123
|
// @Output()resultsChange = new EventEmitter();
|
124
|
@Input() showSearch:boolean = false;
|
125
|
nextDate = {};
|
126
|
@ViewChild(AlertModal) alertApplyAll;
|
127
|
|
128
|
public commonAccessRights = "OPEN"; // for access rights- changes when user apply a change to every result
|
129
|
public commonEmbargoEndDate; // for access rights: embargoEndDate - changes when user apply a change to every result
|
130
|
public commonType; // for research result type - changes when user apply a change to every result
|
131
|
public typeChanged:boolean = true; //
|
132
|
accessTypes = ["OPEN","CLOSED","EMBARGO","RESTRICTED"];
|
133
|
private myDatePickerOptions: IMyOptions = {
|
134
|
// other options...
|
135
|
dateFormat: 'yyyy-mm-dd',
|
136
|
selectionTxtFontSize: '15px',
|
137
|
height:'28px',
|
138
|
width: '100%',
|
139
|
editableDateField: false,
|
140
|
showClearDateBtn: false
|
141
|
};
|
142
|
|
143
|
|
144
|
removePublication(item:any){
|
145
|
var index:number =this.results.indexOf(item);
|
146
|
if (index > -1) {
|
147
|
this.results.splice(index, 1);
|
148
|
}
|
149
|
// this.resultsChange.emit({
|
150
|
// value: this.results
|
151
|
// });
|
152
|
}
|
153
|
|
154
|
|
155
|
onDateChanged (event:any, item:any) {
|
156
|
item.embargoEndDate = Dates.getDateFromString(event.formatted);
|
157
|
if(this.results.length > 1 ){
|
158
|
this.commonAccessRights = "EMBARGO";
|
159
|
this.commonEmbargoEndDate = item.embargoEndDate;
|
160
|
this.confirmOpen(false,"Do you wish to apply the change to every result?");
|
161
|
}
|
162
|
|
163
|
}
|
164
|
onTypeChanged (event:any, item:any) {
|
165
|
item.type =(event);
|
166
|
if(this.results.length > 1 ){
|
167
|
this.commonType = item.type;
|
168
|
this.confirmOpen(true, "Do you wish to apply the change to every result?");
|
169
|
}
|
170
|
|
171
|
}
|
172
|
// resultsChanged($event) {
|
173
|
// this.results=$event.value;
|
174
|
// this.resultsChange.emit({
|
175
|
// value: this.results
|
176
|
// });
|
177
|
// }
|
178
|
/* The following methods:
|
179
|
*typeChanged
|
180
|
*confirmOpen
|
181
|
*confirmClose
|
182
|
implement the functionality: change accessRights of a publication - apply to all if asked */
|
183
|
accessRightsTypeChanged (type:any, item:any) {
|
184
|
item.accessRights = type;
|
185
|
if(this.results.length > 1 ){
|
186
|
this.commonAccessRights = type;
|
187
|
if(this.commonAccessRights != "EMBARGO"){
|
188
|
this.commonEmbargoEndDate = item.embargoEndDate;
|
189
|
this.confirmOpen(false, "Do you wish to apply the change to every result?");
|
190
|
}
|
191
|
}
|
192
|
|
193
|
}
|
194
|
confirmOpen(type: boolean, message: string){
|
195
|
this.typeChanged = type;
|
196
|
this.alertApplyAll.cancelButton = true;
|
197
|
this.alertApplyAll.okButton = true;
|
198
|
this.alertApplyAll.alertTitle = "Change metadata";
|
199
|
this.alertApplyAll.message = "Do you wish to apply the change to every result?";
|
200
|
this.alertApplyAll.okButtonText = "Yes";
|
201
|
this.alertApplyAll.cancelButtonText = "No";
|
202
|
this.alertApplyAll.open();
|
203
|
}
|
204
|
confirmClose(data){
|
205
|
if(this.typeChanged){
|
206
|
|
207
|
for (var i = 0; i < this.results.length; i++) {
|
208
|
if(this.results[i].source != 'openaire' ){
|
209
|
this.results[i].type = this.commonType;
|
210
|
}
|
211
|
}
|
212
|
|
213
|
}else{
|
214
|
for (var i = 0; i < this.results.length; i++) {
|
215
|
if(this.results[i].source != 'openaire' ){
|
216
|
this.results[i].accessRights = this.commonAccessRights;
|
217
|
if(this.commonAccessRights == "EMBARGO"){
|
218
|
this.results[i].embargoEndDate = this.commonEmbargoEndDate;
|
219
|
}
|
220
|
}
|
221
|
}
|
222
|
}
|
223
|
}
|
224
|
}
|