Basic frontend settings retrieval

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

@@ -17,7 +17,7 @@ import {
 } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { dirtyCheck, DirtyComponent } from '@ngneat/dirty-check-forms'
-import { Observable, Subscription, BehaviorSubject } from 'rxjs'
+import { Observable, Subscription, BehaviorSubject, first } from 'rxjs'
 
 @Component({
   selector: 'app-settings',
@@ -72,6 +72,10 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
   ngOnInit() {
     this.savedViewService.listAll().subscribe((r) => {
       this.savedViews = r.results
+      this.settings
+        .retrieveSettings()
+        .pipe(first())
+        .subscribe(() => {
           let storeData = {
             bulkEditConfirmationDialogs: this.settings.get(
               SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS
@@ -136,7 +140,10 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
           })
 
           // Initialize dirtyCheck
-      this.isDirty$ = dirtyCheck(this.settingsForm, this.store.asObservable())
+          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) => {
@@ -152,6 +159,7 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
             )
           })
         })
+    })
   }
 
   ngOnDestroy() {
@@ -227,10 +235,23 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
       this.settingsForm.value.notificationsConsumerSuppressOnDashboard
     )
     this.settings.setLanguage(this.settingsForm.value.displayLanguage)
+    this.settings
+      .storeSettings()
+      .pipe(first())
+      .subscribe({
+        next: () => {
           this.store.next(this.settingsForm.value)
           this.documentListViewService.updatePageSize()
           this.settings.updateAppearanceSettings()
           this.toastService.showInfo($localize`Settings saved successfully.`)
+        },
+        error: (error) => {
+          this.toastService.showError(
+            $localize`An error occurred while saving settings.`
+          )
+          console.log(error)
+        },
+      })
   }
 
   get displayLanguageOptions(): LanguageOption[] {

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

@@ -1,4 +1,5 @@
 import { DOCUMENT } from '@angular/common'
+import { HttpClient } from '@angular/common/http'
 import {
   Inject,
   Injectable,
@@ -9,11 +10,14 @@ import {
 } from '@angular/core'
 import { Meta } from '@angular/platform-browser'
 import { CookieService } from 'ngx-cookie-service'
+import { first, Observable } from 'rxjs'
 import {
   BRIGHTNESS,
   estimateBrightnessForColor,
   hexToHsl,
 } from 'src/app/utils/color'
+import { environment } from 'src/environments/environment'
+import { Results } from '../data/results'
 
 export interface PaperlessSettings {
   key: string
@@ -132,17 +136,34 @@ const SETTINGS: PaperlessSettings[] = [
 })
 export class SettingsService {
   private renderer: Renderer2
+  protected baseUrl: string = environment.apiBaseUrl + 'frontend_settings/'
+
+  private settings: Object = {}
+  private settings$: Observable<Results<any>>
 
   constructor(
-    private rendererFactory: RendererFactory2,
+    rendererFactory: RendererFactory2,
     @Inject(DOCUMENT) private document,
     private cookieService: CookieService,
     private meta: Meta,
-    @Inject(LOCALE_ID) private localeId: string
+    @Inject(LOCALE_ID) private localeId: string,
+    protected http: HttpClient
   ) {
     this.renderer = rendererFactory.createRenderer(null, null)
 
+    this.retrieveSettings()
+      .pipe(first())
+      .subscribe((response) => {
+        Object.assign(this.settings, response['settings'])
+
         this.updateAppearanceSettings()
+      })
+  }
+
+  public retrieveSettings(): Observable<Results<any>> {
+    if (!this.settings$)
+      this.settings$ = this.http.get<Results<any>>(this.baseUrl)
+    return this.settings$
   }
 
   public updateAppearanceSettings(
@@ -390,7 +411,16 @@ export class SettingsService {
       return null
     }
 
-    let value = localStorage.getItem(key)
+    let value = null
+    // parse key:key:key into nested object
+    const keys = key.replace('general-settings:', '').split(':')
+    let settingObj = this.settings
+    keys.forEach((keyPart, index) => {
+      keyPart = keyPart.replace(/-/g, '_')
+      if (!settingObj.hasOwnProperty(keyPart)) return
+      if (index == keys.length - 1) value = settingObj[keyPart]
+      else settingObj = settingObj[keyPart]
+    })
 
     if (value != null) {
       switch (setting.type) {
@@ -409,10 +439,18 @@ export class SettingsService {
   }
 
   set(key: string, value: any) {
-    localStorage.setItem(key, value.toString())
+    // parse key:key:key into nested object
+    let settingObj = this.settings
+    const keys = key.replace('general-settings:', '').split(':')
+    keys.forEach((keyPart, index) => {
+      keyPart = keyPart.replace(/-/g, '_')
+      if (!settingObj.hasOwnProperty(keyPart)) settingObj[keyPart] = {}
+      if (index == keys.length - 1) settingObj[keyPart] = value
+      else settingObj = settingObj[keyPart]
+    })
   }
 
-  unset(key: string) {
-    localStorage.removeItem(key)
+  storeSettings(): Observable<any> {
+    return this.http.post(this.baseUrl, { settings: this.settings })
   }
 }

src/documents/serialisers.py

@@ -515,5 +515,5 @@ class FrontendSettingsViewSerializer(serializers.ModelSerializer):
         return instance
 
     def create(self, validated_data):
-        frontend_settings = FrontendSettings.objects.create(**validated_data)
+        frontend_settings = FrontendSettings.objects.update_or_create(**validated_data)
         return frontend_settings