feat(dfs-plates-and-dimensions): plates and dimensions dfs work

src/app/features/tech-record/components/tech-record-summary-changes/tech-record-summary-changes.component.html

@@ -118,14 +118,21 @@
       </ng-container>
 
       <ng-container *ngSwitchCase="'dimensionsSection'">
-        <app-dimensions
-          *ngIf="
-            techRecordEdited.techRecord_vehicleType === 'hgv' ||
-            techRecordEdited.techRecord_vehicleType === 'psv' ||
-            techRecordEdited.techRecord_vehicleType === 'trl'
-          "
-          [techRecord]="techRecordEdited"
-        ></app-dimensions>
+        <ng-container *ngIf="
+          techRecordEdited.techRecord_vehicleType === 'hgv' ||
+          techRecordEdited.techRecord_vehicleType === 'psv' ||
+          techRecordEdited.techRecord_vehicleType === 'trl'
+        ">
+          <!-- New Dimensions section -->
+          <ng-container *ngIf="featureToggleService.isFeatureEnabled('FsDimensions'); else oldDimensionsSection">
+            <app-dimensions-section [techRecord]="techRecordEdited" mode="summary"></app-dimensions-section>
+          </ng-container>
+
+          <!-- Old Dimensions section -->
+          <ng-template #oldDimensionsSection>
+            <app-dimensions [techRecord]="techRecordEdited" mode="summary"></app-dimensions>
+          </ng-template>
+        </ng-container>
       </ng-container>
 
       <ng-container *ngSwitchCase="'approvalSection'">

src/app/features/tech-record/components/tech-record-summary/tech-record-summary.component.html

@@ -74,16 +74,25 @@
         </ng-container>
 
         <ng-container *ngSwitchCase="'dimensionsSection'">
-          <app-dimensions
-            *ngIf="
-              techRecordCalculated.techRecord_vehicleType === 'trl' ||
-              techRecordCalculated.techRecord_vehicleType === 'hgv' ||
-              techRecordCalculated.techRecord_vehicleType === 'psv'
-            "
-            [techRecord]="techRecordCalculated"
-            [isEditing]="(isEditing$ | async) ?? false"
-            (formChange)="handleFormState($event)"
-          ></app-dimensions>
+          <ng-container *ngIf="
+            techRecordCalculated.techRecord_vehicleType === 'trl' ||
+            techRecordCalculated.techRecord_vehicleType === 'hgv' ||
+            techRecordCalculated.techRecord_vehicleType === 'psv'
+          ">
+            <!-- New dimensions section-->
+            <ng-container *ngIf="featureToggleService.isFeatureEnabled('FsDimensions'); else oldDimensionsSection">
+              <app-dimensions-section [techRecord]="techRecordCalculated" [mode]="(isEditing$ | async) ? 'edit' : 'view'"></app-dimensions-section>
+            </ng-container>
+
+            <!-- Old dimensions section-->
+            <ng-template #oldDimensionsSection>
+              <app-dimensions
+                [techRecord]="techRecordCalculated"
+                [isEditing]="(isEditing$ | async) ?? false"
+                (formChange)="handleFormState($event)"
+              ></app-dimensions>
+            </ng-template>
+          </ng-container>
         </ng-container>
 
         <ng-container *ngSwitchCase="'approvalSection'">
@@ -172,12 +181,23 @@
         </ng-container>
 
         <ng-container *ngSwitchCase="'platesSection'">
-          <app-plates
-            *ngIf="techRecordCalculated.techRecord_vehicleType === 'hgv' || techRecordCalculated.techRecord_vehicleType === 'trl'"
-            [techRecord]="techRecordCalculated"
-            [isEditing]="(isEditing$ | async) ?? false"
-            (formChange)="handleFormState($event)"
-          ></app-plates>
+          <ng-container *ngIf="techRecordCalculated.techRecord_vehicleType === 'hgv' || techRecordCalculated.techRecord_vehicleType === 'trl'">
+            <!-- New Plates Section -->
+            <ng-container *ngIf="featureToggleService.isFeatureEnabled('FsPlates'); else oldPlatesSection">
+              <app-plates-section
+                [techRecord]="techRecordCalculated"
+                [mode]="(isEditing$ | async) ? 'edit' : 'view'"/>
+            </ng-container>
+            <!-- Old Plates Section -->
+            <ng-template #oldPlatesSection>
+              <app-plates
+                *ngIf="techRecordCalculated.techRecord_vehicleType === 'hgv' || techRecordCalculated.techRecord_vehicleType === 'trl'"
+                [techRecord]="techRecordCalculated"
+                [isEditing]="(isEditing$ | async) ?? false"
+                (formChange)="handleFormState($event)"
+              ></app-plates>
+            </ng-template>
+          </ng-container>
         </ng-container>
 
         <ng-container *ngSwitchCase="'adrSection'">

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

