Chorehancement: update to Angular v22, 'zoneless' / 'reactive' (#13114)

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

@@ -1,4 +1,4 @@
-@if (notes) {
+@if (notes()) {
   <div>
     <form [formGroup]="noteForm" class="needs-validation mt-3" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Note }" novalidate>
       <div class="form-group">
@@ -8,14 +8,14 @@
             </div>
       </div>
       <div class="form-group mt-2 d-flex justify-content-end align-items-center">
-        @if (networkActive) {
+        @if (networkActive()) {
           <div class="spinner-border spinner-border-sm fw-normal me-auto" role="status"></div>
         }
-        <button type="button" class="btn btn-primary btn-sm" [disabled]="networkActive || addDisabled" (click)="addNote()" i18n>Add note</button>
+        <button type="button" class="btn btn-primary btn-sm" [disabled]="networkActive() || addDisabled()" (click)="addNote()" i18n>Add note</button>
       </div>
     </form>
     <hr>
-      @for (note of notes; track note) {
+      @for (note of notes(); track note) {
         <div class="card border mb-3">
           <div class="card-body text-dark">
             <p class="card-text">{{note.note}}</p>

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

@@ -110,7 +110,7 @@ describe('DocumentNotesComponent', () => {
   })
 
   it('should display notes with user name / username', () => {
-    component.notes = notes
+    component.notes.set(notes)
     fixture.detectChanges()
     expect(fixture.debugElement.nativeElement.textContent).toContain(
       notes[0].note
@@ -154,7 +154,7 @@ describe('DocumentNotesComponent', () => {
   })
 
   it('should support note entry, show error if fails', () => {
-    component.documentId = 12
+    component.documentId.set(12)
     const note = 'This is the new note.'
     const noteTextArea = fixture.debugElement.query(By.css('textarea'))
     noteTextArea.nativeElement.value = note
@@ -177,7 +177,7 @@ describe('DocumentNotesComponent', () => {
   })
 
   it('should support note save on ctrl+Enter', () => {
-    component.documentId = 12
+    component.documentId.set(12)
     const note = 'This is the new note.'
     const noteTextArea = fixture.debugElement.query(By.css('textarea'))
     noteTextArea.nativeElement.value = note
@@ -189,8 +189,8 @@ describe('DocumentNotesComponent', () => {
   })
 
   it('should support delete note, show error if fails', () => {
-    component.documentId = 12
-    component.notes = notes
+    component.documentId.set(12)
+    component.notes.set(notes)
     fixture.detectChanges()
     const deleteButton = fixture.debugElement.queryAll(By.css('button'))[1] // 0 is add button
     const deleteSpy = jest.spyOn(notesService, 'deleteNote')

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

@@ -1,4 +1,12 @@
-import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Output,
+  inject,
+  input,
+  model,
+  signal,
+} from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -31,23 +39,17 @@ export class DocumentNotesComponent extends ComponentWithPermissions {
   private notesService = inject(DocumentNotesService)
   private toastService = inject(ToastService)
   private usersService = inject(UserService)
+  readonly documentId = model<number>(undefined)
+  readonly notes = model<DocumentNote[]>([])
+  readonly addDisabled = input(false)
+  readonly networkActive = signal(false)
 
   noteForm: FormGroup = new FormGroup({
     newNote: new FormControl(''),
   })
 
-  networkActive = false
   newNoteError: boolean = false
 
-  @Input()
-  documentId: number
-
-  @Input()
-  notes: DocumentNote[] = []
-
-  @Input()
-  addDisabled: boolean = false
-
   @Output()
   updated: EventEmitter<DocumentNote[]> = new EventEmitter()
   users: User[]
@@ -68,30 +70,30 @@ export class DocumentNotesComponent extends ComponentWithPermissions {
       return
     }
     this.newNoteError = false
-    this.networkActive = true
-    this.notesService.addNote(this.documentId, note).subscribe({
+    this.networkActive.set(true)
+    this.notesService.addNote(this.documentId(), note).subscribe({
       next: (result) => {
-        this.notes = result
+        this.notes.set(result)
         this.noteForm.get('newNote').reset()
-        this.networkActive = false
-        this.updated.emit(this.notes)
+        this.networkActive.set(false)
+        this.updated.emit(this.notes())
       },
       error: (e) => {
-        this.networkActive = false
+        this.networkActive.set(false)
         this.toastService.showError($localize`Error saving note`, e)
       },
     })
   }
 
   deleteNote(noteId: number) {
-    this.notesService.deleteNote(this.documentId, noteId).subscribe({
+    this.notesService.deleteNote(this.documentId(), noteId).subscribe({
       next: (result) => {
-        this.notes = result
-        this.networkActive = false
-        this.updated.emit(this.notes)
+        this.notes.set(result)
+        this.networkActive.set(false)
+        this.updated.emit(this.notes())
       },
       error: (e) => {
-        this.networkActive = false
+        this.networkActive.set(false)
         this.toastService.showError($localize`Error deleting note`, e)
       },
     })