feat/CB2-11250 - Edit button on additional examiner notes takes you t…

…o blank page (#1447) * feat(cb2-10241): update adr notes to use custom component * feat(cb2-11250): format table * feat(cb2-11250): set up router link * feat(cb2-11250): blank page link working * feat(cb2-11250): revert unnecessary changes * feat(cb2-11250): amend routing function * feat(cb2-11250): fix linting and add unit test * feat(cb2-11250): fix linting and add unit test * feat(cb2-11250): update link design * feat(cb2-11250): fix button link styling --------- Co-authored-by: Brandon Thomas-Davies <87308252+BrandonT95@users.noreply.github.com>
dvsa · Apr 2, 2024 · e7e4fd5 · e7e4fd5
1 parent 1645ddd
commit e7e4fd5
Show file tree

Hide file tree

Showing 11 changed files with 158 additions and 15 deletions.
diff --git a/...rd-edit-additional-examiner-note/tech-record-edit-additional-examiner-note.component.html b/...rd-edit-additional-examiner-note/tech-record-edit-additional-examiner-note.component.html
@@ -0,0 +1 @@
+<div>This is a blank page right now.</div>
diff --git a/...rd-edit-additional-examiner-note/tech-record-edit-additional-examiner-note.component.scss b/...rd-edit-additional-examiner-note/tech-record-edit-additional-examiner-note.component.scss
diff --git a/...edit-additional-examiner-note/tech-record-edit-additional-examiner-note.component.spec.ts b/...edit-additional-examiner-note/tech-record-edit-additional-examiner-note.component.spec.ts
@@ -0,0 +1,38 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  AdrExaminerNotesHistoryEditComponent
+} from '@forms/custom-sections/adr-examiner-notes-history-edit/adr-examiner-notes-history.component-edit';
+import { DynamicFormsModule } from '@forms/dynamic-forms.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { TechnicalRecordService } from '@services/technical-record/technical-record.service';
+import { provideMockStore } from '@ngrx/store/testing';
+import { initialAppState } from '@store/index';
+import { ActivatedRoute, Router } from '@angular/router';
+import { of } from 'rxjs';
+import { TechRecordEditAdditionalExaminerNoteComponent } from './tech-record-edit-additional-examiner-note.component';
+
+
+const mockTechRecordService = {
+  techRecord$: jest.fn(),
+};
+describe('TechRecordEditAdditionalExaminerNoteComponent', () => {
+  let fixture: ComponentFixture<TechRecordEditAdditionalExaminerNoteComponent>;
+  let component: TechRecordEditAdditionalExaminerNoteComponent;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TechRecordEditAdditionalExaminerNoteComponent],
+      imports: [DynamicFormsModule, FormsModule, ReactiveFormsModule, RouterTestingModule],
+      providers: [
+        { provide: TechnicalRecordService, useValue: mockTechRecordService },
+        provideMockStore({ initialState: initialAppState }),
+        { provide: ActivatedRoute, useValue: { params: of([{ id: 1 }]) } },
+      ],
+    }).compileComponents();
+    fixture = TestBed.createComponent(AdrExaminerNotesHistoryEditComponent);
+    component = fixture.componentInstance;
+  });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/...cord-edit-additional-examiner-note/tech-record-edit-additional-examiner-note.component.ts b/...cord-edit-additional-examiner-note/tech-record-edit-additional-examiner-note.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@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 {
+
+}
diff --git a/src/app/features/tech-record/tech-record-routing.module.ts b/src/app/features/tech-record/tech-record-routing.module.ts
@@ -10,20 +10,39 @@ import { techRecordDataResolver } from 'src/app/resolvers/tech-record-data/tech-
 import { techRecordValidateResolver } from 'src/app/resolvers/tech-record-validate/tech-record-validate.resolver';
 import { techRecordViewResolver } from 'src/app/resolvers/tech-record-view/tech-record-view.resolver';
 import { TechRecordRoutes } from '@models/routes.enum';
-import { AdrGenerateCertificateComponent } from './components/adr-generate-certificate/adr-generate-certificate.component';
-import { TechRecordAmendReasonComponent } from './components/tech-record-amend-reason/tech-record-amend-reason.component';
+import {
+  AdrGenerateCertificateComponent,
+} from './components/adr-generate-certificate/adr-generate-certificate.component';
+import {
+  TechRecordAmendReasonComponent,
+} from './components/tech-record-amend-reason/tech-record-amend-reason.component';
 import { AmendVinComponent } from './components/tech-record-amend-vin/tech-record-amend-vin.component';
-import { AmendVrmReasonComponent } from './components/tech-record-amend-vrm-reason/tech-record-amend-vrm-reason.component';
+import {
+  AmendVrmReasonComponent,
+} from './components/tech-record-amend-vrm-reason/tech-record-amend-vrm-reason.component';
 import { AmendVrmComponent } from './components/tech-record-amend-vrm/tech-record-amend-vrm.component';
