Project

General

Profile

1
import {Component, Input, Output, EventEmitter, ViewChild, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
2
import {Observable}       from 'rxjs/Observable';
3
import {ActivatedRoute, Router} from '@angular/router';
4
import {Location} from '@angular/common';
5

    
6
import { Meta, MetaDefinition} from '../../../angular2-meta';
7

    
8
import { FetchPublications } from '../../utils/fetchEntitiesClasses/fetchPublications.class';
9
import { FetchDataproviders } from  '../../utils/fetchEntitiesClasses/fetchDataproviders.class';
10
import { FetchProjects } from  '../../utils/fetchEntitiesClasses/fetchProjects.class';
11
import { FetchDatasets } from '../../utils/fetchEntitiesClasses/fetchDatasets.class';
12
import { FetchOrganizations } from '../../utils/fetchEntitiesClasses/fetchOrganizations.class';
13
import { FetchPeople } from '../../utils/fetchEntitiesClasses/fetchPeople.class';
14

    
15
import {SearchPublicationsService} from '../../services/searchPublications.service';
16
import {SearchDataprovidersService} from '../../services/searchDataproviders.service';
17
import {SearchProjectsService} from '../../services/searchProjects.service';
18
import {SearchDatasetsService} from '../../services/searchDatasets.service';
19
import {SearchPeopleService} from '../../services/searchPeople.service';
20
import {SearchOrganizationsService} from '../../services/searchOrganizations.service';
21

    
22
import {OpenaireProperties} from '../../utils/properties/openaireProperties';
23
import {SearchFields} from '../../utils/properties/searchFields';
24
import {ErrorCodes} from '../../utils/properties/openaireProperties';
25
import {RouterHelper} from '../../utils/routerHelper.class';
26

    
27
@Component({
28
  changeDetection: ChangeDetectionStrategy.Default,
29
  encapsulation: ViewEncapsulation.Emulated,
30
    selector: 'search-find',
31
    template: `
32
    <div  class="uk-margin-top">
33
      <div class="page-header">
34
          <h1>{{pageTitle}}</h1>
35
      </div>
36
    <div class="uk-grid">
37
        <div class="uk-width-1-1  uk-margin uk-panel uk-panel-box uk-panel-box-default">
38

    
39
            <search-form [(keyword)]=keyword (keywordChange)="keywordChanged($event)"></search-form>
40
        </div>
41
        <div  class="  uk-grid uk-margin-top uk-width-1-1">
42

    
43
            <ul class="uk-tab uk-tab-left uk-width-large-1-5 uk-width-small-1-1 " data-uk-switcher="{connect:'#searchtabs'}">
44
                    <li (click)="searchPublications()"  >
45
                       <a>
46
                           Publications
47
                           <span *ngIf = "fetchPublications.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
48
                           <span *ngIf = "fetchPublications.searchUtils.status != errorCodes.LOADING" >{{((keyword.length > 0)?'('+fetchPublications.searchUtils.totalResults+')':'')}}</span>
49
                       </a>
50
                   </li>
51
                   <li (click)="searchDatasets()">
52
                       <a>
53
                           Datasets
54
                           <span *ngIf = "fetchDatasets.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
55
                           <span *ngIf = "fetchDatasets.searchUtils.status != errorCodes.LOADING" >{{((keyword.length > 0)?'('+fetchDatasets.searchUtils.totalResults+')':'')}}</span>
56
                       </a>
57
                   </li>
58
                   <li (click)="searchProjects()"  >
59
                       <a>
60
                           Projects
61
                           <span *ngIf = "fetchProjects.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
62
                           <span *ngIf = "fetchProjects.searchUtils.status != errorCodes.LOADING" >{{((keyword.length > 0)?'('+fetchProjects.searchUtils.totalResults+')':'')}}</span>
63
                       </a>
64
                   </li>
65
                   <li (click)="searchDataProviders()" >
66
                       <a>
67
                           Data Providers
68
                           <span *ngIf = "fetchDataproviders.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
69
                           <span *ngIf = "fetchDataproviders.searchUtils.status != errorCodes.LOADING" >{{((keyword.length > 0)?'('+fetchDataproviders.searchUtils.totalResults+')':'')}}</span>
70
                       </a>
71
                   </li>
72
                   <li (click)="searchOrganizations()" >
73
                       <a>
74
                           Organizations
75
                           <span *ngIf = "fetchOrganizations.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
76
                           <span *ngIf = "fetchOrganizations.searchUtils.status != errorCodes.LOADING" >{{((keyword.length > 0)?'('+fetchOrganizations.searchUtils.totalResults+')':'')}}</span>
77
                       </a>
78
                   </li>
79
                   <li (click)="searchPeople()" >
80
                       <a>
81
                           People
82
                           <span *ngIf = "fetchPeople.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
83
                           <span *ngIf = "fetchPeople.searchUtils.status != errorCodes.LOADING" >{{((keyword.length > 0)?'('+fetchPeople.searchUtils.totalResults+')':'')}}</span>
84
                       </a>
85
                   </li>
86

    
87

    
88

    
89
                </ul>
90

    
91
                <ul id="searchtabs" class="uk-switcher uk-margin-left uk-width-large-3-4 uk-width-small-1-1">
92
                     <li id="pubsTab" class="uk-active">
93
                      <div *ngIf = "keyword.length > 0" class ="uk-animation-fade">
94
                        <div class = "uk-text-right" *ngIf = "fetchPublications.searchUtils.totalResults> 10">
95
							<!--a [href] = "linkToSearchPublications"-->
96
							<a  [queryParams]="routerHelper.createQueryParam('keyword', keyword)"
97
                                routerLinkActive="router-link-active" [routerLink]="linkToSearchPublications">
98
								View all {{fetchPublications.searchUtils.totalResults}} results <i class="uk-icon-angle-double-right"></i>
99
							</a>
100
						</div>
101
                        <search-result  [(results)]="fetchPublications.results"
102
                                        [(status)]= "fetchPublications.searchUtils.status" showLoading = true
103
                                        type="publication" urlParam="articleId">
104
                        </search-result>
105
                      </div>
106
                      <div *ngIf = "keyword.length == 0 && activeTab=='publications'" class ="uk-animation-fade" >
107
                              <browse-entities entityName="publication" baseUrl="/search/find/publications" [refineFields]=searchFields.RESULT_REFINE_FIELDS></browse-entities>
108
                      </div>
109
                    </li>
110
                    <li id="dataTab">
111
                      <div *ngIf = "keyword.length > 0" class ="uk-animation-fade">
112
                        <div class = "uk-text-right" *ngIf = "fetchDatasets.searchUtils.totalResults> 10">
113
							<!--a [href] = "linkToSearchDatasets"-->
114
							<a  [queryParams]="routerHelper.createQueryParam('keyword', keyword)"
115
                                routerLinkActive="router-link-active" [routerLink]="linkToSearchDatasets">
116
								View all {{fetchDatasets.searchUtils.totalResults}} results <i class="uk-icon-angle-double-right"></i>
117
							</a>
118
						</div>
119
                        <search-result  [(results)]="fetchDatasets.results"
120
                                        [(status)]= "fetchDatasets.searchUtils.status" showLoading = true
121
                                        type="dataset" urlParam="datasetId">
122
                        </search-result>
123
                        </div>
124
                        <div *ngIf = "keyword.length == 0 && activeTab=='datasets'" class ="uk-animation-fade">
125
                                <browse-entities entityName="dataset" baseUrl="/search/find/datasets" [refineFields]=searchFields.RESULT_REFINE_FIELDS></browse-entities>
126
                        </div>
127
                    </li>
128
                    <li id="projectsTab" >
129
                      <div *ngIf = "keyword.length > 0" class ="uk-animation-fade">
130
                        <div class = "uk-text-right" *ngIf = "fetchProjects.searchUtils.totalResults> 10">
131
							<!--a [href] = "linkToSearchProjects"-->
132
							<a  [queryParams]="routerHelper.createQueryParam('keyword', keyword)"
133
                                routerLinkActive="router-link-active" [routerLink]="linkToSearchProjects">
134
								View all {{fetchProjects.searchUtils.totalResults}} results <i class="uk-icon-angle-double-right"></i>
135
							</a>
136
						</div>
137
                        <search-result  [(results)]="fetchProjects.results"
138
                                        [(status)]= "fetchProjects.searchUtils.status" showLoading = true
139
                                        type="project" urlParam="projectId">
140
                        </search-result>
141
                      </div>
142
                      <div *ngIf = "keyword.length == 0 && activeTab=='projects'" class ="uk-animation-fade">
143
                              <browse-entities entityName="project" baseUrl="/search/find/projects" [refineFields]=searchFields.PROJECT_REFINE_FIELDS></browse-entities>
144
                      </div>
145
                    </li>
146
                    <li id="dataProviderTab">
147
                      <div *ngIf = "keyword.length > 0" class ="uk-animation-fade">
148
                        <div class = "uk-text-right" *ngIf = "fetchDataproviders.searchUtils.totalResults> 10">
149
							<!--a [href] = "linkToSearchDataproviders"-->
150
							<a  [queryParams]="routerHelper.createQueryParam('keyword', keyword)"
151
                                routerLinkActive="router-link-active" [routerLink]="linkToSearchDataproviders">
152
								View all {{fetchDataproviders.searchUtils.totalResults}} results <i class="uk-icon-angle-double-right"></i>
153
							</a>
154
						</div>
155
                        <search-result  [(results)]="fetchDataproviders.results"
156
                                        [(status)]= "fetchDataproviders.searchUtils.status" showLoading = true
157
                                        type="dataprovider" urlParam="datasourceId">
158
                        </search-result>
159
                      </div>
160
                      <div *ngIf = "keyword.length == 0 && activeTab=='dataproviders'" class ="uk-animation-fade" >
161
                              <browse-entities entityName="dataprovider" baseUrl="/search/find/dataproviders" [refineFields]=searchFields.DATASOURCE_REFINE_FIELDS></browse-entities>
162
                      </div>
163
                    </li>
164
                    <li id="organizationsTab" >
165
                      <div *ngIf = "keyword.length > 0" class ="uk-animation-fade">
166
                        <div class = "uk-text-right" *ngIf = "fetchOrganizations.searchUtils.totalResults> 10">
167
							<!--a [href] = "linkToSearchOrganizations"-->
168
                            <a  [queryParams]="routerHelper.createQueryParam('keyword', keyword)"
169
                                routerLinkActive="router-link-active" [routerLink]="linkToSearchOrganizations">
170
								View all {{fetchOrganizations.searchUtils.totalResults}} results <i class="uk-icon-angle-double-right"></i>
171
							</a>
172
						</div>
173
                        <search-result  [(results)]="fetchOrganizations.results"
174
                                        [(status)]= "fetchOrganizations.searchUtils.status" showLoading = true
175
                                        type="organization" urlParam="organizationId">
176
                        </search-result>
177
                      </div>
178
                      <div *ngIf = "keyword.length == 0 && activeTab=='organizations'" class ="uk-animation-fade">
179
                              <browse-entities entityName="organization" baseUrl="/search/find/organizations" [refineFields]=searchFields.ORGANIZATION_REFINE_FIELDS></browse-entities>
180
                      </div>
181
                    </li>
182
                    <li id="peopleTab">
183
                      <div *ngIf = "keyword.length > 0" class ="uk-animation-fade">
184
                        <div class = "uk-text-right" *ngIf = "fetchPeople.searchUtils.totalResults> 10">
185
							<!--a [href] = "linkToSearchPeople"-->
186
                            <a  [queryParams]="routerHelper.createQueryParam('keyword', keyword)"
187
                                routerLinkActive="router-link-active" [routerLink]="linkToSearchPeople">
188
								View all {{fetchPeople.searchUtils.totalResults}} results <i class="uk-icon-angle-double-right"></i>
189
							</a>
190
						</div>
191
                        <search-result  [(results)]="fetchPeople.results"
192
                                        [(status)]= "fetchPeople.searchUtils.status" showLoading = true
193
                                        type="person" urlParam="personId">
194
                        </search-result>
195
                      </div>
196
                      <div *ngIf = "keyword.length == 0 && activeTab=='people'" class ="uk-animation-fade">
197
                          <div   class="uk-alert uk-alert-info " role="alert">No person statistics found</div>
198

    
199
                      </div>
200
                    </li>
201
                </ul>
202
      </div>
203

    
204

    
205
    </div>
206
    `
207
})
208
export class SearchComponent {
209
  public sub: any;
210

    
211
  public reloadPublications: boolean;
212
  public reloadDatasets: boolean;
213
  public reloadProjects: boolean;
214
  public reloadDataproviders: boolean;
215
  public reloadOrganizations: boolean;
216
  public reloadPeople: boolean;
217

    
218

    
219
  public pageTitle = "Search in OpenAIRE"
220
  public keyword:string = "";
221
  public publications:string[];
222
  public datasets:string[];
223
  public projectsTab:string[];
224
  public dataproviders:string[];
225
  public organizations:string[];
226
  public people:string[];
227

    
228
  public activeTab = "publications";
229
  public linkToSearchPublications = "";
230
  public linkToSearchProjects = "";
231
  public linkToSearchDataproviders = "";
232
  public linkToSearchDatasets = "";
233
  public linkToSearchOrganizations = "";
234
  public linkToSearchPeople = "";
235

    
236
  public fetchPublications : FetchPublications;
237
  public fetchDataproviders : FetchDataproviders;
238
  public fetchProjects : FetchProjects;
239
  public fetchDatasets: FetchDatasets;
240
  public fetchOrganizations: FetchOrganizations;
241
  public fetchPeople: FetchPeople;
242

    
243
  public searchFields:SearchFields = new SearchFields();
244
  public errorCodes:ErrorCodes = new ErrorCodes();
245
  public routerHelper:RouterHelper = new RouterHelper();
246

    
247
public subPub;public subData;public subProjects;public subOrg;public subPeople; public subDataPr;
248
  constructor ( private route: ActivatedRoute,
249
      private _searchPublicationsService: SearchPublicationsService,
250
      private _searchDataprovidersService: SearchDataprovidersService,
251
      private _searchProjectsService: SearchProjectsService,
252
      private _searchDatasetsService: SearchDatasetsService,
253
      private _searchOrganizationsService: SearchOrganizationsService,
254
      private _searchPeopleService: SearchPeopleService,
255
      private location: Location, private _meta: Meta ) {
256
    this.fetchPublications = new FetchPublications(this._searchPublicationsService);
257
    this.fetchDataproviders = new FetchDataproviders(this._searchDataprovidersService);
258
    this.fetchProjects = new FetchProjects(this._searchProjectsService);
259
    this.fetchDatasets = new FetchDatasets( this._searchDatasetsService);
260
    this.fetchOrganizations = new FetchOrganizations( this._searchOrganizationsService);
261
    this.fetchPeople = new FetchPeople(this._searchPeopleService);
262
    var description = "open access, research, scientific publication, European Commission, EC, FP7, ERC, Horizon 2020, H2020, search, projects ";
263
    var title = "Search publications, datasets, projects... | OpenAIRE";
264
    this._meta.setTitle(title);
265
    this._meta.updateMeta("description", description);
266
    this._meta.updateMeta("og:description", description);
267
    this._meta.updateMeta("og:title", title);
268
  }
269

    
270
  public ngOnInit() {
271
    this.sub =  this.route.queryParams.subscribe(params => {
272
      this.keyword = (params['keyword'])?params['keyword']:"";
273
      if(this.keyword !=null && this.keyword.length > 0){
274
          this.reloadTabs();
275
          this.searchPublications();
276
          this.count();
277
      }
278
    });
279

    
280
  }
281
  public ngOnDestroy() {
282
    this.sub.unsubscribe();
283
    if(this.keyword !=null && this.keyword.length > 0){
284
        if(this.subPub){
285
          this.subPub.unsubscribe();
286
        }
287
        if(this.subData){
288
          this.subData.unsubscribe();
289
        }
290
        if(this.subProjects){
291
          this.subProjects.unsubscribe();
292
        }
293
        if(this.subOrg){
294
          this.subOrg.unsubscribe();
295
        }
296
        if(this.subPeople){
297
          this.subPeople.unsubscribe();
298
        }
299
        if(this.subDataPr){
300
          this.subDataPr.unsubscribe();
301
        }
302

    
303
    }
304
  }
305
  public searchPublications() {
306
    this.activeTab = "publications";
307
    if(this.reloadPublications) {
308
        this.reloadPublications = false;
309
        this.fetchPublications.getResultsByKeyword(this.keyword,  1, 10);
310
        this.linkToSearchPublications = OpenaireProperties.getLinkToSearchPublications();// + "?keyword="  + this.keyword;
311
    }
312
   }
313
   public searchDatasets() {
314
     this.activeTab = "datasets";
315
     if(this.reloadDatasets) {
316
         this.reloadDatasets = false;
317
         this.fetchDatasets.getResultsByKeyword(this.keyword,  1, 10);
318
         this.linkToSearchDatasets = OpenaireProperties.getLinkToSearchDatasets();// + "?keyword="  + this.keyword;
319
     }
320
   }
321
   public  searchProjects() {
322
     this.activeTab = "projects";
323
     if(this.reloadProjects) {
324
         this.reloadProjects = false;
325
         this.fetchProjects.getResultsByKeyword(this.keyword,  1, 10);
326
         this.linkToSearchProjects = OpenaireProperties.getLinkToSearchProjects();// + "?keyword="  + this.keyword;
327
     }
328
   }
329
   public  searchDataProviders() {
330
     this.activeTab = "dataproviders";
331
     if(this.reloadDataproviders) {
332
         this.reloadDataproviders = false;
333
         this.fetchDataproviders.getResultsByKeyword(this.keyword, 1, 10);
334
         this.linkToSearchDataproviders = OpenaireProperties.getLinkToSearchDataProviders();// + "?keyword="  + this.keyword;
335
     }
336
   }
337
   public searchOrganizations() {
338
     this.activeTab = "organizations";
339
     if(this.reloadOrganizations) {
340
         this.reloadOrganizations = false;
341
         this.fetchOrganizations.getResultsByKeyword(this.keyword,  1, 10);
342
         this.linkToSearchOrganizations = OpenaireProperties.getLinkToSearchOrganizations();// + "?keyword="  + this.keyword;
343
     }
344
   }
345
   public  searchPeople() {
346
     this.activeTab = "people";
347
     if(this.reloadPeople) {
348
         this.reloadPeople = false;
349
         this.fetchPeople.getResultsByKeyword(this.keyword,  1, 10);
350
         this.linkToSearchPeople = OpenaireProperties.getLinkToSearchPeople();// + "?keyword="  + this.keyword;
351
     }
352
   }
353

    
354
   public keywordChanged($event){
355
    this.keyword = $event.value;
356
    console.info("Search Find: search with keyword \"" +  this.keyword + "\"" );
357
      this.location.go(location.pathname,"?keyword="  + this.keyword);
358
    this.reloadTabs();
359
    if(this.activeTab == "publications") {
360
        this.searchPublications();
361
    }
362
    if(this.activeTab == "projects") {
363
        this.searchProjects();
364
    }
365
    if(this.activeTab == "dataproviders") {
366
        this.searchDataProviders();
367
    }
368
    if(this.activeTab == "datasets") {
369
        this.searchDatasets();
370
    }
371
    if(this.activeTab == "organizations") {
372
        this.searchOrganizations();
373
    }
374
    if(this.activeTab == "people") {
375
        this.searchPeople();
376
    }
377
    this.count();
378
   }
379

    
380
   private count() {
381
     if(this.activeTab != "publications"){
382
      this.fetchPublications.searchUtils.status = this.errorCodes.LOADING;
383
      this.subPub = this._searchPublicationsService.numOfSearchPublications(this.keyword).subscribe(
384
             data => {
385
                console.log("Count results: "+data);
386
                 this.fetchPublications.searchUtils.totalResults = data;
387
                 this.fetchPublications.searchUtils.status = this.errorCodes.DONE;
388
             },
389
             err => {
390
       		    console.log(err);
391
              this.fetchPublications.searchUtils.status = this.errorCodes.ERROR;
392
       		 }
393
      );
394
    }
395
    if(this.activeTab != "datasets"){
396
       this.fetchDatasets.searchUtils.status = this.errorCodes.LOADING;
397
       this.subData = this._searchDatasetsService.numOfSearchDatasets(this.keyword).subscribe(
398
             data => {
399
                 this.fetchDatasets.searchUtils.totalResults = data;
400
                 this.fetchDatasets.searchUtils.status = this.errorCodes.DONE;
401
             },
402
             err => {
403
                 console.log(err);
404
                 this.fetchDatasets.searchUtils.status = this.errorCodes.ERROR;
405
              }
406
       );
407
    }
408
    if(this.activeTab != "projects"){
409
      this.fetchProjects.searchUtils.status = this.errorCodes.LOADING;
410
      this.subProjects = this._searchProjectsService.numOfSearchProjects(this.keyword).subscribe(
411
             data => {
412
                 this.fetchProjects.searchUtils.totalResults = data;
413
                 this.fetchProjects.searchUtils.status = this.errorCodes.DONE;
414
             },
415
             err => {
416
                 console.log(err);
417
                 this.fetchProjects.searchUtils.status = this.errorCodes.ERROR;
418
              }
419
       );
420
     }
421
     if(this.activeTab != "dataproviders"){
422
       this.fetchDataproviders.getNumForSearch(this.keyword);
423
     }
424
      if(this.activeTab != "organizations"){
425
       this.fetchOrganizations.searchUtils.status = this.errorCodes.LOADING;
426
       this.subOrg = this._searchOrganizationsService.numOfSearchOrganizations(this.keyword).subscribe(
427
             data => {
428
                 this.fetchOrganizations.searchUtils.totalResults = data;
429
                 this.fetchOrganizations.searchUtils.status = this.errorCodes.DONE;
430

    
431
             },
432
             err => {
433
                 console.log(err);
434
                 this.fetchOrganizations.searchUtils.status = this.errorCodes.ERROR;
435

    
436
              }
437
         );
438
       }
439
        if(this.activeTab != "people"){
440
        this.fetchPeople.searchUtils.status = this.errorCodes.LOADING;
441
        this.subPeople =  this._searchPeopleService.numOfSearchPeople(this.keyword).subscribe(
442
             data => {
443
                 this.fetchPeople.searchUtils.totalResults = data;
444
                 this.fetchPeople.searchUtils.status = this.errorCodes.DONE;
445

    
446
             },
447
             err => {
448
                 console.log(err);
449
                 this.fetchPeople.searchUtils.status = this.errorCodes.ERROR;
450

    
451
              }
452
           );
453
         }
454

    
455
   }
456

    
457
   private reloadTabs() {
458
       this.reloadPublications = true;
459
       this.reloadDatasets = true;
460
       this.reloadProjects = true;
461
       this.reloadDataproviders = true;
462
       this.reloadOrganizations = true;
463
       this.reloadPeople = true;
464
   }
465

    
466
}
(3-3/3)