Support navigating directly to comments

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

@@ -67,8 +67,8 @@
 
         <form [formGroup]='documentForm' (ngSubmit)="save()">
 
-            <ul ngbNav #nav="ngbNav" class="nav-tabs">
-                <li [ngbNavItem]="1">
+            <ul ngbNav #nav="ngbNav" class="nav-tabs" (navChange)="onNavChange($event)" [(activeId)]="activeNavID">
+                <li [ngbNavItem]="DocumentDetailNavIDs.Details">
                     <a ngbNavLink i18n>Details</a>
                     <ng-template ngbNavContent>
 
@@ -87,7 +87,7 @@
                     </ng-template>
                 </li>
 
-                <li [ngbNavItem]="2">
+                <li [ngbNavItem]="DocumentDetailNavIDs.Content">
                     <a ngbNavLink i18n>Content</a>
                     <ng-template ngbNavContent>
                         <div class="mb-3">
@@ -96,7 +96,7 @@
                     </ng-template>
                 </li>
 
-                <li [ngbNavItem]="3">
+                <li [ngbNavItem]="DocumentDetailNavIDs.Metadata">
                     <a ngbNavLink i18n>Metadata</a>
                     <ng-template ngbNavContent>
 
@@ -147,7 +147,7 @@
                     </ng-template>
                 </li>
 
-                <li [ngbNavItem]="4" class="d-md-none">
+                <li [ngbNavItem]="DocumentDetailNavIDs.Preview" class="d-md-none">
                     <a ngbNavLink i18n>Preview</a>
                     <ng-template ngbNavContent *ngIf="!pdfPreview.offsetParent">
                         <div class="position-relative">
@@ -171,14 +171,14 @@
                     </ng-template>
                 </li>
 
-                <li [ngbNavItem]="5" *ngIf="commentsEnabled">
+                <li [ngbNavItem]="DocumentDetailNavIDs.Comments" *ngIf="commentsEnabled">
                     <a ngbNavLink i18n>Comments <span *ngIf="document?.n_comments" class="badge text-bg-secondary ms-1">{{document.n_comments}}</span></a>
                     <ng-template ngbNavContent>
                         <app-document-comments [documentId]="documentId" (updated)="commentsUpdated($event)"></app-document-comments>
                     </ng-template>
                 </li>
 
-                <li [ngbNavItem]="6" *appIfOwner="document">
+                <li [ngbNavItem]="DocumentDetailNavIDs.Permissions" *appIfOwner="document">
                     <a ngbNavLink i18n>Permissions</a>
                     <ng-template ngbNavContent>
                         <div class="mb-3">

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