From 081a25d3d671adaa2c60c5260af5b98f07620e7b Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo@devplant.ro>
Date: Fri, 6 Nov 2020 22:08:18 +0200
Subject: [PATCH] Redacted view no longer available if data is out of sync

---
 .../file-preview-screen.component.html        | 21 ++++++++++++++++---
 .../file-preview-screen.component.ts          |  7 +++++++
 apps/red-ui/src/assets/i18n/en.json           |  2 ++
 .../src/assets/styles/red-page-layout.scss    |  4 ++++
 4 files changed, 31 insertions(+), 3 deletions(-)

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 dd5be7dc0..65180c0a9 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,9 +1,24 @@
 <section [class.hidden]="!viewReady">
     <div class="page-header">
         <div class="flex-1">
-            <mat-slide-toggle [(ngModel)]="redactedView" color="primary" labelPosition="after">
-                {{ 'file-preview.view-toggle' | translate }}
-            </mat-slide-toggle>
+            <div
+                class="fit-content"
+                [matTooltip]="
+                    (canNotSwitchToRedactedView
+                        ? 'file-preview.cannot-show-redacted-view'
+                        : 'file-preview.show-redacted-view'
+                    ) | translate
+                "
+            >
+                <mat-slide-toggle
+                    [(ngModel)]="redactedView"
+                    color="primary"
+                    labelPosition="after"
+                    [disabled]="canNotSwitchToRedactedView"
+                >
+                    {{ 'file-preview.view-toggle' | translate }}
+                </mat-slide-toggle>
+            </div>
         </div>
 
         <div class="flex-1 filename page-title">
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 2f259eaee..687949123 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
@@ -118,6 +118,13 @@ export class FilePreviewScreenComponent implements OnInit {
 
     canPerformAnnotationActions: boolean;
 
+    get canNotSwitchToRedactedView() {
+        return (
+            this.appStateService.fileNotUpToDateWithDictionary() ||
+            this.fileData?.entriesToAdd?.length > 0
+        );
+    }
+
     public ngOnInit(): void {
         this.canPerformAnnotationActions = this.appStateService.canPerformAnnotationActionsOnCurrentFile();
         this._loadFileData().subscribe(() => {});
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 880603b6f..3cf84fd3a 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -247,6 +247,8 @@
         }
     },
     "file-preview": {
+        "show-redacted-view": "Show Redacted Preview",
+        "cannot-show-redacted-view": "Redactions out of sync. Redacted Preview only available after reanalysis",
         "reanalyse-file": "File reanalysis in progress... ",
         "view-toggle": "Redacted View",
         "tabs": {
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 9e948d08b..eac1e7f0e 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -198,3 +198,7 @@ body {
     height: calc(100vh - 61px);
     position: relative;
 }
+
+.fit-content {
+    width: fit-content;
+}