improved language picker (#6890)

* improved language picker

* fix import path

* update tests

lib/core/language-menu/language-menu.component.html

@@ -1,2 +0,0 @@
-<button mat-menu-item *ngFor="let language of languages" (click)="changeLanguage(language)">{{language.label}}
-</button>

lib/core/language-menu/language-menu.component.spec.ts

@@ -18,10 +18,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AppConfigService } from '../app-config/app-config.service';
 import { LanguageMenuComponent } from './language-menu.component';
-import { setupTestBed } from '../testing/setup-test-bed';
 import { CoreTestingModule } from '../testing/core.testing.module';
 import { UserPreferencesService } from '../services/user-preferences.service';
 import { TranslateModule } from '@ngx-translate/core';
+import { LanguageService } from '../services/language.service';
 
 describe('LanguageMenuComponent', () => {
 
@@ -29,6 +29,7 @@ describe('LanguageMenuComponent', () => {
     let component: LanguageMenuComponent;
     let appConfig: AppConfigService;
     let userPreferencesService: UserPreferencesService;
+    let languageService: LanguageService;
 
     const languages = <any> [
         {
@@ -46,33 +47,35 @@ describe('LanguageMenuComponent', () => {
         }
     ];
 
-    setupTestBed({
-        imports: [
-            TranslateModule.forRoot(),
-            CoreTestingModule
-        ]
-    });
-
     beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                TranslateModule.forRoot(),
+                CoreTestingModule
+            ]
+        });
+
         fixture = TestBed.createComponent(LanguageMenuComponent);
         component = fixture.componentInstance;
         appConfig = TestBed.inject(AppConfigService);
         userPreferencesService = TestBed.inject(UserPreferencesService);
+        languageService = TestBed.inject(LanguageService);
     });
 
     afterEach(() => {
         fixture.destroy();
     });
 
-    it('should fetch the languages from the app config if present', () => {
+    it('should fetch the languages from the app config if present', async (done) => {
+        languageService.setLanguages(languages);
+
         fixture.detectChanges();
+        await fixture.whenStable();
 
-        expect(component.languages).toEqual([{ key: 'en', label: 'English' }]);
-
-        appConfig.config.languages = languages;
-
-        component.ngOnInit();
-        expect(component.languages).toEqual(languages);
+        component.languages$.subscribe(langs => {
+            expect(langs).toEqual(languages);
+            done();
+        });
     });
 
     it('should change user preference locale', () => {

lib/core/language-menu/language-menu.component.ts

@@ -15,35 +15,28 @@
  * limitations under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
-import { AppConfigService, AppConfigValues } from '../app-config/app-config.service';
-import { UserPreferencesService } from '../services/user-preferences.service';
-import { LanguageItem } from './language.interface';
+import { Component } from '@angular/core';
+import { LanguageItem, LanguageService } from '../services/language.service';
+import { Observable } from 'rxjs';
 
 @Component({
     selector: 'adf-language-menu',
-    templateUrl: 'language-menu.component.html'
+    template: `
+        <button
+            mat-menu-item
+            *ngFor="let language of languages$ | async"
+            (click)="changeLanguage(language)">{{language.label}}</button>
+    `
 })
-export class LanguageMenuComponent implements OnInit {
+export class LanguageMenuComponent {
 
-    languages: Array<LanguageItem> = [
-        { key: 'en', label: 'English'}
-    ];
+    languages$: Observable<LanguageItem[]>;
 
-    constructor(
-        private appConfig: AppConfigService,
-        private userPreference: UserPreferencesService) {
-    }
-
-    ngOnInit() {
-        const languagesConfigApp = this.appConfig.get<Array<LanguageItem>>(AppConfigValues.APP_CONFIG_LANGUAGES_KEY);
-        if (languagesConfigApp) {
-            this.languages = languagesConfigApp;
-        }
+    constructor(private languageService: LanguageService) {
+        this.languages$ = languageService.languages$;
     }
 
     changeLanguage(language: LanguageItem) {
-        this.userPreference.locale = language.key;
-        this.userPreference.set('textOrientation', language.direction || 'ltr');
+        this.languageService.changeLanguage(language);
     }
 }

lib/core/language-menu/language-menu.module.ts

@@ -20,17 +20,22 @@ import { NgModule } from '@angular/core';
 import { MaterialModule } from '../material.module';
 
 import { LanguageMenuComponent } from './language-menu.component';
+import { LanguagePickerComponent } from './language-picker.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 @NgModule({
     imports: [
         CommonModule,
-        MaterialModule
+        MaterialModule,
+        TranslateModule
     ],
     declarations: [
-        LanguageMenuComponent
+        LanguageMenuComponent,
+        LanguagePickerComponent
     ],
     exports: [
-        LanguageMenuComponent
+        LanguageMenuComponent,
+        LanguagePickerComponent
     ]
 })
 export class LanguageMenuModule {}

lib/core/language-menu/language-picker.component.ts

@@ -15,10 +15,18 @@
  * limitations under the License.
  */
 
-import { Direction } from '@angular/cdk/bidi';
+import { Component } from '@angular/core';
 
-export interface LanguageItem {
-    key: string;
-    label: string;
-    direction?: Direction;
-}
+@Component({
+    selector: 'adf-picker-button',
+    template: `
+        <button mat-menu-item [matMenuTriggerFor]="langMenu">
+            <mat-icon>language</mat-icon>
+            {{ 'ADF.LANGUAGE' | translate }}
+        </button>
+        <mat-menu #langMenu="matMenu">
+            <adf-language-menu></adf-language-menu>
+        </mat-menu>
+    `
+})
+export class LanguagePickerComponent {}

lib/core/language-menu/public-api.ts

@@ -16,5 +16,5 @@
  */
 
 export * from './language-menu.component';
-export * from './language.interface';
 export * from './language-menu.module';
+export * from './language-picker.component';