Skip to content

feat: Add generic previous/next navigation between detail views (closes #12397) - #12511

Open
chidii wants to merge 2 commits into
inventree:masterfrom
chidii:feature/issue-12397-next-prev-nav
Open

feat: Add generic previous/next navigation between detail views (closes #12397)#12511
chidii wants to merge 2 commits into
inventree:masterfrom
chidii:feature/issue-12397-next-prev-nav

Conversation

@chidii

@chidii chidii commented Jul 31, 2026

Copy link
Copy Markdown

Closes #12397

Design
Answers the two open questions from the issue thread:

  • Filter/order fidelity: navigation context (endpoint + ordered pk list) is captured
    at row-click time in InvenTreeTable and stored in a small zustand slice
    (useLocalLibState, alongside the existing detailDrawerStack pattern). Prev/next on the
    detail page resolve as O(1) lookups into that exact list the user was viewing - not
    just "next by pk". No stored context (direct link, plugin embedding) falls back to an
    ordering-aware pk__gt/pk__lt query.
  • List shrinks mid-navigation: if a resolved neighbor 404s, it's dropped from the
    stored context and the next available neighbor is fetched automatically.

Generic for plugins
nextPrev is a first-class optional prop on PageDetail itself
({hasPrev, hasNext, onPrev, onNext}), not per-page logic. Any page or plugin using
PageDetail/Instance gets it by calling useNextPrevInstance - no copy-pasted filter
code per detail page.

Changes

  • hooks/UseNextPrevInstance.tsx (new) - peer to useInstance, resolves prev/next pk
  • states/LocalLibState.tsx - adds listNavContexts (excluded from persistence -
    ephemeral navigation state, not a user preference)
  • components/nav/PageDetail.tsx - renders prev/next chevrons + alt+←/→ hotkeys when
    nextPrev is supplied
  • pages/part/PartDetail.tsx - first integration

Not yet done

  • InvenTreeTable row-click wiring to populate listNavContexts (needs review against
    actual table component)
  • Tests: hook-level (context hit/miss/stale-pk-recovery) + Playwright shrink-list case

@chidii
chidii requested a review from SchrodingersGat as a code owner July 31, 2026 00:28
@netlify

netlify Bot commented Jul 31, 2026

Copy link
Copy Markdown

Deploy Preview for inventree-web-pui-preview ready!

Name Link
🔨 Latest commit 805d8f7
🔍 Latest deploy log https://app.netlify.com/projects/inventree-web-pui-preview/deploys/6a6bee298178b700081e788b
😎 Deploy Preview https://deploy-preview-12511--inventree-web-pui-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 96 (🔴 down 1 from production)
Accessibility: 81 (no change from production)
Best Practices: 100 (no change from production)
SEO: 78 (no change from production)
PWA: -
View the detailed breakdown and full score reports
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@SchrodingersGat SchrodingersGat added the User Interface Related to the frontend / User Interface label Jul 31, 2026
@matmair

matmair commented Jul 31, 2026

Copy link
Copy Markdown
Member

This approach leads to differing behaviors when a user shares the link to the page they currently have open - user 1 sees the nav, user 2 not; the filter, ordering etc need to be somewhere in the url path so that behavior is consistent and repeatable

I like the overall approach; the implementation should stire in a way where the logic is implemented in the generic components so that plugins do not need to re-implement all this logic. Similar to the approach that is taken with the InvenTreeTable component

@matmair matmair left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

User Interface Related to the frontend / User Interface

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FR] Add Next and Previous Icon to switch easily between 2 objects

3 participants