feat(cb2-10032): add pagination to adr examiner notes

src/app/forms/custom-sections/adr-examiner-notes-history-edit/adr-examiner-notes-history-edit.component.html

@@ -13,7 +13,7 @@
           <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">
+        <ng-container *ngFor="let examinerNote of currentAdrNotesPage; 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.note }}
@@ -29,6 +29,13 @@
         </ng-container>
       </tbody>
     </table>
+    <app-pagination
+      tableName="adr-notes-history"
+      *ngIf="notes.length"
+      [numberOfItems]="notes.length"
+      [itemsPerPage]="3"
+      (paginationOptions)="handlePaginationChange($event)"
+    ></app-pagination>
     <ng-template #empty>
       <dl class="govuk-summary-list" *ngIf="notes.length === 0">
         <div class="govuk-summary-list__row">

src/app/forms/custom-sections/adr-examiner-notes-history-edit/adr-examiner-notes-history.component-edit.spec.ts

@@ -21,6 +21,9 @@ describe('AdrExaminerNotesHistoryEditComponent', () => {
   let component: AdrExaminerNotesHistoryEditComponent;
   let fixture: ComponentFixture<AdrExaminerNotesHistoryEditComponent>;
   let router: Router;
+
+  const MOCK_HGV = mockVehicleTechnicalRecord(VehicleTypes.HGV) as TechRecordType<'hgv'>;
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [AdrExaminerNotesHistoryEditComponent],
@@ -72,4 +75,36 @@ describe('AdrExaminerNotesHistoryEditComponent', () => {
       expect(routerSpy).toHaveBeenCalled();
     });
   });
+
+  describe('handlePaginationChange', () => {
+    it('should set the start and end pages', () => {
+      component.handlePaginationChange({ start: 0, end: 3 });
+
+      expect(component.pageStart).toBe(0);
+      expect(component.pageEnd).toBe(3);
+    });
+  });
+
+  describe('currentAdrNotesPage', () => {
+    it('should return a sliced array of adr notes depending on the page the user is on', () => {
+      component.currentTechRecord = { ...MOCK_HGV };
+      component.pageStart = 1;
+      component.pageEnd = 2;
+      component.currentTechRecord.techRecord_adrDetails_additionalExaminerNotes = [
+        { createdAtDate: 'test1', lastUpdatedBy: 'test1', note: 'test note 1' },
+        { createdAtDate: 'test2', lastUpdatedBy: 'test2', note: 'test note 2' },
+      ];
+      expect(component.currentAdrNotesPage).toEqual([
+        { createdAtDate: 'test2', lastUpdatedBy: 'test2', note: 'test note 2' },
+      ]);
+    });
+
+    it('should return an empty array if the adr examiner notes is undefined', () => {
+      component.currentTechRecord = { ...MOCK_HGV };
+      component.pageStart = 2;
+      component.pageEnd = 3;
+      component.currentTechRecord.techRecord_adrDetails_additionalExaminerNotes = undefined;
+      expect(component.currentAdrNotesPage).toEqual([]);
+    });
+  });
 });

src/app/forms/custom-sections/adr-examiner-notes-history-edit/adr-examiner-notes-history.component-edit.ts

@@ -14,16 +14,15 @@ import { TechnicalRecordServiceState } from '@store/technical-records/reducers/t
 import { Store } from '@ngrx/store';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ReasonForEditing } from '@models/vehicle-tech-record.model';
+import { AdditionalExaminerNotes } from '@dvsa/cvs-type-definitions/types/v3/tech-record/get/hgv/complete';
 
 @Component({
   selector: 'app-adr-examiner-notes-history',
   templateUrl: './adr-examiner-notes-history-edit.component.html',
   styleUrls: ['adr-examiner-notes-history.component-edit.scss'],
 })
 export class AdrExaminerNotesHistoryEditComponent extends BaseControlComponent implements OnInit, OnDestroy, AfterContentInit {
-
   destroy$ = new ReplaySubject<boolean>(1);
-
   formArray = new FormArray<CustomFormControl>([]);
   currentTechRecord?: TechRecordType<'hgv' | 'lgv' | 'trl'> = undefined;
   technicalRecordService = inject(TechnicalRecordService);
@@ -32,8 +31,10 @@ export class AdrExaminerNotesHistoryEditComponent extends BaseControlComponent i
   router = inject(Router);
   route = inject(ActivatedRoute);
   editingReason?: ReasonForEditing;
+  pageStart?: number;
+  pageEnd?: number;
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.formArray.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((changes) => {
       this.control?.patchValue(changes, { emitModelToViewChange: true });
     });
@@ -43,7 +44,7 @@ export class AdrExaminerNotesHistoryEditComponent extends BaseControlComponent i
     this.editingReason = this.route.snapshot.data['reason'];
   }
 
