feat(admin-ui): Cache global settings, refresh on edit

Closes #59 #49

admin-ui/src/app/common/base-detail.component.ts

@@ -20,7 +20,7 @@ export abstract class BaseDetailComponent<Entity extends { id: string }> {
     protected constructor(
         protected route: ActivatedRoute,
         protected router: Router,
-        private serverConfigService: ServerConfigService,
+        protected serverConfigService: ServerConfigService,
     ) {}
 
     init() {
@@ -34,7 +34,7 @@ export abstract class BaseDetailComponent<Entity extends { id: string }> {
             map(lang => (!lang ? getDefaultLanguage() : (lang as LanguageCode))),
         );
 
-        this.availableLanguages$ = of([LanguageCode.en]);
+        this.availableLanguages$ = this.serverConfigService.getAvailableLanguages();
 
         combineLatest(this.entity$, this.languageCode$)
             .pipe(takeUntil(this.destroy$))

admin-ui/src/app/data/server-config.ts

@@ -1,8 +1,8 @@
 import { Injectable, Injector } from '@angular/core';
 import gql from 'graphql-tag';
-import { GetServerConfig, ServerConfig } from 'shared/generated-types';
+import { GetGlobalSettings, GetServerConfig, ServerConfig } from 'shared/generated-types';
 
-import { GET_SERVER_CONFIG } from './definitions/settings-definitions';
+import { GET_GLOBAL_SETTINGS, GET_SERVER_CONFIG } from './definitions/settings-definitions';
 import { BaseDataService } from './providers/base-data.service';
 
 export function initializeServerConfigService(serverConfigService: ServerConfigService): () => Promise<any> {
@@ -17,6 +17,10 @@ export function initializeServerConfigService(serverConfigService: ServerConfigS
 export class ServerConfigService {
     private _serverConfig: ServerConfig = {} as any;
 
+    private get baseDataService() {
+        return this.injector.get<BaseDataService>(BaseDataService);
+    }
+
     constructor(private injector: Injector) {}
 
     /**
@@ -31,8 +35,7 @@ export class ServerConfigService {
      * Fetch the ServerConfig. Should be run on app init (in case user is already logged in) and on successful login.
      */
     getServerConfig() {
-        const baseDataService = this.injector.get<BaseDataService>(BaseDataService);
-        return baseDataService
+        return this.baseDataService
             .query<GetServerConfig.Query>(GET_SERVER_CONFIG)
             .single$.toPromise()
             .then(
@@ -45,6 +48,20 @@ export class ServerConfigService {
             );
     }
 
+    getAvailableLanguages() {
+        return this.baseDataService
+            .query<GetGlobalSettings.Query>(GET_GLOBAL_SETTINGS, {}, 'cache-first')
+            .mapSingle(res => res.globalSettings.availableLanguages);
+    }
+
+    /**
+     * When any of the GLobalSettings are modified, this method should be called to update the Apollo cache.
+     */
+    refreshGlobalSettings() {
+        return this.baseDataService.query<GetGlobalSettings.Query>(GET_GLOBAL_SETTINGS, {}, 'network-only')
+            .single$;
+    }
+
     get serverConfig(): ServerConfig {
         return this._serverConfig;
     }

admin-ui/src/app/settings/components/global-settings/global-settings.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
+import { switchMap } from 'rxjs/operators';
 import { GlobalSettings, LanguageCode } from 'shared/generated-types';
 import { CustomFieldConfig } from 'shared/shared-types';
 
@@ -53,18 +54,23 @@ export class GlobalSettingsComponent extends BaseDetailComponent<GlobalSettings>
             return;
         }
 
-        this.dataService.settings.updateGlobalSettings(this.detailForm.value).subscribe(
-            () => {
-                this.detailForm.markAsPristine();
-                this.changeDetector.markForCheck();
-                this.notificationService.success(_('common.notify-update-success'), { entity: 'Settings' });
-            },
-            err => {
-                this.notificationService.error(_('common.notify-update-error'), {
-                    entity: 'Settings',
-                });
-            },
-        );
+        this.dataService.settings
+            .updateGlobalSettings(this.detailForm.value)
+            .pipe(switchMap(() => this.serverConfigService.refreshGlobalSettings()))
+            .subscribe(
+                () => {
+                    this.detailForm.markAsPristine();
+                    this.changeDetector.markForCheck();
+                    this.notificationService.success(_('common.notify-update-success'), {
+                        entity: 'Settings',
+                    });
+                },
+                err => {
+                    this.notificationService.error(_('common.notify-update-error'), {
+                        entity: 'Settings',
+                    });
+                },
+            );
     }
 
     protected setFormValues(entity: GlobalSettings, languageCode: LanguageCode): void {