wip fixing journey back functionality for DateTimePicker

chrisjones-hmcts · chrisjones-hmcts · commit 674909cbb777 · 2025-11-18T11:25:55.000Z
diff --git a/projects/ccd-case-ui-toolkit/src/lib/components/form/date-input/date-input.component.ts b/projects/ccd-case-ui-toolkit/src/lib/components/form/date-input/date-input.component.ts
@@ -1,5 +1,6 @@
 import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms';
+import moment from 'moment';
 
 @Component({
   selector: 'cut-date-input',
@@ -71,17 +72,32 @@ export class DateInputComponent implements ControlValueAccessor, Validator, OnIn
   public writeValue(obj: string): void { // 2018-04-09T08:02:27.542
     if (obj) {
       this.rawValue = this.removeMilliseconds(obj);
-      // needs to handle also partial dates, e.g. -05-2016 (missing day)
-      const [datePart, timePart] = this.rawValue.split('T');
-      const dateValues = datePart.split('-');
-      this.year = this.displayYear = dateValues[0] || '';
-      this.month = this.displayMonth = dateValues[1] || '';
-      this.day = this.displayDay = dateValues[2] || '';
-      if (timePart) {
-        const timeParts = timePart.split(':');
-        this.hour = this.displayHour = timeParts[0] || '';
-        this.minute = this.displayMinute = timeParts[1] || '';
-        this.second = this.displaySecond = timeParts[2] || '';
+
+      // for DateTime fields, convert from UTC to local time for display
+      if (this.isDateTime && this.rawValue.includes('T')) {
+        const utcMoment = moment.utc(this.rawValue);
+        const localMoment = utcMoment.local();
+
+        this.year = this.displayYear = localMoment.format('YYYY');
+        this.month = this.displayMonth = localMoment.format('MM');
+        this.day = this.displayDay = localMoment.format('DD');
+        this.hour = this.displayHour = localMoment.format('HH');
+        this.minute = this.displayMinute = localMoment.format('mm');
+        this.second = this.displaySecond = localMoment.format('ss');
+      } else {
+        // for Date fields (no time), parse normally
+        // needs to handle also partial dates, e.g. -05-2016 (missing day)
+        const [datePart, timePart] = this.rawValue.split('T');
+        const dateValues = datePart.split('-');
+        this.year = this.displayYear = dateValues[0] || '';
+        this.month = this.displayMonth = dateValues[1] || '';
+        this.day = this.displayDay = dateValues[2] || '';
+        if (timePart) {
+          const timeParts = timePart.split(':');
+          this.hour = this.displayHour = timeParts[0] || '';
+          this.minute = this.displayMinute = timeParts[1] || '';
+          this.second = this.displaySecond = timeParts[2] || '';
+        }
       }
     }
   }
@@ -227,7 +243,14 @@ export class DateInputComponent implements ControlValueAccessor, Validator, OnIn
           this.minute ? this.pad(this.minute) : '',
           this.second ? this.pad(this.second) : ''
         ].join(':');
-        return `${date}T${time}.000`;
+        const localDateTimeString = `${date}T${time}.000`;
+
+        // convert from local time to UTC for storage
+        const localMoment = moment(localDateTimeString);
+        const utcMoment = localMoment.utc();
+
+        // return in the expected format
+        return utcMoment.format('YYYY-MM-DDTHH:mm:ss.000');
       } else {
         return date;
       }
diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/date/read-date-field.component.ts b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/date/read-date-field.component.ts
@@ -1,10 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { AbstractFieldReadComponent } from '../base-field/abstract-field-read.component';
 
 @Component({
   selector: 'ccd-read-date-field',
-  template: `<span class="text-16">{{caseField.value | ccdDate:'utc':caseField.dateTimeDisplayFormat}}</span>`
+  template: `<span class="text-16">{{caseField.value | ccdDate:timeZone:caseField.dateTimeDisplayFormat}}</span>`
 })
-export class ReadDateFieldComponent extends AbstractFieldReadComponent {
+export class ReadDateFieldComponent extends AbstractFieldReadComponent implements OnInit{
   public timeZone = 'utc';
+
+  public ngOnInit(): void {
+    super.ngOnInit();
+    if (this.caseField?.field_type.id === 'DateTime') {
+      this.timeZone = 'local';
+    }
+  }
 }
diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/datetime-picker/datetime-picker.component.html b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/datetime-picker/datetime-picker.component.html
@@ -1,28 +1,27 @@
 <div class="govuk-form-group  bottom-30" [id]="caseField.id"
-     [ngClass]="{'form-group-error': dateControl && !dateControl.valid && dateControl.dirty}">
+     [ngClass]="{'form-group-error': localDisplayControl && !localDisplayControl.valid && localDisplayControl.dirty}">
   <fieldset>
     <legend>
       <span class="form-label" *ngIf="caseField.label">{{(caseField | ccdFieldLabel)}}</span>
       <span class="form-hint" *ngIf="caseField.hint_text">{{caseField.hint_text | rpxTranslate}}</span>
       <span class="error-message"
-            *ngIf="dateControl && dateControl.errors && dateControl.dirty && !(minError || maxError)">{{(dateControl.errors | ccdFirstError:caseField.label)}}</span>
+            *ngIf="localDisplayControl && localDisplayControl.errors && localDisplayControl.dirty && !(minError || maxError)">{{(localDisplayControl.errors | ccdFirstError:caseField.label)}}</span>
             <span class="error-message"
-            *ngIf="dateControl && dateControl.dirty && minError">{{'This date is older than the minimum date allowed' | rpxTranslate}}</span>
+            *ngIf="localDisplayControl && localDisplayControl.dirty && minError">{{'This date is older than the minimum date allowed' | rpxTranslate}}</span>
             <span class="error-message"
-            *ngIf="dateControl && dateControl.dirty && maxError">{{'This date is later than the maximum date allowed' | rpxTranslate}}</span>
+            *ngIf="localDisplayControl && localDisplayControl.dirty && maxError">{{'This date is later than the maximum date allowed' | rpxTranslate}}</span>
     </legend>
     <div class="datepicker-container">
       <input class="govuk-input"
              #input
              attr.aria-label="Please enter a date and time in the format | rpxTranslate {{dateTimeEntryFormat}}"
              [min]="minDate(caseField)"
              [max]="maxDate(caseField)"
-             [formControl]="dateControl"
+             [formControl]="localDisplayControl"
              [ngxMatDatetimePicker]="picker"
              (focusin)="focusIn()"
              (focusout)="focusOut()"
              (dateChange)="valueChanged()"
-             ng-model-options="{timezone:'utc'}"
       >
       <mat-datepicker-toggle matSuffix [for]="picker" id="pickerOpener"></mat-datepicker-toggle>
       <ngx-mat-datetime-picker #picker
diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/datetime-picker/datetime-picker.component.ts b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/datetime-picker/datetime-picker.component.ts
@@ -28,7 +28,8 @@ import { CUSTOM_MOMENT_FORMATS } from './datetime-picker-utils';
       useClass: NgxMatMomentAdapter,
       deps: [MAT_LEGACY_DATE_LOCALE, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]
     },
-    { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
+    // { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
+    { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: false } }
   ]
 })
 
