Skip to content

Add customizable pagination size#575

Merged
Flaminel merged 3 commits into
mainfrom
add_page_size
Apr 20, 2026
Merged

Add customizable pagination size#575
Flaminel merged 3 commits into
mainfrom
add_page_size

Conversation

@Flaminel

Copy link
Copy Markdown
Contributor

Relates to #568

@coderabbitai

coderabbitai Bot commented Apr 20, 2026

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 47820a25-f919-49e1-93b4-13a2c311a464

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

A new PaginationService centrally manages pagination page-size preferences via localStorage. Five feature components (events, quality-tab, searches-tab, upgrades-tab, strikes) now initialize page sizes from this service and handle page-size changes through persisted handlers. The paginator UI component adds a "Rows per page" dropdown selector with configurable options.

Changes

Cohort / File(s) Summary
New Pagination Service
code/frontend/src/app/core/services/pagination.service.ts
Core service providing getPageSize(), setPageSize(), and createPageSizeHandler() to manage localStorage-backed pagination preferences with validation and signal integration.
Paginator Component
code/frontend/src/app/ui/paginator/paginator.component.html, paginator.component.ts, paginator.component.scss
Added "Rows per page" dropdown UI with selectable size options, new pageSizeOptions input, pageSizeChange output, and corresponding BEM-style layout/styling for the new controls.
Feature Components — Template Updates
code/frontend/src/app/features/events/events.component.html, seeker-stats/quality-tab/quality-tab.component.html, seeker-stats/searches-tab/searches-tab.component.html, seeker-stats/upgrades-tab/upgrades-tab.component.html, strikes/strikes.component.html
Changed paginator visibility condition from totalRecords() > pageSize() to totalRecords() > 0; added (pageSizeChange)="onPageSizeChange($event)" binding to handle page-size updates.
Feature Components — TypeScript Updates
code/frontend/src/app/features/events/events.component.ts, seeker-stats/quality-tab/quality-tab.component.ts, seeker-stats/searches-tab/searches-tab.component.ts, seeker-stats/upgrades-tab/upgrades-tab.component.ts, strikes/strikes.component.ts
Injected PaginationService; added static PAGE_SIZE_KEY constant per component; initialized pageSize signal from persisted storage; added onPageSizeChange() handler to update signals and reload data on size change.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A rabbit's tale of pagination bliss,
Page sizes now remembered—what a miss!
Fifty rows today, a hundred tomorrow,
Stored safe in localStorage, no need to borrow.
The paginator hops with dropdown delight,

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Add customizable pagination size' accurately summarizes the main change: introducing a new PaginationService and integrating it across multiple components to enable user-customizable page sizes with localStorage persistence.
Description check ✅ Passed The description 'Relates to #568' is minimal but directly relevant, linking the PR to a specific issue. While lacking implementation details, it appropriately references the related work.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch add_page_size

Comment @coderabbitai help to get the list of available commands and usage tips.

@Flaminel

Copy link
Copy Markdown
Contributor Author

@greptileai review

@Flaminel

Copy link
Copy Markdown
Contributor Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Apr 20, 2026

Copy link
Copy Markdown
✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
code/frontend/src/app/ui/paginator/paginator.component.ts (1)

18-38: ⚠️ Potential issue | 🟠 Major

Default page size is not present in default options.

pageSize defaults to 25, but pageSizeOptions defaults exclude it. That can leave the selector with no matching selected option initially.

💡 Proposed fix
-  pageSizeOptions = input<number[]>([50, 100, 200, 500]);
+  pageSizeOptions = input<number[]>([25, 50, 100, 200, 500]);

   readonly pageSizeSelectOptions = computed<SelectOption[]>(() =>
-    this.pageSizeOptions().map((n) => ({ label: String(n), value: n }))
+    (this.pageSizeOptions().includes(this.pageSize())
+      ? this.pageSizeOptions()
+      : [this.pageSize(), ...this.pageSize()]
+    ).map((n) => ({ label: String(n), value: n }))
   );
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@code/frontend/src/app/ui/paginator/paginator.component.ts` around lines 18 -
38, The pageSizeOptions default array doesn't include the component's default
pageSize (25), which can leave the select without a matching option; update the
pageSizeOptions input (symbol: pageSizeOptions) to include 25 (e.g.,
[25,50,100,200,500]) or derive options from the default pageSize so the computed
pageSizeSelectOptions always contains an option matching the current pageSize
value used by pageSize() and the selection UI.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@code/frontend/src/app/core/services/pagination.service.ts`:
- Around line 5-16: Wrap all localStorage accesses in try/catch inside
getPageSize and setPageSize so SecurityError in private/incognito doesn't
throw—on catch, return defaultValue from getPageSize and make setPageSize a safe
no-op (optionally log). In addition, validate the page size before
persisting/updating in the pagination handler: ensure the new size is a finite
integer > 0 (reuse the same validation as getPageSize) and only call setPageSize
and update the signal/state when the value passes validation; otherwise ignore
or revert to default.

---

