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

506 lines
20 KiB
TypeScript

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";
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; } ' +
'.remove-orcid-button { background-color: #fff; color: #ff3d33; border: 1px solid #ff3d33 }' +
'.remove-orcid-button:hover { color: #ff0d00; border-color: #ff0d00; } ' +
' a:not(:hover) .orcid-color { color: #a6ce39; }'
],
selector: 'orcid-work',
template: `
<!-- <div *ngIf="putCodes">YES</div>-->
<!-- <div *ngIf="!putCodes">NO</div>-->
<!-- <a *ngIf="!putCodes || putCodes.length == 0" (click)="openWorkModal('Add work in your ORCID record')">-->
<!-- <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}}-->
<!-- <span>Add to ORCID</span>-->
<!-- </a>-->
<ng-container *ngIf="pageType == 'search'">
<a *ngIf="!putCodes || putCodes.length == 0"
(click)="saveWorkPreparation();" title="Add this work to your ORCID record"
[class]="'uk-margin-right uk-flex uk-flex-middle '+ (showLoading ? 'uk-disabled' : '')">
<svg *ngIf="!showLoading" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="plus">
<rect x="7" y="1" width="1" height="13" fill="#A6CE39"></rect>
<rect x="1" y="7" width="13" height="1" fill="#A6CE39"></rect>
</svg>
<span *ngIf="showLoading" class="uk-icon icon-button"><loading></loading></span>
<span class="uk-margin-small-left">Add to <span class="orcid-color">ORCID</span></span>
</a>
<!--(click)="openWorkModal('Work is in your ORCID record')"-->
<a *ngIf="putCodes && putCodes.length > 0"
(click)="deleteWorks();" title="Remove this work from your ORCID record"
[class]="'uk-margin-right uk-flex uk-flex-middle '+ (showLoading ? 'uk-disabled' : '')">
<!-- <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}}-->
<svg *ngIf="!showLoading" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="minus">
<rect height="1" width="13" y="7" x="1" fill="#FF3D33"></rect>
</svg>
<span *ngIf="showLoading" class="uk-icon icon-button"><loading></loading></span>
<span class="uk-margin-small-left">Remove from <span class="orcid-color">ORCID</span></span>
</a>
</ng-container>
<ng-container *ngIf="pageType == 'landing'">
<a *ngIf="!putCodes || putCodes.length == 0"
(click)="saveWorkPreparation();" title="Add this work to your ORCID record"
[class]="'uk-link-text uk-text-bold uk-text-uppercase '+ (showLoading ? 'uk-disabled' : '')">
<span *ngIf="!showLoading" class="uk-icon-button add-orcid-button uk-icon">
<svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" data-svg="plus">
<rect x="7.5" y="1" width="1" height="15" fill="#A6CE39"></rect>
<rect x="1" y="7.5" width="15" height="1" fill="#A6CE39"></rect>
</svg>
</span>
<span *ngIf="showLoading" class="uk-icon icon-button"><loading></loading></span>
<span class="uk-margin-small-left">Add to <span class="orcid-color">ORCID</span></span>
</a>
<a *ngIf="putCodes && putCodes.length > 0"
(click)="deleteWorks();" title="Remove this work from your ORCID record"
[class]="'uk-link-text uk-text-bold uk-text-uppercase '+ (showLoading ? 'uk-disabled' : '')">
<span *ngIf="!showLoading" class="uk-icon-button remove-orcid-button uk-icon">
<svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" data-svg="minus">
<rect height="1" width="15" y="7.5" x="1" fill="#FF3D33"></rect>
</svg>
</span>
<span class="uk-icon icon-button loading-action-button"><loading></loading></span>
<span class="uk-margin-small-left">Remove from <span class="orcid-color">ORCID</span></span>
</a>
</ng-container>
<!--<div *ngIf="showLoading" class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert">-->
<!-- <span class="loading-gif uk-align-center"></span>-->
<!--</div>-->
<!--<i class="uk-icon-spinner"></i>-->
<modal-alert #workModal [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)="closeWorkModal()" 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>
</div>
</div>
</modal-alert>
<!-- <modal-alert #workModal [classTitle]="'landing-modal-header uk-padding-small'"-->
<!-- [classBody]="'landing-modal uk-padding-remove'">-->
<!-- <div class="uk-text-center uk-padding-small">-->
<!-- <div *ngIf="!putCodes || putCodes.length == 0">-->
<!-- <div>-->
<!-- You are about to add this result in your ORCID record.-->
<!-- </div>-->
<!-- <div class="uk-margin-small-top">-->
<!-- <button [disabled]="requestGrant || showLoading"-->
<!-- (click)="saveWorkPreparation();" type="submit"-->
<!-- [class]="'uk-button uk-padding uk-padding-remove-vertical uk-margin-left uk-button-primary '-->
<!-- + (requestGrant || showLoading ? 'uk-disabled' : '')">-->
<!-- <span>Add work</span>-->
<!-- </button>-->
<!-- <button (click)="closeWorkModal()" type="submit"-->
<!-- class="uk-button uk-padding uk-padding-remove-vertical uk-margin-left uk-button-primary">-->
<!-- <span>Cancel</span>-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<!-- -->
<!-- <div *ngIf="putCodes && putCodes.length > 0">-->
<!-- <div>-->
<!-- Last time we checked, this work was in your ORCID record. Refresh to retrieve changes to your work from ORCID.-->
<!-- </div>-->
<!-- <div class="uk-margin-small-top">-->
<!-- <button (click)="getWorks()" type="submit"-->
<!-- class="uk-button uk-padding uk-padding-remove-vertical uk-margin-left uk-button-primary">-->
<!-- <span>Refresh work</span>-->
<!-- </button>-->
<!-- <button (click)="deleteWorks()" type="submit"-->
<!-- class="uk-button uk-padding uk-padding-remove-vertical uk-margin-left uk-button-primary">-->
<!-- <span>Delete work</span>-->
<!-- </button>-->
<!-- <button (click)="closeWorkModal()" type="submit"-->
<!-- class="uk-button uk-padding uk-padding-remove-vertical uk-margin-left uk-button-primary">-->
<!-- <span>Cancel</span>-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<!---->
<!-- <div *ngIf="showLoading" class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert">-->
<!-- <span class="loading-gif uk-align-center"></span>-->
<!-- </div>-->
<!---->
<!-- <div *ngIf="requestGrant" class="uk-margin-large-top">-->
<!-- <div>{{requestGrantMessage}}</div>-->
<!-- <button (click)="openGrantWindow()" type="submit"-->
<!-- class="uk-button uk-padding uk-padding-remove-vertical uk-margin-small-top uk-margin-left uk-button-primary">-->
<!-- <span>Grant OpenAIRE</span>-->
<!-- </button>-->
<!-- </div>-->
<!-- -->
<!-- </div>-->
<!-- </modal-alert>-->
<!-- <modal-alert #messageModal [classTitle]="'landing-modal-header uk-padding-small'"-->
<!-- [classBody]="'landing-modal uk-padding-remove'">-->
<!-- <div class="uk-text-center uk-padding-small">-->
<!-- <div>{{message}}</div>-->
<!-- <button (click)="closeMessageModal()" type="submit"-->
<!-- class="uk-button uk-padding uk-padding-remove-vertical uk-margin uk-button-primary uk-float-right">-->
<!-- <span>OK</span>-->
<!-- </button>-->
<!-- </div>-->
<!-- </modal-alert>-->
<!--<button (click)="openGrantWindow()" type="submit"-->
<!-- class="uk-button uk-padding-small uk-padding-remove-vertical uk-button-default">-->
<!-- <span>Test grant</span>-->
<!--</button>-->
<!-- <a [href]="this.tokenUrl" target="_blank" class="uk-button uk-button-default">-->
<!-- Test-->
<!-- </a>-->
`
})
export class OrcidWorkComponent {
@Input() resultId: string = "dedup_wf_001::35c93a04a93b87f3a5954c1387aa7588";
@Input() resultLandingInfo: ResultLandingInfo;
@Input() pids: string = "";
@Input() type: string;
@Input() putCodes: string[];
@Input() givenPutCode: boolean = false;
@Input() pageType: string = "search";
public subscriptions: Subscription[] = [];
@ViewChild('workModal') workModal;
@ViewChild('saveWorkModal') saveWorkModal;
@ViewChild('grantModal') grantModal;
@ViewChild('messageModal') messageModal;
public requestGrant: boolean = false;
public requestGrantMessage: string = "Please grant OpenAIRE to access and update your ORCID record and works.";
private clientId: string = "APP-A5M3KTX6NCN67L91";
private tokenUrl: string;
public message: string = "";
public showLoading: boolean = false;
public works: any[] = [];
public window: any;
constructor(private route: ActivatedRoute,
private _router: Router,
private orcidService: OrcidService,
private resultLandingService: ResultLandingService) {
if(typeof location !== undefined) {
console.debug(location);
this.tokenUrl = "https://sandbox.orcid.org/oauth/authorize?"
+ "client_id="+this.clientId
// + "&response_type=code&scope=/activities/update"
+ "&response_type=code&scope=/authenticate /activities/update /person/update /read-limited"
+ "&redirect_uri="+location.origin+"/orcid";
}
}
ngOnInit() {
if(!this.givenPutCode) {
this.getPutCode();
}
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) {
console.debug("subscription closing...");
subscription.unsubscribe();
}
});
}
openGrantWindow() {
// this.tokenUrl = location.origin+"/orcid";
this.window = window.open(this.tokenUrl, '_blank',
'location=yes,height=600,width=500,left=500,top=100,scrollbars=yes,status=yes');
// this.requestGrant = false;
console.debug("before closing");
this.closeWorkModal();
console.debug("should be closed");
// var timer = setInterval(function() {
// console.debug("check");
// if(this.window.closed) {
// clearInterval(timer);
// console.debug('closed');
// }
// }, 1000);
let self = this;
window.onmessage = function (ev) {
console.debug("onmessage", ev);
if(ev.isTrusted && ev.origin !== location.origin && ev.data !== 'success')
return;
self.requestGrant = false;
UIkit.notification({
message: '<strong>Thank you for connecting your ORCID iD with OpenAIRE!<strong>',
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
self.saveWorkPreparation();
};
// window.addEventListener("message", (eventt) => {
// // if(event.origin !== location.origin+"/orcid")
// // return;
// console.debug("EVEEEENT", eventt);
// }, false);
// this.window.onbeforeunload = function () {
// console.debug("ONBEFOREUNLOAD!!!!");
// UIkit.notification({
// message: '<strong>Thank you for connecting your ORCID iD with OpenAIRE!<strong>',
// status: 'success',
// timeout: 6000,
// pos: 'bottom-right'
// });
// }
}
private getPutCode() {
console.debug(this.pids);
this.subscriptions.push(this.orcidService.getPutCode(this.pids).subscribe(
putCodes => {
this.putCodes = putCodes;
console.debug(this.putCodes);
}, error => {
}
))
}
private saveWorkPreparation() {
if(this.requestGrant) {
this.openWorkModal("Edit work in your ORCID record");
} else {
this.showLoading = true;
if (this.resultLandingInfo) {
this.saveWork();
} else {
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();
}
this.saveWork();
},
error => {
this.handleError(error, "There was an error adding this work to your ORCID record. Please try again later.");
console.error("Error getting landing info: ", error);
}
))
}
}
}
private saveWork() {
this.subscriptions.push(this.orcidService.saveWork(this.resultLandingInfo, this.pids).subscribe(
response => {
console.debug(response);
// for testing only
// this.openWorkModal("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, "There was an error adding this work to your ORCID record. Please try again later.");
console.error("Error posting landing info: null");
} else {
//this.work = this.orcidService.parse(this.resultLandingInfo);
//this.work['put-code'] = response;
this.works.push(response);
this.putCodes.push(this.works[this.works.length - 1]['put-code']);
// this.closeWorkModal();
this.message = "You have successfully added this work in your ORCID record!";
// this.openMessageModal("Work added successfully");
UIkit.notification({
message: '<strong>You have successfully added this work in your ORCID record!<strong>',
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
this.showLoading = false;
}
},
error => {
this.handleError(error, "There was an error adding this work to your ORCID record. Please try again later.");
console.error("Error posting landing info", error);
}
));
}
// private updateWork() {
// this.subscriptions.push(this.orcidService.updateWork(this.resultLandingInfo, this.putCode).subscribe(
// response => {
// console.debug(response);
// //this.work = this.orcidService.parse(this.resultLandingInfo);
// //this.work['put-code'] = response;
// this.work = response;
// },
// error => {
// console.error("Error updating landing info", error);
// }
// ));
// }
private getWorks() {
this.showLoading = true;
this.subscriptions.push(this.orcidService.getWorks(this.pids).subscribe(
response => {
console.debug(response);
this.works = response;
if(this.works) {
this.works.forEach(work => this.putCodes.push(work['put-code']));
} else {
this.putCodes = [];
}
this.closeWorkModal();
this.showLoading = false;
},
error => {
this.handleError(error, "There was an error getting this work from your ORCID record. Please try again later.");
console.error("Error getting work", error);
}
));
}
private deleteWorks() {
// let put_code;// = this.testingPutCode;
// if(this.work && this.work['put-code']) {
// put_code = this.work['put-code'];
// }
if(this.requestGrant) {
this.openWorkModal("Edit work in your ORCID record");
} else {
this.showLoading = true;
this.subscriptions.push(this.orcidService.deleteWorks(this.putCodes).subscribe(
deletedPutCodes => {
console.debug(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.works.splice(i, 1);
this.putCodes.splice(i, 1);
}
}
} else {
deletedAll = false;
}
if (!deletedAll) {
this.handleError(null, "There was an error deleting this work from your ORCID record. Please try again later.");
console.error("Error deleting landing info: null");
} else {
// this.closeWorkModal();
this.message = "You have successfully deleted this work from your ORCID record!";
// this.openMessageModal("Work deleted successfully");
UIkit.notification({
message: '<strong>You have successfully deleted this work from your ORCID record!<strong>',
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
this.showLoading = false;
}
},
error => {
this.handleError(error, "There was an error deleting this work to your ORCID record. Please try again later.");
console.error("Error deleting work", error);
}
));
}
}
openWorkModal(title: string) {
this.workModal.cancelButton = false;
this.workModal.okButton = false;
this.workModal.alertTitle = title;
this.workModal.open();
}
closeWorkModal() {
console.debug("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();
}
handleError(error, errorMsg: string) {
if(error && error.status == "401") {
this.openWorkModal("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.openWorkModal("Edit work in your ORCID record");
this.requestGrant = true;
this.requestGrantMessage = "Please login again to ORCID."
// this.openGrantModal();
} else {
this.message = errorMsg;
UIkit.notification({
message: '<strong>'+this.message+'<strong>',
status: 'warning',
timeout: 6000,
pos: 'bottom-right'
});
// this.openMessageModal("An error occured");
}
this.showLoading = false;
}
}