inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

improved language picker (#6890)

Browse Source 
* improved language picker

* fix import path

* update tests
This commit is contained in:
Denys Vuika
2021-04-06 10:35:41 +01:00
committed by GitHub
parent cf7ffba81a
commit 145c05321d
11 changed files with 131 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
demo-shell/src/app.config.json
View File

@@ -33,77 +33,6 @@
"name": "Alfresco ADF Application",
"copyright": "© 2016 - 2018 Alfresco Software, Inc. All Rights Reserved."
},
"languages": [
{
"key": "en",
"label": "English"
},
{
"key": "fr",
"label": "Français"
},
{
"key": "de",
"label": "Deutsch"
},
{
"key": "it",
"label": "Italiano"
},
{
"key": "es",
"label": "Español"
},
{
"key": "ja",
"label": "日本語"
},
{
"key": "nl",
"label": "Nederlands"
},
{
"key": "pt-BR",
"label": "Português (Brasil)"
},
{
"key": "nb",
"label": "Bokmål"
},
{
"key": "ru",
"label": "Русский"
},
{
"key": "zh-CN",
"label": "中文简体"
},
{
"key": "ar",
"label": "عربى",
"direction": "rtl"
},
{
"key": "cs",
"label": "Čeština"
},
{
"key": "pl",
"label": "Polski"
},
{
"key": "fi",
"label": "Suomi"
},
{
"key": "da",
"label": "Dansk"
},
{
"key": "sv",
"label": "Svenska"
}
],
"search": {
"filterWithContains": true,
"app:fields": [

1
lib/core/i18n/en.json
View File

@@ -1,5 +1,6 @@
{
"ADF": {
"LANGUAGE": "Language",
"ROLES": {
"ALL": "All",
"CONTRIBUTOR": "Contributor",

2
lib/core/language-menu/language-menu.component.html
View File

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

23
lib/core/language-menu/language-menu.component.spec.ts
View File

@@ -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({
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
CoreTestingModule
]
});
beforeEach(() => {
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', () => {

35
lib/core/language-menu/language-menu.component.ts
View File

@@ -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);
}
}

11
lib/core/language-menu/language-menu.module.ts
View File

@@ -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 {}

20
lib/core/language-menu/language.interface.ts → lib/core/language-menu/language-picker.component.ts
View File

@@ -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 {}

2
lib/core/language-menu/public-api.ts
View File

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

73
lib/core/services/language.service.ts Normal file
View File

@@ -0,0 +1,73 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Injectable } from '@angular/core';
import { Direction } from '@angular/cdk/bidi';
import { BehaviorSubject } from 'rxjs';
import { AppConfigService, AppConfigValues } from '../app-config/app-config.service';
import { UserPreferencesService } from './user-preferences.service';
export interface LanguageItem {
key: string;
label: string;
direction?: Direction;
}
@Injectable({providedIn: 'root'})
export class LanguageService {
private languages = new BehaviorSubject<LanguageItem[]>([
{'key': 'de', 'label': 'Deutsch'},
{'key': 'en', 'label': 'English'},
{'key': 'es', 'label': 'Español'},
{'key': 'fr', 'label': 'Français'},
{'key': 'it', 'label': 'Italiano'},
{'key': 'ja', 'label': '日本語'},
{'key': 'nb', 'label': 'Bokmål'},
{'key': 'nl', 'label': 'Nederlands'},
{'key': 'pt-BR', 'label': 'Português (Brasil)'},
{'key': 'ru', 'label': 'Русский'},
{'key': 'zh-CN', 'label': '中文简体'},
{'key': 'cs', 'label': 'Čeština'},
{'key': 'da', 'label': 'Dansk'},
{'key': 'fi', 'label': 'Suomi'},
{'key': 'pl', 'label': 'Polski'},
{'key': 'sv', 'label': 'Svenska'},
{'key': 'ar', 'label': 'العربية', direction: 'rtl'}
]);
languages$ = this.languages.asObservable();
constructor(
appConfigService: AppConfigService,
private userPreferencesService: UserPreferencesService) {
const customLanguages = appConfigService.get<Array<LanguageItem>>(AppConfigValues.APP_CONFIG_LANGUAGES_KEY);
this.setLanguages(customLanguages);
}
changeLanguage(language: LanguageItem) {
this.userPreferencesService.locale = language.key;
this.userPreferencesService.set('textOrientation', language.direction || 'ltr');
}
setLanguages(items: LanguageItem[]) {
if (items && items.length > 0) {
this.languages.next(items);
}
}
}

1
lib/core/services/public-api.ts
View File

@@ -64,3 +64,4 @@ export * from './identity-role.service';
export * from './version-compatibility.service';
export * from './auth-bearer.interceptor';
export * from './oauth2.service';
export * from './language.service';

2
lib/core/services/user-preferences.service.ts
View File

@@ -19,7 +19,7 @@ import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { Observable, BehaviorSubject } from 'rxjs';
import { AppConfigService, AppConfigValues } from '../app-config/app-config.service';
import { LanguageItem } from '../language-menu/language.interface';
import { LanguageItem } from './language.service';
import { StorageService } from './storage.service';
import { distinctUntilChanged, map, filter } from 'rxjs/operators';
import { AlfrescoApiService } from './alfresco-api.service';