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

src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.ts

@@ -1,11 +1,12 @@
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, OnInit, inject, signal } from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
 import {
   FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { first } from 'rxjs'
+import { first, map } from 'rxjs'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { Group } from 'src/app/data/group'
 import { User } from 'src/app/data/user'
@@ -38,22 +39,19 @@ export class UserEditDialogComponent
   implements OnInit
 {
   private toastService = inject(ToastService)
-  private groupsService: GroupService
+  private readonly groupsService = inject(GroupService)
 
-  groups: Group[]
-  passwordIsSet: boolean = false
-  public totpLoading: boolean = false
+  readonly groups = toSignal(
+    this.groupsService.listAll().pipe(map((result) => result.results)),
+    { initialValue: undefined as Group[] }
+  )
+  readonly passwordIsSet = signal(false)
+  readonly totpLoading = signal(false)
 
   constructor() {
     super()
     this.service = inject(UserService)
-    this.groupsService = inject(GroupService)
     this.settingsService = inject(SettingsService)
-
-    this.groupsService
-      .listAll()
-      .pipe(first())
-      .subscribe((result) => (this.groups = result.results))
   }
 
   ngOnInit(): void {
@@ -103,14 +101,15 @@ export class UserEditDialogComponent
     if (!groupsVal) return []
     else
       return groupsVal.flatMap(
-        (id) => this.groups.find((g) => g.id == id)?.permissions
+        (id) => this.groups()?.find((g) => g.id == id)?.permissions
       )
   }
 
   save(): void {
-    this.passwordIsSet =
+    this.passwordIsSet.set(
       this.objectForm.get('password').value?.toString().replaceAll('*', '')
         .length > 0
+    )
     super.save()
   }
 
@@ -119,13 +118,13 @@ export class UserEditDialogComponent
   }
 
   deactivateTotp() {
-    this.totpLoading = true
+    this.totpLoading.set(true)
     ;(this.service as UserService)
       .deactivateTotp(this.object)
       .pipe(first())
       .subscribe({
         next: (result) => {
-          this.totpLoading = false
+          this.totpLoading.set(false)
           if (result) {
             this.toastService.showInfo($localize`Totp deactivated`)
             this.object.is_mfa_enabled = false
@@ -134,7 +133,7 @@ export class UserEditDialogComponent
           }
         },
         error: (e) => {
-          this.totpLoading = false
+          this.totpLoading.set(false)
           this.toastService.showError($localize`Totp deactivation failed`, e)
         },
       })