@@ -58,6 +59,8 @@ export class DatetimePickerComponent extends AbstractFormFieldComponent implemen
 
   @Input() public dateControl: FormControl = new FormControl(new Date());
 
+  public localDisplayControl: FormControl;
+
   private minimumDate = new Date('01/01/1800');
   private maximumDate = null;
   private momentFormat = 'YYYY-MM-DDTHH:mm:ss.SSS';
@@ -70,21 +73,67 @@ export class DatetimePickerComponent extends AbstractFormFieldComponent implemen
   public ngOnInit(): void {
     this.dateTimeEntryFormat = this.formatTranslationService.showOnlyDates(this.caseField.dateTimeEntryFormat);
     this.configureDatePicker(this.dateTimeEntryFormat);
-    // set date control based on mandatory field
+
+    const existingControl = (this.parent || this.formGroup)?.controls?.[this.caseField.id];
+    console.log('[DatetimePicker] ngOnInit for field:', this.caseField.id);
+    console.log('[DatetimePicker] caseField.value:', this.caseField.value);
+    console.log('[DatetimePicker] existingControl exists:', !!existingControl);
+    console.log('[DatetimePicker] existingControl.value:', existingControl?.value);
+
+    // register the main control with parent form (will return existing control if present)
+    // for when we're navigating back to an existing form
     this.dateControl = (this.caseField.isMandatory ?
       this.registerControl(new FormControl(this.caseField.value || '', [Validators.required]))
       : this.registerControl(new FormControl(this.caseField.value))) as FormControl;
+
+    console.log('[DatetimePicker] After registerControl, dateControl.value:', this.dateControl.value);
+
+    // after registerControl, use dateControl.value as the source of truth
+    // (it will have the existing value if navigating back, or caseField.value if new)
+    let initialUtcValue = this.dateControl.value;
+    let initialLocalValue: string;
+
+    // for DateTime fields, convert UTC to local for display
+    if (initialUtcValue && this.caseField.field_type.type === 'DateTime') {
+      const utcMoment = moment.utc(initialUtcValue);
+      const localMoment = utcMoment.local();
+      initialLocalValue = localMoment.format('YYYY-MM-DDTHH:mm:ss.SSS');
+      console.log('[DatetimePicker] Converted UTC to local:', initialUtcValue, '->', initialLocalValue);
+    } else {
+      initialLocalValue = initialUtcValue || '';
+    }
+
+    // create local display control with correct initial value
+    this.localDisplayControl = new FormControl(initialLocalValue);
+    console.log('[DatetimePicker] localDisplayControl initialized with:', initialLocalValue);
+
+    // sync local display control to main control with UTC conversion
+    this.localDisplayControl.valueChanges.subscribe(localValue => {
+      if (this.caseField.field_type.type === 'DateTime' && localValue) {
+        const parsedLocal = moment(localValue, this.momentFormat);
+        if (parsedLocal.isValid()) {
+          const utcValue = parsedLocal.utc().format(this.momentFormat);
+          this.dateControl.setValue(utcValue, { emitEvent: false });
+        } else {
+          this.dateControl.setValue(localValue, { emitEvent: false });
+        }
+      } else {
+        this.dateControl.setValue(localValue, { emitEvent: false });
+      }
+    });
+
+    // sync validation errors from local control to main control
+    this.localDisplayControl.statusChanges.subscribe(() => {
+      this.minError = this.localDisplayControl.hasError('matDatetimePickerMin');
+      this.maxError = this.localDisplayControl.hasError('matDatetimePickerMax');
+    });
+
     // in resetting the format just after the page initialises, the input can be reformatted
     // otherwise the last format given will be how the text shown will be displayed
     setTimeout(() => {
       this.setDateTimeFormat();
       this.formatValueAndSetErrors();
     }, 1000);
-    // when the status changes check that the maximum/minimum date has not been exceeded
-    this.dateControl.statusChanges.subscribe(() => {
-      this.minError = this.dateControl.hasError('matDatetimePickerMin');
-      this.maxError = this.dateControl.hasError('matDatetimePickerMax');
-    });
   }
 
   public setDateTimeFormat(): void {
@@ -182,16 +231,16 @@ export class DatetimePickerComponent extends AbstractFormFieldComponent implemen
 
   public yearSelected(event: Moment): void {
     if (this.startView === 'multi-year' && this.yearSelection) {
-      this.dateControl.patchValue(event.toISOString());
+      this.localDisplayControl.patchValue(event.toISOString());
       this.datetimePicker.close();
       this.valueChanged();
     }
   }
 
   public monthSelected(event: Moment): void {
     if (this.startView === 'multi-year') {
-      this.dateControl.patchValue(event.toISOString());
-      this.dateControl.patchValue(event.toISOString());
+      this.localDisplayControl.patchValue(event.toISOString());
+      this.localDisplayControl.patchValue(event.toISOString());
       this.datetimePicker.close();
       this.valueChanged();
     }
@@ -200,19 +249,38 @@ export class DatetimePickerComponent extends AbstractFormFieldComponent implemen
   private formatValueAndSetErrors(): void {
     if (this.inputElement.nativeElement.value) {
       let formValue = this.inputElement.nativeElement.value;
-      formValue = moment(formValue, this.dateTimeEntryFormat).format(this.momentFormat);
-      if (formValue !== 'Invalid date') {
-        // if not invalid set the value as the formatted value
-        this.dateControl.setValue(formValue);
+      const parsedMoment = moment(formValue, this.dateTimeEntryFormat);
+
+      if (parsedMoment.isValid()) {
+        // format the value in local time
+        // localDisplayControl will auto-sync to dateControl with UTC conversion
+        formValue = parsedMoment.format(this.momentFormat);
+        this.localDisplayControl.setValue(formValue);
       } else {
         // ensure that the datepicker picks up the invalid error
         const keepErrorText = this.inputElement.nativeElement.value;
+        this.localDisplayControl.setValue(keepErrorText);
         this.dateControl.setValue(keepErrorText);
         this.inputElement.nativeElement.value = keepErrorText;
       }
     } else {
-      // ensure required errors are picked up if relevant
-      this.dateControl.setValue('');
+      // input is empty - check if we need to sync from control values
+      if (this.localDisplayControl.value) {
+        // control has a value but input doesn't - this happens when navigating back
+        // manually sync the control value to the input element
+        console.log('[DatetimePicker] formatValueAndSetErrors: Input empty but control has value, syncing:', this.localDisplayControl.value);
+        const controlValue = this.localDisplayControl.value;
+        const parsedMoment = moment(controlValue, this.momentFormat);
+        if (parsedMoment.isValid()) {
+          // format according to the display format and update the input
+          const formattedValue = parsedMoment.format(this.dateTimeEntryFormat);
+          this.inputElement.nativeElement.value = formattedValue;
+          console.log('[DatetimePicker] Set input value to:', formattedValue);
+        }
+      } else if (!this.dateControl.value) {
+        this.localDisplayControl.setValue('');
+        this.dateControl.setValue('');
+      }
     }
   }
 }
