fix: Fixing Time picker comparison time in dropdown

Author: Patricio Albizu

projects/common/src/time/time.test.ts

@@ -14,4 +14,9 @@ describe('Time', () => {
   test('can get ISO String from time', () => {
     expect(mockedTime.toISOString()).toBe('08:30:00.000Z');
   });
+
+  test('can compare two times', () => {
+    expect(mockedTime.equals(new Time(8, 30))).toBeTruthy();
+    expect(mockedTime.equals(new Time(9, 30))).toBeFalsy();
+  });
 });

projects/common/src/time/time.ts

@@ -35,4 +35,8 @@ export class Time {
   public toISOString(): string {
     return this.date.toISOString().substring(11);
   }
+
+  public equals(other?: Time): boolean {
+    return this.toISOString() === other?.toISOString();
+  }
 }

projects/components/src/time-picker/time-picker.component.test.ts

@@ -1,5 +1,5 @@
 import { fakeAsync } from '@angular/core/testing';
-import { NavigationService, Time } from '@hypertrace/common';
+import { MemoizeModule, NavigationService, Time } from '@hypertrace/common';
 import { createHostFactory, mockProvider, SpectatorHost } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
 import { of } from 'rxjs';
@@ -14,7 +14,7 @@ describe('Time Picker Component', () => {
   const createHost = createHostFactory({
     component: TimePickerComponent,
     shallow: true,
-    imports: [PopoverModule],
+    imports: [PopoverModule, MemoizeModule],
     providers: [
       mockProvider(PredefinedTimeService, {
         getPredefinedTimes: jest

projects/components/src/time-picker/time-picker.component.ts

@@ -36,7 +36,7 @@ import { PredefinedTimeService } from '../time-range/predefined-time.service';
               *ngFor="let predefinedTime of this.predefinedTimes"
               (click)="this.onTimeChange(predefinedTime)"
               [ngClass]="{
-                selected: predefinedTime.hours === this.time?.hours && predefinedTime.minutes === this.time?.minutes
+                selected: this.time && (this.areEqualTimes | htMemoize: this.time:predefinedTime)
               }"
             >
               <span>{{ predefinedTime.label }}</span>
@@ -81,6 +81,8 @@ export class TimePickerComponent {
     this.time = time;
     this.timeChange.emit(time);
   }
+
+  public areEqualTimes = (time: Time, predefinedTime: Time) => time.equals(predefinedTime);
 }
 
 export const enum TimePickerDisplayMode {

projects/components/src/time-picker/time-picker.module.ts

@@ -1,14 +1,15 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { MemoizeModule } from '@hypertrace/common';
 import { IconModule } from '../icon/icon.module';
 import { InputModule } from '../input/input.module';
 import { LabelModule } from '../label/label.module';
 import { PopoverModule } from '../popover/popover.module';
 import { TimePickerComponent } from './time-picker.component';
 
 @NgModule({
-  imports: [CommonModule, FormsModule, IconModule, LabelModule, InputModule, PopoverModule],
+  imports: [CommonModule, FormsModule, IconModule, LabelModule, MemoizeModule, InputModule, PopoverModule],
   declarations: [TimePickerComponent],
   exports: [TimePickerComponent]
 })