[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.

utils/dataTransfer/transferData.component.html

@@ -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>
                   
@@ -89,11 +89,20 @@
                 <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" >

utils/dataTransfer/transferData.component.ts

@@ -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.title = "EOSC Data Transfer [demo]";
-    this.egiTransferModal.stayOpen = true;
     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?

utils/dataTransfer/transferData.module.ts

@@ -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: [

utils/modal/full-screen-modal/full-screen-modal.component.ts

@@ -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()