I want to add a column on List in react admin and it has to have two actions. Now, each action is a column and I can't add a header title.
For example:
<List>
<Datagrid>
<TextField label="Id" source="order.id" />
<DateField label="Inicio" source="startDate" />
<CheckIcon
color="action"
onClick={(e) => confirmOrder(e)}
/>
<CancelIcon
color="action"
onClick={(e) => cancelOrder(e)}
/>
</Datagrid>
</List>
I want to create a column "Actions" and add both CheckIcon and CancelIcon.
Wrap them inside a custom field:
const OrderActions = () => (
<>
<IconButton onClick={(e) => confirmOrder(e)}>
<CheckIcon color="action" />
<IconButton>
<IconButton onClick={(e) => cancelOrder(e)}>
<CancelIcon color="action" />
<IconButton>
</>
)
Then:
<List>
<Datagrid>
<TextField label="Id" source="order.id" />
<DateField label="Inicio" source="startDate" />
<OrderActions />
</Datagrid>
</List>
Related
In React-Admin (v 4.2.4) I'm using 3 resources for a specific view (as showed in the following image also if there's a fourth table).
In my JS file I have this component:
export const RichiestaMerceModifica = () => {
return (
<Edit actions={false} resource="richieste_merce_intestazioni">
<SimpleForm toolbar={<CustomToolbar />}>
<List actions={false} pagination={false}>
<ReferenceManyField reference="richieste_merce_dettagli" target="id_rm" source="id">
<Datagrid>
<TextField source="id_rm" />
<ReferenceField source="id_prod" reference="prodotti_acquisto" label="Prodotto">
<TextField source="nome" />
</ReferenceField>
<ReferenceField source="id_prod" reference="prodotti_acquisto" label="Descrizione" link={false}>
<TextField source="descr" />
</ReferenceField>
<TextField source="qta" label="Q.ta" />
<ReferenceField reference="prodotti_acquisto" source="id_prod" label="Imp. unitario" link={false}>
<FunctionField render={record => `${record.imp} €`} />
</ReferenceField>
<BooleanField source="ordinato" />
</Datagrid>
</ReferenceManyField>
</List>
</SimpleForm>
</Edit>
);
}
All required fields are shown correctly but in the List there are all records from richieste_merce_dettagli resource (not only the correct ones as expected, having defined target="id_rm" source="id").
In the following image is shown the RichiestaMerceModifica Component and I'm in the view for ID 5 so in the List should be only products where "id rm" is 5.
In Admin component I have added
<Resource name="richieste_merce_dettagli" />
<Resource name="richieste_merce_intestazioni" options={{ label: 'Richieste Merce' }} list={RichiesteMerceList} icon={AddCircleOutline} create={RichiestaMerceNuovo} edit={RichiestaMerceModifica} />
<Resource name="prodotti_acquisto" options={{ label: 'Prodotti acquisto' }} list={ProdottiAcquistoList} icon={Summarize} create={ProdottoAcquistoNuovo} edit={ProdottoAcquistoModifica} />
Where is my mistake?
You're not supposed to use a <List> component inside an <Edit> component. <List> and <Edit> are page components, and there can be only one per page.
The code should work without it:
export const RichiestaMerceModifica = () => {
return (
<Edit actions={false} resource="richieste_merce_intestazioni">
<SimpleForm toolbar={<CustomToolbar />}>
- <List actions={false} pagination={false}>
<ReferenceManyField reference="richieste_merce_dettagli" target="id_rm" source="id">
<Datagrid>
<TextField source="id_rm" />
<ReferenceField source="id_prod" reference="prodotti_acquisto" label="Prodotto">
<TextField source="nome" />
</ReferenceField>
<ReferenceField source="id_prod" reference="prodotti_acquisto" label="Descrizione" link={false}>
<TextField source="descr" />
</ReferenceField>
<TextField source="qta" label="Q.ta" />
<ReferenceField reference="prodotti_acquisto" source="id_prod" label="Imp. unitario" link={false}>
<FunctionField render={record => `${record.imp} €`} />
</ReferenceField>
<BooleanField source="ordinato" />
</Datagrid>
</ReferenceManyField>
- </List>
</SimpleForm>
</Edit>
);
}
I have a react-admin show page configured with some ReferenceManyField components like this one:
<ReferenceManyField
reference="children"
target="userId"
label="Enfants"
>
<Datagrid
rowClick="edit"
>
<TextField
source="lastName"
label="Nom"
/>
<TextField
source="firstName"
label="Prénom"
/>
<DateField
source="birthday"
label="Date de naissance"
showTime={false}
/>
<TextField
source="phoneNumber"
label="Tél."
/>
</Datagrid>
</ReferenceManyField>
It works, but the rendered tab are content sized:
My question is quite simple: How to make it full width?
I tried the fullWidth option on ReferenceManyField without any effect.
As the title says. I need to use a ReferenceField inside of a ArrayInput/SimpleFormIterator. I keep getting the following error:
TypeError: Cannot read property 'replace' of undefined
Versions:
react-admin: 3.2.3
react: 16.12.0
Here is a snippet of the code:
<ArrayInput source="specialties" label="">
<SimpleFormIterator disableAdd>
<ReferenceField label="Specialties Link" source="ID" reference="specialty" link="show" >
<TextField source="ID" />
</ReferenceField>
<TextInput source="vendorSpecialtyText" label="Vendor Specialty Text" />
</SimpleFormIterator>
</ArrayInput>
There is a resource called specialty and this works inside of an ArrayField in other parts of the application like so:
<ArrayField source="specialties" label=" Specialties">
<SingleFieldList>
<ReferenceField label="Specialties Link" source="ID" reference="specialty" link="show" >
<TextField source="ID" />
</ReferenceField>
</SingleFieldList>
</ArrayField>
Not sure if this just isn't possible within this framework or if I'm implementing this wrong. If there is a way to fix this or a different want to go about this please let me know! Thanks.
From the documentation:
Note: SimpleFormIterator only accepts Input components as children. If you want to use some Fields instead, you have to use a <FormDataConsumer> to get the correct source,..."
import { ArrayInput, SimpleFormIterator, DateInput, TextInput, FormDataConsumer } from 'react-admin';
<ArrayInput source="backlinks">
<SimpleFormIterator disableRemove >
<DateInput source="date" />
<FormDataConsumer>
{({ getSource, scopedFormData }) => {
return (
<TextField
source={getSource('url')}
record={scopedFormData}
/>
);
}}
</FormDataConsumer>
</SimpleFormIterator>
</ArrayInput>
or include input fields
<ArrayInput source="specialties" label="">
<SimpleFormIterator disableAdd>
<ReferenceInput label="Specialties Link" source="ID" reference="specialty">
<SelectInput optionText="{Your description field}" />
</ReferenceInput>
<TextInput source="vendorSpecialtyText" label="Vendor Specialty Text" />
</SimpleFormIterator>
</ArrayInput>
I am using react-admin to work for my program.
when I use the ,I do not know how to set the backgroundColor of row when i click it.
const rowStyle = record => ({
backgroundColor:
record.id === window.location.pathname.split('/')[2] ? '#e0e0e0' : '',
});
<List
{...props}
bulkActions={false}
actions={<ListActions />}
exporter={exporter}
pagination={<Pagination />}
filters={<SaleInventoryFilter />}
>
<Datagrid rowClick="show" rowStyle={rowStyle}>
<TextField source="item.code" label="Item code" />
<TextEllipsisField
source="item.name"
label="Item name"
cellClassName={classes.name}
/>
<TextField source="stockLocation.name" label="Stock location" />
<TextField source="batch" />
<TextField source="leadTime" label="Lead time (days)" />
<TextField source="onHandQty" label="On hand" />
<TextField source="availableQty" label="Available" />
<TextField source="reservedQty" label="Reserved" />
<DateField
source="updatedAt"
label={`Updated At (${getOffsetByTimezone()})`}
/>
<OperationButton />
</Datagrid>
</List>
Above is my work, but it works always have delay.
It need to wait re-render of component.
I expect when I click the row the row backgroundColor will change to red immediately whether the component have re-render.
I am building a profile page and have the following components.
1. I have a image picker for the profile picture
2. ListView with text fields and a button
And i have a bottom bar navigation. With the current implementation the bottom tab bar hides the button at the bottom, and i am not able to figure out a way to solve this. Any help would be appreciated. Below is the code snippet,
render(){
let {phone} = this.state,
{studentName}=this.state,
{studentClass}=this.state,
{bloodGroup}=this.state,
{parentName}=this.state,
{email}=this.state,
{sibling}=this.state,
{siblingClass}=this.state,
{address}=this.state;
return(
<View style={styles.studentInfo}>
<TextField
label='Student Name'
value={studentName}
onChangeText={(studentName)=>this.setState({studentName})}
/>
<TextField
label='Class'
value={studentClass}
onChangeText={(studentClass)=>this.setState({studentClass})}
/>
<TextField
label='Blood Group'
value={bloodGroup}
onChangeText={(bloodGroup)=>this.setState({bloodGroup})}
/>
<TextField
label='Parent Name'
value={parentName}
onChangeText={(parentName)=>this.setState({parentName})}
/>
<TextField
label='Phone Number'
value={phone}
onChangeText={(phone)=>this.setState({phone})}
/>
<TextField
label='E mail'
value={email}
onChangeText={(email)=>this.setState({email})}
/>
<TextField
label='Sibling Studying in the school'
value={sibling}
onChangeText={(sibling)=>this.setState({sibling})}
/>
<TextField
label='Class'
value={siblingClass}
onChangeText={(siblingClass)=>this.setState({siblingClass})}
/>
<TextField
label='Address'
value={address}
onChangeText={(address)=>this.setState({address})}
/>
<Button
style={{backgroundColor: '#3e9cd3'}}
textStyle={{fontSize: 18}}
onPress={()=> this.handleButtonPress()}>
Save
</Button>
</View>
);
}