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

[Library | develop]: resultLanding.component.html & resultLanding.component.ts & transferData.component.html & transferData.component.ts: In desktop view, reverted data transfer modal to normal instead of full screen & small fixes for action icon and modal view | aligned "Go to search" back button with the rest of the page contents.

This commit is contained in:
Konstantina Galouni 2023-07-20 17:06:46 +03:00
parent 73d6a9f32f
commit b18cfcf533
4 changed files with 192 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
landingPages/result/resultLanding.component.html
View File

@ -3,7 +3,7 @@
<div *ngIf="!isMobile" class="tm-main"> <div *ngIf="!isMobile" class="tm-main">
<div class="publication"> <div class="publication">
<div *ngIf="properties.adminToolsPortalType == 'eosc'" class="eosc-explore-back-search-bar"> <div *ngIf="properties.adminToolsPortalType == 'eosc'" class="eosc-explore-back-search-bar">
<div class="uk-light uk-container uk-container-large uk-padding-small uk-height-1-1"> <div class="uk-light uk-container uk-container-large uk-margin-left uk-height-1-1">
<div class="uk-flex uk-flex-inline uk-flex-middle uk-height-1-1"> <div class="uk-flex uk-flex-inline uk-flex-middle uk-height-1-1">
<a [href]="eoscBackLink" target="_self" class="uk-link-reset uk-flex uk-flex-middle uk-text-light uk-text-small"> <a [href]="eoscBackLink" target="_self" class="uk-link-reset uk-flex uk-flex-middle uk-text-light uk-text-small">
<icon name="arrow_back" visuallyHidden="back" flex="true" ratio="0.7" customClass="uk-text-light"></icon> <icon name="arrow_back" visuallyHidden="back" flex="true" ratio="0.7" customClass="uk-text-light"></icon>
@ -489,6 +489,16 @@
<!-- Mobile view --> <!-- Mobile view -->
<div *ngIf="isMobile" class="uk-hidden@m uk-position-relative landing"> <div *ngIf="isMobile" class="uk-hidden@m uk-position-relative landing">
<ng-container *ngIf="resultLandingInfo"> <ng-container *ngIf="resultLandingInfo">
<div *ngIf="properties.adminToolsPortalType == 'eosc'" class="eosc-explore-back-search-bar">
<div class="uk-light uk-container uk-height-1-1">
<div class="uk-flex uk-flex-inline uk-flex-middle uk-height-1-1">
<a [href]="eoscBackLink" target="_self" class="uk-link-reset uk-flex uk-flex-middle uk-text-light uk-text-small">
<icon name="arrow_back" visuallyHidden="back" flex="true" ratio="0.7" customClass="uk-text-light"></icon>
<span class="uk-margin-small-left">Go to Search</span>
</a>
</div>
</div>
</div>
<div *ngIf="mobileContent == 'info'" class="uk-container uk-section"> <div *ngIf="mobileContent == 'info'" class="uk-container uk-section">
<div *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0" <div *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0"
class="uk-margin-small-bottom uk-flex uk-flex-middle" class="uk-margin-small-bottom uk-flex uk-flex-middle"
@ -648,13 +658,21 @@
</a> </a>
<hr class="uk-margin-remove"> <hr class="uk-margin-remove">
</ng-container> </ng-container>
<ng-container>
<div *ngIf=" properties.enableEoscDataTransfer && resultLandingInfo.resultType == 'dataset' &&
resultLandingInfo.identifiers && resultLandingInfo.identifiers.get('doi') &&
resultLandingInfo.identifiers.get('doi').join('').indexOf('zenodo.')!=-1"
class="clickable uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal">
<egi-transfer-data [dois]="resultLandingInfo.identifiers.get('doi')" [isOpen]="egiTransferModalOpen" [isMobile]="true"></egi-transfer-data>
</div>
<hr class="uk-margin-remove">
</ng-container>
</div> </div>
<div class="landing-action-bar-mobile uk-background-default"> <div class="landing-action-bar-mobile uk-background-default">
<div class="uk-container uk-flex-middle uk-grid uk-text-xsmall uk-text-meta" [ngClass]="(resultLandingInfo.measure || hasAltMetrics) ? 'uk-child-width-1-3' : 'uk-child-width-1-2'"> <div class="uk-container uk-flex-middle uk-grid uk-text-xsmall uk-text-meta" [ngClass]="(resultLandingInfo.measure || hasAltMetrics) ? 'uk-child-width-1-3' : 'uk-child-width-1-2'">
<div> <div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'info'"> <a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'info'; egiTransferModalOpen = false;">
<span [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''"> <span [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''">
<icon *ngIf="getTypeName().toLowerCase() == 'publication'" name="description" type="outlined" [flex]="true" [ratio]="2"></icon> <icon *ngIf="getTypeName().toLowerCase() == 'publication'" name="description" type="outlined" [flex]="true" [ratio]="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'research data'" name="database" type="outlined" [flex]="true" [ratio]="2"></icon> <icon *ngIf="getTypeName().toLowerCase() == 'research data'" name="database" type="outlined" [flex]="true" [ratio]="2"></icon>

1
landingPages/result/resultLanding.component.ts
View File

@ -239,6 +239,7 @@ export class ResultLandingComponent {
this.initMetaAndLinks(this.type); this.initMetaAndLinks(this.type);
} }
if(data["egiTransfer"] && data["egiTransfer"] == 't'){ if(data["egiTransfer"] && data["egiTransfer"] == 't'){
this.mobileContent = 'actions';
this.egiTransferModalOpen = true; this.egiTransferModalOpen = true;
} }
this.updateDescription(""); this.updateDescription("");

