Revize 7c56b223

Re#7470 Implemented basic table

webapp/src/app/app-routing.module.ts

@@ -1 +1 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import {EmployeesListComponent} from './employees-list/employees-list.component';
+import {EmployeesListComponent} from './employees/employees-list.component';
 import {DashboardComponent} from './dashboard/dashboard.component';
 
 const routes: Routes = [

webapp/src/app/app.module.ts

@@ -4 +4 @@
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { MenuComponent } from './menu/menu.component';
-import { EmployeesListComponent } from './employees-list/employees-list.component';
 import { DashboardModule } from './dashboard/dashboard.module';
 import { HeaderComponent } from './header/header.component';
 import { MatDialogModule } from '@angular/material';
 import {ProfileSettingsModule} from './profile-settings/profile-settings.module';
 import {HttpClientModule} from '@angular/common/http';
+import {EmployeesModule} from './employees/employees.module';
 
 @NgModule({
   declarations: [
     AppComponent,
     MenuComponent,
-    EmployeesListComponent,
     HeaderComponent
   ],
   imports: [
@@ -24 +23 @@
     AppRoutingModule,
     DashboardModule,
     MatDialogModule,
-    ProfileSettingsModule
+    ProfileSettingsModule,
+    EmployeesModule
   ],
   providers: [],
   bootstrap: [AppComponent]

webapp/src/app/employee-list-item/employee-list-item.component.html

@@ -1 @@
-<p>
-  employee-list-item works!
-</p>

webapp/src/app/employee-list-item/employee-list-item.component.spec.ts

@@ -1 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { EmployeeListItemComponent } from './employee-list-item.component';
-
-describe('EmployeeListItemComponent', () => {
-  let component: EmployeeListItemComponent;
-  let fixture: ComponentFixture<EmployeeListItemComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ EmployeeListItemComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(EmployeeListItemComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

webapp/src/app/employee-list-item/employee-list-item.component.ts

@@ -1 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-employee-list-item',
-  templateUrl: './employee-list-item.component.html',
-  styleUrls: ['./employee-list-item.component.sass']
-})
-export class EmployeeListItemComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

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

@@ -1 @@
-<div>
-  <div>
-    <h3>Zaměstnanci
-      <span class="material-icons">add</span>
-      <span class="material-icons">edit</span>
-    </h3>
-    <div *ngIf="employeesBasicInformation">
-      {{employeesBasicInformation[0].name.first}}
-      {{employeesBasicInformation[0].calendar[0].date}}
-      {{employeesBasicInformation[0].calendar[0].from}}
-      {{employeesBasicInformation[0].calendar[0].to}}
-<!--      {{employeesBasicInformation[0].calendar[1].date}}-->
-    </div>
-    <div *ngIf="employeeProfile">
-      {{employeeProfile.photo}}
-      {{employeeProfile.name.last}}
-    </div>
-    <div *ngIf="requests">
-<!--      {{requests.vacation[0].user.name.first}}-->
-<!--      {{requests.vacation[0].date}}-->
-      {{requests.vacation[0].from}}
-<!--      {{requests.authorization[0].date}}-->
-    </div>
-    <div *ngIf="calendars">
-      {{calendars[0].status}}
-      {{calendars[0].to}}
-    </div>
-
-    <div *ngIf="settings">
-      {{settings.sickDay.unit}}
-    </div>
-    <button (click)="doSomethingFancy()">SUPER BUTTON ZKUS ME</button>
-  </div>
-  <hr>
-</div>

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

@@ -1 @@
-.material-icons
-    display: inline-flex
-    align-items: center
-    justify-content: center
-    vertical-align: middle
-

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

@@ -1 @@
-import {Component, OnInit} from '@angular/core';
-import {UserBasicInformation} from '../models/user-basic-information.model';
-import {UserProfile} from '../models/user-profile.model';
-import {UsersService} from '../services/users.service';
-import {UserService} from '../services/user.service';
-import {Requests} from '../models/requests.model';
-import {Calendar} from '../models/calendar.model';
-import {SettingsService} from '../services/settings.service';
-import {Settings} from '../models/settings.model';
-import {PostRequest, PostSettings} from '../models/post-requests.model';
-import {RequestStatus, TimeUnit, UserType} from '../enums/common.enum';
-
-@Component({
-  selector: 'app-employees-list',
-  templateUrl: './employees-list.component.html',
-  styleUrls: ['./employees-list.component.sass']
-})
-export class EmployeesListComponent implements OnInit {
-
-  employeesBasicInformation: UserBasicInformation[];
-  employeeProfile: UserProfile;
-  requests: Requests;
-  calendars: Calendar[];
-  settings: Settings;
-
-  doSomethingFancy(): void {
-    console.log('klikam');
-    this.settingsService.postDefaultSettingsWithResponse(this.settings)
-      .subscribe(resp => console.log(resp));
-
-    this.userService.postCalendarWithResponse(this.calendars)
-      .subscribe(resp => console.log(resp));
-
-    const request: PostRequest = {
-      id: 10,
-      status: RequestStatus.ACCEPTED,
-    };
-    this.userService.postAuthorizationRequestWithResponse(request)
-      .subscribe(resp => console.log(resp));
-
-    const settings: PostSettings = {
-      role: UserType.EMPLOYEE,
-      sickday: {
-        unit: TimeUnit.DAY,
-        value: 10,
-      },
-      vacation: {
-        unit: TimeUnit.DAY,
-        value: 10,
-      },
-    };
-
-    this.userService.postUserSettingsWithResponse(1, settings)
-      .subscribe(resp => console.log(resp));
-  }
-
-  constructor(private usersService: UsersService,
-              private userService: UserService,
-              private settingsService: SettingsService) {
-  }
-
-  ngOnInit() {
-    this.usersService.getAuthorizedUsers()
-      .subscribe((data: UserBasicInformation[]) => this.employeesBasicInformation = { ...data});
-
-    this.userService.getEmployeeProfile(1)
-      .subscribe((data: UserProfile) => this.employeeProfile = { ...data});
-
-    this.usersService.getAuthorizationRequests()
-      .subscribe((data: Requests) => this.requests = { ...data});
-
-    this.userService.getMonthlyCalendar(1)
-      .subscribe((data: Calendar[]) => this.calendars = { ...data});
-
-    this.settingsService.getDefaultSettings()
-      .subscribe((data: Settings) => this.settings = { ...data});
-  }
-
-}

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

@@ +1 @@
+<div class="employee-component">
+  <h3>Zaměstnanci
+    <span class="material-icons" style="font-size: medium; margin-right: 5px">add</span>
+    <span class="material-icons" style="font-size: medium">edit</span>
+  </h3>
+
+  <table class="table text-center table-hover">
+    <thead class="thead-light">
+    <tr>
+      <th scope="col" style="width: 15%">Celé jméno</th>
+      <th scope="col" style="width: 5.0%" *ngFor="let day of days">{{day}}</th>
+      <th></th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr *ngFor="let user of users">
+      <th scope="row">{{user.name}}</th>
+      <td *ngFor="let date of user.dates">
+
+        <div
+          [class.sickday]="date.type === 'SICKDAY'"
+          [class.vacation]="date.type === 'VACATION'"
+        >
+          {{date.date.getDate()}}
+        </div>
+      </td>
+      <td>
+        <span class="material-icons" style="font-size: small">edit</span>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</div>

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

@@ +1 @@
+@import '../../common-styles/basic-component'
+
+.material-icons
+    display: inline-flex
+    align-items: center
+    justify-content: center
+    vertical-align: middle
+
+.employee-component
+  @extend .basic-component
+  margin-top: 15px
+
+
+.sickday
+  background: #ffc0c0
+  border-radius: 40%
+
+.vacation
+  background-color: #68b040
+  border-radius: 40%
+  width: 40px

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

@@ +1 @@
+import {Component, OnInit} from '@angular/core';
+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[];
+}
+
+const daysOfWeek: string[] = [
+  'po',
+  'ut',
+  'st',
+  'ct',
+  'pa',
+  'so',
+  'ne',
+];
+
+@Component({
+  selector: 'app-employees-list',
+  templateUrl: './employees-list.component.html',
+  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();
+
+  constructor(private usersService: UsersService) {
+    this.generateDays();
+    this.generateDates();
+    this.editDates();
+  }
+
+  private generateDays(): void {
+    this.days = [];
+
+    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 = [];
+    for (let i = 0; i < 15; i++) {
+      this.dates.push(new Date());
+    }
+  }
+
+  private editDates(): void {
+    let j = 0;
+    let date: Date;
+
+    for (let i = -7; i < 8; i++) {
+      date = this.dates[j++];
+      date.setDate(date.getDate() + i);
+    }
+  }
+
+  private mapUsers(): void {
+    let user: User;
+    this.users = [];
+
+    for (const info of this.employeesBasicInformation) {
+      user = new User();
+      user.name = info.name.first + ' ' + info.name.last;
+      user.id = info.id;
+      user.dates = this.mapDays(info);
+      this.users.push(user);
+    }
+  }
+
+  private mapDays(user: UserBasicInformation): DayInfo[] {
+    const dayInfo: DayInfo[] = [];
+
+    for (const date of this.dates) {
+      const day: DayInfo = new DayInfo();
+      day.type = VacationType.NONE;
+
+      for (const vacationDay of user.calendar) {
+        const vacationDate: Date = new Date(vacationDay.date);
+
+        if (vacationDate.getDate() === date.getDate()) {
+          day.type = vacationDay.type;
+        }
+      }
+
+      day.date = date;
+      dayInfo.push(day);
+    }
+
+    return dayInfo;
+  }
+
+  ngOnInit() {
+    this.usersService.getAuthorizedUsers()
+      .subscribe((data: UserBasicInformation[]) => {
+        for (const entry of data) {
+          this.employeesBasicInformation.push(entry);
+        }
+        this.mapUsers();
+        console.log(this.users);
+      });
+  }
+
+}

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

@@ +1 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {EmployeesListComponent} from './employees-list.component';
+import {MatTableModule} from '@angular/material';
+
+@NgModule({
+  declarations: [
+    EmployeesListComponent,
+  ],
+  imports: [
+    CommonModule,
+    MatTableModule
+  ]
+})
+export class EmployeesModule { }