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

RED-4535: show determinate progress bar for ocr processing

Browse Source
This commit is contained in:
Dan Percic 2022-10-18 17:56:19 +03:00
parent 4569f83173
commit e1d7ba8224
9 changed files with 96 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,9 +40,19 @@
<div [class.extend-cols]="file.isError" class="status-container cell">
<div *ngIf="file.isError" class="small-label error" translate="dossier-overview.file-listing.file-entry.file-error"></div>
<div *ngIf="file.isUnprocessed" class="small-label" translate="dossier-overview.file-listing.file-entry.file-pending"></div>
<div *ngIf="file.isProcessing || file.canBeOpened" class="status-wrapper">
<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>
</div>
<ng-template #defaultProcessing>
<redaction-processing-indicator [file]="file"></redaction-processing-indicator>
<iqser-status-bar
@ -54,7 +64,7 @@
}
]"
></iqser-status-bar>
</div>
</ng-template>
<redaction-file-actions
*ngIf="!file.isProcessing"

17
apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html
View File

@ -32,18 +32,11 @@
</ng-template>
<div class="right-content">
<div *ngIf="state.isReadonly$ | async" class="justify-center banner read-only d-flex">
<div *ngIf="file.isFullProcessing" class="ocr-indicator">
<span *ngIf="file.isOcrProcessing" [translate]="'processing.ocr'" class="read-only-text"></span>
<span *ngIf="!file.isOcrProcessing" [translate]="'processing.basic'" class="read-only-text"></span>
<mat-progress-bar class="white ml-8 w-100" mode="indeterminate"></mat-progress-bar>
</div>
<div class="flex-center">
<mat-icon class="primary-white" svgIcon="red:read-only"></mat-icon>
<span [translate]="(state.dossier$ | async).isActive ? 'readonly' : 'readonly-archived'" class="read-only-text"></span>
</div>
</div>
<redaction-readonly-banner
*ngIf="state.isReadonly$ | async"
[file]="file"
[isDossierActive]="(state.dossier$ | async).isActive"
></redaction-readonly-banner>
<div *ngIf="multiSelectService.active$ | async" class="multi-select">
<div class="selected-wrapper">

38
apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss
View File

@ -4,44 +4,6 @@
display: contents;
}
.banner {
padding: 13px 16px;
color: var(--iqser-white);
justify-content: space-between;
.read-only-text,
.disabled-auto-analysis-text {
font-size: 11px;
font-weight: 600;
line-height: 14px;
text-align: center;
text-transform: uppercase;
}
mat-icon {
height: 14px;
width: 14px;
&.primary-white {
padding-right: 8px;
}
}
.ocr-indicator {
display: flex;
flex: 1;
align-items: center;
}
&.justify-center {
justify-content: center !important;
}
}
.read-only {
background-color: var(--iqser-primary);
}
.disabled-auto-analysis {
background-color: var(--iqser-yellow-2);
}

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

@ -0,0 +1,22 @@
<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>
</ng-container>
<ng-template #defaultProcessing>
<span [translate]="'processing.basic'" class="read-only-text"></span>
<mat-progress-bar class="white ml-8 w-100" mode="indeterminate"></mat-progress-bar>
</ng-template>
</div>
<div class="flex-center">
<mat-icon class="primary-white" svgIcon="red:read-only"></mat-icon>
<span [translate]="isDossierActive ? 'readonly' : 'readonly-archived'" class="read-only-text"></span>
</div>
</div>

36
apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.scss Normal file
View File

@ -0,0 +1,36 @@
.banner {
padding: 13px 16px;
color: var(--iqser-white);
justify-content: space-between;
.read-only-text {
font-size: 11px;
font-weight: 600;
line-height: 14px;
text-align: center;
text-transform: uppercase;
}
mat-icon {
height: 14px;
width: 14px;
&.primary-white {
padding-right: 8px;
}
}
.ocr-indicator {
display: flex;
flex: 1;
align-items: center;
}
&.justify-center {
justify-content: center !important;
}
}
.read-only {
background-color: var(--iqser-primary);
}

13
apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.ts Normal file
View File

@ -0,0 +1,13 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { File } from '@red/domain';
@Component({
selector: 'redaction-readonly-banner',
templateUrl: './readonly-banner.component.html',
styleUrls: ['./readonly-banner.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ReadonlyBannerComponent {
@Input() file: File;
@Input() isDossierActive: boolean;
}

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

@ -51,6 +51,7 @@ import { ImportRedactionsDialogComponent } from './dialogs/import-redactions-dia
import { DocumentUnloadedGuard } from './services/document-unloaded.guard';
import { FilePreviewRightContainerComponent } from './components/right-container/file-preview-right-container.component';
import { RssDialogComponent } from './dialogs/rss-dialog/rss-dialog.component';
import { ReadonlyBannerComponent } from './components/readonly-banner/readonly-banner.component';
const routes: Routes = [
{
@ -95,6 +96,7 @@ const components = [
AnnotationReferenceComponent,
FilePreviewScreenComponent,
FilePreviewRightContainerComponent,
ReadonlyBannerComponent,
];
@NgModule({

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

@ -59,6 +59,8 @@ export class File extends Entity<IFile> implements IFile {
readonly hasHighlights: boolean;
readonly dossierArchived: boolean;
readonly dossierTemplateId: string;
readonly numberOfPagesToOCR: number;
readonly numberOfOCRedPages: number;
readonly statusSort: number;
readonly cacheIdentifier?: string;
@ -127,6 +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.statusSort = StatusSorter[this.workflowStatus];
this.cacheIdentifier = btoa(this.fileManipulationDate ?? '');

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

@ -77,11 +77,11 @@ export interface IFile {
/**
* Number of pages that require OCR.
*/
readonly numberOfPagesToOCR?: number;
readonly numberOfPagesToOCR: number;
/**
* Number of pages already OCR-ed.
*/
readonly numberOfOCRedPages?: number;
readonly numberOfOCRedPages: number;
/**
* OCR end Time.
*/