Revize 9c7b1b63

Re #7462 Dashboard connected to GET methods of REST API

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

@@ -2 +2 @@
   <div class="row">
     <div class="col-lg-8 mid-panel">
 
-      <div *ngIf="usersToApprove.length > 0" class="employer-dashboard-user-approval">
+      <div class="employer-dashboard-user-approval" *ngIf="authorizationRequests && authorizationRequests.authorization.length > 0">
         <app-user-approval
-          [usersToApprove]="usersToApprove"
-          (userApprovedAction)="userApproved($event.user, $event.approved)"
+          [authorizationRequests]="authorizationRequests"
+          (userApprovalEvent)="userApproved($event.requestId, $event.approved)"
         ></app-user-approval>
       </div>
 
-      <div *ngIf="daysOffToApprove.length > 0" class="employer-dashboard-days-off-approval">
+      <div class="employer-dashboard-days-off-approval" *ngIf="daysOffRequests && daysOffRequests.vacation.length > 0">
         <app-days-off-approval
-          [daysOffToApprove]="daysOffToApprove"
-          (daysOffApprovalAction)="daysOffApproved($event.daysOff, $event.approved)"
+          [daysOffRequests]="daysOffRequests"
+          (daysOffApprovalEvent)="daysOffApproved($event.requestId, $event.approved)"
         ></app-days-off-approval>
       </div>
 
-      <div *ngIf="oncomingDaysOff.length > 0" class="employer-dashboard-coming-days-off">
-        <app-coming-days-off
-          [oncomingDaysOff]="oncomingDaysOff"
-          (daysOffRemovedAction)="daysOffRemoved($event.daysOff)"
-        ></app-coming-days-off>
-      </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-day-picker">
         <app-day-picker
@@ -33 +31 @@
 
     <div class="col-lg-4 right-panel">
 
-      <app-days-off-info
-        [sickDaysRemaining]="5"
-        [extraVacationRemaining]="10"
-      ></app-days-off-info>
+      <div class="days-off-info" *ngIf="profile">
+        <app-days-off-info
+          [sickDaysRemaining]="profile.sickDay"
+          [extraVacationRemaining]="profile.vacation"
+        ></app-days-off-info>
+      </div>
 
     </div>
   </div>

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

@@ -1 @@
-import { Component, OnInit } from '@angular/core';
-import { UserToApprove } from '../../user-approval/user-to-approve.model';
-import { DaysOff } from '../../shared/days-off.model';
-import { OffDayType } from '../../shared/off-day-type';
+import {Component, Input, OnInit} from '@angular/core';
 import { MatDialog } from '@angular/material';
 import { AddDaysOffDialogComponent } from '../../add-days-off-dialog/add-days-off-dialog.component';
