Project

General

Profile

« Previous | Next » 

Revision 43244

Updating landing page of publication : parse context field (shown as related to) | linkify authors | linkify identifiers | change downloadFrom type | show additional classifications in subjects | add badges in tabs | view all in References tab

View differences:

publication.component.ts
6 6
import { RouteParams} from '@angular/router-deprecated';
7 7
import { InlineClaimContextComponent} from '../../claimPages/inlineClaimContext/inlineClaimContext.component';
8 8
import { InlineClaimProjectComponent} from '../../claimPages/inlineClaimProject/inlineClaimProject.component';
9
//import {NgSwitch, ngSwitchCase, NgSwitchDefault} from '@angular/common';
10

  
9 11
@Component({
10 12
    selector: 'publication',
11
    //directives: [...ROUTER_DIRECTIVES],
12 13
    template: `
13 14

  
14 15
        <div >
......
23 24
                <div class="row row-offcanvas row-offcanvas-right" >
24 25

  
25 26
                  <div class="col-xs-6 col-sm-9 sidebar-offcanvas" *ngIf="publicationInfo != null">
26
                  <p>
27
                      {{publicationInfo.authors}} ({{publicationInfo.date}})
28
                  </p>
27
                  <div>
28
                    <div *ngIf="publicationInfo.authors != undefined">
29
                        <div *ngIf="showAllAuthors">
30
                            <a class="text-muted" (click)="showAllAuthors = !showAllAuthors;">View less authors</a>
31
                        </div>
32
                        <span *ngFor="let item of publicationInfo.authors.slice(0,30)">
33
                            <a class="custom-external" href="{{item['url']}}" target="_blank">
34
                                {{item['name']}};
35
                            </a>
36
                        </span>
37
                        <span *ngIf="!showAllAuthors && publicationInfo.authors.length > 30">	... </span>
38
                        <span *ngIf="showAllAuthors">
39
                            <span *ngFor="let item of publicationInfo.authors.slice(30)">
40
                                <a class="custom-external" href="{{item['url']}}" target="_blank">
41
                                    {{item['name']}};
42
                                </a>
43
                            </span>
44
                        </span>
45
                        <span *ngIf="!showAllAuthors && publicationInfo.authors.length > 30">
46
                            <a class="text-muted" (click)="showAllAuthors = !showAllAuthors;">
47
                                view all {{publicationInfo.authors.length}} authors
48
                            </a>
49
                        </span>
50
                        <span *ngIf="showAllAuthors">
51
                            <a class="text-muted" (click)="showAllAuthors = !showAllAuthors;">View less authors</a>
52
                        </span>
53
                    </div>
29 54

  
55
                    <span *ngIf="publicationInfo.date != ''">({{publicationInfo.date}})</span>
56
                  </div>
57

  
30 58
                  <dl class="dl-horizontal">
31 59
                    <dt   *ngIf="publicationInfo.publisher != undefined && publicationInfo.publisher != ''">Publisher: </dt>
32 60
                    <dd *ngIf="publicationInfo.publisher != undefined && publicationInfo.publisher != ''">{{publicationInfo.publisher}}</dd>
......
34 62
                    <dd *ngIf="publicationInfo.journal != undefined && publicationInfo.journal != ''">{{publicationInfo.journal}}</dd>
35 63
                    <dt *ngIf="publicationInfo.languages != undefined && publicationInfo.languages != 'Undetermined' && publicationInfo.languages != ''"> Languages: </dt>
36 64
                    <dd *ngIf="publicationInfo.languages != undefined && publicationInfo.languages != 'Undetermined' && publicationInfo.languages != ''">{{publicationInfo.languages}}</dd>
37
                    <dt  *ngIf="publicationInfo.types != undefined"> Types: </dt>
38
                    <dd  *ngIf="publicationInfo.types != undefined">{{publicationInfo.types}}</dd>
65
                    <dt  *ngIf="publicationInfo.types != undefined && publicationInfo.types.length > 0"> Types: </dt>
66
                    <dd  *ngIf="publicationInfo.types != undefined && publicationInfo.types.length > 0">{{publicationInfo.types}}</dd>
39 67

  
40
                      <dt *ngIf="publicationInfo.subjects != undefined"> Subjects: </dt>
41
                      <dd *ngIf="publicationInfo.subjects != undefined"> {{publicationInfo.subjects}} </dd>
42
                      <dt *ngIf="publicationInfo.identifiers != undefined">Identifiers:</dt>
43
                      <dd>
44
                        <ul class="list-inline">
45
                          <li *ngFor="let key of publicationInfo.identifiers.keys()">
46
                            {{key}}: {{publicationInfo.identifiers.get(key)}}  </li>
47
                        </ul>
48
                      </dd>
68

  
69
                    <div *ngIf="publicationInfo.identifiers != undefined && publicationInfo.identifiers.size > 0">
70
                        <dt>Identifiers:</dt>
71
                        <dd>
72
                            <ul class="list-inline">
73
                                <li *ngFor="let key of publicationInfo.identifiers.keys()">
74
                                    <!--a *ngIf="key == 'doi'" class="custom-external" href="http://dx.doi.org/{{key}}" target="_blank">
75
                                        {{key}}: {{publicationInfo.identifiers.get(key)}}
76
                                    </a>
77
                                    <a *ngIf="key == 'pmc'" class="custom-external" href="http://europepmc.org/articles/{{key}}" target="_blank">
78
                                        {{key}}: {{publicationInfo.identifiers.get(key)}}
79
                                    </a>
80
                                    <a *ngIf="key != 'pmc' && key != 'doi'" class="custom-external" href="http://europepmc.org/articles/{{key}}" target="_blank">
81
                                        {{key}}: {{publicationInfo.identifiers.get(key)}}
82
                                    </a-->
83

  
84
                                    <div [ngSwitch]="key">
85
                                      <template [ngSwitchWhen]="'doi'">
86
                                        <a class="custom-external" href="http://dx.doi.org/{{publicationInfo.identifiers.get(key)}}" target="_blank">
87
                                            {{key}}: {{publicationInfo.identifiers.get(key)}}
88
                                        </a>
89
                                      </template>
90
                                      <template [ngSwitchWhen]="'pmc'">
91
                                        <a class="custom-external" href="http://europepmc.org/articles/{{publicationInfo.identifiers.get(key)}}" target="_blank">
92
                                            {{key}}: {{publicationInfo.identifiers.get(key)}}
93
                                        </a>
94
                                      </template>
95
                                      <template ngSwitchDefault>{{key}}: {{publicationInfo.identifiers.get(key)}}</template>
96
                                    </div>
97
                                </li>
98
                            </ul>
99
                        </dd>
100
                    </div>
101

  
102
                    <div *ngIf="publicationInfo.subjects != undefined">
103
                        <dt *ngIf="publicationInfo.subjects.length > 0 || publicationInfo.classifiedSubjects.size > 0">
104
                            Subjects:
105
                        </dt>
106
                        <dd>
107
                            <div *ngIf="publicationInfo.subjects.length > 0"> {{publicationInfo.subjects}} </div>
108
                            <div *ngIf="publicationInfo.subjects.length == 0 && publicationInfo.classifiedSubjects.size > 0"> - </div>
109
                        </dd>
110

  
111
                        <dd class="col-md-offset-1" *ngIf="publicationInfo.classifiedSubjects.size > 0">
112
                            <a (click)="showClassifiedSbj = !showClassifiedSbj;">
113
                                <div *ngIf="!showClassifiedSbj">
114
                                    Show additional classifications
115
                                    <span  class="glyphicon glyphicon-plus" aria-hidden="true"></span>
116
                                </div>
117
                                <div *ngIf="showClassifiedSbj">
118
                                    Hide additional classifications
119
                                    <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
120
                                </div>
121
                            </a>
122

  
123
                            <div class="well" *ngIf="showClassifiedSbj">
124
                                <div *ngFor="let key of publicationInfo.classifiedSubjects.keys()">
125
                                    Classified by OpenAIRE into
126
                                    <div>
127
                                        {{key}}: {{publicationInfo.classifiedSubjects.get(key)}}
128
                                    </div>
129
                                </div>
130
                            </div>
131
                        </dd>
132
                    </div>
133

  
134

  
49 135
                  </dl>
50
                      <blockquote>
51
                          {{publicationInfo.description}}
52
                      </blockquote>
53 136

  
137
                  <blockquote *ngIf="publicationInfo.description != ''">
138
                      {{publicationInfo.description}}
139
                  </blockquote>
54 140

  
55 141

  
142

  
56 143
                  <ul class="nav nav-tabs">
57
                      <li class="active"><a data-toggle="tab" href="#citationsTab">References</a></li>
58
                      <li role="presentation"><a data-toggle="tab" href="#dataTab">Related Research Data</a></li>
59
                      <li role="presentation"><a data-toggle="tab" href="#similarTab">Similar Publications</a></li>
60
                      <li role="presentation" *ngIf="publicationInfo.bioentities != undefined"><a data-toggle="tab" href="#bioentitiesTab">Bioentities</a></li>
144
                    <li class="active">
145
                        <a data-toggle="tab" href="#citationsTab">
146
                            References
147
                            <span *ngIf="publicationInfo.references == undefined" class="badge">0</span>
148
                            <span *ngIf="publicationInfo.references != undefined" class="badge">
149
                                {{publicationInfo.references.length}}
150
                            </span>
151

  
152
                            <!--span [ngSwitch]="publicationInfo.references || undefined" class="badge">
153
                              <template [ngSwitchWhen]="undefined">0</template>
154
                              <template ngSwitchDefault>{{publicationInfo.references.length}}</template>
155
                            </span-->
156
                        </a>
157
                    </li>
158
                    <li role="presentation">
159
                        <a data-toggle="tab" href="#dataTab">
160
                            Related Research Data
161
                            <span *ngIf="publicationInfo.relatedResearchData == undefined" class="badge">0</span>
162
                            <span *ngIf="publicationInfo.relatedResearchData != undefined" class="badge">{{publicationInfo.relatedResearchData.size}}</span>
163
                        </a>
164
                    </li>
165
                    <li role="presentation">
166
                        <a data-toggle="tab" href="#similarTab">
167
                            Similar Publications
168
                            <span *ngIf="publicationInfo.similarPublications == undefined" class="badge">0</span>
169
                            <span *ngIf="publicationInfo.similarPublications != undefined" class="badge">{{publicationInfo.similarPublications.size}}</span>
170
                        </a>
171
                    </li>
172
                    <li role="presentation" *ngIf="publicationInfo.bioentities != undefined">
173
                        <a data-toggle="tab" href="#bioentitiesTab">
174
                            Bioentities
175
                            <span class="badge">{{bioentitiesNum}}</span>
176
                        </a>
177
                    </li>
61 178
                  </ul>
62 179

  
63 180
                  <div class="tab-content">
181

  
64 182
                      <div id="citationsTab" class="tab-pane fade in active panel-body">
65 183

  
66 184
                        <div *ngIf="publicationInfo.references == undefined" class = "alert alert-info " >
67 185
                          There are no references
68 186
                        </div>
69
                            <div *ngIf="publicationInfo.references != undefined"  >
70
                              <div *ngFor="let item of publicationInfo.references">
71
                                       <p *ngIf=" item != undefined &&item['url'] != undefined">
187
                        <div *ngIf="publicationInfo.references != undefined">
188

  
189
                            <div class="panel panel-default" *ngIf="!showAllReferences && publicationInfo.references.length > 10">
190
                                <div class="panel-heading">
191
                                    <a (click)="showAllReferences = true;">
192
                                        <div class="text-right">view all {{publicationInfo.references.length}}</div>
193
                                    </a>
194
                                </div>
195
                            </div>
196

  
197
                            <div *ngIf="!showAllReferences">
198
                              <div *ngFor="let item of publicationInfo.references.slice(0,10)">
199
                                       <p *ngIf=" item != undefined && item['url'] != undefined">
72 200
                                          <a class="custom-external" href="{{item['url']}}" target="_blank">
73 201
                                              {{item['text']}}
74 202
                                          </a>
......
77 205
                                          {{item['text']}}
78 206
                                      </p>
79 207
                               </div>
80
                          </div>
208
                            </div>
81 209

  
210
                            <div *ngIf="showAllReferences">
211
                              <div *ngFor="let item of publicationInfo.references.slice(10)">
212
                                       <p *ngIf=" item != undefined && item['url'] != undefined">
213
                                          <a class="custom-external" href="{{item['url']}}" target="_blank">
214
                                              {{item['text']}}
215
                                          </a>
216
                                      </p>
217
                                      <p *ngIf="item['url'] == undefined">
218
                                          {{item['text']}}
219
                                      </p>
220
                               </div>
221
                            </div>
222

  
223
                            <div class="panel panel-default" *ngIf="!showAllReferences && publicationInfo.references.length > 10">
224
                                <div class="text-right" class="panel-heading">
225
                                    <a (click)="showAllReferences = true;">
226
                                        <div class="text-right" >view all {{publicationInfo.references.length}}</div>
227
                                    </a>
228
                                </div>
229
                            </div>
230
                        </div>
82 231
                      </div>
232

  
83 233
                      <div id="dataTab" class="tab-pane fade panel-body">
84 234
                      <div *ngIf="publicationInfo.relatedResearchData == undefined" class = "alert alert-info " >
85 235
                        There are no related research data
......
94 244
                              <tbody>
95 245
                                  <tr *ngFor="let key of publicationInfo.relatedResearchData.keys()">
96 246
                                      <td *ngIf="key != undefined">
97
                                          <a class="custom-external" href="{{key}}" target="_blank">
98
                                              {{publicationInfo.relatedResearchData.get(key)[0]}}
99
                                          </a>
100
                                          ({{publicationInfo.relatedResearchData.get(key)[1]}})
247
                                        <a class="custom-external" href="{{key}}" target="_blank">
248
                                            {{publicationInfo.relatedResearchData.get(key)[0]}}
249
                                        </a>
250
                                        <span *ngIf="publicationInfo.relatedResearchData.get(key)[1] != ''">
251
                                            ({{publicationInfo.relatedResearchData.get(key)[1]}})
252
                                        </span>
101 253
                                      </td>
102 254
                                      <td>
103 255
                                          <div class="progress">
......
127 279
                              <tbody  >
128 280
                                  <tr *ngFor="let key of publicationInfo.similarPublications.keys()">
129 281
                                      <td *ngIf="key != undefined">
130
                                          <a class="custom-external" href="{{key}}" target="_blank">
131
                                              {{publicationInfo.similarPublications.get(key)[0]}}
132
                                          </a>
133
                                          ({{publicationInfo.similarPublications.get(key)[1]}})
282
                                        <a class="custom-external" href="{{key}}" target="_blank">
283
                                            {{publicationInfo.similarPublications.get(key)[0]}}
284
                                        </a>
285
                                        <span *ngIf="publicationInfo.similarPublications.get(key)[1] != ''">
286
                                            ({{publicationInfo.similarPublications.get(key)[1]}})
287
                                        </span>
134 288
                                      </td>
135 289
                                      <td>
136 290
                                        <div class="progress">
......
189 343
                      </dl>
190 344
                      </li>
191 345
                      <li class="list-group-item">
192
                      <dl class="functionsSection" *ngIf="publicationInfo.collectedFrom != undefined">
346
                      <dl class="functionsSection" *ngIf="publicationInfo.downloadFrom != undefined && publicationInfo.downloadFrom.size > 0">
193 347
                          <dt class="title">Download from</dt>
194
                          <dd class="line" *ngFor="let key of publicationInfo.collectedFrom.keys()">
195
                            <a href="{{publicationInfo.collectedFrom.get(key)}}">
196
                               {{key}}
348
                          <dd class="line" *ngFor="let key of publicationInfo.downloadFrom.keys()">
349
                            <a href="{{key}}">
350
                               {{publicationInfo.downloadFrom.get(key)[1]}}
197 351
                            </a>
198 352
                          </dd>
199 353
                      </dl>
......
223 377
                      <li class="list-group-item">
224 378
                       <dl class="functionsSection" *ngIf="publicationInfo.contexts != undefined">
225 379
                          <dt class="title">Related to </dt>
226
                          <dd class="line"  >
227
                            <!-- TODO add contexts here -->
380
                          <dd class="line" *ngFor="let item of publicationInfo.contexts">
381
                            <span>{{item['labelContext']}}</span>
382
                            <span *ngIf="item['labelCategory'] != null">-> {{item['labelCategory']}}</span>
383
                            <span *ngIf="item['labelConcept'] != null">: {{item['labelConcept']}}</span>
228 384
                          </dd>
229 385
                        </dl>
230 386
                        <dl class="functionsSection" *ngIf="publicationInfo.contexts == undefined">
......
259 415
     this.getPublicationInfo();
260 416
}
261 417

  
418
  private publicationInfo: PublicationInfo;
419
  private params: RouteParams;
262 420

  
263
  publicationInfo: PublicationInfo;
264
  params: RouteParams;
421
  private showAllAuthors: boolean = false;
422
  private showStyle: boolean = false;
423
  private showAllReferences: boolean = false;
424
  private showAllRelResData: boolean = false;
425
  private showAllSimilPubl: boolean = false;
426
  private showAllBioentities: boolean = false;
265 427

  
428
  private bioentitiesNum: number = 0;
429

  
266 430
  private result ;
267 431
  private claimInline:string = "none" ;
268 432

  
......
283 447
      this._publicationService.getPublicationInfo(this.params.get("articleId")).subscribe(
284 448
        data => {
285 449
            this.publicationInfo = data;
286
             this.result = []
450

  
451
            let bioentitiesNum = 0;
452
            if(this.publicationInfo.bioentities != undefined) {
453
                this.publicationInfo.bioentities.forEach(function (value, key, map) {
454
                    bioentitiesNum += value.size;
455
                });
456
            }
457
            this.bioentitiesNum = bioentitiesNum;
458

  
459
            this.result = []
287 460
            let result_  ={id: this.params.get("articleId"), type :"publication", source : "openaire", title: this.publicationInfo.title,url: '', result: '', accessRights: this.publicationInfo.bestlicense, embargoEndDate: ''};
288 461
            this.result.push(result_);
289 462
        },
......
328 501
      var contexts =$event.value;
329 502
      if(contexts){
330 503
         for(var i=0; i < contexts.length; i++){
331
 
504

  
332 505
         }
333 506
       }
334 507
     }

Also available in: Unified diff