feat(CB2-14451): radio component implementation attempt 1

dvsa · Nov 28, 2024 · 422f760 · 422f760
1 parent 5e33073
commit 422f760
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 50 deletions.
diff --git a/src/app/forms/components/govuk-form-group-radio/govuk-form-group-radio.component.html b/src/app/forms/components/govuk-form-group-radio/govuk-form-group-radio.component.html
@@ -1,28 +1,28 @@
 <div class="govuk-form-group-radio">
   <fieldset>
-    <ng-container *ngIf="controlLabel">
-      <legend>
-        <h1 tag>
-          {{ controlLabel }}
-          <ng-container *ngIf="tags?.length">
-            <div>
-              <app-tag *ngFor="let tag of tags" [type]="tag.colour">{{ tag.label }}</app-tag>
-            </div>
-          </ng-container>
-        </h1>
-      </legend>
-    </ng-container>
+    <legend>
+      <h1 tag>
+        {{ controlLabel }}
+        <ng-container *ngIf="tags?.length">
+          <div>
+            <app-tag *ngFor="let tag of tags" [type]="tag.colour">{{ tag.label }}</app-tag>
+          </div>
+        </ng-container>
+      </h1>
+    </legend>
     <div data-module="govuk-radios">
       <div *ngFor="let option of options">
         <input
           govukRadio
           type="radio"
-          id="techRecord_roadFriendly-{{ option.value }}-radio"
-          formControlName="techRecord_roadFriendly"
+          id="{{ controlName }}-{{ option.value }}-radio"
+          formControlName="{{ controlName }}"
           [value]="option.value"
+          [checked]="option.value === value"
+          [name]="id"
         />
         <label
-          for="techRecord_roadFriendly-{{ option.value }}-radio'"
+          for="{{ controlName }}-{{ option.value }}-radio'"
         >
           {{ option.label }}
         </label>

diff --git a/src/app/forms/components/govuk-form-group-radio/govuk-form-group-radio.component.ts b/src/app/forms/components/govuk-form-group-radio/govuk-form-group-radio.component.ts
@@ -1,14 +1,20 @@
 import { CommonModule } from '@angular/common';
 import { Component, EventEmitter, Input, Output, forwardRef, inject } from '@angular/core';
