From ff28b6e7a972b953c8068bc8c92ebcb210bd7b3a Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Wed, 19 Oct 2022 16:11:54 +0300
Subject: [PATCH] RED-4535: add percentage to progress bar

---
 .../table-item/table-item.component.html           | 13 +++++++------
 .../readonly-banner/readonly-banner.component.html | 11 +++++------
 .../ocr-progress-bar.component.html                | 11 +++++++++++
 .../ocr-progress-bar.component.scss                |  3 +++
 .../ocr-progress-bar/ocr-progress-bar.component.ts | 14 ++++++++++++++
 .../red-ui/src/app/modules/shared/shared.module.ts |  2 ++
 libs/red-domain/src/lib/files/file.model.ts        |  4 ++--
 7 files changed, 44 insertions(+), 14 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/shared/components/ocr-progress-bar/ocr-progress-bar.component.html
 create mode 100644 apps/red-ui/src/app/modules/shared/components/ocr-progress-bar/ocr-progress-bar.component.scss
 create mode 100644 apps/red-ui/src/app/modules/shared/components/ocr-progress-bar/ocr-progress-bar.component.ts

diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html
index 397359a4c..ed9d28e61 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html
@@ -44,12 +44,13 @@
     <div *ngIf="file.isUnprocessed" class="small-label" translate="dossier-overview.file-listing.file-entry.file-pending"></div>
 
     <div class="status-wrapper">
-        <mat-progress-bar
-            *ngIf="file.isOcrProcessing; else defaultProcessing"
-            [mode]="file.numberOfPagesToOCR === 0 ? 'indeterminate' : 'determinate'"
-            [value]="(file.numberOfOCRedPages / file.numberOfPagesToOCR) * 100"
-            class="primary ml-8 w-100"
-        ></mat-progress-bar>
+        <ng-container *ngIf="file.isOcrProcessing; else defaultProcessing">
+            <redaction-ocr-progress-bar
+                [numberOfOCRedPages]="file.numberOfOCRedPages"
+                [numberOfPagesToOCR]="file.numberOfPagesToOCR"
+                [progressColor]="'primary'"
+            ></redaction-ocr-progress-bar>
+        </ng-container>
     </div>
 
     <ng-template #defaultProcessing>
diff --git a/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.html b/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.html
index 0e68deff6..49ffe3991 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.html
@@ -1,12 +1,11 @@
 <div class="justify-center banner read-only d-flex">
     <div *ngIf="file.isFullProcessing" class="ocr-indicator">
         <ng-container *ngIf="file.isOcrProcessing; else defaultProcessing">
-            <span [translate]="'processing.ocr'" class="read-only-text"></span>
-            <mat-progress-bar
-                [mode]="file.numberOfPagesToOCR === 0 ? 'indeterminate' : 'determinate'"
-                [value]="(file.numberOfOCRedPages / file.numberOfPagesToOCR) * 100"
-                class="white ml-8 w-100"
-            ></mat-progress-bar>
+            <redaction-ocr-progress-bar
+                [numberOfOCRedPages]="file.numberOfOCRedPages"
+                [numberOfPagesToOCR]="file.numberOfPagesToOCR"
+                [showLabel]="true"
+            ></redaction-ocr-progress-bar>
         </ng-container>
 
         <ng-template #defaultProcessing>
diff --git a/apps/red-ui/src/app/modules/shared/components/ocr-progress-bar/ocr-progress-bar.component.html b/apps/red-ui/src/app/modules/shared/components/ocr-progress-bar/ocr-progress-bar.component.html
new file mode 100644
index 000000000..8858acbf1
--- /dev/null
+++ b/apps/red-ui/src/app/modules/shared/components/ocr-progress-bar/ocr-progress-bar.component.html
@@ -0,0 +1,11 @@
+<span *ngIf="showLabel" [translate]="'processing.ocr'" class="read-only-text"></span>
+
+<mat-progress-bar
+    [class.primary]="progressColor === 'primary'"
+    [class.white]="progressColor === 'white'"
+    [mode]="numberOfPagesToOCR === 0 ? 'indeterminate' : 'determinate'"
+    [value]="(numberOfOCRedPages / numberOfPagesToOCR) * 100"
+    class="ml-8 mr-8 w-100"
+></mat-progress-bar>
+
+<span>{{ numberOfOCRedPages / numberOfPagesToOCR | percent: '0.0-0' }}</span>
diff --git a/apps/red-ui/src/app/modules/shared/components/ocr-progress-bar/ocr-progress-bar.component.scss b/apps/red-ui/src/app/modules/shared/components/ocr-progress-bar/ocr-progress-bar.component.scss
new file mode 100644
index 000000000..b7ca8fa44
--- /dev/null
+++ b/apps/red-ui/src/app/modules/shared/components/ocr-progress-bar/ocr-progress-bar.component.scss
@@ -0,0 +1,3 @@
+:host {
+    display: contents;
+}
diff --git a/apps/red-ui/src/app/modules/shared/components/ocr-progress-bar/ocr-progress-bar.component.ts b/apps/red-ui/src/app/modules/shared/components/ocr-progress-bar/ocr-progress-bar.component.ts
new file mode 100644
index 000000000..0dffab4c7
--- /dev/null
+++ b/apps/red-ui/src/app/modules/shared/components/ocr-progress-bar/ocr-progress-bar.component.ts
@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'redaction-ocr-progress-bar',
+    templateUrl: './ocr-progress-bar.component.html',
+    styleUrls: ['./ocr-progress-bar.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OcrProgressBarComponent {
+    @Input() numberOfPagesToOCR: number;
+    @Input() numberOfOCRedPages: number;
+    @Input() showLabel = false;
+    @Input() progressColor: 'white' | 'primary' = 'white';
+}
diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts
index a7488077c..5431acdaa 100644
--- a/apps/red-ui/src/app/modules/shared/shared.module.ts
+++ b/apps/red-ui/src/app/modules/shared/shared.module.ts
@@ -34,6 +34,7 @@ import { SharedDialogService } from './services/dialog.service';
 import { AddEditEntityComponent } from './components/add-edit-entity/add-edit-entity.component';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { WatermarkSelectorComponent } from './components/dossier-watermark-selector/watermark-selector.component';
+import { OcrProgressBarComponent } from './components/ocr-progress-bar/ocr-progress-bar.component';
 
 const buttons = [FileDownloadBtnComponent];
 
@@ -56,6 +57,7 @@ const components = [
     AddDossierDialogComponent,
     WatermarkSelectorComponent,
     AddEditEntityComponent,
+    OcrProgressBarComponent,
 
     ...buttons,
 ];
diff --git a/libs/red-domain/src/lib/files/file.model.ts b/libs/red-domain/src/lib/files/file.model.ts
index 516a3705a..9502e5323 100644
--- a/libs/red-domain/src/lib/files/file.model.ts
+++ b/libs/red-domain/src/lib/files/file.model.ts
@@ -129,8 +129,8 @@ export class File extends Entity<IFile> implements IFile {
         this.hasHighlights = file.hasHighlights;
         this.dossierArchived = file.dossierArchived;
         this.dossierTemplateId = file.dossierTemplateId;
-        this.numberOfPagesToOCR = file.numberOfPagesToOCR;
-        this.numberOfOCRedPages = file.numberOfOCRedPages;
+        this.numberOfPagesToOCR = file.numberOfPagesToOCR ?? 0;
+        this.numberOfOCRedPages = file.numberOfOCRedPages ?? 0;
 
         this.statusSort = StatusSorter[this.workflowStatus];
         this.cacheIdentifier = btoa(this.fileManipulationDate ?? '');