Revize 696f3358

Re #7494 Components connected to API - except profile settings and add vacation components

webapp/src/app/add-days-off-dialog/add-days-off-dialog.component.html

@@ -1 @@
-<h1 mat-dialog-title>Výběr volna</h1>
-
-<div mat-dialog-content>
-  <div>
-    <label id="days-off-type-radio-group-label" class="dialog-label">Typ volna</label>
-    <mat-radio-group aria-labelledby="days-off-type-radio-group-label" class="days-off-type-radio-group" [(ngModel)]="selectedDaysOffType">
-      <mat-radio-button class="days-off-type-radio-button" *ngFor="let type of daysOffTypes" [value]="type" >
-        {{type}}
-      </mat-radio-button>
-    </mat-radio-group>
-  </div>
-
-  <div class="datetime-interval">
-    <div class="from-datetime">
-      <label for="from-datetime-input" class="dialog-label">Od:</label>
-      <div class="datetime-picker">
-        <mat-form-field>
-          <input id="from-datetime-input" matInput [matDatepicker]="startDatePicker" [(ngModel)]="data.fromDate">
-          <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #startDatePicker></mat-datepicker>
-        </mat-form-field>
-        <ngb-timepicker [(ngModel)]="data.fromTime" [minuteStep]="MINUTE_STEP"></ngb-timepicker>
-      </div>
-    </div>
-
-    <div class="to-datetime">
-      <label for="to-datetime-input" class="dialog-label">Do:</label>
-      <div class="datetime-picker">
-        <mat-form-field>
-          <input id="to-datetime-input" matInput [matDatepicker]="endDatePicker" [(ngModel)]="data.toDate">
-          <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #endDatePicker></mat-datepicker>
-        </mat-form-field>
-        <ngb-timepicker [(ngModel)]="data.toTime" [minuteStep]="MINUTE_STEP"></ngb-timepicker>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div mat-dialog-actions align="end">
-  <button mat-raised-button color="primary" (click)="onConfirmClick()">Potvrdit</button>
-  <button mat-raised-button color="basic" (click)="onCloseClick()">Zavřít</button>
-</div>

webapp/src/app/add-days-off-dialog/add-days-off-dialog.component.sass

@@ -1 @@
-.dialog-label
-  display: block
-  font-weight: bold
-
-.datetime-picker > *
-  display: table-cell
-
-.days-off-type-radio-group
-  display: flex
-  flex-direction: column
-  margin: 15px 0

webapp/src/app/add-days-off-dialog/add-days-off-dialog.component.ts

@@ -1 @@
-import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef, MatSnackBar } from '@angular/material';
-import { FormControl } from '@angular/forms';
-
-@Component({
-  selector: 'app-add-days-off-dialog',
-  templateUrl: './add-days-off-dialog.component.html',
-  styleUrls: ['./add-days-off-dialog.component.sass']
-})
-export class AddDaysOffDialogComponent {
-  MINUTE_STEP = 15;
-
-  selectedDaysOffType: string;
-  daysOffTypes: string[] = ['Sick-days', 'Extra dovolená'];
-
-  constructor(
-    public dialogRef: MatDialogRef<AddDaysOffDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: AddDaysOffDialogData,
-    private snackBar: MatSnackBar
-  ) {
-    if (this.data.toDate == null) {
-      this.data.toDate = this.data.fromDate;
-    }
-    if (this.data.fromTime == null) {
-      this.data.fromTime = {hour: 8, minute: 0};
-    }
-    if (data.toTime == null) {
-      this.data.toTime = {hour: 16, minute: 0};
-    }
-  }
-
-  onConfirmClick(): void {
-    // TODO lokalizace
-
-    if (this.selectedDaysOffType == null) {
-      this.snackBar.open('Nevybrán typ volna', 'Zavřít', { duration: 5000 });
-    } else if (this.data.fromDate > this.data.toDate) {
-      this.snackBar.open('Datum "od" nemůže být větší než "do"', 'Zavřít', { duration: 5000 });
-    } else {
-      // TODO API CALL
-      this.dialogRef.close();
-    }
-  }
-
-  onCloseClick(): void {
-    this.dialogRef.close();
-  }
-
-}
-
-export interface AddDaysOffDialogData {
-  fromDate: FormControl;
-  toDate: FormControl;
-  fromTime: { hour: number, minute: number };
-  toTime: { hour: number, minute: number };
-}

webapp/src/app/add-days-off-dialog/add-days-off-dialog.module.ts

@@ -1 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AddDaysOffDialogComponent } from './add-days-off-dialog.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import {
-  MatButtonModule,
-  MatDialogModule,
-  MatDatepickerModule,
-  MatNativeDateModule,
-  MatInputModule, MatRadioModule, MatSnackBarModule
-} from '@angular/material';
-import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {BrowserModule} from '@angular/platform-browser';
-
-@NgModule({
-  declarations: [AddDaysOffDialogComponent],
-  imports: [
-    CommonModule,
-    BrowserAnimationsModule,
-    MatButtonModule,
-    MatDialogModule,
-    NgbModule,
-    FormsModule,
-    MatDatepickerModule,
-    MatNativeDateModule,
-    ReactiveFormsModule,
-    BrowserModule,
-    MatInputModule,
-    MatRadioModule,
-    MatSnackBarModule
-  ],
-  exports: [
-    AddDaysOffDialogComponent
-  ],
-  entryComponents: [
-    AddDaysOffDialogComponent
-  ]
-})
-export class AddDaysOffDialogModule { }

webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.html

@@ +1 @@
+<h1 mat-dialog-title>Výběr volna</h1>
+
+<div mat-dialog-content>
+  <div>
+    <label id="vacation-type-radio-group-label" class="dialog-label">Typ volna: </label>
+    <mat-radio-group aria-labelledby="vacation-type-radio-group-label" class="vacation-type-radio-group" [(ngModel)]="selectedVacationType">
+      <mat-radio-button class="vacation-type-radio-button" [value]=vacationType.SICKDAY>
+        {{vacationType.SICKDAY}}
+      </mat-radio-button>
+      <mat-radio-button class="vacation-type-radio-button" [value]=vacationType.VACATION>
+        {{vacationType.VACATION}}
+      </mat-radio-button>
+    </mat-radio-group>
+  </div>
+
+  <div class="datetime-interval">
+    <div class="from-datetime">
+      <span class="datetime-interval-label">Od:</span>
+      <app-datetime [(date)]="data.fromDate" [(time)]="data.fromTime" [minuteStep]="MINUTE_STEP"></app-datetime>
+    </div>
+    <div class="to-datetime">
+      <span class="datetime-interval-label">Do:</span>
+      <app-datetime [(date)]="data.toDate" [(time)]="data.toTime" [minuteStep]="MINUTE_STEP"></app-datetime>
+    </div>
+  </div>
+</div>
+
+<div mat-dialog-actions align="end">
+  <button mat-raised-button color="primary" (click)="onConfirmClick()">Potvrdit</button>
+  <button mat-raised-button color="basic" (click)="onCloseClick()">Zavřít</button>
+</div>

webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.sass

@@ +1 @@
+.dialog-label
+  display: block
+  font-weight: bold
+
+.datetime-picker > *
+  display: table-cell
+
+.vacation-type-radio-group
+  display: flex
+  flex-direction: column
+  margin: 15px 0
+
+.datetime-interval-label
+  font-weight: bold
+  display: block

webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.ts

@@ +1 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef, MatSnackBar } from '@angular/material';
+import {VacationType} from '../enums/common.enum';
+
+@Component({
+  selector: 'app-add-days-off-dialog',
+  templateUrl: './add-vacation-dialog.component.html',
+  styleUrls: ['./add-vacation-dialog.component.sass']
+})
+export class AddVacationDialogComponent {
+  MINUTE_STEP = 15;
+
+  vacationType = VacationType;
+
+  selectedVacationType: VacationType;
+
+  constructor(
+    public dialogRef: MatDialogRef<AddVacationDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: AddVacationDialogData,
+    private snackBar: MatSnackBar
+  ) {
+    if (this.data.toDate == null) {
+      this.data.toDate = this.data.fromDate;
+    }
+    if (this.data.fromTime == null) {
+      this.data.fromTime = '08:00';
+    }
+    if (data.toTime == null) {
+      this.data.toTime = '16:00';
+    }
+  }
+
+  onConfirmClick(): void {
+    if (this.selectedVacationType == null) {
+      this.snackBar.open('Nevybrán typ volna', 'Zavřít', { duration: 5000 });
+    } else if (this.data.fromDate > this.data.toDate) {
+      this.snackBar.open('Datum "od" nemůže být větší než "do"', 'Zavřít', { duration: 5000 });
+    } else {
+      this.dialogRef.close({
+        isConfirmed: true,
+        vacationType: this.selectedVacationType,
+        fromDate: this.data.fromDate,
+        fromTime: this.data.fromTime,
+        toDate: this.data.toDate,
+        toTime: this.data.toTime
+      });
+    }
+  }
+
+  onCloseClick(): void {
+    this.dialogRef.close({
+      isConfirmed: false
+    });
+  }
+
+}
+
+export interface AddVacationDialogData {
+  fromDate: Date;
+  toDate: Date;
+  fromTime: string; // 'HH:mm' format
+  toTime: string; // 'HH:mm' format
+}

webapp/src/app/add-vacation-dialog/add-vacation-dialog.module.ts

@@ +1 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AddVacationDialogComponent } from './add-vacation-dialog.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  MatButtonModule,
+  MatDialogModule,
+  MatDatepickerModule,
+  MatNativeDateModule,
+  MatInputModule, MatRadioModule, MatSnackBarModule
+} from '@angular/material';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {SharedModule} from '../shared/shared.module';
+
+@NgModule({
+  declarations: [AddVacationDialogComponent],
+  imports: [
+    CommonModule,
+    BrowserAnimationsModule,
+    MatButtonModule,
+    MatDialogModule,
+    NgbModule,
+    FormsModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    ReactiveFormsModule,
+    BrowserModule,
+    MatInputModule,
+    MatRadioModule,
+    MatSnackBarModule,
+    SharedModule
+  ],
+  exports: [
+    AddVacationDialogComponent
+  ],
+  entryComponents: [
+    AddVacationDialogComponent
+  ]
+})
+export class AddVacationDialogModule { }

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

@@ -2 +2 @@
   <div class="row">
     <div class="col-lg-8 mid-panel">
 
-      <div class="employer-dashboard-user-approval" *ngIf="authorizationRequests && authorizationRequests.authorization.length > 0">
+      <div class="employer-dashboard-user-approval" *ngIf="authorizationRequests && authorizationRequests.length > 0">
         <app-user-approval
           [authorizationRequests]="authorizationRequests"
           (userApprovalEvent)="userApproved($event.requestId, $event.approved)"
         ></app-user-approval>
       </div>
 
-      <div class="employer-dashboard-days-off-approval" *ngIf="daysOffRequests && daysOffRequests.vacation.length > 0">
+      <div class="employer-dashboard-days-off-approval" *ngIf="vacationRequests && vacationRequests.length > 0">
         <app-days-off-approval
-          [daysOffRequests]="daysOffRequests"
-          (daysOffApprovalEvent)="daysOffApproved($event.requestId, $event.approved)"
+          [vacationRequests]="vacationRequests"
+          (vacationApprovalEvent)="vacationApproved($event.requestId, $event.approved)"
         ></app-days-off-approval>
       </div>
 
-<!--      TODO odkomentovat, až bude komponenta hotova -->
-<!--      <div class="employer-dashboard-coming-days-off">-->
-<!--        <app-coming-days-off></app-coming-days-off>-->
-<!--      </div>-->
+      <div class="employer-dashboard-coming-days-off" *ngIf="oncomingVacation && oncomingVacation.length > 0">
+        <app-coming-days-off
+          [oncomingVacation]="oncomingVacation"
+          (vacationEdit)="editVacation($event)"
+          (vacationRemove)="removeVacation($event)"
+        ></app-coming-days-off>
+      </div>
 
       <div class="employer-dashboard-day-picker">
-        <app-day-picker
+        <app-day-picker #dayPicker
           (selectedDate)="onDateSelect($event)"
-          (selectedMonth)="onMonthSelect($event)"
+          (selectedMonth)="onSelectedMonthChange($event)"
         ></app-day-picker>
       </div>
 
@@ -34 +37 @@
 
       <div class="days-off-info" *ngIf="profile">
         <app-days-off-info
-          [sickDaysRemaining]="profile.sickDay"
-          [extraVacationRemaining]="profile.vacation"
+          [sickDaysRemaining]="profile.sickdayCount"
+          [extraVacationRemaining]="profile.vacationCount"
         ></app-days-off-info>
       </div>
 

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

@@ -1 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {MatDialog} from '@angular/material';
-import {AddDaysOffDialogComponent} from '../../add-days-off-dialog/add-days-off-dialog.component';
+import {AddVacationDialogComponent} from '../../add-vacation-dialog/add-vacation-dialog.component';
 import {UsersService} from '../../services/api/users.service';
-import {Requests} from '../../models/requests.model';
+import {AuthorizationRequest, VacationRequest} from '../../models/requests.model';
 import {UserService} from '../../services/api/user.service';
-import {ProfileService} from '../../services/api/profile.service';
 import {UserProfile} from '../../models/user.model';
