starred/pocket-id
1
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2025-12-06 09:13:19 +03:00
Code Issues 121 Packages Projects Releases 16 Wiki Activity

[PR #961] feat: pagination improvements #526

New Issue
Open
opened 2025-10-07 00:17:59 +03:00 by OVERLORD · 0 comments
OVERLORD commented 2025-10-07 00:17:59 +03:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/pocket-id/pocket-id/pull/961
Author: @stonith404
Created: 9/18/2025
Status: 🔄 Open

Base: main ← Head: feat/pagination-improvements

📝 Commits (4)

  • d185be9 feat(pagination): persist items per page and remember page on back navigation
  • ee3ca8b remember page on back navigation over the UI
  • 3b5bfbf make loading animations smoother if data loads fast
  • 5f64126 Merge branch 'main' into feat/pagination-improvements

📊 Changes

40 files changed (+536 additions, -709 deletions)

View changed files

📝 backend/internal/utils/paging_util.go (+10 -6)
📝 frontend/src/lib/components/advanced-table.svelte (+146 -81)
📝 frontend/src/lib/components/audit-log-list.svelte (+15 -12)
📝 frontend/src/lib/components/signup/signup-token-list-modal.svelte (+3 -20)
📝 frontend/src/lib/components/signup/signup-token-modal.svelte (+5 -8)
➕ frontend/src/lib/components/ui/skeleton/index.ts (+7 -0)
➕ frontend/src/lib/components/ui/skeleton/skeleton.svelte (+17 -0)
📝 frontend/src/lib/components/user-group-selection.svelte (+12 -29)
📝 frontend/src/lib/services/api-key-service.ts (+11 -13)
📝 frontend/src/lib/services/api-service.ts (+6 -8)
📝 frontend/src/lib/services/app-config-service.ts (+46 -57)
📝 frontend/src/lib/services/audit-log-service.ts (+17 -26)
📝 frontend/src/lib/services/custom-claim-service.ts (+6 -6)
📝 frontend/src/lib/services/oidc-service.ts (+36 -44)
📝 frontend/src/lib/services/user-group-service.ts (+14 -20)
📝 frontend/src/lib/services/user-service.ts (+48 -60)
📝 frontend/src/lib/services/version-service.ts (+9 -17)
📝 frontend/src/lib/services/webauthn-service.ts (+29 -38)
📝 frontend/src/routes/settings/+layout.ts (+2 -1)
📝 frontend/src/routes/settings/admin/api-keys/+page.svelte (+3 -9)

...and 20 more files

📄 Description

This PR introduces several improvements to pagination:

  • The “Items per page” setting is now persisted per table in local storage.
  • The current page number is stored in the URL as a query parameter. This is useful when navigating back to a list after clicking on an item, since previously the current page was reset.

To enable these improvements, data fetching has been moved into the AdvancedTable components. Previously, fetching was handled at the page level. Although I generally prefer fetching data as high as possible in the component tree, this is no longer possible because only the AdvancedTable component is aware of its pagination state.

Additionally, I had to convert all service methods into arrow functions to avoid issues with this binding. For example, consider this code:
3b5bfbf183/frontend/src/routes/settings/admin/users/user-list.svelte (L99)

If userService.list were defined as a regular method, the value of this inside the function would refer to the AdvancedTable component instead of the UserService instance. As a result, accessing this.api would throw an error: Cannot read properties of undefined (reading 'get') because this.api doesn’t exist on AdvancedTable.

Closes #825

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/pocket-id/pocket-id/pull/961 **Author:** [@stonith404](https://github.com/stonith404) **Created:** 9/18/2025 **Status:** 🔄 Open **Base:** `main` ← **Head:** `feat/pagination-improvements` --- ### 📝 Commits (4) - [`d185be9`](https://github.com/pocket-id/pocket-id/commit/d185be9e9cdbb03ee1c3816b5f068f136628cd12) feat(pagination): persist items per page and remember page on back navigation - [`ee3ca8b`](https://github.com/pocket-id/pocket-id/commit/ee3ca8b972defa8aa336bfcd4286f2192fd81434) remember page on back navigation over the UI - [`3b5bfbf`](https://github.com/pocket-id/pocket-id/commit/3b5bfbf183ae1d4f76c14fba7cef2236a200c36d) make loading animations smoother if data loads fast - [`5f64126`](https://github.com/pocket-id/pocket-id/commit/5f6412624fc043782eb834405064c501ec4b2518) Merge branch 'main' into feat/pagination-improvements ### 📊 Changes **40 files changed** (+536 additions, -709 deletions) <details> <summary>View changed files</summary> 📝 `backend/internal/utils/paging_util.go` (+10 -6) 📝 `frontend/src/lib/components/advanced-table.svelte` (+146 -81) 📝 `frontend/src/lib/components/audit-log-list.svelte` (+15 -12) 📝 `frontend/src/lib/components/signup/signup-token-list-modal.svelte` (+3 -20) 📝 `frontend/src/lib/components/signup/signup-token-modal.svelte` (+5 -8) ➕ `frontend/src/lib/components/ui/skeleton/index.ts` (+7 -0) ➕ `frontend/src/lib/components/ui/skeleton/skeleton.svelte` (+17 -0) 📝 `frontend/src/lib/components/user-group-selection.svelte` (+12 -29) 📝 `frontend/src/lib/services/api-key-service.ts` (+11 -13) 📝 `frontend/src/lib/services/api-service.ts` (+6 -8) 📝 `frontend/src/lib/services/app-config-service.ts` (+46 -57) 📝 `frontend/src/lib/services/audit-log-service.ts` (+17 -26) 📝 `frontend/src/lib/services/custom-claim-service.ts` (+6 -6) 📝 `frontend/src/lib/services/oidc-service.ts` (+36 -44) 📝 `frontend/src/lib/services/user-group-service.ts` (+14 -20) 📝 `frontend/src/lib/services/user-service.ts` (+48 -60) 📝 `frontend/src/lib/services/version-service.ts` (+9 -17) 📝 `frontend/src/lib/services/webauthn-service.ts` (+29 -38) 📝 `frontend/src/routes/settings/+layout.ts` (+2 -1) 📝 `frontend/src/routes/settings/admin/api-keys/+page.svelte` (+3 -9) _...and 20 more files_ </details> ### 📄 Description This PR introduces several improvements to pagination: - The “Items per page” setting is now persisted per table in local storage. - The current page number is stored in the URL as a query parameter. This is useful when navigating back to a list after clicking on an item, since previously the current page was reset. ---- To enable these improvements, data fetching has been moved into the `AdvancedTable` components. Previously, fetching was handled at the page level. Although I generally prefer fetching data as high as possible in the component tree, this is no longer possible because only the `AdvancedTable` component is aware of its pagination state. Additionally, I had to convert all service methods into arrow functions to avoid issues with `this` binding. For example, consider this code: https://github.com/pocket-id/pocket-id/blob/3b5bfbf183ae1d4f76c14fba7cef2236a200c36d/frontend/src/routes/settings/admin/users/user-list.svelte#L99 If `userService.list ` were defined as a regular method, the value of `this` inside the function would refer to the `AdvancedTable` component instead of the `UserService` instance. As a result, accessing `this.api` would throw an error: `Cannot read properties of undefined (reading 'get')` because `this.api ` doesn’t exist on `AdvancedTable`. --- Closes #825 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
OVERLORD added the pull-request label 2025-10-07 00:17:59 +03:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
breaking
bug
documentation
feature
needs more upvotes
open to pull requests
pull-request
Mirrored from GitHub Pull Request
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
OVERLORD
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/pocket-id#526
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?