Outside diff comments:
In `@code/frontend/src/app/ui/paginator/paginator.component.ts`:
- Around line 18-38: The pageSizeOptions default array doesn't include the
component's default pageSize (25), which can leave the select without a matching
option; update the pageSizeOptions input (symbol: pageSizeOptions) to include 25
(e.g., [25,50,100,200,500]) or derive options from the default pageSize so the
computed pageSizeSelectOptions always contains an option matching the current
pageSize value used by pageSize() and the selection UI.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: fa8dbfbc-aee5-4e27-9451-82bea513cd06

📥 Commits

Reviewing files that changed from the base of the PR and between 5b500c5 and 40d032f.

📒 Files selected for processing (14)
  • code/frontend/src/app/core/services/pagination.service.ts
  • code/frontend/src/app/features/events/events.component.html
  • code/frontend/src/app/features/events/events.component.ts
  • code/frontend/src/app/features/seeker-stats/quality-tab/quality-tab.component.html
  • code/frontend/src/app/features/seeker-stats/quality-tab/quality-tab.component.ts
  • code/frontend/src/app/features/seeker-stats/searches-tab/searches-tab.component.html
  • code/frontend/src/app/features/seeker-stats/searches-tab/searches-tab.component.ts
  • code/frontend/src/app/features/seeker-stats/upgrades-tab/upgrades-tab.component.html
  • code/frontend/src/app/features/seeker-stats/upgrades-tab/upgrades-tab.component.ts
  • code/frontend/src/app/features/strikes/strikes.component.html
  • code/frontend/src/app/features/strikes/strikes.component.ts
  • code/frontend/src/app/ui/paginator/paginator.component.html
  • code/frontend/src/app/ui/paginator/paginator.component.scss
  • code/frontend/src/app/ui/paginator/paginator.component.ts

Comment thread code/frontend/src/app/core/services/pagination.service.ts
@greptile-apps

greptile-apps Bot commented Apr 20, 2026

Copy link
Copy Markdown

Greptile Summary

This PR adds customizable pagination size across all paginated views (events, strikes, seeker-stats tabs) by introducing a PaginationService that persists the selected page size to localStorage per component key. A "Rows per page" select dropdown is embedded in the PaginatorComponent, and the paginator visibility condition is widened from totalRecords > pageSize to totalRecords > 0 so the control is always accessible.

Confidence Score: 5/5

Safe to merge — only one minor API inconsistency in the reusable component's defaults.

All findings are P2. The mismatched defaults in PaginatorComponent don't affect any current consumer (all pass explicit values), so there is no present breakage. The implementation is consistent across all five components and the new service is well-guarded.

paginator.component.ts — default values for pageSize and pageSizeOptions are inconsistent.

Important Files Changed

Filename Overview
code/frontend/src/app/core/services/pagination.service.ts New shared service that reads/writes page size to localStorage with validation; logic is correct and well-guarded.
code/frontend/src/app/ui/paginator/paginator.component.ts Adds page-size selector and pageSizeChange output; pageSize default (25) doesn't appear in pageSizeOptions default ([50,100,200,500]), causing a blank dropdown if used with defaults.
code/frontend/src/app/ui/paginator/paginator.component.html Adds left-panel with conditional rows-per-page select and retains existing page info/controls; template is clean.
code/frontend/src/app/features/events/events.component.ts Wires PaginationService into events component; page size now persisted per localStorage key, pattern is consistent.
code/frontend/src/app/features/strikes/strikes.component.ts Same pagination persistence pattern applied to strikes; correct and consistent.
code/frontend/src/app/features/seeker-stats/quality-tab/quality-tab.component.ts Same pagination persistence pattern applied to quality tab; consistent with other components.
code/frontend/src/app/features/seeker-stats/searches-tab/searches-tab.component.ts Same pagination persistence pattern applied to searches tab; consistent with other components.
code/frontend/src/app/features/seeker-stats/upgrades-tab/upgrades-tab.component.ts Same pagination persistence pattern applied to upgrades tab; consistent with other components.

Sequence Diagram

sequenceDiagram
    participant User
    participant PaginatorComponent
    participant FeatureComponent
    participant PaginationService
    participant localStorage

    User->>PaginatorComponent: Selects new page size
    PaginatorComponent->>PaginatorComponent: onPageSizeChange(size)
    PaginatorComponent->>FeatureComponent: pageSizeChange.emit(size)
    FeatureComponent->>PaginationService: createPageSizeHandler callback(size)
    PaginationService->>localStorage: setItem(key, size)
    PaginationService->>FeatureComponent: pageSize.set(size)
    PaginationService->>FeatureComponent: currentPage.set(1)
    PaginationService->>FeatureComponent: reload()
    FeatureComponent->>FeatureComponent: loadData() API call

    Note over FeatureComponent,localStorage: On next component init
    FeatureComponent->>PaginationService: getPageSize(key, 50)
    PaginationService->>localStorage: getItem(key)
    localStorage-->>PaginationService: stored value
    PaginationService-->>FeatureComponent: validated page size
Loading

Reviews (1): Last reviewed commit: "added customizable pagination size" | Re-trigger Greptile

Comment thread code/frontend/src/app/ui/paginator/paginator.component.ts Outdated
@Flaminel Flaminel merged commit 7ed0f30 into main Apr 20, 2026
8 of 11 checks passed
@Flaminel Flaminel deleted the add_page_size branch April 20, 2026 16:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant