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

update Transfer data: enhance list of files, disable Transfer button when path is not valid, add [demo] in the title

This commit is contained in:
argirok 2022-05-25 17:56:00 +03:00
parent 0e8c5832bb
commit e71e493aa2
1 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,6 @@ 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">
@ -42,9 +41,9 @@ declare var UIkit;
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Available Zenodo DOI URLs:</p> <p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Available Zenodo DOI URLs:</p>
<div input type="select" [(value)]="selectedSourceUrl" placeholder="Zenodo DOI URL" hint="Select..." <div input type="select" [(value)]="selectedSourceUrl" placeholder="Zenodo DOI URL" hint="Select..."
[options]="sourceUrls" (valueChange)="this.parse()"></div> [options]="sourceUrls" (valueChange)="this.parse()"></div>
<div class="uk-margin-top"> <div *ngIf="status!='loading'" class="uk-margin-top">
<div>Files to be transferred:</div> <div>{{this.downloadElements.length}} files to be transferred:</div>
<div class="uk-height-xsmall uk-overflow-auto"> <div class="uk-overflow-auto" style="max-height: 135px">
<ul> <ul>
<li *ngFor=" let element of this.downloadElements">{{ element.name}} <li *ngFor=" let element of this.downloadElements">{{ element.name}}
</li> </li>
@ -61,7 +60,7 @@ declare var UIkit;
[validators]="validators" class="uk-margin-top"></div> [validators]="validators" class="uk-margin-top"></div>
<button (click)="transfer()" <button (click)="transfer()"
class="uk-button uk-button-primary uk-margin-top" class="uk-button uk-button-primary uk-margin-top"
[class.uk-disabled]="destinationPath.length == 0 || status == 'success' ||status == 'loading' "> [class.uk-disabled]="destinationPath.length == 0 || status == 'success' ||status == 'loading' || !validatePath() ">
>> Transfer >> Transfer
</button> </button>
</div> </div>
@ -149,7 +148,7 @@ export class EGIDataTransferComponent {
this.isOpen = true; this.isOpen = true;
this.egiTransferModal.cancelButton = false; this.egiTransferModal.cancelButton = false;
this.egiTransferModal.okButton = false; this.egiTransferModal.okButton = false;
this.egiTransferModal.alertTitle = "EOSC data transfer service"; this.egiTransferModal.alertTitle = "EOSC data transfer service [demo]";
this.egiTransferModal.open(); this.egiTransferModal.open();
} }
close(){ close(){
@ -238,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
@ -279,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)
}
} }