Rework comment UI

Add error popups, text field validation, move form, move comment header to footer, updated styling

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

@@ -1,25 +1,29 @@
 <div *ngIf="comments">
-    <form [formGroup]='commentForm'>
+    <div *ngFor="let comment of comments" class="card border mb-3">
-        <div class="form-group">
+        <div class="card-body text-dark">
-            <textarea class="form-control" rows="5" formControlName='newcomment'></textarea>
+            <p class="card-text">{{comment.comment}}</p>
         </div>
-        <button type="button" class="btn btn-primary" [disabled]="networkActive" (click)="addComment()" i18n>Add comment</button>
+        <div class="d-flex card-footer small bg-light text-primary justify-content-between align-items-center">
-    </form>
+            <span>{{displayName(comment)}} - {{ comment?.created | customDate}}</span>
-    <hr>
+            <btn class="btn btn-link btn-sm p-0 fade" (click)="deleteComment(comment.id)">
-    <div *ngFor="let comment of comments; trackBy: commentId" class="card border-bg-primary bg-primary mb-3 comment-card" [attr.comment-id]="comment.id">
+                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
-        <div class="d-flex card-header comment-card-header text-white justify-content-between">
+                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
-            <span>{{comment?.user?.firstname}} {{comment?.user?.lastname}} ({{comment?.user?.username}}) - {{ comment?.created | customDate}}</span>
+                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
-            <span>
+                </svg>
-                <a class="text-white" (click)="deleteComment(comment.id)">
+            </btn>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
-                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
-                        <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
-                    </svg>
-                </a>
-            </span>
-        </div>
-        <div class="card-body bg-white text-dark comment-card-body card-text">
-            {{comment.comment}}
         </div>
     </div>
+    <hr>
+    <form [formGroup]="commentForm" class="needs-validation" novalidate>
+        <div class="form-group">
+            <textarea class="form-control form-control-sm" [class.is-invalid]="newCommentError" rows="3" formControlName="newComment" placeholder="Enter comment" i18n-placeholder required></textarea>
+            <div class="invalid-feedback" i18n>
+                Please enter a comment.
+            </div>
+        </div>
+        <div class="form-group mt-2 d-flex justify-content-end">
+            <button type="button" class="btn btn-primary btn-sm" [disabled]="networkActive" (click)="addComment()" i18n>Add comment</button>
+        </div>
+    </form>
+    <hr>
 </div>

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

@@ -1,22 +1,9 @@
-.comment-card-body {
+.card-body {
-    padding-top: .8rem !important;
+    max-height: 12rem;
-    padding-bottom: .8rem !important;
-    max-height: 10rem;
     overflow: scroll;
     white-space: pre-wrap;
 }
 
-.comment-card-header a {
+.card:hover .fade {
-    border: none;
+    opacity: 1;
-    background: none;
-    padding: 5px;
-    border-radius: 50%;
-}
-
-.comment-card-header a:hover {
-    background: #FFF;
-}
-
-.comment-card-header a:hover svg {
-    fill: var(--primary);
 }

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

@@ -12,11 +12,12 @@ import { ToastService } from 'src/app/services/toast.service'
 })
 export class DocumentCommentsComponent implements OnInit {
   commentForm: FormGroup = new FormGroup({
-    newcomment: new FormControl(''),
+    newComment: new FormControl(''),
   })
 
   networkActive = false
   comments: PaperlessDocumentComment[] = []
+  newCommentError: boolean = false
 
   @Input()
   documentId: number
@@ -33,27 +34,30 @@ export class DocumentCommentsComponent implements OnInit {
       .subscribe((comments) => (this.comments = comments))
   }
 
-  commentId(index, comment: PaperlessDocumentComment) {
-    return comment.id
-  }
-
   addComment() {
+    const comment: string = this.commentForm
+      .get('newComment')
+      .value.toString()
+      .trim()
+    if (comment.length == 0) {
+      this.newCommentError = true
+      return
+    }
+    this.newCommentError = false
     this.networkActive = true
-    this.commentsService
+    this.commentsService.addComment(this.documentId, comment).subscribe({
-      .addComment(this.documentId, this.commentForm.get('newcomment').value)
+      next: (result) => {
-      .subscribe({
+        this.comments = result
-        next: (result) => {
+        this.commentForm.get('newComment').reset()
-          this.comments = result
+        this.networkActive = false
-          this.commentForm.get('newcomment').reset()
+      },
-          this.networkActive = false
+      error: (e) => {
-        },
+        this.networkActive = false
-        error: (e) => {
+        this.toastService.showError(
-          this.networkActive = false
+          $localize`Error saving comment: ${e.toString()}`
-          this.toastService.showError(
+        )
-            $localize`Error saving comment: ${e.toString()}`
+      },
-          )
+    })
-        },
-      })
   }
 
   deleteComment(commentId: number) {
@@ -70,4 +74,17 @@ export class DocumentCommentsComponent implements OnInit {
       },
     })
   }
+
+  displayName(comment: PaperlessDocumentComment): string {
+    if (!comment.user) return ''
+    let nameComponents = []
+    if (comment.user.firstname) nameComponents.unshift(comment.user.firstname)
+    if (comment.user.lastname) nameComponents.unshift(comment.user.lastname)
+    if (comment.user.username) {
+      if (nameComponents.length > 0)
+        nameComponents.push(`(${comment.user.username})`)
+      else nameComponents.push(comment.user.username)
+    }
+    return nameComponents.join(' ')
+  }
 }