Revize 558c8d57

Frontend refactored

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

@@ -1 @@
-<h1 mat-dialog-title>{{ 'addVacation.headline' | translate }}</h1>
-
-<div mat-dialog-content>
-  <div class="vacation-selection-container">
-    <label id="vacation-type-radio-group-label" class="dialog-label">{{ 'basic.vacationType' | translate }}</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 | translate }}
-      </mat-radio-button>
-      <mat-radio-button class="vacation-type-radio-button" [value]=vacationType.VACATION>
-        {{ vacationType.VACATION | translate }}
-      </mat-radio-button>
-    </mat-radio-group>
-  </div>
-  <div class="datetime-selection-container">
-    <div class="date-selection">
-      <span class="dialog-label">{{ 'basic.date' | translate }}</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="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>
-
-<div mat-dialog-actions align="end">
-  <button mat-raised-button color="primary" (click)="onConfirmClick()">{{ 'button.confirm' | translate }}</button>
-  <button mat-raised-button color="basic" (click)="onCloseClick()">{{ 'button.close' | translate }}</button>
-</div>

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

@@ -1 @@
-.dialog-label
-  display: block
-  font-weight: bold
-  color: grey
-
-.datetime-picker > *
-  display: table-cell
-
-.vacation-type-radio-group
-  display: flex
-  flex-direction: column
-  margin: 15px 0
-
-.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 {VacationType} from '../enums/common.enum';
-import {FormControl} from '@angular/forms';
-import {DateFormatterService} from '../services/util/date-formatter.service';
-import {TranslateService} from '@ngx-translate/core';
-
-@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;
-
-  dateFormControl: FormControl = new FormControl();
-
-  constructor(
-    public dialogRef: MatDialogRef<AddVacationDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: AddVacationDialogData,
-    private snackBar: MatSnackBar,
-    private dateFormatterService: DateFormatterService,
-    private translateService: TranslateService
-  ) {
-    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.translateService.get('error.vacationTypeNotSelected').subscribe((res: string) => {
-        this.snackBar.open(res, 'X', { duration: 5000 });
-      });
-    } else {
-      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);
-    }
-  }
-
-  onCloseClick(): void {
-    this.dialogRef.close({
-      isConfirmed: false
-    });
-  }
-
-}
-
-export interface AddVacationDialogData {
-  date: 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';
-import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
-import {TranslateModule} from '@ngx-translate/core';
-
-
-@NgModule({
-  declarations: [AddVacationDialogComponent],
-  imports: [
-    CommonModule,
-    BrowserAnimationsModule,
-    MatButtonModule,
-    MatDialogModule,
-    NgbModule,
-    FormsModule,
-    MatDatepickerModule,
-    MatNativeDateModule,
-    ReactiveFormsModule,
-    BrowserModule,
-    MatInputModule,
-    MatRadioModule,
-    MatSnackBarModule,
-    SharedModule,
-    NgxMaterialTimepickerModule,
-    TranslateModule
-  ],
-  exports: [
-    AddVacationDialogComponent
-  ],
-  entryComponents: [
-    AddVacationDialogComponent
-  ]
-})
-export class AddVacationDialogModule { }

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

@@ +1 @@
+<h1 mat-dialog-title>{{ 'addVacation.headline' | translate }}</h1>
+
+<div mat-dialog-content>
+  <div class="vacation-selection-container">
+    <label id="vacation-type-radio-group-label" class="dialog-label">{{ 'basic.vacationType' | translate }}</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 | translate }}
+      </mat-radio-button>
+      <mat-radio-button class="vacation-type-radio-button" [value]=vacationType.VACATION>
+        {{ vacationType.VACATION | translate }}
+      </mat-radio-button>
+    </mat-radio-group>
+  </div>
+  <div class="datetime-selection-container">
+    <div class="date-selection">
+      <span class="dialog-label">{{ 'basic.date' | translate }}</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="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>
+
+<div mat-dialog-actions align="end">
+  <button mat-raised-button color="primary" (click)="onConfirmClick()">{{ 'button.confirm' | translate }}</button>
+  <button mat-raised-button color="basic" (click)="onCloseClick()">{{ 'button.close' | translate }}</button>
+</div>

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

