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.spec.ts

@@ -7,6 +7,8 @@ import { DynamicFormsModule } from '@forms/dynamic-forms.module';
 import { mockVehicleTechnicalRecord } from '@mocks/mock-vehicle-technical-record.mock';
 import { provideMockStore } from '@ngrx/store/testing';
 import { initialAppState } from '@store/index';
+import { CustomFormControl } from '@forms/services/dynamic-form.types';
+import { WarningsEnum } from '@shared/enums/warnings.enum';
 import { DimensionsComponent } from './dimensions.component';
 
 describe('DimensionsComponent', () => {
@@ -29,4 +31,23 @@ describe('DimensionsComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+  describe('initialiseWarnings', () => {
+    beforeEach(() => {
+      // eslint-disable-next-line no-restricted-syntax
+      component.techRecord = mockVehicleTechnicalRecord('hgv');
+      component.ngOnInit();
+    });
+    it('should populate the meta.warning property on the length control if value > 12000', () => {
+      const control: CustomFormControl = component.form.get('techRecord_dimensions_length') as unknown as CustomFormControl;
+      control.patchValue(12001);
+      component.initialiseWarnings();
+      expect(control.meta.warning).toBe(WarningsEnum.DIMENSIONS_LENGTH_WARNING);
+    });
+    it('should populate the meta.warning property on the width control if value > 2600', () => {
+      const control: CustomFormControl = component.form.get('techRecord_dimensions_width') as unknown as CustomFormControl;
+      control.patchValue(2601);
+      component.initialiseWarnings();
+      expect(control.meta.warning).toBe(WarningsEnum.DIMENSIONS_WIDTH_WARNING);
+    });
+  });
 });

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,23 @@ 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() {
+    if (this.techRecord.techRecord_vehicleType === 'hgv' || this.techRecord.techRecord_vehicleType === 'trl') {
+      const lengthControl = this.form.get('techRecord_dimensions_length') as CustomFormControl;
+      this.handleWarningChange(lengthControl, this.shouldDisplayLengthWarning(lengthControl), WarningsEnum.DIMENSIONS_LENGTH_WARNING);
+      const widthControl = this.form.get('techRecord_dimensions_width') as CustomFormControl;
+      this.handleWarningChange(widthControl, this.shouldDisplayWidthWarning(widthControl), WarningsEnum.DIMENSIONS_WIDTH_WARNING);
+    }
+  }
+
+  handleWarningChange(control: CustomFormControl, shouldDisplay: boolean, warning: WarningsEnum) {
+    control.meta.warning = shouldDisplay ? warning : undefined;
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -42,6 +64,12 @@ export class DimensionsComponent implements OnInit, OnChanges, OnDestroy {
       this.form.patchValue(techRecord.currentValue, { emitEvent: false });
     }
   }
+  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();

src/app/forms/templates/hgv/hgv-dimensions.template.ts

@@ -1,5 +1,6 @@
 import { ValidatorNames } from '@forms/models/validators.enum';
 import { TagType } from '@shared/components/tag/tag.component';
+import { DimensionLabelEnum } from '@shared/enums/dimension-label.enum';
 import {
   FormNode, FormNodeEditTypes, FormNodeTypes, TagTypeLabels,
 } from '../../services/dynamic-form.types';