-  override ngAfterContentInit() {
+  override ngAfterContentInit(): void {
     const injectedControl = this.injector.get(NgControl, null);
     if (injectedControl) {
       const ngControl = injectedControl.control as unknown as KeyValue<string, CustomControl>;
@@ -54,9 +55,18 @@ export class AdrExaminerNotesHistoryEditComponent extends BaseControlComponent i
     }
   }
 
-  getAdditionalExaminerNotes() {
-    const returnValue = this.currentTechRecord ? this.currentTechRecord.techRecord_adrDetails_additionalExaminerNotes ?? [] : [];
-    return returnValue;
+  handlePaginationChange({ start, end }: { start: number; end: number }): void {
+    this.pageStart = start;
+    this.pageEnd = end;
+    this.cdr.detectChanges();
+  }
+
+  getAdditionalExaminerNotes(): AdditionalExaminerNotes[] {
+    return this.currentTechRecord?.techRecord_adrDetails_additionalExaminerNotes ?? [];
+  }
+
+  get currentAdrNotesPage(): AdditionalExaminerNotes[] {
+    return this.currentTechRecord?.techRecord_adrDetails_additionalExaminerNotes?.slice(this.pageStart, this.pageEnd) ?? [];
   }
 
   getEditAdditionalExaminerNotePage(examinerNoteIndex: number) {
@@ -67,9 +77,8 @@ export class AdrExaminerNotesHistoryEditComponent extends BaseControlComponent i
     void this.router.navigate([route], { relativeTo: this.route, state: this.currentTechRecord });
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     this.destroy$.next(true);
     this.destroy$.complete();
   }
-
 }

src/app/forms/custom-sections/adr-examiner-notes-history-view/adr-examiner-notes-history-view.component.html

@@ -1,32 +1,41 @@
 <ng-container *ngIf="control">
-  <section class="govuk-!-margin-top-4">
-    <h3 class="govuk-heading-m">Additional Examiner Notes History</h3>
-    <table class="govuk-table" *ngIf="control.value && control.value.length > 0; else empty">
-      <tbody class="govuk-table__body">
-        <tr class="govuk-table__row">
-          <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>
-        </tr>
-        <ng-container *ngFor="let result of control.value; 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">
-              {{ result.note }}
-            </td>
-            <td class="govuk-table__cell break-words" [class.border-b-0]="i === 2 || isLast">{{ result.lastUpdatedBy }}</td>
-            <td class="govuk-table__cell break-words" [class.border-b-0]="i === 2 || isLast">
-              {{ result.createdAtDate | date : 'dd/MM/yyyy' | defaultNullOrEmpty }}
-            </td>
+  <ng-container *ngIf="adrNotes">
+    <section class="govuk-!-margin-top-4">
+      <h3 class="govuk-heading-m">Additional Examiner Notes History</h3>
+      <table class="govuk-table" *ngIf="adrNotes && adrNotes.length > 0; else empty">
+        <tbody class="govuk-table__body">
+          <tr class="govuk-table__row">
+            <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>
           </tr>
-        </ng-container>
-      </tbody>
-    </table>
-    <ng-template #empty>
-      <dl class="govuk-summary-list">
-        <div class="govuk-summary-list__row border-b-0">
-          <dt class="govuk-summary-list__key">No additional examiner notes history available</dt>
-        </div>
-      </dl>
-    </ng-template>
-  </section>
+          <ng-container *ngFor="let result of currentAdrNotesPage; 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">
+                {{ result.note }}
+              </td>
+              <td class="govuk-table__cell break-words" [class.border-b-0]="i === 2 || isLast">{{ result.lastUpdatedBy }}</td>
+              <td class="govuk-table__cell break-words" [class.border-b-0]="i === 2 || isLast">
+                {{ result.createdAtDate | date : 'dd/MM/yyyy' | defaultNullOrEmpty }}
+              </td>
+            </tr>
+          </ng-container>
+        </tbody>
+      </table>
+      <app-pagination
+        tableName="adr-notes-history"
+        *ngIf="adrNotes.length"
+        [numberOfItems]="adrNotes.length"
+        [itemsPerPage]="3"
+        (paginationOptions)="handlePaginationChange($event)"
+      ></app-pagination>
+      <ng-template #empty>
+        <dl class="govuk-summary-list">
+          <div class="govuk-summary-list__row border-b-0">
+            <dt class="govuk-summary-list__key">No additional examiner notes history available</dt>
+          </div>
+        </dl>
+      </ng-template>
+    </section>
+  </ng-container>
 </ng-container>

src/app/forms/custom-sections/adr-examiner-notes-history-view/adr-examiner-notes-history-view.component.spec.ts

@@ -3,12 +3,22 @@ import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { CustomFormControl, FormNodeTypes } from '@forms/services/dynamic-form.types';
 import { provideMockStore } from '@ngrx/store/testing';
 import { State, initialAppState } from '@store/index';
+import { TechnicalRecordService } from '@services/technical-record/technical-record.service';
+import { mockVehicleTechnicalRecord } from '@mocks/mock-vehicle-technical-record.mock';
+import { VehicleTypes } from '@models/vehicle-tech-record.model';
+import { TechRecordType } from '@dvsa/cvs-type-definitions/types/v3/tech-record/tech-record-vehicle-type';
+import { of } from 'rxjs';
 import { AdrExaminerNotesHistoryViewComponent } from './adr-examiner-notes-history-view.component';
 
 describe('AdrExaminerNotesHistoryViewComponent', () => {
   let component: AdrExaminerNotesHistoryViewComponent;
   let fixture: ComponentFixture<AdrExaminerNotesHistoryViewComponent>;
 
+  const MOCK_HGV = mockVehicleTechnicalRecord(VehicleTypes.HGV) as TechRecordType<'hgv'>;
+  const mockTechRecordService = {
+    techRecord$: of({ ...MOCK_HGV }),
+  };
+
   const control = new CustomFormControl({
     name: 'techRecord_adrDetails_additionalExaminerNotes',
     type: FormNodeTypes.CONTROL,
@@ -19,6 +29,7 @@ describe('AdrExaminerNotesHistoryViewComponent', () => {
       declarations: [AdrExaminerNotesHistoryViewComponent],
       providers: [
         provideMockStore<State>({ initialState: initialAppState }),
+        { provide: TechnicalRecordService, useValue: mockTechRecordService },
         { provide: NG_VALUE_ACCESSOR, useExisting: AdrExaminerNotesHistoryViewComponent, multi: true },
         {
           provide: NgControl,
@@ -38,4 +49,63 @@ describe('AdrExaminerNotesHistoryViewComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('ngOnInit', () => {
+    it('should set the currentTechRecord when ngOnInit is fired', () => {
+      component.currentTechRecord = undefined;
+
+      component.ngOnInit();
+      expect(component.currentTechRecord).toEqual(MOCK_HGV);
+    });
+  });
+
+  describe('adrNotes', () => {
+    it('should return an array of the technical records adr examiner notes', () => {
+      component.currentTechRecord = { ...MOCK_HGV };
+      component.currentTechRecord.techRecord_adrDetails_additionalExaminerNotes = [
+        { createdAtDate: 'test', lastUpdatedBy: 'test', note: 'test note' },
+      ];
+      expect(component.adrNotes).toEqual([{ createdAtDate: 'test', lastUpdatedBy: 'test', note: 'test note' }]);
+    });
+
+    it('should return an empty array if the adr examiner notes is undefined', () => {
+      component.currentTechRecord = { ...MOCK_HGV };
+      component.currentTechRecord.techRecord_adrDetails_additionalExaminerNotes = undefined;
+      expect(component.adrNotes).toEqual([]);
+    });
+  });
+
+  describe('currentAdrNotesPage', () => {
+    it('should return a sliced array of adr notes depending on the page the user is on', () => {
+      component.currentTechRecord = { ...MOCK_HGV };
+      component.pageStart = 2;
+      component.pageEnd = 3;
+      component.currentTechRecord.techRecord_adrDetails_additionalExaminerNotes = [
+        { createdAtDate: 'test1', lastUpdatedBy: 'test1', note: 'test note 1' },
+        { createdAtDate: 'test2', lastUpdatedBy: 'test2', note: 'test note 2' },
+        { createdAtDate: 'test3', lastUpdatedBy: 'test3', note: 'test note 3' },
+        { createdAtDate: 'test4', lastUpdatedBy: 'test4', note: 'test note 4' },
+      ];
+      expect(component.currentAdrNotesPage).toEqual([
+        { createdAtDate: 'test3', lastUpdatedBy: 'test3', note: 'test note 3' },
+      ]);
+    });
+
+    it('should return an empty array if the adr examiner notes is undefined', () => {
+      component.currentTechRecord = { ...MOCK_HGV };
+      component.pageStart = 1;
+      component.pageEnd = 2;
+      component.currentTechRecord.techRecord_adrDetails_additionalExaminerNotes = undefined;
+      expect(component.currentAdrNotesPage).toEqual([]);
+    });
+  });
+
+  describe('handlePaginationChange', () => {
+    it('should set the start and end pages', () => {
+      component.handlePaginationChange({ start: 0, end: 3 });
+
+      expect(component.pageStart).toBe(0);
+      expect(component.pageEnd).toBe(3);
+    });
+  });
 });

src/app/forms/custom-sections/adr-examiner-notes-history-view/adr-examiner-notes-history-view.component.ts

@@ -1,6 +1,12 @@
-import { Component } from '@angular/core';
+import {
+  Component, inject, OnDestroy, OnInit,
+} from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BaseControlComponent } from '@forms/components/base-control/base-control.component';
+import { AdditionalExaminerNotes } from '@dvsa/cvs-type-definitions/types/v3/tech-record/get/hgv/complete';
+import { TechRecordType } from '@dvsa/cvs-type-definitions/types/v3/tech-record/tech-record-vehicle-type';
+import { TechnicalRecordService } from '@services/technical-record/technical-record.service';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
   selector: 'app-adr-examiner-notes-history-view',
@@ -14,5 +20,35 @@ import { BaseControlComponent } from '@forms/components/base-control/base-contro
     },
   ],
 })
-export class AdrExaminerNotesHistoryViewComponent extends BaseControlComponent {
+export class AdrExaminerNotesHistoryViewComponent extends BaseControlComponent implements OnInit, OnDestroy {
+  technicalRecordService = inject(TechnicalRecordService);
+  currentTechRecord?: TechRecordType<'hgv' | 'lgv' | 'trl'> | undefined;
+  pageStart?: number;
+  pageEnd?: number;
+  private destroy$: Subject<void> = new Subject<void>();
+
+  ngOnInit(): void {
+    this.technicalRecordService.techRecord$.pipe(takeUntil(this.destroy$)).subscribe((currentTechRecord) => {
+      this.currentTechRecord = currentTechRecord as TechRecordType<'hgv' | 'lgv' | 'trl'>;
+    });
+  }
+
+  handlePaginationChange({ start, end }: { start: number; end: number }): void {
+    this.pageStart = start;
+    this.pageEnd = end;
+    this.cdr.detectChanges();
+  }
+
+  get adrNotes(): AdditionalExaminerNotes[] {
+    return this.currentTechRecord?.techRecord_adrDetails_additionalExaminerNotes ?? [];
+  }
+
+  get currentAdrNotesPage(): AdditionalExaminerNotes[] {
+    return this.currentTechRecord?.techRecord_adrDetails_additionalExaminerNotes?.slice(this.pageStart, this.pageEnd) ?? [];
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }