Revize 79d7de40

Re#7459 Implemented first popup

webapp/src/app/employees/edit-employee-dialog/edit-employee-dialog.component.html

@@ +1 @@
+<h1 mat-dialog-title>
+  <img
+    [src]="data.imageLink"
+    alt="photo"
+    style="width: 35px; height: 35px; margin-right: 5px"
+  >
+  {{data.name}}
+</h1>
+<hr>
+<div mat-dialog-content>
+  <div>
+    <mat-radio-group
+      aria-labelledby="example-radio-group-label"
+      class="example-radio-group"
+      [(ngModel)]="userType"
+    >
+      <mat-radio-button
+        class="example-radio-button"
+        *ngFor="let season of _userTypes" [value]="season"
+      >
+        {{season}}
+      </mat-radio-button>
+    </mat-radio-group>
+  </div>
+  <div>
+    <mat-form-field class="example-margin">
+      <input
+        matInput
+        type="number"
+        placeholder="Sickdays"
+        min="1"
+        value="20"
+        [(ngModel)]="_sickDaysCount"
+      >
+    </mat-form-field>
+  </div>
+  <div>
+
+  </div>
+  <mat-form-field class="example-margin">
+    <input
+      matInput
+      type="number"
+      placeholder="Dovolená"
+      min="1"
+      value="20"
+      [(ngModel)]="_vacationDaysCount"
+    >
+  </mat-form-field>
+</div>
+<div mat-dialog-actions>
+  <button class="btn btn-primary" style="margin-right: 5px" (click)="onConfirmClick()">Potvrdit</button>
+  <button class="btn btn-danger" (click)="onCloseClick()">Zavřít</button>
+</div>

webapp/src/app/employees/edit-employee-dialog/edit-employee-dialog.component.sass

@@ +1 @@
+.example-radio-group
+  display: flex
+  flex-direction: column
+
+
+.example-radio-button
+  margin: 5px

webapp/src/app/employees/edit-employee-dialog/edit-employee-dialog.component.ts