@@ -11,15 +12,15 @@ export const HgvDimensionsTemplate: FormNode = {
   children: [
     {
       name: 'techRecord_dimensions_length',
-      label: 'Length (mm)',
+      label: DimensionLabelEnum.LENGTH,
       value: null,
       type: FormNodeTypes.CONTROL,
       validators: [{ name: ValidatorNames.Max, args: 99999 }],
       customTags: [{ colour: TagType.PURPLE, label: TagTypeLabels.PLATES }],
     },
     {
       name: 'techRecord_dimensions_width',
-      label: 'Width (mm)',
+      label: DimensionLabelEnum.WIDTH,
       value: null,
       type: FormNodeTypes.CONTROL,
       validators: [{ name: ValidatorNames.Max, args: 99999 }],
@@ -35,7 +36,7 @@ export const HgvDimensionsTemplate: FormNode = {
           children: [
             {
               name: 'value',
-              label: 'Axle to axle (mm)',
+              label: DimensionLabelEnum.AXLE_TO_AXLE,
               value: null,
               editType: FormNodeEditTypes.NUMBER,
               type: FormNodeTypes.CONTROL,
@@ -47,37 +48,37 @@ export const HgvDimensionsTemplate: FormNode = {
     },
     {
       name: 'techRecord_frontAxleToRearAxle',
-      label: 'Front axle to rear axle (mm)',
+      label: DimensionLabelEnum.FRONT_AXLE_TO_REAR_AXLE,
       value: null,
       type: FormNodeTypes.CONTROL,
       validators: [{ name: ValidatorNames.Max, args: 99999 }],
     },
     {
       name: 'techRecord_frontVehicleTo5thWheelCouplingMin',
-      label: 'Minimum',
+      label: DimensionLabelEnum.MINIMUM,
       value: null,
       type: FormNodeTypes.CONTROL,
       validators: [{ name: ValidatorNames.Max, args: 99999 }],
       customTags: [{ colour: TagType.PURPLE, label: TagTypeLabels.PLATES }],
     },
     {
       name: 'techRecord_frontVehicleTo5thWheelCouplingMax',
-      label: 'Maximum',
+      label: DimensionLabelEnum.MAXIMUM,
       value: null,
       type: FormNodeTypes.CONTROL,
       validators: [{ name: ValidatorNames.Max, args: 99999 }],
       customTags: [{ colour: TagType.PURPLE, label: TagTypeLabels.PLATES }],
     },
     {
       name: 'techRecord_frontAxleTo5thWheelMin',
-      label: 'Minimum',
+      label: DimensionLabelEnum.MINIMUM,
       value: null,
       type: FormNodeTypes.CONTROL,
       validators: [{ name: ValidatorNames.Max, args: 99999 }],
     },
     {
       name: 'techRecord_frontAxleTo5thWheelMax',
-      label: 'Maximum',
+      label: DimensionLabelEnum.MAXIMUM,
       value: null,
       type: FormNodeTypes.CONTROL,
       validators: [{ name: ValidatorNames.Max, args: 99999 }],

src/app/forms/templates/psv/psv-dimensions.template.ts

@@ -1,4 +1,5 @@
 import { ValidatorNames } from '@forms/models/validators.enum';
+import { DimensionLabelEnum } from '@shared/enums/dimension-label.enum';
 import { FormNode, FormNodeTypes } from '../../services/dynamic-form.types';
 
 export const PsvDimensionsTemplate: FormNode = {
@@ -8,28 +9,28 @@ export const PsvDimensionsTemplate: FormNode = {
   children: [
     {
       name: 'techRecord_dimensions_height',
-      label: 'Height (mm)',
+      label: DimensionLabelEnum.HEIGHT,
       value: null,
       type: FormNodeTypes.CONTROL,
       validators: [{ name: ValidatorNames.Max, args: 99999 }],
     },
     {
       name: 'techRecord_dimensions_length',
-      label: 'Length (mm)',
+      label: DimensionLabelEnum.LENGTH,
       value: null,
       type: FormNodeTypes.CONTROL,
       validators: [{ name: ValidatorNames.Max, args: 99999 }],
     },
     {
       name: 'techRecord_dimensions_width',
-      label: 'Width (mm)',
+      label: DimensionLabelEnum.WIDTH,
       value: null,
       type: FormNodeTypes.CONTROL,
       validators: [{ name: ValidatorNames.Max, args: 99999 }],
     },
     {
       name: 'techRecord_frontAxleToRearAxle',
-      label: 'Front axle to rear axle (mm)',
+      label: DimensionLabelEnum.FRONT_AXLE_TO_REAR_AXLE,
       value: null,
       type: FormNodeTypes.CONTROL,
       validators: [{ name: ValidatorNames.Max, args: 99999 }],

src/app/forms/templates/trl/trl-dimensions.template.ts

@@ -1,5 +1,6 @@
 import { ValidatorNames } from '@forms/models/validators.enum';
 import { TagType } from '@shared/components/tag/tag.component';
+import { DimensionLabelEnum } from '@shared/enums/dimension-label.enum';
 import {
   FormNode, FormNodeEditTypes, FormNodeTypes, TagTypeLabels,
 } from '../../services/dynamic-form.types';
@@ -11,15 +12,15 @@ export const TrlDimensionsTemplate: FormNode = {
   children: [
     {
       name: 'techRecord_dimensions_length',
-      label: 'Length (mm)',
+      label: DimensionLabelEnum.LENGTH,
       value: null,
       type: FormNodeTypes.CONTROL,
       validators: [{ name: ValidatorNames.Max, args: 99999 }],
       customTags: [{ colour: TagType.PURPLE, label: TagTypeLabels.PLATES }],
     },
     {
       name: 'techRecord_dimensions_width',
-      label: 'Width (mm)',
+      label: DimensionLabelEnum.WIDTH,
       value: null,
       type: FormNodeTypes.CONTROL,
       validators: [{ name: ValidatorNames.Max, args: 99999 }],
@@ -36,7 +37,7 @@ export const TrlDimensionsTemplate: FormNode = {
           children: [
             {
               name: 'value',
-              label: 'Axle to axle (mm)',
+              label: DimensionLabelEnum.AXLE_TO_AXLE,
               value: null,
               editType: FormNodeEditTypes.NUMBER,
               type: FormNodeTypes.CONTROL,
@@ -48,50 +49,50 @@ export const TrlDimensionsTemplate: FormNode = {
     },
     {
       name: 'techRecord_frontAxleToRearAxle',
-      label: 'Front axle to rear axle (mm)',
+      label: DimensionLabelEnum.FRONT_AXLE_TO_REAR_AXLE,
       value: null,
       type: FormNodeTypes.CONTROL,
       validators: [{ name: ValidatorNames.Max, args: 99999 }],
     },
     {
       name: 'techRecord_rearAxleToRearTrl',
-      label: 'Rear axle to rear trailer',
+      label: DimensionLabelEnum.REAR_AXLE_TO_REAR_TRAILER,
       value: null,
       type: FormNodeTypes.CONTROL,
       validators: [{ name: ValidatorNames.Max, args: 99999 }],
     },
     {
       name: 'techRecord_centreOfRearmostAxleToRearOfTrl',
-      label: 'Center of Rear axle to rear of trailer',
+      label: DimensionLabelEnum.CENTER_REAR_AXLE_TO_REAR_TRAILER,
       value: null,
       type: FormNodeTypes.CONTROL,
       validators: [{ name: ValidatorNames.Max, args: 99999 }],
     },
     {
       name: 'techRecord_couplingCenterToRearAxleMin',
-      label: 'Minimum',
+      label: DimensionLabelEnum.MINIMUM,
       value: null,
       type: FormNodeTypes.CONTROL,
       validators: [{ name: ValidatorNames.Max, args: 99999 }],
     },
     {
       name: 'techRecord_couplingCenterToRearAxleMax',
-      label: 'Maximum',
+      label: DimensionLabelEnum.MAXIMUM,
       value: null,
       type: FormNodeTypes.CONTROL,
       validators: [{ name: ValidatorNames.Max, args: 99999 }],
     },
     {
       name: 'techRecord_couplingCenterToRearTrlMin',
-      label: 'Minimum',
+      label: DimensionLabelEnum.MINIMUM,
       value: null,
       type: FormNodeTypes.CONTROL,
       validators: [{ name: ValidatorNames.Max, args: 99999 }],
       customTags: [{ colour: TagType.PURPLE, label: TagTypeLabels.PLATES }],
     },
     {
       name: 'techRecord_couplingCenterToRearTrlMax',
-      label: 'Maximum',
+      label: DimensionLabelEnum.MAXIMUM,
       value: null,
       type: FormNodeTypes.CONTROL,
       validators: [{ name: ValidatorNames.Max, args: 99999 }],

src/app/shared/enums/dimension-label.enum.ts

@@ -0,0 +1,11 @@
+export enum DimensionLabelEnum {
+  LENGTH = 'Length (mm)',
+  WIDTH = 'Width (mm)',
+  HEIGHT = 'Height (mm)',
+  FRONT_AXLE_TO_REAR_AXLE = 'Front axle to rear axle (mm)',
+  AXLE_TO_AXLE = 'Axle to axle (mm)',
+  REAR_AXLE_TO_REAR_TRAILER = 'Rear axle to rear trailer',
+  CENTER_REAR_AXLE_TO_REAR_TRAILER = 'Center of Rear axle to rear of trailer',
+  MINIMUM = 'Minimum',
+  MAXIMUM = 'Maximum',
+}

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',
+}