Revize 7def46a6

Re #7263 Employer dashboard component implemented

frontend/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 *ngIf="usersToApprove.length > 0" class="employer-dashboard-user-approval">
+        <app-user-approval
+          [usersToApprove]="usersToApprove"
+          (userApprovedAction)="userApproved($event.user, $event.approved)"
+        ></app-user-approval>
+      </div>
+
+      <div *ngIf="daysOffToApprove.length > 0" class="employer-dashboard-days-off-approval">
+        <app-days-off-approval
+          [daysOffToApprove]="daysOffToApprove"
+          (daysOffApprovalAction)="daysOffApproved($event.daysOff, $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>
+
+      <div class="employer-dashboard-day-picker">
+        <app-day-picker
+          (selectedDate)="onDateSelect($event)"
+        ></app-day-picker>
+      </div>
+
+    </div>
+
+    <div class="col-lg-4 right-panel">
+
+      <app-days-off-info
+        [sickDaysRemaining]="5"
+        [sickDaysUsed]="3"
+        [extraVacationRemaining]="10"
+      ></app-days-off-info>
+
+    </div>
+  </div>
+</div>

frontend/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-days-off-approval
+  padding: 0 0 10px 0
+
+.employer-dashboard-coming-days-off
+  padding: 0 0 10px 0

frontend/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';
+
+@Component({
+  selector: 'app-employer-dashboard',
+  templateUrl: './employer-dashboard.component.html',
+  styleUrls: ['./employer-dashboard.component.sass']
+})
+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' }
+  ];
+
+  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() { }
+
+  ngOnInit() {
+    this.oncomingDaysOff = this.calculateComingDaysOff();
+  }
+
+  onDateSelect( date: Date ) {
+    console.log('Date selected: ' + date.toDateString());
+  }
+
+  userApproved( user: UserToApprove, approved: boolean ) {
+    console.log(user.name + ' - approved: ' + approved);
+    this.usersToApprove.splice(
+      this.usersToApprove.indexOf(user), 1
+    );
+  }
+
+  daysOffApproved(daysOff: DaysOff, approved: boolean ) {
+    console.log(daysOff.username + ', ' + approved);
+    this.daysOffToApprove.splice(
+      this.daysOffToApprove.indexOf(daysOff), 1
+    );
+  }
+
+  daysOffRemoved(daysOff: DaysOff) {
+    this.daysOff.splice(
+      this.daysOff.indexOf(daysOff), 1
+    );
+    this.oncomingDaysOff.splice(
+      this.oncomingDaysOff.indexOf(daysOff), 1
+    );
+  }
+
+  private calculateComingDaysOff(): DaysOff[] {
+    let oncomingDaysOff: DaysOff[] = [];
+
+    const today = new Date();
+    this.daysOff.forEach((dayOff) => {
+      if (dayOff.dateTo >= today) {
+        oncomingDaysOff.push(dayOff);
+      }
+    });
+
+    return oncomingDaysOff;
+  }
+}

frontend/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 { DaysOffInfoModule } from '../../days-off-info/days-off-info.module';
+import { UserApprovalModule } from '../../user-approval/user-approval.module';
+import { DaysOffApprovalModule } from '../../days-off-approval/days-off-approval.module';
+import { OncomingDaysOffModule } from '../../oncoming-days-off/oncoming-days-off.module';
+
+@NgModule({
+  declarations: [ EmployerDashboardComponent ],
+  exports:      [ EmployerDashboardComponent ],
+  imports: [
+    CommonModule,
+    DayPickerModule,
+    DaysOffInfoModule,
+    UserApprovalModule,
+    DaysOffApprovalModule,
+    DayPickerModule,
+    OncomingDaysOffModule
+  ]
+})
+export class EmployerDashboardModule { }