[develop-16-deposit | WIP ]

This commit is contained in:
argirok 2024-10-01 13:12:47 +03:00
parent 4070872316
commit 5b090c7087
5 changed files with 181 additions and 165 deletions

View File

@ -12,43 +12,50 @@ declare var UIkit: any;
@Component({ @Component({
selector: 'deposition', selector: 'deposition',
template: ` template: `
<div class=""> <div class="uk-alert uk-padding-xsmall uk-text-small" *ngIf="userTokens && userTokens.zenodoDuration">
<div *ngIf="!authorized" class="uk-text-center"> The session with Zenodo will be valid for {{(userTokens.zenodoDuration/3600) <24?(userTokens.zenodoDuration/3600) + (userTokens.zenodoDuration == '3600'?' hour':' hours'): (userTokens.zenodoDuration/(3600 * 24)) + ' days'}}
<div class="uk-section-small">
Authorize OpenAIRE to deposit files in your Zenodo account.
</div> </div>
<!--<a (click)="openGrantModal('Grant Openaire')" <div *ngIf="prevMongoRecords && prevMongoRecords.length > 0" >
class="uk-button uk-button-primary">Authorize</a>--> <div>You have already upload the following files:</div>
<a (click)="authorize()" <!--<div class="uk-text-xsmall">Note that if the records are deleted in zenodo the links will not </div>-->
class="uk-button uk-button-primary">Authorize</a> <div class="uk-text-small">
<div *ngFor="let record of prevMongoRecords">
<div> {{record.depositDate}} <a *ngIf=" record.recordId"
[href]="properties.zenodoDepositAPI + 'uploads/' + record.recordId">View
in Zenodo
<icon name="edit"></icon>
</a></div>
<div> {{record.filenames.join(', ')}}
</div> </div>
<form *ngIf="authorized && !space" class=" uk-section-small"> </div>
</div>
</div>
<div *ngIf="!space">
<div class="uk-margin-medium-top uk-text-center uk-text-meta uk-text-large">
Use basic metadata (title, description, type) of this record to upload a file in Zenodo.
</div>
<form *ngIf="!space" class=" uk-section-small uk-flex uk-flex-center">
<div class="uk-float-left"> <div class="uk-float-left">
<span class="js-upload" uk-form-custom> <span class="js-upload" uk-form-custom>
<input id="exampleInputFile" class="uk-width-medium" type="file" (change)="fileChangeEvent($event)"/> <input id="exampleInputFile" class="uk-width-medium" type="file" (change)="fileChangeEvent($event)"
multiple="multiple"/>
<span class="uk-link " style="text-decoration: underline;">Upload a file to deposit </span> <span class="uk-link " style="text-decoration: underline;">Upload a file to deposit </span>
</span> </span>
</div> </div>
</form> </form>
<div class="uk-alert uk-alert-warning">
<div class="uk-text-small"> This is for testing</div>
<button (click)="getInfo(null)">get info</button>
<button (click)="checkAccess(null)">get info</button>
</div> </div>
<ng-container *ngIf="space"> <ng-container *ngIf="space">
<!-- <div><a [href]="space.links.html" target="_blank">{{space.metadata.title}}</a></div>--> <!-- <div><a [href]="space.links.html" target="_blank">{{space.metadata.title}}</a></div>-->
<div>Your file has been deposited in Zenodo with the main metadata of this record. You can view the new record <div class="uk-flex uk-flex-center uk-text-success"><icon name="file_download_done" [ratio]="3"></icon></div>
<div class="uk-text-center">Your file has been uploaded in Zenodo in <b>draft</b> mode. You can view the record
<a [href]="space.links.html" target="_blank">here</a>, edit and publish it. <a [href]="space.links.html" target="_blank">here</a>, edit and publish it.
</div>
<div >The preserved DOI is {{space.metadata.prereserve_doi.doi}}.</div> <div >The preserved DOI is {{space.metadata.prereserve_doi.doi}}.</div>
</div>
<a (click)="deleteSpace()" <a (click)="deleteSpace()"
class="uk-button uk-button-danger">Undo: This will delete your deposited file in zenodo.</a> class="uk-button uk-button-danger uk-margin-top">Undo: This will delete your deposited file in zenodo.</a>
</ng-container> </ng-container>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{errorMessage}}</div> <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{errorMessage}}</div>
@ -70,7 +77,8 @@ declare var UIkit: any;
<div>The preserved DOI is {{space.metadata.prereserve_doi.doi}}.</div> <div>The preserved DOI is {{space.metadata.prereserve_doi.doi}}.</div>
</ng-container> </ng-container>
</modal-alert> </modal-alert>
</div> <!-- <a (click)="getAccessByRefresh(null)">get new Access by Refreh</a>-->
` `
}) })
@ -79,7 +87,8 @@ export class DepositionComponent {
properties = properties; properties = properties;
@Input() result: ResultLandingInfo; @Input() result: ResultLandingInfo;
authorizeUrl = this.properties.zenodoDepositAPI + "oauth/authorize?response_type=code&client_id=" + authorizeUrl = this.properties.zenodoDepositAPI +
/* "oauth/authorize?response_type=code&client_id=" +*/ "oauth/authorize?response_type=token&client_id=" +
this.properties.zenodoDepositClientId + "&scope=deposit%3Awrite+deposit%3Aactions&state=step1&redirect_uri=" + this.properties.zenodoDepositClientId + "&scope=deposit%3Awrite+deposit%3Aactions&state=step1&redirect_uri=" +
encodeURIComponent(this.properties.zenodoDepositRedirectURI); encodeURIComponent(this.properties.zenodoDepositRedirectURI);
@ -95,6 +104,8 @@ export class DepositionComponent {
public code: string = ""; public code: string = "";
public gotToken: boolean = false; public gotToken: boolean = false;
public space = null; public space = null;
public mongoRecord = null;
public prevMongoRecords = null;
public window: any; public window: any;
user//: User; user//: User;
userTokens; userTokens;
@ -124,20 +135,8 @@ export class DepositionComponent {
} else { } else {
this.authorized = false; this.authorized = false;
} }
// })); this.getPrevUploads();
/* this.subscriptions.push(this.route.queryParams.subscribe(params => {
if (params['code']) {
this.code = params['code'];
localStorage.setItem('deposit_code', this.code);
} else if (localStorage.getItem('deposit_code')) {
this.code = localStorage.getItem('deposit_code');
}
// if(this.code){
// this.authorized = true;
// }
this.gotToken = false;
}));*/
} }
ngOnDestroy() { ngOnDestroy() {
@ -159,7 +158,6 @@ export class DepositionComponent {
} }
authorize() { authorize() {
console.log(this.authorizeUrl)
this.window = window.open(this.authorizeUrl, '_blank', this.window = window.open(this.authorizeUrl, '_blank',
'location=yes,height=700,width=540,left=500,top=100,scrollbars=yes,status=yes'); 'location=yes,height=700,width=540,left=500,top=100,scrollbars=yes,status=yes');
// this.requestGrant = false; // this.requestGrant = false;
@ -168,16 +166,17 @@ export class DepositionComponent {
let self = this; let self = this;
window.onmessage = function (ev) { window.onmessage = function (ev) {
if (ev.isTrusted && ev.origin == location.origin) { if (ev.isTrusted && ev.origin == location.origin) {
console.log(ev.data)
let user = { let user = {
id: self.user.id, _id: self.user.id,
firstName: self.user.firstname, firstName: self.user.firstname,
lastName: self.user.lastname, lastName: self.user.lastname,
email: self.user.email, email: self.user.email,
zenodoToken: ev.data['access_token'], zenodoToken: ev.data['access_token'],
zenodoDuration: ev.data['expires_in'], zenodoDuration: ev.data['expires_in'],
zenodoRefresh: ev.data['refresh_token'], zenodoRefresh: ev.data['refresh_token']?ev.data['refresh_token']:"",
zenodoUserId: ev.data['user']['id'], zenodoUserId: ev.data['user']['id'],
code: ev.data['code'] code: ev.data['code']?ev.data['code']:""
}; };
@ -185,6 +184,9 @@ export class DepositionComponent {
if (res) { if (res) {
self.authorized = true; self.authorized = true;
self.userTokens = res; self.userTokens = res;
if (self.filesToUpload) {
self.start();
}
} }
}) })
} }
@ -204,42 +206,10 @@ export class DepositionComponent {
this.grantModal.cancel(); this.grantModal.cancel();
} }
// the following method uses client ID and client Secret, which are sessitive data.
// Our API should return the response, without revealing the call to ORCID.
/*public getToken() {
this.showLoading = true;
console.log(this.code)
this._http.get(properties.utilsService + "/deposit/getToken?code=" + this.code).subscribe(res => {
console.log(res)
localStorage.setItem('deposit_token', res['access_token']);
localStorage.setItem('deposit_refresh', res['refresh_token']);
})
}
public getTokenByRefresh() {
this.showLoading = true;
console.log(this.code, localStorage.getItem('deposit_refresh'))
this._http.get(properties.utilsService + "/deposit/getToken?refresh_token=" + localStorage.getItem('deposit_refresh')).subscribe(res => {
console.log(res)
localStorage.setItem('deposit_token', res['access_token']);
localStorage.setItem('deposit_refresh', res['refresh_token']);
})
}*/
public getInfo(func) { public getInfo(func) {
if (this.userTokens.zenodoToken) { if (this.userTokens.zenodoToken) {
/* this._http.get("http://localhost:8000/deposit/info?token=" + localStorage.getItem('deposit_token')).subscribe(res => {
console.log(res)
})*/
this._http.get(this.properties.zenodoDepositAPI + "api/deposit/depositions?access_token=" + this.userTokens.zenodoToken).subscribe(res => { this._http.get(this.properties.zenodoDepositAPI + "api/deposit/depositions?access_token=" + this.userTokens.zenodoToken).subscribe(res => {
console.log(res) console.log(res)
alert(res)
if (func) { if (func) {
func(); func();
} }
@ -263,25 +233,27 @@ export class DepositionComponent {
this.space = null; this.space = null;
this.errorMessage = null; this.errorMessage = null;
this.showLoading = true; this.showLoading = true;
console.log(this.userTokens.zenodoToken)
if (this.userTokens.zenodoToken) { if (this.userTokens.zenodoToken) {
let record = this.resultInfoToZenodoRecord(); let record = this.resultInfoToZenodoRecord();
console.log(record)
this._http.post(this.properties.zenodoDepositAPI + "api/deposit/depositions?access_token=" + this.userTokens.zenodoToken, { this._http.post(this.properties.zenodoDepositAPI + "api/deposit/depositions?access_token=" + this.userTokens.zenodoToken, {
"metadata": record "metadata": record
/*, /*,
"submitted": true*/ "submitted": true*/
}).subscribe(res => { }).subscribe(res => {
console.log(res)
this.space = res; this.space = res;
// this.meta(); // this.meta();
console.log(res) console.log(res)
this.depositFile(); // for(let file of this.filesToUpload) {
// this.depositFile(file);
// }
this.depositFile(this.filesToUpload[0]);
this.saveRecord(record, this.filesToUpload, this.space);
this.filesToUpload = [];
}, error => { }, error => {
console.error(error.message) console.error(error.message)
this.errorMessage = error.message; // this.errorMessage = error.message;
this.showLoading = false; // this.showLoading = false;
this.authorize();
}) })
} }
} }
@ -294,9 +266,9 @@ export class DepositionComponent {
creators: [], creators: [],
description: this.result.description description: this.result.description
} }
if (this.result.resultType == 'publication' && this.result.types[0]) { /* if (this.result.resultType == 'publication' && this.result.types[0]) {
record['publication_type'] = this.result.types[0]; record['publication_type'] = this.result.types[0];
} }*/
for (let author of this.result.authors) { for (let author of this.result.authors) {
record.creators.push({name: author.fullName, orcid: author.orcid}) record.creators.push({name: author.fullName, orcid: author.orcid})
} }
@ -309,24 +281,22 @@ export class DepositionComponent {
// this.errorMessage = "There is no selected file to upload."; // this.errorMessage = "There is no selected file to upload.";
return; return;
} }
if (this.authorized) {
// if(valid?) {
this.start(); this.start();
// }
} else {
this.authorize();
}
} }
depositFile() { depositFile(file) {
const formData: FormData = new FormData(); const formData: FormData = new FormData();
formData.append('file', this.filesToUpload[0]); formData.append('file', file);
const fileName = this.filesToUpload[0].name; // Replace with file name const fileName = file.name; // Replace with file name
let url = `${this.space.links.bucket}/${fileName}`; let url = `${this.space.links.bucket}/${fileName}`;
const data = {
name: fileName,
...formData
};
const headers = new HttpHeaders({ const headers = new HttpHeaders({
'Content-type': 'application/octet-stream' 'Content-type': 'application/octet-stream'
}); });
@ -356,12 +326,49 @@ export class DepositionComponent {
}*/ }*/
} }
saveRecord(record, files, res) {
let mongoRecord = {
aaiId: this.user.id,
title: record.title,
description: record.description,
type: record["upload_type"],
date: record.publication_date,
authors: [],
filenames: [],
pids: [],
openAIREId: this.result.relcanId,
recordId: this.space.record_id,
ownerId: this.userTokens.zenodoUserId
};
for (let file of files) {
mongoRecord.filenames.push(file.name)
}
for (let pidtype of this.result.identifiers.keys()) {
for (let pid of this.result.identifiers.get(pidtype)) {
if (mongoRecord.pids.indexOf(pid) == -1) {
mongoRecord.pids.push(pid)
}
}
}
for (let author of record.creators) {
mongoRecord.authors.push({name: author.name, orcid: author.orcid ? author.orcid : ""})
}
this._http.post(this.properties.depositAPI + "deposit/record/save", mongoRecord).subscribe(res => {
console.log(res)
this.mongoRecord = res;
})
}
deleteSpace() { deleteSpace() {
this._http.delete(this.properties.zenodoDepositAPI + "api/deposit/depositions/" + this.space.id + "?access_token=" + this.userTokens.zenodoToken, this._http.delete(this.properties.zenodoDepositAPI + "api/deposit/depositions/" + this.space.id + "?access_token=" + this.userTokens.zenodoToken,
).subscribe(res => { ).subscribe(res => {
console.log(res) console.log(res)
this.space = null; this.space = null;
this._http.delete(this.properties.depositAPI + "deposit/record/delete?id=" + this.mongoRecord._id).subscribe(res => {
})
}, error => { }, error => {
console.error(error.message) console.error(error.message)
UIkit.notification({ UIkit.notification({
@ -393,4 +400,18 @@ export class DepositionComponent {
}) })
} }
getPrevUploads() {
let pids = [];
for (let pidtype of this.result.identifiers.keys()) {
for (let pid of this.result.identifiers.get(pidtype)) {
if (pids.indexOf(pid) == -1) {
pids.push(pid)
}
}
}
this._http.get(this.properties.depositAPI + "deposit/record/get?aaiId=" + this.user.id + (pids.length > 0 ? "&pid=" + pids.join("&pid=") : "") + "&openaireId=" + this.result.relcanId).subscribe(res => {
this.prevMongoRecords = res;
})
}
} }

View File

@ -3,12 +3,14 @@ import {CommonModule} from '@angular/common';
import {DepositionComponent} from "./deposit-file.component"; import {DepositionComponent} from "./deposit-file.component";
import {AlertModalModule} from "../../utils/modal/alertModal.module"; import {AlertModalModule} from "../../utils/modal/alertModal.module";
import {LoadingModule} from "../../utils/loading/loading.module"; import {LoadingModule} from "../../utils/loading/loading.module";
import {IconsModule} from "../../utils/icons/icons.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, CommonModule,
AlertModalModule, AlertModalModule,
LoadingModule, LoadingModule,
IconsModule,
], ],
declarations: [ declarations: [
DepositionComponent DepositionComponent

View File

@ -46,7 +46,7 @@ export class DepositComponent {
this.updateDescription(description); this.updateDescription(description);
this.updateUrl( properties.domain + properties.baseLink + this.route.url); this.updateUrl( properties.domain + properties.baseLink + this.route.url);
this.subscriptions.push(this.route.queryParams.subscribe(params => { /*this.subscriptions.push(this.route.queryParams.subscribe(params => {
this.gotToken = false; this.gotToken = false;
this.code = params['code']; this.code = params['code'];
if (this.code) { if (this.code) {
@ -54,7 +54,25 @@ export class DepositComponent {
} else { } else {
this.message = "No code provided to authorize OpenAIRE to deposit in your Zenodo account. Please try again!" this.message = "No code provided to authorize OpenAIRE to deposit in your Zenodo account. Please try again!"
} }
})); }));*/
this.route.fragment.subscribe((fragment: string | null) => {
console.log(fragment)
let res = {};
//access_token=2qULnkWIsZf6XLUgnbASgcC6zhNt18&expires_in=5184000&token_type=Bearer&scope=deposit:write+deposit:actions&state=step1&user={'id':+'12352'}
let splits = fragment.split("&");
for(let split of splits){
if(split.split('=')[0] == 'access_token'){
res['access_token'] = split.split('=')[1]
}
if(split.split('=')[0] == 'expires_in'){
res['expires_in'] = split.split('=')[1]
}
if(split.split('=')[0] == 'user'){
res['user'] = split.split('=')[1]
}
}
this.closeModal(res);
});
} }
ngOnDestroy() { ngOnDestroy() {
@ -70,6 +88,15 @@ export class DepositComponent {
this._http.get(this.properties.depositAPI + "deposit/zenodo/getTokenByCode?code=" + this.code).subscribe(res => { this._http.get(this.properties.depositAPI + "deposit/zenodo/getTokenByCode?code=" + this.code).subscribe(res => {
console.log(res) console.log(res)
res["code"] = this.code res["code"] = this.code
this.closeModal(res);
}, error =>{
console.log(error)
this.message = error.message
})
}
closeModal(res){
this.message = "<div>Thank you for authorizing OpenAIRE to use your Zenodo account for deposit!</div>" + this.message = "<div>Thank you for authorizing OpenAIRE to use your Zenodo account for deposit!</div>" +
"<div class='uk-margin-small-top'>This window will automatically close and you will be ready to deposit.</div>"; "<div class='uk-margin-small-top'>This window will automatically close and you will be ready to deposit.</div>";
if(window && window.opener) { if(window && window.opener) {
@ -79,14 +106,7 @@ export class DepositComponent {
setTimeout(() => { setTimeout(() => {
this.message += "<div class='uk-margin-top'>If this window does not close automatically, please close it and continue!</div>"; this.message += "<div class='uk-margin-top'>If this window does not close automatically, please close it and continue!</div>";
}, 3000); }, 3000);
}, error =>{
console.log(error)
this.message = error.message
})
} }
private updateTitle(title: string) { private updateTitle(title: string) {
this._title.setTitle(title); this._title.setTitle(title);
this._meta.updateTag({content: title}, "property='og:title'"); this._meta.updateTag({content: title}, "property='og:title'");

View File

@ -77,7 +77,7 @@
</div> </div>
</div> </div>
<div class="uk-width-expand"> <div class="uk-width-expand">
<entity-actions [cite]="true" [share]="true" [linking]="true" [deposit]="true" [depositFile]="properties.environment == 'development' && properties.adminToolsPortalType == 'explore'" <entity-actions [cite]="true" [share]="true" [linking]="true" [depositFile]="properties.environment == 'development' && properties.adminToolsPortalType == 'explore'"
[type]="resultLandingInfo.resultType" [type]="resultLandingInfo.resultType"
[result]="resultLandingInfo" [id]="resultLandingInfo.objIdentifier"> [result]="resultLandingInfo" [id]="resultLandingInfo.objIdentifier">
<!-- ORCID --> <!-- ORCID -->

View File

@ -35,22 +35,22 @@ import {EnvProperties} from "../properties/env-properties";
<span *ngIf="!compactView" class="uk-margin-xsmall-left">Cite</span> <span *ngIf="!compactView" class="uk-margin-xsmall-left">Cite</span>
</a> </a>
</div> </div>
<div *ngIf="(deposit && isRouteAvailable('participate/deposit/learn-how') || depositFile)"> <div *ngIf="(depositFile && properties.zenodoDepositClientId)">
<a (click)="openDepositModal()" <a (click)="openDepositModal()"
[attr.uk-tooltip]="showTooltip ? 'title: Deposit; pos: bottom; cls: uk-active uk-text-small uk-padding-small' : 'cls: uk-invisible'" [attr.uk-tooltip]="showTooltip ? 'title: Deposit: upload a file in Zenodo; pos: bottom; cls: uk-active uk-text-small uk-padding-small' : 'cls: uk-invisible'"
class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'"> class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
<icon class="uk-text-bolder" [flex]="true" [ratio]="0.8" name="upload" visuallyHidden="upload"></icon> <icon class="uk-text-bolder" [flex]="true" [ratio]="0.8" name="upload" visuallyHidden="upload"></icon>
<span *ngIf="!compactView" class="uk-margin-xsmall-left">Deposit</span> <span *ngIf="!compactView" class="uk-margin-xsmall-left">Upload a file</span>
</a> </a>
</div> </div>
<!--<div *ngIf="deposit && isRouteAvailable('participate/deposit/learn-how')"> <div *ngIf="deposit && isRouteAvailable('participate/deposit/learn-how')">
<a routerLinkActive="router-link-active" routerLink="/participate/deposit/learn-how" <a routerLinkActive="router-link-active" routerLink="/participate/deposit/learn-how"
[attr.uk-tooltip]="showTooltip ? 'title: Find a repository to deposit or publish your research in Open Access; pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium' : 'cls: uk-invisible'" [attr.uk-tooltip]="showTooltip ? 'title: Find a repository to deposit or publish your research in Open Access; pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium' : 'cls: uk-invisible'"
class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'"> class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
<icon flex="true" ratio="0.7" name="upload" visuallyHidden="upload"></icon> <icon flex="true" ratio="0.7" name="upload" visuallyHidden="upload"></icon>
<span *ngIf="!compactView" class="uk-margin-xsmall-left">Deposit</span> <span *ngIf="!compactView" class="uk-margin-xsmall-left">Deposit</span>
</a> </a>
</div>--> </div>
<div *ngIf="embed" > <div *ngIf="embed" >
<a (click)="openEmbedResultsModal()" <a (click)="openEmbedResultsModal()"
[attr.uk-tooltip]="showTooltip ? 'title: Embed the related '+openaireEntities.RESULTS+' of this '+getTypeName()+' in your website; pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium' : 'cls: uk-invisible'" [attr.uk-tooltip]="showTooltip ? 'title: Embed the related '+openaireEntities.RESULTS+' of this '+getTypeName()+' in your website; pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium' : 'cls: uk-invisible'"
@ -59,9 +59,6 @@ import {EnvProperties} from "../properties/env-properties";
<span *ngIf="!compactView" class="uk-margin-xsmall-left">Embed</span> <span *ngIf="!compactView" class="uk-margin-xsmall-left">Embed</span>
</a> </a>
</div> </div>
<!-- <ng-container *ngIf="depositFile">
<deposition [result]="result"></deposition>
</ng-container>-->
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>
<modal-alert *ngIf="cite" #citeModal> <modal-alert *ngIf="cite" #citeModal>
@ -93,32 +90,8 @@ import {EnvProperties} from "../properties/env-properties";
</div> </div>
</div> </div>
</modal-alert> </modal-alert>
<modal-alert *ngIf="deposit || depositFile" #depositModal classBody="uk-flex uk-flex-center uk-flex-middle"> <modal-alert *ngIf=" depositFile" #depositModal classBody="uk-flex uk-flex-center uk-flex-middle">
<div *ngIf="!depositClicked" class="uk-text-center"> <deposition [result]="result" class="uk-width-1-1"> </deposition>
<div *ngIf="deposit && isRouteAvailable('participate/deposit/learn-how')">
<div>
<a routerLinkActive="router-link-active" routerLink="/participate/deposit/learn-how"
[attr.uk-tooltip]="showTooltip ? 'title: Find a repository to deposit or publish your research in Open Access; pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium' : 'cls: uk-invisible'"
class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
<!--<icon flex="true" ratio="0.7" name="upload" visuallyHidden="upload"></icon>-->
<span *ngIf="!compactView" class="uk-margin-xsmall-left">Find a repository to deposit or publish your research in Open Access</span>
</a>
</div>
</div>
<div *ngIf="deposit && isRouteAvailable('participate/deposit/learn-how') && depositFile" class="uk-section-small">OR</div>
<div *ngIf="depositFile && properties.zenodoDepositClientId">
<a class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'"
(click)="depositClicked = true">
<icon flex="true" ratio="0.7" name="upload" visuallyHidden="upload"></icon>
<span *ngIf="!compactView" class="uk-margin-xsmall-left">Upload a file in Zenodo</span>
</a>
</div>
</div>
<div *ngIf="depositClicked" class="uk-width-1-1">
<a (click)="depositClicked = false" >Back</a>
<deposition [result]="result"></deposition>
</div>
</modal-alert> </modal-alert>
` `
}) })