From 7d9575b7fd0f634161befbe70187b799fc80c48e Mon Sep 17 00:00:00 2001 From: Michael Shamoon <4887959+shamoon@users.noreply.github.com> Date: Sat, 7 May 2022 00:41:35 -0700 Subject: [PATCH] Use app initializer to wait on settings --- src-ui/src/app/app.module.ts | 16 +- .../manage/settings/settings.component.ts | 156 +++++++++--------- src-ui/src/app/services/settings.service.ts | 20 +-- 3 files changed, 96 insertions(+), 96 deletions(-) diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts index e891d217d..79bbe9700 100644 --- a/src-ui/src/app/app.module.ts +++ b/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, { diff --git a/src-ui/src/app/components/manage/settings/settings.component.ts b/src-ui/src/app/components/manage/settings/settings.component.ts index 0978a94ab..ce999c14c 100644 --- a/src-ui/src/app/components/manage/settings/settings.component.ts +++ b/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 - .retrieveSettings() - .pipe(first()) - .subscribe(() => { - let storeData = { - 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 - ), - } + let storeData = { + 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 + ), + } - for (let view of this.savedViews) { - storeData.savedViews[view.id.toString()] = { - id: view.id, - name: view.name, - show_on_dashboard: view.show_on_dashboard, - show_in_sidebar: view.show_in_sidebar, - } - this.savedViewGroup.addControl( - view.id.toString(), - new FormGroup({ - id: new FormControl(null), - name: new FormControl(null), - show_on_dashboard: 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 }) + for (let view of this.savedViews) { + storeData.savedViews[view.id.toString()] = { + id: view.id, + name: view.name, + show_on_dashboard: view.show_on_dashboard, + show_in_sidebar: view.show_in_sidebar, + } + this.savedViewGroup.addControl( + view.id.toString(), + new FormGroup({ + id: new FormControl(null), + name: new FormControl(null), + show_on_dashboard: new FormControl(null), + show_in_sidebar: new FormControl(null), }) + ) + } - // Initialize dirtyCheck - this.isDirty$ = dirtyCheck( - this.settingsForm, - this.store.asObservable() - ) + this.store = new BehaviorSubject(storeData) - // Record dirty in case we need to 'undo' appearance settings if not saved on close - this.isDirty$.subscribe((dirty) => { - this.isDirty = dirty - }) + this.storeSub = this.store.asObservable().subscribe((state) => { + this.settingsForm.patchValue(state, { emitEvent: false }) + }) - // "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 - ) - }) - }) + // Initialize dirtyCheck + 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 = 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 + ) + }) }) } diff --git a/src-ui/src/app/services/settings.service.ts b/src-ui/src/app/services/settings.service.ts index f4708880a..f19afb956 100644 --- a/src-ui/src/app/services/settings.service.ts +++ b/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> 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> { - if (!this.settings$) - this.settings$ = this.http.get>(this.baseUrl) - return this.settings$ + // this is called by the app initializer in app.module + public initializeSettings(): Observable> { + let settings$ = this.http.get>(this.baseUrl) + settings$.pipe(first()).subscribe((response) => { + Object.assign(this.settings, response['settings']) + }) + return settings$ } public updateAppearanceSettings(