MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'new-theme' of code-repo.d4science.org:MaDgIK/openaire-library into new-theme

This commit is contained in:
Konstantinos Triantafyllou 2022-05-27 12:22:15 +03:00
parent be3020b164 e71e493aa2
commit 135638ad63
4 changed files with 101 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
searchPages/searchUtils/quick-selections.component.ts
View File

@ -16,7 +16,7 @@ import {OpenaireEntities} from "../../utils/properties/searchFields";
<span class="uk-text-bold">{{quickFilter.value}}</span> <span class="uk-text-bold">{{quickFilter.value}}</span>
</mat-slide-toggle> </mat-slide-toggle>
</div> </div>
<div class="uk-flex uk-flex-middle uk-text-small"> <div class="uk-flex uk-flex-middle uk-text-small uk-text-nowrap">
<div class="uk-width-auto@s uk-width-1-3 uk-flex uk-flex-right uk-text-meta uk-margin-small-right">Include:</div> <div class="uk-width-auto@s uk-width-1-3 uk-flex uk-flex-right uk-text-meta uk-margin-small-right">Include:</div>
<div class="uk-width-expand"> <div class="uk-width-expand">
<div class="uk-grid uk-grid-small uk-flex-middle uk-child-width-auto@m uk-child-width-1-2@s uk-child-width-1-1" uk-grid> <div class="uk-grid uk-grid-small uk-flex-middle uk-child-width-auto@m uk-child-width-1-2@s uk-child-width-1-1" uk-grid>

161
utils/dataTransfer/transferData.component.ts
View File

