files.component.html

<div class="columnhost">
  <div class="spinner-container" *ngIf="dataLoading">
      <mat-spinner></mat-spinner>
  </div>

  <!-- ============================================= -->
  <div class="filelist">
    <mat-table #table [dataSource]="serverfiles" matSort>
      <ng-container matColumnDef="checked">
          <mat-header-cell *matHeaderCellDef class="checkboxcell">
            <mat-checkbox (change)="checkAll($event.checked)"></mat-checkbox>
          </mat-header-cell>
          <mat-cell *matCellDef="let element" class="checkboxcell">
            <mat-checkbox [checked]="element.isChecked" (change)="element.isChecked=$event.checked"></mat-checkbox>
          </mat-cell>
      </ng-container>

      <ng-container matColumnDef="typelabel">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Typ </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.typelabel}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="filename">
        <mat-header-cell *matHeaderCellDef mat-sort-header class="namecell"> Name </mat-header-cell>
        <mat-cell *matCellDef="let element" class="namecell"><a target="_blank" [href]="getDownloadRef(element)">{{element.filename}}</a> </mat-cell>
      </ng-container>

      <ng-container matColumnDef="filedatetime">
        <mat-header-cell *matHeaderCellDef mat-sort-header class="datecell"> Datum </mat-header-cell>
        <mat-cell *matCellDef="let element" class="datecell"> {{element.filedatetimestr}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="filesize">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Größe </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.filesizestr}} </mat-cell>
      </ng-container>


      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
  </div>

  <!-- ============================================= -->
  <div class="uploads">
    <button mat-raised-button (click)="deleteFiles()" matTooltip="Markierte Dateien löschen" matTooltipPosition="above">
      <mat-icon>delete</mat-icon>
    </button>
    <button mat-raised-button (click)="hiddenfileinput.click()" matTooltip="Dateien hochladen/aktualisieren" matTooltipPosition="above">
      <mat-icon>cloud_upload</mat-icon>
    </button>
    <button mat-raised-button (click)="checkWorkspace()" matTooltip="Arbeitsbereich prüfen" matTooltipPosition="above">
      <mat-icon>check</mat-icon>
    </button>

    <input #hiddenfileinput type="file" name="fileforvo" multiple [iqbFilesUploadInputFor]="fileUploadQueue" [hidden]="true"/>

    <iqb-files-upload-queue #fileUploadQueue
      [httpUrl]="uploadUrl"
      [fileAlias]="fileNameAlias"
      [tokenName]="'at'"
      [token]="token"
      [folderName]="'ws'"
      [folder]="workspace"
      (uploadCompleteEvent)="updateFileList()">
    </iqb-files-upload-queue>

    <p *ngFor="let e of checkErrors" class="checkerror">
      {{ e }}
    </p>

    <p *ngFor="let w of checkWarnings" class="checkwarning">
      {{ w }}
    </p>

    <p *ngFor="let i of checkInfos" class="checkinfo">
      {{ i }}
    </p>

    <br/>

  </div>
</div>