272
utils/dataTransfer/transferData.component.html
View File

@ -1,143 +1,155 @@
<a (click)="open()" <a (click)="open()"
[title]="'Send data to cloud storage'" [title]="'Send data to cloud storage'"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'" [attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder"> class="uk-flex uk-flex-middle uk-flex-center uk-button-link"
<icon flex="true" ratio="0.8" name="cloud_upload" visuallyHidden="upload"></icon> [class.uk-text-bolder]="!isMobile">
<span class="uk-margin-xsmall-left">Transfer</span> <icon flex="true" ratio="1" name="cloud_upload" visuallyHidden="upload"></icon>
</a> <span [ngClass]="isMobile ? 'uk-margin-small-left' : 'uk-margin-xsmall-left'">Transfer</span>
</a>
<!-- This is the modal --> <!-- This is the modal -->
<fs-modal #egiTransferModal classBody="uk-container-xlarge" [okButtonDisabled]="destinationPath.length == 0 || status == 'succeeded' <modal-alert #egiTransferModal classBody="uk-container-xlarge" large="true"
|| (requests > 0) || !validatePath() || !validateDestinationUrl() || (!this.downloadElements || this.downloadElements.length == 0)" [okDisabled]="!privacyAccepted || destinationPath.length == 0 || status == 'succeeded' || (requests > 0)
(okEmitter)="transfer()" (cancelEmitter)="init()"> || !validatePath() || !validateDestinationUrl() || (!this.downloadElements || this.downloadElements.length == 0)"
<div *ngIf="!accessToken" class=""> (alertOutput)="transfer()" (cancelOutput)="init()">
<div class="uk-width-1-1 uk-margin-bottom uk-text-center"> <ng-container *ngTemplateOutlet="modalContents;"></ng-container>
In order to send data to a Cloud Storage, you would need to be authenticated, please login via EGI check-in. </modal-alert>
<fs-modal #egiTransferFsModal classTitle="uk-tile-default uk-border-bottom" classBody="uk-container-xlarge"
[okButtonDisabled]="!privacyAccepted || destinationPath.length == 0 || status == 'succeeded' || (requests > 0)
|| !validatePath() || !validateDestinationUrl() || (!this.downloadElements || this.downloadElements.length == 0)"
(okEmitter)="transfer()" (cancelEmitter)="init()">
<ng-container *ngTemplateOutlet="modalContents;"></ng-container>
</fs-modal>
<ng-template #modalContents>
<div *ngIf="!accessToken" class="">
<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">
<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-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@m 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..." [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-margin-small-top uk-height-max-medium 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>
<div class="uk-text-center"> <!-- Destination -->
<button *ngIf="!accessToken" class="uk-button uk-button-default" (click)="checkin()">Login <div *ngIf="destinationOptions" class="destination" [class.uk-margin-top]="isMobile">
</button> <!-- -->
<!-- Testing:<br>-->
<!-- https://dcache-demo.desy.de:2443-->
<!-- <br>-->
<!-- /Demonstrators/EOSC-Future/EGI/-->
<!-- <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..." [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" [inputClass]="'flat'"
[validators]="URLValidators" class=""></div>
<ng-container
*ngIf="selectedDestination.authType == 'password' || selectedDestination.authType == 'keys'">
<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') " [inputClass]="'flat x-small'"
class=""></div>
<div input password=true [(value)]="destinationAuthPass" [placeholder]="'Give ' + (selectedDestination.authType ==
'password'? 'password':'secret key') " [inputClass]="'flat x-small'"
class=""></div>
</div>
<!-- <div class="uk-text-xsmall">You can check our data protection policy <a class="custom-external" href="https://www.openaire.eu/data-protection-policy" target="_blank">here</a>.</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" [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-max-medium uk-overflow-auto">
<ng-container *ngTemplateOutlet="folderListTmpl; context: { folder : folders['/'], folderPath: '/'}"></ng-container>
</div>
<!-- </div>-->
<ng-container *ngIf="selectedDestination.destination == 'ftp'">
<p>Comming soon!</p>
</ng-container>
<div class="uk-margin-top">
<!-- (ngModelChange)="filterChange(value.selected)"-->
<input type="checkbox" class="uk-checkbox"
[(ngModel)]="privacyAccepted"/>
<span class="uk-margin-small-left uk-text-small">*I have read and accepted the data protection policy <a class="custom-external" href="https://www.openaire.eu/data-protection-policy" target="_blank">here</a>.</span>
</div>
<div *ngIf="isMobile" class="uk-align-right uk-margin-medium-top uk-margin-bottom">
<button class="uk-button uk-button-primary"
[disabled]="!privacyAccepted || destinationPath.length == 0 || status == 'succeeded'
|| (requests > 0) || !validatePath() || !validateDestinationUrl() || (!this.downloadElements || this.downloadElements.length == 0)"
[class.uk-disabled]="!privacyAccepted || destinationPath.length == 0 || status == 'succeeded'
|| (requests > 0) || !validatePath() || !validateDestinationUrl() || (!this.downloadElements || this.downloadElements.length == 0)"
(click)="transfer()">
>> Transfer
</button>
</div>
</div> </div>
</div> </div>
<div *ngIf="accessToken" class=""> <!-- [class.uk-alert-success]="status && status.indexOf('error')==-1"-->
<div class="uk-width-1-1 uk-margin-bottom uk-text-center"> <!-- [class.uk-alert-error]="status && status.indexOf('error')!=-1">-->
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 id="transferAlert" *ngIf="message" class="uk-width-1-1 uk-alert uk-margin-medium-top" [ngClass]="'uk-alert-'+statusMessage" uk-alert>
</div> <div [innerHTML]="message"></div>
<div class="uk-grid uk-grid-small uk-child-width-1-2 uk-grid-divider"> <!-- <a *ngIf="status != 'succeeded' && status != 'active'" (click)="transfer()">-->
<!-- Source --> <!-- Try again!-->
<div class="uk-first-column source"> <!-- </a>-->
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Available DOI URLs:</p> <div *ngIf="requests > 0" class="uk-flex uk-flex-center uk-text-muted">
<div input type="select" [(value)]="selectedSourceUrl" hint="Select..." [inputClass]="'flat'" <div>
[options]="sourceUrls" (valueChange)="this.parse()"></div>
<div *ngIf="status!='active'" class="uk-margin-top">
<div>{{this.downloadElements.length}} files found:</div>
<div class="uk-margin-small-top uk-height-max-medium 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>
<!-- Destination -->
<div *ngIf="destinationOptions" class="destination">
<!-- -->
<!-- Testing:<br>-->
<!-- https://dcache-demo.desy.de:2443-->
<!-- <br>-->
<!-- /Demonstrators/EOSC-Future/EGI/-->
<!-- <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..." [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" [inputClass]="'flat'"
[validators]="URLValidators" class=""></div>
<ng-container
*ngIf="selectedDestination.authType == 'password' || selectedDestination.authType == 'keys'">
<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') " [inputClass]="'flat x-small'"
class=""></div>
<div input password=true [(value)]="destinationAuthPass" [placeholder]="'Give ' + (selectedDestination.authType ==
'password'? 'password':'secret key') " [inputClass]="'flat x-small'"
class=""></div>
</div>
<!-- <div class="uk-text-xsmall">You can check our data protection policy <a class="custom-external" href="https://www.openaire.eu/data-protection-policy" target="_blank">here</a>.</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" [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-max-medium uk-overflow-auto">
<ng-container *ngTemplateOutlet="folderListTmpl; context: { folder : folders['/'], folderPath: '/'}"></ng-container>
</div>
<!-- </div>-->
<ng-container *ngIf="selectedDestination.destination == 'ftp'">
<p>Comming soon!</p>
</ng-container>
<div class="uk-margin-top">
<!-- (ngModelChange)="filterChange(value.selected)"-->
<input type="checkbox" class="uk-checkbox"
[(ngModel)]="privacyAccepted"/>
<span class="uk-margin-small-left uk-text-small">*I have read and accepted the data protection policy <a class="custom-external" href="https://www.openaire.eu/data-protection-policy" target="_blank">here</a>.</span>
</div>
<div class="uk-align-right uk-margin-medium-top uk-margin-bottom">
<button class="uk-button uk-button-primary"
[disabled]="!privacyAccepted || destinationPath.length == 0 || status == 'succeeded'
|| (requests > 0) || !validatePath() || !validateDestinationUrl() || (!this.downloadElements || this.downloadElements.length == 0)"
[class.uk-disabled]="!privacyAccepted || destinationPath.length == 0 || status == 'succeeded'
|| (requests > 0) || !validatePath() || !validateDestinationUrl() || (!this.downloadElements || this.downloadElements.length == 0)"
(click)="transfer()">
>> Transfer
</button>
</div>
</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 uk-margin-medium-top" [ngClass]="'uk-alert-'+statusMessage" uk-alert>
<div [innerHTML]="message"></div>
<!-- <a *ngIf="status != 'succeeded' && status != 'active'" (click)="transfer()">-->
<!-- Try again!-->
<!-- </a>-->
<div *ngIf="requests > 0" 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>
<a *ngIf="requests <= 0" class="uk-alert-close" uk-close></a>
</div> </div>
<!-- <div *ngIf="jobId || status == 'canceled'"> <a *ngIf="requests <= 0" class="uk-alert-close" uk-close></a>
<button *ngIf=" status != 'canceled'" class="uk-button uk-button-default" (click)="getStatus()">Check status</button> </div>
<button *ngIf=" status != 'canceled'" class="uk-button uk-button-default" (click)="cancel()">Cancel</button> <!-- <div *ngIf="jobId || status == 'canceled'">
<div>{{statusMessage}}</div> <button *ngIf=" status != 'canceled'" class="uk-button uk-button-default" (click)="getStatus()">Check status</button>
</div>--> <button *ngIf=" status != 'canceled'" class="uk-button uk-button-default" (click)="cancel()">Cancel</button>
<!-- <div *ngIf=" status != 'canceled'" class="uk-width-1-1 uk-text-right "--> <div>{{statusMessage}}</div>
<!-- [class.uk-invisible]="!(status == 'succeeded' || status.indexOf('error')!=-1)">--> </div>-->
<!-- <button class="uk-button uk-button-default uk-margin-top " (click)="close()">Close</button>--> <!-- <div *ngIf=" status != 'canceled'" class="uk-width-1-1 uk-text-right "-->
<!-- </div>--> <!-- [class.uk-invisible]="!(status == 'succeeded' || status.indexOf('error')!=-1)">-->
<!-- <button class="uk-button uk-button-default uk-margin-top " (click)="close()">Close</button>-->
<!-- TESTS --> <!-- </div>-->
<!-- TESTS -->
<!-- <button (click)="hasBrowse()" <!-- <button (click)="hasBrowse()"
class="uk-button uk-button-primary uk-margin-top" class="uk-button uk-button-primary uk-margin-top"
> >
@ -153,9 +165,9 @@
> >
delete folder new delete folder new
</button>--> </button>-->
<!-- End of TESTS--> <!-- End of TESTS-->
</div> </div>
</fs-modal> </ng-template>
<!-- Browse Templates --> <!-- Browse Templates -->
<ng-template #folderListTmpl let-folder="folder" let-folderPath="folderPath" > <ng-template #folderListTmpl let-folder="folder" let-folderPath="folderPath" >

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

