I am trying to reference category in my create and edit product page. Please find the code below:
const validateProduct = (values) => {
const errors = {};
if (!values.name) {
errors.name = ['Product name is required'];
}
if (!values.category) {
errors.category = ['Product category is required'];
}
return errors
};
export const ProductCreate = (props) => (
<Create {...props}>
<SimpleForm validate={validateProduct}>
<TextInput source="name" />
<ReferenceInput label="category" source="category._id" reference="categories">
<SelectInput optionText="name" />
</ReferenceInput>
<TextInput source="price" />
<LongTextInput source="description" />
<TextInput source="image" />
</SimpleForm>
</Create>
);
const ProductTitle = ({ record }) => {
return <span>Product {record ? `"${record.name}"` : ''}</span>;
};
export const ProductEdit = (props) => (
<Edit title={<ProductTitle />} {...props}>
<SimpleForm validate={validateProduct}>
<DisabledInput source="id" />
<TextInput source="name" />
<ReferenceInput label="category" source="category._id" reference="categories">
<SelectInput optionText="name" />
</ReferenceInput>
<TextInput source="price" />
<LongTextInput source="description" />
<TextInput source="image" />
</SimpleForm>
</Edit>
);
There are few issues with the ReferenceInput:
Validation does not work for ReferenceInput.
Existing category is not selected by default in the edit product page.
I want the category validation and category selection enabled in add/edit pages. How do I achieve that in React-Admin?
Thanks
Related
Hello i'm hiring for a solution my show doesn't work on the row of my table. The cursor doesn't change to let me click on a row and even if i click nothing happened. That's my code
//in App.tsx
<Admin dataProvider={DataProvider} authProvider={authProvider}>
<Resource name="users" list={UsersList} show={UserShow}/>
</Admin>
// in users.tsx
export const UsersList = () => {
// const isSmall = useMediaQuery((theme : any) => theme.breakpoints.down("sm"));
return (
<List filters={userFilters}>
<Datagrid>
<TextField source="id" />
<TextField source="firstname" />
<TextField source="lastname" />
<EmailField source="email" />
<TextField source="phone" />
<TextField source="candidatureStatus" />
<TextField source="created_at" />
</Datagrid>
</List>
);
};
export const UserShow = () => (
<Show>
<SimpleShowLayout>
<TextField label="test" source="email" />
<TextField source="firstname" />
<TextField source="lastname" />
</SimpleShowLayout>
</Show>
)
Even if i followed the tutorial on react admin i can't display a showScreen
If you want to open the Show form when clicking on a row in the List, you need to add:
<Datagrid rowClick="show">
https://marmelab.com/react-admin/Datagrid.html#rowclick
React admin - A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design. Open sourced and maintained by marmelab.
Clicking on any part of the row in PostList will open the editing form, how to make it possible to edit only by click the EditButton.
I make example for demonstration this behaviour codesandbox
posts.tsx
export const PostList = () => (
<List>
<Datagrid rowClick="edit">
<TextField source="id" />
<ReferenceField source="userId" reference="users">
<TextField source="name" />
</ReferenceField>
<TextField source="title" />
<EditButton />
</Datagrid>
</List>
);
App.tsx
const App = () => (
<Admin dataProvider={dataProvider}>
<Resource name="posts" list={PostList} edit={PostEdit} />
<Resource name="users" list={UserList} />
</Admin>
);
if i comment edit={PostList} edit button do not work
const App = () => (
<Admin dataProvider={dataProvider}>
<Resource name="posts" list={PostList} /*edit={PostEdit}*/ />
<Resource name="users" list={UserList} />
</Admin>
);
I want edit post only by click Edit Button
You need to remove rowClick="edit" from datagrid
export const PostList = () => (
<List>
<Datagrid> // remove rowClick="edit"
<TextField source="id" />
<ReferenceField source="userId" reference="users">
<TextField source="name" />
</ReferenceField>
<TextField source="title" />
<EditButton />
</Datagrid>
</List>
);
Is there any way to filter react admin lists by multiple sources, or to change the source on the front end with react admin? I've tried running the source as a state variable, but when updated it only adds to the query instead of replacing it.
Example filter list
const UserFilter = (props) => (
<Filter {...props}>
<TextInput label="Search By ID" source="uid" alwaysOn />
</Filter>
);
export const UserList = (props) => (
<List {...props} filters={<UserFilter />}>
<Datagrid>
<RichTextField label="User ID" source="uid" />
<RichTextField label="Email" source="email" />
<RichTextField label="Admin" source="isAdmin" />
<ShowButton label="" />
</Datagrid>
</List>
);
I want to hide other tag when i click the RadioButton in React..
When RadioButtonGroupInput clicked, i want to hide ReferenceInput tag
If you know how.. please comment ..
const UserEdit = ({ classes, ...props }) => (
<Edit {...props}>
<SimpleForm>
<TextInput source="username" validate={required()}/>
<TextInput source="email" validate={[required(),email()]}/>
<TextInput source="phoneNumber" validate={[required(),minLength(10),number()]}/>
<RadioButtonGroupInput label="Type"
source="userType"
choices={types}
optionText="id"
validate={required()}
onChange={(event,id) => (id === "COMPANY") ? console.log(id) : console.log(event)}/>
<ReferenceInput label="Company" source="company.id" reference="companies">
<SelectInput optionText="name" />
</ReferenceInput>
</SimpleForm>
</Edit>
);
You can integrate the useState() hook to coordinate with RadioButtonGroupInput. It lets us define a checked value and a setChecked function used specifically to update checked.
When the onChange() event-listener is triggered, we will toggle the checked value. Then we used checked to conditional render ReferenceInput
import React, { useState } from "react
const UserEdit = ({ classes, ...props }) => (
//creates a state-value and a state-updater function. Set default as false.
const [ checked, setChecked ] = useState(false)
<Edit {...props}>
<SimpleForm>
<TextInput source="username" validate={required()}/>
<TextInput source="email" validate={[required(),email()]}/>
<TextInput source="phoneNumber" validate={[required(),minLength(10),number()]}/>
<RadioButtonGroupInput
label="Type"
source="userType"
choices={types}
optionText="id"
validate={required()}
onChange={() => setChecked(!checked)}/> //set to opposite of current-value
//if not checked, then we will display ReferenceInput, if checked, hide.
{ !checked && (
<ReferenceInput label="Company" source="company.id" reference="companies">
<SelectInput optionText="name" />
</ReferenceInput>
)}
</SimpleForm>
</Edit>
);
Finally, I did it. see the following sources.
const UserCreate = ({ classes, ...props }) => {
const types = [
{id:'INDIVIDUAL'},
{id:'COMPANY'}
];
const [checked,setChecked] = useState(true);
const onClickRadioBtn = (event,id) => {
(id === "COMPANY") ? setChecked(false) : setChecked(true)
}
return(
<Create {...props}>
<SimpleForm>
<TextInput source="username" validate={required()}/>
<TextInput source="password" validate={required()}/>
<TextInput source="email" validate={[required(),email()]}/>
<TextInput source="phoneNumber" validate={[required(),minLength(10),number()]}/>
<RadioButtonGroupInput label="Type"
source="userType"
choices={types}
optionText="id"
validate={required()}
onChange={onClickRadioBtn}/>
{ !checked && (
<ReferenceInput label="Company" source="company.id" reference="companies">
<SelectInput optionText="name" />
</ReferenceInput>
)}
</SimpleForm>
</Create>
);
};
I want to access values of components. Because I'll use it to access to another data. For example;
<ArrayInput source='services'>
<SimpleFormIterator>
<ReferenceInput label="Service Type"
source="serviceType"
reference="servicetypes"
validate={required()}>
<SelectInput optionText={GAMMA_CONSTANTS.SOURCE_ID} />
</ReferenceInput>
{(this.state.serviceTypes && this.state.serviceTypes.length > 0) ?
this.state.serviceTypes.filter(serviceType => {
return serviceType.id === (**source="serviceType"**)
})[0]["datapointtype"].map((feature, index) => {
return <TextInput source={index} label="deneme" />
})
: null}
</SimpleFormIterator>
</ArrayInput>
I want to access it in the filter method. Is there a way to do that?
You can use something like this:
import { FormDataConsumer } from 'react-admin';
const PostEdit = (props) => (
<Edit {...props}>
<SimpleForm>
<BooleanInput source="hasEmail" />
<FormDataConsumer>
{({ formData, ...rest }) => formData.hasEmail &&
<TextInput source="email" {...rest} />
}
</FormDataConsumer>
</SimpleForm>
</Edit>
);
Reference: https://marmelab.com/react-admin/Inputs.html#hiding-inputs-based-on-other-inputs
You're not limited to hide/show things. In your case, you should be able to avoid using state and directly access formData.serviceTypes