@ -1,9 +1,8 @@
import {Component, Input} from '@angular/core'; import {Component, Input, ViewChild} from '@angular/core';
import {Subscriber} from "rxjs"; import {Subscriber} from "rxjs";
import {HttpClient, HttpHeaders} from "@angular/common/http"; import {HttpClient, HttpHeaders} from "@angular/common/http";
import {AbstractControl, ValidatorFn, Validators} from "@angular/forms"; import {AbstractControl, ValidatorFn, Validators} from "@angular/forms";
import {Location} from '@angular/common'; import {Location} from '@angular/common';
import {StringUtils} from "../string-utils.class";
import {COOKIE} from "../../login/utils/helper.class"; import {COOKIE} from "../../login/utils/helper.class";
import {Router} from "@angular/router"; import {Router} from "@angular/router";
import {properties} from "../../../../environments/environment"; import {properties} from "../../../../environments/environment";
@ -13,7 +12,7 @@ declare var UIkit;
selector: 'egi-transfer-data', selector: 'egi-transfer-data',
template: ` template: `
<a (click)="open()" <a (click)="open()"
[title]="'Send data to cloud storage'" [title]="'Send data to cloud storage [demo]'"
[attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'" [attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'"
> <span icon="cloud-upload"></span> > <span icon="cloud-upload"></span>
<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal"> <span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
@ -23,83 +22,70 @@ declare var UIkit;
<!-- This is the modal --> <!-- This is the modal -->
<div id="modal-example" class="uk-modal uk-open " style="display: block" [class.uk-invisible]="!isOpen"> <modal-alert #egiTransferModal large="true" emitHidden="true" (alertHidden)="close()">
<div class="uk-modal-dialog uk-modal-body uk-width-expand uk-text-left" style="max-width:400px"> <div *ngIf="!accessToken" class="">
<button class="uk-modal-close-default" type="button" uk-close (click)="close()"></button> <div class="uk-width-1-1 uk-margin-top uk-margin-bottom uk-text-center">
<div class="uk-padding"> In order to send data to a Cloud Storage, you would need to be authenticated, please login via EGI check-in.
<div *ngIf="!accessToken" class=""> </div>
<div class="uk-width-1-1 uk-text-center"> <div class="uk-text-center">
<h2 class="uk-modal-title">EOSC data transfer service</h2> <button *ngIf="!accessToken" class="uk-button uk-button-default" (click)="checkin()">Login
</div> </button>
<div class="uk-width-1-1 uk-margin-top uk-margin-bottom uk-text-center"> </div>
In order to send data to a Cloud Storage, you would need to be authenticated, please login via EGI check-in. </div>
</div> <div *ngIf="accessToken" class="">
<div class="uk-text-center"> <div class="uk-width-1-1 uk-margin-top uk-margin-bottom uk-text-center">
<button *ngIf="!accessToken" class="uk-button uk-button-default" (click)="checkin()">Login You have requested to send the data corresponding to the DOI <a [href]="selectedSourceUrl" target="_blank">{{selectedSourceUrl.split(doiPrefix)[1]}}</a> to a cloud storage using the EOSC Data Transfer service
</button> </div>
</div> <div class="uk-grid uk-child-width-1-2 uk-grid-divider">
</div> <div class="uk-first-column">
<div *ngIf="accessToken" class=""> <p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Available Zenodo DOI URLs:</p>
<div class="uk-width-1-1 uk-text-center"> <div input type="select" [(value)]="selectedSourceUrl" placeholder="Zenodo DOI URL" hint="Select..."
<h2 class="uk-modal-title">EOSC data transfer service</h2> [options]="sourceUrls" (valueChange)="this.parse()"></div>
</div> <div *ngIf="status!='loading'" class="uk-margin-top">
<div class="uk-width-1-1 uk-margin-top uk-margin-bottom uk-text-center"> <div>{{this.downloadElements.length}} files to be transferred:</div>
You have requested to send the data corresponding to the DOI <a [href]="selectedSourceUrl" target="_blank">{{selectedSourceUrl.split(doiPrefix)[1]}}</a> to a cloud storage using the EOSC Data Transfer service <div class="uk-overflow-auto" style="max-height: 135px">
</div> <ul>
<div class="uk-grid uk-child-width-1-2 uk-grid-divider"> <li *ngFor=" let element of this.downloadElements">{{ element.name}}
<div class="uk-first-column"> </li>
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Available Zenodo DOI URLs:</p> </ul>
<div input type="select" [(value)]="selectedSourceUrl" placeholder="Zenodo DOI URL" hint="Select..." </div>
[options]="sourceUrls" (valueChange)="this.parse()"></div> <div *ngIf="!this.downloadElements || this.downloadElements.length == 0"> - </div>
<div class="uk-margin-top"> </div>
<div>Files to be transferred:</div> </div>
<div class="uk-height-xsmall uk-overflow-auto"> <div>
<ul> <p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Please select the Destination Storage type and provide the corresponding storage destination path.</p>
<li *ngFor=" let element of this.downloadElements">{{ element.name}} <div input type="select" [(value)]="selectedDestination" placeholder="Storage type" hint="Select..."
</li> [options]="destinationOptions"></div>
</ul> <div input [(value)]="destinationPath" placeholder="Give a destination path..."
</div> [validators]="validators" class="uk-margin-top"></div>
<div *ngIf="!this.downloadElements || this.downloadElements.length == 0"> - </div> <button (click)="transfer()"
</div> class="uk-button uk-button-primary uk-margin-top"
</div> [class.uk-disabled]="destinationPath.length == 0 || status == 'success' ||status == 'loading' || !validatePath() ">
<div> >> Transfer
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Please select the Destination Storage type and provide the corresponding storage destination path.</p> </button>
<div input type="select" [(value)]="selectedDestination" placeholder="Storage type" hint="Select..." </div>
[options]="destinationOptions"></div> </div>
<div input [(value)]="destinationPath" placeholder="Give a destination path..." <div *ngIf="status == 'loading'" class="uk-flex uk-flex-center uk-text-muted">
[validators]="validators" class="uk-margin-top"></div> <div>
<button (click)="transfer()"
class="uk-button uk-button-primary uk-margin-top"
[class.uk-disabled]="destinationPath.length == 0 || status == 'success' ||status == 'loading' ">
>> Transfer
</button>
</div>
</div>
<div *ngIf="status == 'loading'" class="uk-flex uk-flex-center uk-text-muted">
<div>
<span class="uk-icon uk-spinner"> <span class="uk-icon uk-spinner">
<svg width="60" height="60" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" <svg width="60" height="60" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"
data-svg="spinner"><circle data-svg="spinner"><circle
fill="none" stroke="#000" cx="15" cy="15" r="14" style="stroke-width: 2px;"></circle></svg> fill="none" stroke="#000" cx="15" cy="15" r="14" style="stroke-width: 2px;"></circle></svg>
</span> </span>
</div> </div>
</div> </div>
<div *ngIf="message" class="uk-width-1-1 uk-alert" <div *ngIf="message" class="uk-width-1-1 uk-alert"
[class.uk-alert-success]="status && status.indexOf('error')==-1" [class.uk-alert-success]="status && status.indexOf('error')==-1"
[class.uk-alert-error]="status && status.indexOf('error')!=-1" [class.uk-alert-error]="status && status.indexOf('error')!=-1"
[innerHTML]="message"> [innerHTML]="message">
</div>
<div class="uk-width-1-1 uk-text-right "
[class.uk-invisible]="!(status == 'success' || status.indexOf('error')!=-1)">
<button class="uk-button uk-button-default uk-margin-top " (click)="close()">Close</button>
</div>
</div>
</div>
</div> </div>
</div>
<div class="uk-width-1-1 uk-text-right "
[class.uk-invisible]="!(status == 'success' || status.indexOf('error')!=-1)">
<button class="uk-button uk-button-default uk-margin-top " (click)="close()">Close</button>
</div>
</div>
</modal-alert>
` `
}) })
@ -116,6 +102,7 @@ export class EGIDataTransferComponent {
downloadElements = null; downloadElements = null;
@Input() isOpen = false; @Input() isOpen = false;
@ViewChild('egiTransferModal') egiTransferModal;
APIURL = "https://eosc-data-transfer.vm.fedcloud.eu" APIURL = "https://eosc-data-transfer.vm.fedcloud.eu"
// APIURL = "https://virtserver.swaggerhub.com/thebe14/eosc-future-data-transfer/1.0.0"; // APIURL = "https://virtserver.swaggerhub.com/thebe14/eosc-future-data-transfer/1.0.0";
status: "loading" | "success" | "errorParser" | "errorUser" | "errorTransfer" | "init" = "init"; status: "loading" | "success" | "errorParser" | "errorUser" | "errorTransfer" | "init" = "init";
@ -126,7 +113,7 @@ export class EGIDataTransferComponent {
} }
ngOnInit() { ngAfterViewInit() {
if(this.isOpen){ if(this.isOpen){
this.open(); this.open();
} }
@ -159,9 +146,16 @@ export class EGIDataTransferComponent {
this.parse(); this.parse();
} }
this.isOpen = true; this.isOpen = true;
this.egiTransferModal.cancelButton = false;
this.egiTransferModal.okButton = false;
this.egiTransferModal.alertTitle = "EOSC data transfer service [demo]";
this.egiTransferModal.open();
} }
close(){ close(){
this.isOpen = false; if(this.isOpen) {
this.isOpen = false;
this.egiTransferModal.cancel();
}
// this.downloadElements = []; // this.downloadElements = [];
this.destinationPath = ""; this.destinationPath = "";
this.selectedDestination = this.destinationOptions[0].value; this.selectedDestination = this.destinationOptions[0].value;
@ -201,7 +195,7 @@ export class EGIDataTransferComponent {
} }
transfer() { transfer() {
console.log(this.selectedDestination) // console.log(this.selectedDestination)
this.status = "loading"; this.status = "loading";
let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken}); let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken});
this.subscriptions.push(this.http.get(this.APIURL + "/user/info", {headers: headers}).subscribe( this.subscriptions.push(this.http.get(this.APIURL + "/user/info", {headers: headers}).subscribe(
@ -243,7 +237,7 @@ export class EGIDataTransferComponent {
this.message = ` this.message = `
<div class="uk-text-large uk-margin-bottom">Data transfer has began!</div> <div class="uk-text-large uk-margin-bottom">Data transfer has began!</div>
<div>Transfering ` + this.downloadElements.length + ` files to <a href="`+ this.selectedDestination.webpage + `" target=_blank> EGI Storage</a>: <div>Transfering ` + this.downloadElements.length + ` files to <a href="`+ this.selectedDestination.webpage + `" target=_blank> EGI Storage</a>:
<div class="uk-height-xsmall uk-overflow-auto"> <div class=" uk-overflow-auto" style="max-height: 135px">
<ul> <ul>
`; `;
// TODO LATER we can call status for each file and see if the transfer has been complete // TODO LATER we can call status for each file and see if the transfer has been complete
@ -284,14 +278,17 @@ export class EGIDataTransferComponent {
let filename = url.split("/")[url.split("/").length - 1]; let filename = url.split("/")[url.split("/").length - 1];
return filename.split("?")[0]; return filename.split("?")[0];
} }
pathValidator( ): ValidatorFn { pathValidator(): ValidatorFn {
return (control: AbstractControl): { [key: string]: string } | null => { return (control: AbstractControl): { [key: string]: string } | null => {
let exp1 = /^\/([A-z0-9-_+]+\/)*$/g; if (!this.validatePath()) {
console.log(this.destinationPath, (this.destinationPath.length > 0 && this.destinationPath.match(exp1) == null))
if (this.destinationPath.length > 0 && this.destinationPath.match(exp1) == null) {
return {'error': 'Path should start and end with "/" e.g /path/'}; return {'error': 'Path should start and end with "/" e.g /path/'};
} }
return null; return null;
} }
} }
validatePath():boolean {
let exp1 = /^\/([A-z0-9-_+]+\/)*$/g;
return (this.destinationPath.length > 0 && this.destinationPath.match(exp1) != null)
}
} }

3
utils/dataTransfer/transferData.module.ts
View File

@ -3,10 +3,11 @@ import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms'; import {FormsModule} from '@angular/forms';
import {EGIDataTransferComponent} from "./transferData.component"; import {EGIDataTransferComponent} from "./transferData.component";
import {InputModule} from "../../sharedComponents/input/input.module"; import {InputModule} from "../../sharedComponents/input/input.module";
import {AlertModalModule} from "../modal/alertModal.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, InputModule CommonModule, FormsModule, InputModule, AlertModalModule
], ],
declarations: [ declarations: [

19
utils/modal/alert.ts
View File

@ -115,6 +115,12 @@ export class AlertModal {
@Input() @Input()
public choice: boolean = false; public choice: boolean = false;
/**
* If the value is true, on the hidden event the alertHidden Output is emitted
*/
@Input()
public emitHidden: boolean = false;
/** /**
* if the value is true then on ok clicked, modal will stay open. * if the value is true then on ok clicked, modal will stay open.
*/ */
@ -130,11 +136,24 @@ export class AlertModal {
*/ */
@Output() public alertOutput: EventEmitter<any> = new EventEmitter(); @Output() public alertOutput: EventEmitter<any> = new EventEmitter();
/**
* If emitHidden is true, this output is emitted when modal is hidden.
*/
@Output() public alertHidden: EventEmitter<any> = new EventEmitter();
@ViewChild('element') element: ElementRef; @ViewChild('element') element: ElementRef;
constructor() { constructor() {
} }
ngAfterViewInit() {
if(this.emitHidden) {
UIkit.util.on('#' + this.id, 'hidden', () => {
this.alertHidden.emit(true);
});
}
}
/** /**
* Opens a alert window creating backdrop. * Opens a alert window creating backdrop.
*/ */