@ -10,6 +10,7 @@ import {delay, repeat, startWith, switchMap} from "rxjs/operators";
import {StringUtils} from "../string-utils.class"; import {StringUtils} from "../string-utils.class";
import {HelperFunctions} from "../HelperFunctions.class"; import {HelperFunctions} from "../HelperFunctions.class";
import {FullScreenModalComponent} from "../modal/full-screen-modal/full-screen-modal.component"; import {FullScreenModalComponent} from "../modal/full-screen-modal/full-screen-modal.component";
import {AlertModal} from "../modal/alert";
declare var UIkit; declare var UIkit;
@Component({ @Component({
@ -35,6 +36,7 @@ declare var UIkit;
`] `]
}) })
export class EGIDataTransferComponent { export class EGIDataTransferComponent {
@Input() isMobile: boolean = false;
subscriptions = []; subscriptions = [];
statusSub: Subscription[] = []; statusSub: Subscription[] = [];
accessToken = null; accessToken = null;
@ -55,7 +57,8 @@ export class EGIDataTransferComponent {
downloadElements = null; downloadElements = null;
@Input() isOpen = false; @Input() isOpen = false;
// @Input() selectedDestinationId = "dcache"; // @Input() selectedDestinationId = "dcache";
@ViewChild('egiTransferModal') egiTransferModal: FullScreenModalComponent; @ViewChild('egiTransferModal') egiTransferModal: AlertModal;
@ViewChild('egiTransferFsModal') egiTransferFsModal: FullScreenModalComponent;
APIURL = properties.eoscDataTransferAPI; APIURL = properties.eoscDataTransferAPI;
// status: "loading" | "success" | "errorParser" | "errorUser" | "errorTransfer" | "init" | "canceled" = "init"; // status: "loading" | "success" | "errorParser" | "errorUser" | "errorTransfer" | "init" | "canceled" = "init";
status: "unused" | "staging" | "submitted" | "active" | "succeeded" | "partial" | "failed" | "canceled" | "errorParser" | "errorUser" | "init" = "init"; status: "unused" | "staging" | "submitted" | "active" | "succeeded" | "partial" | "failed" | "canceled" | "errorParser" | "errorUser" | "init" = "init";
@ -146,20 +149,36 @@ export class EGIDataTransferComponent {
this.parse(); this.parse();
} }
this.isOpen = true; this.isOpen = true;
this.egiTransferModal.back = true;
this.egiTransferModal.cancelButton = false;
this.egiTransferModal.okButton = false;
this.egiTransferModal.okButtonText = ">> Transfer";
this.egiTransferModal.title = "EOSC Data Transfer";
this.init(); this.init();
if(typeof document !== 'undefined') {
this.egiTransferModal.open(); if(!this.isMobile) {
// this.egiTransferModal.back = true;
this.egiTransferModal.cancelButton = false;
this.egiTransferModal.okButton = true;
this.egiTransferModal.okButtonText = ">> Transfer";
this.egiTransferModal.alertTitle = "EOSC Data Transfer";
if(typeof document !== 'undefined') {
this.egiTransferModal.open();
}
} else {
this.egiTransferFsModal.back = false;
this.egiTransferFsModal.cancelButton = true;
this.egiTransferFsModal.okButton = false;
this.egiTransferFsModal.okButtonText = ">> Transfer";
this.egiTransferFsModal.title = "EOSC Data Transfer";
if(typeof document !== 'undefined') {
this.egiTransferFsModal.open();
}
} }
} }
close(){ close(){
if(this.isOpen) { if(this.isOpen) {
this.isOpen = false; this.isOpen = false;
this.egiTransferModal.cancel(); if(!this.isMobile) {
this.egiTransferModal.cancel();
} else {
this.egiTransferFsModal.cancel();
}
} }
// this.downloadElements = []; // this.downloadElements = [];
this.init(); this.init();