@@ +1 @@
+.dialog-label
+  display: block
+  font-weight: bold
+  color: grey
+
+.datetime-picker > *
+  display: table-cell
+
+.vacation-type-radio-group
+  display: flex
+  flex-direction: column
+  margin: 15px 0
+
+.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/dashboard/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';
+import {FormControl} from '@angular/forms';
+import {DateFormatterService} from '../../services/util/date-formatter.service';
+import {TranslateService} from '@ngx-translate/core';
+
+@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;
+
+  dateFormControl: FormControl = new FormControl();
+
+  constructor(
+    public dialogRef: MatDialogRef<AddVacationDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: AddVacationDialogData,
+    private snackBar: MatSnackBar,
+    private dateFormatterService: DateFormatterService,
+    private translateService: TranslateService
+  ) {
+    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.translateService.get('error.vacationTypeNotSelected').subscribe((res: string) => {
+        this.snackBar.open(res, 'X', { duration: 5000 });
+      });
+    } else {
+      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);
+    }
+  }
+
+  onCloseClick(): void {
+    this.dialogRef.close({
+      isConfirmed: false
+    });
+  }
+
+}
+
+export interface AddVacationDialogData {
+  date: Date;
+  fromTime: string; // 'HH:mm' format
+  toTime: string; // 'HH:mm' format
+}

webapp/src/app/dashboard/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';
+import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
+import {TranslateModule} from '@ngx-translate/core';
+
+
+@NgModule({
+  declarations: [AddVacationDialogComponent],
+  imports: [
+    CommonModule,
+    BrowserAnimationsModule,
+    MatButtonModule,
+    MatDialogModule,
+    NgbModule,
+    FormsModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    ReactiveFormsModule,
+    BrowserModule,
+    MatInputModule,
+    MatRadioModule,
+    MatSnackBarModule,
+    SharedModule,
+    NgxMaterialTimepickerModule,
+    TranslateModule
+  ],
+  exports: [
+    AddVacationDialogComponent
+  ],
+  entryComponents: [
+    AddVacationDialogComponent
+  ]
+})
+export class AddVacationDialogModule { }

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

@@ -1 @@
-<app-employer-dashboard></app-employer-dashboard>
+<div class="container-fluid h-100">
+  <div class="row">
+    <div class="col-lg-8 mid-panel">
+
+      <div class="dashboard-user-approval"
+           *ngIf="authorizationRequests && authorizationRequests.length > 0 && isEmployer()">
+        <app-user-approval
+          [authorizationRequests]="authorizationRequests"
+          (userApprovalEvent)="userApproved($event.requestId, $event.approved)"
+        ></app-user-approval>
+      </div>
+
+      <div class="dashboard-vacation-approval"
+           *ngIf="vacationRequests && vacationRequests.length > 0 && isEmployer()">
+        <app-days-off-approval
+          [vacationRequests]="vacationRequests"
+          (vacationApprovalEvent)="vacationApproved($event.requestId, $event.approved)"
+        ></app-days-off-approval>
+      </div>
+
+      <div class="dashboard-oncoming-vacation"
+           *ngIf="oncomingVacation && oncomingVacation.length > 0">
+        <app-coming-days-off
+          [oncomingVacation]="oncomingVacation"
+          (vacationRemove)="removeVacation($event)"
+        ></app-coming-days-off>
+      </div>
+
+      <div class="dashboard-day-picker">
+        <app-day-picker #dayPicker
+                        (selectedDate)="onDateSelect($event)"
+                        (selectedMonth)="onSelectedMonthChange($event)"
+        ></app-day-picker>
+      </div>
+
+    </div>
+
+    <div class="col-lg-4 right-panel">
+
+      <div class="days-off-info" *ngIf="profile">
+        <app-vacation-info
+          [sickDaysRemaining]="profile.sickDayCount - profile.takenSickDayCount"
+          [extraVacationRemaining]="profile.vacationCount"
+        ></app-vacation-info>
+      </div>
+
+    </div>
+  </div>
+</div>

