Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: prev next button for detail and edit views #9165

Merged
merged 91 commits into from
Aug 21, 2023

Conversation

adguernier
Copy link
Contributor

@adguernier adguernier commented Aug 7, 2023

Problem

Some users want to navigate to the previous and next item in a list without going back to the list.

Solution

Create a ListIdsContextProvider, which fetches all the list and stores only an array of ids in it. It can take optional filters and sort params. If not given, it uses the params from the store (${resource}.listParams), or the default ones.

Create a prev/next component. It creates a ListIdsContextProvider. Using the RecordContext, it looks up the current record id in the list of ids, determines the previous and next id, and forges the link to the next page (either a show or an edit page, depending on the current route)

Todo

  • add context and contextProvider to fetch ids according to the filters and sort parameters
  • add a PrevNextButton component that consume the above context and display links to navigate between resources
  • move code above into the PrevNextButton component and make it works
  • write some stories for PrevNextButton
  • write JS DOC for PrevNextButton
  • write unit tests for PrevNextButton
  • Extract the logic in a dedicated hook called useNextPrevController
  • write PrevNextButton documentation
  • write useNextPrevController documentation

@adguernier adguernier added the WIP Work In Progress label Aug 7, 2023
Copy link
Member

@fzaninotto fzaninotto left a comment

Choose a reason for hiding this comment

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

I think you're headed in the wrong direction

packages/ra-core/src/controller/list/ListIdsContext.ts Outdated Show resolved Hide resolved
packages/ra-ui-materialui/src/button/PrevNextButton.tsx Outdated Show resolved Hide resolved
packages/ra-ui-materialui/src/button/PrevNextButton.tsx Outdated Show resolved Hide resolved
packages/ra-ui-materialui/src/button/PrevNextButton.tsx Outdated Show resolved Hide resolved
Copy link
Member

@fzaninotto fzaninotto left a comment

Choose a reason for hiding this comment

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

Yep, that's the right direction!

packages/ra-ui-materialui/src/button/PrevNextButton.tsx Outdated Show resolved Hide resolved
packages/ra-ui-materialui/src/button/PrevNextButton.tsx Outdated Show resolved Hide resolved
packages/ra-ui-materialui/src/button/PrevNextButton.tsx Outdated Show resolved Hide resolved
docs/PrevNextButtons.md Outdated Show resolved Hide resolved
docs/PrevNextButtons.md Outdated Show resolved Hide resolved
packages/ra-core/src/controller/usePrevNextController.ts Outdated Show resolved Hide resolved
@fzaninotto fzaninotto merged commit 0615bcb into next Aug 21, 2023
8 checks passed
@fzaninotto fzaninotto deleted the feat-prev-next-button-for-detail-views branch August 21, 2023 08:36
@fzaninotto fzaninotto added this to the 4.14.0 milestone Aug 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
RFR Ready For Review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants