File details in file preview

apps/red-ui/src/app/common/file-actions/file-actions.component.html

@@ -1,21 +1,4 @@
 <div class="file-actions">
-    <div *ngIf="screen === 'file-preview'" class="reviewer">
-        <div class="reviewer-label"><span translate="file-preview.reviewer"></span>:</div>
-        <span *ngIf="fileStatus.reviewerName">{{ fileStatus.reviewerName }}</span>
-        <span *ngIf="!fileStatus.reviewerName" translate="file-preview.unassigned"></span>
-    </div>
-
-    <button
-        (click)="assignReviewer($event, fileStatus)"
-        *ngIf="permissionsService.canAssignReviewer(fileStatus)"
-        [matTooltipPosition]="tooltipPosition"
-        [matTooltip]="'project-overview.assign.action' | translate"
-        color="accent"
-        mat-icon-button
-    >
-        <mat-icon svgIcon="red:assign"></mat-icon>
-    </button>
-
     <button
         #reanalyseTooltip="matTooltip"
         (click)="reanalyseFile($event, fileStatus)"
@@ -39,6 +22,17 @@
         <mat-icon svgIcon="red:refresh"></mat-icon>
     </button>
 
+    <button
+        (click)="assignReviewer($event, fileStatus)"
+        *ngIf="permissionsService.canAssignReviewer(fileStatus) && screen !== 'file-preview'"
+        [matTooltipPosition]="tooltipPosition"
+        [matTooltip]="'project-overview.assign.action' | translate"
+        color="accent"
+        mat-icon-button
+    >
+        <mat-icon svgIcon="red:assign"></mat-icon>
+    </button>
+
     <button
         (click)="openDeleteFileDialog($event, fileStatus)"
         *ngIf="permissionsService.canDeleteFile(fileStatus)"

apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html

@@ -1,10 +1,5 @@
 <div [class]="'container flex ' + direction">
-    <svg
+    <svg attr.height="{{ size }}" attr.width="{{ size }}" attr.viewBox="0 0 {{ size }} {{ size }}" class="donut-chart">
-        attr.height="{{ size }}"
-        attr.width="{{ size }}"
-        attr.viewBox="0 0 {{ size }} {{ size }}"
-        class="donut-chart"
-    >
         <g *ngFor="let value of parsedConfig; let i = index">
             <circle
                 attr.cx="{{ cx }}"
@@ -20,29 +15,21 @@
         </g>
     </svg>
 
-    <div
+    <div class="text-container" [style]="'height: ' + size + 'px; width: ' + size + 'px; padding: ' + strokeWidth + 'px;'">
-        class="text-container"
-        [style]="'height: ' + size + 'px; width: ' + size + 'px; padding: ' + strokeWidth + 'px;'"
-    >
         <div class="heading-xl">{{ dataTotal }}</div>
         <div class="mt-5">{{ subtitle | translate }}</div>
     </div>
 
     <div class="breakdown-container">
         <div>
-            <div
+            <div *ngFor="let val of parsedConfig" [class.active]="val.checked" [class.filter-disabled]="!filter" (click)="toggleFilter.emit(val.label)">
-                *ngFor="let val of parsedConfig"
-                [class.active]="val.checked"
-                [class.filter-disabled]="!filter"
-                (click)="toggleFilter.emit(val.label)"
-            >
                 <redaction-status-bar
                     [small]="true"
                     [config]="[
                         {
                             length: val.value,
                             color: val.color,
-                            label: val.value + ' ' + (val.label | humanize)
+                            label: val.value + ' ' + (val.label.toLowerCase().replace('_', '-') | translate)
                         }
                     ]"
                 >

apps/red-ui/src/app/dialogs/dialog.service.ts

@@ -178,6 +178,16 @@ export class DialogService {
         return ref;
     }
 
