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

view mode basics

Browse Source
This commit is contained in:
Timo 2021-02-07 19:32:59 +02:00
parent 9c0aa6976f
commit 48c11aa441
5 changed files with 28 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
View File

@ -1,13 +1,14 @@
<section *ngIf="appStateService.activeFile" [class.fullscreen]="fullScreen">
<div class="page-header">
<div class="flex-1">
<div
[matTooltip]="(canNotSwitchToRedactedView ? 'file-preview.cannot-show-redacted-view' : 'file-preview.show-redacted-view') | translate"
class="fit-content"
>
<mat-slide-toggle [(ngModel)]="redactedView" [disabled]="canNotSwitchToRedactedView" color="primary" labelPosition="after">
{{ 'file-preview.view-toggle' | translate }}
</mat-slide-toggle>
<div class="red-input-group slider-row">
<mat-button-toggle-group [value]="viewMode" (change)="switchView($event)" appearance="legacy">
<mat-button-toggle [value]="'STANDARD'"> {{ 'file-preview.standard' | translate }}</mat-button-toggle>
<mat-button-toggle [value]="'DELTA'" [disabled]="canNotSwitchToRedactedView"> {{ 'file-preview.delta' | translate }}</mat-button-toggle>
<mat-button-toggle [value]="'REDACTED'" [disabled]="canNotSwitchToRedactedView">
{{ 'file-preview.redacted' | translate }}</mat-button-toggle
>
</mat-button-toggle-group>
</div>
</div>

25
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
View File

@ -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<any>;
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 {
}
// <!-- End Dev Mode Features-->
switchView($event: MatButtonToggleChange) {
this.viewMode = $event.value;
this.updateViewMode();
}
}

1
apps/red-ui/src/app/screens/file/model/view-mode.ts Normal file
View File

@ -0,0 +1 @@
export type ViewMode = 'STANDARD' | 'DELTA' | 'REDACTED';

5
apps/red-ui/src/app/screens/file/service/annotation-draw.service.ts
View File

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

3
apps/red-ui/src/assets/i18n/en.json
View File

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