Settings UI with live updating

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

@@ -89,6 +89,17 @@
           </div>
         </div>
 
+        <div class="row mb-3">
+          <div class="col-md-3 col-form-label">
+            <span i18n>Sidebar</span>
+          </div>
+          <div class="col">
+
+            <app-input-check i18n-title title="Use 'slim' sidebar (icons only)" formControlName="slimSidebarEnabled"></app-input-check>
+
+          </div>
+        </div>
+
         <div class="row mb-3">
           <div class="col-md-3 col-form-label">
             <span i18n>Dark mode</span>

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

@@ -1,11 +1,4 @@
-import {
+import { Component, Inject, LOCALE_ID, OnInit, OnDestroy } from '@angular/core'
-  Component,
-  Inject,
-  LOCALE_ID,
-  OnInit,
-  OnDestroy,
-  Renderer2,
-} from '@angular/core'
 import { FormControl, FormGroup } from '@angular/forms'
 import { PaperlessSavedView } from 'src/app/data/paperless-saved-view'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
@@ -18,6 +11,7 @@ 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 { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
+import { ForwardRefHandling } from '@angular/compiler'
 
 @Component({
   selector: 'app-settings',
@@ -31,6 +25,7 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
     bulkEditConfirmationDialogs: new FormControl(null),
     bulkEditApplyOnClose: new FormControl(null),
     documentListItemPerPage: new FormControl(null),
+    slimSidebarEnabled: new FormControl(null),
     darkModeUseSystem: new FormControl(null),
     darkModeEnabled: new FormControl(null),
     darkModeInvertThumbs: new FormControl(null),
@@ -75,50 +70,61 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
     private toastService: ToastService,
     private settings: SettingsService,
     @Inject(LOCALE_ID) public currentLocale: string
-  ) {}
+  ) {
+    this.settings.changed.subscribe({
+      next: () => {
+        this.settingsForm.patchValue(this.getCurrentSettings(), {
+          emitEvent: false,
+        })
+      },
+    })
+  }
+
+  private getCurrentSettings() {
+    return {
+      bulkEditConfirmationDialogs: this.settings.get(
+        SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS
+      ),
+      bulkEditApplyOnClose: this.settings.get(
+        SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE
+      ),
+      documentListItemPerPage: this.settings.get(
+        SETTINGS_KEYS.DOCUMENT_LIST_SIZE
+      ),
+      slimSidebarEnabled: this.settings.get(SETTINGS_KEYS.SLIM_SIDEBAR),
+      darkModeUseSystem: this.settings.get(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
+      ),
+      themeColor: this.settings.get(SETTINGS_KEYS.THEME_COLOR),
+      useNativePdfViewer: this.settings.get(
+        SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER
+      ),
+      savedViews: {},
+      displayLanguage: this.settings.getLanguage(),
+      dateLocale: this.settings.get(SETTINGS_KEYS.DATE_LOCALE),
+      dateFormat: this.settings.get(SETTINGS_KEYS.DATE_FORMAT),
+      notificationsConsumerNewDocument: this.settings.get(
+        SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_NEW_DOCUMENT
+      ),
+      notificationsConsumerSuccess: this.settings.get(
+        SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUCCESS
+      ),
+      notificationsConsumerFailed: this.settings.get(
+        SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_FAILED
+      ),
+      notificationsConsumerSuppressOnDashboard: this.settings.get(
+        SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUPPRESS_ON_DASHBOARD
+      ),
+      commentsEnabled: this.settings.get(SETTINGS_KEYS.COMMENTS_ENABLED),
+    }
+  }
 
   ngOnInit() {
     this.savedViewService.listAll().subscribe((r) => {
       this.savedViews = r.results
-      let storeData = {
+      let storeData = this.getCurrentSettings()
-        bulkEditConfirmationDialogs: this.settings.get(
-          SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS
-        ),
-        bulkEditApplyOnClose: this.settings.get(
-          SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE
-        ),
-        documentListItemPerPage: this.settings.get(
-          SETTINGS_KEYS.DOCUMENT_LIST_SIZE
-        ),
-        darkModeUseSystem: this.settings.get(
-          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
-        ),
-        themeColor: this.settings.get(SETTINGS_KEYS.THEME_COLOR),
-        useNativePdfViewer: this.settings.get(
-          SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER
-        ),
-        savedViews: {},
-        displayLanguage: this.settings.getLanguage(),
-        dateLocale: this.settings.get(SETTINGS_KEYS.DATE_LOCALE),
-        dateFormat: this.settings.get(SETTINGS_KEYS.DATE_FORMAT),
-        notificationsConsumerNewDocument: this.settings.get(
-          SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_NEW_DOCUMENT
-        ),
-        notificationsConsumerSuccess: this.settings.get(
-          SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUCCESS
-        ),
-        notificationsConsumerFailed: this.settings.get(
-          SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_FAILED
-        ),
-        notificationsConsumerSuppressOnDashboard: this.settings.get(
-          SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUPPRESS_ON_DASHBOARD
-        ),
-        commentsEnabled: this.settings.get(SETTINGS_KEYS.COMMENTS_ENABLED),
-      }
 
       for (let view of this.savedViews) {
         storeData.savedViews[view.id.toString()] = {
@@ -192,6 +198,10 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
       SETTINGS_KEYS.DOCUMENT_LIST_SIZE,
       this.settingsForm.value.documentListItemPerPage
     )
+    this.settings.set(
+      SETTINGS_KEYS.SLIM_SIDEBAR,
+      this.settingsForm.value.slimSidebarEnabled
+    )
     this.settings.set(
       SETTINGS_KEYS.DARK_MODE_USE_SYSTEM,
       this.settingsForm.value.darkModeUseSystem

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 changed = new EventEmitter()
+
   constructor(
     rendererFactory: RendererFactory2,
     @Inject(DOCUMENT) private document,
@@ -360,7 +363,9 @@ 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((result) => this.changed.emit(!!result.success)))
   }
 
   maybeMigrateSettings() {