1
|
import {ChangeDetectionStrategy, Component, EventEmitter, Output} from '@angular/core';
|
2
|
import {CalendarEvent, CalendarView} from 'angular-calendar';
|
3
|
import {LocalizationService} from '../localization/localization.service';
|
4
|
import {VacationType} from '../enums/common.enum';
|
5
|
import {Calendar} from '../models/calendar.model';
|
6
|
import {DateToolsService} from '../services/util/date-tools.service';
|
7
|
import {Subject} from 'rxjs';
|
8
|
|
9
|
@Component({
|
10
|
selector: 'app-day-picker',
|
11
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
12
|
styleUrls: ['day-picker.component.sass'],
|
13
|
templateUrl: 'day-picker.component.html'
|
14
|
})
|
15
|
export class DayPickerComponent {
|
16
|
|
17
|
private locale;
|
18
|
|
19
|
private vacationType = VacationType;
|
20
|
|
21
|
private currentMonth: number;
|
22
|
|
23
|
private currentYear: number;
|
24
|
|
25
|
// Type of calendar (constant)
|
26
|
view: CalendarView = CalendarView.Month;
|
27
|
|
28
|
// Selected date for this component's purpose
|
29
|
private viewDate: Date;
|
30
|
|
31
|
// Events which are shown in calendar (title = VacationType)
|
32
|
private events: CalendarEvent[] = [];
|
33
|
|
34
|
// EventEmitter informing about changes of selected date
|
35
|
@Output() selectedDate = new EventEmitter<Date>();
|
36
|
|
37
|
// EventEmitter informing about changes of selected month (emits start of the selected month)
|
38
|
@Output() selectedMonth = new EventEmitter<Date>();
|
39
|
|
40
|
private refresh: Subject<any> = new Subject();
|
41
|
|
42
|
constructor(
|
43
|
private localizationService: LocalizationService,
|
44
|
private dateToolsService: DateToolsService) {
|
45
|
|
46
|
this.locale = localizationService.getCurrentLocale();
|
47
|
localizationService.currentLanguageSubject
|
48
|
.subscribe((data) => {
|
49
|
this.locale = data;
|
50
|
});
|
51
|
|
52
|
this.viewDate = new Date();
|
53
|
this.currentMonth = this.viewDate.getMonth();
|
54
|
this.currentYear = this.viewDate.getFullYear();
|
55
|
|
56
|
// Calendar component needs to be refreshed on language switch or else language switch doesn't have an effect
|
57
|
this.localizationService.currentLanguageSubject.subscribe(e => this.refresh.next());
|
58
|
}
|
59
|
|
60
|
public setVacation(vacations: Calendar[]) {
|
61
|
this.events = [];
|
62
|
|
63
|
for (const vac of vacations) {
|
64
|
this.events.push({
|
65
|
start: this.dateToolsService.toDate(vac.date, vac.from),
|
66
|
end: this.dateToolsService.toDate(vac.date, vac.to),
|
67
|
title: vac.type
|
68
|
});
|
69
|
}
|
70
|
|
71
|
this.refresh.next();
|
72
|
}
|
73
|
|
74
|
/**
|
75
|
* Method that is invoked when user clicks on a day.
|
76
|
* Sets selected date and emits event informing about new selected date.
|
77
|
*
|
78
|
* @param date Selected date
|
79
|
*/
|
80
|
private dayClicked({ date }: { date: Date }): void {
|
81
|
this.viewDate = date;
|
82
|
this.selectedDate.emit(date);
|
83
|
}
|
84
|
|
85
|
private setMonth(newMonth: number): void {
|
86
|
this.currentMonth = newMonth % 12;
|
87
|
if (newMonth < 0) {
|
88
|
this.currentMonth = 11;
|
89
|
this.currentYear--;
|
90
|
} else if (newMonth > 11) {
|
91
|
this.currentMonth = 0;
|
92
|
this.currentYear++;
|
93
|
} else {
|
94
|
this.currentMonth = newMonth;
|
95
|
}
|
96
|
|
97
|
this.selectedMonth.emit(new Date(this.currentYear, this.currentMonth, 1, 0, 0, 0));
|
98
|
}
|
99
|
}
|