Modernize op-date-time component, fix type safety

Author: myabc

frontend/src/app/shared/components/date/op-date-time.component.ts

@@ -26,8 +26,10 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit, inject } from '@angular/core';
 import { TimezoneService } from 'core-app/core/datetime/timezone.service';
+import { toDateTime } from 'core-app/shared/helpers/date-time-helpers';
+import { type DateTime } from 'luxon';
 
 @Component({
   selector: 'op-date-time',
@@ -40,19 +42,18 @@ import { TimezoneService } from 'core-app/core/datetime/timezone.service';
   `,
   standalone: false,
 })
-export class OpDateTimeComponent {
-  @Input('dateTimeValue') dateTimeValue:any;
+export class OpDateTimeComponent implements OnInit {
+  readonly timezoneService = inject(TimezoneService);
 
-  public date:any;
+  @Input({ transform: toDateTime }) dateTimeValue:DateTime;
 
-  public time:any;
+  public date:string;
 
-  constructor(readonly timezoneService:TimezoneService) {
-  }
+  public time:string;
 
   ngOnInit() {
-    const c = this.timezoneService.formattedDatetimeComponents(this.dateTimeValue);
-    this.date = c[0];
-    this.time = c[1];
+    const [date, time] = this.timezoneService.formattedDatetimeComponents(this.dateTimeValue);
+    this.date = date;
+    this.time = time;
   }
 }

modules/github_integration/frontend/module/pull-request/pull-request.component.spec.ts

@@ -5,14 +5,15 @@ import { PullRequestComponent } from "./pull-request.component";
 import { OpIconComponent } from 'core-app/shared/components/icon/icon.component';
 import { IGithubCheckRunResource, IGithubPullRequest, IGithubUserResource } from '../state/github-pull-request.model';
 import { PullRequestStateComponent } from './pull-request-state.component';
+import { DateTime } from 'luxon';
 
 @Component({
   selector: 'op-date-time',
   template: ``,
   standalone: false,
 })
 class OpDateTimeComponent {
-  @Input('dateTimeValue') dateTimeValue:any;
+  @Input('dateTimeValue') dateTimeValue:DateTime;
 }
 
 describe('PullRequestComponent', () => {