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

src-ui/src/app/services/settings.service.ts

@@ -7,6 +7,7 @@ import {
   LOCALE_ID,
   Renderer2,
   RendererFactory2,
+  signal,
 } from '@angular/core'
 import { Meta } from '@angular/platform-browser'
 import { CookieService } from 'ngx-cookie-service'
@@ -294,7 +295,8 @@ export class SettingsService {
   protected baseUrl: string = environment.apiBaseUrl + 'ui_settings/'
 
   private settings: Record<string, any> = {}
-  currentUser: User
+  private readonly settingsVersion = signal(0)
+  readonly currentUser = signal<User>(undefined)
 
   public settingsSaved: EventEmitter<any> = new EventEmitter()
 
@@ -303,17 +305,14 @@ export class SettingsService {
     return this._renderer
   }
 
-  public dashboardIsEmpty: boolean = false
+  readonly dashboardIsEmpty = signal(false)
+  readonly globalDropzoneEnabled = signal(true)
+  readonly globalDropzoneActive = signal(false)
+  readonly organizingSidebarSavedViews = signal(false)
 
-  public globalDropzoneEnabled: boolean = true
-  public globalDropzoneActive: boolean = false
-  public organizingSidebarSavedViews: boolean = false
-
-  private _allDisplayFields: Array<{ id: DisplayField; name: string }> =
+  readonly allDisplayFields = signal<Array<{ id: DisplayField; name: string }>>(
     DEFAULT_DISPLAY_FIELDS
-  public get allDisplayFields(): Array<{ id: DisplayField; name: string }> {
-    return this._allDisplayFields
-  }
+  )
   public displayFieldsInit: EventEmitter<boolean> = new EventEmitter()
 
   constructor() {
@@ -326,6 +325,10 @@ export class SettingsService {
     return !UNSAFE_OBJECT_KEYS.has(key)
   }
 
+  public trackChanges(): void {
+    this.settingsVersion()
+  }
+
   private assignSafeSettings(source: Record<string, any>) {
     if (!source || typeof source !== 'object' || Array.isArray(source)) {
       return
@@ -363,10 +366,10 @@ export class SettingsService {
         // to update lang cookie
         if (this.settings['language']?.length)
           this.setLanguage(this.settings['language'])
-        this.currentUser = uisettings.user
+        this.currentUser.set(uisettings.user)
         this.permissionsService.initialize(
           uisettings.permissions,
-          this.currentUser
+          this.currentUser()
         )
 
         this.initializeDisplayFields()
@@ -375,44 +378,39 @@ export class SettingsService {
   }
 
   public initializeDisplayFields() {
-    this._allDisplayFields = DEFAULT_DISPLAY_FIELDS
+    const displayFields = DEFAULT_DISPLAY_FIELDS?.map((field) => {
+      if (
+        field.id === DisplayField.NOTES &&
+        !this.get(SETTINGS_KEYS.NOTES_ENABLED)
+      ) {
+        return null
+      }
 
-    this._allDisplayFields = this._allDisplayFields
-      ?.map((field) => {
-        if (
-          field.id === DisplayField.NOTES &&
-          !this.get(SETTINGS_KEYS.NOTES_ENABLED)
-        ) {
-          return null
-        }
+      if (
+        [
+          DisplayField.TITLE,
+          DisplayField.CREATED,
+          DisplayField.ADDED,
+          DisplayField.ASN,
+          DisplayField.PAGE_COUNT,
+          DisplayField.SHARED,
+        ].includes(field.id)
+      ) {
+        return field
+      }
 
-        if (
-          [
-            DisplayField.TITLE,
-            DisplayField.CREATED,
-            DisplayField.ADDED,
-            DisplayField.ASN,
-            DisplayField.PAGE_COUNT,
-            DisplayField.SHARED,
-          ].includes(field.id)
-        ) {
-          return field
-        }
+      let type: PermissionType = Object.values(PermissionType).find((t) =>
+        t.includes(field.id)
+      )
+      if (field.id === DisplayField.OWNER) {
+        type = PermissionType.User
+      }
+      return this.permissionsService.currentUserCan(PermissionAction.View, type)
+        ? field
+        : null
+    }).filter(Boolean)
 
-        let type: PermissionType = Object.values(PermissionType).find((t) =>
-          t.includes(field.id)
-        )
-        if (field.id === DisplayField.OWNER) {
-          type = PermissionType.User
-        }
-        return this.permissionsService.currentUserCan(
-          PermissionAction.View,
-          type
-        )
-          ? field
-          : null
-      })
-      .filter((f) => f)
+    this.allDisplayFields.set(displayFields)
 
     if (
       this.permissionsService.currentUserCan(
@@ -421,13 +419,15 @@ export class SettingsService {
       )
     ) {
       this.customFieldsService.listAll().subscribe((r) => {
-        this._allDisplayFields = this._allDisplayFields.concat(
-          r.results.map((field) => {
-            return {
-              id: `${DisplayField.CUSTOM_FIELD}${field.id}` as any,
-              name: field.name,
-            }
-          })
+        this.allDisplayFields.set(
+          displayFields.concat(
+            r.results.map((field) => {
+              return {
+                id: `${DisplayField.CUSTOM_FIELD}${field.id}` as any,
+                name: field.name,
+              }
+            })
+          )
         )
         this.displayFieldsInit.emit(true)
       })
@@ -438,8 +438,8 @@ export class SettingsService {
 
   get displayName(): string {
     return (
-      this.currentUser.first_name ??
-      this.currentUser.username ??
+      this.currentUser()?.first_name ??
+      this.currentUser()?.username ??
       ''
     ).trim()
   }
@@ -572,7 +572,7 @@ export class SettingsService {
 
     // special case to fallback
     if (key === SETTINGS_KEYS.DEFAULT_PERMS_OWNER && value === undefined) {
-      return this.currentUser.id
+      return this.currentUser()?.id
     }
 
     if (value !== undefined) {
@@ -606,6 +606,7 @@ export class SettingsService {
       if (index == keys.length - 1) settingObj[keyPart] = value
       else settingObj = settingObj[keyPart]
     })
+    this.settingsVersion.update((version) => version + 1)
   }
 
   private settingIsSet(key: string): boolean {
@@ -688,7 +689,7 @@ export class SettingsService {
   }
 
   offerTour(): boolean {
-    return this.dashboardIsEmpty && !this.get(SETTINGS_KEYS.TOUR_COMPLETE)
+    return this.dashboardIsEmpty() && !this.get(SETTINGS_KEYS.TOUR_COMPLETE)
   }
 
   completeTour() {