+import {UsersService} from '../../services/users.service';
+import {Requests} from '../../models/requests.model';
+import {UserProfile} from '../../models/user-profile.model';
+import {UserService} from '../../services/user.service';
+import {ProfileService} from "../../services/profile.service";
 
 @Component({
   selector: 'app-employer-dashboard',
@@ -12 +14 @@
 })
 export class EmployerDashboardComponent implements OnInit {
 
-  usersToApprove: UserToApprove[] = [
-    { date: new Date(), email: '[e-mail]', name: 'Václav Jirák' },
-    { date: new Date(), email: '[e-mail]', name: 'Věnceslav Kárij' }
-  ];
+  @Input() profile: UserProfile;
+  private authorizationRequests: Requests;
+  private daysOffRequests: Requests;
 
-  daysOffToApprove: DaysOff[] = [
-    { username: 'Václav Jirák', dateFrom: new Date(2019, 10, 13), dateTo: new Date(), type: OffDayType.Sickday },
-    { username: 'Václav Jirák', dateFrom: new Date(2019, 10, 1), dateTo: new Date(), type: OffDayType.ExtraVacation },
-  ];
-
-  daysOff: DaysOff[] = [
-    {
-      username: '',
-      dateFrom: new Date(2019, 5, 5),
-      dateTo: new Date(2019, 5, 6),
-      type: OffDayType.ExtraVacation
-    },
-    {
-      username: '',
-      dateFrom: new Date(2019, 5, 8),
-      dateTo: new Date(2019, 5, 8),
-      type: OffDayType.Sickday
-    },
-    {
-      username: '',
-      dateFrom: new Date(2019, 3, 8),
-      dateTo: new Date(2019, 3, 9),
-      type: OffDayType.Sickday
-    },
-  ];
-
-  oncomingDaysOff: DaysOff[] = [];
-
-  constructor(public dialog: MatDialog) { }
+  constructor(
+    public dialog: MatDialog,
+    private profileService: ProfileService,
+    // API
+    private userService: UserService,
+    private usersService: UsersService
+  ) { }
 
   ngOnInit() {
-    this.oncomingDaysOff = this.calculateComingDaysOff();
-  }
+    this.profileService.getProfile()
+      .subscribe((data: UserProfile) => this.profile = data);
 
-  onDateSelect( date: Date ) {
-    this.dialog.open(AddDaysOffDialogComponent, {
-      data: {
-        fromDate: date
-      }
-    });
-  }
+    this.usersService.getAuthorizationRequests()
+      .subscribe((data: Requests) => this.authorizationRequests = data);
 
-  userApproved( user: UserToApprove, approved: boolean ) {
-    console.log(user.name + ' - approved: ' + approved);
-    this.usersToApprove.splice(
-      this.usersToApprove.indexOf(user), 1
-    );
+    this.usersService.getVacationRequests()
+      .subscribe((data: Requests) => this.daysOffRequests = data);
   }
 
-  daysOffApproved(daysOff: DaysOff, approved: boolean) {
-    console.log(daysOff.username + ', ' + approved);
-    this.daysOffToApprove.splice(
-      this.daysOffToApprove.indexOf(daysOff), 1
-    );
+  private userApproved(requestId: number, approved: boolean) {
+    // TODO api post call
+    this.authorizationRequests.authorization.splice(0, 1);
   }
 
-  daysOffRemoved(daysOff: DaysOff) {
-    this.daysOff.splice(
-      this.daysOff.indexOf(daysOff), 1
-    );
-    this.oncomingDaysOff.splice(
-      this.oncomingDaysOff.indexOf(daysOff), 1
-    );
+  private daysOffApproved(requestId: number, approved: boolean) {
+    // TODO api post call
+    this.daysOffRequests.vacation.splice(0, 1);
   }
 
-  private calculateComingDaysOff(): DaysOff[] {
-    let oncomingDaysOff: DaysOff[] = [];
-
-    const today = new Date();
-    this.daysOff.forEach((dayOff) => {
-      if (dayOff.dateTo >= today) {
-        oncomingDaysOff.push(dayOff);
+  onDateSelect( date: Date ) {
+    this.dialog.open(AddDaysOffDialogComponent, {
+      data: {
+        fromDate: date
       }
     });
-
-    return oncomingDaysOff;
   }
 }

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

@@ -1 @@
-<div class="days-off-approval-container">
+<div class="days-off-approval-container" *ngIf="daysOffRequests">
 
   <div class="component-header">
     Schvalování volna
@@ -8 +8 @@
     <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"> Od </div>
-      <div class="col-md-2"> Do </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 daysOff of daysOffToApprove">
+    <div class="row days-off-approval" *ngFor="let request of daysOffRequests.vacation">
       <div class="col-md-3">
-        {{daysOff.username}}
+        {{request.user.name.first}} {{request.user.name.last}}
       </div>
-
       <div class="col-md-3">
-        {{daysOffTypeToString(daysOff.type)}}
+        {{daysOffTypeToString(request.type)}}
       </div>
-
       <div class="col-md-2">
-        {{daysOff.dateFrom | date:'yyyy/MM/dd'}}
+        {{request.date | date:'yyyy/MM/dd'}}
       </div>
-      <div class="col-md-2">
-        {{daysOff.dateTo | date:'yyyy/MM/dd'}}
+      <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(daysOff, true)">✓</div>
-        <div class="btn btn-danger reject-btn"   (click)="daysOffApprovalCompleted(daysOff, false)">X</div>
+        <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>

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

@@ -1 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { DaysOff } from '../shared/days-off.model';
-import { OffDayType } from '../shared/off-day-type';
+import { Component, EventEmitter, Output, Input } from '@angular/core';
+import {Requests} from '../models/requests.model';
+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 implements OnInit {
+export class DaysOffApprovalComponent {
 
-  @Input()  daysOffToApprove: DaysOff[];
-  @Output() daysOffApprovalAction = new EventEmitter<{daysOff: DaysOff, approved: boolean}>();
+  @Input() daysOffRequests: Requests;
+  @Output() daysOffApprovalEvent = new EventEmitter<{requestId: number, approved: boolean}>();
 
   constructor() { }
 
-  ngOnInit() {
+  daysOffApprovalCompleted(reqId: number, isApproved: boolean ) {
+    this.daysOffApprovalEvent.emit({requestId: reqId, approved: isApproved});
   }
 
-  daysOffApprovalCompleted(daysOffApproved: DaysOff, isApproved: boolean ) {
-    this.daysOffApprovalAction.emit({daysOff: daysOffApproved, approved: isApproved});
-  }
-
-  private daysOffTypeToString(taskType: OffDayType): string {
-    switch (taskType) {
-      case OffDayType.ExtraVacation:
+  private daysOffTypeToString(vacationType: VacationType): string {
+    switch (vacationType) {
+      case VacationType.VACATION:
         return 'Extra dovolená';
-      case OffDayType.Sickday:
+      case VacationType.SICKDAY:
         return 'Sickdays';
     }
   }

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

@@ -5 +5 @@
   </div>
 
   <div class="days-off-type-container">
-    <span class="days-off-remaining">{{extraVacationRemaining}}</span>
+    <span class="days-off-remaining">{{extraVacationRemaining.value}}</span>
+    <!--    TODO vypsat jednotky (.unit)-->
     <span class="days-off-type">Extra dovolená</span>
   </div>
 
   <div class="days-off-type-container">
-    <span class="days-off-remaining">{{sickDaysRemaining}}</span>
+    <span class="days-off-remaining">{{sickDaysRemaining.value}}</span>
+    <!--    TODO vypsat jednotky (.unit)-->
     <span class="days-off-type">Sickdays</span>
   </div>
 

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

@@ -1 +1 @@
 import { Component, Input } from '@angular/core';
+import {TimeUnit} from "../enums/common.enum";
 
 @Component({
   selector: 'app-days-off-info',
@@ -7 +8 @@
 })
 export class DaysOffInfoComponent {
 
-  @Input() sickDaysRemaining: number;
+  @Input() sickDaysRemaining: {
+    value: number;
+    unit: TimeUnit;
+  };
 
-  @Input() extraVacationRemaining: number;
+  @Input() extraVacationRemaining: {
+    value: number;
+    unit: TimeUnit;
+  };
 
   constructor() { }
 }

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/profile.service';
+import { UserProfile } from '../models/user-profile.model';
 
 @Component({
   selector: 'app-header',
@@ -10 +12 @@
 export class HeaderComponent {
   @Input() name = 'John Doe';
 
-  constructor(private dialog: MatDialog) { }
+  private notificationSettings: Date;
+
+  constructor(
+    private dialog: MatDialog,
+    private profileService: ProfileService
+    ) {
+    profileService.getProfile()
+      .subscribe((data: UserProfile) => this.notificationSettings = new Date(data.settings.notification));
+  }
 
   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()
+        }
       }
     });
   }

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

@@ -22 +22 @@
       </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 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.ts

@@ -1 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {DaysOff} from '../shared/days-off.model';
-import {OffDayType} from '../shared/off-day-type';
+import {Component, OnInit} from '@angular/core';
+import {UserService} from '../services/user.service';
+import {VacationType} from '../enums/common.enum';
 
 @Component({
   selector: 'app-coming-days-off',
@@ -9 +9 @@
 })
 export class OncomingDaysOffComponent implements OnInit {
 
-  @Input()  oncomingDaysOff: DaysOff[];
-  @Output() daysOffRemovedAction = new EventEmitter<{daysOff: DaysOff}>();
-
-  constructor() { }
+  constructor(
+    private userService: UserService
+  ) { }
 
   ngOnInit() {
+    // TODO api call na získání nadcházejících voln
   }
 
-  private daysOffRemoved( removedDaysOff: DaysOff ) {
-    this.daysOffRemovedAction.emit( {daysOff: removedDaysOff } );
+  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 offDayTypeToString(taskType: OffDayType): string {
-    switch (taskType) {
-      case OffDayType.ExtraVacation:
+  private daysOffTypeToString(vacationType: VacationType): string {
+    switch (vacationType) {
+      case VacationType.VACATION:
         return 'Extra dovolená';
-      case OffDayType.Sickday:
+      case VacationType.SICKDAY:
         return 'Sickdays';
     }
   }

webapp/src/app/services/profile.service.ts

@@ +1 @@
+import { Injectable } from '@angular/core';
+import {UserProfile} from '../models/user-profile.model';
+import {UserService} from './user.service';
+import {Observable} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProfileService {
+  private profile: UserProfile;
+
+  constructor(
+    private userService: UserService
+  ) {
+    userService.getEmployeeProfile(1)
+      .subscribe((data: UserProfile) => this.profile = data);
+  }
+
+  getProfile(): Observable<UserProfile> {
+    return new Observable((observer) => {
+      if (this.profile) {
+        observer.next(this.profile);
+        observer.complete();
+      } else {
+        this.userService.getEmployeeProfile(1) // TODO zmenit id na prihlaseneho uzivatele
+          .subscribe((data: UserProfile) => {
+            this.profile = data;
+            observer.next(this.profile);
+            observer.complete();
+          });
+      }
+    });
+  }
+
+}

webapp/src/app/shared/days-off.model.ts

@@ -1 @@
-import { OffDayType } from './off-day-type';
-
-export class DaysOff {
-  username: string;
-  dateFrom: Date;
-  dateTo: Date;
-  type: OffDayType;
-}

webapp/src/app/shared/off-day-type.ts

@@ -1 @@
-export enum OffDayType {
-  ExtraVacation,
-  Sickday
-}

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

@@ -4 +4 @@
     Schvalování uživatelů
   </div>
 
-  <div class="user-approval-list">
-    <div class="row user-to-approve-container" *ngFor="let user of usersToApprove">
-      <div class="col-md-4">
-        {{user.name}}
-      </div>
-      <div class="col-md-4">
-        {{user.email}}
+  <div class="row user-approval-header">
+    <div class="col-md-5"> Jméno </div>
+    <div class="col-md-5"> Datum žádosti </div>
+    <div class="col-md-2"></div>
+  </div>
+
+  <div class="user-approval-list" *ngIf="authorizationRequests">
+    <div class="row user-to-approve-container" *ngFor="let request of authorizationRequests.authorization">
+      <div class="col-md-5">
+        {{request.user.name.first}} {{request.user.name.last}}
       </div>
-      <div class="col-md-2">
-        {{user.date | date:'yyyy/MM/dd'}}
+      <div class="col-md-5">
+        {{request.date | date:'yyyy/MM/dd'}}
       </div>
       <div class="col-md-2">
-        <div class="btn btn-success approve-user-btn" (click)="userApproved(user, true)">✓</div>
-        <div class="btn btn-danger reject-user-btn"   (click)="userApproved(user, false)">X</div>
+        <div class="btn btn-success approve-user-btn" (click)="userApproved(request.id, true)">✓</div>
+        <div class="btn btn-danger reject-user-btn"   (click)="userApproved(request.id, false)">X</div>
       </div>
     </div>
   </div>

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

@@ -3 +3 @@
 .user-approval-container
   @extend .basic-component
 
+  .user-approval-header
+    padding: 10px
+    margin: 0
+    font-weight: bold
+
   .user-to-approve-container
     border-bottom: 1px solid gainsboro
     margin: 0

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

@@ -1 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { UserToApprove } from './user-to-approve.model';
-
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Requests} from '../models/requests.model';
 
 @Component({
   selector: 'app-user-approval',
@@ -9 +8 @@
 })
 export class UserApprovalComponent {
 
-  @Input()  usersToApprove: UserToApprove[];
-  @Output() userApprovedAction = new EventEmitter<{user: UserToApprove, approved: boolean}>();
+  @Input() authorizationRequests: Requests;
+  @Output() userApprovalEvent = new EventEmitter<{requestId: number, approved: boolean}>();
 
   constructor() { }
 
-  userApproved(approvedUser: UserToApprove, isApproved: boolean) {
-    this.userApprovedAction.emit({user: approvedUser, approved: isApproved});
+  private userApproved(reqId: number, isApproved: boolean) {
+    this.userApprovalEvent.emit({requestId: reqId, approved: isApproved});
   }
-
 }

webapp/src/app/user-approval/user-to-approve.model.ts

@@ -1 @@
-export class UserToApprove {
-  name: string;
-  email: string;
-  date: Date;
-}

webapp/src/environments/environment.ts

@@ -1 +1 @@
 export const environment = {
   production: false,
-  apiUrl: 'http://localhost:9080/'
+  apiUrl: 'http://192.168.99.100:9080/'
 };