I have a shopping list but I want to see the detail in the same list. With what element can I make the touch of the arrow to show me the detail.
List
<List {...props} >
<Datagrid rowClick="edit" expand={<ItemsProductos />}>
<TextField source="id" />
<TextField source="numero" label="Numero Comprobante" />
<DateField source="fecha" />
</Datagrid>
</List>
React-admin will pass the current record to the component used as expand prop, so you can write your <ItemProductos> component as follows:
const ItemProductos == ({ record }) => (
<span>{record.fecha}</span>
);
This is documented in the react-admin documentation:
https://marmelab.com/react-admin/List.html#expand
Related
I am trying to filter a list in react-admin.
Basically, I have a list of classes, that I want to filter by teacherId. However, the teacherId has to be fetched asynchronously.
The code looks like this:
const activitiesFilters = [
<TextInput key="search" source="q" label="Search an Activity" alwaysOn />,
]
export const ActivityList = (props) => {
const teacher = useCurrentTeacherProfile() // This is the asynchronous call
return (
<List
filters={activitiesFilters}
filter={{ authorId: teacher?.id }} // Here I am using the teacher ID to filter my list
{...props}
exporter={false}
>
<Datagrid rowClick="edit">
<TextField source="id" />
<TextField source="title" />
<TextField source="location" />
<DateField source="dateTime" />
</Datagrid>
</List>
)
}
The above code gives me this error:
Error: ActivityList suspended while rendering, but no fallback UI was specified. Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.
I tried adding a <Suspense /> component above the <List /> but it doesn't work.
And if I add the <Suspense /> component at the root, above the <Admin /> one, it breaks the navigation.
Is there a way I can filter my list with a parameter that is fetched asynchronously?
Thanks!
I wonder if the error does not come from the "?." typescript operator in "teacher?.id" that resolves to undefined in JS before your async call resolves.
So I'd resolve the code as follow:
import { Loading } from 'react-admin';
const activitiesFilters = [
<TextInput key="search" source="q" label="Search an Activity" alwaysOn />,
]
export const ActivityList = (props) => {
const teacher = useCurrentTeacherProfile() // This is the asynchronous call
if (!teacher) return <Loading/>
return (
<List
filters={activitiesFilters}
filter={{ authorId: teacher?.id }} // Here I am using the teacher ID to filter my list
{...props}
exporter={false}
>
<Datagrid rowClick="edit">
<TextField source="id" />
<TextField source="title" />
<TextField source="location" />
<DateField source="dateTime" />
</Datagrid>
</List>
)
}
I am trying to add bulk action capabilities to <MuiGridList> component in react-admin 2.9.7. While rendering table like this:
<List>
<Datagrid>
<TextField source="id" />
<TextField source="name" />
<EditButton />
</Datagrid>
</List>
Checkboxes are shown in the first column, corresponding to this demo https://marmelab.com/react-admin-demo/#/categories. That's awesome.
Then I have grid layout (which I am switching to dynamically from list view if that's important):
<List>
<MuiGridList
cellHeight={180}
cols={getColsForWidth(width)}
className={classes.gridList}
>
{ids.map(id => (
<GridListTile>
<Checkbox/>
<EditButton to={linkToRecord(basePath, data[id].id)}/>
<ThumbnailField record={data[id]}/>
<GridListTileBar
className={classes.tileBar}
title={data[id].name}
key={id}
/>
</GridListTile>
))}
</MuiGridList>
</List>
This looks like a demo at https://marmelab.com/react-admin-demo/#/products but how can I achieve the same bulk actions capabilities as in <Datagrid> component?
I'm using react-admin 2.6.2 and trying currently to edit the layout of the List view. At first I wanted to remove action buttons completely, and I found the answer here at Stackoverflow. I thought, that using empty CardActions would be enough, but there's still empty ListToolbar taking space before my <List> starts. The toolbar is created by List automatically, is there any way to for example edit styles of that toolbar so I could hide it or set the height to 0px?
I guess one option is to create my custom List.js based on this, but it would be best to use the original source files, so they are also updated when there are new updates to react-admin.
JS code:
const NoneActions = props => (
<CardActions />
);
class DemoList extends Component {
render() {
return (
<div>
<List
{...props}
actions={<NoneActions />}
>
<Datagrid>
<TextField source="name" />
<ShowButton />
</Datagrid>
</List>
</div>
);
}
}
Here's the toolbar in DOM:
<div class="MuiToolbar-root-519 MuiToolbar-regular-521 MuiToolbar-gutters-520 ListToolbar-toolbar-293">
try: <List actions={null} {...props}> the empty space before the list disappears.
Using React-admin, I am using the ShowController component, which gives me more freedom to customize the ShowView. However, I would like to keep seeing the labels in the TextFields, but, they are gone.
This piece of code shows how I am using the ShowController and, it works partially: only show the record values, not the labels (I also tried without the prop "label", it doesn't work neither).
const OrderShow = props => {
return (<ShowController {...props}>
{controllerProps => {
return (
<Grid container spacing={8}>
<Grid item xs={3}>
<TextField label="ID" source="id" {...controllerProps} />
...
What is missing to show the labels as in the ShowView standard component?
TextFields' labels are usually filled by their source property.
If you want to use <ShowController> component with custom layout, I suggest you to create another custom component and use it inside of <Show>, <ShowView> or <SimpleShowLayout>.
I wrapped the fields with SimpleForm component to be able to show their labels and hide the Toolbar with custom CardActions.
Example:
const FormToolbar = () => (
<CardActions style={{display: 'none'}}>
</CardActions>
);
const FormDiv = ({controllerProps, ...props}) => (
<Grid container spacing={24}>
<Grid item xs={12}>
<SimpleForm toolbar={<FormToolbar/>}>
<TextField {...props} record={controllerProps.record} source="name"/>
</SimpleForm>
</Grid>
</Grid>
);
const OrderShow = props => (
<ShowController {...props} title="Order">
{controllerProps =>
<Show actions={<ShowActions pageType="show" />} {...props} {...controllerProps}>
<SimpleShowLayout>
<FormDiv controllerProps={controllerProps} />
</SimpleShowLayout>
</Show>
}
</ShowController>
);
export default OrderShow;
I have a react-admin based site working nicely.
Though i have an issue with the sidebar menu. If i click one of the items twice it clears all the form inputs. This is a link to an edit form of the resource item (in this case the current user profile):
<MenuItemLink to={"/users/" + user.id} primaryText="Profile" leftIcon={createElement(UserIcon)} onClick={onMenuTap}/>
with resource that looks like:
<Resource name="users" list={UserList} edit={UserEdit} create={UserCreate} icon={UserIcon} />
where UserEdit is
export const UserEdit = (props) => {
<Edit title={<UserEmail />} actions={<UserEditActions />} {...props}>
<SimpleForm validate={validateUserSave}>
<DisabledInput source="email"/>
<TextInput label="First Name" source="firstName" />
<TextInput label="Last Name" source="lastName" />
...
on first click all the inputs are populated from my REST api, but on 2nd tap (menu item selected) - all the form values are cleared...
Any ideas?
It is indeed a bug, I opened an issue on React Admin:
[#2291] Double-click on a Icon from the Menu reset the edition form
[#2322] Fix resetform when navigating to same page
A fix will be published with react-admin#2.3.2!
Thanks for reporting the issue.