Project

General

Profile

1
import {Component, Input}           from '@angular/core';
2
import {Router,  ActivatedRoute}    from '@angular/router';
3
import {Title, Meta}                from '@angular/platform-browser';
4

    
5
import {Observable}                 from 'rxjs/Observable';
6
import {ErrorCodes}                 from '../utils/properties/errorCodes';
7

    
8
import{EnvProperties} from '../utils/properties/env-properties';
9

    
10
import {RouterHelper} from '../utils/routerHelper.class';
11
import {FetchDataproviders}         from '../utils/fetchEntitiesClasses/fetchDataproviders.class';
12
import {SearchDataprovidersService} from '../services/searchDataproviders.service';
13
import {OrganizationService} from '../services/organization.service';
14
import {PiwikService} from '../utils/piwik/piwik.service';
15
import { SEOService } from '../sharedComponents/SEO/SEO.service';
16

    
17
import {ZenodoInformationClass} from './utils/zenodoInformation.class';
18

    
19
@Component({
20
    selector: 'deposit-result',
21
    template: `
22
    <div id="tm-main" class=" uk-section  uk-margin-small-top tm-middle"   >
23
      <div uk-grid uk-grid>
24
       <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
25
       <schema2jsonld *ngIf="url"  [URL]="url"     name="Deposit {{requestFor}}" type="other"></schema2jsonld>
26

    
27
        <div class="uk-container uk-margin-top">
28
          <div class="uk-article-title custom-article-title uk-margin-bottom">
29
            Deposit {{requestFor}}
30
          </div>
31
            <helper position="top"></helper>
32
            <div class="uk-grid  helper-grid">
33
              <helper position="left" styleName=" uk-width-1-5 uk-padding-left"></helper>
34
              <div class="uk-width-expand">
35
                <!--div *ngIf="status != errorCodes.LOADING" class="uk-margin-bottom  uk-margin-top">
36
                  <h3>See if your institution has a repository </h3>
37

    
38
                  <form class= "uk-grid">
39
                      <div class="uk-width-1-2 ">
40
                      <entities-autocomplete [(properties)]=properties fieldId="organization" (click)="warningMessage = ''" [entityType]="'organization'"
41
                        [depositType]=compatibility  [showSelected]=true [placeHolderMessage] = "'Organization name'"
42
                        [title] = "'Organizations'"  [multipleSelections]=false (selectedValueChanged)="valueChanged($event)">
43
                      </entities-autocomplete>
44
                      </div>
45
                      <button class=" uk-button portal-button"  type="submit" (click)="organizationSelected(selectedId)" >
46
                          Locate
47
                      </button>
48
                      <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning uk-animation-fade" role="alert">{{warningMessage}}</div>
49
                  </form>
50
                </div-->
51

    
52
                <h4 *ngIf=" organization && (fetchDataproviders.searchUtils.status == errorCodes.DONE ||
53
                            (fetchDataproviders.searchUtils.status == errorCodes.LOADING && !fetchDataproviders.loadPaging && fetchDataproviders.oldTotalResults > 0))"
54
                            class="organization">
55
                    <a *ngIf="organization['url']!=''" href="{{organization.url}}" target="_blank">
56
                        <span><i class="custom-external"></i>{{organization['name']}}</span>
57
                    </a>
58
                    <span *ngIf="organization['url']==''">{{organization['name']}}</span>
59
                </h4>
60

    
61
                <div *ngIf="subjectResults" class="uk-width-1-1  uk-margin uk-padding uk-panel  uk-background-muted">
62
                  <form class= "uk-margin uk-text-center uk-margin-top">
63
                      <input type="text"  [(ngModel)]="subject"  class=" uk-input uk-width-1-2" name="subject" placeholder="Search for classifications..."   />
64

    
65
                      <button class=" uk-button portal-button"  type="submit" (click)="newSubject()" >
66
                          Search
67
                      </button>
68
                  </form>
69
                  <div *ngIf="subject.length > 0" class=" uk-text-center ">
70
                      <span>Keywords: {{subject}}<span>
71
                        <a class=" " (click)="subject=''; newSubject()">  <span aria-hidden="true" class="uk-icon-button icon-button-small ">
72
                            <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><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>
73
                          </span>
74
                         </a>
75

    
76
                        </span>
77
                    </span>
78
                  </div>
79
                </div>
80

    
81
                <p  class="uk-text-meta"
82
                    *ngIf=" fetchDataproviders.searchUtils.status == errorCodes.DONE ||
83
                            (fetchDataproviders.searchUtils.status == errorCodes.LOADING && !fetchDataproviders.loadPaging && fetchDataproviders.oldTotalResults > 0)">
84
                    Please use the information below and contact your repository to deposit your <span class="uk-text-lowercase">{{requestFor}}</span>.
85
                </p>
86

    
87
                <div *ngIf="fetchDataproviders.searchUtils.status == errorCodes.DONE ||
88
                            (fetchDataproviders.searchUtils.status == errorCodes.LOADING && !fetchDataproviders.loadPaging && fetchDataproviders.oldTotalResults > 0)"
89
                      class="uk-align-center uk-margin-remove-bottom">
90
                  <search-paging  [type]="'content providers'" [(searchUtils)] = "fetchDataproviders.searchUtils" [(results)] = "fetchDataproviders.results"
91
                                  [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues"
92
                                  [loadPaging]="fetchDataproviders.loadPaging" [oldTotalResults]="fetchDataproviders.oldTotalResults">
93
                  </search-paging>
94
                </div>
95

    
96
                <div *ngIf="status == errorCodes.LOADING || fetchDataproviders.searchUtils.status == errorCodes.LOADING"
97
                      class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><span class="loading-gif  uk-align-center" ></span>
98
                </div>
99

    
100
                <div *ngIf="fetchDataproviders.searchUtils.status == errorCodes.DONE" class="  uk-margin uk-margin-remove-top other-results">
101
                  <div *ngFor="let result of fetchDataproviders.results" [title] = "result.compatibilityUNKNOWN ? 'Incompatible content provider' : ''" [class]="'uk-margin-small-top uk-card uk-padding-small uk-animation-fade '+(result.compatibilityUNKNOWN ? 'li-disabled ' : 'uk-card-default' ) ">
102
                    <h5>
103
                      <span   *ngIf="!result.compatibilityUNKNOWN" class="" title ="Compatible Content Provider" >
104
                        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="check" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline></svg>
105
                      </span>
106
                      <a *ngIf="!result.compatibilityUNKNOWN" [queryParams]="{datasourceId: result.id}" routerLinkActive="router-link-active" routerLink="/search/dataprovider">
107
                        <span *ngIf="result['title'].name" [innerHTML]="result['title'].name"></span>
108
                        <span *ngIf="!result['title'].name">[no title available]</span>
109
                      </a>
110
                      <p *ngIf="result.compatibilityUNKNOWN && result['title'].name" [innerHTML]="result['title'].name"></p>
111
                      <p *ngIf="result.compatibilityUNKNOWN && !result['title'].name">[no title available]</p>
112
                    </h5>
113

    
114
                    <approved-by-community [contentProviderId]="result.id"></approved-by-community>
115
                    <span *ngIf="result['type'] != undefined && result['type'] != ''" class="uk-label custom-label label-blue label-dataprovider" title="Type"> {{result['type']}}</span>
116
                    <span *ngIf="result['compatibility'] != undefined && result['compatibility'] != ''" class="uk-label custom-label  label-compatibility" title="Compatibility">{{result.compatibility}}</span>
117

    
118
                    <div *ngIf="subjectResults && result['organizations'] != undefined && result['organizations'].length > 0">
119
                        <span> Organization: </span>
120
                        <span *ngFor="let organization of result['organizations'].slice(0,10) let i=index">
121
                            <!--a *ngIf="organization.url != undefined" href="{{organization.url}}"-->
122
                            <a *ngIf="organization.id" [queryParams]="{organizationId: organization.id}" routerLinkActive="router-link-active" routerLink="/search/organization">
123
                                    {{organization.name}}</a><span
124

    
125
                                *ngIf="!organization.id">
126
                                    {{organization.name}}</span><span
127

    
128
                                *ngIf="(i < result['organizations'].length-1) && (i < 9)">,</span>
129
                        </span>
130
                        <span *ngIf="result['organizations'].length > 10">...</span>
131
                    </div>
132
                    <div *ngIf="result['countries'] && result['countries'].length > 0">
133
                      Country: <span *ngFor="let country of  result['countries'].slice(0,10) let i = index">{{country}}{{(i < ( result['countries'].slice(0,10).length-1))?", ":""}}{{(i ==  result['countries'].slice(0,10).length-1 &&  result['countries'].length > 10)?"...":""}}</span>
134
                    </div>
135
                    <div *ngIf="result['websiteURL'] != undefined && result['websiteURL'] != ''">
136
                      <span>Website URL: </span>
137
                        <span>
138
                          <a href="{{result['websiteURL']}}" target="_blank" class="custom-external custom-icon">
139
                            {{result['websiteURL']}}
140
                          </a>
141
                        </span>
142
                    </div>
143
                    <div *ngIf="result['OAIPMHURL'] != undefined && result['OAIPMHURL'] != ''">
144
                      <span>OAI-PMH URL: </span>
145
                        <span>
146
                          <a href="{{result['OAIPMHURL']}}" target="_blank" class="custom-external custom-icon">
147
                            {{result['OAIPMHURL']}}
148
                          </a>
149
                        </span>
150
                    </div>
151

    
152
                    <div *ngIf="subjectResults && result['subjects'] && result['subjects'].length > 0">
153
                      Subject: <span *ngFor="let subject of  result['subjects'].slice(0,10) let i = index">{{subject}}{{(i < ( result['subjects'].slice(0,10).length-1))?", ":""}}{{(i ==  result['subjects'].slice(0,10).length-1 &&  result['subjects'].length > 10)?"...":""}}</span>
154
                    </div>
155
                  </div>
156
                </div>
157

    
158
                <div *ngIf="!subjectResults">
159
                  <div *ngIf="status == errorCodes.NOT_FOUND || status == errorCodes.ERROR ||
160
                              status == errorCodes.NOT_AVAILABLE || status == errorCodes.NONE" class = "alert alert-warning">
161
                      <div *ngIf="status == errorCodes.NOT_FOUND && organizationId != ''">
162
                          No organization with ID: {{organizationId}} found.
163
                      </div>
164
                      <div *ngIf="status == errorCodes.ERROR && organizationId != ''">
165
                          An error occured.
166
                      </div>
167
                      <span *ngIf="status == errorCodes.NOT_AVAILABLE && organizationId != ''">
168
                          Service temprorarily unavailable. Please try again later.
169
                      </span>
170
                      <div *ngIf="status == errorCodes.NONE">
171
                          No ID for organization.
172
                      </div>
173
                  </div>
174
                </div>
175
                <div *ngIf="status == errorCodes.DONE && fetchDataproviders.searchUtils.status != errorCodes.DONE
176
                      && fetchDataproviders.searchUtils.status != errorCodes.LOADING" class = "alert alert-warning">
177
                    <span *ngIf="fetchDataproviders.searchUtils.status == errorCodes.ERROR">
178
                        An error occured.
179
                    </span>
180
                    <span *ngIf="fetchDataproviders.searchUtils.status == errorCodes.NOT_AVAILABLE">
181
                        Service temprorarily unavailable. Please try again later.
182
                    </span>
183
                    <span *ngIf="fetchDataproviders.searchUtils.status == errorCodes.OUT_OF_BOUND">
184
                        Requested page out of bounds.
185
                    </span>
186
                    <div *ngIf="!subjectResults">
187
                      No content providers found for institution:
188
                      <a *ngIf="organization['url']!=''" target="_blank" href="{{organization.url}}">
189
                          <span>{{organization['name']}} (<i class="custom-external"></i>)</span>
190
                      </a>
191
                      <span *ngIf="organization['url']==''">{{organization['name']}}</span>
192
                      .
193
                    </div>
194
                    <div *ngIf="subjectResults">
195
                      No content providers found<span *ngIf="subject != ''"> with classification "{{subject}}"</span>.
196
                    </div>
197
                </div>
198
              </div>
199

    
200
              <div class="uk-width-1-5">
201
                <helper position="right" before="true"></helper>
202

    
203
                <div class="uk-card uk-card-default uk-card-body portal-card">
204
                  Deposit your {{requestFor}} in
205
                  <a href="{{zenodoInformation.url}}" target="_blank" uk-tooltip="title: Zenodo is OpenAIRE's catch-all repository hosted by CERN.">
206
                    {{zenodoInformation.name}} (<i class="custom-external"></i>)</a>
207
                  <div class="uk-margin-top" *ngIf="zenodoInformation && zenodoInformation.shareInZenodoUrl">
208
                    <a href="{{zenodoInformation.shareInZenodoUrl}}">More Zenodo communities</a>
209
                  </div>
210
                </div>
211

    
212
                <div *ngIf="fetchDataproviders.results.length > 0" class="uk-card uk-card-default uk-card-body portal-card uk-margin-small-top">
213
                   Compatibility is mpla mpla
214
                </div>
215

    
216
                <helper position="right" before="false"></helper>
217
              </div>
218
            </div>
219
            <button class=" uk-button uk-button-primary uk-margin-small-top"  type="submit" (click)="goToDeposit()">
220
                <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-left" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline></svg></span> Back
221
            </button>
222
            <helper position="bottom"></helper>
223
        </div>
224
        </div>
225
      </div>
226
    </div>
227

    
228
    `
229
})
230

    
231
export class DepositResultComponent {
232
  @Input() zenodoInformation: ZenodoInformationClass;
233
  @Input() compatibility: string = '';
234
  @Input() piwikSiteId = null;
235
  // Type of entity: Publication or Research Data
236
  @Input() requestFor: string = "Publications";
237

    
238
  public organization: {"name": string, "url": string};
239
  public organizationId: string = "";
240

    
241
  // Id of the new selected organization to be searched
242
  public selectedId: string = "";
243

    
244
  @Input() subjectResults: boolean = false;
245
  @Input() subject: string = "";
246

    
247
  public status: number;
248
  public warningMessage: string = "";
249

    
250
  public fetchDataproviders : FetchDataproviders;
251
  public linkToSearchDataproviders: string = "";
252

    
253
  public parameterNames:string[] =[];
254
  public parameterValues:string[] =[];
255

    
256
  public routerHelper:RouterHelper = new RouterHelper();
257
  public errorCodes:ErrorCodes = new ErrorCodes();
258

    
259
  sub: any; piwiksub: any;
260
  properties:EnvProperties;
261
  url=null;
262

    
263
  constructor ( private _router: Router,
264
                private  route: ActivatedRoute,
265
                private _searchDataprovidersService: SearchDataprovidersService,
266
                private _organizationService: OrganizationService,
267
                private _meta: Meta,
268
                private _title: Title,
269
                private _piwikService:PiwikService,
270
              private seoService: SEOService) {
271

    
272
      this.fetchDataproviders = new FetchDataproviders(this._searchDataprovidersService);
273

    
274
      this.status = this.errorCodes.LOADING;
275

    
276

    
277
      var title = "Deposit "+this.requestFor;
278
      var description = "Openaire, repositories, open access, content provider, compatibility, organization, deposit "+ this.requestFor;
279

    
280
      this.updateTitle(title);
281
      this.updateDescription(description);
282

    
283
    }
284
    ngOnInit() {
285
      this.route.data
286
        .subscribe((data: { envSpecific: EnvProperties }) => {
287
           this.properties = data.envSpecific;
288
           this.seoService.createLinkForCanonicalURL(this.properties.baseLink+this._router.url, false);
289
           this.updateUrl(data.envSpecific.baseLink+this._router.url);
290
           this.url = data.envSpecific.baseLink+this._router.url;
291

    
292
           if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){
293
             this.piwiksub = this._piwikService.trackView(this.properties, "Deposit "+this.requestFor, this.piwikSiteId).subscribe();
294
           }
295
        });
296

    
297
        console.info('depositResult init');
298

    
299
        this.sub =  this.route.queryParams.subscribe(params => {
300
            this.fetchDataproviders.searchUtils.page = (params['page']=== undefined)?1:+params['page'];
301

    
302
            if(this.subjectResults) {
303
              this.status = this.errorCodes.DONE;
304

    
305
              this.subject = params['subject'];
306
              if(!this.subject) {
307
                this.subject = "";
308
              }
309
              this.parameterNames.push('subject');
310
              this.parameterValues.push(this.subject);
311

    
312
              this.searchDataprovidersBySubject();
313
            } else {
314
              if(this.organizationId) {
315
                this.searchDataproviders();
316
              } else {
317
                this.organizationId = params['organizationId'];
318
                this.parameterNames.push('organizationId');
319
                this.parameterValues.push(this.organizationId);
320

    
321
                console.info("Id is :"+this.organizationId);
322
                if(this.organizationId){
323
                    this.getOrganizationInfo();
324
                }
325
              }
326
              this.selectedId = "";
327
            }
328
        });
329
    }
