From 2afa5940e33bc393ec7712ec0852f7a8d113ae25 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 12 Sep 2022 08:35:13 -0700
Subject: [PATCH] Fix live updating of comments on doc change

---
 .../document-comments.component.html          |  3 ++-
 .../document-comments.component.ts            | 27 +++++++++++++------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src-ui/src/app/components/document-comments/document-comments.component.html b/src-ui/src/app/components/document-comments/document-comments.component.html
index 9a2e7debb..78467dd7d 100644
--- a/src-ui/src/app/components/document-comments/document-comments.component.html
+++ b/src-ui/src/app/components/document-comments/document-comments.component.html
@@ -6,7 +6,8 @@
                 Please enter a comment.
             </div>
         </div>
-        <div class="form-group mt-2 d-flex justify-content-end">
+        <div class="form-group mt-2 d-flex justify-content-end align-items-center">
+            <div *ngIf="networkActive" class="spinner-border spinner-border-sm fw-normal me-auto" role="status"></div>
             <button type="button" class="btn btn-primary btn-sm" [disabled]="networkActive" (click)="addComment()" i18n>Add comment</button>
         </div>
     </form>
diff --git a/src-ui/src/app/components/document-comments/document-comments.component.ts b/src-ui/src/app/components/document-comments/document-comments.component.ts
index 5362e1661..b1d655306 100644
--- a/src-ui/src/app/components/document-comments/document-comments.component.ts
+++ b/src-ui/src/app/components/document-comments/document-comments.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, Input } from '@angular/core'
 import { DocumentCommentsService } from 'src/app/services/rest/document-comments.service'
 import { PaperlessDocumentComment } from 'src/app/data/paperless-document-comment'
 import { FormControl, FormGroup } from '@angular/forms'
@@ -10,7 +10,7 @@ import { ToastService } from 'src/app/services/toast.service'
   templateUrl: './document-comments.component.html',
   styleUrls: ['./document-comments.component.scss'],
 })
-export class DocumentCommentsComponent implements OnInit {
+export class DocumentCommentsComponent {
   commentForm: FormGroup = new FormGroup({
     newComment: new FormControl(''),
   })
@@ -19,19 +19,30 @@ export class DocumentCommentsComponent implements OnInit {
   comments: PaperlessDocumentComment[] = []
   newCommentError: boolean = false
 
+  private _documentId: number
+
   @Input()
-  documentId: number
+  set documentId(id: number) {
+    if (id != this._documentId) {
+      this._documentId = id
+      this.update()
+    }
+  }
 
   constructor(
     private commentsService: DocumentCommentsService,
     private toastService: ToastService
   ) {}
 
-  ngOnInit(): void {
+  update(): void {
+    this.networkActive = true
     this.commentsService
-      .getComments(this.documentId)
+      .getComments(this._documentId)
       .pipe(first())
-      .subscribe((comments) => (this.comments = comments))
+      .subscribe((comments) => {
+        this.comments = comments
+        this.networkActive = false
+      })
   }
 
   addComment() {
@@ -45,7 +56,7 @@ export class DocumentCommentsComponent implements OnInit {
     }
     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()
@@ -61,7 +72,7 @@ export class DocumentCommentsComponent implements OnInit {
   }
 
   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