openaire-library/orcid/my-orcid-links/myOrcidLinks.component.ts

import {Component, Input, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Location} from '@angular/common';
import {ErrorCodes} from "../../utils/properties/errorCodes";
import {ErrorMessagesComponent} from "../../utils/errorMessages.component";
import {SearchUtilsClass} from "../../searchPages/searchUtils/searchUtils.class";
import {RouterHelper} from "../../utils/routerHelper.class";
import {EnvProperties} from "../../utils/properties/env-properties";
import {properties} from "../../../../environments/environment";
import {OrcidService} from "../orcid.service";
import {Identifier, StringUtils} from "../../utils/string-utils.class";
import {SearchResearchResultsService} from "../../services/searchResearchResults.service";
import {SearchResult} from "../../utils/entities/searchResult";
import {ResultPreview} from "../../utils/result-preview/result-preview";
import {Meta, Title} from "@angular/platform-browser";
import {UserManagementService} from "../../services/user-management.service";
import {PiwikService} from "../../utils/piwik/piwik.service";
import {IndexInfoService} from "../../utils/indexInfo.service";
import {OpenaireEntities} from "../../utils/properties/searchFields";

declare var UIkit: any;

@Component({
  selector: 'my-orcid-links',
  template: `
    
    <div class="uk-container uk-container-large">
      <div class="uk-margin-medium-bottom">
        <div class="uk-margin-top">
          <div class="uk-grid uk-flex uk-flex-middle">
            <div class="uk-article-title custom-article-title uk-width-auto">
              My ORCID links
            </div>
            <span *ngIf="authorNameParam" class="uk-width-1-1 uk-width-expand@m">
              <a class="uk-button-text uk-align-left uk-align-right@m" [queryParams]="authorNameParam" 
                  [routerLink]="properties.searchLinkToAdvancedResults" routerLinkActive="router-link-active">
                Discover {{openaireEntities.RESULTS | lowercase}} related to you
              </a>
            </span>
          </div>
          
          <div class="uk-margin-top">
            <span>
              Did you link a result with your ORCID <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">
              but the <span class="orcid-color">green icon</span> is missing?
              <br>
              No worries! It will appear, as soon as we synchronize again with ORCID data.
              <span *ngIf="lastOrcidUpdateDate">Latest synchronization was on {{lastOrcidUpdateDate | date}}. </span>
              <a href="https://www.openaire.eu/openaire-explore-integration-with-the-orcid-search-and-link-wizard"
                     target="_blank" class="uk-display-inline-block">
                Read more  <span class="custom-external custom-icon space"></span>
              </a>
            </span>
          </div>
          
          <div *ngIf="showErrorMessage" class="uk-animation-fade uk-alert uk-alert-warning uk-margin-large-top" role="alert">
            An Error Occurred
          </div>
          <div *ngIf="!showLoading && !orcidQuery && !requestGrant && !showErrorMessage" 
                class="uk-animation-fade uk-alert uk-alert-primary uk-margin-large-top" role="alert">
            No ORCID links found
          </div>
          <div *ngIf="requestGrant" class="uk-margin-large-top">
            <div class="uk-text-center uk-padding-small">
              <div>
                This is a private page, only for users that have connected their ORCID iD with OpenAIRE.
                Please grant OpenAIRE to access and update your ORCID works.
              </div>
  
              <div class="uk-margin-medium-top uk-align-center">
                <button (click)="openGrantWindow()" type="submit"
                        class="uk-button uk-padding-small uk-padding-remove-vertical uk-margin-left uk-button-primary">
                  <span>Grant OpenAIRE</span>
                </button>
              </div>
            </div>
          </div>
        </div>
  
        <div *ngIf="orcidQuery" class="tm-middle" id="tm-main">
          <div uk-grid="" class="uk-grid uk-grid-stack">
            <div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first uk-first-column">
              <div class="uk-container uk-container-large">
                <my-orcid-result [previewResults]="currentResults" 
                                 [status]="searchUtils.status" 
                                 [type]="resultType" 
                                 [properties]=properties
                                 [currentPage]="currentPage" 
                                 [totalResults]="totalOrcidResults" 
                                 [resultsPerPage]="resultsPerPage"
                                 (pageChange)="pageChanged($event)">
                </my-orcid-result>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    `,
  styles: ['.orcid-color { color: #a6ce39; }']
})
export class MyOrcidLinksComponent {
  public resultType: string = "result";

