files.component.html

<div class="columnhost">
  <!-- ============================================= -->
  <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">
          <button mat-button (click)="download(element)">{{element.filename}}</button>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="status">
        <mat-header-cell *matHeaderCellDef mat-sort-header class="namecell"></mat-header-cell>
        <mat-cell *matCellDef="let element" class="namecell">
          <div class="file-report" >
            <div *ngFor="let level of ['error', 'warning', 'info']" class="vertical-align-middle">
              <ng-container *ngIf="element.report[level] && element.report[level].length">
                <div>{{element.report[level].length}}</div>
                <mat-icon class="report-{{level}}">{{level}}</mat-icon>
              </ng-container>
            </div>
            <div class="full-file-report">
              <ng-container *ngFor="let level of ['error', 'warning', 'info']">
                <div *ngFor="let message of element.report[level]">
                  <div class="vertical-align-middle">
                    <mat-icon class="report-{{level}}">{{level}}</mat-icon>
                    <alert text="{{message}}"></alert>
                  </div>
                </div>
              </ng-container>
            </div>
          </div>
        </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" [disabled]="wds.wsRole !== 'RW'">
      <mat-icon>delete</mat-icon>
    </button>
    <button mat-raised-button (click)="hiddenfileinput.click()" matTooltip="Dateien hochladen/aktualisieren" matTooltipPosition="above" [disabled]="wds.wsRole !== 'RW'">
      <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]="'kisduUjjw.;kiskw..9200'"
      [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>

    <div *ngFor="let stat of fileStats.types | keyvalue">
      <div class="vertical-align-middle">
        <mat-icon class="report-info">info</mat-icon>
        <span>
          {{stat.value.valid}} valide Datei{{stat.value.valid == 1 ? '' : 'en'}} vom Typ {{stat.key}}
          {{(stat.value.all > stat.value.valid) ? '(von insgesamt ' + stat.value.all + ')' : ''}}
        </span>
      </div>
    </div>

    <div *ngIf="fileStats.valid < fileStats.all">
      <div class="vertical-align-middle">
        <mat-icon class="report-warning">warning</mat-icon>
        <span>
          {{fileStats.valid}} Datei{{fileStats.valid == 1 ? '' : 'en'}} von {{fileStats.all}}
          sind nicht valide oder haben fehlende Abhängigkeiten und werden ignoriert!
        </span>
      </div>
    </div>

  </div>
</div>
<