+    public openAssignFileToMeDialog(file: FileStatus, cb?: Function): MatDialogRef<ConfirmationDialogComponent> {
+        const ref = this._dialog.open(ConfirmationDialogComponent, dialogConfig);
+
+        ref.afterClosed().subscribe((result) => {
+            if (result && cb) cb(result);
+        });
+
+        return ref;
+    }
+
     public openBulkAssignFileReviewerDialog(fileIds: string[], cb?: Function): MatDialogRef<AssignOwnerDialogComponent> {
         const projectId = this._appStateService.activeProject.project.projectId;
         const ref = this._dialog.open(AssignOwnerDialogComponent, {

apps/red-ui/src/app/icons/icons.module.ts

@@ -17,6 +17,7 @@ export class IconsModule {
             'arrow-up',
             'arrow-right',
             'assign',
+            'assign-me',
             'calendar',
             'check',
             'close',

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

@@ -11,13 +11,51 @@
             </div>
         </div>
 
-        <div class="flex-1 filename page-title">
+        <div class="page-title">
-            <span *ngIf="!permissionsService.canPerformAnnotationActions()" class="pill" translate="readonly-pill"></span>&nbsp;<span>{{
+            <span *ngIf="!permissionsService.canPerformAnnotationActions()" class="pill" translate="readonly-pill"></span>
-                appStateService.activeFile.filename
-            }}</span>
         </div>
 
-        <div class="flex-1 actions-container">
+        <div class="flex-1 actions-container" *ngIf="viewReady">
+            <redaction-status-bar
+                [small]="true"
+                [config]="[
+                    {
+                        length: 1,
+                        color: fileData.fileStatus.status
+                    }
+                ]"
+            >
+            </redaction-status-bar>
+            <div class="all-caps-label mr-8">{{ fileData.fileStatus.status.toLowerCase().replace('_', '-') | translate }}</div>
+            <redaction-initials-avatar
+                [userId]="fileData.fileStatus.currentReviewer"
+                [withName]="fileData.fileStatus.currentReviewer"
+            ></redaction-initials-avatar>
+            <div
+                *ngIf="!fileData.fileStatus.currentReviewer && permissionsService.canAssignReviewer(fileData.fileStatus)"
+                class="assign-reviewer pointer"
+                translate="file-preview.assign-reviewer"
+                (click)="assignReviewer()"
+            ></div>
+            <button
+                mat-icon-button
+                matTooltipPosition="below"
+                [matTooltip]="'project-overview.assign.action' | translate"
+                *ngIf="permissionsService.canAssignReviewer(fileData.fileStatus) && fileData.fileStatus.currentReviewer"
+                (click)="assignReviewer()"
+            >
+                <mat-icon svgIcon="red:edit"></mat-icon>
+            </button>
+            <button
+                mat-icon-button
+                matTooltipPosition="below"
+                [matTooltip]="'file-preview.assign-me' | translate"
+                *ngIf="permissionsService.canAssignReviewer(fileData.fileStatus) && !permissionsService.isFileReviewer()"
+                (click)="assignToMe()"
+            >
+                <mat-icon svgIcon="red:assign-me"></mat-icon>
+            </button>
+            <div class="vertical-line"></div>
             <redaction-file-actions (actionPerformed)="fileActionPerformed($event)" *ngIf="viewReady"></redaction-file-actions>
             <button [routerLink]="['/ui/projects/' + appStateService.activeProjectId]" mat-icon-button>
                 <mat-icon svgIcon="red:close"></mat-icon>

apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss

@@ -9,6 +9,21 @@ redaction-pdf-viewer {
     z-index: 2;
 }
 
+.vertical-line {
+    width: 1px;
+    height: 30px;
+    background-color: $grey-4;
+    margin: 0 8px;
+}
+
+.mr-8 {
+    margin-right: 8px;
+}
+
+.assign-reviewer {
+    text-decoration: underline;
+}
+
 .actions-container {
     display: flex;
     justify-content: flex-end;
@@ -16,13 +31,6 @@ redaction-pdf-viewer {
     gap: 10px;
 }
 
-.filename {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 4px;
-}
-
 .right-fixed-container {
     padding: 0;
     width: $right-container-width;

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

@@ -442,6 +442,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
                 break;
         }
 
+        await this._loadFileData().toPromise();
         this.canPerformAnnotationActions = this.permissionsService.canPerformAnnotationActions();
         await this.appStateService.reloadActiveProjectFiles();
     }
@@ -449,4 +450,16 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
     get displayData() {
         return this.fileData ? (this.redactedView ? this.fileData.redactedFileData : this.fileData.annotatedFileData) : null;
     }
+
+    public assignReviewer() {
+        this._fileActionService.assignProjectReviewer(this.fileData.fileStatus, async () => {
+            await this._loadFileData().toPromise();
+        });
+    }
+
+    public assignToMe() {
+        this._fileActionService.assignToMe(this.fileData.fileStatus, async () => {
+            await this._loadFileData().toPromise();
+        });
+    }
 }

apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts

@@ -204,6 +204,18 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
 
     private _configureHeader() {
         this.instance.setToolbarGroup('toolbarGroup-View');
+        this.instance.setHeaderItems((header) => {
+            const items = header.getItems();
+            const idx = items.findIndex((el) => el['dataElement'] === 'searchButton');
+            const title = document.createElement('div');
+            title.innerText = this.fileStatus.filename;
+            title.style.cssText = 'text-align: right; font-size: 11px; color: #283241; line-height: 14px;';
+            items.splice(idx, 0, {
+                type: 'customElement',
+                render: () => title
+            });
+            header.update(items);
+        });
     }
 
     public selectAnnotation(annotation: AnnotationWrapper) {

apps/red-ui/src/app/screens/file/service/file-action.service.ts

@@ -47,6 +47,16 @@ export class FileActionService {
         }
     }
 
+    public assignToMe(file?: FileStatus, callback?: Function) {
+        this._dialogService.openAssignFileToMeDialog(file ? file : this._appStateService.activeFile, async () => {
+            await this._statusControllerService.assignProjectOwner(this._appStateService.activeProjectId, file.fileId, this._userService.userId).toPromise();
+            await this._appStateService.reloadActiveProjectFiles();
+            if (callback) {
+                await callback();
+            }
+        });
+    }
+
     setFileUnderApproval(fileStatus: FileStatusWrapper) {
         return this._statusControllerService.setStatusUnderApproval(this._appStateService.activeProjectId, fileStatus.fileId);
     }

apps/red-ui/src/assets/i18n/en.json

@@ -237,7 +237,9 @@
             }
         },
         "reviewer": "Assigned to",
