feat(cb2-10210): add M145 statement (#1374)

* feat(cb2-10210): add M145 statement

* feat(cb2-10210): use custom view component for styling + labelling

package.json

@@ -48,7 +48,7 @@
  "@angular/router": "^15.2.8",
  "@azure/msal-angular": "^2.5.12",
  "@azure/msal-browser": "^2.38.3",
- "@dvsa/cvs-type-definitions": "^5.1.0",
+ "@dvsa/cvs-type-definitions": "^5.1.2",
  "@ngrx/effects": "^15.4.0",
  "@ngrx/entity": "^15.4.0",
  "@ngrx/router-store": "^15.4.0",

src/app/forms/components/dynamic-form-group/dynamic-form-group.component.html

@@ -131,7 +131,7 @@ <h4 class="govuk-heading-m mb-0">{{ control.value.meta.label }}</h4>
 
 <ng-template #subtitleTemplate let-control="control">
  <ng-container *ngIf="!(control.value.meta && control.value.meta.hide)">
- <ng-container *ngIf="!edit">
+ <ng-container *ngIf="!edit && control.value.meta.viewType !== formNodeViewTypes.HIDDEN">
  <tr class="govuk-table__row">
  <td colspan="2" class="govuk-table__cell">
  <h4 class="govuk-heading-s mb-0">{{ control.value.meta.label }}</h4>

src/app/forms/custom-sections/adr-tank-details-m145-view/adr-tank-details-m145-view.component.html

@@ -0,0 +1,12 @@
+<ng-container *ngIf="control">
+ <table class="govuk-table m-0">
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <td class="govuk-table__cell border-b-0" [style.width.%]="30">
+ <b>M145:</b>
+ </td>
+ <td class="govuk-table__cell border-b-0 break-words">{{ control.value | defaultNullOrEmpty }}</td>
+ </tr>
+ </tbody>
+ </table>
+</ng-container>

src/app/forms/custom-sections/adr-tank-details-m145-view/adr-tank-details-m145-view.component.scss

@@ -0,0 +1,11 @@
+.m-0 {
+ margin: 0;
+}
+
+.break-words {
+ word-break: break-word;
+}
+
+.border-b-0 {
+ border-bottom-width: 0;
+}

src/app/forms/custom-sections/adr-tank-details-m145-view/adr-tank-details-m145-view.component.spec.ts

@@ -0,0 +1,41 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+ FormsModule, NG_VALUE_ACCESSOR, NgControl, ReactiveFormsModule,
+} from '@angular/forms';
+import { DynamicFormsModule } from '@forms/dynamic-forms.module';
+import { CustomFormControl, FormNodeTypes } from '@forms/services/dynamic-form.types';
+import { provideMockStore } from '@ngrx/store/testing';
+import { State, initialAppState } from '@store/index';
+import { AdrTankDetailsM145ViewComponent } from './adr-tank-details-m145-view.component';
+
+describe('AdrTankDetailsM145ViewComponent', () => {
+ let component: AdrTankDetailsM145ViewComponent;
+ let fixture: ComponentFixture<AdrTankDetailsM145ViewComponent>;
+
+ const control = new CustomFormControl({
+ name: 'techRecord_adrDetails_m145Statement',
+ type: FormNodeTypes.CONTROL,
+ value: [],
+ });
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [AdrTankDetailsM145ViewComponent],
+ imports: [DynamicFormsModule, FormsModule, ReactiveFormsModule],
+ providers: [
+ provideMockStore<State>({ initialState: initialAppState }),
+ { provide: NG_VALUE_ACCESSOR, useExisting: AdrTankDetailsM145ViewComponent, multi: true },
+ { provide: NgControl, useValue: { control } },
+ ],
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(AdrTankDetailsM145ViewComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

src/app/forms/custom-sections/adr-tank-details-m145-view/adr-tank-details-m145-view.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { BaseControlComponent } from '@forms/components/base-control/base-control.component';
+
+@Component({
+ selector: 'app-adr-tank-details-m145-view',
+ templateUrl: './adr-tank-details-m145-view.component.html',
+ styleUrls: ['./adr-tank-details-m145-view.component.scss'],
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: AdrTankDetailsM145ViewComponent,
+ multi: true,
+ },
+ ],
+})
+export class AdrTankDetailsM145ViewComponent extends BaseControlComponent {
+
+}

src/app/forms/dynamic-forms.module.ts

@@ -73,6 +73,7 @@ import { ToUppercaseDirective } from './directives/app-to-uppercase.directive';
 import { TrimWhitespaceDirective } from './directives/app-trim-whitespace.directive';
 import { PrefixDirective } from './directives/prefix.directive';
 import { SuffixDirective } from './directives/suffix.directive';
+import { AdrTankDetailsM145ViewComponent } from './custom-sections/adr-tank-details-m145-view/adr-tank-details-m145-view.component';
 
 @NgModule({
  declarations: [
@@ -133,6 +134,7 @@ import { SuffixDirective } from './directives/suffix.directive';
  AdrTankDetailsInitialInspectionViewComponent,
  AdrTankStatementUnNumberViewComponent,
  AdrCertificateHistoryComponent,
+ AdrTankDetailsM145ViewComponent,
  ],
  imports: [CommonModule, FormsModule, ReactiveFormsModule, SharedModule, RouterModule],
  exports: [

src/app/forms/templates/general/adr-summary.template.ts

@@ -15,6 +15,7 @@ import {
  AdrExaminerNotesHistoryViewComponent,
 } from '@forms/custom-sections/adr-examiner-notes-history-view/adr-examiner-notes-history-view.component';
 import { AdrGuidanceNotesComponent } from '@forms/custom-sections/adr-guidance-notes/adr-guidance-notes.component';
+import { AdrTankDetailsM145ViewComponent } from '@forms/custom-sections/adr-tank-details-m145-view/adr-tank-details-m145-view.component';
 import {
  AdrTankDetailsSubsequentInspectionsEditComponent,
 } from '@forms/custom-sections/adr-tank-details-subsequent-inspections-edit/adr-tank-details-subsequent-inspections-edit.component';
@@ -610,6 +611,16 @@ export const AdrSummaryTemplate: FormNode = {
  ],
  validators: [],
  },
+ {
+ name: 'techRecord_adrDetails_m145Statement',
+ type: FormNodeTypes.CONTROL,
+ viewType: FormNodeViewTypes.CUSTOM,
+ viewComponent: AdrTankDetailsM145ViewComponent,
+ editType: FormNodeEditTypes.CHECKBOX,
+ groups: ['tank_details', 'dangerous_goods'],
+ hide: true,
+ validators: [],
+ },
  {
  name: 'techRecord_adrDetails_listStatementApplicable',
  label: 'Battery List Applicable',

src/app/forms/templates/general/adr.template.ts

@@ -19,6 +19,7 @@ import {
  AdrExaminerNotesHistoryViewComponent,
 } from '@forms/custom-sections/adr-examiner-notes-history-view/adr-examiner-notes-history-view.component';
 import { AdrGuidanceNotesComponent } from '@forms/custom-sections/adr-guidance-notes/adr-guidance-notes.component';
+import { AdrTankDetailsM145ViewComponent } from '@forms/custom-sections/adr-tank-details-m145-view/adr-tank-details-m145-view.component';
 import {
  AdrTankDetailsSubsequentInspectionsEditComponent,
 } from '@forms/custom-sections/adr-tank-details-subsequent-inspections-edit/adr-tank-details-subsequent-inspections-edit.component';
@@ -608,6 +609,25 @@ export const AdrTemplate: FormNode = {
  ],
  validators: [],
  },
+ {
+ name: 'M15Subtitle',
+ label: 'M145',
+ type: FormNodeTypes.SUBTITLE,
+ viewType: FormNodeViewTypes.HIDDEN,
+ groups: ['tank_details', 'dangerous_goods'],
+ hide: true,
+ },
+ {
+ name: 'techRecord_adrDetails_m145Statement',
+ label: 'Yes',
+ type: FormNodeTypes.CONTROL,
+ viewType: FormNodeViewTypes.CUSTOM,
+ viewComponent: AdrTankDetailsM145ViewComponent,
+ editType: FormNodeEditTypes.CHECKBOX,
+ groups: ['tank_details', 'dangerous_goods'],
+ hide: true,
+ validators: [],
+ },
  {
  name: 'techRecord_adrDetails_listStatementApplicable',
  label: 'Battery List Applicable',

src/app/store/technical-records/reducers/technical-record-service.reducer.ts

@@ -36,6 +36,9 @@ import {
  createVehicleRecord,
  createVehicleRecordFailure,
  createVehicleRecordSuccess,
+ generateADRCertificate,
+ generateADRCertificateFailure,
+ generateADRCertificateSuccess,
  generateLetter,
  generateLetterFailure,
  generateLetterSuccess,
@@ -62,9 +65,6 @@ import {
  updateTechRecord,
  updateTechRecordFailure,
  updateTechRecordSuccess,
- generateADRCertificate,
- generateADRCertificateFailure,
- generateADRCertificateSuccess,
 } from '../actions/technical-record-service.actions';
 import { BatchRecords, initialBatchState, vehicleBatchCreateReducer } from './batch-create.reducer';
 
@@ -433,6 +433,7 @@ function handleClearADRDetails(state: TechnicalRecordServiceState) {
  techRecord_adrDetails_applicantDetails_city: null,
  techRecord_adrDetails_applicantDetails_postcode: null,
  techRecord_adrDetails_memosApply: null,
+ techRecord_adrDetails_m145Statement: null,
  techRecord_adrDetails_documents: null,
  techRecord_adrDetails_listStatementApplicable: null,
  techRecord_adrDetails_batteryListNumber: null,