added a status summary line

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

@@ -12,17 +12,18 @@
     <form>
       <ngx-file-drop dropZoneLabel="Drop documents here or" browseBtnLabel="Browse files" (onFileDrop)="dropped($event)"
         (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)" dropZoneClassName="bg-light card"
-        multiple="true" contentClassName="justify-content-center d-flex align-items-center p-5" [showBrowseBtn]=true
+        multiple="true" contentClassName="justify-content-center d-flex align-items-center py-5 px-2" [showBrowseBtn]=true
         browseBtnClassName="btn btn-sm btn-outline-primary ml-2" i18n-dropZoneLabel i18n-browseBtnLabel>
       </ngx-file-drop>
     </form>
+    <p class="mt-3" *ngIf="getStatus().length > 0">{{getStatusSummary()}}</p>
     <div *ngFor="let status of getStatus()">
       <ng-container [ngTemplateOutlet]="consumerAlert" [ngTemplateOutletContext]="{ $implicit: status }"></ng-container>
     </div>
-    <div *ngIf="getStatusesHidden().length" class="alerts-hidden">
-      <p *ngIf="!alertsExpanded" class="mt-3 mb-0 text-center"><span i18n>{{getStatusesHidden().length}} more hidden</span> <button class="btn btn-sm btn-link py-0" (click)="alertsExpanded = !alertsExpanded" aria-controls="hiddenAlerts" [attr.aria-expanded]="alertsExpanded" i18n>Show all</button></p>
+    <div *ngIf="getStatusHidden().length" class="alerts-hidden">
+      <p *ngIf="!alertsExpanded" class="mt-3 mb-0 text-center"><span i18n>{{getStatusHidden().length}} more hidden</span> <button class="btn btn-sm btn-link py-0" (click)="alertsExpanded = !alertsExpanded" aria-controls="hiddenAlerts" [attr.aria-expanded]="alertsExpanded" i18n>Show all</button></p>
       <div #hiddenAlerts="ngbCollapse" [(ngbCollapse)]="!alertsExpanded">
-        <div *ngFor="let status of getStatusesHidden()">
+        <div *ngFor="let status of getStatusHidden()">
           <ng-container [ngTemplateOutlet]="consumerAlert" [ngTemplateOutletContext]="{ $implicit: status }"></ng-container>
         </div>
       </div>

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

@@ -23,7 +23,24 @@ export class UploadFileWidgetComponent implements OnInit {
     return this.consumerStatusService.getConsumerStatus().slice(0, MAX_ALERTS)
   }
 
-  getStatusesHidden() {
+  getStatusSummary() {
+    let strings = []
+    let countUploadingAndProcessing =  this.consumerStatusService.getConsumerStatusNotCompleted().length
+    let countFailed = this.getStatusFailed().length
+    let countSuccess = this.getStatusSuccess().length
+    if (countUploadingAndProcessing > 0) {
+      strings.push($localize`Processing: ${countUploadingAndProcessing}`)
+    }
+    if (countFailed > 0) {
+      strings.push($localize`Failed: ${countFailed}`)
+    }
+    if (countSuccess > 0) {
+      strings.push($localize`Added: ${countSuccess}`)
+    }
+    return strings.join($localize`:this string is used to separate processing, failed and added on the file upload widget:, `)
+  }
+
+  getStatusHidden() {
     if (this.consumerStatusService.getConsumerStatus().length < MAX_ALERTS) return []
     else return this.consumerStatusService.getConsumerStatus().slice(MAX_ALERTS)
   }
@@ -32,6 +49,14 @@ export class UploadFileWidgetComponent implements OnInit {
     return this.consumerStatusService.getConsumerStatus(FileStatusPhase.UPLOADING)
   }
 
+  getStatusFailed() {
+    return this.consumerStatusService.getConsumerStatus(FileStatusPhase.FAILED)
+  }
+
+  getStatusSuccess() {
+    return this.consumerStatusService.getConsumerStatus(FileStatusPhase.SUCCESS)
+  }
+
   getStatusCompleted() {
     return this.consumerStatusService.getConsumerStatusCompleted()
   }

src-ui/src/app/services/consumer-status.service.ts

@@ -90,13 +90,17 @@ export class ConsumerStatusService {
   }
 
   getConsumerStatus(phase?: FileStatusPhase) {
-    if (phase) {
+    if (phase != null) {
       return this.consumerStatus.filter(s => s.phase == phase)
     } else {
       return this.consumerStatus
     }
   }
 
+  getConsumerStatusNotCompleted() {
+    return this.consumerStatus.filter(s => s.phase < FileStatusPhase.SUCCESS)
+  }
+
   getConsumerStatusCompleted() {
     return this.consumerStatus.filter(s => s.phase == FileStatusPhase.FAILED || s.phase == FileStatusPhase.SUCCESS)
   }