feat(admin-ui): Enable ui language config & selection

Relates to #264

packages/admin-ui/package.json

@@ -10,7 +10,7 @@
     "watch": "ng build --watch=true",
     "test": "ng test --watch=false --browsers=ChromeHeadlessCI --progress=false",
     "lint": "tslint --fix",
-    "extract-translations": "ngx-translate-extract --input ./src/lib --output ./src/lib/static/i18n-messages/en.json --clean --sort --format namespaced-json --format-indentation \"  \" -m _",
+    "extract-translations": "ngx-translate-extract --input ./src --output ./src/lib/static/i18n-messages/en.json --clean --sort --format namespaced-json --format-indentation \"  \" -m _",
     "ngcc": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
   },
   "publishConfig": {

packages/admin-ui/src/lib/core/src/app.config.ts

@@ -2,9 +2,6 @@ import { AdminUiConfig } from '@vendure/common/lib/shared-types';
 
 import { LanguageCode } from './common/generated-types';
 
-export const DEFAULT_LANGUAGE: LanguageCode = LanguageCode.en;
-export const DEFAULT_CURRENCY = '£';
-
 let vendureUiConfig: AdminUiConfig | undefined;
 
 export function loadAppConfig(): Promise<void> {

packages/admin-ui/src/lib/core/src/common/utilities/get-default-language.ts

@@ -1,6 +1,6 @@
-import { DEFAULT_LANGUAGE } from '../../app.config';
+import { getAppConfig } from '../../app.config';
 import { LanguageCode } from '../generated-types';
 
 export function getDefaultLanguage(): LanguageCode {
-    return DEFAULT_LANGUAGE;
+    return getAppConfig().defaultLanguage;
 }

packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.html

@@ -5,9 +5,12 @@
         </div>
         <div class="header-nav"></div>
         <div class="header-actions">
-            <!-- <vdr-ui-language-switcher></vdr-ui-language-switcher> -->
             <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>
-            <vdr-user-menu [userName]="userName$ | async" (logOut)="logOut()"></vdr-user-menu>
+            <vdr-user-menu [userName]="userName$ | async"
+                           [uiLanguage]="uiLanguage$ | async"
+                           [availableLanguages]="availableLanguages"
+                           (selectUiLanguage)="selectUiLanguage()"
+                           (logOut)="logOut()"></vdr-user-menu>
         </div>
     </clr-header>
     <nav class="subnav"><vdr-breadcrumb></vdr-breadcrumb></nav>

packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.scss

@@ -11,6 +11,9 @@ vdr-breadcrumb {
         margin-left: 10.8rem;
     }
 }
+.header-actions {
+    align-items: center;
+}
 .content-area {
     position: relative;
 }

packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.ts

@@ -1,10 +1,15 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { EMPTY, Observable } from 'rxjs';
+import { map, switchMap, take } from 'rxjs/operators';
 
+import { LanguageCode } from '../../common/generated-types';
 import { DataService } from '../../data/providers/data.service';
 import { AuthService } from '../../providers/auth/auth.service';
+import { I18nService } from '../../providers/i18n/i18n.service';
+import { LocalStorageService } from '../../providers/local-storage/local-storage.service';
+import { ModalService } from '../../providers/modal/modal.service';
+import { UiLanguageSwitcherDialogComponent } from '../ui-language-switcher-dialog/ui-language-switcher-dialog.component';
 
 @Component({
     selector: 'vdr-app-shell',
@@ -13,13 +18,48 @@ import { AuthService } from '../../providers/auth/auth.service';
 })
 export class AppShellComponent implements OnInit {
     userName$: Observable<string>;
+    uiLanguage$: Observable<LanguageCode>;
+    availableLanguages: LanguageCode[] = [];
 
-    constructor(private authService: AuthService, private dataService: DataService, private router: Router) {}
+    constructor(
+        private authService: AuthService,
+        private dataService: DataService,
+        private router: Router,
+        private i18nService: I18nService,
+        private modalService: ModalService,
+        private localStorageService: LocalStorageService,
+    ) {}
 
     ngOnInit() {
         this.userName$ = this.dataService.client
             .userStatus()
             .single$.pipe(map(data => data.userStatus.username));
+        this.uiLanguage$ = this.dataService.client.uiState().stream$.pipe(map(data => data.uiState.language));
+        this.availableLanguages = this.i18nService.availableLanguages;
+    }
+
+    selectUiLanguage() {
+        this.uiLanguage$
+            .pipe(
+                take(1),
+                switchMap(currentLanguage =>
+                    this.modalService.fromComponent(UiLanguageSwitcherDialogComponent, {
+                        closable: true,
+                        size: 'sm',
+                        locals: {
+                            availableLanguages: this.availableLanguages,
+                            currentLanguage,
+                        },
+                    }),
+                ),
+                switchMap(value => (value ? this.dataService.client.setUiLanguage(value) : EMPTY)),
+            )
+            .subscribe(result => {
+                if (result.setUiLanguage) {
+                    this.i18nService.setLanguage(result.setUiLanguage);
+                    this.localStorageService.set('uiLanguageCode', result.setUiLanguage);
+                }
+            });
     }
 
     logOut() {

packages/admin-ui/src/lib/core/src/components/ui-language-switcher-dialog/ui-language-switcher-dialog.component.html

@@ -0,0 +1,6 @@
+<ng-template vdrDialogTitle>{{ 'common.select-display-language' | translate }}</ng-template>
+
+<button *ngFor="let code of availableLanguages" class="btn btn-link btn-sm" (click)="setLanguage(code)">
+    <clr-icon [attr.shape]="code === currentLanguage ? 'dot-circle' : 'circle'"></clr-icon>
+    {{ code | uppercase }} ({{ 'lang.' + code | translate }})
+</button>

packages/admin-ui/src/lib/core/src/components/ui-language-switcher-dialog/ui-language-switcher-dialog.component.scss

@@ -0,0 +1,3 @@
+:host {
+}
+

packages/admin-ui/src/lib/core/src/components/ui-language-switcher-dialog/ui-language-switcher-dialog.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+import { LanguageCode } from '../../common/generated-types';
+import { Dialog } from '../../providers/modal/modal.service';
+
+@Component({
+    selector: 'vdr-ui-language-switcher',
+    templateUrl: './ui-language-switcher-dialog.component.html',
+    styleUrls: ['./ui-language-switcher-dialog.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UiLanguageSwitcherDialogComponent implements Dialog<LanguageCode> {
+    resolveWith: (result?: LanguageCode) => void;
+    currentLanguage: LanguageCode;
+    availableLanguages: LanguageCode[] = [];
+
+    setLanguage(languageCode: LanguageCode) {
+        this.resolveWith(languageCode);
+    }
+}

packages/admin-ui/src/lib/core/src/components/user-menu/user-menu.component.html

@@ -5,8 +5,19 @@
         <clr-icon shape="caret down"></clr-icon>
     </button>
     <vdr-dropdown-menu vdrPosition="bottom-right">
+        <ng-container *ngIf="1 < availableLanguages.length">
+            <button
+                type="button"
+                vdrDropdownItem
+                (click)="selectUiLanguage.emit()"
+                [title]="'common.select-display-language' | translate"
+            >
+                <clr-icon shape="language"></clr-icon> {{ 'lang.' + uiLanguage | translate }}
+            </button>
+            <div class="dropdown-divider"></div>
+        </ng-container>
         <button type="button" vdrDropdownItem (click)="logOut.emit()">
-            {{ 'common.log-out' | translate }}
+            <clr-icon shape="logout"></clr-icon> {{ 'common.log-out' | translate }}
         </button>
     </vdr-dropdown-menu>
 </vdr-dropdown>

packages/admin-ui/src/lib/core/src/components/user-menu/user-menu.component.ts

@@ -1,4 +1,6 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { LanguageCode } from '../../common/generated-types';
 
 @Component({
     selector: 'vdr-user-menu',
@@ -7,6 +9,8 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 })
 export class UserMenuComponent {
     @Input() userName = '';
-
+    @Input() availableLanguages: LanguageCode[] = [];
+    @Input() uiLanguage: LanguageCode;
     @Output() logOut = new EventEmitter<void>();
+    @Output() selectUiLanguage = new EventEmitter<void>();
 }

packages/admin-ui/src/lib/core/src/core.module.ts

@@ -5,6 +5,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateCompiler, TranslateLoader, TranslateModule } from '@ngx-translate/core';
 
+import { getAppConfig } from './app.config';
 import { getDefaultLanguage } from './common/utilities/get-default-language';
 import { AppShellComponent } from './components/app-shell/app-shell.component';
 import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component';
@@ -13,13 +14,13 @@ import { JobListComponent } from './components/job-list/job-list.component';
 import { MainNavComponent } from './components/main-nav/main-nav.component';
 import { NotificationComponent } from './components/notification/notification.component';
 import { OverlayHostComponent } from './components/overlay-host/overlay-host.component';
-import { UiLanguageSwitcherComponent } from './components/ui-language-switcher/ui-language-switcher.component';
+import { UiLanguageSwitcherDialogComponent } from './components/ui-language-switcher-dialog/ui-language-switcher-dialog.component';
 import { UserMenuComponent } from './components/user-menu/user-menu.component';
 import { DataModule } from './data/data.module';
-import { DataService } from './data/providers/data.service';
 import { CustomHttpTranslationLoader } from './providers/i18n/custom-http-loader';
 import { InjectableTranslateMessageFormatCompiler } from './providers/i18n/custom-message-format-compiler';
 import { I18nService } from './providers/i18n/i18n.service';
+import { LocalStorageService } from './providers/local-storage/local-storage.service';
 import { SharedModule } from './shared/shared.module';
 
 @NgModule({
@@ -45,15 +46,33 @@ import { SharedModule } from './shared/shared.module';
         BreadcrumbComponent,
         OverlayHostComponent,
         NotificationComponent,
-        UiLanguageSwitcherComponent,
+        UiLanguageSwitcherDialogComponent,
         JobListComponent,
         ChannelSwitcherComponent,
     ],
 })
 export class CoreModule {
-    constructor(private dataService: DataService, private i18nService: I18nService) {
-        this.dataService.client.setUiLanguage(getDefaultLanguage());
-        this.i18nService.setDefaultLanguage(getDefaultLanguage());
+    constructor(private i18nService: I18nService, private localStorageService: LocalStorageService) {
+        this.initUiLanguages();
+    }
+
+    private initUiLanguages() {
+        const defaultLanguage = getDefaultLanguage();
+        const lastLanguage = this.localStorageService.get('uiLanguageCode');
+        const availableLanguages = getAppConfig().availableLanguages;
+
+        if (!availableLanguages.includes(defaultLanguage)) {
+            throw new Error(
+                `The defaultLanguage "${defaultLanguage}" must be one of the availableLanguages [${availableLanguages
+                    .map(l => `"${l}"`)
+                    .join(', ')}]`,
+            );
+        }
+        const uiLanguage = availableLanguages.includes(lastLanguage) ? lastLanguage : defaultLanguage;
+        this.localStorageService.set('uiLanguageCode', uiLanguage);
+        this.i18nService.setLanguage(uiLanguage);
+        this.i18nService.setDefaultLanguage(defaultLanguage);
+        this.i18nService.setAvailableLanguages(availableLanguages || [defaultLanguage]);
     }
 }