Revize 3bcb12a4

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

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

@@ -1 +1 @@
 <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 +12 @@
       </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>

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

@@ -1 +1 @@
 .dialog-label
   display: block
   font-weight: bold
+  color: grey
 
 .datetime-picker > *
   display: table-cell
@@ -10 +11 @@
   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

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 {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 +16 @@
 
   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 +70 @@
 }
 
 export interface AddVacationDialogData {
-  fromDate: Date;
-  toDate: Date;
+  date: Date;
   fromTime: string; // 'HH:mm' format
   toTime: string; // 'HH:mm' format
 }

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

@@ -13 +13 @@
 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 +32 @@
     MatInputModule,
     MatRadioModule,
     MatSnackBarModule,
-    SharedModule
+    SharedModule,
+    NgxMaterialTimepickerModule
   ],
   exports: [
     AddVacationDialogComponent

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

@@ -23 +23 @@
   private vacationRequests: VacationRequest[];
   private oncomingVacation: Calendar[];
 
+  private selectedMonth: Date;
   constructor(
     public dialog: MatDialog,
     private localizationService: LocalizationService,
@@ -32 +33 @@
   ) { }
 
   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 +78 @@
     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);
   }
 

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

@@ -9 +9 @@
   status: RequestStatus;
 }
 
-
 export interface PostCalendar {
   date: string;
   from: string;

webapp/src/app/services/api/user.service.ts

@@ -221 +221 @@
       );
   }
 
-
   /**
    * Změna nastavení uživatele podle id
    * PUT /user/settings?[lang=<CZ,EN>]

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

@@ -7 +7 @@
   <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>