[Library | data-transfer-v2]: For data transfer, open full screen modal instead of alert modal | Support transfer of hierarchical files | Show description in storage types.
1. full-screen-modal.component.ts: Added cancelButton: boolean = true; and show cancel button, only if cancelButton is true and okButton is false. 2. transferData.module.ts: Imported FullScreenModalModule. 3. transferData.component.html: Replaced <modal-alert> with <fs-modal> and updated the interface accordingly | In inputs, set [inputClass]="'flat'". 4. transferData.component.ts: a. Configure FullScreenModal, instread of AlertModal. b. In destinationOptions, set label to dest.description (used to be dest.destination). c. In transfer, in destinations, use also element.path, to keep the initial structure/ hierarchy when transfering files.
This commit is contained in:
parent
217a3969db
commit
ab43152a6a
|
|
@ -9,11 +9,11 @@
|
|||
|
||||
|
||||
<!-- This is the modal -->
|
||||
<modal-alert #egiTransferModal large="true" [okDisabled]="destinationPath.length == 0 || status == 'succeeded'
|
||||
<fs-modal #egiTransferModal classBody="uk-container-xlarge" [okButtonDisabled]="destinationPath.length == 0 || status == 'succeeded'
|
||||
|| (requests > 0) || !validatePath() || !validateDestinationUrl() || (!this.downloadElements || this.downloadElements.length == 0)"
|
||||
(alertOutput)="transfer()" (cancelOutput)="init()">
|
||||
(okEmitter)="transfer()" (cancelEmitter)="init()">
|
||||
<div *ngIf="!accessToken" class="">
|
||||
<div class="uk-width-1-1 uk-margin-top uk-margin-bottom uk-text-center">
|
||||
<div class="uk-width-1-1 uk-margin-bottom uk-text-center">
|
||||
In order to send data to a Cloud Storage, you would need to be authenticated, please login via EGI check-in.
|
||||
</div>
|
||||
<div class="uk-text-center">
|
||||
|
|
@ -22,18 +22,18 @@
|
|||
</div>
|
||||
</div>
|
||||
<div *ngIf="accessToken" class="">
|
||||
<div class="uk-width-1-1 uk-margin-top uk-margin-bottom uk-text-center">
|
||||
<div class="uk-width-1-1 uk-margin-bottom uk-text-center">
|
||||
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>
|
||||
<div class="uk-grid uk-grid-small uk-child-width-1-2 uk-grid-divider">
|
||||
<!-- Source -->
|
||||
<div class="uk-first-column source">
|
||||
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Available DOI URLs:</p>
|
||||
<div input type="select" [(value)]="selectedSourceUrl" hint="Select..."
|
||||
<div input type="select" [(value)]="selectedSourceUrl" hint="Select..." [inputClass]="'flat'"
|
||||
[options]="sourceUrls" (valueChange)="this.parse()"></div>
|
||||
<div *ngIf="status!='active'" class="uk-margin-top">
|
||||
<div>{{this.downloadElements.length}} files found:</div>
|
||||
<div class="uk-overflow-auto" style="max-height: 135px">
|
||||
<div class="uk-margin-small-top uk-height-max-medium uk-overflow-auto">
|
||||
<ul>
|
||||
<li *ngFor=" let element of this.downloadElements">{{ element.name}}
|
||||
</li>
|
||||
|
|
@ -52,11 +52,11 @@
|
|||
<!-- <br>-->
|
||||
<!-- -->
|
||||
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Destination storage type:</p>
|
||||
<div input type="select" [(value)]="selectedDestination" hint="Select..."
|
||||
<div input type="select" [(value)]="selectedDestination" hint="Select..." [inputClass]="'flat'"
|
||||
[options]="destinationOptions" (valueChange)="folders = {}"></div>
|
||||
|
||||
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Destination system (e.g. hostname:8080):</p>
|
||||
<div input [(value)]="destinationUrl"
|
||||
<div input [(value)]="destinationUrl" [inputClass]="'flat'"
|
||||
[validators]="URLValidators" class=""></div>
|
||||
|
||||
<ng-container
|
||||
|
|
@ -64,23 +64,23 @@
|
|||
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Authentication:</p>
|
||||
<div class="uk-grid uk-child-width-1-2">
|
||||
<div input [(value)]="destinationAuthUser" [placeholder]="'Give ' + (selectedDestination.authType ==
|
||||
'password'? 'username':'access key') "
|
||||
'password'? 'username':'access key') " [inputClass]="'flat'"
|
||||
class=""></div>
|
||||
<div input password=true [(value)]="destinationAuthPass" [placeholder]="'Give ' + (selectedDestination.authType ==
|
||||
'password'? 'password':'secret key') "
|
||||
'password'? 'password':'secret key') " [inputClass]="'flat'"
|
||||
class=""></div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Destination path (e.g. /folder1/folder2):</p>
|
||||
<div input [(value)]="destinationPath"
|
||||
<div input [(value)]="destinationPath" [inputClass]="'flat'"
|
||||
[validators]="pathValidators" class=""></div>
|
||||
<!-- <div *ngIf="selectedDestination.hasBrowse">-->
|
||||
<p *ngIf="selectedDestination.canBrowse" class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom"> or <a
|
||||
[ngClass]="!validateDestinationUrl() ? 'uk-text-muted uk-disabled' : 'uk-text-primary'" [attr.disabled]="!destinationUrl"
|
||||
(click)="browseFolder('/')">browse</a> to
|
||||
select a folder.</p>
|
||||
<div *ngIf="folders['/']" class="uk-height-small uk-overflow-auto">
|
||||
<div *ngIf="folders['/']" class="uk-height-max-medium uk-overflow-auto">
|
||||
<ng-container *ngTemplateOutlet="folderListTmpl; context: { folder : folders['/'], folderPath: '/'}"></ng-container>
|
||||
</div>
|
||||
|
||||
|
|
@ -88,12 +88,21 @@
|
|||
<ng-container *ngIf="selectedDestination.destination == 'ftp'">
|
||||
<p>Comming soon!</p>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<button class="uk-button uk-button-primary uk-align-right uk-margin-medium-top"
|
||||
[disabled]="destinationPath.length == 0 || status == 'succeeded'
|
||||
|| (requests > 0) || !validatePath() || !validateDestinationUrl() || (!this.downloadElements || this.downloadElements.length == 0)"
|
||||
[class.uk-disabled]="destinationPath.length == 0 || status == 'succeeded'
|
||||
|| (requests > 0) || !validatePath() || !validateDestinationUrl() || (!this.downloadElements || this.downloadElements.length == 0)"
|
||||
(click)="transfer()">
|
||||
>> Transfer
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- [class.uk-alert-success]="status && status.indexOf('error')==-1"-->
|
||||
<!-- [class.uk-alert-error]="status && status.indexOf('error')!=-1">-->
|
||||
<div id="transferAlert" *ngIf="message" class="uk-width-1-1 uk-alert" [ngClass]="'uk-alert-'+statusMessage" uk-alert>
|
||||
<div id="transferAlert" *ngIf="message" class="uk-width-1-1 uk-alert uk-margin-medium-top" [ngClass]="'uk-alert-'+statusMessage" uk-alert>
|
||||
<div [innerHTML]="message"></div>
|
||||
<!-- <a *ngIf="status != 'succeeded' && status != 'active'" (click)="transfer()">-->
|
||||
<!-- Try again!-->
|
||||
|
|
@ -137,7 +146,7 @@
|
|||
</button>-->
|
||||
<!-- End of TESTS-->
|
||||
</div>
|
||||
</modal-alert>
|
||||
</fs-modal>
|
||||
|
||||
<!-- Browse Templates -->
|
||||
<ng-template #folderListTmpl let-folder="folder" let-folderPath="folderPath" >
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import {properties} from "../../../../environments/environment";
|
|||
import {delay, repeat, startWith, switchMap} from "rxjs/operators";
|
||||
import {StringUtils} from "../string-utils.class";
|
||||
import {HelperFunctions} from "../HelperFunctions.class";
|
||||
import {FullScreenModalComponent} from "../modal/full-screen-modal/full-screen-modal.component";
|
||||
declare var UIkit;
|
||||
|
||||
@Component({
|
||||
|
|
@ -54,7 +55,7 @@ export class EGIDataTransferComponent {
|
|||
downloadElements = null;
|
||||
@Input() isOpen = false;
|
||||
// @Input() selectedDestinationId = "dcache";
|
||||
@ViewChild('egiTransferModal') egiTransferModal;
|
||||
@ViewChild('egiTransferModal') egiTransferModal: FullScreenModalComponent;
|
||||
APIURL = properties.eoscDataTransferAPI;
|
||||
// status: "loading" | "success" | "errorParser" | "errorUser" | "errorTransfer" | "init" | "canceled" = "init";
|
||||
status: "unused" | "staging" | "submitted" | "active" | "succeeded" | "partial" | "failed" | "canceled" | "errorParser" | "errorUser" | "init" = "init";
|
||||
|
|
@ -122,7 +123,7 @@ export class EGIDataTransferComponent {
|
|||
let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken});
|
||||
this.subscriptions.push(this.http.get(this.APIURL + "/storage/types", {headers: headers}).subscribe(
|
||||
(res: Array<any>) => {
|
||||
this.destinationOptions = res.map(dest => {return {"label": dest.destination, "value": dest}});
|
||||
this.destinationOptions = res.map(dest => {return {"label": dest.description, "value": dest}});
|
||||
this.selectedDestination = res[0];
|
||||
}
|
||||
));
|
||||
|
|
@ -143,11 +144,11 @@ export class EGIDataTransferComponent {
|
|||
this.parse();
|
||||
}
|
||||
this.isOpen = true;
|
||||
this.egiTransferModal.back = true;
|
||||
this.egiTransferModal.cancelButton = false;
|
||||
this.egiTransferModal.okButton = true;
|
||||
this.egiTransferModal.okButton = false;
|
||||
this.egiTransferModal.okButtonText = ">> Transfer";
|
||||
this.egiTransferModal.alertTitle = "EOSC Data Transfer [demo]";
|
||||
this.egiTransferModal.stayOpen = true;
|
||||
this.egiTransferModal.title = "EOSC Data Transfer [demo]";
|
||||
this.init();
|
||||
if(typeof document !== 'undefined') {
|
||||
this.egiTransferModal.open();
|
||||
|
|
@ -241,7 +242,7 @@ export class EGIDataTransferComponent {
|
|||
for (let element of this.downloadElements) {
|
||||
let file = {
|
||||
"sources": [element['downloadUrl']],
|
||||
"destinations": [(this.selectedDestination.protocol+"://") + this.destinationUrl + this.destinationPath + (this.destinationPath.endsWith("/") ? "" : "/") + element.name],
|
||||
"destinations": [(this.selectedDestination.protocol+"://") + this.destinationUrl + this.destinationPath + (this.destinationPath.endsWith("/") ? "" : "/") + ((element.path && element.path != "/") ? element.path : "") + element.name],
|
||||
|
||||
};
|
||||
//TODO priority? checksum? filesize?
|
||||
|
|
|
|||
|
|
@ -4,10 +4,11 @@ import {FormsModule} from '@angular/forms';
|
|||
import {EGIDataTransferComponent} from "./transferData.component";
|
||||
import {InputModule} from "../../sharedComponents/input/input.module";
|
||||
import {AlertModalModule} from "../modal/alertModal.module";
|
||||
import {FullScreenModalModule} from "../modal/full-screen-modal/full-screen-modal.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, InputModule, AlertModalModule
|
||||
CommonModule, FormsModule, InputModule, AlertModalModule, FullScreenModalModule
|
||||
|
||||
],
|
||||
declarations: [
|
||||
|
|
|
|||
|
|
@ -31,12 +31,14 @@ declare var ResizeObserver;
|
|||
class="uk-width-expand uk-padding-small uk-padding-remove-vertical uk-flex uk-flex-center">
|
||||
<h2 class="uk-margin-remove">{{title}}</h2>
|
||||
</div>
|
||||
<div class="uk-width-medium@l uk-width-auto uk-flex" [class.uk-flex-center]="okButton" [class.uk-flex-right]="!okButton">
|
||||
<div class="uk-width-medium@l uk-width-auto uk-flex"
|
||||
[class.uk-flex-center]="okButton" [class.uk-flex-right]="!okButton"
|
||||
[class.uk-invisible]="okButton || cancelButton">
|
||||
<button *ngIf="okButton" class="uk-button uk-button-default" [disabled]="okButtonDisabled"
|
||||
[class.uk-disabled]="okButtonDisabled" (click)="ok()">
|
||||
{{okButtonText}}
|
||||
</button>
|
||||
<button *ngIf="!okButton" class="uk-close uk-icon" (click)="cancel()">
|
||||
<button *ngIf="!okButton && cancelButton" class="uk-close uk-icon" (click)="cancel()">
|
||||
<icon name="close" ratio="2"></icon>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -58,6 +60,7 @@ export class FullScreenModalComponent implements AfterViewInit, OnDestroy {
|
|||
@Input() classBody: string = 'uk-container-large';
|
||||
back: boolean = false;
|
||||
title: string;
|
||||
cancelButton: boolean = true;
|
||||
okButton: boolean = false;
|
||||
okButtonText = 'OK';
|
||||
@Input()
|
||||
|
|
|
|||
Loading…
Reference in New Issue