openaire-library/orcid/orcid-work.component.ts

import {Component, Input, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router";
import {Subscriber, Subscription} from "rxjs";
import {OrcidService} from "./orcid.service";
import {ResultLandingInfo} from "../utils/entities/resultLandingInfo";
import {ResultLandingService} from "../landingPages/result/resultLanding.service";
import {properties} from "../../../environments/environment";
import {Session} from "../login/utils/helper.class";
import {LoginErrorCodes} from "../login/utils/guardHelper.class";
import {ExternalIDV3_0, WorkV3_0} from "./orcidWork";
import {EnvProperties} from "../utils/properties/env-properties";

declare var UIkit: any;

@Component({
  styles: [
    '.add-orcid-button { background-color: #a6ce39; color: #fff; border: 1px solid #a6ce39; } ' +
    '.add-orcid-button:hover { background-color: #b6d65c; border-color: #b6d65c; } ' +
    '.delete-orcid-button { background-color: #fff; color: #ff3d33; border: 1px solid #ff3d33 }' +
    '.delete-orcid-button:hover { color: #ff0d00; border-color: #ff0d00; } ' +
    ' a:not(:hover) .orcid-color { color: #a6ce39; }' +

    '.loading-action-button { width: 36px; height: 36px; }' +

    '.orcid-button { background-color: #fff; border: 1px solid #a6ce39; } ' +
    '.orcid-button:hover { background-color: #e0f0d5; } ' +

    'a.orcid_icon_opacity:hover > .uk-icon { opacity: 0.8; } '
  ],
  selector: 'orcid-work',
  template: `
    <ng-container *ngIf="pageType == 'search'">
      <span *ngIf="!putCodes || putCodes.length == 0"
            [attr.uk-tooltip]="(!isLoggedIn) 
                      ? 'Only logged in users can add or delete a work from their ORCID record '
                    : ('Add this work to your ORCID record' + 
                        ((properties.environment == 'beta') ? '. The action will affect your real ORCID iD.' : ''))"
            class="uk-align-right uk-margin-remove-bottom">

      <a (click)="currentAction='add'; saveWorkPreparation();"
           [class]="'uk-flex uk-flex-middle uk-flex-right uk-margin-right '+ ((showLoading || !isLoggedIn) ? 'uk-disabled ' : '') + (!isLoggedIn ? 'half-opacity' : '')">
          <icon *ngIf="!showLoading" name="add" ratio="1"></icon>
          <span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
          <span class="uk-margin-small-left uk-flex uk-flex-middle">Add to&#160;
            <span class="orcid-color uk-flex uk-flex-middle">
              <span>ORCID&#160;</span>
              <img  class="" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid"  style="width:16px; height:16px" loading="lazy">{{" "}}
            </span>
          </span>
        </a>
      </span>

      <span *ngIf="putCodes && putCodes.length > 0"
            [attr.uk-tooltip]="(!isLoggedIn) 
                      ? 'Only logged in users can add or delete a work from their ORCID record '
                    : ('Delete this work from your ORCID record' + 
                        ((properties.environment == 'beta') ? '. The action will affect your real ORCID iD.' : ''))"
            class="uk-align-right uk-margin-remove-bottom">
        <a (click)="currentAction='delete'; deleteWorks();"
            [class]="'uk-flex uk-flex-middle uk-flex-right uk-margin-right '+ (showLoading ? 'uk-disabled' : '')">
          <icon *ngIf="!showLoading" name="remove" ratio="0.8"></icon>
          <span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
          <span class="uk-margin-small-left uk-flex uk-flex-middle">Delete from&#160;
            <span class="orcid-color space uk-flex uk-flex-middle">
              <span>ORCID&#160;</span>
              <img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">{{" "}}
            </span>
          </span>
        </a>
      </span>
    </ng-container>

    <ng-container *ngIf="pageType == 'landing'">
      <span *ngIf="!putCodes || putCodes.length == 0"
            [attr.uk-tooltip]="(!pids || !isLoggedIn) 
                      ? (!pids?'Only resources with a PID (persistent identifier) like DOI, handle, PMID can be added or deleted from your ORCID record'
                      : 'Only logged in users can add or delete a work from their ORCID record ')
                    : ('Add this work to your ORCID record' + ((properties.environment == 'beta') ? '. The action will affect your real ORCID iD.' : ''))"
            [class]="(!pids || !isLoggedIn) ? 'half-opacity' : ''">
        <a (click)="currentAction='add'; saveWorkPreparation();"
           [class]="'orcid_icon_opacity uk-link-text uk-text-bold uk-text-uppercase '+ (showLoading ? 'uk-disabled' : '') + (!isLoggedIn || !pids ? 'uk-disabled uk-text-muted' : '')">
          <span *ngIf="!showLoading" class="uk-icon">
            <img src="assets/common-assets/common/orcid_add.svg" style="width: 42px; height: 42px" loading="lazy" alt="add orcid">
          </span>
          <span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
            [top_margin]="false"></loading></span>
          <span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Add to&#160;
            <span class="orcid-color">
              ORCID
            </span>
          </span>
        </a>
      </span>

      <span *ngIf="putCodes && putCodes.length > 0"
            [attr.uk-tooltip]="(!pids || !isLoggedIn) 
                    ? (!pids?'Only resources with a PID (persistent identifier) like DOI, handle, PMID can be added or deleted from your ORCID record'
                    : 'Only logged in users can add or delete a work from their ORCID record ')
                  : ('Delete this work from your ORCID record' + ((properties.environment == 'beta') ? '. The action will affect your real ORCID iD.' : ''))"
            [class]="(!pids || !isLoggedIn) ? 'half-opacity' : ''">
      <a (click)="currentAction='delete'; deleteWorks();"
         [class]="'orcid_icon_opacity uk-link-text uk-text-bold uk-text-uppercase '+ (showLoading ? 'uk-disabled' : '') + (!isLoggedIn || !pids ? 'uk-disabled uk-text-muted' : '')">
        <span *ngIf="!showLoading" class="uk-icon uk-preserve">
          <img src="assets/common-assets/common/orcid_bin.svg" style="width: 42px; height: 42px" loading="lazy">
        </span>
        <span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
          [top_margin]="false"></loading></span>
        <span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Delete from&#160;
            <span class="orcid-color">
              ORCID
            </span>
          </span>
      </a>
    </span>
    </ng-container>

    <modal-alert #grantModal [classTitle]="'landing-modal-header uk-padding-small'"
                 [classBody]="'landing-modal uk-padding-remove'">
      <div class="uk-text-center uk-padding-small">
        <div>{{requestGrantMessage}}</div>

        <div class="uk-margin-medium-top uk-align-right">
          <button (click)="closeGrantModal()" type="submit"
                  class="uk-button uk-padding-small uk-padding-remove-vertical uk-button-default">
            <span>Cancel</span>
          </button>

          <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>

<!--          <button (click)="openGrantWindow()" type="submit"-->
<!--                  class="uk-button uk-padding-small uk-padding-remove-vertical uk-margin-left orcid-button">-->
<!--            <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}}-->
<!--            <span>Create or Connect your ORCID iD</span>-->
<!--          </button>-->
        </div>
      </div>
    </modal-alert>


    <ng-container *ngIf="pageType == 'my_search'">
      <span class="uk-margin-bottom uk-flex uk-flex-middle uk-flex-center">
        <span>ORCID&#160;</span>
        <img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">
        <span class="space">&#160;ACTIONS</span>
      </span>
      
      <span [attr.uk-tooltip]="(!putCodes || putCodes.length == 0) 
                      ? 'This work is currently deleted.'
                    : 'View this work from your ORCID record'">
        <a (click)="currentAction='get'; getOrcidWorks()"
           [class]="'uk-button action uk-flex uk-flex-middle '+ ((showLoading || !putCodes || putCodes.length == 0) ? 'uk-disabled' : '')">
          <icon *ngIf="!showLoading || currentAction!='get'" name="preview" ratio="1"></icon>
          
          <span *ngIf="showLoading && currentAction=='get'" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
          <span class="uk-margin-small-left">View ORCID work</span>
        </a>
      </span>

      <span [attr.uk-tooltip]="(!putCodes || putCodes.length == 0) 
                      ? 'This work is currently deleted.'
                    : ('Update this work to your ORCID record' + ((properties.environment == 'beta') ? '. The action will affect your real ORCID iD.' : '') 
                    + showUpdateDatesInTooltip())">
        <a (click)="currentAction='update'; updateWorkPreparation()"
           [class]="'uk-button action uk-margin-top uk-flex uk-flex-middle '+ ((showLoading || !putCodes || putCodes.length == 0) ? 'uk-disabled' : '')">
          <icon *ngIf="!showLoading || currentAction!='update'" name="refresh" ratio="1"></icon>
          <span *ngIf="showLoading && currentAction=='update'" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
          <span class="uk-margin-small-left">Update ORCID work</span>
        </a>
      </span>

      <span *ngIf="!putCodes || putCodes.length == 0"
            [attr.uk-tooltip]="'Add this work to your ORCID record' + ((properties.environment == 'beta') ? '. The action will affect your real ORCID iD.' : '')">
        <a (click)="currentAction='add'; saveWorkPreparation();"
           [class]="'uk-button action uk-margin-top uk-flex uk-flex-middle '+ (showLoading ? 'uk-disabled' : '')">
          <icon *ngIf="!showLoading || currentAction!='add'" name="add" ratio="1"></icon>
          <span *ngIf="showLoading && currentAction=='add'" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
          <span class="uk-margin-small-left">Add to ORCID</span>
        </a>
      </span>

      <span *ngIf="putCodes && putCodes.length > 0"
            [attr.uk-tooltip]="'Delete this work from your ORCID record' + ((properties.environment == 'beta') ? '. The action will affect your real ORCID iD.' : '')">
        <a (click)="currentAction='delete'; deleteWorks();"
           [class]="'uk-button action uk-margin-top uk-flex uk-flex-middle '+ (showLoading ? 'uk-disabled' : '')">
          <icon *ngIf="!showLoading || currentAction!='delete'" name="remove" ratio="1"></icon>
          <span *ngIf="showLoading && currentAction=='delete'" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
          <span class="uk-margin-small-left">Delete from ORCID</span>
        </a>
      </span>
    </ng-container>

    <modal-alert #workModal [classTitle]="'landing-modal-header uk-padding-small'"
                 [classBody]="'landing-modal uk-padding-remove'">
      <div *ngIf="orcidWorks" class="uk-padding-small">
        <div *ngFor="let work of orcidWorks['bulk']">
          <ng-container *ngTemplateOutlet="orcidWorkPreview; context:{work: work['work']}"></ng-container>
        </div>
      </div>
    </modal-alert>

    <ng-template #orcidWorkPreview let-work="work">
      <div class="uk-card uk-card-default uk-padding uk-card-hover">
        <div>{{work.title?.title?.value}}</div>
        <div>{{work.title?.subtitle?.value}}</div>
  
        <div class="uk-text-uppercase">{{work['journal-title']?.value}}</div>
        
        <div *ngIf="work['publication-date'] || work['type']" class="uk-text-small uk-margin-small-bottom">
          <span *ngIf="work['publication-date']">
            <span *ngIf="work['publication-date']['year'] && work['publication-date']['year'].value">
              {{work['publication-date']?.year?.value}}
            </span>
            <span *ngIf="work['publication-date']['year'] && work['publication-date']['year'].value
                          && (
              (work['publication-date']['month'] && work['publication-date']['month'].value) || (work['publication-date']['day'] && work['publication-date']['day'].value))">
              -
            </span>
            <span *ngIf="work['publication-date']['month'] && work['publication-date']['month'].value">
              {{work['publication-date']?.month?.value}}
            </span>
            <span *ngIf="work['publication-date']['month'] && work['publication-date']['month'].value
                          && (work['publication-date']['day'] && work['publication-date']['day'].value) ">
              -
            </span>
            <span *ngIf="work['publication-date']['day'] && work['publication-date']['day'].value">
              {{work['publication-date']?.day?.value}}
            </span>
            
            <span *ngIf="work['type']"> | </span>
          </span>

          <span>{{work['type']}}</span>
        </div>

        <!-- Description -->
        <div *ngIf="work['short-description']" class="uk-margin-small-bottom multi-line-ellipsis lines-3">
          <p class="uk-text-muted uk-text-small">
            {{work['short-description']}}
          </p>
        </div>
        
        <div *ngIf="work['external-ids'] && work['external-ids']['external-id']" class="uk-margin-small-bottom">
          <showIdentifiers [identifiers]="parseIdentifiers(work['external-ids']['external-id'])"></showIdentifiers>
        </div>
        
        <div *ngIf="work['contributors'] && work['contributors']['contributor']">
          <div *ngFor="let contributor of work['contributors']['contributor']">
            <span *ngIf="contributor['credit-name'] && contributor['credit-name'].value">
              {{contributor['credit-name']?.value}}
            </span>
            <span *ngIf="(contributor['credit-name'] && contributor['credit-name'].value) && (
                  (contributor['contributor-attributes'] && contributor['contributor-attributes']['contributor-role'])
                  ||
                  (contributor['contributor-attributes'] && contributor['contributor-attributes']['contributor-sequence'])
                  || 
                  (contributor['contributor-orcid'] && contributor['contributor-orcid']['path'])
            )">
              (
            </span>
            <span *ngIf="contributor['contributor-attributes'] && contributor['contributor-attributes']['contributor-role']">
              {{contributor['contributor-attributes']['contributor-role']}}
            </span>
            <span *ngIf="(contributor['contributor-attributes'] && contributor['contributor-attributes']['contributor-role']) 
                        && (contributor['contributor-attributes']['contributor-sequence'] || (contributor['contributor-orcid'] && contributor['contributor-orcid']['path']))">
              ,
            </span>
            <span *ngIf="contributor['contributor-attributes'] && contributor['contributor-attributes']['contributor-sequence']">
              {{contributor['contributor-attributes']['contributor-sequence']}}
            </span>
            <span *ngIf="contributor['contributor-attributes'] && contributor['contributor-attributes']['contributor-sequence'] 
                        && contributor['contributor-orcid'] && contributor['contributor-orcid']['path']">
              , 
            </span>
            <span *ngIf="contributor['contributor-orcid'] && contributor['contributor-orcid']['path']">
              {{contributor['contributor-orcid']?.path}}
            </span>
            <span *ngIf="(contributor['credit-name'] && contributor['credit-name'].value) && (
                  (contributor['contributor-attributes'] && contributor['contributor-attributes']['contributor-role'])
            ||
            (contributor['contributor-attributes'] && contributor['contributor-attributes']['contributor-sequence'])
            ||
            (contributor['contributor-orcid'] && contributor['contributor-orcid']['path'])
            )">
            )
            </span>
          </div>
        </div>
      </div>
    </ng-template>

    <modal-alert #propagationModal [classTitle]="'landing-modal-header uk-padding-small'"
                 [classBody]="'landing-modal uk-padding-remove'">
      <div class="uk-padding-small">
        <div>
          This research outcome is the result of <span class="uk-text-bold"> merged  research outcomes in OpenAIRE</span>. 
          <br><br>
          You have already added <span class="uk-text-bold">{{this.putCodes?.length}} works</span> in your ORCID record related to the merged research outcome.
          <div *ngIf="currentAction == 'delete'">
            If you continue with delete action, <span class="uk-text-bold">all these works will be deleted</span>.
          </div>
          <div *ngIf="currentAction == 'update'">
            If you continue with update action, <span class="uk-text-bold">all these works will be deleted and a new merged work will be added</span> instead.
          </div>
        </div>

        <div class="uk-margin-medium-top uk-align-right">
          <button (click)="closePropagationModal()" type="submit"
                  class="uk-button uk-padding-small uk-padding-remove-vertical uk-button-default">
            <span>Cancel</span>
          </button>

          <button (click)="confirmedPropagation()" type="submit"
                  class="uk-button uk-padding-small uk-padding-remove-vertical uk-margin-left uk-button-primary">
            <span>Continue</span>
          </button>
        </div>
      </div>
    </modal-alert>
  `
})

export class OrcidWorkComponent {
  @Input() resultId: string = "";
  @Input() resultTitle: string = "";
  @Input() resultLandingInfo: ResultLandingInfo;
  @Input() pids: string = "";
  @Input() identifiers: Map<string, string[]>;
  @Input() type: string;
  @Input() putCodes: string[] = [];
  @Input() creationDates: string[] = [];
  @Input() updateDates: string[] = [];
  @Input() givenPutCode: boolean = false;
  @Input() pageType: string = "search";

  public subscriptions: Subscription[] = [];
  @ViewChild('workModal') workModal;
  @ViewChild('saveWorkModal') saveWorkModal;
  @ViewChild('grantModal') grantModal;
  @ViewChild('messageModal') messageModal;
  @ViewChild('propagationModal') propagationModal;

  public requestGrant: boolean = false;
  public requestGrantMessage: string = "Please grant OpenAIRE to access and update your ORCID works.";
  private tokenUrl: string;
  public message: string = "";
  public showLoading: boolean = false;

  public works: any[] = [];
  public orcidWorks: any[] = [];
  public window: any;

  public isLoggedIn: boolean = Session.isLoggedIn();

  public currentAction: string = "";

  public properties: EnvProperties = properties;

  constructor(private route: ActivatedRoute,
              private _router: Router,
              private orcidService: OrcidService,
              private resultLandingService: ResultLandingService) {
    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";
    }
  }

  ngOnInit() {
    if(!this.givenPutCode && this.isLoggedIn) {
      this.getPutCode();
    }
  }

  ngOnDestroy() {
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscriber) {
        // console.debug("subscription closing...");
        subscription.unsubscribe();
      }
    });
  }

  public showUpdateDatesInTooltip() {
    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    let response: string = "";
    if(this.updateDates != null && this.updateDates.length > 0) {
      response += "<br><br> Last update in ORCID<br>";
      for(let i=0; i<this.updateDates.length; i++) {
        let date: Date = new Date(this.updateDates[i]);
        response += "<span>"+date.getDate() + " " + monthNames[date.getMonth()] + " " + date.getFullYear();
        if(i < this.updateDates.length - 1) {
          response += "& ";
        }
        response += "</span>";
      }
    }
    return response;
  }

  public parseIdentifiers(identifiers: ExternalIDV3_0[]): Map<string, string[]> {
    let identifiersMap: Map<string, string[]> = new Map<string, string[]>();
    for(let identifier of identifiers) {
      if(!identifiersMap.has(identifier['external-id-type'])) {
        identifiersMap.set(identifier['external-id-type'], new Array<string>());
      }
      identifiersMap.get(identifier['external-id-type']).push(identifier['external-id-value']);
    }
    return identifiersMap;
  }

  openGrantWindow() {
    if(!Session.isLoggedIn()){
      //this.userValidMessage = "User session has expired. Please login again.";
      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
    } else {
      // this.tokenUrl = location.origin+"/orcid";
      this.window = window.open(this.tokenUrl, '_blank',
        'location=yes,height=700,width=540,left=500,top=100,scrollbars=yes,status=yes');
      // this.requestGrant = false;
      this.closeGrantModal();

      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'
        });
        if (self.currentAction == "add") {
          self.saveWorkPreparation();
        } else if (self.currentAction == "delete") {
          self.deleteWorks();
        } else if(self.currentAction == "update") {
          self.updateWorkPreparation();
        }
      };
    }
  }

  private getPutCode() {
    this.subscriptions.push(this.orcidService.getPutCode(this.pids).subscribe(
      putCodes => {
        this.putCodes = putCodes;
      }, error => {

      }
    ))
  }

  private getResultLandingInfo(action: string) {
    this.subscriptions.push(this.resultLandingService.getResultLandingInfo(this.resultId, null, this.type, null, properties).subscribe(
      resultLandingInfo => {
        this.resultLandingInfo = resultLandingInfo;
        if (this.resultLandingInfo && this.resultLandingInfo.identifiers) {
          let pidsArray: string[] = [];
          for (let key of Array.from(this.resultLandingInfo.identifiers.keys())) {
            pidsArray = pidsArray.concat(this.resultLandingInfo.identifiers.get(key));
          }
          this.pids = pidsArray.join();
        }
        if(action == "save") {
          this.saveWork();
        } else if (action == "update") {
          this.updateWork();
        }
      },
      error => {
        this.handleError(error);
        console.error("Error getting landing info: ", error);
      }
    ))
  }

  private saveWorkPreparation() {
    if(!Session.isLoggedIn()){
      //this.userValidMessage = "User session has expired. Please login again.";
      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
    } else {

      if (this.requestGrant) {
        this.openGrantModal("Add, delete or edit work in your ORCID record");
      } else {
        this.showLoading = true;

        if (this.resultLandingInfo) {
          this.saveWork();
        } else {
          this.getResultLandingInfo("save");
        }
      }
    }
  }

  private saveWork() {
    this.subscriptions.push(this.orcidService.saveWork(this.resultLandingInfo, this.pids).subscribe(
      response => {

        // for testing only
        // this.openGrantModal("Add work in your ORCID record");
        // this.requestGrant = true;
        // this.requestGrantMessage = "Please grant OpenAIRE to access and update your ORCID record and works.";

        if(response == null) {
          this.handleError(null);
          console.error("Error posting landing info: null");
        } else {
          this.putCodes.push(""+response['put-code']);
          this.creationDates.push(response['created-date']['value']);
          this.updateDates.push(response['last-modified-date']['value']);

          // this.closeGrantModal();
          // this.message = "You have successfully added work with pids: "+this.pids+" in your ORCID record!";
          this.message = "You have successfully added work \""+this.resultTitle+"\" in your ORCID record!";
          // this.openMessageModal("Work added successfully");

          // message: 'You have <strong>successfully added</strong> work with pids: <strong>'+this.pids+'</strong> in your ORCID record!',
          UIkit.notification({
            message: 'You have <strong>successfully added</strong> work "<strong>'+this.resultTitle+'</strong>" in your ORCID record!'
              // +
              // '<br><br><a class="uk-link" [href]="goToOrcidLinksPage()">Manager your ORCID links</a>'
            ,
              // '<br><br><a class="uk-link" (click)="goToOrcidLinksPage()">Manager your ORCID links</a>',
              // '<br><br><a class="uk-link" routerLinkActive="router-link-active" [routerLink]="myOrcidLinksPage">Manager your ORCID links</a>',
            status: 'success',
            timeout: 6000,
            pos: 'bottom-right'
          });

          this.showLoading = false;
        }
      },
      error => {
        this.handleError(error);
        console.error("Error posting landing info", error);
      }
    ));
  }

  goToOrcidLinksPage() {
    this._router.navigate([this.properties.myOrcidLinksPage]);
  }

  private updateWorkPreparation() {
    if(!Session.isLoggedIn()){
      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
    } else {

      if (this.requestGrant) {
        this.openGrantModal("Add, delete or edit work in your ORCID record");
      } else if(this.putCodes.length > 1) {
        this.openPropagationModal("Update ORCID work");
      } else {
        this.showLoading = true;

        if (this.resultLandingInfo) {
          this.updateWork();
        } else {
          this.getResultLandingInfo("update");
        }
      }
    }
  }

  private updateWork() {
    this.subscriptions.push(this.orcidService.updateWork(this.resultLandingInfo, this.pids, this.putCodes[0]).subscribe(
      response => {
        if(response) {
          this.updateDates[0] = response['last-modified-date'].value;

          // message: 'You have <strong>successfully updated</strong> work with pids: <strong>' + this.pids + '</strong> in your ORCID record!',
          UIkit.notification({
            message: 'You have <strong>successfully updated</strong> work "<strong>' + this.resultTitle + '</strong>" in your ORCID record!'
              // +
              // '<br><br><a routerLinkActive="router-link-active" [routerLink]="myOrcidLinksPage">Manager your ORCID links</a>'
            ,
            status: 'success',
            timeout: 6000,
            pos: 'bottom-right'
          });
        }
        this.showLoading = false;
      },
      error => {
        this.handleError(error);
        console.error("Error updating landing info", error);
      }
    ));
  }

  public confirmedPropagation() {
    this.propagationModal.cancel();

    this.deleteWorks(true);
    //}
    // if(this.currentAction == "update") {
    //   this.saveWork();
    // }
  }

  private getOrcidWorks() {
    if(!Session.isLoggedIn()){
      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
    } else {
      this.showLoading = true;
      this.subscriptions.push(this.orcidService.getOrcidWorks(this.putCodes).subscribe(
        (response: WorkV3_0[]) => {
          this.orcidWorks = response;

          this.openWorkModal();
          this.showLoading = false;
        },
        error => {
          this.handleError(error);
          console.error("Error getting work", error);
        }
      ));
    }
  }


  private deleteWorks(confirmed: boolean = false) {
    if(!Session.isLoggedIn()){
      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
    } else {

      if (this.requestGrant) {
        this.openGrantModal("Add, delete or edit work in your ORCID record");
      } else if(this.putCodes.length > 1 && !confirmed) {
        this.openPropagationModal("Delete ORCID work");
      } else {
        this.showLoading = true;

        if (!this.resultLandingInfo && this.identifiers) {
          let pidsArray: string[] = [];
          for (let key of Array.from(this.identifiers.keys())) {
            pidsArray = pidsArray.concat(this.identifiers.get(key));
          }
          this.pids = pidsArray.join();
        }

        this.subscriptions.push(this.orcidService.deleteWorks(this.putCodes).subscribe(
          deletedPutCodes => {
            let deletedAll: boolean = true;

            if (deletedPutCodes) {
              for (let i = 0; i < deletedPutCodes.length; i++) {
                let deletedPutCode = deletedPutCodes[i];
                if (deletedPutCode == null) {
                  deletedAll = false;
                } else {
                  this.putCodes.splice(i, 1);
                  this.creationDates.splice(i, 1);
                  this.updateDates.splice(i, 1);
                  // this.works.splice(i, 1);
                }
              }
            } else {
              deletedAll = false;
            }

            if (!deletedAll) {
              this.handleError(null);
              console.error("Error deleting landing info: null");
            } else {
              if(this.currentAction == "update") {
                this.saveWork();
              } else {
                // this.closeGrantModal();
                // this.message = "You have successfully deleted work with pids: " + this.pids + " from your ORCID record!";
                this.message = "You have successfully deleted work \"" + this.resultTitle + "\" from your ORCID record!";
                // this.openMessageModal("Work deleted successfully");

                // message: 'You have <strong>successfully deleted</strong> work with pids: <strong>' + this.pids + '</strong> from your ORCID record!',
                UIkit.notification({
                  message: 'You have <strong>successfully deleted</strong> work "<strong>' + this.resultTitle + '</strong>" from your ORCID record!'
                    // +
                    // '<br><br><a routerLinkActive="router-link-active" [routerLink]="myOrcidLinksPage">Manager your ORCID links</a>'
                  ,
                  status: 'success',
                  timeout: 6000,
                  pos: 'bottom-right'
                });
                this.showLoading = false;
              }
            }
          },
          error => {
            this.handleError(error);
            console.error("Error deleting work", error);
          }
        ));
      }
    }
  }

  openGrantModal(title: string) {
    this.grantModal.cancelButton = false;
    this.grantModal.okButton = false;
    this.grantModal.alertTitle = title;
    this.grantModal.open();
  }

  closeGrantModal() {
    this.grantModal.cancel();
  }

  openWorkModal() {
    this.workModal.cancelButton = false;
    this.workModal.okButton = false;
    this.workModal.alertTitle = "Work in your ORCID record";
    this.workModal.open();
  }

  closeWorkModal() {
    this.workModal.cancel();
  }

  openMessageModal(title: string) {
    this.messageModal.cancelButton = false;
    this.messageModal.okButton = false;
    this.messageModal.alertTitle = title;
    this.messageModal.open();
  }

  closeMessageModal() {
    this.messageModal.cancel();
  }

  openPropagationModal(title: string) {
    this.propagationModal.cancelButton = false;
    this.propagationModal.okButton = false;
    this.propagationModal.alertTitle = title;
    this.propagationModal.open();
  }

  closePropagationModal() {
    this.propagationModal.cancel();
  }

  handleError(error) {
    if(error && error.status == "401") {
      this.openGrantModal("Add, delete or edit work in your ORCID record");
      this.requestGrant = true;
      this.requestGrantMessage = "Please grant OpenAIRE to access and update your ORCID record and works. ";
        // + "If you have already granted OpenAIRE, you just need to login again to ORCID!";
    } else if(error && error.status == "403") {
      this.openGrantModal("Add, delete or edit work in your ORCID record");
      this.requestGrant = true;
      this.requestGrantMessage = "Please login again to ORCID."
      // this.openGrantModal();
    } else {
      this.message = "";
      if(error && error.status == "409") {
        this.message = "There is <span class='uk-text-bold'>already a work in your ORCID record</span> with the same information of the work you are trying to add now. <br><br>";
      }
      if(this.currentAction == "get") {
        // this.message += "There was an <span class='uk-text-bold'>error getting</span> work with pids: <span class='uk-text-bold'>" + this.pids + "</span> from your ORCID record. <br> Please try again later.";
        this.message += "There was an <span class='uk-text-bold'>error getting</span> work \"<span class='uk-text-bold'>" + this.resultTitle + "</span>\" from your ORCID record. <br> Please try again later.";
      } else if(this.currentAction == "add") {
        // this.message += "There was an <span class='uk-text-bold'>error adding</span> work with pids: <span class='uk-text-bold'>"+this.pids+"</span> to your ORCID record. <br> Please try again later.";
        this.message += "There was an <span class='uk-text-bold'>error adding</span> work with pids: \"<span class='uk-text-bold'>"+this.resultTitle+"</span>\" to your ORCID record. <br> Please try again later.";
      } else if(this.currentAction == "update") {
        // this.message += "There was an <span class='uk-text-bold'>error updating</span> work with pids: <span class='uk-text-bold'>"+this.pids+"</span> to your ORCID record. <br> Please try again later.";
        this.message += "There was an <span class='uk-text-bold'>error updating</span> work with pids: \"<span class='uk-text-bold'>"+this.resultTitle+"</span>\" to your ORCID record. <br> Please try again later.";
      } else if(this.currentAction == "delete") {
        // this.message += "There was an <span class='uk-text-bold'>error deleting</span> work with pids: <span class='uk-text-bold'>"+this.pids+"</span> from your ORCID record. <br> Please try again later.";
        this.message += "There was an <span class='uk-text-bold'>error deleting</span> work with pids: \"<span class='uk-text-bold'>"+this.resultTitle+"</span>\" from your ORCID record. <br> Please try again later.";
      } else {
        this.message += "There was an error. Please try again later."
      }

      UIkit.notification({
        message: this.message,
        status: 'danger',
        timeout: 6000,
        pos: 'bottom-right'
      });
      // this.openMessageModal("An error occured");
    }
    this.showLoading = false;
  }
}