From 962c44b055fe1b7708d16f7435298f04486755e3 Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Wed, 7 Apr 2021 15:35:31 +0300
Subject: [PATCH] disable toggle for non managers, update tooltip &
 translations & styles

---
 .editorconfig                                 |  1 +
 .../file-actions/file-actions.component.html  | 14 ++---
 .../file-actions/file-actions.component.scss  |  9 ++++
 .../file-actions/file-actions.component.ts    | 17 ++++++
 .../file-preview-screen.component.html        | 52 ++++++++++---------
 apps/red-ui/src/assets/i18n/en.json           |  3 +-
 6 files changed, 65 insertions(+), 31 deletions(-)

diff --git a/.editorconfig b/.editorconfig
index 9b7352176..4a2be7a8c 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -7,6 +7,7 @@ indent_style = space
 indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
+ij_html_quote_style = double
 
 [*.md]
 max_line_length = off
diff --git a/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.html b/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.html
index e80e94859..a27c3d766 100644
--- a/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.html
+++ b/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.html
@@ -137,13 +137,15 @@
         </redaction-circle-button>
 
         <!-- exclude from redaction -->
-        <div class='red-input-group'>
+        <div class="red-input-group">
             <mat-slide-toggle
-                (click)='toggleAnalysis($event)'
-                [checked]='!fileStatus.isExcluded'
-                [matTooltip]="(fileStatus.isExcluded ? 'file-preview.toggle-analysis.enable' : 'file-preview.toggle-analysis.disable') | translate"
-                [matTooltipPosition]='tooltipPosition'
-                color='primary'
+                (click)="toggleAnalysis($event)"
+                [disabled]="!permissionsService.isManager()"
+                [checked]="!fileStatus.isExcluded"
+                [matTooltip]="toggleTooltip | translate"
+                [matTooltipPosition]="toggleTooltipPosition"
+                [class.mr-24]="screen === 'project-overview'"
+                color="primary"
             >
             </mat-slide-toggle>
         </div>
diff --git a/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.scss b/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.scss
index f83dc26db..f3d8e6d9e 100644
--- a/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.scss
+++ b/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.scss
@@ -26,3 +26,12 @@ mat-slide-toggle {
     width: 34px;
     line-height: 33px;
 }
+
+.mr-24 {
+    margin-right: 24px;
+}
+
+mat-slide-toggle {
+    margin-left: 8px;
+    margin-right: 5px;
+}
diff --git a/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.ts b/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.ts
index a8622f009..119062504 100644
--- a/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.ts
+++ b/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.ts
@@ -4,6 +4,7 @@ import { FileStatusWrapper } from '../../../../models/file/file-status.wrapper';
 import { AppStateService } from '../../../../state/app-state.service';
 import { FileActionService } from '../../services/file-action.service';
 import { ProjectsDialogService } from '../../services/projects-dialog.service';
+import { TooltipPosition } from '@angular/material/tooltip';
 
 @Component({
     selector: 'redaction-file-actions',
@@ -109,4 +110,20 @@ export class FileActionsComponent implements OnInit {
         await this._fileActionService.toggleAnalysis(this.fileStatus).toPromise();
         await this.appStateService.getFiles();
     }
+
+    get toggleTooltip(): string {
+        if (!this.permissionsService.isManager()) {
+            return 'file-preview.toggle-analysis.only-managers';
+        }
+
+        return this.fileStatus.isExcluded ? 'file-preview.toggle-analysis.enable' : 'file-preview.toggle-analysis.disable';
+    }
+
+    get toggleTooltipPosition(): TooltipPosition {
+        if (!this.permissionsService.isManager() && this.screen === 'file-preview') {
+            return 'left';
+        }
+
+        return 'above';
+    }
 }
diff --git a/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html
index bb82703bd..3efa6f1c4 100644
--- a/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html
@@ -30,39 +30,43 @@
         </div>
 
         <div class="page-title">
-            <span *ngIf="!permissionsService.canPerformAnnotationActions()" class="pill" translate="readonly-pill"></span>
+            <span *ngIf="!permissionsService.canPerformAnnotationActions()" class="pill"
+                  translate="readonly-pill"></span>
         </div>
 
         <div *ngIf="viewReady" class="flex-1 actions-container">
-            <redaction-status-bar
-                [config]="[
+            <ng-container *ngIf="!appStateService.activeFile.isExcluded">
+                <redaction-status-bar
+                    [config]="[
                     {
                         length: 1,
                         color: appStateService.activeFile.status
                     }
                 ]"
-                [small]="true"
-            >
-            </redaction-status-bar>
-            <div class="all-caps-label mr-16 ml-8">
-                {{ appStateService.activeFile.status | translate }}
-                <span *ngIf="appStateService.activeFile.status === 'UNDER_REVIEW' || appStateService.activeFile.status === 'UNDER_APPROVAL'"
-                    >{{ 'by' | translate }}:</span
+                    [small]="true"
                 >
-            </div>
+                </redaction-status-bar>
+                <div class="all-caps-label mr-16 ml-8">
+                    {{ appStateService.activeFile.status | translate }}
+                    <span
+                        *ngIf="appStateService.activeFile.status === 'UNDER_REVIEW' || appStateService.activeFile.status === 'UNDER_APPROVAL'"
+                    >{{ 'by' | translate }}:</span
+                    >
+                </div>
 
-            <ng-container *ngIf="!editingReviewer">
-                <redaction-initials-avatar
-                    *ngIf="!editingReviewer"
-                    [userId]="appStateService.activeFile.currentReviewer"
-                    [withName]="!!appStateService.activeFile.currentReviewer"
-                ></redaction-initials-avatar>
-                <div
-                    (click)="editingReviewer = true"
-                    *ngIf="!editingReviewer && !appStateService.activeFile.currentReviewer && permissionsService.canAssignReviewer(appStateService.activeFile)"
-                    class="assign-reviewer pointer"
-                    translate="file-preview.assign-reviewer"
-                ></div>
+                <ng-container *ngIf="!editingReviewer">
+                    <redaction-initials-avatar
+                        *ngIf="!editingReviewer"
+                        [userId]="appStateService.activeFile.currentReviewer"
+                        [withName]="!!appStateService.activeFile.currentReviewer"
+                    ></redaction-initials-avatar>
+                    <div
+                        (click)="editingReviewer = true"
+                        *ngIf="!editingReviewer && !appStateService.activeFile.currentReviewer && permissionsService.canAssignReviewer(appStateService.activeFile)"
+                        class="assign-reviewer pointer"
+                        translate="file-preview.assign-reviewer"
+                    ></div>
+                </ng-container>
             </ng-container>
 
             <ng-container *ngIf="editingReviewer">
@@ -205,7 +209,7 @@
 
         <div class="right-container">
             <redaction-disabled-for-redaction
-                *ngIf='viewReady && appStateService.activeFile.isExcluded'
+                *ngIf="viewReady && appStateService.activeFile.isExcluded"
             >
             </redaction-disabled-for-redaction>
 
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index e56107129..807782f16 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -311,7 +311,8 @@
         },
         "toggle-analysis": {
             "enable": "Enable for redaction",
-            "disable": "Disable redaction"
+            "disable": "Disable redaction",
+            "only-managers": "Enabling / disabling is permitted only for managers"
         },
         "reviewer": "Assigned to",
         "unassigned": "Unassigned",