feat/CB2-10033 - Additional Examiner Note

src/app/features/tech-record/components/tech-record-edit-additional-examiner-note/tech-record-edit-additional-examiner-note.component.html

@@ -1 +1,25 @@
-<div>This is a blank page right now.</div>
+<div *ngIf="currentTechRecord">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-full">
+      <dl class="govuk-summary-list">
+        <h1 class="govuk-heading-l">Edit Additional Examiner Note</h1>
+        <div class="govuk-summary-list__row">
+          <form [formGroup]="form">
+            <app-text-area
+              #examinerNote
+              formControlName="additionalExaminerNote"
+              name="AdditionalExaminerNote"
+              [width]="width.L"
+              (ngModelChange)="ngOnChanges(examinerNote.value)"
+            >
+            </app-text-area>
+          </form>
+        </div>
+      </dl>
+    </div>
+  </div>
+  <app-button-group>
+    <app-button id="submit-examiner-note" (clicked)="handleSubmit()">Save</app-button>
+    <app-button id="cancel-amend-examiner-note" design="link" data-module="govuk-button" (clicked)="navigateBack()">Cancel</app-button>
+  </app-button-group>
+</div>

src/app/features/tech-record/components/tech-record-edit-additional-examiner-note/tech-record-edit-additional-examiner-note.component.ts

