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

src-ui/src/app/components/manage/document-attributes/custom-fields/custom-fields.component.html

@@ -8,16 +8,16 @@
     </div>
   </li>
 
-  @if (loading) {
+  @if (loading()) {
     <li class="list-group-item">
       <div class="spinner-border spinner-border-sm me-2" role="status"></div>
       <ng-container i18n>Loading...</ng-container>
     </li>
   }
 
-  @for (field of fields; track field) {
+  @for (field of fields(); track field) {
     <li class="list-group-item">
-      <div class="row fade" [class.show]="show">
+      <div class="row fade" [class.show]="show()">
         <div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editField(field)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.CustomField)">{{field.name}}</button></div>
         <div class="col d-flex align-items-center">{{getDataType(field)}}</div>
         <div class="col">
@@ -64,7 +64,7 @@
       </div>
     </li>
   }
-  @if (!loading && fields.length === 0) {
+  @if (!loading() && fields().length === 0) {
     <li class="list-group-item" i18n>No fields defined.</li>
   }
 </ul>

src-ui/src/app/components/manage/document-attributes/custom-fields/custom-fields.component.spec.ts

@@ -94,7 +94,7 @@ describe('CustomFieldsComponent', () => {
     toastService = TestBed.inject(ToastService)
     listViewService = TestBed.inject(DocumentListViewService)
     settingsService = TestBed.inject(SettingsService)
-    settingsService.currentUser = { id: 0, username: 'test' }
+    settingsService.currentUser.set({ id: 0, username: 'test' })
 
     fixture = TestBed.createComponent(CustomFieldsComponent)
     component = fixture.componentInstance

src-ui/src/app/components/manage/document-attributes/custom-fields/custom-fields.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, OnInit, inject, signal } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import {
   NgbDropdownModule,
@@ -6,7 +6,7 @@ import {
   NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { delay, takeUntil, tap } from 'rxjs'
+import { takeUntil, tap } from 'rxjs'
 import { ConfirmDialogComponent } from 'src/app/components/common/confirm-dialog/confirm-dialog.component'
 import { CustomFieldEditDialogComponent } from 'src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 import { EditDialogMode } from 'src/app/components/common/edit-dialog/edit-dialog.component'
@@ -51,33 +51,33 @@ export class CustomFieldsComponent
   private readonly documentService = inject(DocumentService)
   private readonly savedViewService = inject(SavedViewService)
 
-  public fields: CustomField[] = []
+  readonly fields = signal<CustomField[]>([])
 
   ngOnInit() {
     this.reload()
   }
 
   reload() {
+    this.loading.set(true)
     this.customFieldsService
       .listAll()
       .pipe(
         takeUntil(this.unsubscribeNotifier),
         tap((r) => {
-          this.fields = r.results
-        }),
-        delay(100)
+          this.fields.set(r.results)
+        })
       )
       .subscribe(() => {
-        this.show = true
-        this.loading = false
+        this.show.set(true)
+        this.loading.set(false)
       })
   }
 
   editField(field: CustomField) {
     const modal = this.modalService.open(CustomFieldEditDialogComponent)
-    modal.componentInstance.dialogMode = field
-      ? EditDialogMode.EDIT
-      : EditDialogMode.CREATE
+    modal.componentInstance.dialogMode.set(
+      field ? EditDialogMode.EDIT : EditDialogMode.CREATE
+    )
     modal.componentInstance.object = field
     modal.componentInstance.succeeded
       .pipe(takeUntil(this.unsubscribeNotifier))