@@ +1 @@
+import {Component, Inject, Input, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
+import {User} from '../user.model';
+import {UserType} from '../../enums/common.enum';
+
+
+@Component({
+  selector: 'app-edit-employee-dialog',
+  templateUrl: './edit-employee-dialog.component.html',
+  styleUrls: ['./edit-employee-dialog.component.sass']
+})
+export class EditEmployeeDialogComponent implements OnInit {
+  readonly _userTypes: string[] = ['Zaměstnanec', 'Zaměstnavatel'];
+  private _sickDaysCount: number;
+  private _vacationDaysCount: number;
+  private _userType: UserType;
+
+  constructor(public dialogRef: MatDialogRef<EditEmployeeDialogComponent>,
+              @Inject(MAT_DIALOG_DATA) public data: User) {
+
+  }
+
+  ngOnInit() {
+  }
+
+  @Input()
+  set userType(userType: string) {
+    this._userType = UserType.EMPLOYEE;
+    console.log('intercepted ' + this._userType);
+  }
+
+  onConfirmClick(): void {
+    this.dialogRef.close();
+  }
+
+
+  onCloseClick(): void {
+    this.dialogRef.close();
+  }
+
+}

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

@@ -14 +14 @@
     </thead>
     <tbody>
     <tr *ngFor="let user of users">
-      <th scope="row">{{user.name}}</th>
+      <th scope="row">
+        <img
+          alt="photo"
+          [src]="user.imageLink"
+          style="width: 35px; height: 35px; margin-right: 5px"
+        >
+        {{user.name}}
+      </th>
       <td *ngFor="let date of user.dates">
 
         <div
@@ -25 +32 @@
         </div>
       </td>
       <td>
-        <span class="material-icons" style="font-size: small">edit</span>
+        <span class="material-icons" style="font-size: small" (click)="openDialog(user)">edit</span>
       </td>
     </tr>
     </tbody>

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

@@ -2 +2 @@
 import {UserBasicInformation} from '../models/user-basic-information.model';
 import {UsersService} from '../services/users.service';
 import {VacationType} from '../enums/common.enum';
-
-class DayInfo {
-  date: Date;
-  type: VacationType;
-}
-
-class User {
-  id: number;
-  name: string;
-  dates: DayInfo[];
-}
+import {MatDialog} from '@angular/material';
+import {EditEmployeeDialogComponent} from './edit-employee-dialog/edit-employee-dialog.component';
+import {DayInfo, User} from './user.model';
 
 const daysOfWeek: string[] = [
   'po',
@@ -30 +22 @@
   styleUrls: ['./employees-list.component.sass']
 })
 export class EmployeesListComponent implements OnInit {
-  private users: User[];
-  private days: string[];
-  private dates: Date[];
-  private employeesBasicInformation: UserBasicInformation[] = [];
-  readonly todayDate: Date = new Date();
+  days: string[];
+  private _users: User[];
+  private _dates: Date[];
+  private _employeesBasicInformation: UserBasicInformation[] = [];
+  readonly _todayDate: Date = new Date();
 
-  constructor(private usersService: UsersService) {
+  constructor(private usersService: UsersService, public dialog: MatDialog) {
     this.generateDays();
     this.generateDates();
     this.editDates();
   }
 
+  openDialog(user: User): void {
+    this.dialog.open(EditEmployeeDialogComponent, {
+     data: user,
+   });
+  }
+
   private generateDays(): void {
     this.days = [];
 
-    for (let i = this.todayDate.getDay() - 8; i < this.todayDate.getDay() + 7; i++) {
+    for (let i = this._todayDate.getDay() - 8; i < this._todayDate.getDay() + 7; i++) {
       this.days.push(daysOfWeek[((i % 7) + 7) % 7]);
     }
   }
 
-  private generateDates() {
-    this.dates = [];
+  private generateDates(): void {
+    this._dates = [];
     for (let i = 0; i < 15; i++) {
-      this.dates.push(new Date());
+      this._dates.push(new Date());
     }
   }
 
@@ -62 +60 @@
     let date: Date;
 
     for (let i = -7; i < 8; i++) {
-      date = this.dates[j++];
+      date = this._dates[j++];
       date.setDate(date.getDate() + i);
     }
   }
 
   private mapUsers(): void {
     let user: User;
-    this.users = [];
+    this._users = [];
 
-    for (const info of this.employeesBasicInformation) {
+    for (const info of this._employeesBasicInformation) {
       user = new User();
       user.name = info.name.first + ' ' + info.name.last;
       user.id = info.id;
+      user.imageLink = info.photo;
       user.dates = this.mapDays(info);
-      this.users.push(user);
+      this._users.push(user);
     }
   }
 
   private mapDays(user: UserBasicInformation): DayInfo[] {
     const dayInfo: DayInfo[] = [];
 
-    for (const date of this.dates) {
+    for (const date of this._dates) {
       const day: DayInfo = new DayInfo();
       day.type = VacationType.NONE;
 
@@ -106 +105 @@
     this.usersService.getAuthorizedUsers()
       .subscribe((data: UserBasicInformation[]) => {
         for (const entry of data) {
-          this.employeesBasicInformation.push(entry);
+          this._employeesBasicInformation.push(entry);
         }
         this.mapUsers();
-        console.log(this.users);
+        console.log(this._users);
       });
   }
 

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

@@ -1 +1 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {EmployeesListComponent} from './employees-list.component';
-import {MatTableModule} from '@angular/material';
+import {MatDialogModule, MatFormFieldModule, MatInputModule, MatRadioModule, MatTableModule} from '@angular/material';
+import {EditEmployeeDialogComponent} from './edit-employee-dialog/edit-employee-dialog.component';
+import {FormsModule} from '@angular/forms';
 
 @NgModule({
   declarations: [
     EmployeesListComponent,
+    EditEmployeeDialogComponent
   ],
   imports: [
     CommonModule,
-    MatTableModule
+    MatTableModule,
+    MatFormFieldModule,
+    FormsModule,
+    MatInputModule,
+    MatDialogModule,
+    MatRadioModule
+  ],
+  entryComponents: [
+    EditEmployeeDialogComponent,
   ]
 })
 export class EmployeesModule { }

webapp/src/app/employees/user.model.ts

@@ +1 @@
+import {VacationType} from '../enums/common.enum';
+
+export class DayInfo {
+  date: Date;
+  type: VacationType;
+}
+
+export class User {
+  id: number;
+  name: string;
+  imageLink: string;
+  dates: DayInfo[];
+}
+

webapp/src/app/menu/menu.component.html

@@ -1 +1 @@
 <div class="navigation">
   <nav class="navbar">
     <ul class="navbar-nav">
-      <li *ngFor="let item of menuItems"
-          [class.selected]="item === selectedMenuItem"
+      <li *ngFor="let item of _menuItems"
+          [class.selected]="item === _selectedMenuItem"
           (click)="onSelect(item)"
           class="nav-item">
         <a routerLink="{{item.routePath}}"><div>{{item.name}}</div></a>

webapp/src/app/menu/menu.component.ts

@@ -8 +8 @@
   styleUrls: ['./menu.component.sass']
 })
 export class MenuComponent implements OnInit {
-  menuItems: MenuItem[];
-  selectedMenuItem: MenuItem;
+  _menuItems: MenuItem[];
+  private _selectedMenuItem: MenuItem;
 
 
   getMenuItems(): void {
     this.menuService.getMenuItems()
-      .subscribe(menuItems => this.menuItems = menuItems);
+      .subscribe(menuItems => this._menuItems = menuItems);
   }
 
   onSelect(menuItem: MenuItem): void {
-    this.selectedMenuItem = menuItem;
+    this._selectedMenuItem = menuItem;
   }
 
   constructor(private menuService: MenuService) { }

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

@@ -12 +12 @@
   providedIn: 'root'
 })
 export class UserService extends BasicService { // dost podobny k usersService, mozna zmenit v rest api
-  private calendarUrl = this.baseUrl + '/user/calendar';
-  private postRequestUrl = this.baseUrl + '/user/requests?type=';
-  private userUrl = this.baseUrl + '/user/';
+  private _calendarUrl = this.baseUrl + '/user/calendar';
+  private _postRequestUrl = this.baseUrl + '/user/requests?type=';
+  private _userUrl = this.baseUrl + '/user/';
 
   getEmployeeProfile(id: number) { // najit jinej zpusob formatovani stringu, prasarna
-    return this.http.get<UserProfile>(this.userUrl + id + '/profile');
+    return this.http.get<UserProfile>(this._userUrl + id + '/profile');
   }
 
   getMonthlyCalendar(value: number) {
@@ -29 +29 @@
   }
 
   private getCalendar(viewType: string, value: number) {
-    return this.http.get<Calendar[]>(this.calendarUrl + '?viewType=' + viewType + '&value=' + value)
+    return this.http.get<Calendar[]>(this._calendarUrl + '?viewType=' + viewType + '&value=' + value)
       .pipe(
         catchError(err => this.handleError(err))
       );
@@ -44 +44 @@
   }
 
   private postCalendarWithOptions(calendar: Calendar[], options: any) {
-    return this.http.post<Calendar[]>(this.calendarUrl, calendar, options)
+    return this.http.post<Calendar[]>(this._calendarUrl, calendar, options)
       .pipe(
         catchError(err => this.handleError(err))
       );
@@ -67 +67 @@
   }
 
   private postRequestWithTypeAndOptions(request: PostRequest, type: string, options: any) {
-    return this.http.post<PostRequest>(this.postRequestUrl + type, request, options)
+    return this.http.post<PostRequest>(this._postRequestUrl + type, request, options)
       .pipe(
         catchError(err => this.handleError(err))
       );
@@ -82 +82 @@
   }
 
   private postUserSettingsWithOptions(id: number, settings: PostSettings, options: any) {
-    return this.http.post<PostSettings>(this.userUrl + id + '/settings', settings, options)
+    return this.http.post<PostSettings>(this._userUrl + id + '/settings', settings, options)
       .pipe(
         catchError(err => this.handleError(err))
       );

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

@@ -1 +1 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { BasicService } from './basic.service';
-import {catchError, map} from 'rxjs/operators';
+import {catchError} from 'rxjs/operators';
 
 import {UserBasicInformation} from '../models/user-basic-information.model';
 import { Requests } from '../models/requests.model';
@@ -12 +12 @@
   providedIn: 'root'
 })
 export class UsersService extends BasicService {
-  private usersUrl = this.baseUrl + '/users?status=';
-  private requestsUrl = this.baseUrl + '/users/requests?type=';
+  private _usersUrl = this.baseUrl + '/users?status=';
+  private _requestsUrl = this.baseUrl + '/users/requests?type=';
 
   getAuthorizedUsers() {
     return this.getUsersWithStatus(ProfileStatus.AUTHORIZED);
@@ -28 +28 @@
   }
 
   private getUsersWithStatus(status: string): Observable<UserBasicInformation[]> {
-    console.log(this.usersUrl + status);
-    return this.http.get<UserBasicInformation[]>(this.usersUrl + status)
+    console.log(this._usersUrl + status);
+    return this.http.get<UserBasicInformation[]>(this._usersUrl + status)
       .pipe(
         catchError(err => this.handleError(err))
       );
@@ -44 +44 @@
   }
 
   private getRequestsWithType(type: string) {
-    return this.http.get<Requests>(this.requestsUrl + type)
+    return this.http.get<Requests>(this._requestsUrl + type)
       .pipe(
         catchError(err => this.handleError(err))
       );