Just include comments on document object

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

@@ -17,21 +17,16 @@ export class DocumentCommentsComponent extends ComponentWithPermissions {
   })
 
   networkActive = false
-  comments: PaperlessDocumentComment[] = []
   newCommentError: boolean = false
 
-  private _documentId: number
+  @Input()
+  documentId: number
 
   @Input()
-  set documentId(id: number) {
-    if (id != this._documentId) {
-      this._documentId = id
-      this.update()
-    }
-  }
+  comments: PaperlessDocumentComment[] = []
 
   @Output()
-  updated: EventEmitter<number> = new EventEmitter<number>()
+  updated: EventEmitter<PaperlessDocumentComment[]> = new EventEmitter()
 
   constructor(
     private commentsService: DocumentCommentsService,
@@ -40,17 +35,6 @@ export class DocumentCommentsComponent extends ComponentWithPermissions {
     super()
   }
 
-  update(): void {
-    this.networkActive = true
-    this.commentsService
-      .getComments(this._documentId)
-      .pipe(first())
-      .subscribe((comments) => {
-        this.comments = comments
-        this.networkActive = false
-      })
-  }
-
   addComment() {
     const comment: string = this.commentForm
       .get('newComment')
@@ -62,12 +46,12 @@ export class DocumentCommentsComponent extends ComponentWithPermissions {
     }
     this.newCommentError = false
     this.networkActive = true
-    this.commentsService.addComment(this._documentId, comment).subscribe({
+    this.commentsService.addComment(this.documentId, comment).subscribe({
       next: (result) => {
         this.comments = result
         this.commentForm.get('newComment').reset()
         this.networkActive = false
-        this.updated.emit(this.comments.length)
+        this.updated.emit(this.comments)
       },
       error: (e) => {
         this.networkActive = false
@@ -79,11 +63,11 @@ export class DocumentCommentsComponent extends ComponentWithPermissions {
   }
 
   deleteComment(commentId: number) {
-    this.commentsService.deleteComment(this._documentId, commentId).subscribe({
+    this.commentsService.deleteComment(this.documentId, commentId).subscribe({
       next: (result) => {
         this.comments = result
         this.networkActive = false
-        this.updated.emit(this.comments.length)
+        this.updated.emit(this.comments)
       },
       error: (e) => {
         this.networkActive = false

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

@@ -172,9 +172,9 @@
                 </li>
 
                 <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>
+                    <a ngbNavLink i18n>Comments <span *ngIf="document?.comments.length" class="badge text-bg-secondary ms-1">{{document.comments.length}}</span></a>
                     <ng-template ngbNavContent>
-                        <app-document-comments [documentId]="documentId" (updated)="commentsUpdated($event)"></app-document-comments>
+                        <app-document-comments [documentId]="documentId" [comments]="document?.comments" (updated)="commentsUpdated($event)"></app-document-comments>
                     </ng-template>
                 </li>
 

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

@@ -42,6 +42,7 @@ import {
 } from 'src/app/services/permissions.service'
 import { PaperlessUser } from 'src/app/data/paperless-user'
 import { UserService } from 'src/app/services/rest/user.service'
+import { PaperlessDocumentComment } from 'src/app/data/paperless-document-comment'
 
 enum DocumentDetailNavIDs {
   Details = 1,
@@ -667,8 +668,8 @@ export class DocumentDetailComponent
     )
   }
 
-  commentsUpdated(n_comments: number) {
-    this.document.n_comments = n_comments
+  commentsUpdated(comments: PaperlessDocumentComment[]) {
+    this.document.comments = comments
     this.openDocumentService.refreshDocument(this.documentId)
   }
 

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html

@@ -67,11 +67,11 @@
 
 
           <div class="list-group list-group-horizontal border-0 card-info ms-md-auto mt-2 mt-md-0">
-            <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>
+            <button routerLink="/documents/{{document.id}}/comments" *ngIf="document.comments.length" 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>
-              <small i18n>{{document.n_comments}} Comments</small>
+              <small i18n>{{document.comments.length}} Comments</small>
             </button>
             <button *ngIf="document.document_type" type="button" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2" title="Filter by document type" i18n-title
              (click)="clickDocumentType.emit(document.document_type);$event.stopPropagation()">

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html

@@ -18,12 +18,12 @@
       </div>
     </div>
 
-    <a routerLink="/documents/{{document.id}}/comments" *ngIf="document.n_comments" class="document-card-comments py-2 px-1">
+    <a routerLink="/documents/{{document.id}}/comments" *ngIf="document.comments.length" 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>
+      {{document.comments.length}}</span>
     </a>
 
     <div class="card-body p-2">

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts

@@ -74,7 +74,7 @@ export class DocumentCardSmallComponent extends ComponentWithPermissions {
   }
 
   getTagsLimited$() {
-    const limit = this.document.n_comments > 0 ? 6 : 7
+    const limit = this.document.comments.length > 0 ? 6 : 7
     return this.document.tags$.pipe(
       map((tags) => {
         if (tags.length > limit) {

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

@@ -140,7 +140,7 @@
         (sort)="onSort($event)"
         i18n>Title</th>
       <th class="d-none d-xl-table-cell"
-        appSortable="n_comments"
+        appSortable="num_comments"
         [currentSortField]="list.sortField"
         [currentSortReverse]="list.sortReverse"
         (sort)="onSort($event)"
@@ -191,12 +191,12 @@
           <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">
+          <a routerLink="/documents/{{d.id}}/comments" *ngIf="d.comments.length" 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>
+            {{d.comments.length}}</span>
           </a>
         </td>
         <td class="d-none d-xl-table-cell">