From d2e2324aa31dfc067035ce995a72d3e756a7fa9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Tue, 21 Dec 2021 15:20:50 +0200 Subject: [PATCH] RED-2914 - arrow navigation in pdf viewer, some translations --- .../dossiers-listing-details.component.html | 4 +- .../file-workload/file-workload.component.ts | 58 +++++++++---------- .../file-preview-screen.component.ts | 17 ++++-- .../modules/dossier/utils/pdf-viewer.utils.ts | 3 +- apps/red-ui/src/assets/i18n/en.json | 8 +-- 5 files changed, 48 insertions(+), 42 deletions(-) diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html index ffcf42195..1371e0061 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html +++ b/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 }" >
@@ -12,7 +12,7 @@
{{ stats.totalAnalyzedPages | number }}
-
+
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.ts index 0607b4055..1caebce68 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.ts +++ b/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 { - 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 { + 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); diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts index 16976197e..74f19e118 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts +++ b/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(); diff --git a/apps/red-ui/src/app/modules/dossier/utils/pdf-viewer.utils.ts b/apps/red-ui/src/app/modules/dossier/utils/pdf-viewer.utils.ts index 5b29b9c07..99b1fe3a8 100644 --- a/apps/red-ui/src/app/modules/dossier/utils/pdf-viewer.utils.ts +++ b/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[]) { diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 54da1734b..1f3977ece 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/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",