@@ -1,10 +1,101 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TechnicalRecordService } from '@services/technical-record/technical-record.service';
+import { TechRecordType } from '@dvsa/cvs-type-definitions/types/v3/tech-record/tech-record-vehicle-type';
+import { ReplaySubject, take, takeUntil } from 'rxjs';
+import { GlobalErrorService } from '@core/components/global-error/global-error.service';
+import {
+  CustomFormControl,
+  FormNodeEditTypes,
+  FormNodeTypes,
+  FormNodeWidth,
+} from '@forms/services/dynamic-form.types';
+import { FormGroup, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { State } from '@store/index';
+import { updateExistingADRAdditionalExaminerNote } from '@store/technical-records';
 
 @Component({
   selector: 'tech-record-edit-additional-examiner-note',
   templateUrl: './tech-record-edit-additional-examiner-note.component.html',
   styleUrls: ['./tech-record-edit-additional-examiner-note.component.scss'],
 })
-export class TechRecordEditAdditionalExaminerNoteComponent {
+export class TechRecordEditAdditionalExaminerNoteComponent implements OnInit {
+  currentTechRecord!: TechRecordType<'hgv' | 'trl' | 'lgv'>;
+  examinerNoteIndex!: number;
+  editedExaminerNote: string = '';
+  originalExaminerNote: string = '';
+  destroy$ = new ReplaySubject<boolean>(1);
+  form!: FormGroup;
+  formControl!: CustomFormControl;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private technicalRecordService: TechnicalRecordService,
+    private globalErrorService: GlobalErrorService,
+    private store: Store<State>,
+  ) { }
+
+  ngOnInit() {
+    this.technicalRecordService.techRecord$.pipe(takeUntil(this.destroy$)).subscribe((currentTechRecord) => {
+      this.currentTechRecord = currentTechRecord as TechRecordType<'hgv' | 'lgv' | 'trl'>;
+    });
+    this.getExaminerNote();
+    this.setupForm();
+  }
+
+  getExaminerNote() {
+    this.route.params.pipe(take(1)).subscribe((params) => {
+      this.examinerNoteIndex = params['examinerNoteIndex'];
+    });
+    const additionalExaminerNotes = this.currentTechRecord?.techRecord_adrDetails_additionalExaminerNotes;
+    if (additionalExaminerNotes) {
+      const examinerNote = additionalExaminerNotes[this.examinerNoteIndex].note;
+      if (examinerNote) {
+        this.originalExaminerNote = examinerNote;
+        this.editedExaminerNote = examinerNote;
+      }
+    }
+  }
+
+  setupForm() {
+    this.formControl = new CustomFormControl({
+      name: 'additionalExaminerNote', type: FormNodeTypes.CONTROL,
+    }, '', [Validators.required]);
+    this.form = new FormGroup({
+      additionalExaminerNote: this.formControl,
+    });
+    this.formControl.patchValue(this.editedExaminerNote);
+  }
+
+  navigateBack() {
+    this.globalErrorService.clearErrors();
+    void this.router.navigate(['../../'], { relativeTo: this.route });
+  }
+
+  handleSubmit(): void {
+    if (this.originalExaminerNote !== this.editedExaminerNote) {
+      this.store.dispatch(
+        updateExistingADRAdditionalExaminerNote({
+          examinerNoteIndex: this.examinerNoteIndex,
+          additionalExaminerNote: this.editedExaminerNote,
+        }),
+      );
+    }
+    this.navigateBack();
+  }
+
+  ngOnChanges(examinerNote: string) {
+    this.editedExaminerNote = examinerNote;
+  }
+
+  get editTypes(): typeof FormNodeEditTypes {
+    return FormNodeEditTypes;
+  }
+
+  get width(): typeof FormNodeWidth {
+    return FormNodeWidth;
+  }
 
 }

src/app/features/tech-record/tech-record-routing.module.ts

@@ -177,7 +177,7 @@ const routes: Routes = [
     path: TechRecordRoutes.CORRECT_ERROR_EDIT_ADDITIONAL_EXAMINER_NOTE,
     component: TechRecordEditAdditionalExaminerNoteComponent,
     data: {
-      title: 'edit-additional-examiner-note',
+      title: 'Edit Additional Examiner Note',
       roles: Roles.TechRecordAmend,
       isEditing: true,
       reason: ReasonForEditing.CORRECTING_AN_ERROR,
@@ -207,7 +207,7 @@ const routes: Routes = [
     path: TechRecordRoutes.NOTIFIABLE_ALTERNATION_NEEDED_EDIT_ADDITIONAL_EXAMINER_NOTE,
     component: TechRecordEditAdditionalExaminerNoteComponent,
     data: {
-      title: 'edit-additional-examiner-note',
+      title: 'Edit Additional Examiner Note',
       roles: Roles.TechRecordAmend,
       isEditing: true,
       reason: ReasonForEditing.NOTIFIABLE_ALTERATION_NEEDED,

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

@@ -774,7 +774,7 @@ export const AdrSummaryTemplate: FormNode = {
       label: 'Additional examiner notes history',
       value: null,
       type: FormNodeTypes.CONTROL,
-      viewType: FormNodeViewTypes.HIDDEN,
+      viewType: FormNodeViewTypes.CUSTOM,
       viewComponent: AdrExaminerNotesHistoryViewComponent,
       editType: FormNodeEditTypes.CUSTOM,
       editComponent: AdrExaminerNotesHistoryEditComponent,

src/app/store/technical-records/actions/technical-record-service.actions.ts

@@ -8,6 +8,7 @@ import {
 } from '@ngrx/store';
 // eslint-disable-next-line import/no-unresolved
 import { TypedAction } from '@ngrx/store/src/models';
+import { AdditionalExaminerNotes } from '@dvsa/cvs-type-definitions/types/v3/tech-record/get/hgv/complete';
 
 const prefix = '[Technical Record Service]';
 
@@ -98,7 +99,12 @@ export const clearScrollPosition = createAction(`${prefix} clearScrollPosition`)
 
 export const clearADRDetailsBeforeUpdate = createAction(`${prefix} clearADRDetailsBeforeUpdate`);
 
-export const updateADRAdditionalExaminerNotes = createAction(`${prefix} handleADRExaminerNoteChanges`, props<{ username: string }>());
+export const updateADRAdditionalExaminerNotes = createAction(`${prefix} updateADRAdditionalExaminerNotes`, props<{ username: string }>());
+
+export const updateExistingADRAdditionalExaminerNote = createAction(
+  `${prefix} updateExistingADRAdditionalExaminerNote`,
+  props<{ additionalExaminerNote: string, examinerNoteIndex: number }>(),
+);
 
 export const generateADRCertificate = createAction(`${prefix} generateADRCertificate`, props<{
   systemNumber: string, createdTimestamp: string, certificateType: string

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

@@ -33,7 +33,7 @@ import {
   updateBody,
   updateBrakeForces,
   updateEditingTechRecord,
-  updateEditingTechRecordCancel,
+  updateEditingTechRecordCancel, updateExistingADRAdditionalExaminerNote,
   updateScrollPosition,
   updateTechRecord,
   updateTechRecordFailure,
@@ -586,4 +586,29 @@ describe('Vehicle Technical Record Reducer', () => {
         .toContainEqual(testNote);
     });
   });
+  describe('handleUpdateExistingADRExaminerNote', () => {
+    it('should', () => {
+      const state: TechnicalRecordServiceState = {
+        ...initialState,
+        editingTechRecord: {
+          systemNumber: 'foo',
+          createdTimestamp: 'bar',
+          vin: 'testVin',
+          techRecord_adrDetails_additionalExaminerNotes: [
+            {
+              note: 'foo',
+              createdAtDate: 'bar',
+              lastUpdatedBy: 'foo',
+            },
+          ],
+        } as unknown as TechRecordType<'put'>,
+        loading: true,
+      };
+      const newNote = 'foobar';
+      const action = updateExistingADRAdditionalExaminerNote({ additionalExaminerNote: newNote, examinerNoteIndex: 0 });
+      const newState = vehicleTechRecordReducer(state, action);
+      const editingTechRecord = newState.editingTechRecord as unknown as (NonVerbTechRecordType<'hgv' | 'lgv' | 'trl'>);
+      expect(editingTechRecord.techRecord_adrDetails_additionalExaminerNotes![0].note).toEqual(newNote);
+    });
+  });
 });

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

@@ -61,7 +61,7 @@ import {
   updateBody,
   updateBrakeForces,
   updateEditingTechRecord,
-  updateEditingTechRecordCancel,
+  updateEditingTechRecordCancel, updateExistingADRAdditionalExaminerNote,
   updateScrollPosition,
   updateTechRecord,
   updateTechRecordFailure,
@@ -153,6 +153,8 @@ export const vehicleTechRecordReducer = createReducer(
 
   on(updateADRAdditionalExaminerNotes, (state, action) => handleADRExaminerNoteChanges(state, action.username)),
 
+  on(updateExistingADRAdditionalExaminerNote, (state, action) => handleUpdateExistingADRExaminerNote(state, action)),
+
   on(addAxle, (state) => handleAddAxle(state)),
   on(removeAxle, (state, action) => handleRemoveAxle(state, action)),
 
@@ -547,3 +549,17 @@ function handleADRExaminerNoteChanges(state: TechnicalRecordServiceState, userna
   }
   return { ...state, editingTechRecord: additionalNoteTechRecord as unknown as (TechRecordType<'put'>) };
 }
+
+function handleUpdateExistingADRExaminerNote(
+  state: TechnicalRecordServiceState,
+  action: { additionalExaminerNote: string, examinerNoteIndex: number },
+) {
+  const { editingTechRecord } = state;
+  const editedTechRecord = editingTechRecord as unknown as
+    (NonVerbTechRecordType<'hgv' | 'lgv' | 'trl'>);
+  if (editedTechRecord) {
+    const examinerNotes = editedTechRecord.techRecord_adrDetails_additionalExaminerNotes;
+    examinerNotes![action.examinerNoteIndex].note = action.additionalExaminerNote;
+  }
+  return { ...state, editingTechRecord: editingTechRecord as unknown as (TechRecordType<'put'>) };
+}