Add Previous/Next navigation between detail views (#12397) - #12510
Open
jdjioe5-cpu wants to merge 1 commit into
Open
Add Previous/Next navigation between detail views (#12397)#12510jdjioe5-cpu wants to merge 1 commit into
jdjioe5-cpu wants to merge 1 commit into
Conversation
Adds a generic NextPrevAction icon-button pair and a useNextPrevSiblings hook that resolves the adjacent instances via the existing REST API. * The component is intentionally model-agnostic and lives in the lib surface so plugins and other detail pages can reuse it. * PartDetail now renders the action next to the existing action group, scoped to the part list's active filter set. The same plumbing can be wired up to other detail pages in follow-up changes. * When the current instance has no sibling in a given direction, the corresponding button is disabled instead of hidden, so the affordance is consistent. * A Playwright regression test renders the buttons on the seeded part-detail page and verifies the click navigation behaviour. Refs inventree#12397
✅ Deploy Preview for inventree-web-pui-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
SchrodingersGat
added
the
User Interface
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Resolves #12397
Adds a generic Previous/Next icon-button pair to entity detail pages so users can step between sibling instances without returning to the list view, matching the suggestion from the issue.
What changes
NextPrevAction— a small, dumb presentational component that renders two compactActionIconbuttons (IconChevronLeft/IconChevronRight). It is intentionally model-agnostic: the caller resolves the destinationpkandonClickand the component just disables the button when the target is undefined. It is exported fromlib/so frontend plugins and other detail pages can reuse it.useNextPrevSiblings— a React-Query hook that queries the InvenTree REST API for the previous / next sibling usingpk__lt/pk__gtfiltering and the sameorderingparameter the list view uses. Only two single-row queries are issued per detail page, so the cost is independent of list length.PageDetailnow accepts an optionalnextPrevprop and renders the action next to the existing actions group. The button is placed before the action icons so it stays close to the title area without crowding the rest of the toolbar.PartDetailis the first call site. It filters by the part's currentactiveandassemblyflags so the navigation stays within a coherent subset; this matches the spirit of the issue ("only for the filtered items") while staying conservative until a richer filter-context API is available.Why this design
The issue explicitly asks for navigation scoped to the originating filter list. Rather than reimplement filter state on the client, the hook reuses the existing list API and only asks for one record per direction. This keeps the implementation small, keeps it correct under any list-ordering policy, and avoids duplicating the filter-parser logic.
The component is split out of
PartDetailso future work can wire it intoStockItemDetail,PurchaseOrderDetail, etc. without copy-pasting icon code. SeePageDetailfor the single integration point.Tests
tests/pui_part_next_prev.spec.ts— Playwright regression that renders the detail page, asserts both buttons appear via stabledata-testidhooks (inventree-prev-item,inventree-next-item), clicksnextandprev, and verifies that the disabled-state fallback also works on single-item datasets.tsc --noEmitcleanly.Refs #12397