I am new using admin-on-rest framework, I need to make nested form working.
I have two models show and song.show() can have multiple songs. I have show edit form it will work as expected.
I need to add a song form inside show edit form, so I can add multiple songs for each show.
I tried all ways but i am not able to get it done.
This is my code:
<Edit title="Edit Show" {...this.props}>
<SimpleField>
<TextInput source="name" style={{ display: 'inline-block' }} />
//here need to add song add form without reloading page
//this is songs grid
<ReferenceManyField reference="songs" target="show_id" label="Set List" perPage={5} >
<Datagrid>
<TextField source="song_name" />
<EditButton />
<DeleteButton />
</Datagrid>
</ReferenceManyField>
//Here need to add song form, so i can add songs
</SimpleField>
</Edit>
How can I achieve this?
Not sure if that answers your question.. if songs pre-exist then you just need to do that:
<Edit title="Edit Show" {...this.props}>
<TextInput source="name" style={{ display: 'inline-block' }} />
<ReferenceArrayInput label="Songs" source="songs_property_on_show" reference="songs" allowEmpty>
<SelectArrayInput optionText="song_name" translate={false}/>
</ReferenceArrayInput>
</Edit>
if you want to create them on the fly while you are creating the show or in other words have a form inside the other this needs to be done in a custom way (using redux-form) as commented under my question: how to create an entity inside another in the same form using admin-on-rest?
Related
In react-admin we have ReferenceManyField. It would be fantastic to have also a component called ReferenceManyInput, with a functionallity very similar to the ArrayInput component (add, remove buttons) but with reference to a resource.
¿Does any one know if they have intention to include it or is there any workaround to achieve this?
The use case is:
I have a form for creating/editing an entity where one of its properties is an array of other related entities. I would like to add and/or remove new elements to that array and when submitting the main entity, it creates/updates/remove the related entity and the main entity.
Maybe I am asking for too much...
Thanks in advance
You're in luck: <ReferenceManyInput> was just published as part of React-admin Enterprise Edition. It works just like ReferenceManyField:
import {
Edit,
SimpleForm,
TextInput,
NumberInput,
ReferenceInput,
SelectInput,
} from 'react-admin';
import { ReferenceManyInput } from '#react-admin/ra-relationships';
const ProductEdit = () => (
<Edit mutationMode="optimistic">
<SimpleForm>
<TextInput source="name" />
<NumberInput source="price" />
<ReferenceInput source="category_id" reference="categories" />
<ReferenceManyInput reference="variants" target="product_id">
<SimpleFormIterator inline>
<TextInput source="sku" />
<SelectInput source="size" choices={sizes} />
<SelectInput source="color" choices={colors} />
<NumberInput source="stock" defaultValue={0} />
</SimpleFormIterator>
</ReferenceManyInput>
</SimpleForm>
</Edit>
);
The result looks like:
Check https://marmelab.com/ra-enterprise/modules/ra-relationships#referencemanyinput for details.
I have a question regarding react-admin. So I'm building this admin List which Hasura-graphQL. I am able to render Images with the ImageField component which I am using:
<ImageField label="Image" source="image" sortByOrder="DESC"/>
And which I have no problems rendering. But the issue comes when I need to render a video that comes in a URL from my graphQL schema. Something like this:
"video": "https://myappvideo.blob.core.windows.net/posts/post_93753139-524a-4c85-a0fc-d40b47bd95f5.mp4?se=2030-12-31&sp=rwdlac&sv=2018-03-28&ss=btf&srt=sco&sig=oeyHYsiWC79a1z7fcgsPPdJzeC499t%2BwPkbImcctpJE%3D",
"id": 471
},
{
"video": null,
"id": 493
},
{
"video": "https://myappvideo.blob.core.windows.net/posts/post_f9c59f2f-3d2e-4c63-ae1e-65e5324866ad.mp4?se=2030-12-31&sp=rwdlac&sv=2018-03-28&ss=btf&srt=sco&sig=oeyHYsiWC79a1z7fcgsPPdJzeC499t%2BwPkbImcctpJE%3D",
"id": 476
},[...]
How can render videos in my react-admin list? Something where I can show the videos and I can click and reproduce?
React-admin has a way to render Images but I can see something similar for videos.
Any help would be appreciated a lot!
EDIT
This is how I'm actually trying to make this work:
<Datagrid>
<TextField label="Post ID" source="id" sortByOrder="ASC" />
//I am using FileField for this, but it does not work
<FileField label="Content" source="video" rel="video" sortByOrder="ASC" />
<TextField label="Content Type" />
<UserSum source="id" />
<SimpleForm {...props} label="Flagged">
<ApproveData source="id" />
</SimpleForm>
<DateField label="Posted On" source="createdAt" showTime />
<PostListActionToolbar>
<ShowButton label="Details" color="secondary" />
<EditButton label="Archive" color="secondary" />
</PostListActionToolbar>
</Datagrid>
Ok, I just figure out how to do this. Indeed react-admin does not have a way to render videos. So in this case you'll have to create your own component.
Step 1
Is to create the function:
const VideoField = (props) => {
const record = useRecordContext(props);
return <video src={`${record.video}`} controls width="320" height="240"></video>;
}
In this case, you'll have to interpolate the video record inside the video tag. I added the controls and the width and height to add more view on the video
Step 2
You can add a default label into it like this:
VideoField.defaultProps = { label: 'Video' };
This is necessary since it will label your content on the top side of the list.
Step 3
Then add your function in to a component inside the datagrid and you'll be having something like this:
Add it like this on your datagrid
<Datagrid>
<TextField label="Post ID" source="id" sortByOrder="ASC" />
<VideoField source="video" />
<TextField label="Content Type" />
</Datagrid>
What I have.
I have few resources in my project -> users and user_activity.
Edpoint for getting user_activity looks like this:
curl base_url/rpc/user_activity?id=user_id -H "Content-Type: application/json" -X GET
Some React admin code
<Resource
name="user"
options={{ label: 'Users' }}
list={ UsersList }
create={ UsersCreate}
edit={ UsersEdit }
show={ UsersShow }
/>
<Resource name="user_activity"/>
What I need.
On the edit and show User page to put the button - "Activity", onclick on which I need to go to another page and show there table of User's Activity according to user_id.
I was thinking that for showing data from user_activity reasource I can use or new useQuery hook, but it should get somehow user_id as an argument, then how to pass it? Also was cheking as I understood it shows the data connected by the key from different resource but it show it at the same component and I need it to be on separate page.
How to do it?
What do you think is the best way to create a page and with what component inside in order to show the user_activity by user_id from another page?
Can you use a "ReferenceManyField" ?
I do something very similair using tabs instead of a new page.
For example:
<TabbedShowLayout>
<Tab label="activity" path="activity">
<ReferenceManyField
addLabel={false}
reference="activity"
target="user_id"
sort={{ field: 'Date', order: 'DESC' }}
>
<Datagrid>
<DateField source="Date" label="Date" showTime />
<TextField source="Type" label="Type" />
<TextField source="Result" label="Result" />
</Datagrid>
</ReferenceManyField>
</Tab>
</TabbedShowLayout>
Don't forget to add "activity" to your resources in
My dataprovider translate it to:
http://localhost:3001/activity?filter=%7B%22user_id%22%3A%XXXXX%22%7D&range=%5B0%2C24%5D&sort=%5B%22Date%22%2C%22DESC%22%5D
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.
I am new to AOR and redux-sagas and I am currently working on a list view drag-and-drop and upload capability. I want the user to be able to drag and drop files and see current upload progress and status from the List view.
The prototype of the component looks like this:
// ...
<Dropzone onDrop={this.onDrop} onDragLeave={this.onDragLeave} onDragEnter={this.onDragEnter} ref={(node) => {this.dropzoneRef = node;}} disableClick disablePreview style={{}}>
// Dropped files will appear here, with the upload progress
<Card style={{marginBottom: "1em"}}>
<CardTitle>Picture.jpg</CardTitle>
<CardText>
// The progress bar will show the upload progress
<LinearProgress value={50} mode="determinate" />
</CardText>
</Card>
<List {...props} actions={<FileActions onUploadClick={() => {this.dropzoneRef.open()}} />}>
<Datagrid>
<TextField source="name" />
<DateField source="createdAt" />
<EditButton />
</Datagrid>
</List>
</Dropzone>
the onDrop callback receives the dropped files, and that's where the upload needs to be handled. That's where I am bit puzzled about how I should handle the problem.
I understand I have to decorate my REST client in order to be able to upload my files. But how can I plug some functions in order to send the upload progress of each files to my component?