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

View File

@ -3,7 +3,6 @@ import {Subscriber} from "rxjs";
import {HttpClient, HttpHeaders} from "@angular/common/http";
import {AbstractControl, ValidatorFn, Validators} from "@angular/forms";
import {Location} from '@angular/common';
import {StringUtils} from "../string-utils.class";
import {COOKIE} from "../../login/utils/helper.class";
import {Router} from "@angular/router";
import {properties} from "../../../../environments/environment";
@ -13,7 +12,7 @@ declare var UIkit;
selector: 'egi-transfer-data',
template: `
<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'"
> <span icon="cloud-upload"></span>
<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>
<div input type="select" [(value)]="selectedSourceUrl" placeholder="Zenodo DOI URL" hint="Select..."
[options]="sourceUrls" (valueChange)="this.parse()"></div>
<div class="uk-margin-top">
<div>Files to be transferred:</div>
<div class="uk-height-xsmall uk-overflow-auto">
<div *ngIf="status!='loading'" class="uk-margin-top">
<div>{{this.downloadElements.length}} files to be transferred:</div>
<div class="uk-overflow-auto" style="max-height: 135px">
<ul>
<li *ngFor=" let element of this.downloadElements">{{ element.name}}
</li>
@ -61,7 +60,7 @@ declare var UIkit;
[validators]="validators" class="uk-margin-top"></div>
<button (click)="transfer()"
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
</button>
</div>
@ -149,7 +148,7 @@ export class EGIDataTransferComponent {
this.isOpen = true;
this.egiTransferModal.cancelButton = false;
this.egiTransferModal.okButton = false;
this.egiTransferModal.alertTitle = "EOSC data transfer service";
this.egiTransferModal.alertTitle = "EOSC data transfer service [demo]";
this.egiTransferModal.open();
}
close(){
@ -238,7 +237,7 @@ export class EGIDataTransferComponent {
this.message = `
<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 class="uk-height-xsmall uk-overflow-auto">
<div class=" uk-overflow-auto" style="max-height: 135px">
<ul>
`;
// 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];
return filename.split("?")[0];
}
pathValidator( ): ValidatorFn {
pathValidator(): ValidatorFn {
return (control: AbstractControl): { [key: string]: string } | null => {
let exp1 = /^\/([A-z0-9-_+]+\/)*$/g;
// console.log(this.destinationPath, (this.destinationPath.length > 0 && this.destinationPath.match(exp1) == null))
if (this.destinationPath.length > 0 && this.destinationPath.match(exp1) == null) {
if (!this.validatePath()) {
return {'error': 'Path should start and end with "/" e.g /path/'};
}
return null;
}
}
validatePath():boolean {
let exp1 = /^\/([A-z0-9-_+]+\/)*$/g;
return (this.destinationPath.length > 0 && this.destinationPath.match(exp1) != null)
}
}