+import {LocalizationService} from '../../localization/localization.service';
+import {RequestStatus, RequestTypes} from '../../enums/common.enum';
+import {Calendar} from '../../models/calendar.model';
+import {DateToolsService} from '../../services/util/date-tools.service';
+import {EditVacationDialogComponent} from "../../edit-vacation-dialog/edit-vacation-dialog.component";
 
 @Component({
   selector: 'app-employer-dashboard',
@@ -13 +17 @@
   styleUrls: ['./employer-dashboard.component.sass']
 })
 export class EmployerDashboardComponent implements OnInit {
+  @ViewChild('dayPicker') calendar;
 
-  @Input() profile: UserProfile;
-  private authorizationRequests: Requests;
-  private daysOffRequests: Requests;
+  private profile: UserProfile;
+  private authorizationRequests: AuthorizationRequest[];
+  private vacationRequests: VacationRequest[];
+  private currentMonthVacation: Calendar[];
+  private oncomingVacation: Calendar[];
 
   constructor(
     public dialog: MatDialog,
-    private profileService: ProfileService,
-    // API
+    private localizationService: LocalizationService,
+    private dateToolsService: DateToolsService,
     private userService: UserService,
     private usersService: UsersService
   ) { }
 
   ngOnInit() {
-    // 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.loadProfile();
+    this.loadAuthorizationRequests();
+    this.loadVacationRequests();
+    this.loadMonthVacation(this.dateToolsService.toStartOfMonth(new Date()));
+    this.loadOncomingVacation();
   }
 
-  private userApproved(requestId: number, approved: boolean) {
-    // TODO api post call
-    this.authorizationRequests.authorization.splice(0, 1);
+  userApproved(requestId: number, approved: boolean) {
+    this.requestApproved(requestId, RequestTypes.AUTHORIZATION, approved)
+      .subscribe(e => this.loadAuthorizationRequests());
   }
 
-  private daysOffApproved(requestId: number, approved: boolean) {
-    // TODO api post call
-    this.daysOffRequests.vacation.splice(0, 1);
+  vacationApproved(requestId: number, approved: boolean) {
+    this.requestApproved(requestId, RequestTypes.VACATION, approved)
+      .subscribe(e => this.loadVacationRequests());
+  }
+
+  requestApproved(requestId: number, requestType: RequestTypes, approved: boolean) {
+    const request = {
+      id: requestId,
+      status: approved ? RequestStatus.ACCEPTED : RequestStatus.REJECTED
+    };
+
+    return this.userService.putUserRequestWithLanguage(request, requestType, this.localizationService.getCurrentLanguage());
+  }
+
+  removeVacation(vac: Calendar) {
+    this.userService.deleteCalendar(vac.id, this.localizationService.getCurrentLanguage())
+      .subscribe(e => this.loadOncomingVacation());
+  }
+
+  editVacation(vac: Calendar) {
+    // this.dialog.open(EditVacationDialogComponent, {
+    //   data: {
+    //     vacation: vac
+    //   }
+    // });
   }
 
   onDateSelect( date: Date ) {
-    this.dialog.open(AddDaysOffDialogComponent, {
-      data: {
-        fromDate: date
-      }
-    });
+    this.dialog
+      .open(AddVacationDialogComponent, {
+        data: {
+          fromDate: date
+        }
+      })
+      .afterClosed().subscribe(data => {
+        if (data && data.isConfirmed) {
+          // TODO
+        }
+      });
   }
 
-  onMonthSelect(month: number) {
-    // TODO API CALL
+  onSelectedMonthChange(monthStart: Date) {
+    this.loadMonthVacation(monthStart);
+  }
+
+  private loadProfile() {
+    this.userService.getLoggedUserProfile()
+      .subscribe((data: UserProfile) => this.profile = data);
+  }
+
+  private loadAuthorizationRequests() {
+    this.usersService.getAuthorizationRequestsWithLanguage(this.localizationService.getCurrentLanguage())
+      .subscribe((data: AuthorizationRequest[]) => this.authorizationRequests = data);
+  }
+
+  private loadVacationRequests() {
+    this.usersService.getVacationRequestsWithLanguage(this.localizationService.getCurrentLanguage())
+      .subscribe((data: VacationRequest[]) => this.vacationRequests = data);
+  }
+
+  private loadMonthVacation(month: Date) {
+    const fromDate = this.dateToolsService.toStartOfMonth(month);
+    const toDate = this.dateToolsService.toEndOfMonth(fromDate);
+
+    this.userService.getLoggedUserCalendarWithOptions(fromDate, toDate, this.localizationService.getCurrentLanguage(), RequestStatus.ACCEPTED)
+      .subscribe((data: Calendar[]) => {
+        if (data) {
+          this.calendar.setVacation(data);
+        }
+      });
+  }
+
+  private loadOncomingVacation() {
+    const fromDate = new Date();
+
+    this.userService.getLoggedUserCalendarWithOptions(fromDate, null, this.localizationService.getCurrentLanguage(), null)
+      .subscribe((data: Calendar[]) => this.oncomingVacation = data);
   }
 }

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

@@ -2 +2 @@
 import { CommonModule } from '@angular/common';
 import { EmployerDashboardComponent } from './employer-dashboard.component';
 import { DayPickerModule } from '../../day-picker/day-picker.module';
-import { DaysOffInfoModule } from '../../days-off-info/days-off-info.module';
+import { VacationInfoModule } from '../../vacation-info/vacation-info.module';
 import { UserApprovalModule } from '../../user-approval/user-approval.module';
-import { DaysOffApprovalModule } from '../../days-off-approval/days-off-approval.module';
-import { OncomingDaysOffModule } from '../../oncoming-days-off/oncoming-days-off.module';
+import { VacationApprovalModule } from '../../vacation-approval/vacation-approval.module';
+import { OncomingVacationModule } from '../../oncoming-vacation/oncoming-vacation.module';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {AddDaysOffDialogModule} from '../../add-days-off-dialog/add-days-off-dialog.module';
+import {AddVacationDialogModule} from '../../add-vacation-dialog/add-vacation-dialog.module';
 import {MatDialogModule} from '@angular/material';
+import {EditVacationDialogModule} from '../../edit-vacation-dialog/edit-vacation-dialog.module';
 
 @NgModule({
   declarations: [ EmployerDashboardComponent ],
@@ -16 +17 @@
   imports: [
     CommonModule,
     DayPickerModule,
-    DaysOffInfoModule,
+    VacationInfoModule,
     UserApprovalModule,
-    DaysOffApprovalModule,
+    VacationApprovalModule,
     DayPickerModule,
-    OncomingDaysOffModule,
+    OncomingVacationModule,
     BrowserAnimationsModule,
-    AddDaysOffDialogModule,
+    AddVacationDialogModule,
+    EditVacationDialogModule,
     MatDialogModule
   ]
 })

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

@@ -29 +29 @@
     </div>
   </div>
 
-  <!-- Refresh attribute for localization purposes (refresh component after change of language) -->
   <mwl-calendar-month-view
     [viewDate]="viewDate"
     [locale]="locale"
-    [refresh]="localizationService.currentLanguageSubject"
+    [refresh]="refresh"
     [events]="events"
     [cellTemplate]="customCellTemplate"
     (dayClicked)="dayClicked($event.day)"
@@ -51 +50 @@
         <i class="material-icons sickday" *ngIf="event.title == vacationType.SICKDAY">local_hospital</i>
         <i class="material-icons vacation" *ngIf="event.title == vacationType.VACATION">beach_access</i>
 
-        {{ event.start | date:'HH:mm' }} - {{ event.end | date:'HH:mm' }}
+        <span class="time-interval" *ngIf="event.title == vacationType.VACATION">
+          {{ event.start | date:'HH:mm' }} - {{ event.end | date:'HH:mm' }}
+        </span>
       </span>
   </ng-template>
 </div>

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

@@ -9 +9 @@
   line-height: 45px
   text-align: center
 
-
 .day-picker-month-selection
   margin-bottom: 10px
   button
@@ -18 +17 @@
   .change-month
     color: blue
 
-
-
 .vacation-type
   font-size: 10px
   .material-icons
@@ -28 +25 @@
     color: red
   .vacation
     color: blue
+  .time-interval
+    font-size: 10px

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

@@ -1 @@
-import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
-import { CalendarView, CalendarEvent } from 'angular-calendar';
+import {ChangeDetectionStrategy, Component, EventEmitter, Output} from '@angular/core';
+import {CalendarEvent, CalendarView} from 'angular-calendar';
 import {LocalizationService} from '../localization/localization.service';
 import {VacationType} from '../enums/common.enum';
+import {Calendar} from '../models/calendar.model';
+import {DateToolsService} from '../services/util/date-tools.service';
+import {Subject} from 'rxjs';
 
 @Component({
   selector: 'app-day-picker',
@@ -17 +20 @@
 
   private currentMonth: number;
 
+  private currentYear: number;
+
   // Type of calendar (constant)
   view: CalendarView = CalendarView.Month;
 
@@ -24 +29 @@
   private viewDate: Date;
 
   // Events which are shown in calendar (title = VacationType)
-  @Input() events: CalendarEvent[] = [];
+  private events: CalendarEvent[] = [];
 
   // EventEmitter informing about changes of selected date
   @Output() selectedDate = new EventEmitter<Date>();
 
-  // EventEmitter informing about changes of selected month
-  @Output() selectedMonth = new EventEmitter<number>();
+  // EventEmitter informing about changes of selected month (emits start of the selected month)
+  @Output() selectedMonth = new EventEmitter<Date>();
+
+  private refresh: Subject<any> = new Subject();
+
+  constructor(
+    private localizationService: LocalizationService,
+    private dateToolsService: DateToolsService) {
 
-  constructor(private localizationService: LocalizationService) {
     this.locale = localizationService.defaultLanguage;
     localizationService.currentLanguageSubject
       .subscribe((data) => {
@@ -41 +51 @@
 
     this.viewDate = new Date();
     this.currentMonth = this.viewDate.getMonth();
+    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());
+  }
+
+  public setVacation(vacations: Calendar[]) {
+    this.events = [];
+
+    for (const vac of vacations) {
+      this.events.push({
+        start: this.dateToolsService.toDate(vac.date, vac.from),
+        end: this.dateToolsService.toDate(vac.date, vac.to),
+        title: vac.type
+      });
+    }
+
+    this.refresh.next();
   }
 
   /**
@@ -56 +84 @@
 
   private setMonth(newMonth: number): void {
     this.currentMonth = newMonth % 12;
-    if (this.currentMonth < 0) {
+    if (newMonth < 0) {
       this.currentMonth = 11;
+      this.currentYear--;
+    } else if (newMonth > 11) {
+      this.currentMonth = 0;
+      this.currentYear++;
+    } else {
+      this.currentMonth = newMonth;
     }
-    this.selectedMonth.emit(this.currentMonth);
+
+    this.selectedMonth.emit(new Date(this.currentYear, this.currentMonth, 1, 0, 0, 0));
   }
 }

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

@@ -1 @@
-<div class="days-off-approval-container" *ngIf="daysOffRequests">
-
-  <div class="component-header">
-    Schvalování volna
-  </div>
-
-  <div class="days-off-approval-list">
-    <div class="row days-off-approval-header">
-      <div class="col-md-3"> Jméno </div>
-      <div class="col-md-3"> Typ volna </div>
-      <div class="col-md-2"> Datum </div>
-      <div class="col-md-1"> Od </div>
-      <div class="col-md-1"> Do </div>
-      <div class="col-md-2"></div>
-    </div>
-
-    <div class="row days-off-approval" *ngFor="let request of daysOffRequests.vacation">
-      <div class="col-md-3">
-        {{request.user.name.first}} {{request.user.name.last}}
-      </div>
-      <div class="col-md-3">
-        {{daysOffTypeToString(request.type)}}
-      </div>
-      <div class="col-md-2">
-        {{request.date | date:'yyyy/MM/dd'}}
-      </div>
-      <div class="col-md-1">
-        {{request.from}} <!-- TODO lepší formatting -->
-      </div>
-      <div class="col-md-1">
-        {{request.to}} <!-- TODO lepší formatting -->
-      </div>
-      <div class="col-md-2">
-        <div class="btn btn-success approve-btn" (click)="daysOffApprovalCompleted(request.id, true)">✓</div>
-        <div class="btn btn-danger reject-btn"   (click)="daysOffApprovalCompleted(request.id, false)">X</div>
-      </div>
-    </div>
-  </div>
-
-</div>

webapp/src/app/days-off-approval/days-off-approval.component.sass

@@ -1 @@
-@import '../../common-styles/basic-component'
-
-.days-off-approval-container
-  @extend .basic-component
-
-  .days-off-approval-header
-    padding: 10px
-    margin: 0
-    font-weight: bold
-
-  .days-off-approval
-    border-bottom: 1px solid gainsboro
-    margin: 0
-    padding: 10px
-    line-height: 35px
-
-    .approve-btn
-      margin-right: 2px

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

@@ -1 @@
-import { Component, EventEmitter, Output, Input } from '@angular/core';
-import {Requests} from '../models/requests.model'; // TODO
-import {VacationType} from '../enums/common.enum';
-
-@Component({
-  selector: 'app-days-off-approval',
-  templateUrl: './days-off-approval.component.html',
-  styleUrls: ['./days-off-approval.component.sass']
-})
-export class DaysOffApprovalComponent {
-
-  @Input() daysOffRequests: Requests;
-  @Output() daysOffApprovalEvent = new EventEmitter<{requestId: number, approved: boolean}>();
-
-  constructor() { }
-
-  daysOffApprovalCompleted(reqId: number, isApproved: boolean ) {
-    this.daysOffApprovalEvent.emit({requestId: reqId, approved: isApproved});
-  }
-
-  private daysOffTypeToString(vacationType: VacationType): string {
-    switch (vacationType) {
-      case VacationType.VACATION:
-        return 'Extra dovolená';
-      case VacationType.SICKDAY:
-        return 'Sickdays';
-    }
-  }
-}

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

@@ -1 @@
-import { NgModule } from '@angular/core';
-import { DaysOffApprovalComponent } from './days-off-approval.component';
-import { BrowserModule } from '@angular/platform-browser';
-
-@NgModule({
-  declarations: [ DaysOffApprovalComponent ],
-  exports:      [ DaysOffApprovalComponent ],
-  imports:      [ BrowserModule ]
-})
-export class DaysOffApprovalModule { }

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

@@ -1 @@
-<div class="days-off-info-container">
-
-  <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" 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" translate>vacationType.sickday</span>
-  </div>
-
-</div>

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

@@ -1 @@
-@import '../../common-styles/basic-component'
-
-.days-off-info-container
-  @extend .basic-component
-
-.days-off-type-container
-  border-bottom: 1px solid gainsboro
-  padding-left: 20px
-
-.days-off-remaining
-  color: green
-  font-size: 30px
-  font-weight: bold
-
-.days-off-type
-  color: black
-  font-weight: bold
-  display: block

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

@@ -1 @@
-import { Component, Input } from '@angular/core';
-import {TimeUnit} from '../enums/common.enum';
-import {LocalizationService} from '../localization/localization.service';
-
-@Component({
-  selector: 'app-days-off-info',
-  templateUrl: './days-off-info.component.html',
-  styleUrls: ['./days-off-info.component.sass']
-})
-export class DaysOffInfoComponent {
-
-  @Input() sickDaysRemaining: {
-    value: number;
-    unit: TimeUnit;
-  };
-
-  @Input() extraVacationRemaining: {
-    value: number;
-    unit: TimeUnit;
-  };
-
-  constructor(private localizationService: LocalizationService) { }
-}

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

@@ -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 ]
-})
-export class DaysOffInfoModule { }

webapp/src/app/edit-vacation-dialog/edit-vacation-dialog.component.html

@@ +1 @@
+<h1 mat-dialog-title>Úprava volna</h1>
+
+<div mat-dialog-content>
+  <div>
+    <label id="days-off-type-radio-group-label" class="dialog-label">Typ volna</label>
+    <mat-radio-group aria-labelledby="days-off-type-radio-group-label" class="days-off-type-radio-group" [(ngModel)]="selectedVacationType">
+      <mat-radio-button class="days-off-type-radio-button" *ngFor="let type of vacationTypes" [value]="type" >
+        {{type}}
+      </mat-radio-button>
+    </mat-radio-group>
+  </div>
+
+  <div class="datetime-interval">
+    <div class="from-datetime">
+      <label for="from-datetime-input" class="dialog-label">Od:</label>
+      <div class="datetime-picker">
+        <mat-form-field>
+          <input id="from-datetime-input" matInput [matDatepicker]="startDatePicker" [(ngModel)]="data.fromDate">
+          <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #startDatePicker></mat-datepicker>
+        </mat-form-field>
+        <ngb-timepicker [(ngModel)]="data.fromTime" [minuteStep]="MINUTE_STEP"></ngb-timepicker>
+      </div>
+    </div>
+
+    <div class="to-datetime">
+      <label for="to-datetime-input" class="dialog-label">Do:</label>
+      <div class="datetime-picker">
+        <mat-form-field>
+          <input id="to-datetime-input" matInput [matDatepicker]="endDatePicker" [(ngModel)]="data.toDate">
+          <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #endDatePicker></mat-datepicker>
+        </mat-form-field>
+        <ngb-timepicker [(ngModel)]="data.toTime" [minuteStep]="MINUTE_STEP"></ngb-timepicker>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div mat-dialog-actions align="end">
+  <button mat-raised-button color="primary" (click)="onConfirmClick()">Potvrdit</button>
+  <button mat-raised-button color="basic" (click)="onCloseClick()">Zavřít</button>
+</div>

webapp/src/app/edit-vacation-dialog/edit-vacation-dialog.component.sass

@@ +1 @@
+.dialog-label
+  display: block
+  font-weight: bold
+
+.datetime-picker > *
+  display: table-cell
+
+.days-off-type-radio-group
+  display: flex
+  flex-direction: column
+  margin: 15px 0

webapp/src/app/edit-vacation-dialog/edit-vacation-dialog.component.ts

@@ +1 @@
+import {Component, Inject, Output} from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef, MatSnackBar } from '@angular/material';
+import { FormControl } from '@angular/forms';
+import {Calendar} from '../models/calendar.model';
+
+@Component({
+  selector: 'app-edit-days-off-dialog',
+  templateUrl: './edit-vacation-dialog.component.html',
+  styleUrls: ['./edit-vacation-dialog.component.sass']
+})
+export class EditVacationDialogComponent {
+  MINUTE_STEP = 15;
+
+  constructor(
+    public dialogRef: MatDialogRef<EditVacationDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: EditVacationDialogData,
+    private snackBar: MatSnackBar
+  ) {
+  }
+
+  onConfirmClick(): void {
+    this.dialogRef.close({
+      edited: true,
+      date: this.data.vacation.date,
+      from: this.data.vacation.from,
+      to: this.data.vacation.to
+    });
+  }
+
+  onCloseClick(): void {
+    this.dialogRef.close({
+        edited: false
+      }
+    );
+  }
+}
+
+export interface EditVacationDialogData {
+  vacation: Calendar;
+}

webapp/src/app/edit-vacation-dialog/edit-vacation-dialog.module.ts

@@ +1 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  MatButtonModule,
+  MatDialogModule,
+  MatDatepickerModule,
+  MatNativeDateModule,
+  MatInputModule, MatRadioModule, MatSnackBarModule
+} from '@angular/material';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {EditVacationDialogComponent} from './edit-vacation-dialog.component';
+
+@NgModule({
+  declarations: [EditVacationDialogComponent],
+  imports: [
+    CommonModule,
+    BrowserAnimationsModule,
+    MatButtonModule,
+    MatDialogModule,
+    NgbModule,
+    FormsModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    ReactiveFormsModule,
+    BrowserModule,
+    MatInputModule,
+    MatRadioModule,
+    MatSnackBarModule
+  ],
+  exports: [
+    EditVacationDialogComponent
+  ],
+  entryComponents: [
+    EditVacationDialogComponent
+  ]
+})
+export class EditVacationDialogModule { }

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

@@ -121 +121 @@
             .afterClosed().subscribe(data => {
             if (data && data.isConfirmed) {
               this.settingsService.postDefaultSettingsWithLanguage(this.toSettings(data), this.localizationService.getCurrentLanguage())
-                .subscribe((foo: any) => console.log(foo));
+                .subscribe();
             }
           });
         },

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

@@ -5 +5 @@
     <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>
+      <span *ngIf="profile" class="user-name">{{profile.firstName}} {{profile.lastName}}</span>
     </button>
   </div>
 </div>

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

@@ -1 +1 @@
 import { Component, Input } from '@angular/core';
 import { MatDialog } from '@angular/material';
 import { ProfileSettingsComponent } from '../profile-settings/profile-settings.component';
-import { ProfileService } from '../services/api/profile.service';
 import {LocalizationService} from '../localization/localization.service';
+import {UserService} from '../services/api/user.service';
+import {UserProfile} from '../models/user.model';
 
 @Component({
   selector: 'app-header',
@@ -10 +11 @@
   styleUrls: ['./header.component.sass']
 })
 export class HeaderComponent {
-  @Input() name = 'John Doe';
-
-  private notificationSettings: Date;
+  profile: UserProfile;
 
   constructor(
     private dialog: MatDialog,
-    private profileService: ProfileService,
-    private localizationService: LocalizationService
+    private localizationService: LocalizationService,
+    private userService: UserService
     ) {
-    // profileService.getProfile()
-    //   .subscribe((data: UserProfile) => this.notificationSettings = new Date(data.settings.notification));
+    userService.getLoggedUserProfile()
+      .subscribe((data: UserProfile) => this.profile = data);
   }
 
   onProfileClick(): void {
-    this.dialog.open(ProfileSettingsComponent, {
-      data: {
-        shouldNotify: this.notificationSettings, // TODO potřeba?
-        notifyDate: this.notificationSettings,
-        notifyTime: {
-          hour: this.notificationSettings.getHours(),
-          minute: this.notificationSettings.getMinutes()
-        }
-      }
-    });
+    // TODO (až bude hotovej endpoint na post notifikace)
+    // this.dialog.open(ProfileSettingsComponent, {
+    //   data: {
+    //     notifyDate: this.notificationSettings,
+    //     notifyTime: {
+    //       hour: this.notificationSettings.getHours(),
+    //       minute: this.notificationSettings.getMinutes()
+    //     }
+    //   }
+    // });
   }
 }

webapp/src/app/models/calendar.model.ts

@@ -4 +4 @@
 export interface Calendar {
   id: number;
   date: string;
-  from: Time;
-  to: Time;
+  from: string;
+  to: string;
   type: VacationType;
   status: RequestStatus;
 }

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

@@ -1 @@
-<div class="oncoming-days-off-container">
-
-  <div class="component-header">
-    Mé nadcházející volno
-  </div>
-
-  <div class="tasks-list">
-    <div class="row oncoming-days-off-header">
-      <div class="col-md-6">
-        Typ volna
-      </div>
-
-      <div class="col-md-2">
-        Od
-      </div>
-
-      <div class="col-md-2">
-        Do
-      </div>
-
-      <div class="col-md-2">
-      </div>
-    </div>
-
-<!--    <div class="row oncoming-days-off" *ngFor="let daysOff of oncomingDaysOff">-->
-<!--      <div class="col-md-6">-->
-<!--        {{offDayTypeToString(daysOff.type)}}-->
-<!--      </div>-->
-
-<!--      <div class="col-md-2">-->
-<!--        {{daysOff.dateFrom | date:'yyyy/MM/dd'}}-->
-<!--      </div>-->
-
-<!--      <div class="col-md-2">-->
-<!--        {{daysOff.dateTo | date:'yyyy/MM/dd'}}-->
-<!--      </div>-->
-
-<!--      <div class="col-md-2">-->
-<!--        <div class="btn btn-danger reject-btn" (click)="daysOffRemoved(daysOff)">X</div>-->
-<!--      </div>-->
-<!--    </div>-->
-  </div>
-
-</div>

webapp/src/app/oncoming-days-off/oncoming-days-off.component.sass

@@ -1 @@
-@import '../../common-styles/basic-component'
-
-.oncoming-days-off-container
-  @extend .basic-component
-
-  .oncoming-days-off-header
-    padding: 10px
-    margin: 0
-    font-weight: bold
-
-  .oncoming-days-off
-    border-bottom: 1px solid gainsboro
-    margin: 0
-    padding: 10px
-    line-height: 35px
-
-    .approve-btn
-      margin-right: 2px

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

@@ -1 @@
-import {Component, OnInit} from '@angular/core';
-import {UserService} from '../services/api/user.service';
-import {VacationType} from '../enums/common.enum';
-
-@Component({
-  selector: 'app-coming-days-off',
-  templateUrl: './oncoming-days-off.component.html',
-  styleUrls: ['./oncoming-days-off.component.sass']
-})
-export class OncomingDaysOffComponent implements OnInit {
-
-  constructor(
-    private userService: UserService
-  ) { }
-
-  ngOnInit() {
-    // TODO api call na získání nadcházejících voln
-  }
-
-  private daysOffRemoved( daysOffId: number ) {
-    // TODO api call na odstranění nadcházejícího volna
-  }
-
-  // TODO možná zbytečný - bude api call na získání nadcházejících voln
-  // private calculateComingDaysOff(): DaysOff[] {
-  //   let oncomingDaysOff: DaysOff[] = [];
-  //
-  //   const today = new Date();
-  //   this.daysOff.forEach((dayOff) => {
-  //     if (dayOff.dateTo >= today) {
-  //       oncomingDaysOff.push(dayOff);
-  //     }
-  //   });
-  //
-  //   return oncomingDaysOff;
-  // }
-
-  // TODO
-  //  days-off-approval duplicate
-  private daysOffTypeToString(vacationType: VacationType): string {
-    switch (vacationType) {
-      case VacationType.VACATION:
-        return 'Extra dovolená';
-      case VacationType.SICKDAY:
-        return 'Sickdays';
-    }
-  }
-}

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

@@ -1 @@
-import { NgModule } from '@angular/core';
-import { OncomingDaysOffComponent } from './oncoming-days-off.component';
-import { BrowserModule } from '@angular/platform-browser';
-
-@NgModule({
-  declarations: [ OncomingDaysOffComponent ],
-  exports:      [ OncomingDaysOffComponent ],
-  imports:      [ BrowserModule ],
-})
-export class OncomingDaysOffModule {}

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

@@ +1 @@
+<div class="oncoming-days-off-container">
+
+  <div class="component-header">
+    Mé nadcházející volno
+  </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></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let vac of oncomingVacation">
+        <td style="width:15%">
+          {{vac.type}}
+        </td>
+
+        <td style="width:15%">
+          {{vac.date}}
+        </td>
+
+        <td style="width:15%">
+          {{vac.from}}
+        </td>
+
+        <td style="width:15%">
+          {{vac.to}}
+        </td>
+
+        <td style="width:15%">
+          {{vac.status}}
+        </td>
+
+        <td class="buttons">
+<!--          <button mat-icon-button (click)="vacationEdit.emit(vac)">-->
+<!--            <i class="material-icons edit-btn">edit</i>-->
+<!--          </button>-->
+          <button mat-icon-button (click)="vacationRemove.emit(vac)">
+            <i class="material-icons remove-btn">delete</i>
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+</div>

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

@@ +1 @@
+@import '../../common-styles/basic-component'
+
+.oncoming-days-off-container
+  @extend .basic-component
+
+  table
+    margin-top: 10px
+
+    td
+      text-align: center
+      vertical-align: middle
+
+    .buttons
+      text-align: right
+      padding-right: 50px
+
+    button
+      outline: none
+
+    .edit-btn
+      font-size: 18px
+      margin-right: 2px
+      color: orange
+
+    .remove-btn
+      color: grey

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

@@ +1 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Calendar} from '../models/calendar.model';
+
+@Component({
+  selector: 'app-coming-days-off',
+  templateUrl: './oncoming-vacation.component.html',
+  styleUrls: ['./oncoming-vacation.component.sass']
+})
+export class OncomingVacationComponent implements OnInit {
+
+  @Input() oncomingVacation: Calendar[];
+
+  @Output() vacationRemove = new EventEmitter<Calendar>();
+
+  @Output() vacationEdit = new EventEmitter<Calendar>();
+
+  constructor() { }
+
+  ngOnInit() { }