feat(cb2-14450-weights-dfs): weights and tyres

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

@@ -53,20 +53,20 @@
     <div class="govuk-summary-list__row" *ngIf="techRecordEdited.techRecord_vehicleType !== 'psv'">
       <dt class="govuk-summary-list__key">Make</dt>
       <dd class="govuk-summary-list__value" id="test-techRecord_make">
-        {{ 
-          techRecordEdited.techRecord_vehicleType === 'trl' || techRecordEdited.techRecord_vehicleType === 'hgv' 
-            ? (techRecordEdited.techRecord_make | defaultNullOrEmpty) 
-            : '-' 
+        {{
+          techRecordEdited.techRecord_vehicleType === 'trl' || techRecordEdited.techRecord_vehicleType === 'hgv'
+            ? (techRecordEdited.techRecord_make | defaultNullOrEmpty)
+            : '-'
         }}
       </dd>
     </div>
     <div class="govuk-summary-list__row" *ngIf="techRecordEdited.techRecord_vehicleType !== 'psv'">
       <dt class="govuk-summary-list__key">Model</dt>
       <dd class="govuk-summary-list__value" id="test-techRecord_model">
-        {{ 
-          techRecordEdited.techRecord_vehicleType === 'trl' || techRecordEdited.techRecord_vehicleType === 'hgv' 
-            ? (techRecordEdited.techRecord_model | defaultNullOrEmpty) 
-            : '-' 
+        {{
+          techRecordEdited.techRecord_vehicleType === 'trl' || techRecordEdited.techRecord_vehicleType === 'hgv'
+            ? (techRecordEdited.techRecord_model | defaultNullOrEmpty)
+            : '-'
         }}
       </dd>
     </div>
@@ -156,7 +156,15 @@
             techRecordEdited.techRecord_vehicleType === 'trl'
           "
         >
-          <app-tyres [vehicleTechRecord]="techRecordEdited"></app-tyres>
+          <!-- New Tyres section -->
+          <ng-container *ngIf="featureToggleService.isFeatureEnabled('FsTyres'); else oldTyresSection">
+            <app-tyres-section [techRecord]="techRecordEdited" [mode]="'summary'"></app-tyres-section>
+          </ng-container>
+
+          <!-- Old Tyres section -->
+          <ng-template #oldTyresSection>
+            <app-tyres [vehicleTechRecord]="techRecordEdited"></app-tyres>
+          </ng-template>
         </ng-container>
       </ng-container>
 
@@ -176,10 +184,27 @@
                 You removed an axle.
               </strong>
             </div>
-            <app-weights [vehicleTechRecord]="techRecordEdited"></app-weights>
+            <!-- New Weights section -->
+            <ng-container *ngIf="featureToggleService.isFeatureEnabled('FsWeights'); else oldWeightsSection">
+              <app-weights-section [techRecord]="techRecordEdited" [mode]="'summary'"/>
+            </ng-container>
+
+            <!-- Old Weights section -->
+            <ng-template #oldWeightsSection>
+              <app-weights [vehicleTechRecord]="techRecordEdited"></app-weights>
+            </ng-template>
           </ng-container>
+
           <ng-template #noDeleted>
-            <app-modified-weights *ngIf="changesForWeights" [vehicleType]="vehicleType" [changes]="changesForWeights"></app-modified-weights>
+            <!-- New Weights section -->
+            <ng-container *ngIf="featureToggleService.isFeatureEnabled('FsWeights'); else oldModifiedWeightsSection">
+              <app-weights-section [techRecord]="techRecordEdited" [mode]="'summary'"/>
+            </ng-container>
+
+            <!-- Old Weights section -->
+            <ng-template #oldModifiedWeightsSection>
+              <app-modified-weights *ngIf="changesForWeights" [vehicleType]="vehicleType" [changes]="changesForWeights"></app-modified-weights>
+            </ng-template>
           </ng-template>
         </ng-container>
       </ng-container>

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

@@ -118,29 +118,48 @@
         </ng-container>
 
         <ng-container *ngSwitchCase="'tyreSection'">
-          <app-tyres
-            *ngIf="
-              techRecordCalculated.techRecord_vehicleType === 'trl' ||
-              techRecordCalculated.techRecord_vehicleType === 'hgv' ||
-              techRecordCalculated.techRecord_vehicleType === 'psv'
-            "
-            [vehicleTechRecord]="techRecordCalculated"
-            [isEditing]="(isEditing$ | async) ?? false"
-            (formChange)="handleFormState($event)"
-          ></app-tyres>
+          <ng-container *ngIf="
+            techRecordCalculated.techRecord_vehicleType === 'trl' ||
+            techRecordCalculated.techRecord_vehicleType === 'hgv' ||
+            techRecordCalculated.techRecord_vehicleType === 'psv'
+          ">
+            <!-- New Tyres section -->
+            <ng-container *ngIf="featureToggleService.isFeatureEnabled('FsTyres'); else oldTyresSection">
+              <app-tyres-section [techRecord]="techRecordCalculated" [mode]="(isEditing$ | async) ? 'edit' : 'view'" />
+            </ng-container>
+
+            <!-- Old Tyres section -->
+            <ng-template #oldTyresSection>
+              <app-tyres
+                [vehicleTechRecord]="techRecordCalculated"
+                [isEditing]="(isEditing$ | async) ?? false"
+                (formChange)="handleFormState($event)"
+              ></app-tyres>
+            </ng-template>
+          </ng-container>
         </ng-container>
 
         <ng-container *ngSwitchCase="'weightsSection'">
-          <app-weights
-            *ngIf="
+          <ng-container *ngIf="
               techRecordCalculated.techRecord_vehicleType === 'trl' ||
               techRecordCalculated.techRecord_vehicleType === 'hgv' ||
               techRecordCalculated.techRecord_vehicleType === 'psv'
-            "
-            [vehicleTechRecord]="techRecordCalculated"
-            [isEditing]="(isEditing$ | async) ?? false"
-            (formChange)="handleFormState($event)"
-          ></app-weights>
+            ">
+            <!-- New Weights Section -->
+            <ng-container *ngIf="featureToggleService.isFeatureEnabled('FsWeights'); else oldWeightsSection">
+              <app-weights-section
+                [techRecord]="techRecordCalculated"
+                [mode]="(isEditing$ | async) ? 'edit' : 'view'"/>
+            </ng-container>
+            <!-- Old Weights Section -->
+            <ng-template #oldWeightsSection>
+              <app-weights
+                [vehicleTechRecord]="techRecordCalculated"
+                [isEditing]="(isEditing$ | async) ?? false"
+                (formChange)="handleFormState($event)"
+              ></app-weights>
+            </ng-template>
+          </ng-container>
         </ng-container>
 
         <ng-container *ngSwitchCase="'lettersSection'">

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

@@ -156,9 +156,7 @@ export class TechRecordSummaryComponent implements OnInit, OnDestroy, AfterViewI
 		});
 
 		this.form.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((changes) => {
-			// prevent merging of array of objects - always override
-			const isArray = (a: unknown, b: unknown) => (Array.isArray(a) ? b : undefined);
-			this.techRecordCalculated = mergeWith(cloneDeep(this.techRecordCalculated), changes, isArray);
+			this.techRecordCalculated = mergeWith(cloneDeep(this.techRecordCalculated), changes);
 			this.technicalRecordService.updateEditingTechRecord(this.techRecordCalculated as TechRecordType<'put'>);
 		});
 	}

src/app/forms/components/govuk-form-group-input/govuk-form-group-input.component.html

@@ -1,6 +1,6 @@
 <div class="govuk-form-group-input">
-  <h1>
-    <label tag>
+  <h1 *ngIf="controlLabel">
+    <label id="{{ labelId }}" for="{{ id }}" tag>
       {{ controlLabel }}
       <ng-container *ngIf="tags?.length">
         <div>
@@ -31,33 +31,39 @@ <h1>
       [class.govuk-radios__input--error]="hasError"
       [(ngModel)]="value"
       (ngModelChange)="onChange($event)"
-      (blur)="onTouched()"
+      (blur)="onBlur($event)"
       [class]="style"
       [disabled]="control?.disabled || false"
     />
   </ng-container>
+
   <ng-container *ngIf="controlType === 'number'">
+    <div class="govuk-input__wrapper">
+      <input
+        id="{{ id }}"
+        name="{{ id }}"
+        [attr.aria-describedby]="hintId"
+        [attr.aria-labelledby]="labelId"
+        [attr.data-testid]="id"
+        [class.govuk-radios__input--error]="hasError"
+        [(ngModel)]="value"
+        (ngModelChange)="onChange($event)"
+        type="number"
+        appNumberOnly
+        inputmode="numeric"
+        (blur)="onBlur($event)"
+        [class]="style"
+        [disabled]="control?.disabled || false"
+      />
 
-    <input
-      id="{{ id }}"
-      name="{{ id }}"
-      [attr.aria-describedby]="hintId"
-      [attr.aria-labelledby]="labelId"
-      [attr.data-testid]="id"
-      [class.govuk-radios__input--error]="hasError"
-      [(ngModel)]="value"
-      (ngModelChange)="onChange($event)"
-      type="number"
-      appNumberOnly
-      inputmode="numeric"
-      (blur)="onTouched()"
-      [class]="style"
-      [disabled]="control?.disabled || false"
-    />
+      <div class="govuk-input__suffix" aria-hidden="true" *ngIf="suffix">{{ suffix }}</div>
+    </div>
   </ng-container>
+
   <ng-container *ngIf="controlType === 'decimal'">
 
   </ng-container>
+
   <ng-container *ngIf="controlType === 'numericString'">
     <input
       id="{{ id }}"
@@ -69,7 +75,7 @@ <h1>
       [(ngModel)]="value"
       (ngModelChange)="onChange($event)"
       appNumberOnly
-      (blur)="onTouched()"
+      (blur)="onBlur($event)"
       [class]="style"
       [disabled]="control?.disabled || false"
     />

src/app/forms/components/govuk-form-group-input/govuk-form-group-input.component.ts

@@ -44,7 +44,7 @@ export class GovukFormGroupInputComponent implements ControlValueAccessor {
 	@Input({ alias: 'formControlName', required: true })
 	controlName = '';
 
-	@Input({ alias: 'label', required: true })
+	@Input({ alias: 'label' })
 	controlLabel = '';
 
 	@Input({ alias: 'id' })
@@ -56,6 +56,9 @@ export class GovukFormGroupInputComponent implements ControlValueAccessor {
 	@Input()
 	width?: FormNodeWidth;
 
+	@Input()
+	suffix?: string;
+
 	controlContainer = inject(ControlContainer);
 
 	get control() {
@@ -89,6 +92,11 @@ export class GovukFormGroupInputComponent implements ControlValueAccessor {
 	onChange = (_: any) => {};
 	onTouched = () => {};
 
+	onBlur(event: FocusEvent) {
+		this.onTouched();
+		this.blur.emit(event);
+	}
+
 	writeValue(obj: any): void {
 		this.value = obj;
 		this.onChange(obj);

src/app/forms/components/govuk-form-group-select/govuk-form-group-select.component.html

@@ -1,5 +1,5 @@
 <div class="govuk-form-group-select">
-  <label tag for="{{ id }}" [id]="labelId">
+  <label tag for="{{ id }}" [id]="labelId" *ngIf="controlLabel">
     {{ controlLabel }}
     <ng-container *ngIf="tags?.length">
       <div class="flex gap-2">
@@ -28,7 +28,7 @@
     [class.govuk-radios__input--error]="hasError"
     [(ngModel)]="value"
     (ngModelChange)="onChange($event)"
-    (blur)="onTouched()"
+    (blur)="onBlur($event)"
     [class]="style"
   >
     <option *ngIf="allowNull" [ngValue]="null"></option>

src/app/forms/components/govuk-form-group-select/govuk-form-group-select.component.ts

@@ -47,7 +47,7 @@ export class GovukFormGroupSelectComponent implements ControlValueAccessor {
 	@Input({ alias: 'formControlName', required: true })
 	controlName = '';
 
-	@Input({ alias: 'label', required: true })
+	@Input({ alias: 'label' })
 	controlLabel = '';
 
 	@Input({ alias: 'id' })
@@ -92,6 +92,11 @@ export class GovukFormGroupSelectComponent implements ControlValueAccessor {
 	onChange = (_: any) => {};
 	onTouched = () => {};
 
+	onBlur(event: FocusEvent) {
+		this.onTouched();
+		this.blur.emit(event);
+	}
+
 	writeValue(obj: any): void {
 		this.value = obj;
 		this.onChange(obj);

src/app/forms/components/govuk-form-group-textarea/govuk-form-group-textarea.component.html

@@ -1,6 +1,6 @@
 <div class="govuk-form-group-input">
   <h1>
-    <label tag>
+    <label id="{{ labelId}}" for="{{ id }}" tag>
       {{ controlLabel }}
       <ng-container *ngIf="tags?.length">
         <div>
@@ -26,6 +26,8 @@ <h1>
     rows="5"
     id="{{ id }}"
     name="{{ id }}"
+    [attr.aria-labelledby]="labelId"
+    [attr.data-testid]="id"
     [(ngModel)]="value"
     [disabled]="disabled"
     (ngModelChange)="onChange($event)"

src/app/forms/custom-sections/adr-section/adr-section-edit/adr-section-edit.component.ts

@@ -18,7 +18,7 @@ import { CommonValidatorsService } from '@forms/validators/common-validators.ser
 import { Store } from '@ngrx/store';
 import { AdrService } from '@services/adr/adr.service';
 import { TechnicalRecordService } from '@services/technical-record/technical-record.service';
-import { updateScrollPosition } from '@store/technical-records';
+import { removeTC3TankInspection, updateScrollPosition } from '@store/technical-records';
 import { ReplaySubject, takeUntil } from 'rxjs';
 
 @Component({
@@ -363,6 +363,7 @@ export class AdrSectionEditComponent implements OnInit, OnDestroy {
 
 	removeTC3TankInspection(index: number) {
 		this.form.controls.techRecord_adrDetails_tank_tankDetails_tc3Details.removeAt(index);
+		this.store.dispatch(removeTC3TankInspection({ index }));
 	}
 
 	addUNNumber() {