  private errorCodes: ErrorCodes;
  private errorMessages: ErrorMessagesComponent;
  @Input() piwikSiteId = null;
  public results =[];
  public currentResults = [];
  public totalResults:number  = 0 ;
  public baseUrl:string;
  public searchUtils:SearchUtilsClass = new SearchUtilsClass();
  public subscriptions: any[] = [];
  public _location:Location;

  public disableForms: boolean = false;
  public loadPaging: boolean = true;
  public oldTotalResults: number = 0;
  pagingLimit = 0;

  properties:EnvProperties;
  public openaireEntities = OpenaireEntities;
  public lastOrcidUpdateDate: string = "";

  @Input() public communityId: string = null;

  public routerHelper:RouterHelper = new RouterHelper();
  parameters = {};
  keyword  = "";

  identifiers: string[] = [];
  works: any[] = [];

  orcidQuery: string = "";
  typeQuery: string = "";

  public showLoading: boolean = true;

  currentPage: number = 1;
  totalOrcidResults: number;
  resultsPerPage: number = 5;

  public requestGrant: boolean = false;
  public window: any;
  private tokenUrl: string;
  private clientId: string = "APP-A5M3KTX6NCN67L91";

  public authorNameParam: any = null;

  public showErrorMessage: boolean = false;

  constructor (private route: ActivatedRoute, private router: Router,
               private _piwikService:PiwikService,
               private _orcidService: OrcidService,
               private indexInfoService: IndexInfoService,
               private _searchResearchResultsService: SearchResearchResultsService,
               private userManagementService: UserManagementService,
               private _meta: Meta, private _title: Title
  ) {
    this.errorCodes = new ErrorCodes();
    this.errorMessages = new ErrorMessagesComponent();
    this.searchUtils.status = this.errorCodes.LOADING;
    this.searchUtils.page =1;

    if(typeof document !== 'undefined') {
      this.tokenUrl = properties.orcidTokenURL
        + "client_id="+properties.orcidClientId
        // + "&response_type=code&scope=/activities/update"
        // + "&response_type=code&scope=/authenticate /activities/update /person/update /read-limited"
        + "&response_type=code&scope=/activities/update /read-limited"
        + "&redirect_uri="+location.origin+"/orcid?source=openaire";

      this.indexInfoService.getLastOrcidUpdateDate(properties).subscribe(
        date => {
          this.lastOrcidUpdateDate = date;
        },
        error => { console.error("Error in fetching last orcid update date ",error); }
      )
    }
  }

  public ngOnInit() {
    this.properties = properties;
    this.baseUrl = this.properties.myOrcidLinksPage;
    this.pagingLimit = this.properties.pagingLimit;
    var description = "Openaire, ORCID linking, publication, research data, software, other research product";
    this.updateTitle("My ORCID Links");
    this.updateDescription(description);
    this.updateUrl( properties.domain + properties.baseLink + this.route.url);

    if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){
      this.subscriptions.push(this._piwikService.trackView(this.properties, "My ORCID links", this.piwikSiteId).subscribe());
    }