webapp/src/app/dashboard/dashboard.component.sass

@@ +1 @@
+.row
+  padding: 0
+
+.mid-panel
+  padding: 10px 0 0 10px
+
+.right-panel
+  padding: 10px 10px 0 10px
+
+.dashboard-user-approval
+  padding: 0 0 10px 0
+
+.dashboard-vacation-approval
+  padding: 0 0 10px 0
+
+.dashboard-oncoming-vacation
+  padding: 0 0 10px 0

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

@@ -1 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {MatDialog} from '@angular/material';
+import {AddVacationDialogComponent} from './add-vacation-dialog/add-vacation-dialog.component';
+import {UsersService} from '../services/api/users.service';
+import {AuthorizationRequest, VacationRequest} from '../models/requests.model';
+import {UserService} from '../services/api/user.service';
+import {UserProfile} from '../models/user.model';
+import {LocalizationService} from '../localization/localization.service';
+import {RequestStatus, RequestTypes, UserType} from '../enums/common.enum';
+import {Calendar} from '../models/calendar.model';
+import {DateToolsService} from '../services/util/date-tools.service';
 
 @Component({
   selector: 'app-dashboard',
@@ -6 +16 @@
   styleUrls: ['./dashboard.component.sass']
 })
 export class DashboardComponent implements OnInit {
+  @ViewChild('dayPicker') calendar;
 
-  constructor() { }
+  private profile: UserProfile;
+  private authorizationRequests: AuthorizationRequest[];
+  private vacationRequests: VacationRequest[];
+  private oncomingVacation: Calendar[];
+
+  private selectedMonth: Date;
+
+  constructor(
+    public dialog: MatDialog,
+    private localizationService: LocalizationService,
+    private dateToolsService: DateToolsService,
+    private userService: UserService,
+    private usersService: UsersService
+  ) { }
 
   ngOnInit() {
+    this.selectedMonth = this.dateToolsService.toStartOfMonth(new Date());
+
+    this.userService.getLoggedUserProfile()
+      .subscribe((data: UserProfile) => {
+        this.profile = data;
+        if (this.isEmployer()) {
+          this.loadAuthorizationRequests();
+          this.loadVacationRequests();
+        }
+      });
+
+    this.loadMonthVacation(this.selectedMonth);
+    this.loadOncomingVacation();
+  }
+
+  userApproved(requestId: number, approved: boolean) {
+    this.requestApproved(requestId, RequestTypes.AUTHORIZATION, approved)
+      .subscribe(() => this.loadAuthorizationRequests());
+  }
+
+  vacationApproved(requestId: number, approved: boolean) {
+    this.requestApproved(requestId, RequestTypes.VACATION, approved)
+      .subscribe(() => 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(() => {
+        this.loadOncomingVacation();
+        this.loadMonthVacation(this.selectedMonth);
+        this.loadProfile();
+      });
+  }
+
+  onDateSelect( date: Date ) {
+    this.dialog
+      .open(AddVacationDialogComponent, {
+        data: {
+          date
+        }
+      })
+      .afterClosed().subscribe(data => {
+      if (data && data.isConfirmed) {
+        this.userService.postCalendarWithLanguage(
+          {
+            date: data.date,
+            from: data.fromTime,
+            to: data.toTime,
+            type: data.vacationType
+          },
+          this.localizationService.getCurrentLanguage()
+        ).subscribe(() => {
+          this.loadMonthVacation(this.selectedMonth);
+          this.loadOncomingVacation();
+          this.loadProfile();
+        });
+      }
+    });
   }
 
+  onSelectedMonthChange(monthStart: Date) {
+    this.selectedMonth = monthStart;
+    this.loadMonthVacation(monthStart);
+  }
+
+  isEmployer(): boolean {
+    if (this.profile) {
+      return this.profile.role === UserType.EMPLOYER;
+    } else {
+      return false;
+    }
+  }
+
+  private loadProfile() {
+    this.userService.getLoggedUserProfile()
+      .subscribe((data: UserProfile) => this.profile = data);
+  }
+
+  private loadAuthorizationRequests() {
+    this.usersService.getAuthorizationRequestsWithLanguage(this.localizationService.getCurrentLanguage(), RequestStatus.PENDING)
+      .subscribe((data: AuthorizationRequest[]) => this.authorizationRequests = data);
+  }
+
+  private loadVacationRequests() {
+    this.usersService.getVacationRequestsWithLanguage(this.localizationService.getCurrentLanguage(), RequestStatus.PENDING)
+      .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/dashboard.module.ts

@@ -1 @@
-import {NgModule} from '@angular/core';
-import {EmployerDashboardModule} from './employer-dashboard/employer-dashboard.module';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DayPickerModule } from '../shared/day-picker/day-picker.module';
+import { VacationInfoModule } from '../shared/vacation-info/vacation-info.module';
+import { UserApprovalModule } from './user-approval/user-approval.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 {AddVacationDialogModule} from './add-vacation-dialog/add-vacation-dialog.module';
+import {MatDialogModule} from '@angular/material';
 import {DashboardComponent} from './dashboard.component';
 
 @NgModule({
   declarations: [ DashboardComponent ],
   exports:      [ DashboardComponent ],
   imports: [
-    EmployerDashboardModule
+    CommonModule,
+    DayPickerModule,
+    VacationInfoModule,
+    UserApprovalModule,
+    VacationApprovalModule,
+    DayPickerModule,
+    OncomingVacationModule,
+    BrowserAnimationsModule,
+    AddVacationDialogModule,
+    MatDialogModule
   ]
 })
 export class DashboardModule { }

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

@@ -1 @@
-<div class="container-fluid h-100">
-  <div class="row">
-    <div class="col-lg-8 mid-panel">
-
-      <div class="employer-dashboard-user-approval"
-           *ngIf="authorizationRequests && authorizationRequests.length > 0 && isEmployer()">
-        <app-user-approval
-          [authorizationRequests]="authorizationRequests"
-          (userApprovalEvent)="userApproved($event.requestId, $event.approved)"
-        ></app-user-approval>
-      </div>
-
-      <div class="employer-dashboard-vacation-approval"
-           *ngIf="vacationRequests && vacationRequests.length > 0 && isEmployer()">
-        <app-days-off-approval
-          [vacationRequests]="vacationRequests"
-          (vacationApprovalEvent)="vacationApproved($event.requestId, $event.approved)"
-        ></app-days-off-approval>
-      </div>
-
-      <div class="employer-dashboard-oncoming-vacation"
-           *ngIf="oncomingVacation && oncomingVacation.length > 0">
-        <app-coming-days-off
-          [oncomingVacation]="oncomingVacation"
-          (vacationRemove)="removeVacation($event)"
-        ></app-coming-days-off>
-      </div>
-
-      <div class="employer-dashboard-day-picker">
-        <app-day-picker #dayPicker
-          (selectedDate)="onDateSelect($event)"
-          (selectedMonth)="onSelectedMonthChange($event)"
-        ></app-day-picker>
-      </div>
-
-    </div>
-
-    <div class="col-lg-4 right-panel">
-
-      <div class="days-off-info" *ngIf="profile">
-        <app-vacation-info
-          [sickDaysRemaining]="profile.sickDayCount - profile.takenSickDayCount"
-          [extraVacationRemaining]="profile.vacationCount"
-        ></app-vacation-info>
-      </div>
-
-    </div>
-  </div>
-</div>

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

@@ -1 @@
-.row
-  padding: 0
-
-.mid-panel
-  padding: 10px 0 0 10px
-
-.right-panel
-  padding: 10px 10px 0 10px
-
-.employer-dashboard-user-approval
-  padding: 0 0 10px 0
-
-.employer-dashboard-vacation-approval
-  padding: 0 0 10px 0
-
-.employer-dashboard-oncoming-vacation
-  padding: 0 0 10px 0

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

@@ -1 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
-import {MatDialog} from '@angular/material';
-import {AddVacationDialogComponent} from '../../add-vacation-dialog/add-vacation-dialog.component';
-import {UsersService} from '../../services/api/users.service';
-import {AuthorizationRequest, VacationRequest} from '../../models/requests.model';
-import {UserService} from '../../services/api/user.service';
-import {UserProfile} from '../../models/user.model';
-import {LocalizationService} from '../../localization/localization.service';
-import {RequestStatus, RequestTypes, UserType} from '../../enums/common.enum';
-import {Calendar} from '../../models/calendar.model';
-import {DateToolsService} from '../../services/util/date-tools.service';
-
-@Component({
-  selector: 'app-employer-dashboard',
-  templateUrl: './employer-dashboard.component.html',
-  styleUrls: ['./employer-dashboard.component.sass']
-})
-export class EmployerDashboardComponent implements OnInit {
-  @ViewChild('dayPicker') calendar;
-
-  private profile: UserProfile;
-  private authorizationRequests: AuthorizationRequest[];
-  private vacationRequests: VacationRequest[];
-  private oncomingVacation: Calendar[];
-
-  private selectedMonth: Date;
-
-  constructor(
-    public dialog: MatDialog,
-    private localizationService: LocalizationService,
-    private dateToolsService: DateToolsService,
-    private userService: UserService,
-    private usersService: UsersService
-  ) { }
-
-  ngOnInit() {
-    this.selectedMonth = this.dateToolsService.toStartOfMonth(new Date());
-
-    this.userService.getLoggedUserProfile()
-      .subscribe((data: UserProfile) => {
-        this.profile = data;
-        if (this.isEmployer()) {
-          this.loadAuthorizationRequests();
-          this.loadVacationRequests();
-        }
-      });
-
-    this.loadMonthVacation(this.selectedMonth);
-    this.loadOncomingVacation();
-  }
-
-  userApproved(requestId: number, approved: boolean) {
-    this.requestApproved(requestId, RequestTypes.AUTHORIZATION, approved)
-      .subscribe(() => this.loadAuthorizationRequests());
-  }
-
-  vacationApproved(requestId: number, approved: boolean) {
-    this.requestApproved(requestId, RequestTypes.VACATION, approved)
-      .subscribe(() => 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(() => {
-        this.loadOncomingVacation();
-        this.loadMonthVacation(this.selectedMonth);
-        this.loadProfile();
-      });
-  }
-
-  onDateSelect( date: Date ) {
-    this.dialog
-      .open(AddVacationDialogComponent, {
-        data: {
-          date
-        }
-      })
-      .afterClosed().subscribe(data => {
-        if (data && data.isConfirmed) {
-          this.userService.postCalendarWithLanguage(
-            {
-              date: data.date,
-              from: data.fromTime,
-              to: data.toTime,
-              type: data.vacationType
-            },
-            this.localizationService.getCurrentLanguage()
-          ).subscribe(() => {
-            this.loadMonthVacation(this.selectedMonth);
-            this.loadOncomingVacation();
-            this.loadProfile();
-          });
-        }
-      });
-  }
-
-  onSelectedMonthChange(monthStart: Date) {
-    this.selectedMonth = monthStart;
-    this.loadMonthVacation(monthStart);
-  }
-
-  isEmployer(): boolean {
-    if (this.profile) {
-      return this.profile.role === UserType.EMPLOYER;
-    } else {
-      return false;
-    }
-  }
-
-  private loadProfile() {
-    this.userService.getLoggedUserProfile()
-      .subscribe((data: UserProfile) => this.profile = data);
-  }
-
-  private loadAuthorizationRequests() {
-    this.usersService.getAuthorizationRequestsWithLanguage(this.localizationService.getCurrentLanguage(), RequestStatus.PENDING)
-      .subscribe((data: AuthorizationRequest[]) => this.authorizationRequests = data);
-  }
-
-  private loadVacationRequests() {
-    this.usersService.getVacationRequestsWithLanguage(this.localizationService.getCurrentLanguage(), RequestStatus.PENDING)
-      .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

@@ -1 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { EmployerDashboardComponent } from './employer-dashboard.component';
-import { DayPickerModule } from '../../day-picker/day-picker.module';
-import { VacationInfoModule } from '../../vacation-info/vacation-info.module';
-import { UserApprovalModule } from '../../user-approval/user-approval.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 {AddVacationDialogModule} from '../../add-vacation-dialog/add-vacation-dialog.module';
-import {MatDialogModule} from '@angular/material';
-
-@NgModule({
-  declarations: [ EmployerDashboardComponent ],
-  exports:      [ EmployerDashboardComponent ],
-  imports: [
-    CommonModule,
-    DayPickerModule,
-    VacationInfoModule,
-    UserApprovalModule,
-    VacationApprovalModule,
-    DayPickerModule,
-    OncomingVacationModule,
-    BrowserAnimationsModule,
-    AddVacationDialogModule,
-    MatDialogModule
-  ]
-})
-export class EmployerDashboardModule { }

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

@@ +1 @@
+<div class="oncoming-days-off-container">
+
+  <div class="component-header">
+    {{'oncomingVacation.headline' | translate}}
+  </div>
+
+  <table class="table text-center table-hover">
+    <thead class="thead-light">
+      <tr>
+        <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 | translate}}
+        </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%" class="status {{vac.status}}">
+          {{vac.status | translate}}
+        </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/dashboard/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
+
+    .status
+      font-weight: bold
+
+    .ACCEPTED
+      color: green
+
+    .PENDING
+      color: orange
+
+    .REJECTED
+      color: red
+
+    .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/dashboard/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>();
+
+  constructor() { }
+
+  ngOnInit() { }
+}

webapp/src/app/dashboard/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 {MatButtonModule} from '@angular/material';
+import {TranslateModule} from '@ngx-translate/core';
+import {CommonModule} from '@angular/common';
+
+@NgModule({
+  declarations: [OncomingVacationComponent ],
+  exports: [OncomingVacationComponent ],
+  imports: [BrowserModule, MatButtonModule, TranslateModule, CommonModule],
+})
+export class OncomingVacationModule {}

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

@@ +1 @@
+<div class="user-approval-container">
+
+  <div class="component-header">
+    {{'userApproval.headline' | translate}}
+  </div>
+
+  <table class="table text-center table-hover">
+    <thead class="thead-light">
+    <tr>
+      <th style="width: 35%">{{'basic.name' | translate}}</th>
+      <th style="width: 35%">{{'userApproval.requestDate' | translate}}</th>
+      <th></th>
+    </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let request of authorizationRequests">
+        <td>
+          {{request.firstName}} {{request.lastName}}
+        </td>
+        <td>
+          {{request.timestamp | date:'yyyy/MM/dd'}}
+        </td>
+        <td class="buttons">
+          <button mat-icon-button (click)="userApproved(request.id, true)">
+            <i class="material-icons approve-btn">done</i>
+          </button>
+          <button mat-icon-button (click)="userApproved(request.id, false)">
+            <i class="material-icons reject-btn">delete</i>
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+</div>

webapp/src/app/dashboard/user-approval/user-approval.component.sass

@@ +1 @@
+@import '../../../common-styles/basic-component'
+
+.user-approval-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
+
+    .approve-btn
+      margin-right: 2px
+      color: green
+
+    .reject-btn
+      color: grey

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

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

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

@@ +1 @@
+import { NgModule } from '@angular/core';
+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, TranslateModule, CommonModule]
+})
+export class UserApprovalModule { }

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

