Quick navigation

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

@@ -35,6 +35,26 @@
         <div class="tab-title" [ngClass]="navigationTab ? 'heading' : 'subheading'">
           Quick Navigation
         </div>
+
+        <div *ngIf="navigationTab" class="tab-content">
+          <div *ngFor="let item of quickNavigation | sortBy:'asc':'number'"
+               class="page-navigation"
+               [ngClass]="{ active: item.pageNumber === selectedPageNumber }"
+               (click)="selectPage(item.pageNumber)"
+          >
+            <div class="page-number">Page {{ item.pageNumber }}</div>
+            <div class="stats-subtitle subtitle mt-5">
+              <div *ngIf="item.redactions">
+                <mat-icon svgIcon="red:files"></mat-icon>
+                {{item.redactions}}
+              </div>
+              <div *ngIf="item.hints">
+                <mat-icon svgIcon="red:files"></mat-icon>
+                {{item.hints}}
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
 
       <!-- Annotations tab-->
@@ -43,7 +63,7 @@
           Annotations
         </div>
 
-        <div *ngIf="annotationsTab" class="content-container" #annotationsContainer>
+        <div *ngIf="annotationsTab" class="tab-content" #annotationsContainer>
           <div *ngFor="let annotation of annotations"
                class="annotation" [id]="'ann-' + annotation.Id"
                (click)="selectAnnotation(annotation)"
@@ -62,7 +82,7 @@
           Info
         </div>
 
-        <div *ngIf="infoTab" class="content-container info-container">
+        <div *ngIf="infoTab" class="tab-content info-container">
           <redaction-status-bar [small]="true"
                                 [config]="[{ length: 1, title: 'Unassigned', color: 'grey'}]"></redaction-status-bar>
 

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

@@ -32,7 +32,7 @@ redaction-pdf-viewer {
         padding: 0 25px;
       }
 
-      .content-container {
+      .tab-content {
         overflow-y: scroll;
         overflow-x: hidden;
         height: calc(100vh - 110px - 73px);
@@ -71,7 +71,7 @@ redaction-pdf-viewer {
   }
 
   .annotation {
-    border-bottom: 1px solid $grey-2;
+    border-bottom: 1px solid $separator;
     padding: 14px;
     font-size: 12px;
     cursor: pointer;
@@ -80,4 +80,25 @@ redaction-pdf-viewer {
       border-left: 2px solid $red-1;
     }
   }
+
+  .page-navigation {
+    cursor: pointer;
+    border-bottom: 1px solid $separator;
+    padding: 14px;
+    border-left: 4px solid transparent;
+
+    &:hover {
+      background-color: #F4F5F7;
+    }
+
+    .page-number {
+      font-size: 13px;
+      line-height: 18px;
+      font-weight: 600;
+    }
+
+    &.active {
+      border-left: 4px solid $red-1;
+    }
+  }
 }

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

@@ -33,6 +33,8 @@ export class FilePreviewScreenComponent implements OnInit {
   public fileId: string;
   public annotations: Annotations.Annotation[] = [];
   public selectedAnnotation: Annotations.Annotation;
+  public selectedPageNumber: number;
+  public quickNavigation: { pageNumber: number, redactions: number, hints: number }[] = [];
 
   constructor(
     public readonly appStateService: AppStateService,
@@ -53,11 +55,11 @@ export class FilePreviewScreenComponent implements OnInit {
     });
   }
 
-  ngOnInit(): void {
+  public ngOnInit(): void {
     this._viewerSyncService.activateViewer('ANNOTATED');
   }
 
-  showDetailsDialog($event: MouseEvent) {
+  public showDetailsDialog($event: MouseEvent) {
     $event.stopPropagation();
     this._dialog.open(FileDetailsDialogComponent, {
       width: '600px',
@@ -66,32 +68,41 @@ export class FilePreviewScreenComponent implements OnInit {
     });
   }
 
-  fileReady(viewer: string) {
+  public fileReady(viewer: string) {
     this._readyViewers.push(viewer);
     this._changeDetectorRef.detectChanges();
   }
 
-  get viewReady() {
+  public get viewReady() {
     return this._readyViewers.length >= 2;
   }
 
-  get activeViewer() {
+  public get activeViewer() {
     return this._viewerSyncService.activeViewer;
   }
 
-  activateViewer(value: string) {
+  public activateViewer(value: string) {
     this._viewerSyncService.activateViewer(value);
   }
 
-  selectTab(value: 'ANNOTATIONS' | 'INFO' | 'NAVIGATION') {
+  public selectTab(value: 'ANNOTATIONS' | 'INFO' | 'NAVIGATION') {
     this._selectedTab = value;
   }
 
-  handleAnnotationsAdded(annotations: Annotations.Annotation[]) {
+  public handleAnnotationsAdded(annotations: Annotations.Annotation[]) {
     this._changeDetectorRef.detectChanges();
     for (const annotation of annotations) {
       if (annotation.Id.indexOf(':') >= 0) {
         this.annotations.push(annotation);
+        const pageNumber = annotation.getPageNumber();
+        console.log({pageNumber})
+        let el = this.quickNavigation.find((page) => page.pageNumber === pageNumber);
+        if (!el) {
+          el = { pageNumber, redactions: 0, hints: 0 }
+          this.quickNavigation.push(el);
+        }
+        if (annotation.Id.startsWith('hint:')) { el.hints++; }
+        if (annotation.Id.startsWith('redaction:')) { el.redactions++; }
       }
     }
     this.annotations = AnnotationUtils.sortAnnotations(this.annotations);
@@ -141,4 +152,9 @@ export class FilePreviewScreenComponent implements OnInit {
   public get infoTab() {
     return this._selectedTab === 'INFO';
   }
+
+  public selectPage(pageNumber: number) {
+    this.selectedPageNumber = pageNumber;
+    this._viewerComponent.navigateToPage(pageNumber);
+  }
 }

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

@@ -94,7 +94,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
         }
       }));
 
-      instance.docViewer.on('documentLoaded', this.wvDocumentLoadedHandler)
+      instance.docViewer.on('documentLoaded', this.wvDocumentLoadedHandler);
       instance.loadDocument(pdfBlob, {filename: this.fileStatus ? this.fileStatus.filename : 'file.pdf'});
     });
   }
@@ -162,5 +162,9 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
       0,
       annotation.getY() - 100);
   }
+
+  public navigateToPage(pageNumber: number) {
+    this.wvInstance.docViewer.displayPageLocation(pageNumber, 0, 0);
+  }
 }
 

apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss

@@ -2,12 +2,6 @@
 
 .stats-subtitle {
   margin-top: 6px;
-
-  mat-icon {
-    width: 12px;
-    height: 12px;
-    margin-right: 4px;
-  }
 }
 
 .stats-bar {

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

@@ -51,4 +51,10 @@
   }
 
   gap: 12px;
+
+  mat-icon {
+    width: 10px;
+    height: 10px;
+    margin-right: 4px;
+  }
 }