330

    
331
    ngDoCheck() {
332
        if(!this.subjectResults && (this.organizationId == "" || this.organizationId == undefined)) {
333
            this.organizationId = "";
334
            this.status = this.errorCodes.NONE;
335
            this.fetchDataproviders.searchUtils.status = this.errorCodes.NONE;
336
        }
337
    }
338

    
339
    ngOnDestroy() {
340
      this.sub.unsubscribe();
341
      if(this.piwiksub){
342
        this.piwiksub.unsubscribe();
343
      }
344
    }
345

    
346
    public newSubject() {
347
      this._router.navigate( ['participate/deposit-subject-result'], { queryParams: { "subject": this.subject } } );
348
    }
349

    
350
    public searchDataprovidersBySubject() {
351
        this.parameterNames = [];
352
        this.parameterValues = [];
353
        this.parameterNames.push('subject');
354
        this.parameterValues.push(this.subject);
355

    
356
        this.fetchDataproviders.getResultsBySubjectsForDeposit( (this.subject =="")?"*":this.subject, this.requestFor, this.fetchDataproviders.searchUtils.page, this.fetchDataproviders.searchUtils.size, this.properties);
357
        this.linkToSearchDataproviders = this.properties.searchLinkToDataProviders;
358
    }
359

    
360
    private searchDataproviders() {
361
        // if(this.organization != undefined) {
362
        //     this.fetchDataproviders.getResults(this.organization.name, false, 1, 10);
363
        // } else if(this.organizationId != undefined) {
364
            this.fetchDataproviders.getResultsForDeposit( this.organizationId,this.requestFor, this.fetchDataproviders.searchUtils.page, this.fetchDataproviders.searchUtils.size, this.properties);
365
        //}
366
        this.linkToSearchDataproviders = this.properties.searchLinkToDataProviders;
367
    }