-        "unassigned": "Unassigned"
+        "unassigned": "Unassigned",
+        "assign-reviewer": "Assign Reviewer",
+        "assign-me": "Assign to me"
     },
     "annotation-actions": {
         "message": {

apps/red-ui/src/assets/icons/general/assign-me.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>A52380C8-F72C-425E-8B18-75F0A16E2FA9</title>
+    <defs>
+        <rect id="path-1" x="0" y="61" width="1440" height="50"></rect>
+        <filter x="-0.5%" y="-10.0%" width="101.0%" height="128.0%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.88627451   0 0 0 0 0.894117647   0 0 0 0 0.91372549  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Assignee" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="01.-Unassigned" transform="translate(-1066.000000, -79.000000)">
+            <rect fill="#FFFFFF" x="0" y="0" width="1440" height="750"></rect>
+            <g id="Header-Document">
+                <g id="Rectangle">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+                </g>
+                <g id="Group-13" transform="translate(917.000000, 69.000000)" fill="#283241" fill-rule="nonzero">
+                    <g id="Group-6" transform="translate(139.000000, 0.000000)">
+                        <g id="status" transform="translate(10.000000, 10.000000)">
+                            <path d="M4.61951123,7.00768239 L4.6192693,8.41063592 C2.85882948,8.544763 1.4982383,9.93223022 1.40509185,11.7054415 L1.4,11.9 L1.4,12.6 L4.619,12.599 L4.62,14 L0,14 L0,11.9 C0,9.26418483 2.0228531,7.15039627 4.61951123,7.00768239 Z M4.9,0.7 C6.44,0.7 7.7,1.96 7.7,3.5 C7.7,5.04 6.44,6.3 4.9,6.3 C3.36,6.3 2.1,5.04 2.1,3.5 C2.1,1.96 3.36,0.7 4.9,0.7 Z M4.9,2.1 C4.13,2.1 3.5,2.73 3.5,3.5 C3.5,4.27 4.13,4.9 4.9,4.9 C5.67,4.9 6.3,4.27 6.3,3.5 C6.3,2.73 5.67,2.1 4.9,2.1 Z" id="Combined-Shape"></path>
+                            <polygon id="Path" points="8.05 7 9.03 7.98 7.28 9.8 14 9.8 14 11.2 7.28 11.2 9.03 13.02 8.05 14 4.62 10.5"></polygon>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

apps/red-ui/src/assets/styles/red-components.scss

@@ -8,6 +8,7 @@
     align-items: center;
     height: 24px;
     width: 24px;
+    min-width: 24px;
     font-size: 10px;
     line-height: 12px;
     text-align: center;

apps/red-ui/src/assets/styles/red-text-styles.scss

@@ -34,6 +34,7 @@ a {
     font-weight: 600;
     line-height: 18px;
     text-align: center;
+    padding: 0 20px;
 }
 
 .all-caps-label {