From 1cbb928778962df2815ab5246d18e76a1cb01ac3 Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Wed, 16 Jun 2021 16:32:04 +0300 Subject: [PATCH] Improve processing indicator --- .../smtp-config-screen.component.scss | 5 - .../file-workload.component.html | 55 +++---- .../file-workload.component.scss | 16 +- .../file-workload/file-workload.component.ts | 17 ++- .../dossier-overview-screen.component.html | 2 +- .../file-preview-screen.component.html | 43 ++---- .../file-preview-screen.component.ts | 138 ++++++------------ .../status-bar/status-bar.component.ts | 7 +- .../src/app/services/permissions.service.ts | 2 +- apps/red-ui/src/assets/i18n/de.json | 2 +- apps/red-ui/src/assets/i18n/en.json | 2 +- .../src/assets/styles/red-page-layout.scss | 5 + 12 files changed, 123 insertions(+), 171 deletions(-) diff --git a/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.scss index 5b53d4f8d..84d3d1473 100644 --- a/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.scss @@ -8,8 +8,3 @@ @include scroll-bar; overflow: auto; } - -.w-100 { - min-width: 100px; - width: 100px; -} diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html index 350f4f813..b400bee74 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html +++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html @@ -17,10 +17,16 @@
- - - - +
+
+ + +
+
+ + +
+
- {{ activeViewerPage }} - - {{ displayedAnnotations[activeViewerPage]?.annotations?.length || 0 }} + + {{ activeViewerPage }} - + {{ activeAnnotationsLength || 0 }} + [translate]="activeAnnotationsLength === 1 ? 'annotation' : 'annotations'" + > +
@@ -170,14 +172,9 @@
{{ annotation.typeLabel | translate }}
-
- {{ annotation.descriptor | translate }} + + {{ annotation.descriptor | translate }}: {{ annotation.dictionary | humanize: false }}
@@ -200,25 +197,15 @@
{{ annotation.comments.length }}
-
+
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss index 8247e3df5..8e225c5d7 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss +++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss @@ -2,12 +2,12 @@ @import '../../../../../assets/styles/red-mixins'; .read-only { - padding: 13px 0; + padding: 13px 16px; background-color: $primary; color: $white; + justify-content: space-between; .read-only-text { - padding-left: 8px; font-size: 11px; font-weight: 600; line-height: 14px; @@ -18,6 +18,18 @@ mat-icon { height: 14px; width: 14px; + + &.red-white { + padding-right: 8px; + } + } + + mat-progress-bar { + margin-left: 8px; + } + + &.justify-center { + justify-content: center !important; } } diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts index 52ff09998..c7bff61db 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts @@ -20,6 +20,7 @@ import { FileDataModel } from '@models/file/file-data.model'; import { FilterModel } from '@shared/components/filters/popup-filter/model/filter.model'; import { CommentsComponent } from '../comments/comments.component'; import { PermissionsService } from '../../../../services/permissions.service'; +import { TranslateService } from '@ngx-translate/core'; const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape']; const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']; @@ -57,7 +58,8 @@ export class FileWorkloadComponent { constructor( private readonly _changeDetectorRef: ChangeDetectorRef, private readonly _annotationProcessingService: AnnotationProcessingService, - private readonly _permissionsService: PermissionsService + private readonly _permissionsService: PermissionsService, + private readonly _translateService: TranslateService ) {} private _annotations: AnnotationWrapper[]; @@ -69,6 +71,14 @@ export class FileWorkloadComponent { private _multiSelectActive = false; + get isProcessing(): boolean { + return this.fileData.fileStatus.isProcessing; + } + + get activeAnnotationsLength(): number | undefined { + return this.displayedAnnotations[this.activeViewerPage]?.annotations?.length; + } + get isReadOnly(): boolean { return !this._permissionsService.canPerformAnnotationActions(); } @@ -105,6 +115,11 @@ export class FileWorkloadComponent { } } + commentsTooltip({ comments }: AnnotationWrapper): string { + const i18nString = 'comments.' + (comments.length === 1 ? 'comment' : 'comments'); + return this._translateService.instant(i18nString, { count: comments.length }); + } + annotationIsSelected(annotation: AnnotationWrapper) { return this.selectedAnnotations?.find(a => a?.id === annotation.id); } diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html index 830c4cf96..d99a00d40 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html @@ -209,7 +209,7 @@
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html index 4b21400ac..d9c1be49d 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html @@ -31,13 +31,15 @@
- - + + + -
- {{ status | translate }} - {{ 'by' | translate }}: -
+
+ {{ status | translate }} + {{ 'by' | translate }}: +
+ -
+
- +
@@ -196,17 +187,7 @@
- -

{{ loadingMessage | translate }}

-
- -
+ diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts index 9341ce02f..868ad1585 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts @@ -59,16 +59,12 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy, OnAttach, fullScreen = false; editingReviewer = false; shouldDeselectAnnotationsOnPageChange = true; - analysisProgressInSeconds = 0; - analysisProgress: number; - analysisInterval: number; fileData: FileDataModel; annotationData: AnnotationData; selectedAnnotations: AnnotationWrapper[]; viewReady = false; primaryFilters: FilterModel[]; secondaryFilters: FilterModel[]; - loadingMessage: string; canPerformAnnotationActions: boolean; filesAutoUpdateTimer: Subscription; fileReanalysedSubscription: Subscription; @@ -141,24 +137,22 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy, OnAttach, get canSwitchToDeltaView() { return ( - this.fileData && - this.fileData.redactionChangeLog?.redactionLogEntry?.length > 0 && + this.fileData?.redactionChangeLog?.redactionLogEntry?.length > 0 && !this.fileData.fileStatus.isExcluded ); } + get canAssign(): boolean { + return ( + !this.editingReviewer && + (this.permissionsService.canAssignUser() || this.permissionsService.canAssignToSelf()) + ); + } + get displayData() { return this.fileData?.fileData; } - get indeterminateMode() { - return ( - this.analysisProgress > 100 || - this.appStateService.activeFile.analysisDuration < 3 * 1000 - // it takes longer than usual - switch to indeterminate - ); // on less than 3 seconds show indeterminate - } - get dossierId() { return this.appStateService.activeDossierId; } @@ -171,6 +165,10 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy, OnAttach, return !!this._workloadComponent?.multiSelectActive; } + get lastReviewer(): string | undefined { + return this.appStateService.activeFile.fileStatus.lastReviewer; + } + updateViewMode() { const annotations = this._getAnnotations(a => a.getCustomData('redacto-manager')); const redactions = annotations.filter(a => a.getCustomData('redaction')); @@ -239,6 +237,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy, OnAttach, } catch (error) {} this._subscribeToFileUpdates(); + this.viewReady = true; } ngOnDestroy(): void { @@ -254,9 +253,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy, OnAttach, imported: true, force: true }); - } catch (error) { - // nothing - } + } catch (error) {} } console.log( '[REDACTION] Delete previous annotations time: ' + @@ -438,9 +435,6 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy, OnAttach, case 'enable-analysis': case 'reanalyse': - this.viewReady = false; - this._startAnalysisTimer(); - this.loadingMessage = 'file-preview.reanalyse-file'; await this._loadFileData(); this._updateCanPerformActions(); await this.appStateService.reloadActiveDossierFiles(); @@ -555,19 +549,13 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy, OnAttach, private _subscribeToFileUpdates(): void { this.filesAutoUpdateTimer = timer(0, 5000) - .pipe( - tap(async () => { - await this.appStateService.reloadActiveFile(); - }) - ) + .pipe(tap(async () => await this.appStateService.reloadActiveFile())) .subscribe(); this.fileReanalysedSubscription = this.appStateService.fileReanalysed.subscribe( async (fileStatus: FileStatusWrapper) => { if (fileStatus.fileId === this.fileId) { await this._loadFileData(true); this.viewReady = true; - this.loadingMessage = null; - this._stopAnalysisTimer(); this._updateCanPerformActions(); this._cleanupAndRedrawManualAnnotations(); } @@ -585,32 +573,26 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy, OnAttach, this.permissionsService.canPerformAnnotationActions() && this.viewMode === 'STANDARD'; } - private _loadFileData(performUpdate: boolean = false) { - return this._fileDownloadService - .loadActiveFileData() - .pipe( - tap(fileDataModel => { - if (fileDataModel.fileStatus.isWorkable) { - if (performUpdate) { - this.fileData.redactionLog = fileDataModel.redactionLog; - this.fileData.redactionChangeLog = fileDataModel.redactionChangeLog; - this.fileData.fileStatus = fileDataModel.fileStatus; - this.fileData.manualRedactions = fileDataModel.manualRedactions; - this.rebuildFilters(true); - } else { - this.fileData = fileDataModel; - this.rebuildFilters(); - } - } else { - if (fileDataModel.fileStatus.isError) { - this._router.navigate(['/main/dossiers/' + this.dossierId]); - } else { - this.loadingMessage = 'file-preview.reanalyse-file'; - } - } - }) - ) - .toPromise(); + private async _loadFileData(performUpdate: boolean = false): Promise { + const fileData = await this._fileDownloadService.loadActiveFileData().toPromise(); + if (!fileData.fileStatus.isPending && !fileData.fileStatus.isError) { + if (performUpdate) { + this.fileData.redactionLog = fileData.redactionLog; + this.fileData.redactionChangeLog = fileData.redactionChangeLog; + this.fileData.fileStatus = fileData.fileStatus; + this.fileData.manualRedactions = fileData.manualRedactions; + this.rebuildFilters(true); + } else { + this.fileData = fileData; + this.rebuildFilters(); + } + + return; + } + + if (fileData.fileStatus.isError) { + await this._router.navigate(['/main/dossiers/' + this.dossierId]); + } } @debounce() @@ -665,17 +647,20 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy, OnAttach, const hasAnyFilterSet = this.primaryFilters.find(f => f.checked || f.indeterminate) || this.secondaryFilters.find(f => f.checked || f.indeterminate); - if (hasAnyFilterSet) { - const oldPageSpecificFilters = - this._annotationProcessingService.getAnnotationFilter(currentPageAnnotations); - const newPageSpecificFilters = - this._annotationProcessingService.getAnnotationFilter(newPageAnnotations); - handleFilterDelta(oldPageSpecificFilters, newPageSpecificFilters, this.primaryFilters); - this._workloadComponent.filtersChanged({ - primary: this.primaryFilters, - secondary: this.secondaryFilters - }); + + if (!hasAnyFilterSet) { + return; } + + const oldPageSpecificFilters = + this._annotationProcessingService.getAnnotationFilter(currentPageAnnotations); + const newPageSpecificFilters = + this._annotationProcessingService.getAnnotationFilter(newPageAnnotations); + handleFilterDelta(oldPageSpecificFilters, newPageSpecificFilters, this.primaryFilters); + this._workloadComponent.filtersChanged({ + primary: this.primaryFilters, + secondary: this.secondaryFilters + }); } private _findAndDeleteAnnotation(id: string) { @@ -688,33 +673,6 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy, OnAttach, } } - private _startAnalysisTimer() { - this._stopAnalysisTimer(); - - if (this.appStateService.activeFile.analysisDuration > 0) { - this.analysisProgress = 0; - this.analysisProgressInSeconds = 0; - - this.analysisInterval = setInterval(() => { - this.analysisProgressInSeconds += 1; - this.analysisProgress = - (this.analysisProgressInSeconds * 100) / - (this.appStateService.activeFile.analysisDuration / 1000); - }, 1000); - } else { - this.analysisInterval = 0; - this.analysisProgress = 0; - this.analysisProgressInSeconds = 0; - } - } - - private _stopAnalysisTimer() { - if (this.analysisInterval) { - clearInterval(this.analysisInterval); - this.analysisInterval = 0; - } - } - /* View in fullscreen */ private _openFullScreen() { const documentElement = document.documentElement; diff --git a/apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.ts b/apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.ts index 1b7cfcbb5..1d4b36646 100644 --- a/apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.ts @@ -1,11 +1,12 @@ -import { Component, Input, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core'; import { Color } from '@utils/types'; @Component({ selector: 'redaction-status-bar', templateUrl: './status-bar.component.html', styleUrls: ['./status-bar.component.scss'], - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush }) export class StatusBarComponent { @Input() @@ -18,6 +19,4 @@ export class StatusBarComponent { @Input() small = false; - - constructor() {} } diff --git a/apps/red-ui/src/app/services/permissions.service.ts b/apps/red-ui/src/app/services/permissions.service.ts index d26d2e226..32aa1969e 100644 --- a/apps/red-ui/src/app/services/permissions.service.ts +++ b/apps/red-ui/src/app/services/permissions.service.ts @@ -160,7 +160,7 @@ export class PermissionsService { } canOpenFile(fileStatus = this._activeFile): boolean { - return !fileStatus?.isError && !fileStatus?.isProcessing && !fileStatus?.isPending; + return !fileStatus?.isError && !fileStatus?.isPending; } canUndoApproval(fileStatus = this._activeFile): boolean { diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json index 59d0b73f0..e5a2b4c22 100644 --- a/apps/red-ui/src/assets/i18n/de.json +++ b/apps/red-ui/src/assets/i18n/de.json @@ -519,7 +519,7 @@ "number-of-analyses": "Anzahl der Analysen", "custom": "Benutzerdefiniert" }, - "readonly-pill": "Schreibgeschützt", + "readonly": "Schreibgeschützt", "group": { "redactions": "Redaktionswörterbücher", "hints": "Tipp Wörterbücher" diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index f1497b47c..ff8d62a9d 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -578,7 +578,7 @@ "number-of-analyses": "Number of analyses", "custom": "Custom" }, - "readonly-pill": "Read-only", + "readonly": "Read only", "group": { "redactions": "Redaction Dictionaries", "hints": "Hint Dictionaries" diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss index 8220af014..a1237d801 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -265,6 +265,11 @@ section.settings { padding-bottom: 32px; } +.w-100 { + min-width: 100px !important; + width: 100px !important; +} + .break-20 { height: 20px; background: transparent;