-import { TechRecordChangeStatusComponent } from './components/tech-record-change-status/tech-record-change-status.component';
+import {
+  TechRecordChangeStatusComponent,
+} from './components/tech-record-change-status/tech-record-change-status.component';
 import { ChangeVehicleTypeComponent } from './components/tech-record-change-type/tech-record-change-type.component';
-import { TechRecordChangeVisibilityComponent } from './components/tech-record-change-visibility/tech-record-change-visibility.component';
-import { GenerateLetterComponent } from './components/tech-record-generate-letter/tech-record-generate-letter.component';
+import {
+  TechRecordChangeVisibilityComponent,
+} from './components/tech-record-change-visibility/tech-record-change-visibility.component';
+import {
+  GenerateLetterComponent,
+} from './components/tech-record-generate-letter/tech-record-generate-letter.component';
 import { GeneratePlateComponent } from './components/tech-record-generate-plate/tech-record-generate-plate.component';
-import { TechRecordSearchTyresComponent } from './components/tech-record-search-tyres/tech-record-search-tyres.component';
-import { TechRecordSummaryChangesComponent } from './components/tech-record-summary-changes/tech-record-summary-changes.component';
+import {
+  TechRecordSearchTyresComponent,
+} from './components/tech-record-search-tyres/tech-record-search-tyres.component';
+import {
+  TechRecordSummaryChangesComponent,
+} from './components/tech-record-summary-changes/tech-record-summary-changes.component';
 import { TechRecordUnarchiveComponent } from './components/tech-record-unarchive/tech-record-unarchive-component';
 import { TechRecordComponent } from './tech-record.component';
