Skip to content

Commit c39080e

Browse files
justtalvlio20
justtal
authored and
vlio20
committed
Add onGoToCurrent event callback (#330)
* Add onGoToCurrent event callback * Fix imports typo
1 parent cae22ae commit c39080e

17 files changed

+167
-10
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ Put the dp-date-picker component wherever you need it.
6363
| onChange | `CalendarValue` | All Pickers | This event will be emitted on every valid value change, if you want to receive every value (valid and invalid) please use the native `ngModelChange` output. |
6464
| open | `undefined` | All Pickers | This event will be emitted when picker is opened. |
6565
| close | `CalendarValue` | All Pickers | This event will be emitted when picker is closed. |
66+
| onGoToCurrent | | All Pickers | This event will be emitted when click on go to current in navigation. |
6667

6768
### Configuration:
6869
In order to provide configurations to the date-picker you need to pass it to the `dp-date-picker` component:

‎src/app/calendar-nav/calendar-nav.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
<button type="button"
3333
class="dp-current-location-btn"
3434
*ngIf="showGoToCurrent"
35-
(click)="goToCurrent.emit()">
35+
(click)="onGoToCurrent.emit()">
3636
</button>
3737
<div class="dp-calendar-nav-container-right">
3838
<button type="button"

‎src/app/calendar-nav/calendar-nav.component.spec.ts

+9
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,13 @@ describe('CalendarNavComponent', () => {
2222
it('should create', () => {
2323
expect(component).toBeTruthy();
2424
});
25+
26+
it('should emit event when go to current click', () => {
27+
const nativeElement = fixture.nativeElement;
28+
const goToCurrent = nativeElement.querySelector('.dp-current-location-btn');
29+
30+
spyOn(component.onGoToCurrent, 'emit');
31+
goToCurrent.dispatchEvent(new Event('click'));
32+
expect(component.onGoToCurrent.emit).toHaveBeenCalledWith();
33+
});
2534
});

‎src/app/calendar-nav/calendar-nav.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export class CalendarNavComponent {
3434
@Output() onRightNav: EventEmitter<null> = new EventEmitter();
3535
@Output() onRightSecondaryNav: EventEmitter<null> = new EventEmitter();
3636
@Output() onLabelClick: EventEmitter<null> = new EventEmitter();
37-
@Output() goToCurrent: EventEmitter<null> = new EventEmitter();
37+
@Output() onGoToCurrent: EventEmitter<null> = new EventEmitter();
3838

3939
leftNavClicked() {
4040
this.onLeftNav.emit();

‎src/app/date-picker/date-picker.component.html

+6-3
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@
2222
[ngModel]="_selected"
2323
[displayDate]="displayDate"
2424
(onSelect)="dateSelected($event, 'day')"
25-
[theme]="theme">
25+
[theme]="theme"
26+
(onGoToCurrent)="onGoToCurrent.emit()">
2627
</dp-day-calendar>
2728

2829
<dp-month-calendar #monthCalendar
@@ -31,7 +32,8 @@
3132
[ngModel]="_selected"
3233
[displayDate]="displayDate"
3334
(onSelect)="dateSelected($event, 'month')"
34-
[theme]="theme">
35+
[theme]="theme"
36+
(onGoToCurrent)="onGoToCurrent.emit()">
3537
</dp-month-calendar>
3638

3739
<dp-time-select #timeSelect
@@ -48,7 +50,8 @@
4850
[displayDate]="displayDate"
4951
[ngModel]="_selected && _selected[0]"
5052
(onChange)="dateSelected($event, 'second', true)"
51-
[theme]="theme">
53+
[theme]="theme"
54+
(onGoToCurrent)="onGoToCurrent.emit()">
5255
</dp-day-time-calendar>
5356
</div>
5457
</div>

‎src/app/date-picker/date-picker.component.spec.ts

+74-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,80 @@
1+
import {FormsModule} from '@angular/forms';
12
import {DatePickerComponent} from './date-picker.component';
3+
import {DayTimeCalendarComponent} from '../day-time-calendar/day-time-calendar.component';
4+
import {DayTimeCalendarService} from '../day-time-calendar/day-time-calendar.service';
5+
import {DomHelper} from '../common/services/dom-appender/dom-appender.service';
6+
import {CalendarMode} from '../common/types/calendar-mode';
7+
import {ComponentFixture, TestBed} from '@angular/core/testing';
8+
import {DayCalendarComponent} from '../day-calendar/day-calendar.component';
9+
import {TimeSelectComponent} from '../time-select/time-select.component';
10+
import {CalendarNavComponent} from '../calendar-nav/calendar-nav.component';
11+
import {MonthCalendarComponent} from '../month-calendar/month-calendar.component';
12+
import {DayCalendarService} from '../day-calendar/day-calendar.service';
13+
import {TimeSelectService} from '../time-select/time-select.service';
14+
import {UtilsService} from '../common/services/utils/utils.service';
215

3-
describe('Component: DpDayPicker', () => {
4-
const component = new DatePickerComponent(null, null, null, null, null, null);
16+
describe('Component: DatePickerComponent', () => {
17+
let component: DatePickerComponent;
18+
let fixture: ComponentFixture<DatePickerComponent>;
519

6-
it('should create an instance', () => {
20+
const setComponentMode = function(mode: CalendarMode) {
21+
component.mode = mode;
22+
component.init();
23+
fixture.detectChanges();
24+
};
25+
26+
beforeEach(() => {
27+
TestBed.configureTestingModule({
28+
imports: [ FormsModule ],
29+
declarations: [
30+
DatePickerComponent,
31+
DayTimeCalendarComponent,
32+
DayCalendarComponent,
33+
TimeSelectComponent,
34+
CalendarNavComponent,
35+
MonthCalendarComponent
36+
],
37+
providers: [
38+
DayTimeCalendarService,
39+
DayCalendarService,
40+
TimeSelectService,
41+
UtilsService,
42+
DomHelper
43+
]
44+
}).compileComponents();
45+
});
46+
47+
beforeEach(() => {
48+
fixture = TestBed.createComponent(DatePickerComponent);
49+
component = fixture.componentInstance;
50+
fixture.detectChanges();
51+
});
52+
53+
it('should create', () => {
754
expect(component).toBeTruthy();
855
});
56+
57+
it('should emit event goToCurrent when day calendar emit', () => {
58+
setComponentMode('day');
59+
60+
spyOn(component.onGoToCurrent, 'emit');
61+
component.dayCalendarRef.onGoToCurrent.emit();
62+
expect(component.onGoToCurrent.emit).toHaveBeenCalledWith();
63+
});
64+
65+
it('should emit event goToCurrent when month calendar emit', () => {
66+
setComponentMode('month');
67+
68+
spyOn(component.onGoToCurrent, 'emit');
69+
component.monthCalendarRef.onGoToCurrent.emit();
70+
expect(component.onGoToCurrent.emit).toHaveBeenCalledWith();
71+
});
72+
73+
it('should emit event goToCurrent when daytime calendar emit', () => {
74+
setComponentMode('daytime');
75+
76+
spyOn(component.onGoToCurrent, 'emit');
77+
component.dayTimeCalendarRef.onGoToCurrent.emit();
78+
expect(component.onGoToCurrent.emit).toHaveBeenCalledWith();
79+
});
980
});

‎src/app/date-picker/date-picker.component.ts

+1
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ export class DatePickerComponent implements OnChanges,
9292
@Output() open = new EventEmitter<void>();
9393
@Output() close = new EventEmitter<void>();
9494
@Output() onChange = new EventEmitter<CalendarValue>();
95+
@Output() onGoToCurrent: EventEmitter<void> = new EventEmitter<void>();
9596

9697
@ViewChild('container') calendarContainer: ElementRef;
9798
@ViewChild('dayCalendar') dayCalendarRef: DayCalendarComponent;

‎src/app/date-picker/date-picker.directive.ts

+2
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,7 @@ export class DatePickerDirective implements OnInit {
152152
@Output() open = new EventEmitter<void>();
153153
@Output() close = new EventEmitter<void>();
154154
@Output() onChange = new EventEmitter<CalendarValue>();
155+
@Output() onGoToCurrent: EventEmitter<void> = new EventEmitter<void>();
155156

156157
public datePicker: DatePickerComponent;
157158
public api: IDpDayPickerApi;
@@ -246,6 +247,7 @@ export class DatePickerDirective implements OnInit {
246247
this.datePicker.open = this.open;
247248
this.datePicker.close = this.close;
248249
this.datePicker.onChange = this.onChange;
250+
this.datePicker.onGoToCurrent = this.onGoToCurrent;
249251

250252
this.datePicker.init();
251253

‎src/app/day-calendar/day-calendar.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
(onLeftNav)="onLeftNav()"
1010
(onRightNav)="onRightNav()"
1111
(onLabelClick)="toggleCalendar(CalendarMode.Month)"
12-
(goToCurrent)="goToCurrent()">
12+
(onGoToCurrent)="goToCurrent()">
1313
</dp-calendar-nav>
1414

1515
<div class="dp-calendar-wrapper"

‎src/app/day-calendar/day-calendar.component.spec.ts

+6
Original file line numberDiff line numberDiff line change
@@ -128,4 +128,10 @@ describe('Component: DayCalendarComponent', () => {
128128
expect(component.getWeekdayName(moment())).toBe(moment().day().toString());
129129
});
130130
});
131+
132+
it('should emit event goToCurrent function called', () => {
133+
spyOn(component.onGoToCurrent, 'emit');
134+
component.goToCurrent();
135+
expect(component.onGoToCurrent.emit).toHaveBeenCalled();
136+
});
131137
});

‎src/app/day-calendar/day-calendar.component.ts

+2
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
6666
@Output() onSelect: EventEmitter<IDay> = new EventEmitter();
6767
@Output() onMonthSelect: EventEmitter<IMonth> = new EventEmitter();
6868
@Output() onNavHeaderBtnClick: EventEmitter<ECalendarMode> = new EventEmitter();
69+
@Output() onGoToCurrent: EventEmitter<void> = new EventEmitter<void>();
6970

7071
CalendarMode = ECalendarMode;
7172
isInited: boolean = false;
@@ -296,6 +297,7 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
296297

297298
goToCurrent() {
298299
this.currentDateView = moment();
300+
this.onGoToCurrent.emit();
299301
}
300302

301303
handleConfigChange(config: SimpleChange) {

‎src/app/day-time-calendar/day-time-calendar.component.html

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
[ngModel]="_selected"
44
[displayDate]="displayDate"
55
(onSelect)="dateSelected($event)"
6+
(onGoToCurrent)="onGoToCurrent.emit()"
67
[theme]="theme">
78
</dp-day-calendar>
89
<dp-time-select #timeSelect

‎src/app/day-time-calendar/day-time-calendar.component.spec.ts

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
2+
import {FormsModule} from '@angular/forms';
3+
import {DayTimeCalendarComponent} from './day-time-calendar.component';
4+
import {DayTimeCalendarService} from './day-time-calendar.service';
5+
import {DayCalendarComponent} from '../day-calendar/day-calendar.component';
6+
import {TimeSelectComponent} from '../time-select/time-select.component';
7+
import {TimeSelectService} from '../time-select/time-select.service';
8+
import {DayCalendarService} from '../day-calendar/day-calendar.service';
9+
import {UtilsService} from '../common/services/utils/utils.service';
10+
import {MonthCalendarComponent} from '../month-calendar/month-calendar.component';
11+
import {CalendarNavComponent} from '../calendar-nav/calendar-nav.component';
12+
13+
describe('Component: DayTimeCalendarComponent', () => {
14+
let component: DayTimeCalendarComponent;
15+
let fixture: ComponentFixture<DayTimeCalendarComponent>;
16+
17+
beforeEach(async(() => {
18+
TestBed.configureTestingModule({
19+
imports: [ FormsModule ],
20+
declarations: [
21+
DayTimeCalendarComponent,
22+
DayCalendarComponent,
23+
TimeSelectComponent,
24+
CalendarNavComponent,
25+
MonthCalendarComponent
26+
],
27+
providers: [
28+
DayTimeCalendarService,
29+
DayCalendarService,
30+
TimeSelectService,
31+
UtilsService
32+
]
33+
}).compileComponents();
34+
}));
35+
36+
beforeEach(() => {
37+
fixture = TestBed.createComponent(DayTimeCalendarComponent);
38+
component = fixture.componentInstance;
39+
component.config = component.dayTimeCalendarService.getConfig({});
40+
fixture.detectChanges();
41+
});
42+
43+
it('should create', () => {
44+
expect(component).toBeTruthy();
45+
});
46+
47+
it('should emit event goToCurrent when nav emit', () => {
48+
spyOn(component.onGoToCurrent, 'emit');
49+
component.dayCalendarRef.onGoToCurrent.emit();
50+
expect(component.onGoToCurrent.emit).toHaveBeenCalledWith();
51+
});
52+
});

‎src/app/day-time-calendar/day-time-calendar.component.ts

+1
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ export class DayTimeCalendarComponent implements OnInit, OnChanges, ControlValue
6565
@HostBinding('class') @Input() theme: string;
6666

6767
@Output() onChange: EventEmitter<IDate> = new EventEmitter();
68+
@Output() onGoToCurrent: EventEmitter<void> = new EventEmitter<void>();
6869

6970
@ViewChild('dayCalendar') dayCalendarRef: DayCalendarComponent;
7071

‎src/app/month-calendar/month-calendar.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
(onRightNav)="onRightNav()"
1414
(onRightSecondaryNav)="onRightSecondaryNav()"
1515
(onLabelClick)="toggleCalendar()"
16-
(goToCurrent)="goToCurrent()">
16+
(onGoToCurrent)="goToCurrent()">
1717
</dp-calendar-nav>
1818

1919
<div class="dp-calendar-wrapper">

‎src/app/month-calendar/month-calendar.component.spec.ts

+6
Original file line numberDiff line numberDiff line change
@@ -72,5 +72,11 @@ describe('Component: MonthCalendarComponent', () => {
7272
'custom-class': true
7373
});
7474
});
75+
76+
it('should emit event goToCurrent function called', () => {
77+
spyOn(component.onGoToCurrent, 'emit');
78+
component.goToCurrent();
79+
expect(component.onGoToCurrent.emit).toHaveBeenCalledWith();
80+
});
7581
});
7682
});

‎src/app/month-calendar/month-calendar.component.ts

+2
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
6161

6262
@Output() onSelect: EventEmitter<IMonth> = new EventEmitter();
6363
@Output() onNavHeaderBtnClick: EventEmitter<null> = new EventEmitter();
64+
@Output() onGoToCurrent: EventEmitter<void> = new EventEmitter<void>();
6465

6566
isInited: boolean = false;
6667
componentConfig: IMonthCalendarConfigInternal;
@@ -270,6 +271,7 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
270271

271272
goToCurrent() {
272273
this.currentDateView = moment();
274+
this.onGoToCurrent.emit();
273275
}
274276

275277
moveCalendarTo(to: SingleCalendarValue) {

0 commit comments

Comments
 (0)