368

    
369
    private getOrganizationInfo ()  {
370
        console.info("inside getOrganizationInfo of component");
371
        this.fetchDataproviders.oldTotalResults = 0;
372
        this.fetchDataproviders.searchUtils.totalResults = 0;
373

    
374
        this._organizationService.getOrganizationNameAndUrlById(this.organizationId,this.properties).subscribe(
375
            data => {
376
                if(data == null) {
377
                  this.status = this.errorCodes.NOT_FOUND;
378
                  this.fetchDataproviders.searchUtils.status = this.errorCodes.NONE;
379
                } else {
380
                  this.organization = data;
381
                  this.status = this.errorCodes.DONE;
382
                  this.searchDataproviders();
383
                }
384
            },
385
            err => {
386
                //console.log(err)
387

    
388
                this.fetchDataproviders.searchUtils.status = this.errorCodes.NONE;
389
                if(err.status == '404') {
390
                  this.status = this.errorCodes.NOT_FOUND;
391
                  console.info("not found");
392
                } else if(err.status == '500') {
393
                  this.status = this.errorCodes.ERROR;
394
                  console.info("error");
395
                } else {
396
                  this.status = this.errorCodes.NOT_AVAILABLE;
397
                  console.info("not available");
398
                }
399
            }
400
        );
401
    }
