Rename comments --> notes

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

@@ -0,0 +1,29 @@
+<div *ngIf="notes">
+    <form [formGroup]="noteForm" class="needs-validation mt-3" *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Note }" novalidate>
+        <div class="form-group">
+            <textarea class="form-control form-control-sm" [class.is-invalid]="newNoteError" rows="3" formControlName="newNote" placeholder="Enter note" i18n-placeholder (keydown)="noteFormKeydown($event)" required></textarea>
+            <div class="invalid-feedback" i18n>
+                Please enter a note.
+            </div>
+        </div>
+        <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)="addNote()" i18n>Add note</button>
+        </div>
+    </form>
+    <hr>
+    <div *ngFor="let note of notes" class="card border mb-3">
+        <div class="card-body text-dark">
+            <p class="card-text">{{note.note}}</p>
+        </div>
+        <div class="d-flex card-footer small bg-light text-primary justify-content-between align-items-center">
+            <span>{{displayName(note)}} - {{ note.created | customDate}}</span>
+            <button type="button" class="btn btn-link btn-sm p-0 fade" title="Delete note" i18n-title (click)="deleteNote(note.id)" *appIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Note }">
+                <svg width="13" height="13" fill="currentColor">
+                    <use xlink:href="assets/bootstrap-icons.svg#trash" />
+                </svg>
+                <span class="visually-hidden" i18n>Delete note</span>
+            </button>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,9 @@
+.card-body {
+    max-height: 12rem;
+    overflow: scroll;
+    white-space: pre-wrap;
+}
+
+.card:hover .fade {
+    opacity: 1;
+}

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

@@ -0,0 +1,106 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core'
+import { DocumentNotesService } from 'src/app/services/rest/document-notes.service'
+import { PaperlessDocumentNote } from 'src/app/data/paperless-document-note'
+import { FormControl, FormGroup } from '@angular/forms'
+import { first } from 'rxjs/operators'
+import { ToastService } from 'src/app/services/toast.service'
+import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
+import { UserService } from 'src/app/services/rest/user.service'
+import { PaperlessUser } from 'src/app/data/paperless-user'
+
+@Component({
+  selector: 'app-document-notes',
+  templateUrl: './document-notes.component.html',
+  styleUrls: ['./document-notes.component.scss'],
+})
+export class DocumentNotesComponent extends ComponentWithPermissions {
+  noteForm: FormGroup = new FormGroup({
+    newNote: new FormControl(''),
+  })
+
+  networkActive = false
+  newNoteError: boolean = false
+
+  @Input()
+  documentId: number
+
+  @Input()
+  notes: PaperlessDocumentNote[] = []
+
+  @Output()
+  updated: EventEmitter<PaperlessDocumentNote[]> = new EventEmitter()
+  users: PaperlessUser[]
+
+  constructor(
+    private notesService: DocumentNotesService,
+    private toastService: ToastService,
+    private usersService: UserService
+  ) {
+    super()
+    this.usersService.listAll().subscribe({
+      next: (users) => {
+        this.users = users.results
+      },
+    })
+  }
+
+  addNote() {
+    const note: string = this.noteForm.get('newNote').value.toString().trim()
+    if (note.length == 0) {
+      this.newNoteError = true
+      return
+    }
+    this.newNoteError = false
+    this.networkActive = true
+    this.notesService.addNote(this.documentId, note).subscribe({
+      next: (result) => {
+        this.notes = result
+        this.noteForm.get('newNote').reset()
+        this.networkActive = false
+        this.updated.emit(this.notes)
+      },
+      error: (e) => {
+        this.networkActive = false
+        this.toastService.showError(
+          $localize`Error saving note: ${e.toString()}`
+        )
+      },
+    })
+  }
+
+  deleteNote(noteId: number) {
+    this.notesService.deleteNote(this.documentId, noteId).subscribe({
+      next: (result) => {
+        this.notes = result
+        this.networkActive = false
+        this.updated.emit(this.notes)
+      },
+      error: (e) => {
+        this.networkActive = false
+        this.toastService.showError(
+          $localize`Error deleting note: ${e.toString()}`
+        )
+      },
+    })
+  }
+
+  displayName(note: PaperlessDocumentNote): string {
+    if (!note.user) return ''
+    const user = this.users.find((u) => u.id === note.user)
+    if (!user) return ''
+    const nameComponents = []
+    if (user.first_name) nameComponents.unshift(user.first_name)
+    if (user.last_name) nameComponents.unshift(user.last_name)
+    if (user.username) {
+      if (nameComponents.length > 0) nameComponents.push(`(${user.username})`)
+      else nameComponents.push(user.username)
+    }
+    return nameComponents.join(' ')
+  }
+
+  noteFormKeydown(event: KeyboardEvent) {
+    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+      this.addNote()
+    }
+  }
+}