@@ +1 @@
+<div class="days-off-approval-container">
+
+  <div class="component-header">
+    {{'vacationApproval.headline' | translate}}
+  </div>
+
+  <table class="table text-center table-hover">
+    <thead class="thead-light">
+      <tr>
+        <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>
+    <tbody>
+    <tr *ngFor="let request of vacationRequests">
+      <td>
+        {{request.firstName}} {{request.lastName}}
+      </td>
+      <td>
+        {{request.timestamp | date:'yyyy/MM/dd HH:mm'}}
+      </td>
+      <td>
+        {{request.type | translate}}
+      </td>
+      <td>
+        {{request.date | date:'yyyy/MM/dd'}}
+      </td>
+      <td>
+        {{request.from}}
+      </td>
+      <td>
+        {{request.to}}
+      </td>
+      <td class="buttons">
+        <button mat-icon-button (click)="vacationApprovalCompleted(request.id, true)">
+          <i class="material-icons approve-btn">done</i>
+        </button>
+        <button mat-icon-button (click)="vacationApprovalCompleted(request.id, false)">
+          <i class="material-icons reject-btn">delete</i>
+        </button>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</div>

webapp/src/app/dashboard/vacation-approval/vacation-approval.component.sass

@@ +1 @@
+@import '../../../common-styles/basic-component'
+
+.days-off-approval-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
+
+  .approve-btn
+    margin-right: 2px
+    color: green
+
+  .reject-btn
+    color: grey
+

