I have a list of resources, which I understood that must be the entities for which we have the CRUD operations:
The problem is that inside the entity page I want to use 2 tabs (components), one for the list of the entity and one for a list of aggregated data based on the entity. The problem is with the second, because I was required to write a custom graphql query, but both components use the same source (first list).
<ProtectedResource
name={RESOURCES.Product}
list={Product.homepage}
icon={StarHalfIcon}
options={{ label: translate('Products') }}
/>
Products.js is a hook which returns this:
<TabbedForm redirect={`/${RESOURCES.Product}`}>
<FormTab label={translate('Lines')}>
<ReferenceManyField reference={RESOURCES.Product} target="" label="" fullWidth {...paginationProps('id')}>
<ProductsList {...props} />
</ReferenceManyField>
</FormTab>
<FormTab label={translate('Aggregated Lines')} path="/aggregates">
<ReferenceManyField reference={RESOURCES.Product} target="" label="" fullWidth {...paginationProps('id')}>
<ProductAggregatesList {...props} />
</ReferenceManyField>
</FormTab>
</TabbedForm>
In reality, should hit 2 queries: getAllProducts and getAggregatedProducts. Based on fetchType and resource, I can rewrite the query which I want to execute (in frontend), but I can not catch the data and send to the specific component.
if (fetchType === GET_MANY_REFERENCE && resource === RESOURCES.Product)
return getAggregatedProducts(resource, params);
And GET_LIST fetch type will be used for first tab.
If I create another resource, for AggregatedProducts, there will throw an error because AggregatedProducts is not known in backend's schema.
Related
I'm using react-admin v3.15 (because reasons). I am trying to create a simple Create form that populates a dropdown with values from a resource. For some reason I have a one dropdown that works and another that does not. They call different APIs but they literally return similar things. What are some things that might be implicitly known that I have to watch out for that might cause this?
export const CreateFormTest = () => {
return (
<SimpleForm>
<ReferenceInput
label="Foo 1"
source="foo1"
reference="foo1"
fullWidth
>
<SelectInput optionText="value" />
</ReferenceInput>
<ReferenceInput
label="Foo 2"
source="foo2"
reference="itemResource"
fullWidth
>
<SelectInput optionText="value" />
</ReferenceInput>
</SimpleForm>
);
}
I've checked the network calls and they literally return the same headers, body, etc. The resource are there too. There is a dataProvider function that manipulates the request / response but nothing that should affect the working endpoint specifically.
Any help / hints or common things to look out for when doing this would be appreciated.
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 list of agents and I am displaying them in a datagrid. After adding the search with filter option, any search does not update the items in datagrid as shown at example. I have a DRF based backend and using 'ra-data-drf' as dataprovider for the react-admin app.
Below is my code for the search component.
const AgentFilter = (props) => (
<Filter {...props}>
<TextInput label="Search" source="name" alwaysOn />
<ReferenceInput label="Agent" source="id" reference="agents" allowEmpty>
<SelectInput optionText="name" />
</ReferenceInput>
</Filter>
)
Does the search function depend on the filtering capabilities of the backend? What am I missing? Attached is a screenshot where the search does not update the datagrid below.
As the 'filtering' section of the docs say "is intended to work with django-filter's DjangoFilterBackend ". On enabling filtering on the viewset, react-admin started to filter the fields as expected.
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 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?