From 5e3307326d4ddb42601dc32bce1019d62cd818e1 Mon Sep 17 00:00:00 2001
From: Brandon Thomas-Davies <87308252+BrandonT95@users.noreply.github.com>
Date: Thu, 28 Nov 2024 10:57:57 +0000
Subject: [PATCH] feat(cb2-14451): edit mode finish trl fields

---
 .../vehicle-section-edit.component.html       | 79 ++++++++++++++++++-
 .../vehicle-section-edit.component.ts         | 30 ++++++-
 2 files changed, 103 insertions(+), 6 deletions(-)

diff --git a/src/app/forms/custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.html b/src/app/forms/custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.html
index 0a4fcd130..79c8cfa7f 100644
--- a/src/app/forms/custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.html
+++ b/src/app/forms/custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.html
@@ -73,6 +73,36 @@ <h1>
   </div>
 
   <!--  Date of first use (TRL only) -->
+  <app-date-controls *ngIf="shouldDisplayFormControl('techRecord_firstUseDate')" formControlName="techRecord_firstUseDate" #firstUseDate>
+    <div class="govuk-form-group-date" [formGroup]="firstUseDate.form">
+      <fieldset role="group">
+        <legend>
+          Date of first use
+        </legend>
+        <app-control-errors elementId="techRecord_firstUseDate-error" [control]="$any(form.get('techRecord_firstUseDate'))" />
+        <div id="techRecord_firstUseDate">
+          <div>
+            <div>
+              <label id="techRecord_firstUseDate-day-label">Day</label>
+              <input class="govuk-input--width-2" govukDateInput="techRecord_firstUseDate" formControlName="day" />
+            </div>
+          </div>
+          <div>
+            <div>
+              <label id="techRecord_firstUseDate-month-label">Month</label>
+              <input class="govuk-input--width-2" govukDateInput="techRecord_firstUseDate" formControlName="month" />
+            </div>
+          </div>
+          <div>
+            <div>
+              <label id="techRecord_firstUseDate-year-label">Year</label>
+              <input class="govuk-input--width-4" govukDateInput="techRecord_firstUseDate" formControlName="year" />
+            </div>
+          </div>
+        </div>
+      </fieldset>
+    </div>
+  </app-date-controls>
 
   <!--  Number of axles -->
   <div *ngIf="shouldDisplayFormControl('techRecord_noOfAxles')" class="govuk-form-group-input">
@@ -215,6 +245,15 @@ <h1 tag>
   </div>
 
   <!--  Suspension type (TRL Only) -->
+  <div class="govuk-form-group-select" *ngIf="shouldDisplayFormControl('techRecord_suspensionType')">
+    <label>
+      Suspension type (optional)
+    </label>
+    <app-control-errors elementId="techRecord_suspensionType" [control]="$any(form.get('techRecord_suspensionType'))" />
+    <select govukSelect formControlName="techRecord_suspensionType">
+      <option [value]="option.value" *ngFor="let option of suspensionTypeOptions">{{ option.label }}</option>
+    </select>
+  </div>
 
   <!-- Fuel / propulsion system -->
   <div *ngIf="shouldDisplayFormControl('techRecord_fuelPropulsionSystem')" class="govuk-form-group-select">
@@ -258,7 +297,34 @@ <h1>
   </ng-container>
 
   <!--  Coupling type (TRL Only) -->
+  <div class="govuk-form-group-select" *ngIf="shouldDisplayFormControl('techRecord_couplingType')">
+    <label>
+      Coupling type (optional)
+    </label>
+    <app-control-errors elementId="techRecord_couplingType" [control]="$any(form.get('techRecord_couplingType'))" />
+    <select govukSelect formControlName="techRecord_couplingType">
+      <option [value]="option.value" *ngFor="let option of CouplingTypeOptions">{{ option.label }}</option>
+    </select>
+  </div>
+
   <!--  Max load on coupling (TRL Only) -->
+  <div *ngIf="shouldDisplayFormControl('techRecord_maxLoadOnCoupling')" class="govuk-form-group-input">
+    <h1>
+      <label id="techRecord_maxLoadOnCoupling-label">
+        Max load on coupling (optional)
+        <div>
+          <app-tag [type]="TagType.PURPLE">{{ TagTypeLabels.PLATES }}</app-tag>
+        </div>
+      </label>
+    </h1>
+    <input
+      appNumberOnly
+      inputmode="numeric"
+      type="number"
+      [width]="FormNodeWidth.XS"
+      govukInput
+      formControlName="techRecord_maxLoadOnCoupling" />
+  </div>
 
 
   <!--  Vehicle configuration-->
@@ -306,6 +372,17 @@ <h1>
     </fieldset>
   </div>
 
