Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-4535: add percentage to progress bar

Browse Source
This commit is contained in:
Dan Percic 2022-10-19 16:11:54 +03:00
parent fc660bc274
commit ff28b6e7a9
7 changed files with 44 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html
View File

@ -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>

11
apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.html
View File

@ -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>

11
apps/red-ui/src/app/modules/shared/components/ocr-progress-bar/ocr-progress-bar.component.html Normal file
View File

@ -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>

3
apps/red-ui/src/app/modules/shared/components/ocr-progress-bar/ocr-progress-bar.component.scss Normal file
View File

@ -0,0 +1,3 @@
:host {
display: contents;
}

14
apps/red-ui/src/app/modules/shared/components/ocr-progress-bar/ocr-progress-bar.component.ts Normal file
View File

@ -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';
}

2
apps/red-ui/src/app/modules/shared/shared.module.ts
View File

@ -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,
];

4
libs/red-domain/src/lib/files/file.model.ts
View File

@ -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 ?? '');