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

it should be possible to disable the Empty page in listview #4543

Closed
dobe opened this issue Mar 17, 2020 · 8 comments
Closed

it should be possible to disable the Empty page in listview #4543

dobe opened this issue Mar 17, 2020 · 8 comments

Comments

@dobe
Copy link

dobe commented Mar 17, 2020

Is your feature request related to a problem? Please describe.
it is currently. not possible to just disable the Empty view in the ListView in order to re-use user defined create actions also if there are no results

Describe the solution you'd like
in order to disable the Empty page, we could just set the property to something falsy and then react admin should fallback to render the empty list page along with the actions.

for clarification link to the code https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/list/List.js#L171-L176

@JulienMattiussi
Copy link
Contributor

Maybe you can set a custom Pagination object and them defined it a limit prop to specify an object with the actions you want when the list is empty.

Something like this:

import { List, Pagination } from 'react-admin';

const PaginationWithCustomEmpty = ({limit, ...props}) => (
   const SomeObjectWithActions = () => (<>/*something*/</>);
   return (<Pagination {...props} limit={<SomeObjectWithActions/>} />);

<List pagination={<PaginationWithCustomEmpty />}>

Does it solve your problem @dobe ?

@fzaninotto
Copy link
Member

You can use your custom ListActions in a custom EmptyPage. Just define it as explained in the doc:

const Empty = (props) => (
    <MyListActions {...props} >
);

const ProductList = props => (
    <List empty={<Empty />} {...props}>
        ...
    </List>
);

In the general case, our impression is that the default List view doesn't make sense for empty lists, that's why we added the Empty element. I don't think that allowing to display the default list view when the list is empty would be better than defining a custom Empty page.

Let's leave this issue open for discussion to see if we implement the default list view on empty=false, or if we change nothing.

@dobe
Copy link
Author

dobe commented Mar 19, 2020

You can use your custom ListActions in a custom EmptyPage. Just define it as explained in the doc:

jep this is our current workaroudn ... have defined a custom empty page with our custom actions, however this is a lot of boilerplate to handle this case we need to do for every create view.

In the general case, our impression is that the default List view doesn't make sense for empty lists

if you have custom create buttons in your actions like we have, those are not displayed if no items are there and we need to add them by hand. it would be much easier to just enable the normal list view, which is imho also more consistent when multiple actions are defined.

@djhi
Copy link
Contributor

djhi commented Apr 2, 2020

// src/ui/List.js
import { List as RaList } from 'react-admin';

const Empty = (props) => (
    <MyListActions {...props} />
);

// My List with my own default props
const List = props => (
    <RaList empty={<Empty />} {...props}>
        // ...
    </RaList>
);

export default List;

// in src/products/ProductList.js
import List from '../ui/List'

const ProductList = props => (
    <List {...props}>
        // ...
    </List>
);

@jtrezza
Copy link

jtrezza commented May 14, 2020

@dobe Try passing a filterDefaultValues prop to the list. That will disable the empty page.

@gary-menzel
Copy link

I have another use case for this (i.e. something like empty={false})...

It is when there is a lot of information stored and no suitable "default" view that would make sense to the users. I have a back end that serves an empty array if there is no search or filter - so I still want the Filter bar displayed and all the allowed Actions. I may even have a "bulk import" action that should still display (and not want them to create things manually).

Maybe I just have to bypass the React Admin framework (i.e. not adding a Create component into the Resource definition) and add my own "Create" button so that the hasCreate (combined with checks for an empty state) won't trigger all this behaviour?

Or possibly use my own custom <ListView /> component that to either skips over that logic or implements a prop to allow this behaviour. But it seems a shame to have to duplicate all of that wonderful code just for this small feature.

@jtrezza That sort of worked for me but, because I am heavily manipulating the filters in my Filter component, the "reset" I have on my Search filter causes the same problem when I return to my "empty" list (which is only empty because no filter criteria has been supplied). So, unfortunately, I have to look at other workarounds.

@InfiniteRandomVariable
Copy link

InfiniteRandomVariable commented Jul 27, 2020

In my case, my Listview uses a calendar as a filter for displaying daily expense. A user visits the page in the beginning of each day, it will display an empty default page which will replace my calendar filter. The list won't be available for viewing.

Disabling the default empty page with the intended Listview with its filters and actions be still available when the search result is non, that will be great.

I follow this tut which supports my use case, but it isn't as straightforward as with the deprecation of "react-router-redux" and its replacement "connected-react-router".

https://marmelab.com/blog/2019/02/07/react-admin-advanced-recipes-creating-and-editing-a-record-from-the-list-page.html

Thanks for the pointers.

@fzaninotto
Copy link
Member

fixed by #5165

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants