From 382f590afbe4b4c01d19feafade79594660d5827 Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo@devplant.ro>
Date: Tue, 3 Nov 2020 23:39:25 +0200
Subject: [PATCH] new rule on file preview

---
 .../file-preview-screen.component.html        |  7 +++-
 .../file-preview-screen.component.ts          | 39 +++++++++++++++++--
 .../project-listing-screen.component.html     |  4 +-
 .../project-overview-screen.component.html    | 10 ++---
 .../project-overview-screen.component.ts      | 11 +-----
 .../red-ui/src/app/state/app-state.service.ts | 10 +++++
 apps/red-ui/src/assets/i18n/en.json           |  4 +-
 7 files changed, 64 insertions(+), 21 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 f95bc6c4a..60fdc9626 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
@@ -7,7 +7,12 @@
         </div>
 
         <div class="flex-1 filename page-title">
-            {{ appStateService.activeFile.filename }}
+            <span
+                *ngIf="appStateService.fileNotUpToDateWithDictionary()"
+                class="pill"
+                translate="project-overview.new-rule.label"
+            ></span
+            >&nbsp;<span>{{ appStateService.activeFile.filename }}</span>
         </div>
 
         <div class="flex-1 actions-container">
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 4778f5077..9eb8482db 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
@@ -30,6 +30,8 @@ import { AnnotationDrawService } from '../service/annotation-draw.service';
 import { AnnotationProcessingService } from '../service/annotation-processing.service';
 import { FilterModel } from '../../../common/filter/model/filter.model';
 import { tap } from 'rxjs/operators';
+import { NotificationService, NotificationType } from '../../../notification/notification.service';
+import { TranslateService } from '@ngx-translate/core';
 
 const KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
 
