diff --git a/src/app/forms/components/number-input/number-input.component.ts b/src/app/forms/components/number-input/number-input.component.ts
index d099ed761..c677f07ac 100644
--- a/src/app/forms/components/number-input/number-input.component.ts
+++ b/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) {
diff --git a/src/app/forms/custom-sections/dimensions/dimensions.component.spec.ts b/src/app/forms/custom-sections/dimensions/dimensions.component.spec.ts
index 1e57c7070..7174e5228 100644
--- a/src/app/forms/custom-sections/dimensions/dimensions.component.spec.ts
+++ b/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);
+ });
+ });
});
diff --git a/src/app/forms/custom-sections/dimensions/dimensions.component.ts b/src/app/forms/custom-sections/dimensions/dimensions.component.ts
index 1c0dfb467..aefad6e98 100644
--- a/src/app/forms/custom-sections/dimensions/dimensions.component.ts
+++ b/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();
diff --git a/src/app/forms/templates/hgv/hgv-dimensions.template.ts b/src/app/forms/templates/hgv/hgv-dimensions.template.ts
index cc0676306..b3bf711ca 100644
--- a/src/app/forms/templates/hgv/hgv-dimensions.template.ts
+++ b/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,7 +12,7 @@ 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 }],
@@ -19,7 +20,7 @@ export const HgvDimensionsTemplate: FormNode = {
},
{
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,14 +48,14 @@ 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 }],
@@ -62,7 +63,7 @@ export const HgvDimensionsTemplate: FormNode = {
},
{
name: 'techRecord_frontVehicleTo5thWheelCouplingMax',
- label: 'Maximum',
+ label: DimensionLabelEnum.MAXIMUM,
value: null,
type: FormNodeTypes.CONTROL,
validators: [{ name: ValidatorNames.Max, args: 99999 }],
@@ -70,14 +71,14 @@ export const HgvDimensionsTemplate: FormNode = {
},
{
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 }],
diff --git a/src/app/forms/templates/psv/psv-dimensions.template.ts b/src/app/forms/templates/psv/psv-dimensions.template.ts
index 069cfe3a9..2aad5501a 100644
--- a/src/app/forms/templates/psv/psv-dimensions.template.ts
+++ b/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 }],
diff --git a/src/app/forms/templates/trl/trl-dimensions.template.ts b/src/app/forms/templates/trl/trl-dimensions.template.ts
index 939d7217f..fc08a581f 100644
--- a/src/app/forms/templates/trl/trl-dimensions.template.ts
+++ b/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,7 +12,7 @@ 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 }],
@@ -19,7 +20,7 @@ export const TrlDimensionsTemplate: FormNode = {
},
{
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,42 +49,42 @@ 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 }],
@@ -91,7 +92,7 @@ export const TrlDimensionsTemplate: FormNode = {
},
{
name: 'techRecord_couplingCenterToRearTrlMax',
- label: 'Maximum',
+ label: DimensionLabelEnum.MAXIMUM,
value: null,
type: FormNodeTypes.CONTROL,
validators: [{ name: ValidatorNames.Max, args: 99999 }],
diff --git a/src/app/shared/enums/dimension-label.enum.ts b/src/app/shared/enums/dimension-label.enum.ts
new file mode 100644
index 000000000..0c61a7320
--- /dev/null
+++ b/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',
+}
diff --git a/src/app/shared/enums/warnings.enum.ts b/src/app/shared/enums/warnings.enum.ts
new file mode 100644
index 000000000..ec2c365dd
--- /dev/null
+++ b/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',
+}