    this.typeQuery = "&type=results";
    this.getLocalWorks();
    this.getPersonalDetails();
  }

  public ngOnDestroy() {
    for(let sub of this.subscriptions){
      sub.unsubscribe();
    }
  }

  private getPersonalDetails() {
    //get author name
    this.subscriptions.push(this._orcidService.getPersonalDetails().subscribe(
      details => {
        let author: string = "";

        if(details && details['name']) {
          let name: string = details['name'];
          if(name['given-names'] && name['given-names']['value']) {
            author = name['given-names']['value'];
          }
          if(name['family-name'] && name['family-name']['value']) {
            author += (author ? " " : "") + name['family-name']['value'];
          }
          this.authorNameParam = this.routerHelper.createQueryParams(['f0', 'fv0'], ['resultauthor', author]);
        }
      },
      error => {
        console.error("Error getting personal details", error);
        this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
          if (user) {
            this.authorNameParam = this.routerHelper.createQueryParams(['f0', 'fv0'], ['resultauthor', user.fullname]);
          }
        }));
      }
    ));
  }

  openGrantWindow() {
    this.window = window.open(this.tokenUrl, '_blank',
      'location=yes,height=700,width=540,left=500,top=100,scrollbars=yes,status=yes');

    let self = this;
    window.onmessage = function (ev) {
      if (ev.isTrusted && ev.origin !== location.origin && ev.data !== 'success')
        return;
      self.requestGrant = false;
      UIkit.notification({
        message: 'Thank you for <strong>connecting your ORCID iD</strong> with OpenAIRE!',
        status: 'success',
        timeout: 6000,
        pos: 'bottom-right'
      });
      self.getLocalWorks();
    };
  }

  getLocalWorks() {
    this.showErrorMessage = false;

    this.showLoading = true;
    this.subscriptions.push(this._orcidService.getLocalWorks().subscribe(
      (response: any[]) => {

        this.works = response;//['results'];
        this.totalOrcidResults = this.works.length;//response['total'];

        this.prepareOrcidQuery();
      },
      error => {
        this.handleError(error, "Could not get locally stored user's ORCID works");
        this.showLoading = false;
      }
    ));
  }

  public prepareOrcidQuery() {

    if(this.results.length >= this.currentPage) {
      this.currentResults = this.results[this.currentPage-1];
      return;
    }

    this.showLoading = true;

    this.orcidQuery = "";

    let from: number = (this.currentPage-1)*this.resultsPerPage;
    if(from >= this.works.length) {
      this.searchUtils.status = this.errorCodes.OUT_OF_BOUND;
    }
    let to: number = this.currentPage*this.resultsPerPage;

    if(to > this.works.length) {
      to = this.works.length;
    }

    let works = this.works.slice(from, to);

    for(let work of works) {
      for(let pid of work['pids']) {
        let identifier: Identifier = Identifier.getIdentifierFromString(pid, false);
        this.orcidQuery += (this.orcidQuery ? " or " : "") + ('(pidclassid exact "'+identifier.class+'" and pid="'+StringUtils.URIEncode(identifier.id)+'")');
      }
    }
    this.showLoading = false;
    this._getResults(works);
  }

  public _getResults(works: any) {
    this.searchUtils.status = this.errorCodes.LOADING;
    this.disableForms = true;
    this.currentResults = [];
    this.searchUtils.totalResults = 0;

    // let params: string = this.orcidQuery + this.typeQuery;
    //this.subs.push(this._searchResearchResultsService.advancedSearchResults(this.resultType, parameters, page, size, sortBy, this.properties, (refine) ? this.searchPage.getRefineFieldsQuery() : null, this.searchPage.getFields(), refineFieldsFilterQuery)
    this.subscriptions.push(this._searchResearchResultsService.searchForMyOrcidLinks(this.resultType, this.orcidQuery, this.typeQuery, 1, 50)
    //this.subs.push(this._searchResearchResultsService.advancedSearchResults(this.resultType, parameters, page, size, sortBy, this.properties, null, this.searchPage.getFields(), refineFieldsFilterQuery)
      .subscribe(
        data => {
          let totalResults = data[0];
          let results = data[1];

          this.resultsReturned(results, totalResults, works);
        },
        err => {
          console.error("Error getting " + this.getEntityName(this.resultType, true));
          this.showLoading = false;
          this.searchUtils.status = this.errorMessages.getErrorCode(err.status);
          this.disableForms = false;
        }
      )
    );
  }

  public resultsReturned(results: any, totalResults, works: any[]) {
    this.searchUtils.totalResults = totalResults;

    let resultsFound: Map<string[], number> = new Map<string[], number>();

    for(let work of works) {
      results.forEach(result => {
        let identifierValues: string[] = [].concat(...Array.from(result.identifiers.values()));
        if(work['pids'].some(pid => identifierValues.includes(pid))) {

          let index: number = resultsFound.get(identifierValues);
          if(!index) {
            this.currentResults.push(this.getResultPreview(result));
            index = this.currentResults.length - 1;

            this.currentResults[index].orcidPutCodes = [];
            this.currentResults[index].orcidCreationDates = [];
            this.currentResults[index].orcidUpdateDates = [];
          }

          if (work['putCode']) {
            this.currentResults[index].orcidPutCodes.push(work['putCode']);
          }
          if (work['creationDate']) {
            this.currentResults[index].orcidCreationDates.push(work['creationDate']);
          }
          if (work['updateDate']) {
            this.currentResults[index].orcidUpdateDates.push(work['updateDate']);
          }
        }
      })
    }

    this.results[this.currentPage-1] = this.currentResults;

    this.searchUtils.status = this.errorCodes.DONE;
    if (this.searchUtils.totalResults == 0) {
      this.searchUtils.status = this.errorCodes.NONE;
    }

    this.disableForms = false;
  }

  public resultsReturned2(results: any, totalResults, works: any[]) {
    this.searchUtils.totalResults = totalResults;

    for(let result of results) {
      let identifierValues: string[] = [].concat(...Array.from(result.identifiers.values()));

      this.currentResults.push(this.getResultPreview(result));

      let filteredWorks = works.filter(work => {
        return work['pids'].some(pid => identifierValues.includes(pid));
      })

      this.currentResults[this.currentResults.length - 1].orcidPutCodes = [];
      this.currentResults[this.currentResults.length - 1].orcidCreationDates = [];
      this.currentResults[this.currentResults.length - 1].orcidUpdateDates = [];

      filteredWorks.forEach(work => {
        if(work['putCode']) {
          this.currentResults[this.currentResults.length - 1].orcidPutCodes.push(work['putCode']);
        }
        if(work['creationDate']) {
          this.currentResults[this.currentResults.length - 1].orcidCreationDates.push(work['creationDate']);
        }
        if(work['updateDate']) {
          this.currentResults[this.currentResults.length - 1].orcidUpdateDates.push(work['updateDate']);
        }
      });
    }

    this.results[this.currentPage-1] = this.currentResults;
    this.searchUtils.status = this.errorCodes.DONE;
    if (this.searchUtils.totalResults == 0) {
      this.searchUtils.status = this.errorCodes.NONE;
    }

    this.disableForms = false;
  }

  public getResultPreview(result: SearchResult): ResultPreview {
    return ResultPreview.searchResultConvert(result, (result.entityType)?result.entityType:this.resultType);
  }

  public getEntityName(entityType: string, plural: boolean): string {
    return StringUtils.getEntityName(entityType, plural);
  }

  public pageChanged($event) {
    this.currentPage = $event.value;
    this.prepareOrcidQuery();
  }

  handleError(error, errorMsg: string) {
    if(error && (error.status == "401" || error.status == "403")) {
      this.requestGrant = true;
    } else {
      this.showErrorMessage = true;
    }
    this.showLoading = false;
  }

  private updateTitle(title: string) {
    this._title.setTitle(title);
    this._meta.updateTag({content: title}, "property='og:title'");
  }

  private updateDescription(description: string) {
    this._meta.updateTag({content: description}, "name='description'");
    this._meta.updateTag({content: description}, "property='og:description'");
  }

  private updateUrl(url: string) {
    this._meta.updateTag({content: url}, "property='og:url'");
  }
}