RED-2914 - arrow navigation in pdf viewer, some translations

apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html

@@ -4,7 +4,7 @@
         [config]="config"
         [radius]="80"
         [strokeWidth]="15"
-        [subtitle]="'dossier-listing.stats.charts.dossiers' | translate"
+        [subtitle]="'dossier-listing.stats.charts.dossiers' | translate: { count: config[0].value }"
     ></redaction-simple-doughnut-chart>
 
     <div *ngIf="dossiersService.generalStats$ | async as stats" class="dossier-stats-container">
@@ -12,7 +12,7 @@
             <mat-icon svgIcon="red:needs-work"></mat-icon>
             <div>
                 <div class="heading">{{ stats.totalAnalyzedPages | number }}</div>
-                <div translate="dossier-listing.stats.analyzed-pages"></div>
+                <div [translateParams]="{ count: stats.totalAnalyzedPages }" [translate]="'dossier-listing.stats.analyzed-pages'"></div>
             </div>
         </div>
 

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.ts

@@ -207,7 +207,7 @@ export class FileWorkloadComponent {
             // Disable annotation navigation in multi select mode
             // => TODO: maybe implement selection on enter?
             if (!this.multiSelectService.isActive) {
-                this._navigateAnnotations($event);
+                this.navigateAnnotations($event);
             }
         } else {
             this._navigatePages($event);
@@ -276,34 +276,7 @@ export class FileWorkloadComponent {
         this.selectPage.emit(this._nextPageWithAnnotations());
     }
 
-    private _disableMultiSelectAndDocumentInfo(): void {
-        this.multiSelectService.deactivate();
-        this.documentInfoService.hide();
-    }
-
-    private _filterAnnotations(
-        annotations: AnnotationWrapper[],
-        primary: INestedFilter[],
-        secondary: INestedFilter[] = [],
-    ): Map<number, AnnotationWrapper[]> {
-        if (!primary) {
-            return;
-        }
-        this.displayedAnnotations = this._annotationProcessingService.filterAndGroupAnnotations(annotations, primary, secondary);
-        this.displayedPages = [...this.displayedAnnotations.keys()];
-        return this.displayedAnnotations;
-    }
-
-    private _selectFirstAnnotationOnCurrentPageIfNecessary() {
-        if (
-            (!this._firstSelectedAnnotation || this.activeViewerPage !== this._firstSelectedAnnotation.pageNumber) &&
-            this.displayedPages.indexOf(this.activeViewerPage) >= 0
-        ) {
-            this.selectAnnotations.emit([this.activeAnnotations[0]]);
-        }
-    }
-
-    private _navigateAnnotations($event: KeyboardEvent) {
+    navigateAnnotations($event: KeyboardEvent) {
         if (!this._firstSelectedAnnotation || this.activeViewerPage !== this._firstSelectedAnnotation.pageNumber) {
             if (this.displayedPages.indexOf(this.activeViewerPage) !== -1) {
                 // Displayed page has annotations
@@ -354,6 +327,33 @@ export class FileWorkloadComponent {
         }
     }
 
+    private _disableMultiSelectAndDocumentInfo(): void {
+        this.multiSelectService.deactivate();
+        this.documentInfoService.hide();
+    }
+
+    private _filterAnnotations(
+        annotations: AnnotationWrapper[],
+        primary: INestedFilter[],
+        secondary: INestedFilter[] = [],
+    ): Map<number, AnnotationWrapper[]> {
+        if (!primary) {
+            return;
+        }
+        this.displayedAnnotations = this._annotationProcessingService.filterAndGroupAnnotations(annotations, primary, secondary);
+        this.displayedPages = [...this.displayedAnnotations.keys()];
+        return this.displayedAnnotations;
+    }
+
+    private _selectFirstAnnotationOnCurrentPageIfNecessary() {
+        if (
+            (!this._firstSelectedAnnotation || this.activeViewerPage !== this._firstSelectedAnnotation.pageNumber) &&
+            this.displayedPages.indexOf(this.activeViewerPage) >= 0
+        ) {
+            this.selectAnnotations.emit([this.activeAnnotations[0]]);
+        }
+    }
+
     private _navigatePages($event: KeyboardEvent) {
         const pageIdx = this.displayedPages.indexOf(this.activeViewerPage);
 

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

@@ -48,7 +48,7 @@ import { ReanalysisService } from '../../../../services/reanalysis.service';
 import Annotation = Core.Annotations.Annotation;
 import PDFNet = Core.PDFNet;
 
-const ALL_HOTKEY_ARRAY = ['Escape', 'F', 'f'];
+const ALL_HOTKEY_ARRAY = ['Escape', 'F', 'f', 'ArrowUp', 'ArrowDown'];
 
 @Component({
     templateUrl: './file-preview-screen.component.html',
@@ -63,7 +63,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
     shouldDeselectAnnotationsOnPageChange = true;
     fileData: FileDataModel;
     annotationData: AnnotationData;
-    selectedAnnotations: AnnotationWrapper[];
+    selectedAnnotations: AnnotationWrapper[] = [];
     hideSkipped = false;
     displayPdfViewer = false;
     @ViewChild(PdfViewerComponent) readonly viewerComponent: PdfViewerComponent;
@@ -294,7 +294,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         this._changeDetectorRef.markForCheck();
     }
 
-    @Debounce(0)
+    @Debounce(10)
     selectAnnotations(annotations?: AnnotationWrapper[]) {
         if (annotations) {
             this.viewerComponent?.utils.selectAnnotations(annotations, this.multiSelectService.isActive);
@@ -357,9 +357,17 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
             return;
         }
 
+        if (['ArrowUp', 'ArrowDown'].includes($event.key)) {
+            if (this.selectedAnnotations.length === 1) {
+                this._workloadComponent.navigateAnnotations($event);
+            }
+            return;
+        }
+
         if (['Escape'].includes($event.key)) {
             this.fullScreen = false;
             this.closeFullScreen();
+            this._changeDetectorRef.markForCheck();
         }
 
         if (['f', 'F'].includes($event.key)) {
@@ -370,8 +378,6 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
             this.toggleFullScreen();
             return;
         }
-
-        this._changeDetectorRef.markForCheck();
     }
 
     viewerPageChanged($event: any) {
@@ -388,6 +394,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         const extras: NavigationExtras = {
             queryParams: { page: $event },
             queryParamsHandling: 'merge',
+            replaceUrl: true,
         };
         this._router.navigate([], extras).then();
 

apps/red-ui/src/app/modules/dossier/utils/pdf-viewer.utils.ts

@@ -126,9 +126,8 @@ export class PdfViewerUtils {
         }
 
         const annotationsFromViewer = annotations.map(ann => this._getAnnotationById(ann.id));
-        this._annotationManager.selectAnnotations(annotationsFromViewer);
-        // this.navigateToPage(annotations[0].pageNumber*this.paginationOffset);
         this._annotationManager.jumpToAnnotation(annotationsFromViewer[0]);
+        this._annotationManager.selectAnnotations(annotationsFromViewer);
     }
 
     deselectAnnotations(annotations: AnnotationWrapper[]) {

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

@@ -656,12 +656,12 @@
       "action": "Analyze entire dossier"
     },
     "stats": {
-      "analyzed-pages": "Pages",
+      "analyzed-pages": "{count, plural, one{Page} other{Pages}}",
       "charts": {
-        "dossiers": "Dossiers",
-        "total-documents": "Total Document(s)"
+        "dossiers": "{count, plural, one{Dossier} other{Dossiers}}",
+        "total-documents": "Total Documents"
       },
-      "total-people": "Total user(s)"
+      "total-people": "Total users"
     },
     "table-col-names": {
       "name": "Name",