Handle settings live refresh, unsubscribe subscriptions

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

@@ -16,7 +16,15 @@ import {
 } from 'src/app/services/settings.service'
 import { Toast, ToastService } from 'src/app/services/toast.service'
 import { dirtyCheck, DirtyComponent } from '@ngneat/dirty-check-forms'
-import { Observable, Subscription, BehaviorSubject, first } from 'rxjs'
+import {
+  Observable,
+  Subscription,
+  BehaviorSubject,
+  first,
+  tap,
+  takeUntil,
+  Subject,
+} from 'rxjs'
 import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
 import { ActivatedRoute } from '@angular/router'
 import { ViewportScroller } from '@angular/common'
@@ -57,7 +65,9 @@ export class SettingsComponent
   store: BehaviorSubject<any>
   storeSub: Subscription
   isDirty$: Observable<boolean>
-  isDirty: Boolean = false
+  isDirty: boolean = false
+  unsubscribeNotifier: Subject<any> = new Subject()
+  savePending: boolean = false
 
   get computedDateLocale(): string {
     return (
@@ -75,7 +85,11 @@ export class SettingsComponent
     @Inject(LOCALE_ID) public currentLocale: string,
     private viewportScroller: ViewportScroller,
     private activatedRoute: ActivatedRoute
-  ) {}
+  ) {
+    this.settings.settingsSaved.subscribe(() => {
+      if (!this.savePending) this.initialize()
+    })
+  }
 
   ngAfterViewInit(): void {
     if (this.activatedRoute.snapshot.fragment) {
@@ -88,6 +102,13 @@ export class SettingsComponent
   ngOnInit() {
     this.savedViewService.listAll().subscribe((r) => {
       this.savedViews = r.results
+      this.initialize()
+    })
+  }
+
+  initialize() {
+    this.unsubscribeNotifier.next(true)
+
     let storeData = {
       bulkEditConfirmationDialogs: this.settings.get(
         SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS
@@ -98,9 +119,7 @@ export class SettingsComponent
       documentListItemPerPage: this.settings.get(
         SETTINGS_KEYS.DOCUMENT_LIST_SIZE
       ),
-        darkModeUseSystem: this.settings.get(
+      darkModeUseSystem: this.settings.get(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM),
-          SETTINGS_KEYS.DARK_MODE_USE_SYSTEM
-        ),
       darkModeEnabled: this.settings.get(SETTINGS_KEYS.DARK_MODE_ENABLED),
       darkModeInvertThumbs: this.settings.get(
         SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED
@@ -159,19 +178,22 @@ export class SettingsComponent
     this.isDirty$ = dirtyCheck(this.settingsForm, this.store.asObservable())
 
     // Record dirty in case we need to 'undo' appearance settings if not saved on close
-      this.isDirty$.subscribe((dirty) => {
+    this.isDirty$
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((dirty) => {
         this.isDirty = dirty
       })
 
     // "Live" visual changes prior to save
-      this.settingsForm.valueChanges.subscribe(() => {
+    this.settingsForm.valueChanges
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
         this.settings.updateAppearanceSettings(
           this.settingsForm.get('darkModeUseSystem').value,
           this.settingsForm.get('darkModeEnabled').value,
           this.settingsForm.get('themeColor').value
         )
       })
-    })
   }
 
   ngOnDestroy() {
@@ -190,6 +212,7 @@ export class SettingsComponent
   }
 
   private saveLocalSettings() {
+    this.savePending = true
     const reloadRequired =
       this.settingsForm.value.displayLanguage !=
         this.store?.getValue()['displayLanguage'] || // displayLanguage is dirty
@@ -265,6 +288,7 @@ export class SettingsComponent
     this.settings
       .storeSettings()
       .pipe(first())
+      .pipe(tap(() => (this.savePending = false)))
       .subscribe({
         next: () => {
           this.store.next(this.settingsForm.value)

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

@@ -1,6 +1,7 @@
 import { DOCUMENT } from '@angular/common'
 import { HttpClient } from '@angular/common/http'
 import {
+  EventEmitter,
   Inject,
   Injectable,
   LOCALE_ID,
@@ -46,6 +47,8 @@ export class SettingsService {
 
   public displayName: string
 
+  public settingsSaved: EventEmitter<any> = new EventEmitter()
+
   constructor(
     rendererFactory: RendererFactory2,
     @Inject(DOCUMENT) private document,
@@ -370,7 +373,13 @@ export class SettingsService {
   }
 
   storeSettings(): Observable<any> {
-    return this.http.post(this.baseUrl, { settings: this.settings })
+    return this.http.post(this.baseUrl, { settings: this.settings }).pipe(
+      tap((results) => {
+        if (results.success) {
+          this.settingsSaved.emit()
+        }
+      })
+    )
   }
 
   maybeMigrateSettings() {