402

    
403
    public goToDeposit() {
404
        if(this.requestFor == "Publications") {
405
            this._router.navigate( ['participate/deposit-publications'] );
406
        } else if(this.requestFor == "Research Data") {
407
            this._router.navigate( ['participate/deposit-datasets'] );
408
        }
409
    }
410

    
411
    public valueChanged($event){
412
      this.selectedId = $event.value;
413
    }
414

    
415
    public organizationSelected(id: string) {
416
        console.info("organization selected");
417
        if(id && id.length > 0 && id != this.organizationId){
418
            this.organization = null;
419
            this.status = this.errorCodes.LOADING;
420

    
421
            if(this.requestFor == "Publications") {
422
                this._router.navigate( ['participate/deposit-publications-result'], { queryParams: { "organizationId": id } } );
423
            } else if(this.requestFor == "Research Data") {
424
                this._router.navigate( ['participate/deposit-datasets-result'], { queryParams: { "organizationId": id } } );
425
            }
426
        } else {
427
            this.warningMessage = "No new organization selected";
428
        }
429
    }
430

    
431
    private updateDescription(description:string) {
432
        this._meta.updateTag({content:description},"name='description'");
433
        this._meta.updateTag({content:description},"property='og:description'");
434
    }
435
    private updateTitle(title:string){
436
      var _prefix ="OpenAIRE | ";
437
      var _title = _prefix + ((title.length> 50 ) ?title.substring(0,50):title);
438
      this._title.setTitle(_title);
439
      this._meta.updateTag({content:_title},"property='og:title'");
440
    }
441
    private updateUrl(url:string){
442
      this._meta.updateTag({content:url},"property='og:url'");
443
    }
444
}
(4-4/4)