Revize 18dbad83

Re #7475 Implemented basic localization with usage examples

webapp/package.json

@@ -23 +23 @@
     "@angular/platform-browser-dynamic": "~7.2.0",
     "@angular/router": "~7.2.0",
     "@ng-bootstrap/ng-bootstrap": "^4.1.1",
+    "@ngx-translate/core": "^11.0.1",
+    "@ngx-translate/http-loader": "^4.0.0",
     "angular-calendar": "^0.27.5",
     "angularx-flatpickr": "^6.1.0",
     "core-js": "^2.5.4",

webapp/src/app/app.module.ts

@@ -7 +7 @@
 import { DashboardModule } from './dashboard/dashboard.module';
 import { HeaderComponent } from './header/header.component';
 import { MatDialogModule } from '@angular/material';
-import {ProfileSettingsModule} from './profile-settings/profile-settings.module';
-import {HttpClientModule} from '@angular/common/http';
-import {EmployeesModule} from './employees/employees.module';
+import { ProfileSettingsModule } from './profile-settings/profile-settings.module';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { EmployeesModule } from './employees/employees.module';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 @NgModule({
   declarations: [
@@ -21 +23 @@
     BrowserModule,
     HttpClientModule,
     AppRoutingModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient]
+      }
+    }),
     DashboardModule,
     MatDialogModule,
     ProfileSettingsModule,
@@ -30 +39 @@
   bootstrap: [AppComponent]
 })
 export class AppModule { }
+
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
+}

webapp/src/app/dashboard/employer-dashboard/employer-dashboard.component.ts

@@ -5 +5 @@
 import {Requests} from '../../models/requests.model';
 import {UserProfile} from '../../models/user-profile.model';
 import {UserService} from '../../services/user.service';