+import {
+  TechRecordEditAdditionalExaminerNoteComponent,
+} from './components/tech-record-edit-additional-examiner-note/tech-record-edit-additional-examiner-note.component';
 
 const routes: Routes = [
   {
@@ -154,6 +173,18 @@ const routes: Routes = [
     data: { roles: Roles.TechRecordAmend },
     canActivate: [MsalGuard, RoleGuard],
   },
+  {
+    path: TechRecordRoutes.CORRECT_ERROR_EDIT_ADDITIONAL_EXAMINER_NOTE,
+    component: TechRecordEditAdditionalExaminerNoteComponent,
+    data: {
+      title: 'edit-additional-examiner-note',
+      roles: Roles.TechRecordAmend,
+      isEditing: true,
+      reason: ReasonForEditing.CORRECTING_AN_ERROR,
+    },
+    canActivate: [MsalGuard, RoleGuard],
+    resolve: { techRecord: techRecordViewResolver },
+  },
   {
     path: TechRecordRoutes.NOTIFIABLE_ALTERATION_NEEDED_CHANGE_SUMMARY,
     component: TechRecordSummaryChangesComponent,
@@ -172,6 +203,18 @@ const routes: Routes = [
     canActivate: [MsalGuard, RoleGuard],
     resolve: { techRecord: techRecordViewResolver },
   },
+  {
+    path: TechRecordRoutes.NOTIFIABLE_ALTERNATION_NEEDED_EDIT_ADDITIONAL_EXAMINER_NOTE,
+    component: TechRecordEditAdditionalExaminerNoteComponent,
+    data: {
+      title: 'edit-additional-examiner-note',
+      roles: Roles.TechRecordAmend,
+      isEditing: true,
+      reason: ReasonForEditing.NOTIFIABLE_ALTERATION_NEEDED,
+    },
+    canActivate: [MsalGuard, RoleGuard],
+    resolve: { techRecord: techRecordViewResolver },
+  },
   {
     path: TechRecordRoutes.TEST_RECORDS,
     data: { title: 'Test record', roles: Roles.TestResultView },

diff --git a/src/app/features/tech-record/tech-record.module.ts b/src/app/features/tech-record/tech-record.module.ts
@@ -25,6 +25,9 @@ import { TechRecordComponent } from './tech-record.component';
 import { AmendVrmReasonComponent } from './components/tech-record-amend-vrm-reason/tech-record-amend-vrm-reason.component';
 import { TechRecordSummaryChangesComponent } from './components/tech-record-summary-changes/tech-record-summary-changes.component';
 import { AdrGenerateCertificateComponent } from './components/adr-generate-certificate/adr-generate-certificate.component';
+import {
+  TechRecordEditAdditionalExaminerNoteComponent,
+} from './components/tech-record-edit-additional-examiner-note/tech-record-edit-additional-examiner-note.component';
 
 @NgModule({
   declarations: [
@@ -43,6 +46,7 @@ import { AdrGenerateCertificateComponent } from './components/adr-generate-certi
     TechRecordHistoryComponent,
     TechRecordSearchTyresComponent,
     TechRecordTitleComponent,
+    TechRecordEditAdditionalExaminerNoteComponent,
     TechRouterOutletComponent,
     TestRecordSummaryComponent,
     VehicleTechnicalRecordComponent,

diff --git a/...m-sections/adr-examiner-notes-history-edit/adr-examiner-notes-history-edit.component.html b/...m-sections/adr-examiner-notes-history-edit/adr-examiner-notes-history-edit.component.html
@@ -8,18 +8,22 @@
     <table class="govuk-table" *ngIf="notes.length > 0; else empty">
       <tbody class="govuk-table__body">
         <tr class="govuk-table__row">
-          <th scope="col" class="govuk-table__header whitespace-nowrap">Date</th>
-          <th scope="col" class="govuk-table__header whitespace-nowrap">Created By</th>
           <th scope="col" class="govuk-table__header whitespace-nowrap">Notes</th>
+          <th scope="col" class="govuk-table__header whitespace-nowrap">Created By</th>
+          <th scope="col" class="govuk-table__header whitespace-nowrap">Date</th>
+          <th scope="col" class="govuk-table__header whitespace-nowrap"></th>
         </tr>
         <ng-container *ngFor="let examinerNote of notes; let i = index; let isLast = last">
           <tr class="govuk-table__row" *ngIf="i < 3">
             <td class="govuk-table__cell break-words" [class.border-b-0]="i === 2 || isLast">
-              {{ examinerNote.createdAtDate | date : 'dd/MM/yyyy' | defaultNullOrEmpty }}
+              {{ examinerNote.note }}
             </td>
             <td class="govuk-table__cell break-words" [class.border-b-0]="i === 2 || isLast">{{ examinerNote.lastUpdatedBy }}</td>
             <td class="govuk-table__cell break-words" [class.border-b-0]="i === 2 || isLast">
-              {{ examinerNote.note }}
+              {{ examinerNote.createdAtDate | date: 'dd/MM/yyyy' | defaultNullOrEmpty }}
+            </td>
+            <td class="govuk-table__cell break-words" [class.border-b-0]="i === 2 || isLast">
+              <a class="button" id="edit-additional-examiner-note" (click)="getEditAdditionalExaminerNotePage(i)"> Edit </a>
             </td>
           </tr>
         </ng-container>

diff --git a/...m-sections/adr-examiner-notes-history-edit/adr-examiner-notes-history.component-edit.scss b/...m-sections/adr-examiner-notes-history-edit/adr-examiner-notes-history.component-edit.scss
@@ -15,4 +15,10 @@
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 5;
-}
+}
+
+.button {
+  cursor: pointer;
+  text-decoration: underline;
+  color: blue;
+}
diff --git a/...ections/adr-examiner-notes-history-edit/adr-examiner-notes-history.component-edit.spec.ts b/...ections/adr-examiner-notes-history-edit/adr-examiner-notes-history.component-edit.spec.ts
@@ -8,23 +8,32 @@ import { DynamicFormsModule } from '@forms/dynamic-forms.module';
 import { mockVehicleTechnicalRecord } from '@mocks/mock-vehicle-technical-record.mock';
 import { VehicleTypes } from '@models/vehicle-tech-record.model';
 import { TechnicalRecordService } from '@services/technical-record/technical-record.service';
+import { provideMockStore } from '@ngrx/store/testing';
+import { initialAppState } from '@store/index';
+import { ActivatedRoute, Router } from '@angular/router';
+import { of } from 'rxjs';
+import { RouterTestingModule } from '@angular/router/testing';
 
 const mockTechRecordService = {
   techRecord$: jest.fn(),
 };
 describe('AdrExaminerNotesHistoryEditComponent', () => {
   let component: AdrExaminerNotesHistoryEditComponent;
   let fixture: ComponentFixture<AdrExaminerNotesHistoryEditComponent>;
+  let router: Router;
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [AdrExaminerNotesHistoryEditComponent],
-      imports: [DynamicFormsModule, FormsModule, ReactiveFormsModule],
+      imports: [DynamicFormsModule, FormsModule, ReactiveFormsModule, RouterTestingModule],
       providers: [
         { provide: TechnicalRecordService, useValue: mockTechRecordService },
+        provideMockStore({ initialState: initialAppState }),
+        { provide: ActivatedRoute, useValue: { params: of([{ id: 1 }]) } },
       ],
     }).compileComponents();
     fixture = TestBed.createComponent(AdrExaminerNotesHistoryEditComponent);
     component = fixture.componentInstance;
+    router = TestBed.inject(Router);
   });
   describe('ngOnDestroy', () => {
     it('should call destroy$.next and destroy$.complete', () => {
@@ -56,4 +65,11 @@ describe('AdrExaminerNotesHistoryEditComponent', () => {
       expect(notes).toEqual([testNote]);
     });
   });
+  describe('getEditAdditionalExaminerNotePage', () => {
+    it('should navigate you to the EditAdditionalExaminerNotePage', () => {
+      const routerSpy = jest.spyOn(router, 'navigate');
+      component.getEditAdditionalExaminerNotePage(1);
+      expect(routerSpy).toHaveBeenCalled();
+    });
+  });
 });
diff --git a/...tom-sections/adr-examiner-notes-history-edit/adr-examiner-notes-history.component-edit.ts b/...tom-sections/adr-examiner-notes-history-edit/adr-examiner-notes-history.component-edit.ts
@@ -1,4 +1,4 @@
-import { KeyValue } from '@angular/common';
+import { KeyValue, ViewportScroller } from '@angular/common';
 import {
   AfterContentInit,
   Component, inject, OnDestroy, OnInit,
@@ -9,6 +9,11 @@ import { BaseControlComponent } from '@forms/components/base-control/base-contro
 import { CustomControl, CustomFormControl } from '@forms/services/dynamic-form.types';
 import { TechnicalRecordService } from '@services/technical-record/technical-record.service';
 import { ReplaySubject, takeUntil } from 'rxjs';
+import { updateScrollPosition } from '@store/technical-records';
+import { TechnicalRecordServiceState } from '@store/technical-records/reducers/technical-record-service.reducer';
+import { Store } from '@ngrx/store';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ReasonForEditing } from '@models/vehicle-tech-record.model';
 
 @Component({
   selector: 'app-adr-examiner-notes-history',
@@ -22,6 +27,11 @@ export class AdrExaminerNotesHistoryEditComponent extends BaseControlComponent i
   formArray = new FormArray<CustomFormControl>([]);
   currentTechRecord?: TechRecordType<'hgv' | 'lgv' | 'trl'> = undefined;
   technicalRecordService = inject(TechnicalRecordService);
+  store = inject(Store<TechnicalRecordServiceState>);
+  viewportScroller = inject(ViewportScroller);
+  router = inject(Router);
+  route = inject(ActivatedRoute);
+  editingReason?: ReasonForEditing;
 
   ngOnInit() {
     this.formArray.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((changes) => {
@@ -30,6 +40,7 @@ export class AdrExaminerNotesHistoryEditComponent extends BaseControlComponent i
     this.technicalRecordService.techRecord$.pipe(takeUntil(this.destroy$)).subscribe((currentTechRecord) => {
       this.currentTechRecord = currentTechRecord as TechRecordType<'hgv' | 'lgv' | 'trl'>;
     });
+    this.editingReason = this.route.snapshot.data['reason'];
   }
 
   override ngAfterContentInit() {
@@ -48,6 +59,14 @@ export class AdrExaminerNotesHistoryEditComponent extends BaseControlComponent i
     return returnValue;
   }
 
+  getEditAdditionalExaminerNotePage(examinerNoteIndex: number) {
+    const route = `../${this.editingReason}/edit-additional-examiner-note/${examinerNoteIndex}`;
+
+    this.store.dispatch(updateScrollPosition({ position: this.viewportScroller.getScrollPosition() }));
+
+    void this.router.navigate([route], { relativeTo: this.route, state: this.currentTechRecord });
+  }
+
   ngOnDestroy() {
     this.destroy$.next(true);
     this.destroy$.complete();

diff --git a/src/app/models/routes.enum.ts b/src/app/models/routes.enum.ts
@@ -30,8 +30,10 @@ export enum TechRecordRoutes {
   CHANGE_VTA_VISIBILITY = 'change-vta-visibility',
   CORRECT_ERROR_TYRE_SEARCH = 'correcting-an-error/tyre-search/:axleNumber',
   CORRECT_ERROR_CHANGE_SUMMARY = 'correcting-an-error/change-summary',
+  CORRECT_ERROR_EDIT_ADDITIONAL_EXAMINER_NOTE = 'correcting-an-error/edit-additional-examiner-note/:examinerNoteIndex',
   NOTIFIABLE_ALTERATION_NEEDED_CHANGE_SUMMARY = 'notifiable-alteration-needed/change-summary',
   NOTIFIABLE_ALTERATION_NEEDED_TYRE_SEARCH = 'notifiable-alteration-needed/tyre-search/:axleNumber',
+  NOTIFIABLE_ALTERNATION_NEEDED_EDIT_ADDITIONAL_EXAMINER_NOTE = 'notifiable-alteration-needed/edit-additional-examiner-note/:examinerNoteIndex',
   TEST_RECORDS = 'test-records/test-result/:testResultId/:testNumber',
   CREATE_TEST = 'test-records/create-test',
   ADR_CERTIFICATE = 'adr-certificate',