i18n fixes (#1614)

* i18n fixes

- fix issue with default (fallback) language set to browser language
- fix issue with fallback language loading when browser language set to
non-English locale

* code and UI fixes

- move document list i18n strings into own scope
- replace MDL menu with @angular/material menu (fixes issue with menu
items translation, not supported by MDL)
- minor improvements

* fix unit tests

* improve i18n docs and code

- provide basic documentation for Translation service
- remove custom Login component localisation in favour of documentation
sample
- simplified i18n setup for demo shell (single path for dev/prod env)

* remove unnecessary comments
This commit is contained in:
Denys Vuika
2017-02-10 11:22:25 +00:00
committed by Mario Romano
parent 8edd2a2d23
commit 07bad77547
20 changed files with 127 additions and 228 deletions

View File

@@ -39,14 +39,14 @@
<span class="flag-icon flag-icon-gb"></span>
<label tabindex="0"> English</label>
</a>
<a class="mdl-navigation__link" (click)="changeLanguage('gr')">
<span class="flag-icon flag-icon-gr"></span>
<label tabindex="0"> Greek</label>
</a>
<a class="mdl-navigation__link" (click)="changeLanguage('it')">
<span class="flag-icon flag-icon-it"></span>
<label tabindex="0"> Italian</label>
</a>
<a class="mdl-navigation__link" (click)="changeLanguage('ru')">
<span class="flag-icon flag-icon-ru"></span>
<label tabindex="0"> Russian</label>
</a>
</nav>
<span class="mdl-layout-title">Components</span>
<nav class="mdl-navigation">

View File

@@ -43,13 +43,7 @@ export class AppComponent {
this.setProvider();
if (translateService) {
if (process.env.ENV === 'production') {
translateService.addTranslationFolder('custom', 'i18n/custom-translation');
translateService.addTranslationFolder('ng2-alfresco-login', 'i18n/custom-translation/alfresco-login');
} else {
translateService.addTranslationFolder('custom', 'custom-translation');
translateService.addTranslationFolder('ng2-alfresco-login', 'custom-translation/alfresco-login');
}
translateService.addTranslationFolder('app', 'resources');
}
}
@@ -75,7 +69,7 @@ export class AppComponent {
);
}
navigateToLogin(){
navigateToLogin() {
this.router.navigate(['/login']);
this.hideDrawer();
}

View File

@@ -66,9 +66,9 @@ module.exports = webpackMerge(commonConfig, {
to: 'pdf.worker.js'
},
{
context: 'custom-translation',
context: 'resources/i18n',
from: '**/*.json',
to: 'i18n/custom-translation'
to: 'resources/i18n'
},
// Copy i18n folders for all modules with ng2-alfresco- prefix
{

View File

@@ -1,29 +0,0 @@
{
"LOGIN": {
"LOGO": "Alfresco",
"LABEL": {
"LOGIN": "Login",
"USERNAME": "Username",
"PASSWORD": "Password",
"REMEMBER": "Remember"
},
"MESSAGES": {
"USERNAME-REQUIRED": "Required",
"USERNAME-MIN": "Your username needs to be at least {{customMinLenght}} characters.",
"PASSWORD-REQUIRED": "Enter your password to sign in",
"LOGIN-ERROR-CREDENTIALS": "You have entered an invalid username or password",
"LOGIN-ERROR-PROVIDERS": "Providers cannot be undefined",
"LOGIN-SUCCESS": "Login successful",
"LOGIN-ERROR-CORS": "CORS exception, check your server configuration",
"LOGIN-ERROR-CSRF": "CSRF exception, set [disableCsrf]=\"true\" in alfresco-login component",
"LOGIN-ECM-LICENSE": "The ECM is in read-only mode"
},
"BUTTON": {
"LOGIN": "SIGN IN"
},
"ACTION": {
"HELP": "NEED HELP?",
"REGISTER": "REGISTER"
}
}
}

View File

@@ -1,28 +0,0 @@
{
"LOGIN": {
"LABEL": {
"LOGIN": "Autenticazione",
"USERNAME": "Nome utente",
"PASSWORD": "Password",
"REMEMBER": "Ricordami"
},
"MESSAGES": {
"USERNAME-REQUIRED": "Campo obbligatorio",
"USERNAME-MIN": "Inserire un nome utente di minimo 4 caratteri.",
"PASSWORD-REQUIRED": "Campo obbligatorio",
"LOGIN-ERROR-CREDENTIALS": "Nome utente o password non validi",
"LOGIN-ERROR-PROVIDERS": "Providers non può essere nullo",
"LOGIN-SUCCESS": "Login effettuata con successo",
"LOGIN-ERROR-CORS": "CORS exception, controlla le configurazioni del tuo server",
"LOGIN-ERROR-CSRF": "CSRF exception, set [disableCsrf]=\"true\" in alfresco-login component",
"LOGIN-ECM-LICENSE": "l'ECM e' in read-only mode"
},
"BUTTON": {
"LOGIN": "Accedi"
},
"ACTION": {
"HELP": "BISOGNO DI AIUTO?",
"REGISTER": "REGISTRATI"
}
}
}

View File

@@ -51,7 +51,7 @@ describe('ActivitiChecklist', () => {
}).compileComponents().then(() => {
let translateService = TestBed.get(AlfrescoTranslationService);
spyOn(translateService, 'addTranslationFolder').and.stub();
spyOn(translateService, 'get').and.callFake((key) => {
spyOn(translateService.translate, 'get').and.callFake((key) => {
return Observable.of(key);
});

View File

@@ -58,7 +58,7 @@ describe('ActivitiPeopleSearch', () => {
let translateService = TestBed.get(AlfrescoTranslationService);
spyOn(translateService, 'addTranslationFolder').and.stub();
spyOn(translateService, 'get').and.callFake((key) => { return Observable.of(key); });
spyOn(translateService.translate, 'get').and.callFake((key) => { return Observable.of(key); });
fixture = TestBed.createComponent(ActivitiPeopleSearch);
activitiPeopleSearchComponent = fixture.componentInstance;

View File

@@ -64,7 +64,7 @@ describe('ActivitiPeople', () => {
let translateService = TestBed.get(AlfrescoTranslationService);
spyOn(translateService, 'addTranslationFolder').and.stub();
spyOn(translateService, 'get').and.callFake((key) => { return Observable.of(key); });
spyOn(translateService.translate, 'get').and.callFake((key) => { return Observable.of(key); });
fixture = TestBed.createComponent(ActivitiPeople);
activitiPeopleComponent = fixture.componentInstance;

View File

@@ -45,7 +45,7 @@ describe('ActivitiStartTaskButton', () => {
}).compileComponents().then(() => {
let translateService = TestBed.get(AlfrescoTranslationService);
spyOn(translateService, 'addTranslationFolder').and.stub();
spyOn(translateService, 'get').and.callFake((key) => { return Observable.of(key); });
spyOn(translateService.translate, 'get').and.callFake((key) => { return Observable.of(key); });
fixture = TestBed.createComponent(ActivitiStartTaskButton);
activitiStartTaskButton = fixture.componentInstance;

View File

@@ -59,7 +59,7 @@ describe('ActivitiTaskDetails', () => {
let translateService = TestBed.get(AlfrescoTranslationService);
spyOn(translateService, 'addTranslationFolder').and.stub();
spyOn(translateService, 'get').and.callFake((key) => { return Observable.of(key); });
spyOn(translateService.translate, 'get').and.callFake((key) => { return Observable.of(key); });
}));
beforeEach(() => {

View File

@@ -47,7 +47,7 @@ describe('ActivitiTaskHeader', () => {
let translateService = TestBed.get(AlfrescoTranslationService);
spyOn(translateService, 'addTranslationFolder').and.stub();
spyOn(translateService, 'get').and.callFake((key) => { return Observable.of(key); });
spyOn(translateService.translate, 'get').and.callFake((key) => { return Observable.of(key); });
}));
beforeEach(() => {

View File

@@ -64,7 +64,7 @@ npm install --save ng2-alfresco-core
- **ContextMenuService**, global context menu APIs
#### Alfresco Api Service
## Alfresco Api Service
Provides access to initialized **AlfrescoJSApi** instance.
@@ -96,7 +96,7 @@ let apiService: any = this.authService.getAlfrescoApi();
apiService.nodes.addNode('-root-', body, {});
```
#### Notification Service
## Notification Service
The Notification Service is implemented on top of the Angular 2 Material Design snackbar.
Use this service to show a notification message, and optionaly get feedback from it.
@@ -133,7 +133,7 @@ export class MyComponent implements OnInit {
}
```
#### Context Menu directive
## Context Menu directive
_See **Demo Shell** or **DocumentList** implementation for more details and use cases._
@@ -169,7 +169,7 @@ export class MyComponent implements OnInit {
}
```
#### Authentication Service
## Authentication Service
The authentication service is used inside the [login component](../ng2-alfresco-login) and is possible to find there an example of how to use it.
@@ -182,27 +182,24 @@ import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } fr
@Component({
selector: 'alfresco-app-demo',
template: `
<div *ngIf="!authenticated" >
Authentication failed to ip {{ ecmHost }} with user: admin, admin
</div>
<div *ngIf="authenticated">
<H5>ECM</H5>
Authentication successfull to ip {{ ecmHost }} with user: admin, admin<br>
your token is {{ tokenEcm }}<br>
<H5>BPM</H5>
Authentication successfull to ip {{ bpmHost }} with user: admin, admin<br>
your token is {{ tokenBpm }}<br>
</div>`
<div *ngIf="!authenticated" >
Authentication failed to ip {{ ecmHost }} with user: admin, admin
</div>
<div *ngIf="authenticated">
<H5>ECM</H5>
Authentication successfull to ip {{ ecmHost }} with user: admin, admin<br>
your token is {{ tokenEcm }}<br>
<H5>BPM</H5>
Authentication successfull to ip {{ bpmHost }} with user: admin, admin<br>
your token is {{ tokenBpm }}<br>
</div>
`
})
class MyDemoApp {
authenticated: boolean = false;
public ecmHost: string = 'http://localhost:8080';
public bpmHost: string = 'http://localhost:9999';
ecmHost: string = 'http://localhost:8080';
bpmHost: string = 'http://localhost:9999';
tokenBpm: string;
tokenEcm: string;
constructor(public alfrescoAuthenticationService: AlfrescoAuthenticationService,
@@ -246,7 +243,51 @@ export class AppModule {
platformBrowserDynamic().bootstrapModule(AppModule);
```
#### Renditions Service
## AlfrescoTranslationService
In order to enable localisation support you will need creating a `/resources/i18n/en.json` file
and registering path to it's parent `i18n` folder:
```ts
class MainApplication {
constructor(private translateService: AlfrescoTranslationService) {
translateService.addTranslationFolder('app', 'resources');
}
}
```
Service also allows changing current language for entire application.
Imagine you got a language picker that invokes `onLanguageClicked` method:
```ts
class MyComponent {
constructor(private translateService: AlfrescoTranslationService) {
}
onLanguageClicked(lang: string) {
this.translateService.use('en');
}
}
```
It is also possible providing custom translations for existing components by overriding their resource paths:
```ts
class MyComponent {
constructor(private translateService: AlfrescoTranslationService) {
translateService.addTranslationFolder(
'ng2-alfresco-login',
'i18n/custom-translation/alfresco-login'
);
}
}
```
**Important note**: `addTranslationFolder` method redirects **all** languages to a new folder, you may need implementing multiple languages
or copying existing translation files to a new path.
## Renditions Service
* getRenditionsListByNodeId(nodeId: string)
* createRendition(nodeId: string, encoding: string)

View File

@@ -44,6 +44,9 @@ export class AlfrescoTranslateLoader implements TranslateLoader {
getComponentToFetch(lang: string) {
let observableBatch = [];
if (!this.queue[lang]) {
this.queue[lang] = [];
}
this._componentList.forEach((component) => {
if (!this.isComponentInQueue(lang, component.name)) {
this.queue[lang].push(component.name);
@@ -67,7 +70,7 @@ export class AlfrescoTranslateLoader implements TranslateLoader {
}
isComponentInQueue(lang: string, name: string) {
return this.queue[lang].find(x => x === name) ? true : false;
return (this.queue[lang] || []).find(x => x === name) ? true : false;
}
getFullTranslationJSON(lang: string) {

View File

@@ -22,24 +22,35 @@ import { AlfrescoTranslateLoader } from './alfresco-translate-loader.service';
@Injectable()
export class AlfrescoTranslationService {
defaultLang: string = 'en';
userLang: string = 'en';
customLoader: AlfrescoTranslateLoader;
constructor(public translate: TranslateService) {
this.userLang = translate.getBrowserLang() || 'en';
translate.setDefaultLang(this.userLang);
this.userLang = translate.getBrowserLang() || this.defaultLang;
translate.setDefaultLang(this.defaultLang);
this.customLoader = <AlfrescoTranslateLoader> this.translate.currentLoader;
this.customLoader.init(this.userLang);
this.use(this.userLang);
}
addTranslationFolder(name: string = '', path: string = '') {
if (!this.customLoader.existComponent(name)) {
this.customLoader.addComponentList(name, path);
this.translate.getTranslation(this.userLang).subscribe(
() => {
this.translate.use(this.userLang);
}
);
if (this.userLang !== this.defaultLang) {
this.translate.getTranslation(this.defaultLang).subscribe(() => {
this.translate.getTranslation(this.userLang).subscribe(
() => {
this.translate.use(this.userLang);
}
);
});
} else {
this.translate.getTranslation(this.userLang).subscribe(
() => {
this.translate.use(this.userLang);
}
);
}
}
}

View File

@@ -17,69 +17,3 @@
transition: height .35s cubic-bezier(0.4,0.0,1,1),border-color .4s;
z-index: 5;
}
.action {
max-width: 394px;
min-width: 150px;
}
.action {
-webkit-align-items: flex-end;
align-items: flex-end;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 13px 0 11px 30px;
-webkit-transition: padding .35s cubic-bezier(0.4, 0.0, 1, 1);
transition: padding .35s cubic-bezier(0.4, 0.0, 1, 1);
}
.mdl-menu__item-primary-content {
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.mdl-menu__item-primary-content {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex-grow: 2;
-ms-flex-positive: 2;
flex-grow: 2;
text-decoration: none;
}
.mdl-menu__item-primary-content {
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.mdl-menu__item-icon {
margin-right: 32px;
margin-top: 10px;
margin-left: 10px;
}
.mdl-menu--bottom-left {
width: 200px;
}
.mdl-menu__text {
float: right;
margin-right: 22px;
}

View File

@@ -1,21 +1,18 @@
<div class="container">
<div class="action">
<button id="actions" class="mdl-button mdl-js-button mdl-button--raised">
<i class="material-icons">add</i> {{ 'BUTTON.ACTION_CREATE' | translate }}
<button md-button [mdMenuTriggerFor]="menu">
<md-icon>add</md-icon>
<span>{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.ACTION_CREATE' | translate }}</span>
</button>
<md-menu #menu="mdMenu">
<button md-menu-item (click)="showDialog()">
<md-icon>create_new_folder</md-icon>
<span>{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.ACTION_NEW_FOLDER' | translate }}</span>
</button>
<ul alfresco-mdl-menu class="mdl-menu--bottom-left"
[attr.for]="'actions'">
<li class="mdl-menu__item"
(click)="showDialog()" >
<i style="float: left;" class="material-icons mdl-menu__item-icon">folder</i>
<span class="mdl-menu__text">{{ 'BUTTON.ACTION_NEW_FOLDER' | translate }}</span>
</li>
</ul>
</div>
</md-menu>
</div>
<dialog class="mdl-dialog" #dialog>
<h4 class="mdl-dialog__title">{{ 'BUTTON.ACTION_NEW_FOLDER' | translate }}</h4>
<h4 class="mdl-dialog__title">{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.ACTION_NEW_FOLDER' | translate }}</h4>
<div class="mdl-dialog__content">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input
@@ -30,7 +27,7 @@
</div>
</div>
<div class="mdl-dialog__actions">
<button type="button" [disabled]="isFolderNameEmpty()" (click)="createFolder(folderName)" class="mdl-button">{{ 'BUTTON.CREATE' | translate }}</button>
<button type="button" (click)="cancel()" class="mdl-button close">{{ 'BUTTON.CANCEL' | translate}}</button>
<button type="button" [disabled]="isFolderNameEmpty()" (click)="createFolder(folderName)" class="mdl-button">{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.CREATE' | translate }}</button>
<button type="button" (click)="cancel()" class="mdl-button close">{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.CANCEL' | translate}}</button>
</div>
</dialog>

View File

@@ -1,22 +1,10 @@
{
"ICONS": {
"ft_ic_folder": "Folder",
"ft_ic_raster_image": "Image file",
"ft_ic_pdf": "PDF document",
"ft_ic_ms_excel": "Microsoft Excel file",
"ft_ic_ms_word": "Microsoft Word document",
"ft_ic_ms_powerpoint": "Microsoft PowerPoint file",
"ft_ic_video": "Video file",
"ft_ic_document": "Document file",
"ft_ic_website": "Web resource",
"ft_ic_archive": "Archive file",
"ft_ic_presentation": "Presentation file",
"ft_ic_spreadsheet": "Spreadsheet file"
},
"BUTTON": {
"ACTION_CREATE": "Create...",
"ACTION_NEW_FOLDER": "New Folder",
"CREATE": "Create",
"CANCEL": "Cancel"
"ALFRESCO_DOCUMENT_LIST": {
"BUTTON": {
"ACTION_CREATE": "Create...",
"ACTION_NEW_FOLDER": "New Folder",
"CREATE": "Create",
"CANCEL": "Cancel"
}
}
}

View File

@@ -1,22 +1,10 @@
{
"ICONS": {
"ft_ic_folder": "Пака",
"ft_ic_raster_image": "Картинка",
"ft_ic_pdf": "PDF документ",
"ft_ic_ms_excel": "Microsoft Excel файл",
"ft_ic_ms_word": "Microsoft Word документ",
"ft_ic_ms_powerpoint": "Microsoft PowerPoint файл",
"ft_ic_video": "Видео",
"ft_ic_document": "Документ",
"ft_ic_website": "Web-ресурс",
"ft_ic_archive": "Архив",
"ft_ic_presentation": "Презентация",
"ft_ic_spreadsheet": "Таблица"
},
"BUTTON": {
"ACTION_CREATE": "Создать...",
"ACTION_NEW_FOLDER": "Новая папка",
"CREATE": "Создать",
"CANCEL": "Отмена"
"ALFRESCO_DOCUMENT_LIST": {
"BUTTON": {
"ACTION_CREATE": "Создать...",
"ACTION_NEW_FOLDER": "Новая папка",
"CREATE": "Создать",
"CANCEL": "Отмена"
}
}
}