openaire-library/utils/dataTransfer/transferData.component.html

       <a (click)="open()"
         [title]="'Send data to cloud storage [demo]'"
         [attr.uk-tooltip]="'pos: right; cls: uk-active  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">
                     <span uk-icon="cloud-upload"></span>
                  </span>
      </a>


      <!-- This is the modal -->
      <modal-alert #egiTransferModal large="true" >

        <div *ngIf="selectedSourceUrl" 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">
<!--            Source -->
            <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 *ngIf="status!='loading'" class="uk-margin-top">
                <div>{{this.downloadElements.length}} files found:</div>
                <div class="uk-overflow-auto" style="max-height: 135px">
                  <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>
              <p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Please select the Destination Storage type:</p>
              <div input type="select" [(value)]="selectedDestination" placeholder="Destination Storage" hint="Select..."
                   [options]="destinationOptions"></div>
              <div *ngIf=" selectedDestination.id == 'dcache' && !accessToken[selectedDestination.id] else showDestinationOptions" 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[selectedDestination.id]" class="uk-button uk-button-default" (click)="checkin()">Login
                  </button>
                </div>
              </div>
              <ng-template #showDestinationOptions>
                <ng-container *ngIf="selectedDestination.id == 'dcache'">
                  <p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Provide the corresponding storage destination path:</p>
                  <div input [(value)]="destinationPath" placeholder="Give a destination path..."
                       [validators]="validators" class=""></div>
                  <div *ngIf="selectedDestination.hasBrowse">
                    <p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top"> or <a class="uk-text-primary" (click)="browseFolder(selectedDestination.defaultFolder)">browse</a> and select the folder</p>
                    <div *ngIf="folders[selectedDestination.defaultFolder]" class="uk-height-small uk-overflow-auto">
                      <ng-container *ngTemplateOutlet="folderListTmpl; context: { folder : folders[selectedDestination.defaultFolder], folderPath: selectedDestination.defaultFolder}"></ng-container>
                    </div>
                    
                  </div>
                </ng-container>
                <ng-container *ngIf="selectedDestination.id == 'ftp'">
                  <p>Comming soon!</p>
                </ng-container>
              </ng-template>
              <button (click)="transfer()"
                      class="uk-button uk-button-primary uk-margin-top"
                      [class.uk-disabled]="destinationPath.length == 0 || status == 'success' ||status == 'loading' || !validatePath() || (!this.downloadElements || this.downloadElements.length == 0)">
                >> 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>
                        </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 *ngIf="jobId || status == 'canceled'">
            <button *ngIf=" status != 'canceled'" class="uk-button uk-button-default" (click)="getStatus()">Check status</button>
            <button *ngIf=" status != 'canceled'" class="uk-button uk-button-default" (click)="cancel()">Cancel</button>
            <div>{{statusMessage}}</div>
          </div>-->
          <div *ngIf=" status != 'canceled'" 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>
          
<!--          TESTS -->
        <!--  <button (click)="hasBrowse()"
                  class="uk-button uk-button-primary uk-margin-top"
          >
            has Browse
          </button>
          <button (click)="createFolder()"
                  class="uk-button uk-button-primary uk-margin-top"
          >
            Create folder new
          </button>
          <button (click)="deleteFolder()"
                  class="uk-button uk-button-primary uk-margin-top"
          >
            delete folder new
          </button>-->
<!--          End of TESTS-->
        </div>
      </modal-alert>

<!--      Browse Templates -->
    <ng-template #folderListTmpl let-folder="folder"  let-folderPath="folderPath" >
      <ng-container *ngTemplateOutlet="folderTmpl; context: { folder: folder, folderPath:folderPath}"></ng-container>
      <ul *ngIf="folders[folderPath] && folders[folderPath].isOpen" class="uk-list uk-list-divider uk-margin-small-left folder " style="border-left: 1px solid #e3e3e3; padding-left: 5px;">
        <li *ngFor=" let file of files[folderPath]">
          <ng-container *ngIf="file.isFolder else itsFile">
            <ng-container *ngTemplateOutlet = "folderListTmpl; context:{ folder: file, folderPath:file.accessUrl.split(selectedDestination.url)[1]}"></ng-container>
          </ng-container>
          <ng-template #itsFile>
            <ng-container *ngTemplateOutlet="fileTmpl; context: { file: file}"></ng-container>
          </ng-template>
        </li>
      </ul>
    </ng-template>

      <ng-template #fileTmpl let-file="file">
        <div class="uk-grid uk-grid-small uk-flex uk-flex-middle">
<!--          <span  uk-icon="file"></span>-->
          <span class="uk-width-expand uk-text-truncate">{{file['name']}}</span>
          <span 
            class="uk-width-auto uk-text-truncate uk-text-small uk-text-italic">{{(file.createdAt?file.createdAt:file.modifiedAt) |date : 'medium'}}</span>
        </div>
      </ng-template>
      
      <ng-template #folderTmpl let-folder="folder" let-folderPath="folderPath">
        <div *ngIf="folder" [class.uk-background-muted]="destinationPath == folderPath">
          <div class="uk-grid uk-grid-small uk-flex uk-flex-middle">
            <a   >
              <div class="uk-grid uk-grid-small">
                <span (click)="browseFolder(folderPath)"  uk-icon="icon:triangle-down; ratio:1.1" 
                      title="Expand/ Collapse"></span> 
                <span  (click)="destinationPath = folderPath" title="Select folder">
                  <span  uk-icon="folder"></span>  <span 
                  class="uk-width-expand uk-text-truncate uk-margin-small-left">{{folder.name?folder.name:folder.accessUrl.split(selectedDestination.url)[1]}}</span>
                <!--<span class="uk-width-auto uk-text-truncate">{{(folder.createdAt?folder.createdAt:folder.modifiedAt) |date : 'medium'}}</span>-->
                </span>
              </div>
            </a>
<!--            <a *ngIf="destinationPath != folderPath" (click)="destinationPath = folderPath" class="uk-button uk-button-default uk-button-small">select</a>-->
          </div>
        </div>
      </ng-template>