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.

Sign up for GitHub

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

Jump to bottom

[Doc] Fix Link to filtered list snippet incorrectly requires all query parameters #5401

Merged
merged 1 commit into from
Oct 15, 2020
Merged

[Doc] Fix Link to filtered list snippet incorrectly requires all query parameters #5401

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 2 additions & 11 deletions docs/List.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -812,7 +812,7 @@ You can change the filters by updating the query parameter, e.g. using the `<Lin

### Linking To A Pre-Filtered List

As the filter values are taken from the URL, you can link to a pre-filtered list by setting the query parameter.
As the filter values are taken from the URL, you can link to a pre-filtered list by setting the `filter` query parameter.

For instance, if you have a list of tags, you can display a button for each category to link to the list of posts filtered by that tag:

Expand All @@ -821,7 +821,6 @@ For instance, if you have a list of tags, you can display a button for each cate
import * as React from "react";
import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';
import { stringify } from 'query-string';

const LinkToRelatedProducts = ({ record }) => {
const translate = useTranslate();
Expand All @@ -831,13 +830,7 @@ const LinkToRelatedProducts = ({ record }) => {
component={Link}
to={{
pathname: '/posts',
search: stringify({
page: 1,
perPage: 25,
sort: 'id',
order: 'DESC',
filter: JSON.stringify({ category_id: record.id }),
}),
search: `filter=${JSON.stringify({ category_id: record.id })}`,
}}
>
All posts with the category {record.name} ;
Expand All @@ -849,8 +842,6 @@ const LinkToRelatedProducts = ({ record }) => {

You can use this button e.g. as a child of `<Datagrid>`. You can also create a custom Menu button with that technique to link to the unfiltered list by setting the filter value to `{}`.

**Tip**: You have to pass *all* the query string parameters - not just `filter`. That's a current limitation of react-admin.

### The `<Filter>` Button/Form Combo

![List Filters](./img/list_filter.gif)
Expand Down
4 changes: 0 additions & 4 deletions examples/demo/src/categories/LinkToRelatedProducts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,6 @@ const LinkToRelatedProducts: FC<FieldProps<Category>> = ({ record }) => {
to={{
pathname: '/products',
search: stringify({
page: 1,
perPage: 20,
sort: 'reference',
order: 'ASC',
filter: JSON.stringify({ category_id: record.id }),
}),
}}
Expand Down
2 changes: 0 additions & 2 deletions examples/demo/src/segments/LinkToRelatedCustomers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,6 @@ const LinkToRelatedCustomers: FC<{ segment: string }> = ({ segment }) => {
to={{
pathname: '/customers',
search: stringify({
page: 1,
perPage: 25,
filter: JSON.stringify({ groups: segment }),
}),
}}
Expand Down