refactor file upload component to display alle the infos and errors from the endpoint

src/app/workspace-admin/files/files.component.ts

@@ -146,7 +146,7 @@ export class FilesComponent implements OnInit {
     this.checkWarnings = [];
     this.checkInfos = [];
 
-    if (empty || this.wds.wsRole === 'MO') {
+    if (empty) {
       this.serverfiles = new MatTableDataSource([]);
       this.mds.setSpinnerOff();
     } else {

src/app/workspace-admin/files/iqb-files/iqbFilesUpload/iqbFilesUpload.component.html

 <mat-card>
     <span class="file-info">{{file.name}} ({{file.size | bytes}})</span>
-    <section *ngIf="status<=1" class="example-section">
+
+    <a *ngIf="status == 0"><mat-icon class="action" (click)="upload()">file_upload</mat-icon></a>
+
+    <section *ngIf="status == 1" class="example-section">
         <mat-progress-bar class="example-margin" [value]="progressPercentage"></mat-progress-bar>
-        <a *ngIf="status == 0"><mat-icon class="action" (click)="upload()">file_upload</mat-icon></a>
+        <span class="file-info">{{progressPercentage}} %</span><br/>
         <mat-icon class="action" (click)="remove()">cancel</mat-icon>
     </section>
-    <span *ngIf="status == 1" class="file-info">{{progressPercentage}} %</span><br/>
-    <span *ngIf="status != 1">
-      <span *ngIf="status == 3" class="file-info-error">{{statustext}}</span>
-      <span *ngIf="status != 3" class="file-info">{{statustext}}</span>
-    </span>
+
+    <ng-container *ngIf="status > 1">
+      <ng-container *ngFor="let uploadedFile of uploadResponse | keyvalue">
+        <div><b>{{uploadedFile.key}}</b></div>
+        <ng-container *ngFor="let report of uploadedFile.value | keyvalue">
+          <div *ngFor="let reportEntry of report.value" class="vertical-align-middle">
+            <mat-icon class="alert-{{report.key}}">{{report.key}}</mat-icon>
+            <span>{{reportEntry}}</span>
+          </div>
+        </ng-container>
+      </ng-container>
+    </ng-container>
 </mat-card>

src/app/workspace-admin/files/iqb-files/iqbFilesUpload/iqbFilesUpload.component.ts

-import {Component, EventEmitter, Input, OnInit, Output, HostBinding, OnDestroy} from '@angular/core';
-import {
-  HttpClient, HttpEventType, HttpHeaders, HttpParams,
-  HttpEvent, HttpErrorResponse
-} from '@angular/common/http';
+import {Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {HttpClient, HttpErrorResponse, HttpEvent, HttpEventType, HttpHeaders, HttpParams} from '@angular/common/http';
 import {ApiError} from '../../../../app.interfaces';
 
 
+interface uploadResponse {
+  [filename: string]: {
+    warning?: string[];
+    error?: string[];
+    info?: string[];
+  }
+}
+
+
 @Component({
     selector: 'iqb-files-upload',
     templateUrl: `./iqbFilesUpload.component.html`,
@@ -31,24 +37,16 @@ import {ApiError} from '../../../../app.interfaces';
     }
 
 
-    private requestResponseText: string;
-    get statustext(): string {
-      let myreturn;
+    private requestResponse: uploadResponse;
+    get uploadResponse(): uploadResponse {
       switch (this._status) {
-        case UploadStatus.busy: {
-          myreturn = 'Bitte warten';
-          break;
-        }
-        case UploadStatus.ready: {
-          myreturn = 'Bereit';
-          break;
-        }
-        default: {
-          myreturn = this.requestResponseText;
-          break;
-        }
+        case UploadStatus.busy:
+          return {'': {info: ['Bitte warten']}};
+        case UploadStatus.ready:
+          return {'': {info: ['Bereit']}};
+        default:
+          return this.requestResponse;
       }
-      return myreturn;
     }
 
     /* Http request input bindings */
@@ -113,7 +111,7 @@ import {ApiError} from '../../../../app.interfaces';
 
     ngOnInit() {
       this._status = UploadStatus.ready;
-      this.requestResponseText = '';
+      this.requestResponse = {};
       this.upload();
     }
 
@@ -146,33 +144,22 @@ import {ApiError} from '../../../../app.interfaces';
             this.total = event.total;
             this.status = UploadStatus.busy;
           } else if (event.type === HttpEventType.Response) {
-            this.requestResponseText = event.body;
-            if ((this.requestResponseText.length > 5) && (this.requestResponseText.substr(0, 2) === 'e:')) {
-              this.requestResponseText = this.requestResponseText.substr(2);
-              this.status = UploadStatus.error;
-            } else {
-              this.status = UploadStatus.ok;
-              this.remove();
-            }
+            this.requestResponse = event.body;
+            console.log(event.body);
+            this.status = UploadStatus.ok;
           }
         }, (err) => {
           if (this.fileUploadSubscription) {
             this.fileUploadSubscription.unsubscribe();
           }
           this.status = UploadStatus.error;
+          let errorText = 'Hochladen nicht erfolgreich.';
           if (err instanceof HttpErrorResponse) {
-            this.requestResponseText = (err as HttpErrorResponse).message;
+            errorText = (err as HttpErrorResponse).message;
           } else if (err instanceof ApiError) {
-            const apiError: ApiError = err;
-            if (apiError.code === 422) {
-              const slashPos = apiError.info.indexOf(' // ');
-              this.requestResponseText = (slashPos > 0) ? apiError.info.substr(slashPos + 4) : apiError.info;
-            } else {
-              this.requestResponseText = apiError.info;
-            }
-          } else {
-            this.requestResponseText = 'Hochladen nicht erfolgreich.';
+            errorText = err.info;
           }
+          this.requestResponse = {'': {error: [errorText]}};
         });
       }
     }

src/app/workspace-admin/files/iqb-files/iqbFilesUploadQueue/iqbFilesUploadQueue.component.html

 <iqb-files-upload
+  *ngFor="let file of files; let i = index"
   [file]="file"
   [id]="i"
-  *ngFor="let file of files; let i = index"
   [httpUrl]="httpUrl"
   [fileAlias]="fileAlias"
   [tokenName]="tokenName"
   [token]="token"
   [folderName]="folderName"
   [folder]="folder"
-
   (removeFileRequestEvent)="removeFile($event)"
   (statusChangedEvent)="analyseStatus()">
 </iqb-files-upload>
+
 <br/>
-<button mat-raised-button color="primary" *ngIf="files.length > 0" [disabled]="disableClearButton"
-  (click)="removeAll()">OK</button>
+
+<button
+  mat-raised-button
+  color="primary"
+  *ngIf="files.length > 0"
+  [disabled]="disableClearButton"
+  (click)="removeAll()"
+>OK</button>