Fix tasks / users-groups and mail

src-ui/src/app/components/admin/tasks/tasks.component.ts

@@ -1,5 +1,5 @@
 import { JsonPipe, NgTemplateOutlet } from '@angular/common'
-import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { Component, inject, OnDestroy, OnInit, signal } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router, RouterLink } from '@angular/router'
 import {
@@ -166,18 +166,42 @@ export class TasksComponent
   public autoRefreshEnabled: boolean = true
   public readonly pageSize = 25
   public page: number = 1
-  public totalTasks: number = 0
-  public sectionCounts: Record<TaskSection, number> = {
+  private totalTasksSignal = signal(0)
+  private sectionCountsSignal = signal<Record<TaskSection, number>>({
     [TaskSection.All]: 0,
     [TaskSection.NeedsAttention]: 0,
     [TaskSection.InProgress]: 0,
     [TaskSection.Completed]: 0,
-  }
-  public pagedTasks: PaperlessTask[] = []
+  })
+  private pagedTasksSignal = signal<PaperlessTask[]>([])
   public selectedSection: TaskSection = TaskSection.All
   public selectedTaskType: PaperlessTaskType | null = null
   public selectedTriggerSource: PaperlessTaskTriggerSource | null = null
 
+  public get totalTasks(): number {
+    return this.totalTasksSignal()
+  }
+
+  public set totalTasks(value: number) {
+    this.totalTasksSignal.set(value)
+  }
+
+  public get sectionCounts(): Record<TaskSection, number> {
+    return this.sectionCountsSignal()
+  }
+
+  public set sectionCounts(value: Record<TaskSection, number>) {
+    this.sectionCountsSignal.set(value)
+  }
+
+  public get pagedTasks(): PaperlessTask[] {
+    return this.pagedTasksSignal()
+  }
+
+  public set pagedTasks(value: PaperlessTask[]) {
+    this.pagedTasksSignal.set(value)
+  }
+
   private _filterText: string = ''
   get filterText() {
     return this._filterText
@@ -480,6 +504,13 @@ export class TasksComponent
     return this.sectionCounts[section]
   }
 
+  private setSectionCount(section: TaskSection, count: number) {
+    this.sectionCountsSignal.update((counts) => ({
+      ...counts,
+      [section]: count,
+    }))
+  }
+
   sectionShowsResults(section: TaskSection): boolean {
     return section !== TaskSection.InProgress
   }
@@ -664,10 +695,12 @@ export class TasksComponent
       .statusCounts(this.getParamsForSection(TaskSection.All))
       .pipe(first(), takeUntil(this.unsubscribeNotifier))
       .subscribe((counts) => {
-        this.sectionCounts[TaskSection.All] = counts.all
-        this.sectionCounts[TaskSection.NeedsAttention] = counts.needs_attention
-        this.sectionCounts[TaskSection.InProgress] = counts.in_progress
-        this.sectionCounts[TaskSection.Completed] = counts.completed
+        this.sectionCounts = {
+          [TaskSection.All]: counts.all,
+          [TaskSection.NeedsAttention]: counts.needs_attention,
+          [TaskSection.InProgress]: counts.in_progress,
+          [TaskSection.Completed]: counts.completed,
+        }
       })
   }
 
