Revize 230804d9

Re #7475 Localization

webapp/angular.json

@@ -27 +27 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/flag-icon-css/css/flag-icon.min.css",
               "src/styles.sass"
             ],
             "scripts": [],
@@ -137 +138 @@
     }
   },
   "defaultProject": "ymanager-frontend"
-}
+}

webapp/package.json

@@ -29 +29 @@
     "angularx-flatpickr": "^6.1.0",
     "core-js": "^2.5.4",
     "date-fns": "^1.30.1",
+    "flag-icon-css": "^3.3.0",
     "flatpickr": "^4.5.7",
     "luxon": "^1.15.0",
     "ngx-material-timepicker": "^3.1.0",

webapp/src/app/app.component.ts

@@ -1 +1 @@
 import {Component, OnInit} from '@angular/core';
-import { registerLocaleData } from '@angular/common';
-import localeCs from '@angular/common/locales/cs';
 
 @Component({
   selector: 'app-root',
@@ -9 +7 @@
 })
 export class AppComponent implements OnInit {
 
-  constructor() {
-    registerLocaleData(localeCs);
-  }
+  constructor() {}
 
   ngOnInit() {}
 

webapp/src/app/app.module.ts

@@ -1 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
 
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { MenuComponent } from './menu/menu.component';
-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 { 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';
-import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
+import {AppRoutingModule} from './app-routing.module';
+import {AppComponent} from './app.component';
+import {MenuComponent} from './menu/menu.component';
+import {DashboardModule} from './dashboard/dashboard.module';
+import {HeaderComponent} from './header/header.component';
+import {MatDialogModule, MatMenuModule} from '@angular/material';
+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';
+import {PageNotFoundComponent} from './page-not-found/page-not-found.component';
 
 @NgModule({
   declarations: [
@@ -35 +35 @@
     DashboardModule,
     MatDialogModule,
     ProfileSettingsModule,
-    EmployeesModule
+    EmployeesModule,
+    MatMenuModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -44 +44 @@
     private dateToolsService: DateToolsService) {
 
     this.locale = localizationService.getCurrentLocale();
-    localizationService.currentLanguageSubject
+    localizationService.currentLocaleSubject
       .subscribe((data) => {
         this.locale = data;
       });
@@ -54 +54 @@
     this.currentYear = this.viewDate.getFullYear();
 
     // Calendar component needs to be refreshed on language switch or else language switch doesn't have an effect
-    this.localizationService.currentLanguageSubject.subscribe(e => this.refresh.next());
+    this.localizationService.currentLocaleSubject.subscribe(e => this.refresh.next());
   }
 
   public setVacation(vacations: Calendar[]) {

webapp/src/app/employees/edit-employee-dialog/edit-employee-dialog.component.html

@@ -18 +18 @@
         class="example-radio-button"
         *ngFor="let type of _userTypes" [value]="type"
       >
-        {{type}}
+        {{type | translate}}
       </mat-radio-button>
     </mat-radio-group>
   </div>
@@ -41 +41 @@
     <input
       matInput
       type="number"
-      placeholder="Dovolená"
+      placeholder="{{'basic.vacation' | translate}}"
       min="1"
       step="0.5"
       [(ngModel)]="_vacationDaysCount"
@@ -49 +49 @@
   </mat-form-field>
 </div>
 <div mat-dialog-actions>
-  <button class="btn btn-primary" style="margin-right: 5px" (click)="onConfirmClick()">Potvrdit</button>
-  <button class="btn btn-danger" (click)="onCloseClick()">Zavřít</button>
+  <button class="btn btn-primary" style="margin-right: 5px" (click)="onConfirmClick()">{{'button.confirm' | translate}}</button>
+  <button class="btn btn-danger" (click)="onCloseClick()">{{'button.close' | translate}}</button>
 </div>

webapp/src/app/employees/employees-list.component.html

@@ -1 +1 @@
 <div class="employee-component">
   <div>
-    <span class="align-baseline" style="font-size: x-large">Zaměstnanci</span>
+    <span class="align-baseline" style="font-size: x-large">{{'basic.employees' | translate}}</span>
 
     <button
       id="settings-button"
@@ -20 +20 @@
       (change)="uploadXlsxFile(fileInput.files); fileInput.value = null;"
     />
 
-    <label for="input-file" class="btn btn-primary " style="margin-right: 5px">Import</label>
+    <label for="input-file" class="btn btn-primary" style="margin-right: 5px">Import</label>
     <label class="btn btn-danger" (click)="downloadPdf()">
       Export
     </label>
@@ -30 +30 @@
   <table class="table text-center table-hover">
     <thead class="thead-light">
     <tr>
-      <th scope="col" style="width: 15%">Celé jméno</th>
-      <th scope="col" style="width: 5.0%" *ngFor="let day of days">{{day}}</th>
+      <th scope="col" style="width: 15%">{{'basic.name' | translate}}</th>
+      <th scope="col" style="width: 5.0%" *ngFor="let day of days">{{day | translate}}</th>
       <th></th>
     </tr>
     </thead>
@@ -55 +55 @@
         </div>
       </td>
       <td>
-        <span class="material-icons" style="font-size: small" (click)="openUserProfile(user)">visibility</span>
-        <span class="material-icons" style="font-size: small" (click)="openEditUserDialog(user)">edit</span>
+        <span class="material-icons button-icon" style="font-size: small; margin-right: 10px" (click)="openUserProfile(user)">visibility</span>
+        <span class="material-icons button-icon" style="font-size: small" (click)="openEditUserDialog(user)">edit</span>
       </td>
     </tr>
     </tbody>

webapp/src/app/employees/employees-list.component.sass

@@ -30 +30 @@
 .input-file
   display: none
 
+.button-icon
+  cursor: pointer
+
 

webapp/src/app/employees/employees-list.component.ts

@@ -13 +13 @@
 import {DateFormatterService} from '../services/util/date-formatter.service';
 import {FileService} from '../services/api/file.service';
 import {ProfileService} from '../services/util/profile.service';
-import {UserProfileDialogComponent} from "./user-profile/user-profile-dialog.component";
+import {UserProfileDialogComponent} from './user-profile/user-profile-dialog.component';
 
 const daysOfWeek: string[] = [
-  'po',
-  'ut',
-  'st',
-  'ct',
-  'pa',
-  'so',
-  'ne',
+  'dayShortName.mon',
+  'dayShortName.tue',
+  'dayShortName.wed',
+  'dayShortName.thu',
+  'dayShortName.fri',
+  'dayShortName.sat',
+  'dayShortName.sun',
 ];
 
 @Component({

webapp/src/app/employees/employees.module.ts

@@ -1 +1 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {EmployeesListComponent} from './employees-list.component';
+import {TranslateModule} from '@ngx-translate/core';
 
 import {
   MatButtonModule,
@@ -9 +10 @@
   MatFormFieldModule,
   MatInputModule,
   MatRadioModule,
-  MatTableModule
+  MatTableModule,
+
 } from '@angular/material';
 import {EditEmployeeDialogComponent} from './edit-employee-dialog/edit-employee-dialog.component';
 import {FormsModule} from '@angular/forms';
@@ -40 +42 @@
     MatButtonModule,
     DayPickerModule,
     SharedModule,
-    VacationInfoModule
+    VacationInfoModule,
+    TranslateModule,
   ],
   entryComponents: [
     EditEmployeeDialogComponent,

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

@@ -1 +1 @@
 <div class="row header">
-  <img class="logo" src="../../assets/images/logo.png" />
+  <img class="logo" src="../../assets/images/logo.png" alt="logo"/>
   <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 *ngIf="profile" class="user-name">{{profile.firstName}} {{profile.lastName}}</span>
+    <label [matMenuTriggerFor]="menu" class="language-menu">
+      <span class="flag-icon flags flag-icon-gb" *ngIf="language === 'EN'"></span>
+      <span class="flag-icon flags flag-icon-cz" *ngIf="language === 'CZ'"></span>
+    </label>
+
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item (click)="switchLanguage('en')">
+          English <span class="flag-icon flag-icon-gb" ></span>
+        </button>
+        <button mat-menu-item (click)="switchLanguage('cs')">
+          Česky <span class="flag-icon flag-icon-cz"></span>
+        </button>
+      </mat-menu>
+    <button *ngIf="profile" class="user-info" (click)="onProfileClick()">
+      <img class="user-icon" src="{{profile.photo}}" alt="profile-photo"/>
+      <span class="user-name">{{profile.firstName}} {{profile.lastName}}</span>
     </button>
   </div>
 </div>

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

@@ -26 +26 @@
   color: white
   margin-left: 10px
   margin-right: 10px
+
+.flags
+  height: 18px
+
+.language-menu
+  cursor: pointer
+  margin-right: 10px

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

@@ -12 +12 @@
 })
 export class HeaderComponent {
   profile: UserProfile;
+  language: string;
 
   constructor(
     private dialog: MatDialog,
@@ -20 +21 @@
     ) {
     userService.getLoggedUserProfile()
       .subscribe((data: UserProfile) => this.profile = data);
+    this.language = this.localizationService.getCurrentLanguage();
   }
 
+  switchLanguage(language: string) {
+    this.language = this.localizationService.switchLocale(language);
+  }
   onProfileClick(): void {
     this.userService.getLoggedUserProfile()
       .subscribe((data: UserProfile) => {

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

@@ -4 +4 @@
 import localeEn from '@angular/common/locales/en';
 import localeCs from '@angular/common/locales/cs';
 import {Subject} from 'rxjs';
-import {Languages} from "../enums/common.enum";
+import {Languages} from '../enums/common.enum';
 
 @Injectable({
   providedIn: 'root'
 })
 export class LocalizationService {
-  readonly defaultLanguage = 'en';
+  readonly defaultLocale = 'cs';
 
-  currentLanguageSubject: Subject<string>;
+  currentLocaleSubject: Subject<string>;
 
-  private currentLanguage = this.defaultLanguage;
+  private currentLocale = this.defaultLocale;
 
   constructor(private translate: TranslateService) {
-    this.currentLanguageSubject = new Subject<string>();
+    this.currentLocaleSubject = new Subject<string>();
 
     registerLocaleData(localeEn);
     registerLocaleData(localeCs);
 
-    translate.setDefaultLang(this.defaultLanguage);
+    translate.setDefaultLang(this.defaultLocale);
   }
 
-  switchLanguage(lang: string) {
-    this.translate.use(lang);
-    this.currentLanguageSubject.next(lang);
-    this.currentLanguage = lang;
+  switchLocale(locale: string): string {
+    this.translate.use(locale);
+    this.currentLocaleSubject.next(locale);
+    this.currentLocale = locale;
+
+    return this.getCurrentLanguage();
   }
 
   getCurrentLanguage(): Languages {
-    switch (this.currentLanguage) {
+    switch (this.currentLocale) {
       case 'cs':
         return Languages.CZECH;
       case 'en':
@@ -42 +44 @@
   }
 
   getCurrentLocale(): string {
-    return this.currentLanguage;
+    return this.currentLocale;
   }
 }

webapp/src/app/oncoming-vacation/oncoming-vacation.component.html

@@ -1 +1 @@
 <div class="oncoming-days-off-container">
 
   <div class="component-header">
-    Mé nadcházející volno
+    {{'oncomingVacation.headline' | translate}}
   </div>
 
   <table class="table text-center table-hover">
     <thead class="thead-light">
       <tr>
-        <th>Typ volna</th>
-        <th>Datum</th>
-        <th>Od</th>
-        <th>Do</th>
-        <th>Status</th>
+        <th>{{'basic.vacationType' | translate}}</th>
+        <th>{{'basic.date' | translate}}</th>
+        <th>{{'basic.from' | translate}}</th>
+        <th>{{'basic.to' | translate}}</th>
+        <th>{{'oncomingVacation.status' | translate}}</th>
         <th></th>
       </tr>
     </thead>
     <tbody>
       <tr *ngFor="let vac of oncomingVacation">
         <td style="width:15%">
-          {{vac.type}}
+          {{vac.type | translate}}
         </td>
 
         <td style="width:15%">

webapp/src/app/oncoming-vacation/oncoming-vacation.module.ts

@@ -1 @@
-import { NgModule } from '@angular/core';
-import { OncomingVacationComponent } from './oncoming-vacation.component';
-import { BrowserModule } from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import {OncomingVacationComponent} from './oncoming-vacation.component';
+import {BrowserModule} from '@angular/platform-browser';
 import {MatButtonModule} from '@angular/material';
+import {TranslateModule} from '@ngx-translate/core';
+import {CommonModule} from '@angular/common';
 
 @NgModule({
-  declarations: [ OncomingVacationComponent ],
-  exports:      [ OncomingVacationComponent ],
-  imports:      [ BrowserModule, MatButtonModule ],
+  declarations: [OncomingVacationComponent ],
+  exports: [OncomingVacationComponent ],
+  imports: [BrowserModule, MatButtonModule, TranslateModule, CommonModule],
 })
 export class OncomingVacationModule {}

webapp/src/app/user-approval/user-approval.component.html

@@ -1 +1 @@
 <div class="user-approval-container">
 
   <div class="component-header">
-    Schvalování uživatelů
+    {{'userApproval.headline' | translate}}
   </div>
 
   <table class="table text-center table-hover">
     <thead class="thead-light">
     <tr>
-      <th style="width: 35%"> Jméno </th>
-      <th style="width: 35%"> Datum žádosti </th>
+      <th style="width: 35%">{{'basic.name' | translate}}</th>
+      <th style="width: 35%">{{'userApproval.requestDate' | translate}}</th>
       <th></th>
     </tr>
     </thead>

webapp/src/app/user-approval/user-approval.component.ts

@@ -1 +1 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {AuthorizationRequest, Requests} from '../models/requests.model';
+import {AuthorizationRequest} from '../models/requests.model';
+import {LocalizationService} from '../localization/localization.service';
 
 @Component({
   selector: 'app-user-approval',
@@ -11 +12 @@
   @Input() authorizationRequests: AuthorizationRequest[];
   @Output() userApprovalEvent = new EventEmitter<{requestId: number, approved: boolean}>();
 
-  constructor() { }
+  constructor(private localizationService: LocalizationService) { }
 
   private userApproved(reqId: number, isApproved: boolean) {
     this.userApprovalEvent.emit({requestId: reqId, approved: isApproved});

webapp/src/app/user-approval/user-approval.module.ts

@@ -2 +2 @@
 import { UserApprovalComponent } from './user-approval.component';
 import { BrowserModule } from '@angular/platform-browser';
 import {MatButtonModule} from '@angular/material';
+import {TranslateModule} from '@ngx-translate/core';
+import {CommonModule} from '@angular/common';
 
 @NgModule({
   declarations: [ UserApprovalComponent ],
   exports:      [ UserApprovalComponent ],
-  imports: [BrowserModule, MatButtonModule]
+  imports: [BrowserModule, MatButtonModule, TranslateModule, CommonModule]
 })
 export class UserApprovalModule { }

webapp/src/app/vacation-approval/vacation-approval.component.html

@@ -1 +1 @@
 <div class="days-off-approval-container">
 
   <div class="component-header">
-    Schvalování volna
+    {{'vacationApproval.headline' | translate}}
   </div>
 
   <table class="table text-center table-hover">
     <thead class="thead-light">
       <tr>
-        <th scope="col"> Jméno </th>
-        <th scope="col"> Požádáno </th>
-        <th scope="col"> Typ volna </th>
-        <th scope="col"> Datum </th>
-        <th scope="col"> Od </th>
-        <th scope="col"> Do </th>
+        <th scope="col"> {{'basic.name' | translate}}</th>
+        <th scope="col"> {{'vacationApproval.requestDate' | translate}}</th>
+        <th scope="col"> {{'basic.vacationType' | translate}} </th>
+        <th scope="col"> {{'basic.date' | translate}} </th>
+        <th scope="col"> {{'basic.from' | translate}} </th>
+        <th scope="col"> {{'basic.to' | translate}} </th>
         <th></th>
       </tr>
     </thead>
@@ -25 +25 @@
         {{request.timestamp | date:'yyyy/MM/dd HH:mm'}}
       </td>
       <td>
-        {{request.type}}
+        {{request.type | translate}}
       </td>
       <td>
         {{request.date | date:'yyyy/MM/dd'}}

webapp/src/app/vacation-approval/vacation-approval.module.ts

@@ -1 @@
-import { NgModule } from '@angular/core';
-import { VacationApprovalComponent } from './vacation-approval.component';
-import { BrowserModule } from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import {VacationApprovalComponent} from './vacation-approval.component';
+import {BrowserModule} from '@angular/platform-browser';
 import {MatButtonModule} from '@angular/material';
+import {TranslateModule} from '@ngx-translate/core';
+import {CommonModule} from '@angular/common';
 
 @NgModule({
-  declarations: [ VacationApprovalComponent ],
-  exports:      [ VacationApprovalComponent ],
-  imports: [BrowserModule, MatButtonModule]
+  declarations: [VacationApprovalComponent],
+  exports: [VacationApprovalComponent],
+  imports: [BrowserModule, MatButtonModule, TranslateModule, CommonModule]
 })
-export class VacationApprovalModule { }
+export class VacationApprovalModule {
+}

webapp/src/assets/i18n/cs.json

@@ -2 +2 @@
   "daysOffInfo": {
     "remaining": "Zbývající dovolená"
   },
+  "userApproval": {
+    "headline": "Schvalování uživatelů",
+    "requestDate": "Datum žádosti"
+  },
+  "vacationApproval": {
+    "headline": "Schválení volna",
+    "requestDate": "Datum žádosti"
+  },
   "vacationType": {
     "vacation": "Extra dovolená",
     "sickday": "Sickday"
-  }
+  },
+  "oncomingVacation": {
+    "headline": "Mé nadcházející volno",
+    "status": "Status"
+  },
+  "basic": {
+    "name": "Jméno",
+    "employees": "Zaměstnanci",
+    "vacation": "Dovolená",
+    "requested": "Požádáno",
+    "date": "Datum",
+    "from": "Od",
+    "to": "Do",
+    "vacationType": "Typ volna"
+  },
+  "dayShortName": {
+    "mon": "po",
+    "tue": "ut",
+    "wed": "st",
+    "thu": "ct",
+    "fri": "pa",
+    "sat": "so",
+    "sun": "ne"
+  },
+  "button": {
+    "confirm": "Potvrdit",
+    "close": "Zavřít"
+  },
+  "EMPLOYER": "Zaměstnavatel",
+  "EMPLOYEE": "Zaměstnanec",
+  "VACATION": "Dovolená",
+  "SICKDAY": "Sickday"
 }

webapp/src/assets/i18n/en.json

@@ -2 +2 @@
   "daysOffInfo": {
     "remaining": "Vacation remaining"
   },
+  "userApproval": {
+    "headline": "User approval",
+    "requestDate": "Date of request"
+  },
+  "vacationApproval": {
+    "headline": "Vacation approval",
+    "requestDate": "Date of request"
+  },
   "vacationType": {
     "vacation": "Extra vacation",
     "sickday": "Sickday"
-  }
+  },
+  "oncomingVacation": {
+    "headline": "My oncoming vacation",
+    "status": "Status"
+  },
+  "basic": {
+    "name": "Name",
+    "employees": "Employees",
+    "vacation": "Vacation days",
+    "date": "Date",
+    "from": "From",
+    "to": "To",
+    "vacationType": "Type"
+  },
+  "dayShortName" : {
+    "mon": "mon",
+    "tue": "tue",
+    "wed": "wed",
+    "thu": "thu",
+    "fri": "fri",
+    "sat": "sat",
+    "sun": "sun"
+  },
+  "button": {
+    "confirm": "Confirm",
+    "close": "Close"
+  },
+  "EMPLOYER": "Employer",
+  "EMPLOYEE": "Employee",
+  "VACATION": "Vacation",
+  "SICKDAY": "Sickday"
+
 }

webapp/yarn.lock

@@ -3098 +3098 @@
   dependencies:
     locate-path "^3.0.0"
 
+flag-icon-css@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/flag-icon-css/-/flag-icon-css-3.3.0.tgz#7772461e4480d3d86da5962f02120a2825688433"
+  integrity sha512-u5lCGVExrJJRykNGd//ZrBU5Bkt0LTZJFSuG+Az/pwcHgzDeFwomwFbsgVtI1aJd6ysyHsx+5UGrA+nhSGd4yw==
+
 flatpickr@^4.5.7:
   version "4.5.7"
   resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.5.7.tgz#6efc0d93c65547aa77294205c67830ebabe3565c"