rework of the front end components

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html

@@ -9,10 +9,16 @@
 
       </ngx-file-drop>
     </form>
-    <div *ngIf="uploadVisible" class="mt-3">
-      <p i18n>{uploadStatus.length, plural, =1 {Uploading file...} =other {Uploading {{uploadStatus.length}} files...}}</p>
-      <ngb-progressbar [value]="loadedSum" [max]="totalSum" [striped]="true" [animated]="uploadStatus.length > 0">
+    <div *ngFor="let status of getStatus()">
+      <p>{{status.filename}}: {{status.message}}</p>
+      <ngb-progressbar [value]="status.getProgress()" [max]="1" [striped]="true" [animated]="!isFinished(status)" [type]="getType(status)">
       </ngb-progressbar>
+
+      <div *ngIf="isFinished(status)" class="mb-2">
+        <button *ngIf="status.documentId" class="btn btn-sm btn-outline-primary mr-2" routerLink="/documents/{{status.documentId}}" (click)="dismiss(status)">Open document</button>
+        <button class="btn btn-sm btn-outline-secondary" (click)="dismiss(status)">Dismiss</button>
+      </div>
+    
     </div>
   </div>
 </app-widget-frame>

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts

@@ -1,15 +1,10 @@
 import { HttpEventType } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
+import { ConsumerStatusService, FileStatus, FileStatusPhase } from 'src/app/services/consumer-status.service';
 import { DocumentService } from 'src/app/services/rest/document.service';
-import { ToastService } from 'src/app/services/toast.service';
 
 
-interface UploadStatus {
-  loaded: number
-  total: number
-}
-
 @Component({
   selector: 'app-upload-file-widget',
   templateUrl: './upload-file-widget.component.html',
@@ -17,8 +12,35 @@ interface UploadStatus {
 })
 export class UploadFileWidgetComponent implements OnInit {
 
-  constructor(private documentService: DocumentService, private toastService: ToastService) { }
+  constructor(
+    private documentService: DocumentService,
+    private consumerStatusService: ConsumerStatusService
+  ) { }
 
+  getStatus() {
+    return this.consumerStatusService.consumerStatus
+  }
+
+  isFinished(status: FileStatus) {
+    return status.phase == FileStatusPhase.FAILED || status.phase == FileStatusPhase.SUCCESS
+  }
+
+  getType(status: FileStatus) {
+    switch (status.phase) {
+      case FileStatusPhase.PROCESSING:
+      case FileStatusPhase.UPLOADING:
+          return "primary"
+      case FileStatusPhase.FAILED:
+        return "danger"
+      case FileStatusPhase.SUCCESS:
+        return "success"
+    }
+  }
+
+  dismiss(status: FileStatus) {
+    this.consumerStatusService.dismiss(status)
+  }
+  
   ngOnInit(): void {
   }
 
@@ -28,54 +50,37 @@ export class UploadFileWidgetComponent implements OnInit {
   public fileLeave(event){
   }
 
-  uploadStatus: UploadStatus[] = []
-  completedFiles = 0
-
-  uploadVisible = false
-
-  get loadedSum() {
-    return this.uploadStatus.map(s => s.loaded).reduce((a,b) => a+b, this.completedFiles > 0 ? 1 : 0)
-  }
-
-  get totalSum() {
-    return this.uploadStatus.map(s => s.total).reduce((a,b) => a+b, 1)
-  }
-
   public dropped(files: NgxFileDropEntry[]) {
     for (const droppedFile of files) {
       if (droppedFile.fileEntry.isFile) {
-      let uploadStatusObject: UploadStatus = {loaded: 0, total: 1}
-      this.uploadStatus.push(uploadStatusObject)
-      this.uploadVisible = true
 
       const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
         fileEntry.file((file: File) => {
           let formData = new FormData()
           formData.append('document', file, file.name)
+          let status = this.consumerStatusService.newFileUpload()
+          status.filename = file.name
 
           this.documentService.uploadDocument(formData).subscribe(event => {
             if (event.type == HttpEventType.UploadProgress) {
-              uploadStatusObject.loaded = event.loaded
-              uploadStatusObject.total = event.total
+              status.updateProgress(FileStatusPhase.UPLOADING, event.loaded, event.total)
             } else if (event.type == HttpEventType.Response) {
-              this.uploadStatus.splice(this.uploadStatus.indexOf(uploadStatusObject), 1)
-              this.completedFiles += 1
-              this.toastService.showInfo($localize`The document has been uploaded and will be processed by the consumer shortly.`)
+              status.taskId = event.body["task_id"]
             }
 
           }, error => {
-            this.uploadStatus.splice(this.uploadStatus.indexOf(uploadStatusObject), 1)
-            this.completedFiles += 1
+            status.updateProgress(FileStatusPhase.FAILED)
             switch (error.status) {
               case 400: {
-                this.toastService.showInfo($localize`There was an error while uploading the document: ${error.error.document}`)
+                status.message = error.error.document
                 break;
               }
               default: {
-                this.toastService.showInfo($localize`An error has occurred while uploading the document. Sorry!`)
+                status.message = $localize`An error has occurred while uploading the document. Sorry!`
                 break;
               }
             }
+
           })
         });
       }