@@ -735,9 +768,9 @@ export class TasksComponent
         next: (result) => {
           this.pagedTasks = result.results
           this.totalTasks = result.count
-          this.sectionCounts[TaskSection.All] = result.count
+          this.setSectionCount(TaskSection.All, result.count)
           if (this.selectedSection !== TaskSection.All) {
-            this.sectionCounts[this.selectedSection] = result.count
+            this.setSectionCount(this.selectedSection, result.count)
           }
           this.loading = false
           if (

src-ui/src/app/components/admin/users-groups/users-groups.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/core'
+import { Component, OnDestroy, OnInit, inject, signal } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subject, first, takeUntil } from 'rxjs'
@@ -43,8 +43,24 @@ export class UsersAndGroupsComponent
   permissionsService = inject(PermissionsService)
   private settings = inject(SettingsService)
 
-  users: User[]
-  groups: Group[]
+  private usersSignal = signal<User[]>(null)
+  private groupsSignal = signal<Group[]>(null)
+
+  get users(): User[] {
+    return this.usersSignal()
+  }
+
+  set users(value: User[]) {
+    this.usersSignal.set(value)
+  }
+
+  get groups(): Group[] {
+    return this.groupsSignal()
+  }
+
+  set groups(value: Group[]) {
+    this.groupsSignal.set(value)
+  }
 
   unsubscribeNotifier: Subject<any> = new Subject()
 

src-ui/src/app/components/manage/mail/mail.component.ts

@@ -1,9 +1,9 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/core'
+import { Component, OnDestroy, OnInit, inject, signal } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { ActivatedRoute } from '@angular/router'
 import { NgbDropdownModule, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { Subject, delay, first, takeUntil, tap } from 'rxjs'
+import { Subject, first, takeUntil, tap } from 'rxjs'
 import { MailAccount, MailAccountType } from 'src/app/data/mail-account'
 import { MailRule } from 'src/app/data/mail-rule'
 import { ObjectWithPermissions } from 'src/app/data/object-with-permissions'
@@ -56,19 +56,32 @@ export class MailComponent
 
   public MailAccountType = MailAccountType
 
-  private _mailAccounts: MailAccount[] = []
+  private mailAccountsSignal = signal<MailAccount[]>([])
 
   public get mailAccounts() {
-    return this._mailAccounts
+    return this.mailAccountsSignal()
   }
   private set mailAccounts(accounts: MailAccount[]) {
-    this._mailAccounts = accounts
+    this.mailAccountsSignal.set(accounts)
     this.mailAccountsById = new Map(
       accounts.map((account) => [account.id, account])
     )
   }
-  public mailAccountsById: Map<number, MailAccount> = new Map()
-  public mailRules: MailRule[] = []
+  private mailAccountsByIdSignal = signal<Map<number, MailAccount>>(new Map())
+  public get mailAccountsById(): Map<number, MailAccount> {
+    return this.mailAccountsByIdSignal()
+  }
+  private set mailAccountsById(value: Map<number, MailAccount>) {
+    this.mailAccountsByIdSignal.set(value)
+  }
+
+  private mailRulesSignal = signal<MailRule[]>([])
+  public get mailRules(): MailRule[] {
+    return this.mailRulesSignal()
+  }
+  public set mailRules(value: MailRule[]) {
+    this.mailRulesSignal.set(value)
+  }
 
   unsubscribeNotifier: Subject<any> = new Subject()
   oAuthAccountId: number
@@ -81,10 +94,35 @@ export class MailComponent
     return this.settingsService.get(SETTINGS_KEYS.OUTLOOK_OAUTH_URL)
   }
 
-  public loadingRules: boolean = true
-  public showRules: boolean = false
-  public loadingAccounts: boolean = true
-  public showAccounts: boolean = false
+  private loadingRulesSignal = signal(true)
+  private showRulesSignal = signal(false)
+  private loadingAccountsSignal = signal(true)
+  private showAccountsSignal = signal(false)
+
+  public get loadingRules(): boolean {
+    return this.loadingRulesSignal()
+  }
+  public set loadingRules(value: boolean) {
+    this.loadingRulesSignal.set(value)
+  }
+  public get showRules(): boolean {
+    return this.showRulesSignal()
+  }
+  public set showRules(value: boolean) {
+    this.showRulesSignal.set(value)
+  }
+  public get loadingAccounts(): boolean {
+    return this.loadingAccountsSignal()
+  }
+  public set loadingAccounts(value: boolean) {
+    this.loadingAccountsSignal.set(value)
+  }
+  public get showAccounts(): boolean {
+    return this.showAccountsSignal()
+  }
+  public set showAccounts(value: boolean) {
+    this.showAccountsSignal.set(value)
+  }
 
   ngOnInit(): void {
     this.mailAccountService
@@ -94,6 +132,8 @@ export class MailComponent
         takeUntil(this.unsubscribeNotifier),
         tap((r) => {
           this.mailAccounts = r.results
+          this.loadingAccounts = false
+          this.showAccounts = true
           if (this.oAuthAccountId) {
             this.editMailAccount(
               this.mailAccounts.find(
@@ -101,15 +141,11 @@ export class MailComponent
               )
             )
           }
-        }),
-        delay(100)
+        })
       )
       .subscribe({
-        next: () => {
-          this.loadingAccounts = false
-          this.showAccounts = true
-        },
         error: (e) => {
+          this.loadingAccounts = false
           this.toastService.showError(
             $localize`Error retrieving mail accounts`,
             e
@@ -124,15 +160,13 @@ export class MailComponent
         takeUntil(this.unsubscribeNotifier),
         tap((r) => {
           this.mailRules = r.results
-        }),
-        delay(100)
-      )
-      .subscribe({
-        next: (r) => {
           this.loadingRules = false
           this.showRules = true
-        },
+        })
+      )
+      .subscribe({
         error: (e) => {
+          this.loadingRules = false
           this.toastService.showError($localize`Error retrieving mail rules`, e)
         },
       })