Add jobs-per-page selector to job overview pagination

Default is now 15 jobs and the chosen value is stored in localStorage so
it survives navigation and reloads. The PrimeNG paginator exposes a
dropdown with options 15, 30 and 50.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: az108

src/main/webapp/app/job/job-overview/job-card-list/job-card-list.component.html

@@ -59,6 +59,7 @@
   [value]="jobs()"
   [paginator]="true"
   [rows]="pageSize()"
+  [rowsPerPageOptions]="pageSizeOptions"
   [totalRecords]="totalRecords()"
   [lazy]="true"
   (onLazyLoad)="loadOnTableEmit($event)"

src/main/webapp/app/job/job-overview/job-card-list/job-card-list.component.ts

@@ -14,12 +14,16 @@ import { TranslateDirective } from 'app/shared/language';
 import { AccountService } from 'app/core/auth/account.service';
 import { JobFormDTOLocationEnum, JobFormDTOSubjectAreaEnum } from 'app/generated/model/job-form-dto';
 import { UserShortDTORolesEnum } from 'app/generated/model/user-short-dto';
+import { LocalStorageService } from 'app/service/localStorage.service';
 
 import { ApplicationStatusExtended, JobCardComponent } from '../job-card/job-card.component';
 import { JobCardDTO } from '../../../generated/model/job-card-dto';
 import { JobResourceApi } from '../../../generated/api/job-resource-api';
 import * as DropdownOptions from '../.././dropdown-options';
 
