Feature/33 i18n #33

README.md

@@ -15,3 +15,4 @@ TODO:
 - Allgemeine Aspekte sind im [Wiki](https://github.com/erz-mba-fbi/absenzenmanagement/wiki) dokumentiert
 - [Einrichten Entwicklungsumgebung](doc/setup-entwicklung.md)
 - [Prettier](doc/prettier.md)
+- [Internationalization (i18n)](doc/i18n.md)

angular.json

@@ -83,7 +83,6 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
-            "tslintConfig": "tslint.json",
             "exclude": ["**/node_modules/**"]
           }
         }

doc/i18n.md

@@ -0,0 +1,22 @@
+# Internationalization (i18n)
+
+[zurück](../README.md)
+
+## Auswahl der Sprache
+
+Die Auswahl der Sprache geschieht nach folgendem Mechanismus:
+
+1. Wert des [HTML lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) Attributs
+1. `uiCulture` Wert im localStorage
+1. Sprache des Browsers
+1. Fallback-Sprache ist Deutsch
+
+## UI übersetzen
+
+Wir verwenden [ngx-translate](https://github.com/ngx-translate/core) für die Übersetzung der Texte im User Interface. Die Übersetzung kann per Pipe, Direktive oder Service geschehen, siehe:
+
+https://github.com/ngx-translate/core#4-use-the-service-the-pipe-or-the-directive
+
+## Übersetzungen bearbeiten
+
+Die Übersetzungsdateien werden im JSON Format erfasst und liegen im Verzeichnis `src/assets/locales/*.json`.

package.json

@@ -21,6 +21,8 @@
     "@angular/platform-browser": "~7.2.0",
     "@angular/platform-browser-dynamic": "~7.2.0",
     "@angular/router": "~7.2.0",
+    "@ngx-translate/core": "^11.0.1",
+    "@ngx-translate/http-loader": "^4.0.0",
     "core-js": "^2.5.4",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",
@@ -49,6 +51,7 @@
     "ts-node": "~7.0.0",
     "tslint": "~5.11.0",
     "tslint-config-prettier": "^1.18.0",
+    "tslint-jasmine-rules": "^1.5.1",
     "tslint-plugin-prettier": "^2.0.1",
     "typescript": "~3.2.2"
   },
@@ -60,7 +63,7 @@
   "lint-staged": {
     "linters": {
       "./src/app/**/*.ts": [
-        "tslint -c tslint.json",
+        "tslint",
         "prettier --write",
         "git add"
       ],

src/app/absenzen-auswerten/absenzen-auswerten.component.spec.ts

@@ -1,15 +1,18 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { buildTestModuleMetadata } from 'src/spec-helpers';
 import { AbsenzenAuswertenComponent } from './absenzen-auswerten.component';
 
 describe('AbsenzenAuswertenComponent', () => {
   let component: AbsenzenAuswertenComponent;
   let fixture: ComponentFixture<AbsenzenAuswertenComponent>;
 
   beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [AbsenzenAuswertenComponent]
-    }).compileComponents();
+    TestBed.configureTestingModule(
+      buildTestModuleMetadata({
+        declarations: [AbsenzenAuswertenComponent]
+      })
+    ).compileComponents();
   }));
 
   beforeEach(() => {

src/app/absenzen-auswerten/absenzen-auswerten.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'erz-absenzen-auswerten',
   templateUrl: './absenzen-auswerten.component.html',
-  styleUrls: ['./absenzen-auswerten.component.css']
+  styleUrls: ['./absenzen-auswerten.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AbsenzenAuswertenComponent implements OnInit {
   constructor() {}

src/app/absenzen-auswerten/absenzen-auswerten.module.ts

@@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 
+import { SharedModule } from '../shared/shared.module';
 import { AbsenzenAuswertenRoutingModule } from './absenzen-auswerten-routing.module';
 import { AbsenzenAuswertenComponent } from './absenzen-auswerten.component';
 
 @NgModule({
   declarations: [AbsenzenAuswertenComponent],
-  imports: [CommonModule, AbsenzenAuswertenRoutingModule]
+  imports: [SharedModule, AbsenzenAuswertenRoutingModule]
 })
 export class AbsenzenAuswertenModule {}

src/app/absenzen-bearbeiten/absenzen-bearbeiten.component.spec.ts

@@ -1,15 +1,18 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { buildTestModuleMetadata } from 'src/spec-helpers';
 import { AbsenzenBearbeitenComponent } from './absenzen-bearbeiten.component';
 
 describe('AbsenzenBearbeitenComponent', () => {
   let component: AbsenzenBearbeitenComponent;
   let fixture: ComponentFixture<AbsenzenBearbeitenComponent>;
 
   beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [AbsenzenBearbeitenComponent]
-    }).compileComponents();
+    TestBed.configureTestingModule(
+      buildTestModuleMetadata({
+        declarations: [AbsenzenBearbeitenComponent]
+      })
+    ).compileComponents();
   }));
 
   beforeEach(() => {

src/app/absenzen-bearbeiten/absenzen-bearbeiten.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'erz-absenzen-bearbeiten',
   templateUrl: './absenzen-bearbeiten.component.html',
-  styleUrls: ['./absenzen-bearbeiten.component.css']
+  styleUrls: ['./absenzen-bearbeiten.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AbsenzenBearbeitenComponent implements OnInit {
   constructor() {}

src/app/absenzen-bearbeiten/absenzen-bearbeiten.module.ts

@@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 
+import { SharedModule } from '../shared/shared.module';
 import { AbsenzenBearbeitenRoutingModule } from './absenzen-bearbeiten-routing.module';
 import { AbsenzenBearbeitenComponent } from './absenzen-bearbeiten.component';
 
 @NgModule({
   declarations: [AbsenzenBearbeitenComponent],
-  imports: [CommonModule, AbsenzenBearbeitenRoutingModule]
+  imports: [SharedModule, AbsenzenBearbeitenRoutingModule]
 })
 export class AbsenzenBearbeitenModule {}

src/app/app.component.spec.ts

@@ -1,33 +1,27 @@
-import { TestBed, async } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
+import { TestBed, async, ComponentFixture } from '@angular/core/testing';
+
+import { buildTestModuleMetadata } from 'src/spec-helpers';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
+  let component: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+
   beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
-      declarations: [AppComponent]
-    }).compileComponents();
+    TestBed.configureTestingModule(
+      buildTestModuleMetadata({
+        declarations: [AppComponent]
+      })
+    ).compileComponents();
   }));
 
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have as title 'absenzenmanagement'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('absenzenmanagement');
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AppComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
   });
 
