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

		<a (click)="open()"
       [title]="'Send data to cloud storage'"
       [attr.uk-tooltip]="'pos: bottom; cls: uk-active  uk-text-small uk-padding-small'"
       class="uk-flex uk-flex-middle uk-button-link"
       [class.uk-text-bolder]="!isMobile">
			<icon flex="true" ratio="1" name="cloud_upload" visuallyHidden="upload"></icon>
      <span [ngClass]="isMobile ? 'uk-margin-small-left' : 'uk-margin-xsmall-left'">Transfer</span>
    </a>

      <!-- This is the modal -->
      <modal-alert #egiTransferModal classBody="uk-container-xlarge" large="true"
                   [okDisabled]="!privacyAccepted || destinationPath.length == 0 || status == 'succeeded' || (requests > 0)
                                || !validatePath() || !validateDestinationUrl() || (!this.downloadElements || this.downloadElements.length == 0)"
                   (alertOutput)="transfer()" (cancelOutput)="init()">
        <ng-container *ngTemplateOutlet="modalContents;"></ng-container>
      </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>
          <!--            Destination -->
          <div *ngIf="destinationOptions" class="destination" [class.uk-margin-top]="isMobile">
            <!--              -->
            <!--              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>
        <!--          [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">
                <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>
          <a *ngIf="requests <= 0" class="uk-alert-close" uk-close></a>
        </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 == 'succeeded' || 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>
    </ng-template>

<!--      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(destinationUrl)[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(destinationUrl)[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>