feat(cb2-10319): Refactor Dimensions Component

src/app/forms/components/number-input/number-input.component.html

@@ -7,7 +7,7 @@
   <div *ngIf="hint" id="{{ name }}-hint" class="govuk-hint">{{ hint }}</div>
 
   <app-field-error-message [error]="error" [name]="name"></app-field-error-message>
-  <app-field-warning-message [warningMessage]="getWarningMessage"></app-field-warning-message>
+  <app-field-warning-message [warningMessage]="control?.meta?.warning"></app-field-warning-message>
   <div class="govuk-input__wrapper">
     <div *ngIf="prefix" class="govuk-input__suffix prefix" aria-hidden="true">
       <ng-container [ngTemplateOutlet]="prefix.templateRef"></ng-container>

src/app/forms/components/number-input/number-input.component.ts

@@ -21,26 +21,6 @@ export class NumberInputComponent extends BaseControlComponent implements AfterC
     return `govuk-input ${this.width ? `govuk-input--width-${this.width}` : ''}`;
   }
 
-  get getWarningMessage(): string {
-
-    if (this.isCorrectVehicleType()) {
-      if (this.shouldDisplayLengthWarning()) return 'This length dimension field value is greater than 12,000mm. Check your input before proceeding';
-      if (this.shouldDisplayWidthWarning()) return 'This width dimension field value is greater than 2,600mm. Check your input before proceeding';
-    }
-    return '';
-  }
-
-  shouldDisplayLengthWarning(): boolean {
-    return this.label === 'Length' && parseInt(this.value, 10) > 12000;
-  }
-  shouldDisplayWidthWarning(): boolean {
-    return this.label === 'Width' && parseInt(this.value, 10) > 2600;
-  }
-
-  isCorrectVehicleType(): boolean {
-    return this.vehicleType === 'hgv' || this.vehicleType === 'trl';
-  }
-
   override ngAfterContentInit(): void {
     super.ngAfterContentInit();
     if (this.control) {

src/app/forms/custom-sections/dimensions/dimensions.component.ts

@@ -4,13 +4,19 @@ import {
 import { TechRecordType } from '@dvsa/cvs-type-definitions/types/v3/tech-record/tech-record-vehicle-type';
 import { DynamicFormService } from '@forms/services/dynamic-form.service';
 import {
-  CustomFormArray, CustomFormGroup, FormNode, FormNodeEditTypes, FormNodeWidth,
+  CustomFormArray,
+  CustomFormControl,
+  CustomFormGroup,
+  FormNode,
+  FormNodeEditTypes,
+  FormNodeWidth,
 } from '@forms/services/dynamic-form.types';
 import { HgvDimensionsTemplate } from '@forms/templates/hgv/hgv-dimensions.template';
 import { PsvDimensionsTemplate } from '@forms/templates/psv/psv-dimensions.template';
 import { TrlDimensionsTemplate } from '@forms/templates/trl/trl-dimensions.template';
 import { VehicleTypes } from '@models/vehicle-tech-record.model';
-import { Subject, debounceTime, takeUntil } from 'rxjs';
+import { WarningsEnum } from '@shared/enums/warnings.enum';
+import { debounceTime, Subject, takeUntil } from 'rxjs';
 
 @Component({
   selector: 'app-dimensions',
@@ -32,7 +38,35 @@ export class DimensionsComponent implements OnInit, OnChanges, OnDestroy {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     this.form = this.dfs.createForm(this.template!, this.techRecord) as CustomFormGroup;
 
-    this.form.cleanValueChanges.pipe(debounceTime(400), takeUntil(this.destroy$)).subscribe((e) => this.formChange.emit(e));
+    this.form.cleanValueChanges.pipe(debounceTime(400), takeUntil(this.destroy$)).subscribe((e) => {
+      this.initialiseWarnings();
+      this.formChange.emit(e);
+    });
+  }
+
+  initialiseWarnings() {
+    // eslint-disable-next-line no-restricted-syntax, guard-for-in
+    for (const controlKey in this.form.controls) {
+      const control = this.form.get(controlKey);
+      if (control instanceof CustomFormControl) {
+        if (this.techRecord.techRecord_vehicleType === 'hgv' || this.techRecord.techRecord_vehicleType === 'trl') {
+          if (this.isLengthLabel(control)) {
+            this.handleWarningChange(control, this.shouldDisplayLengthWarning(control), WarningsEnum.DIMENSIONS_LENGTH_WARNING);
+          }
+          if (this.isWidthLabel(control)) {
+            this.handleWarningChange(control, this.shouldDisplayWidthWarning(control), WarningsEnum.DIMENSIONS_WIDTH_WARNING);
+          }
+        }
+      }
+    }
+  }
+
+  handleWarningChange(control: CustomFormControl, shouldDisplay: boolean, warning: WarningsEnum) {
+    if (shouldDisplay) {
+      control.meta.warning = warning;
+    } else {
+      control.meta.warning = undefined;
+    }
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -43,6 +77,20 @@ export class DimensionsComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
+  isLengthLabel(control: CustomFormControl): boolean {
+    return control.meta.label === 'Length (mm)';
+  }
+
+  isWidthLabel(control: CustomFormControl): boolean {
+    return control.meta.label === 'Width (mm)';
+  }
+  shouldDisplayLengthWarning(control: CustomFormControl): boolean {
+    return parseInt(control.value, 10) > 12000;
+  }
+  shouldDisplayWidthWarning(control: CustomFormControl): boolean {
+    return parseInt(control.value, 10) > 2600;
+  }
+
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();

src/app/shared/enums/warnings.enum.ts

@@ -0,0 +1,4 @@
+export enum WarningsEnum {
+  DIMENSIONS_LENGTH_WARNING = 'This length dimension field value is greater than 12,000mm. Check your input before proceeding',
+  DIMENSIONS_WIDTH_WARNING = 'This width dimension field value is greater than 2,600mm. Check your input before proceeding',
+}