-  it('should render title in a h1 tag', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain(
-      'Welcome to absenzenmanagement!'
-    );
+  it('should create the app', () => {
+    expect(component).toBeTruthy();
   });
 });

src/app/app.component.ts

@@ -1,10 +1,14 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { I18nService } from './shared/i18n.service';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  selector: 'erz-app',
+  template: '<router-outlet></router-outlet>',
+  styleUrls: ['./app.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppComponent {
-  title = 'absenzenmanagement';
+  constructor(i18n: I18nService) {
+    i18n.initialize();
+  }
 }

src/app/app.module.ts

@@ -1,13 +1,32 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HomeComponent } from './home.component';
 
+// AoT requires an exported function for factories
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/locales/', '.json');
+}
+
 @NgModule({
   declarations: [AppComponent, HomeComponent],
-  imports: [BrowserModule, AppRoutingModule],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    HttpClientModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient]
+      }
+    })
+  ],
   providers: [],
   bootstrap: [AppComponent]
 })

src/app/home.component.spec.ts

@@ -1,24 +1,44 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { buildTestModuleMetadata } from 'src/spec-helpers';
 import { HomeComponent } from './home.component';
 
 describe('HomeComponent', () => {
   let component: HomeComponent;
   let fixture: ComponentFixture<HomeComponent>;
+  let element: HTMLElement;
 
   beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [HomeComponent]
-    }).compileComponents();
+    TestBed.configureTestingModule(
+      buildTestModuleMetadata({
+        declarations: [HomeComponent]
+      })
+    ).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(HomeComponent);
     component = fixture.componentInstance;
+    element = fixture.debugElement.nativeElement;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('renders a link for each section', () => {
+    const links = getLinks();
+    expect(links).toEqual([
+      '/praesenzkontrolle',
+      '/offene-absenzen',
+      '/absenzen-bearbeiten',
+      '/absenzen-auswerten'
+    ]);
+  });
+
+  function getLinks(): string[] {
+    const anchors = Array.prototype.slice.call(element.querySelectorAll('a'));
+    return anchors.map(l => l.getAttribute('href'));
+  }
 });

src/app/home.component.ts

@@ -1,12 +1,26 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'erz-home',
-  templateUrl: './home.component.html',
-  styleUrls: ['./home.component.css']
+  template: `
+    <ul>
+      <li *ngFor="let section of sections">
+        <h2>
+          <a [routerLink]="'/' + section">
+            {{ section + '.title' | translate }}
+          </a>
+        </h2>
+      </li>
+    </ul>
+  `,
+  styleUrls: ['./home.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class HomeComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
+export class HomeComponent {
+  sections: ReadonlyArray<string> = [
+    'praesenzkontrolle',
+    'offene-absenzen',
+    'absenzen-bearbeiten',
+    'absenzen-auswerten'
+  ];
 }