[Aggregator & Library| new-theme]: Use <modal-alert> common component in transferData.component.ts instead of uk-modal.
1. transferData.module.ts: Imported AlertModalModule. 2. transferData.component.ts: Use <modal-alert> common component instead of uk-modal | Comment logs. 3 alert.ts: a. Added "@Input() public emitHidden: boolean = false;" and " @Output() public alertHidden: EventEmitter<any> = new EventEmitter();" b. On ngAfterViewInit, if emitHidden is true, check when modal is hidden and emit alertHidden (currently used only in transferData.component.ts to reinitialize local fields and route).
This commit is contained in:
parent
dc242a0a3e
commit
0e8c5832bb
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, Input} from '@angular/core';
|
||||
import {Component, Input, ViewChild} from '@angular/core';
|
||||
import {Subscriber} from "rxjs";
|
||||
import {HttpClient, HttpHeaders} from "@angular/common/http";
|
||||
import {AbstractControl, ValidatorFn, Validators} from "@angular/forms";
|
||||
|
|
@ -23,83 +23,70 @@ declare var UIkit;
|
|||
|
||||
|
||||
<!-- This is the modal -->
|
||||
<div id="modal-example" class="uk-modal uk-open " style="display: block" [class.uk-invisible]="!isOpen">
|
||||
<div class="uk-modal-dialog uk-modal-body uk-width-expand uk-text-left" style="max-width:400px">
|
||||
<button class="uk-modal-close-default" type="button" uk-close (click)="close()"></button>
|
||||
<div class="uk-padding">
|
||||
<div *ngIf="!accessToken" class="">
|
||||
<div class="uk-width-1-1 uk-text-center">
|
||||
<h2 class="uk-modal-title">EOSC data transfer service</h2>
|
||||
</div>
|
||||
<div class="uk-width-1-1 uk-margin-top 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">
|
||||
<button *ngIf="!accessToken" class="uk-button uk-button-default" (click)="checkin()">Login
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="accessToken" class="">
|
||||
<div class="uk-width-1-1 uk-text-center">
|
||||
<h2 class="uk-modal-title">EOSC data transfer service</h2>
|
||||
</div>
|
||||
<div class="uk-width-1-1 uk-margin-top 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-child-width-1-2 uk-grid-divider">
|
||||
<div class="uk-first-column">
|
||||
<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">
|
||||
<ul>
|
||||
<li *ngFor=" let element of this.downloadElements">{{ element.name}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div *ngIf="!this.downloadElements || this.downloadElements.length == 0"> - </div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
<div input type="select" [(value)]="selectedDestination" placeholder="Storage type" hint="Select..."
|
||||
[options]="destinationOptions"></div>
|
||||
<div input [(value)]="destinationPath" placeholder="Give a destination path..."
|
||||
[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' ">
|
||||
>> Transfer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="status == 'loading'" class="uk-flex uk-flex-center uk-text-muted">
|
||||
<div>
|
||||
<modal-alert #egiTransferModal large="true" emitHidden="true" (alertHidden)="close()">
|
||||
<div *ngIf="!accessToken" class="">
|
||||
<div class="uk-width-1-1 uk-margin-top 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">
|
||||
<button *ngIf="!accessToken" class="uk-button uk-button-default" (click)="checkin()">Login
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="accessToken" class="">
|
||||
<div class="uk-width-1-1 uk-margin-top 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-child-width-1-2 uk-grid-divider">
|
||||
<div class="uk-first-column">
|
||||
<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">
|
||||
<ul>
|
||||
<li *ngFor=" let element of this.downloadElements">{{ element.name}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div *ngIf="!this.downloadElements || this.downloadElements.length == 0"> - </div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
<div input type="select" [(value)]="selectedDestination" placeholder="Storage type" hint="Select..."
|
||||
[options]="destinationOptions"></div>
|
||||
<div input [(value)]="destinationPath" placeholder="Give a destination path..."
|
||||
[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' ">
|
||||
>> Transfer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="status == 'loading'" class="uk-flex uk-flex-center uk-text-muted">
|
||||
<div>
|
||||
<span class="uk-icon uk-spinner">
|
||||
<svg width="60" height="60" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="message" class="uk-width-1-1 uk-alert"
|
||||
[class.uk-alert-success]="status && status.indexOf('error')==-1"
|
||||
[class.uk-alert-error]="status && status.indexOf('error')!=-1"
|
||||
[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 *ngIf="message" class="uk-width-1-1 uk-alert"
|
||||
[class.uk-alert-success]="status && status.indexOf('error')==-1"
|
||||
[class.uk-alert-error]="status && status.indexOf('error')!=-1"
|
||||
[innerHTML]="message">
|
||||
</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 +103,7 @@ export class EGIDataTransferComponent {
|
|||
|
||||
downloadElements = null;
|
||||
@Input() isOpen = false;
|
||||
@ViewChild('egiTransferModal') egiTransferModal;
|
||||
APIURL = "https://eosc-data-transfer.vm.fedcloud.eu"
|
||||
// APIURL = "https://virtserver.swaggerhub.com/thebe14/eosc-future-data-transfer/1.0.0";
|
||||
status: "loading" | "success" | "errorParser" | "errorUser" | "errorTransfer" | "init" = "init";
|
||||
|
|
@ -126,7 +114,7 @@ export class EGIDataTransferComponent {
|
|||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
ngAfterViewInit() {
|
||||
if(this.isOpen){
|
||||
this.open();
|
||||
}
|
||||
|
|
@ -159,9 +147,16 @@ export class EGIDataTransferComponent {
|
|||
this.parse();
|
||||
}
|
||||
this.isOpen = true;
|
||||
this.egiTransferModal.cancelButton = false;
|
||||
this.egiTransferModal.okButton = false;
|
||||
this.egiTransferModal.alertTitle = "EOSC data transfer service";
|
||||
this.egiTransferModal.open();
|
||||
}
|
||||
close(){
|
||||
this.isOpen = false;
|
||||
if(this.isOpen) {
|
||||
this.isOpen = false;
|
||||
this.egiTransferModal.cancel();
|
||||
}
|
||||
// this.downloadElements = [];
|
||||
this.destinationPath = "";
|
||||
this.selectedDestination = this.destinationOptions[0].value;
|
||||
|
|
@ -201,7 +196,7 @@ export class EGIDataTransferComponent {
|
|||
}
|
||||
|
||||
transfer() {
|
||||
console.log(this.selectedDestination)
|
||||
// console.log(this.selectedDestination)
|
||||
this.status = "loading";
|
||||
let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken});
|
||||
this.subscriptions.push(this.http.get(this.APIURL + "/user/info", {headers: headers}).subscribe(
|
||||
|
|
@ -287,7 +282,7 @@ export class EGIDataTransferComponent {
|
|||
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))
|
||||
// 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/'};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,11 @@ import {CommonModule} from '@angular/common';
|
|||
import {FormsModule} from '@angular/forms';
|
||||
import {EGIDataTransferComponent} from "./transferData.component";
|
||||
import {InputModule} from "../../sharedComponents/input/input.module";
|
||||
import {AlertModalModule} from "../modal/alertModal.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, InputModule
|
||||
CommonModule, FormsModule, InputModule, AlertModalModule
|
||||
|
||||
],
|
||||
declarations: [
|
||||
|
|
|
|||
|
|
@ -115,6 +115,12 @@ export class AlertModal {
|
|||
@Input()
|
||||
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.
|
||||
*/
|
||||
|
|
@ -130,11 +136,24 @@ export class AlertModal {
|
|||
*/
|
||||
@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;
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
if(this.emitHidden) {
|
||||
UIkit.util.on('#' + this.id, 'hidden', () => {
|
||||
this.alertHidden.emit(true);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Opens a alert window creating backdrop.
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue