commit 3bcb12a41ba3d265cd88cce6d74e1ce1154e0b74
Author: Václav Jirák <jirakv95@gmail.com>
Date:   Thu May 30 09:44:37 2019 +0200

    Re #7532 'Add vacation component' connected to the api

diff --git a/webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.html b/webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.html
index 9fbcad6..ba3b03c 100644
--- a/webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.html
+++ b/webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.html
@@ -1,7 +1,7 @@
 <h1 mat-dialog-title>Výběr volna</h1>
 
 <div mat-dialog-content>
-  <div>
+  <div class="vacation-selection-container">
     <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>
@@ -12,15 +12,32 @@
       </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 class="datetime-selection-container">
+    <div class="date-selection">
+      <span class="dialog-label">Datum:</span>
+      <mat-form-field class="date-input">
+        <input id="date-input" matInput [matDatepicker]="datePicker" [(ngModel)]="data.date">
+        <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
+        <mat-datepicker #datePicker></mat-datepicker>
+      </mat-form-field>
     </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 class="datetime-interval" *ngIf="selectedVacationType == vacationType.VACATION">
+      <div class="from-time">
+        <span class="dialog-label">Od:</span>
+        <div class="time-input-container">
+          <input class="time-input" [format]="24" [value]="data.fromTime" [ngxTimepicker]="fromTimePicker">
+          <ngx-material-timepicker [minutesGap]="MINUTE_STEP" (timeSet)="data.fromTime = $event" #fromTimePicker></ngx-material-timepicker>
+          <i class="material-icons">access_time</i>
+        </div>
+      </div>
+      <div class="to-time">
+        <span class="dialog-label">Do:</span>
+        <div class="time-input-container">
+          <input class="time-input" [format]="24" [value]="data.toTime" [ngxTimepicker]="toTimePicker">
+          <ngx-material-timepicker [minutesGap]="MINUTE_STEP" (timeSet)="data.toTime = $event" #toTimePicker></ngx-material-timepicker>
+          <i class="material-icons">access_time</i>
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.sass b/webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.sass
index 8ddde25..3c695cf 100644
--- a/webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.sass
+++ b/webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.sass
@@ -1,6 +1,7 @@
 .dialog-label
   display: block
   font-weight: bold
+  color: grey
 
 .datetime-picker > *
   display: table-cell
@@ -10,6 +11,31 @@
   flex-direction: column
   margin: 15px 0
 
-.datetime-interval-label
-  font-weight: bold
-  display: block
+.date-input
+  width: 200px
+
+.from-time
+  display: inline-block
+
+.to-time
+  display: inline-block
+  margin-left: 3px
+
+.datetime-selection-container
+  margin-bottom: 10px
+
+.time-input-container
+  display: inline-block
+  padding: 2px
+  border-bottom: 1px solid grey
+
+  .time-input
+    background-color: transparent
+    border: 0
+    outline: none
+    width: 85px
+
+  .material-icons
+    font-size: 12px
+    font-weight: bold
+    color: grey
diff --git a/webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.ts b/webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.ts
index c28cd35..7d3267c 100644
--- a/webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.ts
+++ b/webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.ts
@@ -1,6 +1,8 @@
-import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef, MatSnackBar } from '@angular/material';
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef, MatSnackBar} from '@angular/material';
 import {VacationType} from '../enums/common.enum';
+import {FormControl} from '@angular/forms';
+import {DateFormatterService} from '../services/util/date-formatter.service';
 
 @Component({
   selector: 'app-add-days-off-dialog',
@@ -14,36 +16,48 @@ export class AddVacationDialogComponent {
 
   selectedVacationType: VacationType;
 
+  dateFormControl: FormControl = new FormControl();
+
   constructor(
     public dialogRef: MatDialogRef<AddVacationDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: AddVacationDialogData,
-    private snackBar: MatSnackBar
+    private snackBar: MatSnackBar,
+    private dateFormatterService: DateFormatterService
   ) {
-    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';
     }
+
+    this.dateFormControl.setValue(data.date);
   }
 
   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
-      });
+      let data;
+      const formattedDate = this.dateFormatterService.formatDate(this.data.date);
+
+      if (this.selectedVacationType === VacationType.VACATION) {
+        data = {
+          isConfirmed: true,
+          vacationType: this.selectedVacationType,
+          date: formattedDate,
+          fromTime: this.data.fromTime,
+          toTime: this.data.toTime
+        };
+      } else {
+        data = {
+          isConfirmed: true,
+          vacationType: this.selectedVacationType,
+          date: formattedDate
+        };
+      }
+
+      this.dialogRef.close(data);
     }
   }
 