webapp/src/app/dashboard/vacation-approval/vacation-approval.component.ts

@@ +1 @@
+import { Component, EventEmitter, Output, Input } from '@angular/core';
+import { VacationRequest } from '../../models/requests.model';
+
+@Component({
+  selector: 'app-days-off-approval',
+  templateUrl: './vacation-approval.component.html',
+  styleUrls: ['./vacation-approval.component.sass']
+})
+export class VacationApprovalComponent {
+
+  @Input() vacationRequests: VacationRequest[];
+  @Output() vacationApprovalEvent = new EventEmitter<{requestId: number, approved: boolean}>();
+
+  constructor() { }
+
+  vacationApprovalCompleted(reqId: number, isApproved: boolean ) {
+    this.vacationApprovalEvent.emit({requestId: reqId, approved: isApproved});
+  }
+}

webapp/src/app/dashboard/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 {MatButtonModule} from '@angular/material';
+import {TranslateModule} from '@ngx-translate/core';
+import {CommonModule} from '@angular/common';
+
+@NgModule({
+  declarations: [VacationApprovalComponent],
+  exports: [VacationApprovalComponent],
+  imports: [BrowserModule, MatButtonModule, TranslateModule, CommonModule]
+})
+export class VacationApprovalModule {
+}

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

@@ -1 @@
-<div class="day-picker-container">
-  <div class="row text-center day-picker-month-selection">
-    <div class="col-4"></div>
-    <div class="col-1">
-      <button
-        mat-icon-button
-        mwlCalendarPreviousView
-        [view]="view"
-        [(viewDate)]="viewDate"
-        (click)="setMonth(currentMonth - 1)"
-      >
-        <i class="material-icons change-month">navigate_before</i>
-      </button>
-    </div>
-    <div class="col-2">
-      <span id="day-picker-date">{{ viewDate | calendarDate:(view + 'ViewTitle'):locale }}</span>
-    </div>
-    <div class="col-1">
-      <button
-        mat-icon-button
-        mwlCalendarNextView
-        [view]="view"
-        [(viewDate)]="viewDate"
-        (click)="setMonth(currentMonth + 1)"
-      >
-        <i class="material-icons change-month">navigate_next</i>
-      </button>
-      <div class="col-4"></div>
-    </div>
-  </div>
-
-  <mwl-calendar-month-view
-    [viewDate]="viewDate"
-    [locale]="locale"
-    [refresh]="refresh"
-    [events]="events"
-    [cellTemplate]="customCellTemplate"
-    (dayClicked)="dayClicked($event.day)"
-    weekStartsOn="1"
-  >
-  </mwl-calendar-month-view>
-
-  <ng-template #customCellTemplate let-day="day" let-locale="locale">
-    <div class="cal-cell-top">
-      <span class="cal-day-number">
-        {{ day.date | calendarDate:'monthViewDayNumber':locale }}
-      </span>
-    </div>
-      <span class="vacation-type" *ngFor="let event of day.events">
-        <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>
-
-        <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

@@ -1 @@
-@import '../../common-styles/basic-component'
-
-.day-picker-container
-  @extend .basic-component
-
-#day-picker-date