Revize 0e8e77b3

Re #7500 Day picker component modified - displaying vacations + emits change of month

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

@@ -24 +24 @@
       <div class="employer-dashboard-day-picker">
         <app-day-picker
           (selectedDate)="onDateSelect($event)"
+          (selectedMonth)="onMonthSelect($event)"
         ></app-day-picker>
       </div>
 

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

@@ -76 +76 @@
       }
     });
   }
+
+  onMonthSelect(month: number) {
+    // TODO API CALL
+    console.log(month);
+  }
 }

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

@@ -2 +2 @@
   <div class="row text-center day-picker-month-selection">
     <div class="col-4"></div>
     <div class="col-1">
-      <div class="btn btn-primary"
-           mwlCalendarPreviousView
-           [view]="view"
-           [(viewDate)]="viewDate"
+      <button
+        mat-icon-button
+        mwlCalendarPreviousView
+        [view]="view"
+        [(viewDate)]="viewDate"
+        (click)="setMonth(currentMonth - 1)"
       >
-        <
-      </div>
+        <i class="material-icons change-month">navigate_before</i>
+      </button>
     </div>
     <div class="col-2">
       <span id="day-picker-date">{{ viewDate | calendarDate:(view + 'ViewTitle'):locale }}</span>
     </div>
     <div class="col-1">
-      <div class="btn btn-primary"
-           mwlCalendarNextView
-           [view]="view"
-           [(viewDate)]="viewDate"
+      <button
+        mat-icon-button
+        mwlCalendarNextView
+        [view]="view"
+        [(viewDate)]="viewDate"
+        (click)="setMonth(currentMonth + 1)"
       >
-        >
-      </div>
+        <i class="material-icons change-month">navigate_next</i>
+      </button>
       <div class="col-4"></div>
     </div>
   </div>
 
-  <!-- Refresh attribute for localization purposes (refresh component after change of language -->
+  <!-- Refresh attribute for localization purposes (refresh component after change of language) -->
   <mwl-calendar-month-view
     [viewDate]="viewDate"
-    (dayClicked)="dayClicked($event.day)"
-    weekStartsOn="1"
     [locale]="locale"
     [refresh]="localizationService.currentLanguage"
+    [events]="events"
+    [cellTemplate]="customCellTemplate"
+    (dayClicked)="dayClicked($event.day)"
+    weekStartsOn="1"
   >
   </mwl-calendar-month-view>
+
+  <ng-template #customCellTemplate let-day="day" let-locale="locale">
+    <div class="cal-cell-top">
+      <span class="cal-day-number">
+        {{ day.date | calendarDate:'monthViewDayNumber':locale }}
+      </span>
+    </div>
+      <span class="vacation-type" *ngFor="let event of day.events">
+        <i class="material-icons sickday" *ngIf="event.title == vacationType.SICKDAY">local_hospital</i>
+        <i class="material-icons vacation" *ngIf="event.title == vacationType.VACATION">beach_access</i>
+
+        {{ event.start | date:'HH:mm' }} - {{ event.end | date:'HH:mm' }}
+      </span>
+  </ng-template>
 </div>

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

@@ -6 +6 @@
 #day-picker-date
   font-weight: bold
   text-transform: uppercase
+  line-height: 45px
+  text-align: center
+
 
 .day-picker-month-selection
   margin-bottom: 10px
+  button
+    outline: none
+    border: 0
+  .change-month
+    color: blue
+
+
+
+.vacation-type
+  font-size: 10px
+  .material-icons
+    font-size: 14px
+  .sickday
+    color: red
+  .vacation
+    color: blue

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

@@ -1 @@
-import { Component, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
-import { CalendarView } from 'angular-calendar';
+import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
+import { CalendarView, CalendarEvent } from 'angular-calendar';
 import {LocalizationService} from '../localization/localization.service';
+import {VacationType} from '../enums/common.enum';
 
 @Component({
   selector: 'app-day-picker',
@@ -12 +13 @@
 
   private locale;
 
+  private vacationType = VacationType;
+
+  private currentMonth: number;
+
   // Type of calendar (constant)
   view: CalendarView = CalendarView.Month;
 
   // Selected date for this component's purpose
-  private viewDate: Date = new Date();
+  private viewDate: Date;
+
+  // Events which are shown in calendar (title = VacationType)
+  @Input() events: CalendarEvent[] = [];
 
   // EventEmitter informing about changes of selected date
   @Output() selectedDate = new EventEmitter<Date>();
 
+  // EventEmitter informing about changes of selected month
+  @Output() selectedMonth = new EventEmitter<number>();
+
   constructor(private localizationService: LocalizationService) {
     this.locale = localizationService.defaultLanguage;
     localizationService.currentLanguage
       .subscribe((data) => {
         this.locale = data;
       });
+
+    this.viewDate = new Date();
+    this.currentMonth = this.viewDate.getMonth();
+    console.log(this.currentMonth);
   }
 
   /**
@@ -39 +54 @@
     this.viewDate = date;
     this.selectedDate.emit(date);
   }
+
+  private setMonth(newMonth: number): void {
+    this.currentMonth = newMonth % 12;
+    if (this.currentMonth < 0) {
+      this.currentMonth = 11;
+    }
+    this.selectedMonth.emit(this.currentMonth);
+  }
 }

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

@@ -3 +3 @@
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 import { DayPickerComponent } from './day-picker.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {MatButtonModule} from '@angular/material';
 
 @NgModule({
   declarations: [ DayPickerComponent ],
@@ -12 +13 @@
                     provide: DateAdapter,
                     useFactory: adapterFactory
                   }),
-                  BrowserAnimationsModule
+                  BrowserAnimationsModule,
+                  MatButtonModule
                 ],
 })
 export class DayPickerModule {}