issue108: + add hourSelected event emitter

Agranom · Feb 16, 2019 · dd43874 · dd43874
1 parent 07a8618
commit dd43874
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 34 deletions.
diff --git a/.../components/timepicker-12-hours-face/ngx-material-timepicker-12-hours-face.component.html b/.../components/timepicker-12-hours-face/ngx-material-timepicker-12-hours-face.component.html
@@ -1,2 +1,2 @@
 <ngx-material-timepicker-face [selectedTime]="selectedHour" [faceTime]="hoursList"
-                              (timeChange)="hourChange.next($event)" (timeSelected)="hourSelected.next()"></ngx-material-timepicker-face>
+                              (timeChange)="hourChange.next($event)" (timeSelected)="onTimeSelected($event)"></ngx-material-timepicker-face>
diff --git a/.../components/timepicker-24-hours-face/ngx-material-timepicker-24-hours-face.component.html b/.../components/timepicker-24-hours-face/ngx-material-timepicker-24-hours-face.component.html
@@ -1,3 +1,3 @@
 <ngx-material-timepicker-face [selectedTime]="selectedHour" [faceTime]="hoursList" [format]="format"
                               (timeChange)="hourChange.next($event)"
-                              (timeSelected)="hourSelected.next()"></ngx-material-timepicker-face>
+                              (timeSelected)="onTimeSelected($event)"></ngx-material-timepicker-face>
diff --git a/...rial-timepicker/components/timepicker-face/ngx-material-timepicker-face.component.spec.ts b/...rial-timepicker/components/timepicker-face/ngx-material-timepicker-face.component.spec.ts
@@ -1,10 +1,10 @@
-import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
-import {NgxMaterialTimepickerFaceComponent} from './ngx-material-timepicker-face.component';
-import {ElementRef, NO_ERRORS_SCHEMA, SimpleChanges} from '@angular/core';
-import {ClockFaceTime} from '../../models/clock-face-time.interface';
-import {StyleSanitizerPipe} from '../../pipes/style-sanitizer.pipe';
-import {TimeUnit} from '../../models/time-unit.enum';
-import {MinutesFormatterPipe} from '../../pipes/minutes-formatter.pipe';
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { NgxMaterialTimepickerFaceComponent } from './ngx-material-timepicker-face.component';
+import { ElementRef, NO_ERRORS_SCHEMA, SimpleChanges } from '@angular/core';
+import { ClockFaceTime } from '../../models/clock-face-time.interface';
+import { StyleSanitizerPipe } from '../../pipes/style-sanitizer.pipe';
+import { TimeUnit } from '../../models/time-unit.enum';
+import { MinutesFormatterPipe } from '../../pipes/minutes-formatter.pipe';
 
 
 describe('NgxMaterialTimepickerFaceComponent', () => {
@@ -276,18 +276,15 @@ describe('NgxMaterialTimepickerFaceComponent', () => {
             expect(selectedTime).toEqual({time: 1, angle: 5});
         }));
 
-        it('should emit selected time once user stop interaction with clock face', fakeAsync(() => {
-            let counter = 0;
+        it('should emit selected time once user stop interaction with clock face', async(() => {
             const mouseCords: MouseEventInit = {clientX: 20, clientY: 20};
 
             component.faceTime = minutesFaceTime;
             component.unit = TimeUnit.MINUTE;
 
-            component.timeSelected.subscribe(() => counter++);
+            component.timeSelected.subscribe((time) => expect(time).toBe(55));
             component.onMouseup(mouseClickEvent);
             component.selectTime(new MouseEvent('click', mouseCords));
-            tick();
-            expect(counter).toBe(1);
         }));
 
         it(`should return 'true' or 'false' whether hour is selected or not`, () => {

diff --git a/.../material-timepicker/components/timepicker-face/ngx-material-timepicker-face.component.ts b/.../material-timepicker/components/timepicker-face/ngx-material-timepicker-face.component.ts
@@ -46,7 +46,7 @@ export class NgxMaterialTimepickerFaceComponent implements AfterViewInit, OnChan
     @Input() minutesGap: number;
 
     @Output() timeChange = new EventEmitter<ClockFaceTime>();
-    @Output() timeSelected = new EventEmitter<null>();
+    @Output() timeSelected = new EventEmitter<number>();
 
     @ViewChild('clockFace') clockFace: ElementRef;
     @ViewChild('clockHand') clockHand: ElementRef;
@@ -123,7 +123,7 @@ export class NgxMaterialTimepickerFaceComponent implements AfterViewInit, OnChan
 
             /* To let know whether user ended interaction with clock face */
             if (!this.isStarted) {
-                this.timeSelected.next();
+                this.timeSelected.next(selectedTime.time);
             }
         }
 

diff --git a/...al-timepicker/components/timepicker-hours-face/ngx-material-timepicker-hours-face.spec.ts b/...al-timepicker/components/timepicker-hours-face/ngx-material-timepicker-hours-face.spec.ts
@@ -1,4 +1,4 @@
-import {ComponentFixture, TestBed} from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import {Component} from '@angular/core';
 import {NgxMaterialTimepickerHoursFace} from './ngx-material-timepicker-hours-face';
@@ -42,4 +42,18 @@ describe('NgxMaterialTimepickerHoursFace', () => {
     it('should generate array with 24 items', () => {
         expect(component24.hoursList.length).toBe(24);
     });
+
+    it('should emit selected hour (12hr format)', async(() => {
+        const time = 10;
+
+        component12.hourSelected.subscribe(hour => expect(hour).toBe(time));
+        component12.onTimeSelected(time);
+    }));
+
+    it('should emit selected hour (24hr format)', async(() => {
+        const time = 15;
+
+        component24.hourSelected.subscribe(hour => expect(hour).toBe(time));
+        component24.onTimeSelected(time);
+    }));
 });
diff --git a/...aterial-timepicker/components/timepicker-hours-face/ngx-material-timepicker-hours-face.ts b/...aterial-timepicker/components/timepicker-hours-face/ngx-material-timepicker-hours-face.ts
@@ -12,11 +12,15 @@ export class NgxMaterialTimepickerHoursFace {
     @Input() format: number;
 
     @Output() hourChange = new EventEmitter<ClockFaceTime>();
-    @Output() hourSelected = new EventEmitter<null>();
+    @Output() hourSelected = new EventEmitter<number>();
 
     hoursList: ClockFaceTime[] = [];
 
     protected constructor(format: number) {
         this.hoursList = TimepickerTime.getHours(format);
     }
+
+    onTimeSelected(time: number): void {
+        this.hourSelected.next(time);
+    }
 }
diff --git a/src/app/material-timepicker/ngx-material-timepicker.component.html b/src/app/material-timepicker/ngx-material-timepicker.component.html
@@ -23,15 +23,15 @@
                                                            [minTime]="minTime"
                                                            [maxTime]="maxTime"
                                                            [format]="format"
-                                                           (hourSelected)="changeTimeUnit(timeUnit.MINUTE)"></ngx-material-timepicker-24-hours-face>
+                                                           (hourSelected)="onHourSelected($event)"></ngx-material-timepicker-24-hours-face>
                     <ng-template #ampmHours>
                         <ngx-material-timepicker-12-hours-face
                             (hourChange)="onHourChange($event)"
                             [selectedHour]="selectedHour"
                             [period]="selectedPeriod"
                             [minTime]="minTime"
                             [maxTime]="maxTime"
-                            (hourSelected)="changeTimeUnit(timeUnit.MINUTE)"></ngx-material-timepicker-12-hours-face>
+                            (hourSelected)="onHourSelected($event)"></ngx-material-timepicker-12-hours-face>
                     </ng-template>
                 </div>
                 <ngx-material-timepicker-minutes-face *ngSwitchCase="timeUnit.MINUTE"

diff --git a/src/app/material-timepicker/ngx-material-timepicker.component.spec.ts b/src/app/material-timepicker/ngx-material-timepicker.component.spec.ts
@@ -1,13 +1,13 @@
-import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {AnimationState, NgxMaterialTimepickerComponent} from './ngx-material-timepicker.component';
-import {NgxMaterialTimepickerEventService} from './services/ngx-material-timepicker-event.service';
-import {NgxMaterialTimepickerService} from './services/ngx-material-timepicker.service';
-import {TimepickerDirective} from './directives/ngx-timepicker.directive';
-import {TimeFormatterPipe} from './pipes/time-formatter.pipe';
-import {NO_ERRORS_SCHEMA} from '@angular/core';
-import {TimePeriod} from './models/time-period.enum';
-import {TimeUnit} from './models/time-unit.enum';
-import {AnimationEvent} from '@angular/animations';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { AnimationState, NgxMaterialTimepickerComponent } from './ngx-material-timepicker.component';
+import { NgxMaterialTimepickerEventService } from './services/ngx-material-timepicker-event.service';
+import { NgxMaterialTimepickerService } from './services/ngx-material-timepicker.service';
+import { TimepickerDirective } from './directives/ngx-timepicker.directive';
+import { TimeFormatterPipe } from './pipes/time-formatter.pipe';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { TimePeriod } from './models/time-period.enum';
+import { TimeUnit } from './models/time-unit.enum';
+import { AnimationEvent } from '@angular/animations';
 
 describe('NgxMaterialTimepickerComponent', () => {
     let fixture: ComponentFixture<NgxMaterialTimepickerComponent>;
@@ -199,6 +199,17 @@ describe('NgxMaterialTimepickerComponent', () => {
         expect(component.minutesGap).toBeUndefined();
     });
 
+    it('should change timeUnit to MINUTE and emit selected hour', async(() => {
+        const hour = 10;
+
+        expect(component.activeTimeUnit).toBe(TimeUnit.HOUR);
+
+        component.hourSelected.subscribe(h => expect(h).toBe(hour));
+        component.onHourSelected(hour);
+
+        expect(component.activeTimeUnit).toBe(TimeUnit.MINUTE);
+    }));
+
     describe('Timepicker subscriptions', () => {
         const hour = {time: 11, angle: 360};
         const minute = {time: 44, angle: 36};

diff --git a/src/app/material-timepicker/ngx-material-timepicker.component.ts b/src/app/material-timepicker/ngx-material-timepicker.component.ts
@@ -74,6 +74,7 @@ export class NgxMaterialTimepickerComponent implements OnInit, OnDestroy {
 
     @Output() timeSet = new EventEmitter<string>();
     @Output() closed = new EventEmitter<null>();
+    @Output() hourSelected = new EventEmitter<number>();
 
     @ViewChild('timepickerww') timepickerComponent: ElementRef;
 
@@ -132,6 +133,11 @@ export class NgxMaterialTimepickerComponent implements OnInit, OnDestroy {
         this.timepickerService.hour = hour;
     }
 
+    onHourSelected(hour: number): void {
+        this.changeTimeUnit(TimeUnit.MINUTE);
+        this.hourSelected.next(hour);
+    }
+
     onMinuteChange(minute: ClockFaceTime): void {
         this.timepickerService.minute = minute;
     }
@@ -140,11 +146,11 @@ export class NgxMaterialTimepickerComponent implements OnInit, OnDestroy {
         this.timepickerService.period = period;
     }
 
-    changeTimeUnit(unit: TimeUnit) {
+    changeTimeUnit(unit: TimeUnit): void {
         this.activeTimeUnit = unit;
     }
 
-    setTime() {
+    setTime(): void {
         this.timeSet.next(this.timepickerService.getFullTime(this.format));
         this.close();
     }
@@ -154,12 +160,12 @@ export class NgxMaterialTimepickerComponent implements OnInit, OnDestroy {
             time, this.minTime as Moment, this.maxTime as Moment, this.format, this.minutesGap);
     }
 
-    open() {
+    open(): void {
         this.isOpened = true;
         this.animationState = AnimationState.ENTER;
     }
 
-    close() {
+    close(): void {
         this.animationState = AnimationState.LEAVE;
     }