-import {ProfileService} from "../../services/profile.service";
+import {ProfileService} from '../../services/profile.service';
+import {TimeUnit} from '../../enums/common.enum';
 
 @Component({
   selector: 'app-employer-dashboard',
@@ -27 +28 @@
   ) { }
 
   ngOnInit() {
-    this.profileService.getProfile()
-      .subscribe((data: UserProfile) => this.profile = data);
+    // this.profileService.getProfile()
+    //   .subscribe((data: UserProfile) => this.profile = data);
+    //
+    // this.usersService.getAuthorizationRequests()
+    //   .subscribe((data: Requests) => this.authorizationRequests = data);
+    //
+    // this.usersService.getVacationRequests()
+    //   .subscribe((data: Requests) => this.daysOffRequests = data);
 
-    this.usersService.getAuthorizationRequests()
-      .subscribe((data: Requests) => this.authorizationRequests = data);
-
-    this.usersService.getVacationRequests()
-      .subscribe((data: Requests) => this.daysOffRequests = data);
+    // Tmp mock
+    this.profile = {
+      id: 1,
+      name: {
+        first: 'Jon',
+        last: 'Doe',
+      },
+      photo: 'http://mosaddek.com/theme/diverse/assets/img/user1.png',
+      settings: {
+        notification: new Date(2019, 3, 25, 18, 0)
+      },
+      vacation: {
+        value: 5,
+        unit: TimeUnit.DAY,
+      },
+      sickDay: {
+        value: 10,
+        unit: TimeUnit.DAY
+      }
+    };
   }
 
   private userApproved(requestId: number, approved: boolean) {

webapp/src/app/day-picker/day-picker.component.html

@@ -25 +25 @@
     </div>
   </div>
 
+  <!-- Refresh attribute for localization purposes (refresh component after change of language -->
   <mwl-calendar-month-view
     [viewDate]="viewDate"
     (dayClicked)="dayClicked($event.day)"
     weekStartsOn="1"
     [locale]="locale"
+    [refresh]="localizationService.currentLanguage"
   >
   </mwl-calendar-month-view>
 </div>

webapp/src/app/day-picker/day-picker.component.ts

@@ -1 +1 @@
 import { Component, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
 import { CalendarView } from 'angular-calendar';
+import {LocalizationService} from '../localization/localization.service';
 
 @Component({
   selector: 'app-day-picker',
@@ -9 +10 @@
 })
 export class DayPickerComponent {
 
-  // TODO Move to language service
-  locale = 'cs';
+  private locale;
 
   // Type of calendar (constant)
   view: CalendarView = CalendarView.Month;
@@ -21 +21 @@
   // EventEmitter informing about changes of selected date
   @Output() selectedDate = new EventEmitter<Date>();
 
+  constructor(private localizationService: LocalizationService) {
+    this.locale = localizationService.defaultLanguage;
+    localizationService.currentLanguage
+      .subscribe((data) => {
+        this.locale = data;
+      });
+  }
+
   /**
    * Method that is invoked when user clicks on a day.
    * Sets selected date and emits event informing about new selected date.

webapp/src/app/days-off-info/days-off-info.component.html

@@ -1 +1 @@
 <div class="days-off-info-container">
 
-  <div class="component-header">
-    Zbývající volno
+  <div class="component-header" translate>
+<!--    TODO-->
+    <span translate>daysOffInfo.remaining</span>
   </div>
 
   <div class="days-off-type-container">
     <span class="days-off-remaining">{{extraVacationRemaining.value}}</span>
     <!--    TODO vypsat jednotky (.unit)-->
-    <span class="days-off-type">Extra dovolená</span>
+    <span class="days-off-type" translate>vacationType.vacation</span>
   </div>
 
   <div class="days-off-type-container">
     <span class="days-off-remaining">{{sickDaysRemaining.value}}</span>
     <!--    TODO vypsat jednotky (.unit)-->
-    <span class="days-off-type">Sickdays</span>
+    <span class="days-off-type" translate>vacationType.sickday</span>
   </div>
 
 </div>

webapp/src/app/days-off-info/days-off-info.component.ts

@@ -1 +1 @@
 import { Component, Input } from '@angular/core';
-import {TimeUnit} from "../enums/common.enum";
+import {TimeUnit} from '../enums/common.enum';
+import {LocalizationService} from '../localization/localization.service';
 
 @Component({
   selector: 'app-days-off-info',
@@ -18 +19 @@
     unit: TimeUnit;
   };
 
-  constructor() { }
+  constructor(private localizationService: LocalizationService) { }
 }

webapp/src/app/days-off-info/days-off-info.module.ts

@@ -1 +1 @@
 import { NgModule } from '@angular/core';
 import { DaysOffInfoComponent } from './days-off-info.component';
+import {TranslateModule} from '@ngx-translate/core';
 
 @NgModule({
+  imports: [TranslateModule],
   declarations: [ DaysOffInfoComponent ],
   exports:      [ DaysOffInfoComponent ]
 })

webapp/src/app/header/header.component.html

@@ -1 +1 @@
 <div class="row header">
   <img class="logo" src="../../assets/images/logo.png" />
-  <button class="user-info" (click)="onProfileClick()">
-    <img class="user-icon" src="../../assets/images/default-user.png"/>
-    <span class="user-name">{{name}}</span>
-  </button>
+  <div class="language-and-user">
+    <button (click)="localizationService.switchLanguage('cs')">CS</button>
+    <button (click)="localizationService.switchLanguage('en')">EN</button>
+    <button class="user-info" (click)="onProfileClick()">
+      <img class="user-icon" src="../../assets/images/default-user.png"/>
+      <span class="user-name">{{name}}</span>
+    </button>
+  </div>
 </div>

webapp/src/app/header/header.component.sass

@@ -3 +3 @@
   background-color: #3F425D
   padding-left: 10px
 
-.user-info
-  height: 100%
+.language-and-user
   margin-left: auto
   margin-right: 0
+  
+.user-info
+  height: 100%
   border: 0
   background-color: transparent
 

webapp/src/app/header/header.component.ts

@@ -3 +3 @@
 import { ProfileSettingsComponent } from '../profile-settings/profile-settings.component';
 import { ProfileService } from '../services/profile.service';
 import { UserProfile } from '../models/user-profile.model';
+import {LocalizationService} from "../localization/localization.service";
 
 @Component({
   selector: 'app-header',
@@ -16 +17 @@
 
   constructor(
     private dialog: MatDialog,
-    private profileService: ProfileService
+    private profileService: ProfileService,
+    private localizationService: LocalizationService
     ) {
-    profileService.getProfile()
-      .subscribe((data: UserProfile) => this.notificationSettings = new Date(data.settings.notification));
+    // profileService.getProfile()
+    //   .subscribe((data: UserProfile) => this.notificationSettings = new Date(data.settings.notification));
   }
 
   onProfileClick(): void {

webapp/src/app/localization/localization.service.ts

@@ +1 @@
+import { Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { registerLocaleData } from '@angular/common';
+import localeEn from '@angular/common/locales/en';
+import localeCs from '@angular/common/locales/cs';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LocalizationService {
+  readonly defaultLanguage = 'en';
+
+  currentLanguage: Subject<string>;
+
+  constructor(private translate: TranslateService) {
+    this.currentLanguage = new Subject<string>();
+
+    registerLocaleData(localeEn);
+    registerLocaleData(localeCs);
+
+    translate.setDefaultLang(this.defaultLanguage);
+  }
+
+  switchLanguage(lang: string) {
+    this.translate.use(lang);
+    this.currentLanguage.next(lang);
+  }
+}

webapp/src/app/services/profile.service.ts

@@ -12 +12 @@
   constructor(
     private userService: UserService
   ) {
-    userService.getEmployeeProfile(1)
-      .subscribe((data: UserProfile) => this.profile = data);
+    // userService.getEmployeeProfile(1)
+    //   .subscribe((data: UserProfile) => this.profile = data);
   }
 
   getProfile(): Observable<UserProfile> {

webapp/src/assets/i18n/cs.json

@@ +1 @@
+{
+  "daysOffInfo": {
+    "remaining": "Zbývající dovolená"
+  },
+  "vacationType": {
+    "vacation": "Extra dovolená",
+    "sickday": "Sickday"
+  }
+}

webapp/src/assets/i18n/en.json

@@ +1 @@
+{
+  "daysOffInfo": {
+    "remaining": "Vacation remaining"
+  },
+  "vacationType": {
+    "vacation": "Extra vacation",
+    "sickday": "Sickday"
+  }
+}