+export const JOBS_PER_PAGE_DEFAULT = 15;
+export const JOBS_PER_PAGE_OPTIONS: readonly number[] = [15, 30, 50];
+
 @Component({
   selector: 'jhi-job-card-list',
   standalone: true,
@@ -32,7 +36,8 @@ export class JobCardListComponent {
   jobs = signal<JobCardDTO[]>([]);
   totalRecords = signal<number>(0);
   page = signal<number>(0);
-  pageSize = signal<number>(12);
+  pageSize = signal<number>(JOBS_PER_PAGE_DEFAULT);
+  pageSizeOptions = JOBS_PER_PAGE_OPTIONS;
   searchQuery = signal<string>('');
 
   sortBy = signal<string>('startDate');
@@ -68,6 +73,7 @@ export class JobCardListComponent {
 
   private jobApi = inject(JobResourceApi);
   private readonly toastService = inject(ToastService);
+  private readonly localStorageService = inject(LocalStorageService);
 
   private readonly loadJobsEffect = effect(() => {
     this.page();
@@ -82,6 +88,7 @@ export class JobCardListComponent {
   });
 
   constructor() {
+    this.pageSize.set(this.localStorageService.loadJobsPerPage(JOBS_PER_PAGE_DEFAULT, JOBS_PER_PAGE_OPTIONS));
     void this.loadAllFilter();
   }
 
@@ -90,7 +97,10 @@ export class JobCardListComponent {
     const size = event.rows ?? this.pageSize();
 
     this.page.set(page);
-    this.pageSize.set(size);
+    if (size !== this.pageSize()) {
+      this.pageSize.set(size);
+      this.localStorageService.saveJobsPerPage(size);
+    }
   }
 
   onSearchEmit(searchQuery: string): void {

src/main/webapp/app/service/localStorage.service.ts

@@ -14,6 +14,7 @@ export interface ApplicationDraftData {
 export class LocalStorageService {
   readonly APPLICATION_DRAFT_VALIDITY_DURATION_IN_DAYS = 30;
   readonly SIDEBAR_STATE_KEY = 'sidebarCollapsed';
+  readonly JOBS_PER_PAGE_KEY = 'jobsPerPage';
   readonly sidebarCollapsed = signal(localStorage.getItem(this.SIDEBAR_STATE_KEY) === 'true');
 
   // =======================================================
@@ -67,6 +68,35 @@ export class LocalStorageService {
     localStorage.setItem(this.SIDEBAR_STATE_KEY, String(this.sidebarCollapsed()));
   }
 
+  // =======================================================
+  // JOBS PER PAGE PREFERENCE
+  // =======================================================
+
+  /**
+   * Returns the user's stored jobs-per-page preference.
+   *
+   * @param fallback value returned when nothing is stored or the value cannot be parsed
+   * @param allowed optional whitelist; values outside it are treated as missing
+   * @returns the stored page size if valid, otherwise the fallback
+   */
+  loadJobsPerPage(fallback: number, allowed?: readonly number[]): number {
+    const raw = localStorage.getItem(this.JOBS_PER_PAGE_KEY);
+    if (raw === null) return fallback;
+    const parsed = Number(raw);
+    if (!Number.isFinite(parsed) || parsed <= 0) return fallback;
+    if (allowed && !allowed.includes(parsed)) return fallback;
+    return parsed;
+  }
+
+  /**
+   * Persists the user's jobs-per-page preference so it survives navigation and reloads.
+   *
+   * @param pageSize the page size to remember
+   */
+  saveJobsPerPage(pageSize: number): void {
+    localStorage.setItem(this.JOBS_PER_PAGE_KEY, String(pageSize));
+  }
+
   private getApplicationKey(applicationId?: string, jobId?: string): string {
     if (applicationId) return `application_draft_${applicationId}`;
     if (jobId) return `application_draft_job_${jobId}`;

src/test/webapp/app/job/job-overview/job-card-list/job-card-list.component.spec.ts

@@ -3,7 +3,8 @@ import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { of, throwError } from 'rxjs';
 import { provideRouter, Router } from '@angular/router';
 
-import { JobCardListComponent } from 'app/job/job-overview/job-card-list/job-card-list.component';
+import { JobCardListComponent, JOBS_PER_PAGE_DEFAULT } from 'app/job/job-overview/job-card-list/job-card-list.component';
+import { LocalStorageService } from 'app/service/localStorage.service';
 import { JobResourceApi } from 'app/generated/api/job-resource-api';
 import { provideTranslateMock } from 'src/test/webapp/util/translate.mock';
 import { provideFontAwesomeTesting } from 'src/test/webapp/util/fontawesome.testing';
@@ -30,6 +31,7 @@ describe('JobCardListComponent', () => {
   let mockToastService = createToastServiceMock();
 
   beforeEach(async () => {
+    localStorage.clear();
     jobApi = {
       getAllFilters: vi.fn().mockReturnValue(
         of({
@@ -185,6 +187,38 @@ describe('JobCardListComponent', () => {
     expect(spy).toHaveBeenCalledOnce();
   });
 
+  it('should default pageSize to 15 when nothing is stored', () => {
+    expect(component.pageSize()).toBe(JOBS_PER_PAGE_DEFAULT);
+  });
+
+  it('should hydrate pageSize from localStorage on construction', () => {
+    TestBed.inject(LocalStorageService).saveJobsPerPage(30);
+
+    const hydratedFixture = TestBed.createComponent(JobCardListComponent);
+    hydratedFixture.detectChanges();
+
+    expect(hydratedFixture.componentInstance.pageSize()).toBe(30);
+  });
+
+  it('should persist a new pageSize when lazy-load reports a different value', () => {
+    vi.spyOn(component, 'loadJobs').mockResolvedValue();
+    const saveSpy = vi.spyOn(TestBed.inject(LocalStorageService), 'saveJobsPerPage');
+
+    component.loadOnTableEmit({ first: 0, rows: 30 });
+
+    expect(component.pageSize()).toBe(30);
+    expect(saveSpy).toHaveBeenCalledExactlyOnceWith(30);
+  });
+
+  it('should not write to localStorage when lazy-load reports the same pageSize', () => {
+    vi.spyOn(component, 'loadJobs').mockResolvedValue();
+    const saveSpy = vi.spyOn(TestBed.inject(LocalStorageService), 'saveJobsPerPage');
+
+    component.loadOnTableEmit({ first: 0, rows: component.pageSize() });
+
+    expect(saveSpy).not.toHaveBeenCalled();
+  });
+
   it('should set empty jobs and totalRecords when API returns no content', async () => {
     jobApi.getAvailableJobs.mockReturnValueOnce(of({ content: undefined, totalElements: undefined }));
 

src/test/webapp/app/service/localStorage.service.spec.ts

@@ -90,6 +90,25 @@ describe('LocalStorageService', () => {
     expect(() => getApplicationKey.call(service, undefined, undefined)).toThrowError();
   });
 
+  it('should return the fallback when no jobs-per-page preference is stored', () => {
+    expect(service.loadJobsPerPage(15)).toBe(15);
+  });
+
+  it('should return the stored jobs-per-page preference', () => {
+    service.saveJobsPerPage(30);
+    expect(service.loadJobsPerPage(15)).toBe(30);
+  });
+
+  it('should fall back when the stored jobs-per-page value is not in the allowed set', () => {
+    service.saveJobsPerPage(7);
+    expect(service.loadJobsPerPage(15, [15, 30, 50])).toBe(15);
+  });
+
+  it('should fall back when the stored jobs-per-page value cannot be parsed', () => {
+    localStorage.setItem(service.JOBS_PER_PAGE_KEY, 'not-a-number');
+    expect(service.loadJobsPerPage(15)).toBe(15);
+  });
+
   it('rethrows error when JSON.stringify fails (circular data)', () => {
     const circularPersonal: ApplicationDraftData['personalInfoData'] & { self?: any } = {
       firstName: emptyPersonalInfo.firstName,