From 48c11aa4416ba7659f887a2d073ed9f799d9e7fc Mon Sep 17 00:00:00 2001 From: Timo Date: Sun, 7 Feb 2021 19:32:59 +0200 Subject: [PATCH] view mode basics --- .../file-preview-screen.component.html | 15 +++++------ .../file-preview-screen.component.ts | 25 ++++++++++--------- .../src/app/screens/file/model/view-mode.ts | 1 + .../file/service/annotation-draw.service.ts | 5 ++-- apps/red-ui/src/assets/i18n/en.json | 3 +++ 5 files changed, 28 insertions(+), 21 deletions(-) create mode 100644 apps/red-ui/src/app/screens/file/model/view-mode.ts diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html index 6937a624c..1cf1d6382 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html @@ -1,13 +1,14 @@
-
- - {{ 'file-preview.view-toggle' | translate }} - +
+ + {{ 'file-preview.standard' | translate }} + {{ 'file-preview.delta' | translate }} + + {{ 'file-preview.redacted' | translate }} +
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts index 0315b628d..6304b06e5 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts @@ -29,6 +29,8 @@ import { FormBuilder, FormGroup } from '@angular/forms'; import { FileManagementControllerService, StatusControllerService } from '@redaction/red-ui-http'; import { PdfViewerDataService } from '../service/pdf-viewer-data.service'; import { download } from '../../../utils/file-download-utils'; +import { MatButtonToggleChange } from '@angular/material/button-toggle'; +import { ViewMode } from '../model/view-mode'; const KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'f', 'F', 'Escape']; @@ -39,9 +41,10 @@ const KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'f', 'F', }) export class FilePreviewScreenComponent implements OnInit, OnDestroy { private projectId: string; - private _activeViewer: 'ANNOTATED' | 'REDACTED' = 'ANNOTATED'; private _instance: WebViewerInstance; private _dialogRef: MatDialogRef; + + public viewMode: ViewMode = 'STANDARD'; public fullScreen = false; public editingReviewer = false; public reviewerForm: FormGroup; @@ -96,16 +99,10 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { }); } - get redactedView() { - return this._activeViewer === 'REDACTED'; - } - - set redactedView(value: boolean) { - this._activeViewer = value ? 'REDACTED' : 'ANNOTATED'; - + updateViewMode() { const allAnnotations = this._instance.annotManager.getAnnotationsList(); const redactions = allAnnotations.filter((a) => a.getCustomData('redaction')); - if (this._activeViewer === 'ANNOTATED') { + if (this.viewMode === 'STANDARD') { redactions.forEach((redaction) => { redaction['StrokeColor'] = redaction.getCustomData('annotationColor'); }); @@ -121,7 +118,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { } private _updateCanPerformActions() { - this.canPerformAnnotationActions = this.permissionsService.canPerformAnnotationActions() && this._activeViewer === 'ANNOTATED'; + this.canPerformAnnotationActions = this.permissionsService.canPerformAnnotationActions() && this.viewMode === 'STANDARD'; } get activeViewer() { @@ -497,7 +494,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { this._fileDownloadService.loadActiveFileManualAnnotations().subscribe((manualRedactions) => { this.fileData.manualRedactions = manualRedactions; this._rebuildFilters(); - this._annotationDrawService.drawAnnotations(this._instance, this.annotations, this.redactedView); + this._annotationDrawService.drawAnnotations(this._instance, this.annotations, this.viewMode); }); } @@ -509,7 +506,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { this._fileDownloadService.loadActiveFileManualAnnotations().subscribe((manualRedactions) => { this.fileData.manualRedactions = manualRedactions; this._rebuildFilters(); - if (!this.redactedView) { + if (this.viewMode === 'STANDARD') { currentPageAnnotationIds.forEach((id) => { this._findAndDeleteAnnotation(id); }); @@ -628,4 +625,8 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { } // + switchView($event: MatButtonToggleChange) { + this.viewMode = $event.value; + this.updateViewMode(); + } } diff --git a/apps/red-ui/src/app/screens/file/model/view-mode.ts b/apps/red-ui/src/app/screens/file/model/view-mode.ts new file mode 100644 index 000000000..e4f649334 --- /dev/null +++ b/apps/red-ui/src/app/screens/file/model/view-mode.ts @@ -0,0 +1 @@ +export type ViewMode = 'STANDARD' | 'DELTA' | 'REDACTED'; diff --git a/apps/red-ui/src/app/screens/file/service/annotation-draw.service.ts b/apps/red-ui/src/app/screens/file/service/annotation-draw.service.ts index bd5b46592..47e209b23 100644 --- a/apps/red-ui/src/app/screens/file/service/annotation-draw.service.ts +++ b/apps/red-ui/src/app/screens/file/service/annotation-draw.service.ts @@ -5,6 +5,7 @@ import { hexToRgb } from '../../../utils/functions'; import { AppStateService } from '../../../state/app-state.service'; import { AnnotationWrapper } from '../model/annotation.wrapper'; import { UserPreferenceService } from '../../../common/service/user-preference.service'; +import { ViewMode } from '../model/view-mode'; @Injectable({ providedIn: 'root' @@ -16,10 +17,10 @@ export class AnnotationDrawService { private readonly _userPreferenceService: UserPreferenceService ) {} - public drawAnnotations(activeViewer: WebViewerInstance, annotationWrappers: AnnotationWrapper[], redactedOnly: boolean = false) { + public drawAnnotations(activeViewer: WebViewerInstance, annotationWrappers: AnnotationWrapper[], viewMode: ViewMode = 'STANDARD') { const annotations = []; annotationWrappers.forEach((annotation) => { - if (redactedOnly) { + if (viewMode === 'REDACTED') { if (annotation.isRedacted) { const pdfViewerAnnotation = this.computeAnnotation(activeViewer, annotation); annotations.push(pdfViewerAnnotation); diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 76786fb8f..7b388e193 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -276,6 +276,9 @@ } }, "file-preview": { + "delta": "Delta", + "redacted": "Preview", + "standard": "Standard", "no-annotations-for-page": "There are no redactions, hints or requests on this page.", "show-redacted-view": "Show Redacted Preview", "cannot-show-redacted-view": "Redactions out of sync. Redacted Preview only available after reanalysis",