-import { ControlContainer, ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import {
+	ControlContainer,
+	ControlValueAccessor,
+	FormsModule,
+	NG_VALUE_ACCESSOR,
+	ReactiveFormsModule,
+} from '@angular/forms';
 import { MultiOption } from '@models/options.model';
 import { CustomTag } from '@services/dynamic-forms/dynamic-form.types';
 import { SharedModule } from '@shared/shared.module';
 
 @Component({
 	selector: 'govuk-form-group-radio',
 	standalone: true,
-	imports: [CommonModule, FormsModule, SharedModule],
+	imports: [CommonModule, FormsModule, SharedModule, ReactiveFormsModule],
 	templateUrl: './govuk-form-group-radio.component.html',
 	styleUrls: ['./govuk-form-group-radio.component.scss'],
 	providers: [
@@ -24,7 +30,7 @@ export class GovukFormGroupRadioComponent implements ControlValueAccessor {
 	@Output() focus = new EventEmitter<FocusEvent>();
 
 	@Input()
-	value: unknown[] | null = null;
+	value: string | boolean | number = '';
 
 	@Input()
 	disabled = false;
@@ -38,10 +44,10 @@ export class GovukFormGroupRadioComponent implements ControlValueAccessor {
 	@Input({ alias: 'hint' })
 	controlHint = '';
 
-	@Input({ alias: 'formControlName' })
+	@Input({ alias: 'formControlName', required: true })
 	controlName = '';
 
-	@Input({ alias: 'label' })
+	@Input({ alias: 'label', required: true })
 	controlLabel = '';
 
 	@Input({ alias: 'id' })

diff --git a/.../custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.html b/.../custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.html
@@ -129,34 +129,41 @@ <h1>
 
   <div class="flex-row">
     <!-- Speed limiter exempt -->
-    <div *ngIf="shouldDisplayFormControl('techRecord_speedLimiterMrk')" class="govuk-form-group-radio">
-      <fieldset>
-        <legend>
-          <h1 tag>
-            Speed limiter exempt
-            <div>
-              <app-tag [type]="TagType.PURPLE">{{ TagTypeLabels.PLATES }}</app-tag>
-            </div>
-          </h1>
-        </legend>
-        <div data-module="govuk-radios">
-          <div *ngFor="let option of ExemptOrNotOptions">
-            <input
-              id="techRecord_speedLimiterMrk-{{ option.value }}-radio"
-              govukRadio
-              type="radio"
-              formControlName="techRecord_speedLimiterMrk"
-              [value]="option.value"
-            />
-            <label
-             for="techRecord_speedLimiterMrk-{{ option.value }}-radio"
-            >
-              {{ option.label }}
-            </label>
-          </div>
-        </div>
-      </fieldset>
-    </div>
+    <govuk-form-group-radio
+      *ngIf="shouldDisplayFormControl('techRecord_speedLimiterMrk')"
+      [options]="ExemptOrNotOptions"
+      label="Speed limiter exempt"
+      formControlName="techRecord_speedLimiterMrk"
+      [tags]="[{ label: TagTypeLabels.REQUIRED, colour: TagType.RED }]"
+    ></govuk-form-group-radio>
+<!--    <div *ngIf="shouldDisplayFormControl('techRecord_speedLimiterMrk')" class="govuk-form-group-radio">-->
+<!--      <fieldset>-->
+<!--        <legend>-->
+<!--          <h1 tag>-->
+<!--            Speed limiter exempt-->
+<!--            <div>-->
+<!--              <app-tag [type]="TagType.PURPLE">{{ TagTypeLabels.PLATES }}</app-tag>-->
+<!--            </div>-->
+<!--          </h1>-->
+<!--        </legend>-->
+<!--        <div data-module="govuk-radios">-->
+<!--          <div *ngFor="let option of ExemptOrNotOptions">-->
+<!--            <input-->
+<!--              id="techRecord_speedLimiterMrk-{{ option.value }}-radio"-->
+<!--              govukRadio-->
+<!--              type="radio"-->
+<!--              formControlName="techRecord_speedLimiterMrk"-->
+<!--              [value]="option.value"-->
+<!--            />-->
+<!--            <label-->
+<!--             for="techRecord_speedLimiterMrk-{{ option.value }}-radio"-->
+<!--            >-->
+<!--              {{ option.label }}-->
+<!--            </label>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </fieldset>-->
+<!--    </div>-->
 
     <!-- Tacho exempt -->
     <div *ngIf="shouldDisplayFormControl('techRecord_tachoExemptMrk')" class="govuk-form-group-radio">

diff --git a/...ms/custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.ts b/...ms/custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.ts
@@ -17,7 +17,7 @@ import { TechRecordType } from '@dvsa/cvs-type-definitions/types/v3/tech-record/
 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 { MultiOption, MultiOptions } from '@models/options.model';
 import { EmissionStandard } from '@models/test-types/emissions.enum';
 import {
 	HgvPsvVehicleConfiguration,
@@ -74,7 +74,7 @@ export class VehicleSectionEditComponent implements OnInit, OnDestroy {
 		{ validators: [] }
 	);
 
-	ExemptOrNotOptions = [
+	ExemptOrNotOptions: MultiOption[] = [
 		{ value: true, label: 'Exempt' },
 		{ value: false, label: 'Not exempt' },
 	];

diff --git a/src/app/forms/dynamic-forms.module.ts b/src/app/forms/dynamic-forms.module.ts
@@ -12,6 +12,7 @@ import { DateFocusNextDirective } from '@directives/date-focus-next/date-focus-n
 import { PrefixDirective } from '@directives/prefix/prefix.directive';
 import { SuffixDirective } from '@directives/suffix/suffix.directive';
 import { ApprovalTypeInputComponent } from '@forms/components/approval-type/approval-type.component';
+import { GovukFormGroupRadioComponent } from '@forms/components/govuk-form-group-radio/govuk-form-group-radio.component';
 import { AdrCertificateHistoryComponent } from '@forms/custom-sections/adr-certificate-history/adr-certificate-history.component';
 import { AdrExaminerNotesHistoryEditComponent } from '@forms/custom-sections/adr-examiner-notes-history-edit/adr-examiner-notes-history.component-edit';
 import { AdrPermittedDangerousGoodsComponent } from '@forms/custom-sections/adr-permitted-dangerous-goods/adr-permitted-dangerous-goods.component';
@@ -164,6 +165,7 @@ import { WeightsComponent } from './custom-sections/weights/weights.component';
 		DateFocusNextDirective,
 		NumberOnlyDirective,
 		GovukCheckboxGroupComponent,
+		GovukFormGroupRadioComponent,
 	],
 	exports: [
 		TextInputComponent,