+  <!-- Frame description (TRL Only) -->
+  <div *ngIf="shouldDisplayFormControl('techRecord_frameDescription')" class="govuk-form-group-select">
+    <label tag>
+      Frame description (optional)
+    </label>
+    <app-control-errors elementId="techRecord_frameDescription" [control]="$any(form.get('techRecord_frameDescription'))" />
+    <select govukSelect formControlName="techRecord_frameDescription">
+      <option [value]="option.value" *ngFor="let option of frameDescriptionOptions">{{ option.label }}</option>
+    </select>
+  </div>
+
   <!-- EU Category -->
   <div *ngIf="shouldDisplayFormControl('techRecord_euVehicleCategory')" class="govuk-form-group-select">
     <label>EU vehicle category</label>
@@ -457,8 +534,6 @@ <h1>
     </app-date-controls>
   </div>
 
-  <!-- Frame description (TRL Only) -->
-
   <!-- Departmental vehicle marker -->
   <div *ngIf="shouldDisplayFormControl('techRecord_departmentalVehicleMarker')" class="govuk-form-group-radio">
     <fieldset>
diff --git a/src/app/forms/custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.ts b/src/app/forms/custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.ts
index 83ad8bc2f..204b21ed7 100644
--- a/src/app/forms/custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.ts
+++ b/src/app/forms/custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.ts
@@ -16,6 +16,7 @@ import { FuelPropulsionSystem } from '@dvsa/cvs-type-definitions/types/v3/tech-r
 import { TechRecordType } from '@dvsa/cvs-type-definitions/types/v3/tech-record/tech-record-vehicle-type';
 import { getOptionsFromEnum } from '@forms/utils/enum-map';
 import { CommonValidatorsService } from '@forms/validators/common-validators.service';
+import { CouplingTypeOptions } from '@models/coupling-type-enum';
 import { MultiOptions } from '@models/options.model';
 import { EmissionStandard } from '@models/test-types/emissions.enum';
 import {
@@ -24,7 +25,13 @@ import {
 	VehicleConfiguration,
 } from '@models/vehicle-configuration.enum';
 import { VehicleSize } from '@models/vehicle-size.enum';
-import { FuelTypes, V3TechRecordModel, VehicleSubclass, VehicleTypes } from '@models/vehicle-tech-record.model';
+import {
+	FrameDescriptions,
+	FuelTypes,
+	V3TechRecordModel,
+	VehicleSubclass,
+	VehicleTypes,
+} from '@models/vehicle-tech-record.model';
 import { Store } from '@ngrx/store';
 import { FormNodeWidth, TagTypeLabels } from '@services/dynamic-forms/dynamic-form.types';
 import { TechnicalRecordService } from '@services/technical-record/technical-record.service';
@@ -38,6 +45,7 @@ type VehicleSectionForm = Partial<Record<keyof TechRecordType<'hgv' | 'car' | 'p
 	styleUrls: ['./vehicle-section-edit.component.scss'],
 })
 export class VehicleSectionEditComponent implements OnInit, OnDestroy {
+	protected readonly CouplingTypeOptions = CouplingTypeOptions;
 	protected readonly FormNodeWidth = FormNodeWidth;
 	protected readonly TagType = TagType;
 	protected readonly TagTypeLabels = TagTypeLabels;
@@ -347,14 +355,28 @@ export class VehicleSectionEditComponent implements OnInit, OnDestroy {
 		];
 	}
 
-	get subClassOptions() {
+	get suspensionTypeOptions(): MultiOptions {
+		return [
+			{ value: 'S', label: 'Steel' },
+			{ value: 'R', label: 'Rubber' },
+			{ value: 'A', label: 'Air' },
+			{ value: 'H', label: 'Hydraulic' },
+			{ value: 'O', label: 'Other' },
+		];
+	}
+
+	get subClassOptions(): MultiOptions {
 		return getOptionsFromEnum(VehicleSubclass);
 	}
 
-	get vehicleSizeOptions() {
+	get vehicleSizeOptions(): MultiOptions {
 		return getOptionsFromEnum(VehicleSize);
 	}
 
+	get frameDescriptionOptions(): MultiOptions {
+		return getOptionsFromEnum(FrameDescriptions);
+	}
+
 	get controlsBasedOffVehicleType() {
 		switch (this.technicalRecordService.getVehicleTypeWithSmallTrl(this.techRecord())) {
 			case VehicleTypes.HGV:
@@ -386,7 +408,7 @@ export class VehicleSectionEditComponent implements OnInit, OnDestroy {
 		return !!this.form.get(formControlName);
 	}
 
-	getVehicleType() {
+	getVehicleType(): VehicleTypes {
 		return this.technicalRecordService.getVehicleTypeWithSmallTrl(this.techRecord());
 	}