Revize f4bbdb70

Re #7499 User profile component implemented + refactor

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

@@ -36 +36 @@
     <div class="col-lg-4 right-panel">
 
       <div class="days-off-info" *ngIf="profile">
-        <app-days-off-info
+        <app-vacation-info
           [sickDaysRemaining]="profile.sickdayCount"
           [extraVacationRemaining]="profile.vacationCount"
-        ></app-days-off-info>
+        ></app-vacation-info>
       </div>
 
     </div>

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

@@ -9 +9 @@
 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',
@@ -22 +21 @@
   private profile: UserProfile;
   private authorizationRequests: AuthorizationRequest[];
   private vacationRequests: VacationRequest[];
-  private currentMonthVacation: Calendar[];
   private oncomingVacation: Calendar[];
 
   constructor(

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

@@ -43 +43 @@
     private localizationService: LocalizationService,
     private dateToolsService: DateToolsService) {
 
-    this.locale = localizationService.defaultLanguage;
+    this.locale = localizationService.getCurrentLocale();
     localizationService.currentLanguageSubject
       .subscribe((data) => {
         this.locale = data;

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

@@ -55 +55 @@
         </div>
       </td>
       <td>
+        <span class="material-icons" style="font-size: small" (click)="openUserProfile(user)">visibility</span>
         <span class="material-icons" style="font-size: small" (click)="openEditUserDialog(user)">edit</span>
       </td>
     </tr>

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

@@ -13 +13 @@
 import {DateFormatterService} from '../services/util/date-formatter.service';
 import {FileService} from '../services/api/file.service';
 import {ProfileService} from '../services/util/profile.service';
+import {UserProfileDialogComponent} from "./user-profile/user-profile-dialog.component";
 
 const daysOfWeek: string[] = [
   'po',
@@ -83 +84 @@
       );
   }
 
+  openUserProfile(user: User): void {
+    this.dialog.open(UserProfileDialogComponent, {
+      data: {
+        userId: user.id
+      },
+      width: '1100px'
+    });
+  }
+
   /**
    * Opens a dialog to edit users settings after closing
    * the dialog if user clicked to confirm new settings

webapp/src/app/employees/employees.module.ts

@@ -17 +17 @@
 import {NgbTimepickerModule} from '@ng-bootstrap/ng-bootstrap';
 import {SharedModule} from '../shared/shared.module';
 import { UserProfileDialogComponent } from './user-profile/user-profile-dialog.component';
+import {DayPickerModule} from '../day-picker/day-picker.module';
+import {VacationInfoModule} from '../vacation-info/vacation-info.module';
 
 @NgModule({
   declarations: [
@@ -36 +38 @@
     MatDatepickerModule,
     NgbTimepickerModule,
     MatButtonModule,
-    SharedModule
+    DayPickerModule,
+    SharedModule,
+    VacationInfoModule
   ],
   entryComponents: [
     EditEmployeeDialogComponent,

webapp/src/app/employees/user-profile/user-profile-dialog.component.html

@@ -1 @@
-<p>
-  user-profile works!
-</p>
+<div mat-dialog-content style="height: 100%">
+  <div class="row">
+    <div class="col-md-9">
+      <app-day-picker #dayPicker
+        (selectedMonth)="onSelectedMonthChange($event)"
+      >
+      </app-day-picker>
+    </div>
+    <div class="col-md-3" *ngIf="profile">
+      <div class="user-info">
+        <img class="user-photo" src="{{profile.photo}}" />
+        <span class="user-name">{{profile.firstName}} {{profile.lastName}}</span>
+      </div>
+      <app-vacation-info
+        [sickDaysRemaining]="profile.sickdayCount"
+        [extraVacationRemaining]="profile.vacationCount"
+      ></app-vacation-info>
+    </div>
+  </div>
+</div>
+
+<div mat-dialog-actions align="end">
+  <button mat-raised-button color="basic" (click)="onCloseClick()">Zavřít</button>
+</div>

webapp/src/app/employees/user-profile/user-profile-dialog.component.sass

@@ +1 @@
+@import '../../../common-styles/basic-component'
+
+.user-info
+  @extend .basic-component
+  margin-bottom: 10px
+
+  .user-photo
+    width: 35px
+    height: 35px
+    border-radius: 20px
+
+  .user-name
+    font-weight: bold
+    margin-left: 10px

webapp/src/app/employees/user-profile/user-profile-dialog.component.ts

@@ -1 @@
-import {Component, Inject, OnInit} from '@angular/core';
+import {AfterViewInit, Component, Inject, OnInit, ViewChild} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
 import {UserProfile} from '../../models/user.model';
 import {Calendar} from '../../models/calendar.model';
+import {RequestStatus} from '../../enums/common.enum';
+import {UserService} from '../../services/api/user.service';
+import {DateToolsService} from '../../services/util/date-tools.service';
+import {LocalizationService} from '../../localization/localization.service';
 
 @Component({
   selector: 'app-user-profile',
   templateUrl: './user-profile-dialog.component.html',
   styleUrls: ['./user-profile-dialog.component.sass']
 })
-export class UserProfileDialogComponent implements OnInit {
+export class UserProfileDialogComponent implements OnInit, AfterViewInit {
+  @ViewChild('dayPicker') calendar;
+
+  private profile: UserProfile;
 
   constructor(
     public dialogRef: MatDialogRef<UserProfileDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: UserProfileDialogData
+    @Inject(MAT_DIALOG_DATA) public data: UserProfileDialogData,
+    private userService: UserService,
+    private dateToolsService: DateToolsService,
+    private localizationService: LocalizationService
   ) { }
 
   ngOnInit() {
+
+  }
+
+
+  ngAfterViewInit(): void {
+    this.loadProfile();
+    this.loadMonthVacation(this.dateToolsService.toStartOfMonth(new Date()));
+  }
+
+  onSelectedMonthChange(monthStart: Date) {
+    this.loadMonthVacation(monthStart);
   }
 
   onCloseClick(): void {
-    this.dialogRef.close({
-      isConfirmed: false
-    });
+    this.dialogRef.close();
+  }
+
+  private loadProfile() {
+    this.userService.getUserProfile(this.data.userId)
+      .subscribe((data: UserProfile) => this.profile = data);
+  }
+
+  private loadMonthVacation(month: Date) {
+    const fromDate = this.dateToolsService.toStartOfMonth(month);
+    const toDate = this.dateToolsService.toEndOfMonth(fromDate);
+
+    this.userService.getUserCalendarWithOptions(String(this.data.userId), fromDate, toDate, this.localizationService.getCurrentLanguage(), RequestStatus.ACCEPTED)
+      .subscribe((data: Calendar[]) => {
+        if (data) {
+          this.calendar.setVacation(data);
+        }
+      });
   }
 }
 
 export class UserProfileDialogData {
-  profile: UserProfile;
-  calendar: Calendar[];
+  userId: number;
 }

webapp/src/app/localization/localization.service.ts

@@ -40 +40 @@
         return Languages.ENGLISH;
     }
   }
+
+  getCurrentLocale(): string {
+    return this.currentLanguage;
+  }
 }

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

@@ -1 +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',
+  selector: 'app-vacation-info',
   templateUrl: './vacation-info.component.html',
   styleUrls: ['./vacation-info.component.sass']
 })