From e19dd2d527d981c75932708e65dfcb11dbfa096f Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 16 Mar 2023 23:18:16 -0700
Subject: [PATCH] Support navigating directly to comments

---
 src-ui/src/app/app-routing.module.ts          | 33 +++++++++++------
 .../document-detail.component.html            | 14 +++----
 .../document-detail.component.ts              | 37 ++++++++++++++++++-
 .../document-card-large.component.html        |  2 +-
 .../document-card-large.component.scss        |  6 ---
 .../document-card-small.component.html        |  6 +--
 .../document-card-small.component.scss        |  8 +---
 .../document-list.component.html              | 15 ++++++++
 src-ui/src/styles.scss                        |  6 +++
 9 files changed, 91 insertions(+), 36 deletions(-)

diff --git a/src-ui/src/app/app-routing.module.ts b/src-ui/src/app/app-routing.module.ts
index 6f26a81fd..4d12ee4f3 100644
--- a/src-ui/src/app/app-routing.module.ts
+++ b/src-ui/src/app/app-routing.module.ts
@@ -65,6 +65,17 @@ const routes: Routes = [
           },
         },
       },
+      {
+        path: 'documents/:id/:section',
+        component: DocumentDetailComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.Document,
+          },
+        },
+      },
       {
         path: 'asn/:id',
         component: DocumentAsnComponent,
@@ -143,17 +154,6 @@ const routes: Routes = [
           },
         },
       },
-      {
-        path: 'tasks',
-        component: TasksComponent,
-        canActivate: [PermissionsGuard],
-        data: {
-          requiredPermission: {
-            action: PermissionAction.View,
-            type: PermissionType.PaperlessTask,
-          },
-        },
-      },
       {
         path: 'settings/:section',
         component: SettingsComponent,
@@ -171,6 +171,17 @@ const routes: Routes = [
         component: SettingsComponent,
         canDeactivate: [DirtyFormGuard],
       },
+      {
+        path: 'tasks',
+        component: TasksComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.PaperlessTask,
+          },
+        },
+      },
       { path: 'tasks', component: TasksComponent },
     ],
   },
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index 43eeed0ef..c5d727459 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/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">
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts
index 401b82944..029fab642 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/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
diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
index 102fe9844..b6417ceb1 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
@@ -67,7 +67,7 @@
 
 
           <div class="list-group list-group-horizontal border-0 card-info ms-md-auto mt-2 mt-md-0">
-            <button *ngIf="document.n_comments" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2" title="View comments" i18n-title>
+            <button routerLink="/documents/{{document.id}}/comments" *ngIf="document.n_comments" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2" title="View comments" i18n-title>
               <svg class="metadata-icon me-2 text-muted" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#chat-left-text"/>
               </svg>
diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
index e3398c245..35f6f53b1 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
@@ -73,12 +73,6 @@
     }
   }
 
-  .metadata-icon {
-    width: 0.9rem;
-    height: 0.9rem;
-    padding: 0.05rem;
-  }
-
   .search-score {
     padding-top: 0.35rem !important;
   }
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
index 00e233425..107b2ecbc 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -18,13 +18,13 @@
       </div>
     </div>
 
-    <div *ngIf="document.n_comments" class="document-card-comments pe-none py-2 px-1">
-    <span class="badge rounded-pill bg-light border text-primary">
+    <a routerLink="/documents/{{document.id}}/comments" *ngIf="document.n_comments" class="document-card-comments py-2 px-1">
+      <span class="badge rounded-pill bg-light border text-primary">
       <svg class="metadata-icon ms-1 me-1" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#chat-left-text"/>
       </svg>
       {{document.n_comments}}</span>
-    </div>
+    </a>
 
     <div class="card-body p-2">
       <p class="card-text">
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
index 4825be9b2..95c66d7d6 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
@@ -5,7 +5,7 @@
 .doc-img {
   object-fit: cover;
   object-position: top left;
-  height: 175px;
+  height: 180px;
   mix-blend-mode: multiply;
 }
 
@@ -66,12 +66,6 @@
   }
 }
 
-.metadata-icon {
-  width: 0.9rem;
-  height: 0.9rem;
-  padding: 0.05rem;
-}
-
 .card-footer .btn {
   padding-top: .10rem;
 }
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index 25a75c1b6..c46206d61 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -139,6 +139,12 @@
         [currentSortReverse]="list.sortReverse"
         (sort)="onSort($event)"
         i18n>Title</th>
+      <th class="d-none d-xl-table-cell"
+        appSortable="n_comments"
+        [currentSortField]="list.sortField"
+        [currentSortReverse]="list.sortReverse"
+        (sort)="onSort($event)"
+        i18n>Comments</th>
       <th class="d-none d-xl-table-cell"
         appSortable="document_type__name"
         [currentSortField]="list.sortField"
@@ -184,6 +190,15 @@
           <a routerLink="/documents/{{d.id}}" title="Edit document" i18n-title style="overflow-wrap: anywhere;">{{d.title | documentTitle}}</a>
           <app-tag [tag]="t" *ngFor="let t of d.tags$ | async" class="ms-1" clickable="true" linkTitle="Filter by tag" i18n-linkTitle (click)="clickTag(t.id);$event.stopPropagation()"></app-tag>
         </td>
+        <td class="d-none d-xl-table-cell">
+          <a routerLink="/documents/{{d.id}}/comments" *ngIf="d.n_comments" class="btn btn-sm p-0">
+            <span class="badge rounded-pill bg-light border text-primary">
+            <svg class="metadata-icon ms-1 me-1" fill="currentColor">
+              <use xlink:href="assets/bootstrap-icons.svg#chat-left-text"/>
+            </svg>
+            {{d.n_comments}}</span>
+          </a>
+        </td>
         <td class="d-none d-xl-table-cell">
           <ng-container *ngIf="d.document_type">
             <a (click)="clickDocumentType(d.document_type);$event.stopPropagation()" title="Filter by document type" i18n-title>{{(d.document_type$ | async)?.name}}</a>
diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index ed4efbe9d..e5a69361f 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -436,6 +436,12 @@ textarea,
   height: 12px;
 }
 
+.metadata-icon {
+  width: 0.9rem;
+  height: 0.9rem;
+  padding: 0.05rem;
+}
+
 table.table {
   color: var(--bs-body-color);