From dcc4eb1efa6256875ce44ae407a812e736b2680c Mon Sep 17 00:00:00 2001
From: paf <paf@titelfrei.de>
Date: Thu, 7 Jan 2021 09:58:42 +0100
Subject: [PATCH] refactor file upload component to display alle the infos and
errors from the endpoint
---
.../workspace-admin/files/files.component.ts | 2 +-
.../iqbFilesUpload.component.html | 24 +++++--
.../iqbFilesUpload.component.ts | 67 ++++++++-----------
.../iqbFilesUploadQueue.component.html | 14 ++--
4 files changed, 55 insertions(+), 52 deletions(-)
diff --git a/src/app/workspace-admin/files/files.component.ts b/src/app/workspace-admin/files/files.component.ts
index 39fe9baa..70542be7 100644
--- a/src/app/workspace-admin/files/files.component.ts
+++ b/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 {
diff --git a/src/app/workspace-admin/files/iqb-files/iqbFilesUpload/iqbFilesUpload.component.html b/src/app/workspace-admin/files/iqb-files/iqbFilesUpload/iqbFilesUpload.component.html
index 4307132f..404def12 100644
--- a/src/app/workspace-admin/files/iqb-files/iqbFilesUpload/iqbFilesUpload.component.html
+++ b/src/app/workspace-admin/files/iqb-files/iqbFilesUpload/iqbFilesUpload.component.html
@@ -1,13 +1,23 @@
<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>
diff --git a/src/app/workspace-admin/files/iqb-files/iqbFilesUpload/iqbFilesUpload.component.ts b/src/app/workspace-admin/files/iqb-files/iqbFilesUpload/iqbFilesUpload.component.ts
index b07fd983..ce7234ba 100644
--- a/src/app/workspace-admin/files/iqb-files/iqbFilesUpload/iqbFilesUpload.component.ts
+++ b/src/app/workspace-admin/files/iqb-files/iqbFilesUpload/iqbFilesUpload.component.ts
@@ -1,11 +1,17 @@
-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]}};
});
}
}
diff --git a/src/app/workspace-admin/files/iqb-files/iqbFilesUploadQueue/iqbFilesUploadQueue.component.html b/src/app/workspace-admin/files/iqb-files/iqbFilesUploadQueue/iqbFilesUploadQueue.component.html
index e40725e9..487f924a 100644
--- a/src/app/workspace-admin/files/iqb-files/iqbFilesUploadQueue/iqbFilesUploadQueue.component.html
+++ b/src/app/workspace-admin/files/iqb-files/iqbFilesUploadQueue/iqbFilesUploadQueue.component.html
@@ -1,17 +1,23 @@
<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>
--
GitLab