Support navigating directly to comments

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'
 import { FormControl, FormGroup } from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
-import { NgbModal, NgbNav } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModal, NgbNav, NgbNavChangeEvent } from '@ng-bootstrap/ng-bootstrap'
 import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent'
 import { PaperlessDocument } from 'src/app/data/paperless-document'
 import { PaperlessDocumentMetadata } from 'src/app/data/paperless-document-metadata'
@@ -43,6 +43,15 @@ import {
 import { PaperlessUser } from 'src/app/data/paperless-user'
 import { UserService } from 'src/app/services/rest/user.service'
 
+enum DocumentDetailNavIDs {
+  Details = 1,
+  Content = 2,
+  Metadata = 3,
+  Preview = 4,
+  Comments = 5,
+  Permissions = 6,
+}
+
 @Component({
   selector: 'app-document-detail',
   templateUrl: './document-detail.component.html',
@@ -117,6 +126,8 @@ export class DocumentDetailComponent
 
   PermissionAction = PermissionAction
   PermissionType = PermissionType
+  DocumentDetailNavIDs = DocumentDetailNavIDs
+  activeNavID: number
 
   constructor(
     private documentsService: DocumentService,
@@ -282,6 +293,18 @@ export class DocumentDetailComponent
           this.router.navigate(['404'])
         },
       })
+
+    this.route.paramMap.subscribe((paramMap) => {
+      const section = paramMap.get('section')
+      if (section) {
+        const navIDKey: string = Object.keys(DocumentDetailNavIDs).find(
+          (navID) => navID.toLowerCase() == section
+        )
+        if (navIDKey) {
+          this.activeNavID = DocumentDetailNavIDs[navIDKey]
+        }
+      }
+    })
   }
 
   ngOnDestroy(): void {
@@ -289,6 +312,18 @@ export class DocumentDetailComponent
     this.unsubscribeNotifier.complete()
   }
 
+  onNavChange(navChangeEvent: NgbNavChangeEvent) {
+    const [foundNavIDkey] = Object.entries(DocumentDetailNavIDs).find(
+      ([, navIDValue]) => navIDValue == navChangeEvent.nextId
+    )
+    if (foundNavIDkey)
+      this.router.navigate([
+        'documents',
+        this.documentId,
+        foundNavIDkey.toLowerCase(),
+      ])
+  }
+
   updateComponent(doc: PaperlessDocument) {
     this.document = doc
     this.requiresPassword = false