@@ -56,8 +70,7 @@ export class AddVacationDialogComponent {
 }
 
 export interface AddVacationDialogData {
-  fromDate: Date;
-  toDate: Date;
+  date: Date;
   fromTime: string; // 'HH:mm' format
   toTime: string; // 'HH:mm' format
 }
diff --git a/webapp/src/app/add-vacation-dialog/add-vacation-dialog.module.ts b/webapp/src/app/add-vacation-dialog/add-vacation-dialog.module.ts
index 094ebba..3b012be 100644
--- a/webapp/src/app/add-vacation-dialog/add-vacation-dialog.module.ts
+++ b/webapp/src/app/add-vacation-dialog/add-vacation-dialog.module.ts
@@ -13,6 +13,8 @@ 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';
+import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
+
 
 @NgModule({
   declarations: [AddVacationDialogComponent],
@@ -30,7 +32,8 @@ import {SharedModule} from '../shared/shared.module';
     MatInputModule,
     MatRadioModule,
     MatSnackBarModule,
-    SharedModule
+    SharedModule,
+    NgxMaterialTimepickerModule
   ],
   exports: [
     AddVacationDialogComponent
diff --git a/webapp/src/app/dashboard/employer-dashboard/employer-dashboard.component.ts b/webapp/src/app/dashboard/employer-dashboard/employer-dashboard.component.ts
index 1f78db3..4e153b6 100644
--- a/webapp/src/app/dashboard/employer-dashboard/employer-dashboard.component.ts
+++ b/webapp/src/app/dashboard/employer-dashboard/employer-dashboard.component.ts
@@ -23,6 +23,7 @@ export class EmployerDashboardComponent implements OnInit {
   private vacationRequests: VacationRequest[];
   private oncomingVacation: Calendar[];
 
+  private selectedMonth: Date;
   constructor(
     public dialog: MatDialog,
     private localizationService: LocalizationService,
@@ -32,10 +33,12 @@ export class EmployerDashboardComponent implements OnInit {
   ) { }
 
   ngOnInit() {
+    this.selectedMonth = this.dateToolsService.toStartOfMonth(new Date());
+
     this.loadProfile();
     this.loadAuthorizationRequests();
     this.loadVacationRequests();
-    this.loadMonthVacation(this.dateToolsService.toStartOfMonth(new Date()));
+    this.loadMonthVacation(this.selectedMonth);
     this.loadOncomingVacation();
   }
 
@@ -75,17 +78,26 @@ export class EmployerDashboardComponent implements OnInit {
     this.dialog
       .open(AddVacationDialogComponent, {
         data: {
-          fromDate: date
+          date
         }
       })
       .afterClosed().subscribe(data => {
         if (data && data.isConfirmed) {
-          // TODO
+          this.userService.postCalendarWithLanguage(
+            {
+              date: data.date,
+              from: data.fromTime,
+              to: data.toTime,
+              type: data.vacationType
+            },
+            this.localizationService.getCurrentLanguage()
+          ).subscribe(() => this.loadMonthVacation(this.selectedMonth));
         }
       });
   }
 
   onSelectedMonthChange(monthStart: Date) {
+    this.selectedMonth = monthStart;
     this.loadMonthVacation(monthStart);
   }
 
diff --git a/webapp/src/app/models/calendar.model.ts b/webapp/src/app/models/calendar.model.ts
index 2a01b9a..f87c87c 100644
--- a/webapp/src/app/models/calendar.model.ts
+++ b/webapp/src/app/models/calendar.model.ts
@@ -9,7 +9,6 @@ export interface Calendar {
   status: RequestStatus;
 }
 
-
 export interface PostCalendar {
   date: string;
   from: string;
diff --git a/webapp/src/app/services/api/user.service.ts b/webapp/src/app/services/api/user.service.ts
index 1d55d7d..6bf8c7f 100644
--- a/webapp/src/app/services/api/user.service.ts
+++ b/webapp/src/app/services/api/user.service.ts
@@ -221,7 +221,6 @@ export class UserService extends BasicService { // dost podobny k usersService,
       );
   }
 
-
   /**
    * Změna nastavení uživatele podle id
    * PUT /user/settings?[lang=<CZ,EN>]
diff --git a/webapp/src/app/user-approval/user-approval.component.html b/webapp/src/app/user-approval/user-approval.component.html
index ba5c2f6..519fbf8 100644
--- a/webapp/src/app/user-approval/user-approval.component.html
+++ b/webapp/src/app/user-approval/user-approval.component.html
@@ -7,8 +7,8 @@
   <table class="table text-center table-hover">
     <thead class="thead-light">
     <tr>
-      <th style="width: 40%"> Jméno </th>
-      <th style="width: 40%"> Datum žádosti </th>
+      <th style="width: 35%"> Jméno </th>
+      <th style="width: 35%"> Datum žádosti </th>
       <th></th>
     </tr>
     </thead>