@@ -21,6 +21,7 @@ export class NumberInputComponent extends BaseControlComponent implements AfterC
 		return `govuk-input ${this.width ? `govuk-input--width-${this.width}` : ''}`;
 	}
 
+	// @TODO: remove this when dimensions feature flag is removed
 	get getWarningMessage(): string {
 		if (this.isCorrectVehicleType()) {
 			if (this.shouldDisplayLengthWarning())
@@ -31,13 +32,17 @@ export class NumberInputComponent extends BaseControlComponent implements AfterC
 		return '';
 	}
 
+	// @TODO: remove this when dimensions feature flag is removed
 	shouldDisplayLengthWarning(): boolean {
 		return this.label === 'Length' && Number.parseInt(this.value, 10) > 12000;
 	}
+
+	// @TODO: remove this when dimensions feature flag is removed
 	shouldDisplayWidthWarning(): boolean {
 		return this.label === 'Width' && Number.parseInt(this.value, 10) > 2600;
 	}
 
+	// @TODO: remove this when dimensions feature flag is removed
 	isCorrectVehicleType(): boolean {
 		return this.vehicleType === 'hgv' || this.vehicleType === 'trl';
 	}

src/app/forms/custom-sections/dimensions-section/dimensions-section-edit/dimensions-section-edit.component.html

@@ -0,0 +1,199 @@
+<ng-container *ngIf="techRecord() as tr">
+  <ng-container *ngIf="tr.techRecord_vehicleType === VehicleTypes.HGV || tr.techRecord_vehicleType === VehicleTypes.PSV || tr.techRecord_vehicleType === VehicleTypes.TRL">
+    <div class="main-dimensions" [formGroup]="form">
+      <!-- Height (PSV only)-->
+      <govuk-form-group-input
+        *ngIf="tr.techRecord_vehicleType === VehicleTypes.PSV"
+        formControlName="techRecord_dimensions_height"
+        label="Height"
+        [width]="Widths.XS"
+        suffix="mm"
+        type="number"
+      ></govuk-form-group-input>
+
+      <!-- Length-->
+      <govuk-form-group-input
+        formControlName="techRecord_dimensions_length"
+        label="Length"
+        [width]="Widths.XS"
+        suffix="mm"
+        type="number"
+        [tags]="tr.techRecord_vehicleType === VehicleTypes.PSV 
+          ? []
+          : [{ colour: TagType.PURPLE, label: TagTypeLabels.PLATES }]"
+      ></govuk-form-group-input>
+
+      <!-- Width-->
+      <govuk-form-group-input
+        formControlName="techRecord_dimensions_width"
+        label="Width"
+        [width]="Widths.XS"
+        suffix="mm"
+        type="number"
+        [tags]="tr.techRecord_vehicleType === VehicleTypes.PSV 
+          ? []
+          : [{ colour: TagType.PURPLE, label: TagTypeLabels.PLATES }]"
+      ></govuk-form-group-input>
+
+      <!-- Front axle to rear axle-->
+      <govuk-form-group-input
+        formControlName="techRecord_frontAxleToRearAxle"
+        label="Front axle to rear axle"
+        [width]="Widths.XS"
+        suffix="mm"
+        type="number"
+      ></govuk-form-group-input>
+
+      <!-- Rear axle to rear trailer (TRL only) -->
+      <govuk-form-group-input
+        *ngIf="tr.techRecord_vehicleType === VehicleTypes.TRL"
+        formControlName="techRecord_rearAxleToRearTrl"
+        label="Rear axle to rear trailer"
+        [width]="Widths.XS"
+        suffix="mm"
+        type="number"
+      ></govuk-form-group-input>
+
+      <!-- Axles spacings (HGV and TRL) -->
+      <ng-container *ngIf="tr.techRecord_vehicleType !== VehicleTypes.PSV" formArrayName="techRecord_dimensions_axleSpacing">
+        <ng-container *ngFor="let axle of axleSpacings?.controls; let i = index" [formGroup]="axle">
+          <govuk-form-group-input
+            [id]="'techRecord_dimensions_axleSpacing_' + i + '_value'"
+            formControlName="value"
+            label="Axle {{ i + 1 }} to axle {{ i + 2 }} (mm)"
+            [width]="Widths.XS"
+            suffix="mm"
+            type="number"
+          ></govuk-form-group-input>
+        </ng-container>
+      </ng-container>
+
+      <!-- TRL only fields -->
+      <ng-container *ngIf="tr.techRecord_vehicleType === VehicleTypes.TRL">
+        <div class="min-max-container">
+          <span class="govuk-label govuk-label--m">
+            Coupling center to rear axle
+          </span>
+
+          <div class="min-max">
+            <!-- Coupling center to rear axle minimum -->
+            <govuk-form-group-input
+              formControlName="techRecord_couplingCenterToRearAxleMin"
+              label="Minimum"
+              [width]="Widths.XS"
+              suffix="mm"
+              type="number"
+              [tags]="tr.techRecord_vehicleType === VehicleTypes.TRL
+                ? [{ colour: TagType.PURPLE, label: TagTypeLabels.PLATES }]
+                : []"
+            ></govuk-form-group-input>
+
+            <!-- Coupling center to rear axle maximum -->
+            <govuk-form-group-input
+              formControlName="techRecord_couplingCenterToRearAxleMax"
+              label="Maximum"
+              [width]="Widths.XS"
+              suffix="mm"
+              type="number"
+            ></govuk-form-group-input>
+          </div>
+        </div>
+
+        <div class="min-max-container">
+          <span class="govuk-label govuk-label--m">
+            Coupling center to rear trailer
+          </span>
+
+          <app-field-warning-message [warningMessage]="couplingCenterToRearTrlWarning"></app-field-warning-message>
+
+          <div class="min-max">
+            <!-- Coupling center to rear trailer minimum -->
+            <govuk-form-group-input
+              formControlName="techRecord_couplingCenterToRearTrlMin"
+              label="Minimum"
+              [width]="Widths.XS"
+              suffix="mm"
+              type="number"
+            ></govuk-form-group-input>
+
+            <!-- Coupling center to rear trailer maximum -->
+            <govuk-form-group-input
+              formControlName="techRecord_couplingCenterToRearTrlMax"
+              label="Maximum"
+              [width]="Widths.XS"
+              suffix="mm"
+              type="number"
+              [tags]="tr.techRecord_vehicleType === VehicleTypes.TRL
+                ? [{ colour: TagType.PURPLE, label: TagTypeLabels.PLATES }]
+                : []"
+            ></govuk-form-group-input>
+          </div>
+        </div>
+
+        <!-- Center of rear axle to rear of trailer --> 
+        <govuk-form-group-input 
+          formControlName="techRecord_centreOfRearmostAxleToRearOfTrl"
+          label="Center of rear axle to rear of trailer"
+          [width]="Widths.XS"
+          suffix="mm"
+          type="number"
+        ></govuk-form-group-input>
+      </ng-container>
+
+      <!-- HGV only fields -->
+      <ng-container *ngIf="tr.techRecord_vehicleType === VehicleTypes.HGV">
+        <div class="min-max-container">
+          <span class="govuk-label govuk-label--m">
+            Front of vehicle to 5th wheel coupling
+          </span>
+
+          <div class="min-max">
+            <!-- Front of vehicle to 5th wheel coupling minimum -->
+            <govuk-form-group-input
+              formControlName="techRecord_frontVehicleTo5thWheelCouplingMin"
+              label="Minimum"
+              [width]="Widths.XS"
+              suffix="mm"
+              type="number"
+            ></govuk-form-group-input>
+
+            <!-- Front of vehicle to 5th wheel coupling maximum -->
+            <govuk-form-group-input
+              formControlName="techRecord_frontVehicleTo5thWheelCouplingMax"
+              label="Maximum"
+              [width]="Widths.XS"
+              suffix="mm"
+              type="number"
+            ></govuk-form-group-input>
+          </div>
+        </div>
+
+        <div class="min-max-container">
+          <span class="govuk-label govuk-label--m">
+            Front axle to 5th wheel
+          </span>
+
+          <div class="min-max">
+            <!-- Front axle to 5th wheel minimum -->
+            <govuk-form-group-input
+              formControlName="techRecord_frontAxleTo5thWheelMin"
+              label="Minimum"
+              [width]="Widths.XS"
+              suffix="mm"
+              type="number"
+            ></govuk-form-group-input>
+
+            <!-- Front axle to 5th wheel maximum -->
+            <govuk-form-group-input
+              formControlName="techRecord_frontAxleTo5thWheelMax"
+              label="Maximum"
+              [width]="Widths.XS"
+              suffix="mm"
+              type="number"
+            ></govuk-form-group-input>
+          </div>
+        </div>
+      </ng-container>
+    </div>
+  </ng-container>
+</ng-container>

src/app/forms/custom-sections/dimensions-section/dimensions-section-edit/dimensions-section-edit.component.scss

@@ -0,0 +1,26 @@
+:host {
+  display: flex;
+  flex-flow: column wrap;
+  gap: 0rem 1rem;
+
+  .min-max-container {
+    display: flex;
+    flex-flow: column wrap;
+    gap: 0 1rem;
+
+    .extra-margin {
+      margin-top: 2rem;
+    }
+  }
+
+  .main-dimensions,
+  .min-max {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 0rem 1rem;
+
+    > * {
+      min-width: 245px;
+    }
+  }
+}