@@ -46,6 +48,8 @@ export class FilePreviewScreenComponent implements OnInit {
         private readonly _activatedRoute: ActivatedRoute,
         private readonly _dialogService: DialogService,
         private readonly _router: Router,
+        private readonly _notificationService: NotificationService,
+        private readonly _translateService: TranslateService,
         private readonly _annotationProcessingService: AnnotationProcessingService,
         private readonly _annotationDrawService: AnnotationDrawService,
         private readonly _fileActionService: FileActionService,
@@ -107,7 +111,9 @@ export class FilePreviewScreenComponent implements OnInit {
     loadingMessage: string;
 
     public ngOnInit(): void {
-        this._loadFileData().subscribe(() => {});
+        this._loadFileData().subscribe(() => {
+            this._displayNewRuleToast();
+        });
         this.appStateService.fileStatusChanged.subscribe((fileStatus: FileStatus) => {
             if (fileStatus.fileId === this.fileId) {
                 this._loadFileData().subscribe(() => {
@@ -155,8 +161,8 @@ export class FilePreviewScreenComponent implements OnInit {
         );
     }
 
-    public reanalyseFile($event: MouseEvent) {
-        $event.stopPropagation();
+    public reanalyseFile($event?: MouseEvent) {
+        $event?.stopPropagation();
         this.viewReady = false;
         this.loadingMessage = 'file-preview.reanalyse-file';
         this._reanalysisControllerService
@@ -510,4 +516,31 @@ export class FilePreviewScreenComponent implements OnInit {
             this._fileActionService.setApproved(this.appStateService.activeFile);
         }
     }
+
+    private _displayNewRuleToast() {
+        if (this.appStateService.fileNotUpToDateWithDictionary()) {
+            this._notificationService.showToastNotification(
+                `${this._translateService.instant('project-overview.new-rule.toast.message-file')}`,
+                null,
+                NotificationType.WARNING,
+                {
+                    disableTimeOut: true,
+                    positionClass: 'toast-top-left',
+                    actions: [
+                        {
+                            title: this._translateService.instant(
+                                'project-overview.new-rule.toast.actions.reanalyse-file'
+                            ),
+                            action: () => this.reanalyseFile()
+                        },
+                        {
+                            title: this._translateService.instant(
+                                'project-overview.new-rule.toast.actions.later'
+                            )
+                        }
+                    ]
+                }
+            );
+        }
+    }
 }
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
index 33f17af4a..1ed79bfc0 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
@@ -215,7 +215,7 @@
             <redaction-simple-doughnut-chart
                 [config]="projectsChartData"
                 [strokeWidth]="15"
-                [subtitle]="'project-listing.stats.charts.projects.label'"
+                [subtitle]="'project-listing.stats.charts.projects'"
             ></redaction-simple-doughnut-chart>
 
             <div class="project-stats-container">
@@ -240,7 +240,7 @@
             <redaction-simple-doughnut-chart
                 [config]="documentsChartData"
                 [strokeWidth]="15"
-                [subtitle]="'project-listing.stats.charts.total-documents.label'"
+                [subtitle]="'project-listing.stats.charts.total-documents'"
             ></redaction-simple-doughnut-chart>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
index 2082cbf10..31fe90b49 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
@@ -171,7 +171,7 @@
                             {{ fileStatus.filename }}
                         </div>
                         <span
-                            *ngIf="fileNotUpToDateWithDictionary(fileStatus)"
+                            *ngIf="appStateService.fileNotUpToDateWithDictionary(fileStatus)"
                             class="pill"
                             translate="project-overview.new-rule.label"
                         ></span>
@@ -248,7 +248,7 @@
                             *ngIf="
                                 userService.isManager(user) || appStateService.isActiveProjectOwner
                             "
-                            [matTooltip]="'project-overview.delete.action.label' | translate"
+                            [matTooltip]="'project-overview.delete.action' | translate"
                             [matTooltipPosition]="'above'"
                             color="accent"
                             mat-icon-button
@@ -257,7 +257,7 @@
                         </button>
                         <button
                             (click)="downloadFileRedactionReport($event, fileStatus)"
-                            [matTooltip]="'project-overview.report.action.label' | translate"
+                            [matTooltip]="'project-overview.report.action' | translate"
                             [matTooltipPosition]="'above'"
                             color="accent"
                             mat-icon-button
@@ -270,7 +270,7 @@
                                 appStateService.isActiveProjectMember &&
                                 !isApprovedOrUnderApproval(fileStatus)
                             "
-                            [matTooltip]="'project-overview.assign.action.label' | translate"
+                            [matTooltip]="'project-overview.assign.action' | translate"
                             [matTooltipPosition]="'above'"
                             color="accent"
                             mat-icon-button
@@ -280,7 +280,7 @@
                         <button
                             (click)="reanalyseFile($event, fileStatus)"
                             *ngIf="!isApprovedOrUnderApproval(fileStatus)"
-                            [matTooltip]="'project-overview.reanalyse.action.label' | translate"
+                            [matTooltip]="'project-overview.reanalyse.action' | translate"
                             [matTooltipPosition]="'above'"
                             color="accent"
                             mat-icon-button
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
index d3f10a70e..188363483 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
@@ -107,7 +107,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
         // @ts-ignore
         if (
             !this.appStateService.activeProject.files.filter((file) =>
-                this.fileNotUpToDateWithDictionary(file)
+                this.appStateService.fileNotUpToDateWithDictionary(file)
             ).length
         ) {
             return;
@@ -115,7 +115,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
 
         this._notificationService.showToastNotification(
             `${this._translateService.instant(
-                'project-overview.new-rule.toast.message'
+                'project-overview.new-rule.toast.message-project'
             )} <span class="pill">${this._translateService.instant(
                 'project-overview.new-rule.label'
             )}</span>`,
@@ -348,13 +348,6 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
         return filterMatched;
     }
 
-    fileNotUpToDateWithDictionary(fileStatus: FileStatus) {
-        return (
-            (fileStatus.status === 'UNASSIGNED' || fileStatus.status === 'UNDER_REVIEW') &&
-            fileStatus.dictionaryVersion !== this.appStateService.dictionaryVersion
-        );
-    }
-
     requestApprovalOrApproveFile($event: MouseEvent, fileStatus: FileStatus) {
         $event.stopPropagation();
 
diff --git a/apps/red-ui/src/app/state/app-state.service.ts b/apps/red-ui/src/app/state/app-state.service.ts
index 53b8aacc7..33f8f0aaf 100644
--- a/apps/red-ui/src/app/state/app-state.service.ts
+++ b/apps/red-ui/src/app/state/app-state.service.ts
@@ -480,4 +480,14 @@ export class AppStateService {
             this.isActiveProjectOwnerAndManager
         );
     }
+
+    fileNotUpToDateWithDictionary(fileStatus?: FileStatus) {
+        if (!fileStatus) {
+            fileStatus = this.activeFile;
+        }
+        return (
+            (fileStatus.status === 'UNASSIGNED' || fileStatus.status === 'UNDER_REVIEW') &&
+            fileStatus.dictionaryVersion !== this.dictionaryVersion
+        );
+    }
 }
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index e511281cf..2a869fde5 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -169,9 +169,11 @@
         "new-rule": {
             "label": "New Rule",
             "toast": {
-                "message": "Some documents were not processed with the latest rule/dictionary set. They are marked with:\n\n",
+                "message-project": "Some documents were not processed with the latest rule/dictionary set. They are marked with:\n\n",
+                "message-file": "This documents was not processed with the latest rule/dictionary set.\n\n",
                 "actions": {
                     "reanalyse-all": "Reanalyse all",
+                    "reanalyse-file": "Reanalyse this file",
                     "later": "Later"
                 }
             }