fix(admin-ui): Correctly set content lang based on available langs

Fixes #1033
vendure-ecommerce · Aug 19, 2021 · d9531fd · d9531fd
1 parent a1cae24
commit d9531fd
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 7 deletions.
diff --git a/packages/admin-ui/src/lib/core/src/data/data.module.ts b/packages/admin-ui/src/lib/core/src/data/data.module.ts
@@ -8,6 +8,7 @@ import { createUploadLink } from 'apollo-upload-client';
 
 import { getAppConfig } from '../app.config';
 import { introspectionResult } from '../common/introspection-result-wrapper';
+import { getDefaultUiLanguage } from '../common/utilities/get-default-ui-language';
 import { LocalStorageService } from '../providers/local-storage/local-storage.service';
 
 import { CheckJobsLink } from './check-jobs-link';
@@ -79,6 +80,29 @@ export function createApollo(
     };
 }
 
+/**
+ * On bootstrap, this function will fetch the available languages from the GlobalSettings and compare it
+ * to the currently-configured content language to ensure that the content language is actually one
+ * of the available languages.
+ */
+export function initContentLanguage(
+    serverConfigService: ServerConfigService,
+    localStorageService: LocalStorageService,
+    dataService: DataService,
+): () => Promise<any> {
+    // Why store in a intermediate variable? https://github.com/angular/angular/issues/23629
+    const result = async () => {
+        const availableLanguages = await serverConfigService.getAvailableLanguages().toPromise();
+        const contentLang = localStorageService.get('contentLanguageCode') || getDefaultUiLanguage();
+        if (availableLanguages.length && !availableLanguages.includes(contentLang)) {
+            dataService.client.setContentLanguage(availableLanguages[0]).subscribe(() => {
+                localStorageService.set('contentLanguageCode', availableLanguages[0]);
+            });
+        }
+    };
+    return result;
+}
+
 /**
  * The DataModule is responsible for all API calls *and* serves as the source of truth for global app
  * state via the apollo-link-state package.
@@ -104,6 +128,12 @@ export function createApollo(
             useFactory: initializeServerConfigService,
             deps: [ServerConfigService],
         },
+        {
+            provide: APP_INITIALIZER,
+            multi: true,
+            useFactory: initContentLanguage,
+            deps: [ServerConfigService, LocalStorageService, DataService],
+        },
     ],
 })
 export class DataModule {}
diff --git a/...ges/admin-ui/src/lib/settings/src/components/global-settings/global-settings.component.ts b/...ges/admin-ui/src/lib/settings/src/components/global-settings/global-settings.component.ts
@@ -2,12 +2,18 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { BaseDetailComponent } from '@vendure/admin-ui/core';
-import { CustomFieldConfig, GlobalSettings, LanguageCode, Permission } from '@vendure/admin-ui/core';
-import { NotificationService } from '@vendure/admin-ui/core';
-import { DataService } from '@vendure/admin-ui/core';
-import { ServerConfigService } from '@vendure/admin-ui/core';
-import { switchMap, tap } from 'rxjs/operators';
+import {
+    BaseDetailComponent,
+    CustomFieldConfig,
+    DataService,
+    GlobalSettings,
+    LanguageCode,
+    LocalStorageService,
+    NotificationService,
+    Permission,
+    ServerConfigService,
+} from '@vendure/admin-ui/core';
+import { switchMap, tap, withLatestFrom } from 'rxjs/operators';
 
 @Component({
     selector: 'vdr-global-settings',
@@ -29,6 +35,7 @@ export class GlobalSettingsComponent extends BaseDetailComponent<GlobalSettings>
         protected dataService: DataService,
         private formBuilder: FormBuilder,
         private notificationService: NotificationService,
+        private localStorageService: LocalStorageService,
     ) {
         super(route, router, serverConfigService, dataService);
         this.customFields = this.getCustomFieldConfig('GlobalSettings');
@@ -80,8 +87,15 @@ export class GlobalSettingsComponent extends BaseDetailComponent<GlobalSettings>
                     }
                 }),
                 switchMap(() => this.serverConfigService.refreshGlobalSettings()),
+                withLatestFrom(this.dataService.client.uiState().single$),
             )
-            .subscribe();
+            .subscribe(([{ globalSettings }, { uiState }]) => {
+                const availableLangs = globalSettings.availableLanguages;
+                if (availableLangs.length && !availableLangs.includes(uiState.contentLanguage)) {
+                    this.dataService.client.setContentLanguage(availableLangs[0]).subscribe();
+                    this.localStorageService.set('contentLanguageCode', availableLangs[0]);
+                }
+            });
     }
 
     protected setFormValues(entity: GlobalSettings, languageCode: LanguageCode): void {