Use app initializer to wait on settings

src-ui/src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser'
-import { NgModule } from '@angular/core'
+import { APP_INITIALIZER, NgModule } from '@angular/core'
 import { AppRoutingModule } from './app-routing.module'
 import { AppComponent } from './app.component'
 import {
@@ -87,6 +87,8 @@ import localeSr from '@angular/common/locales/sr'
 import localeSv from '@angular/common/locales/sv'
 import localeTr from '@angular/common/locales/tr'
 import localeZh from '@angular/common/locales/zh'
+import { Observable } from 'rxjs'
+import { SettingsService } from './services/settings.service'
 
 registerLocaleData(localeBe)
 registerLocaleData(localeCs)
@@ -109,6 +111,12 @@ registerLocaleData(localeSv)
 registerLocaleData(localeTr)
 registerLocaleData(localeZh)
 
+function initializeApp(settings: SettingsService) {
+  return () => {
+    return settings.initializeSettings()
+  }
+}
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -174,6 +182,12 @@ registerLocaleData(localeZh)
     ColorSliderModule,
   ],
   providers: [
+    {
+      provide: APP_INITIALIZER,
+      useFactory: initializeApp,
+      deps: [SettingsService],
+      multi: true,
+    },
     DatePipe,
     CookieService,
     {

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

@@ -72,93 +72,85 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
   ngOnInit() {
     this.savedViewService.listAll().subscribe((r) => {
       this.savedViews = r.results
-      this.settings
+      let storeData = {
-        .retrieveSettings()
+        bulkEditConfirmationDialogs: this.settings.get(
-        .pipe(first())
+          SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS
-        .subscribe(() => {
+        ),
-          let storeData = {
+        bulkEditApplyOnClose: this.settings.get(
-            bulkEditConfirmationDialogs: this.settings.get(
+          SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE
-              SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS
+        ),
-            ),
+        documentListItemPerPage: this.settings.get(
-            bulkEditApplyOnClose: this.settings.get(
+          SETTINGS_KEYS.DOCUMENT_LIST_SIZE
-              SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE
+        ),
-            ),
+        darkModeUseSystem: this.settings.get(
-            documentListItemPerPage: this.settings.get(
+          SETTINGS_KEYS.DARK_MODE_USE_SYSTEM
-              SETTINGS_KEYS.DOCUMENT_LIST_SIZE
+        ),
-            ),
+        darkModeEnabled: this.settings.get(SETTINGS_KEYS.DARK_MODE_ENABLED),
-            darkModeUseSystem: this.settings.get(
+        darkModeInvertThumbs: this.settings.get(
-              SETTINGS_KEYS.DARK_MODE_USE_SYSTEM
+          SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED
-            ),
+        ),
-            darkModeEnabled: this.settings.get(SETTINGS_KEYS.DARK_MODE_ENABLED),
+        themeColor: this.settings.get(SETTINGS_KEYS.THEME_COLOR),
-            darkModeInvertThumbs: this.settings.get(
+        useNativePdfViewer: this.settings.get(
-              SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED
+          SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER
-            ),
+        ),
-            themeColor: this.settings.get(SETTINGS_KEYS.THEME_COLOR),
+        savedViews: {},
-            useNativePdfViewer: this.settings.get(
+        displayLanguage: this.settings.getLanguage(),
-              SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER
+        dateLocale: this.settings.get(SETTINGS_KEYS.DATE_LOCALE),
-            ),
+        dateFormat: this.settings.get(SETTINGS_KEYS.DATE_FORMAT),
-            savedViews: {},
+        notificationsConsumerNewDocument: this.settings.get(
-            displayLanguage: this.settings.getLanguage(),
+          SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_NEW_DOCUMENT
-            dateLocale: this.settings.get(SETTINGS_KEYS.DATE_LOCALE),
+        ),
-            dateFormat: this.settings.get(SETTINGS_KEYS.DATE_FORMAT),
+        notificationsConsumerSuccess: this.settings.get(
-            notificationsConsumerNewDocument: this.settings.get(
+          SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUCCESS
-              SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_NEW_DOCUMENT
+        ),
-            ),
+        notificationsConsumerFailed: this.settings.get(
-            notificationsConsumerSuccess: this.settings.get(
+          SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_FAILED
-              SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUCCESS
+        ),
-            ),
+        notificationsConsumerSuppressOnDashboard: this.settings.get(
-            notificationsConsumerFailed: this.settings.get(
+          SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUPPRESS_ON_DASHBOARD
-              SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_FAILED
+        ),
-            ),
+      }
-            notificationsConsumerSuppressOnDashboard: this.settings.get(
-              SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUPPRESS_ON_DASHBOARD
-            ),
-          }
 
-          for (let view of this.savedViews) {
+      for (let view of this.savedViews) {
-            storeData.savedViews[view.id.toString()] = {
+        storeData.savedViews[view.id.toString()] = {
-              id: view.id,
+          id: view.id,
-              name: view.name,
+          name: view.name,
-              show_on_dashboard: view.show_on_dashboard,
+          show_on_dashboard: view.show_on_dashboard,
-              show_in_sidebar: view.show_in_sidebar,
+          show_in_sidebar: view.show_in_sidebar,
-            }
+        }
-            this.savedViewGroup.addControl(
+        this.savedViewGroup.addControl(
-              view.id.toString(),
+          view.id.toString(),
-              new FormGroup({
+          new FormGroup({
-                id: new FormControl(null),
+            id: new FormControl(null),
-                name: new FormControl(null),
+            name: new FormControl(null),
-                show_on_dashboard: new FormControl(null),
+            show_on_dashboard: new FormControl(null),
-                show_in_sidebar: new FormControl(null),
+            show_in_sidebar: new FormControl(null),
-              })
-            )
-          }
-
-          this.store = new BehaviorSubject(storeData)
-
-          this.storeSub = this.store.asObservable().subscribe((state) => {
-            this.settingsForm.patchValue(state, { emitEvent: false })
           })
+        )
+      }
 
-          // Initialize dirtyCheck
+      this.store = new BehaviorSubject(storeData)
-          this.isDirty$ = dirtyCheck(
-            this.settingsForm,
-            this.store.asObservable()
-          )
 
-          // Record dirty in case we need to 'undo' appearance settings if not saved on close
+      this.storeSub = this.store.asObservable().subscribe((state) => {
-          this.isDirty$.subscribe((dirty) => {
+        this.settingsForm.patchValue(state, { emitEvent: false })
-            this.isDirty = dirty
+      })
-          })
 
-          // "Live" visual changes prior to save
+      // Initialize dirtyCheck
-          this.settingsForm.valueChanges.subscribe(() => {
+      this.isDirty$ = dirtyCheck(this.settingsForm, this.store.asObservable())
-            this.settings.updateAppearanceSettings(
+
-              this.settingsForm.get('darkModeUseSystem').value,
+      // Record dirty in case we need to 'undo' appearance settings if not saved on close
-              this.settingsForm.get('darkModeEnabled').value,
+      this.isDirty$.subscribe((dirty) => {
-              this.settingsForm.get('themeColor').value
+        this.isDirty = dirty
-            )
+      })
-          })
+
-        })
+      // "Live" visual changes prior to save
+      this.settingsForm.valueChanges.subscribe(() => {
+        this.settings.updateAppearanceSettings(
+          this.settingsForm.get('darkModeUseSystem').value,
+          this.settingsForm.get('darkModeEnabled').value,
+          this.settingsForm.get('themeColor').value
+        )
+      })
     })
   }
 

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

@@ -139,7 +139,6 @@ export class SettingsService {
   protected baseUrl: string = environment.apiBaseUrl + 'frontend_settings/'
 
   private settings: Object = {}
-  private settings$: Observable<Results<any>>
 
   constructor(
     rendererFactory: RendererFactory2,
@@ -150,20 +149,15 @@ export class SettingsService {
     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>> {
+  // this is called by the app initializer in app.module
-    if (!this.settings$)
+  public initializeSettings(): Observable<Results<any>> {
-      this.settings$ = this.http.get<Results<any>>(this.baseUrl)
+    let settings$ = this.http.get<Results<any>>(this.baseUrl)
-    return this.settings$
+    settings$.pipe(first()).subscribe((response) => {
+      Object.assign(this.settings, response['settings'])
+    })
+    return settings$
   }
 
   public updateAppearanceSettings(