Independent "Submit" button for tabbed form in Create - admin-on-rest

I already made 2 types of create page:
Create single record.
Import multiple records from xlsx file.
Now I want to implement 2 independent buttons:
Save
Import
meaning that when I click on button 1, only button 1 works.
Here is my code:
<Create {...this.props}>
<TabbedForm toolbar="">
<FormTab label="Single record">
<ReferenceInput label="Centre" source="centre" reference="centre" sort={{ field: 'name', order: 'ASC' }} allowEmpty>
<SelectInput optionText="name" />
</ReferenceInput>
<TextInput source="fullname" />
<TextInput source="serial " />
<TextInput source="birthday" />
<TextInput source="join_date" />
<TextInput source="remark" />
<SaveButton label="Save" redirect="show" submitOnEnter={true} />
</FormTab>
<FormTab label="Import from xlsx">
<ReferenceInput label="Centre" source="centre_import" reference="centre" sort={{ field: 'name', order: 'ASC' }} allowEmpty>
<SelectInput optionText="name" />
</ReferenceInput>
<label id="customLabel">
<input id="upload" ref={(input) => { this.textInput = input; }} type="file" hidden
onClick={(event)=> {
event.target.value = null;
}}
onChange={
(event) => {
this.fileName.textContent = event.target.files[0].name;
}
}
/>
<FlatButton primary label="Select file" icon={<ActionFile />} onClick={() => {
this.textInput.click();
}}/>
<span id="fileName" ref={(span) => { this.fileName = span; }}></span>
</label>
<SaveButton label="Import" redirect={false} submitOnEnter={true} />
</FormTab>
</TabbedForm>
</Create>

The easiest way would be to keep a single button here. You may add a text inside the importation tab explaining that clicking on save will import the file.
However, you still have to deal with the redirection. To do so, you'll have to implement a custom SaveButton:
Copy the code of the default SaveButton into a SaveOrImportButton file.
Update its mapStateToProps function and use redux-form getFormValues selector to inspect the form values and determine whether its an importation.
Use this knowledge to customize the button:
You may update the label to Import if the user selected a file. The label will update immediately after the file field gets dirty.
You can change the redirect value at L22.
Use this button inside a Toolbar component and pass this component to the toolbar prop of the Create component.

Related

Can't get Formik form to work with Material UI

I'm struggeling with making my Formik form work. Here a part of my code:
import { Formik, Form as FormikForm, Field } from "formik";
import {TextField} from "#mui/material";
<Formik
initialValues={{
name: "test",
}}
onSubmit={this.onSubmit}
>
{({ values,handleChange }) => (
<FormikForm>
<Field
component={TextField}
name="name"
label="Name"
fullWidth
></Field>
<Button
color="success"
variant="contained"
type="submit"
onClick={() => {
console.log(values);
}}
>
Erstellen
</Button>
</FormikForm>
)}
</Formik>
It seems like its having trouble connecting the values state to the Field value, since the initialValue isn't displayed in the names field. When i submit, it logs {name: 'test'} to console, no matter what i enter in the input field.
Edit 1:
I also have a very similar form that works. The only difference between the two that i can think of is: the working one is a .jsx while this one is .tsx. Dont know if that has anything to do with it.
According to the Field documentation you need to spread the field and pass it to the component like this:
import { Formik, Form as FormikForm, Field } from "formik";
import { Button, TextField } from "#mui/material";
const MuiTextField = ({ field, form, ...props }) => {
return <TextField {...field} {...props} />;
};
const MyComponent = () => {
return (
<Formik
initialValues={{
name: "test"
}}
onSubmit={(values) => {
console.log(values);
}}
>
{({ values, handleChange }) => (
<FormikForm>
<Field
component={MuiTextField}
name="name"
label="Name"
fullWidth
></Field>
<Button
color="success"
variant="contained"
type="submit"
onClick={() => {
console.log(values);
}}
>
Erstellen
</Button>
</FormikForm>
)}
</Formik>
);
};
export default MyComponent;
You can take a look at this sandbox for a live working example of this solution.
Like Ahmet pointed out, the problem seems to be that the field prop needs to be spread (see his answer). However i found, that using as instead of component works too and doesnt need spreading.
<Field
as={TextField}
name="name"
label="Name"
fullWidth
></Field>

How to change value of input in Admin on Rest from another component in Create form?

I've reduced this to a very simple case for ease of discussion. I have a simple create form with 1 field and 1 button. I would like the button to set the value of the TextInput to "Hello" without submitting the form. How is this possible in admin on rest? eg:
export const TestCreate = (props) => (
<Create title={<TestTitle />} {...props}>
<SimpleForm>
<TextInput source="title" />
<TitleSetterButton />
</SimpleForm>
</Create>
);
Been struggling with this for a while - it should be simple so hopefully there's an easy answer.
I was able to setup a Sample form using their example application
// in src/posts.js
import React from 'react';
import { List, Edit, Create, Datagrid, ReferenceField, TextField, EditButton, DisabledInput, LongTextInput, ReferenceInput, required, SelectInput, SimpleForm, TextInput } from 'admin-on-rest';
import FlatButton from 'material-ui/FlatButton';
export const PostList = (props) => (
<List {...props}>
<Datagrid>
<TextField source="id" />
<ReferenceField label="User" source="userId" reference="users">
<TextField source="name" />
</ReferenceField>
<TextField source="title" />
<TextField source="body" />
<EditButton />
</Datagrid>
</List>
);
const PostTitle = ({ record }) => {
return <span>Post {record ? `"${record.title}"` : ''}</span>;
};
export class Testing extends React.Component {
render() {
return <input type="text" />
}
}
export class PostCreate extends React.Component {
componentDidMount() {
console.log(this)
}
constructor(props) {
super(props);
this.handleCustomClick = this.handleCustomClick.bind(this);
// this.fieldOptions = this.fieldOptions.bind(this);
}
handleCustomClick() {
this.fields.title.handleInputBlur("tarun lalwani");
this.fields.body.handleInputBlur("this is how you change it!");
}
render () {
let refOptions = {ref: (e) => {
if (e && e.constructor && e.props && e.props.name) {
this.fields = this.fields || {};
this.fields[e.props.name] = e;
}
}}
return (
<Edit title={<PostTitle />} {...this.props}>
<SimpleForm>
<DisabledInput source="id" />
<ReferenceInput label="User" source="userId" reference="users" validate={required}>
<SelectInput optionText="name" />
</ReferenceInput>
<TextInput source="title" options={refOptions}/>
<LongTextInput source="body" options={refOptions}/>
<FlatButton primary label="Set Value" onClick={this.handleCustomClick} />
</SimpleForm>
</Edit>
);
}
}
Before click of the button
After clicking Set Value
And then after clicking Save you can see the actual changed values get posted

How to solve this issue with redux form? It shows syntax error

We are going to use redux form for all our app's forms. The app may have 5 different forms for different purposes. The trouble with this first form is that it shows syntax error. But before implementing redux form it was worked with the same syntax. What is the problem with this code?
import React, {Component} from "react";
import {Text, Image, KeyboardAvoidingView, Platform,View} from "react-native";
import {
Content,
Form,
Item,
Input,
Icon,
Button,
ListItem,
Row,
Col,
Grid,
Toast,
Container,
Left,
Right,
Body
} from "native-base";
import styles from "../styles/formstyle";
import { Field, reduxForm } from "redux-form";
const required = value => (value ? undefined : "Required");
const maxLength = max => value => (value && value.length > max ? `Must be ${max} characters or less` : undefined);
const maxLength15 = maxLength(15);
const minLength = min => value => (value && value.length < min ? `Must be ${min} characters or more` : undefined);
const minLength8 = minLength(8);
const email = value =>
value && !/^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ? "Invalid email address" : undefined;
const alphaNumeric = value => (value && /[^a-zA-Z0-9 ]/i.test(value) ? "Only alphanumeric characters" : undefined);
class SigninScreen extends Component {
static navigationOptions = {
gesturesEnabled: false,
};
renderInput({ input, label, type, meta: { touched, error, warning } }) {
return (
<Item style={styles.item}
error={error && touched}
>
<Icon
active
name="mail"
style={styles.icon}
/>
<Input
{...input.name="email"}
ref={c => (this.textInput = c)}
placeholder="Email"
placeholderTextColor="#a4916d"
style={styles.input}
/>
</Item>
<Item style={styles.item} error={error && touched}>
<Icon
active
name="lock"
style={styles.icon}
/>
<Input
{...input.name="password"}
ref={c => (this.textInput = c)}
secureTextEntry={true}
placeholder="Password"
placeholderTextColor="#a4916d"
style={styles.input}
/>
</Item>
);
}
login() {
if (this.props.valid) {
this.props.navigation.navigate("Drawer");
} else {
Toast.show({
text: "Enter Valid Username & password!",
duration: 2000,
position: "top",
textStyle: { textAlign: "center" },
});
}
}
render() {
return (
<Image style={background.img} source={require("../img/cover.jpg")}>
<Container style={styles.content}>
<Form>
<Field name="email"
validate={[email, required]} />
<Field
name="password"
component={this.renderInput}
validate={[alphaNumeric, minLength8, maxLength15, required]}
/>
</Form>
<ListItem
style={styles.list}
>
<Left>
<Button
primary
full
style={{width:"90%"}}
onPress={() => this.props.navigation.navigate("Signup")}
>
<Text style={{color: "#0dc49d"}}>fb</Text>
</Button>
</Left>
<Body/>
<Right>
<Button
danger
full
onPress={() =>
this.props.navigation.navigate("Forgetpass")}
>
<Text style={{color: "#0dc49d"}}>google</Text>
</Button>
</Right>
</ListItem>
<Button
full
style={{backgroundColor: "#0dc49d", width:"90%"}}
onPress={() => this.login()}
>
<Text style={{color:"#ffffff"}}>Sign In</Text>
</Button>
</Container>
</Image>
);
}
}
export default reduxForm({
form: 'test'
})(SigninScreen)
It says JSX elements must be wrapped an enclosing tag. Eslint shows the second component inside the renderinput. I am using it with native-base. What can cause this error? Also, can you check please if the communication within renderinput and fields component is right? I am not sure that after solving the syntax error this code will work :(
Thanks in advance!
renderInput method is returning two different items. You need to wrap them into a single wrapped component like the error is saying.
Example
renderInput({ input, label, type, meta: { touched, error, warning } }) {
return (
<View>
<Item style={styles.item} error={error && touched}>
<Icon active name="mail" style={styles.icon} />
<Input {...input.name="email"} ref={c => (this.textInput = c)} placeholder="Email" placeholderTextColor="#a4916d" style={styles.input} />
</Item>
<Item style={styles.item} error={error && touched}>
<Icon active name="lock" style={styles.icon} />
<Input {...input.name="password"} ref={c => (this.textInput = c)} secureTextEntry={true} placeholder="Password" placeholderTextColor="#a4916d" style={styles.input} />
</Item>
</View>
);
}

How to dispatch an action that changes the state of a component from its parent component?

I'm trying to implement a modal dialog that asks if I'm sure if I want to delete or not an item in application. I've this components:
const Options = item => (
<OptionsMenu>
<MenuItem onClick={_ => {
console.log(`Deleting item ${JSON.stringify(item)}`)
}}>
<IconButton aria-label="Delete" color="accent">
<DeleteIcon />
</IconButton>
<Typography>
Eliminar
</Typography>
</MenuItem>
<DeleteDialog
item={item}
/>
</OptionsMenu>
)
And my dialog component is:
const DeleteDialog = props => (
<div>
<Button onClick={() => {
this.props.openDeleteDialog(this.props.item)
}}>Delete</Button>
<Dialog open={this.props.open} onRequestClose={this.props.cancelDeleteData}>
<DialogTitle>{"DELETE"}</DialogTitle>
<DialogContent>
<DialogContentText>
Are you sure you want to delete the item: {this.props.item.name}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.props.cancelDeleteData} color="primary">
Cancel
</Button>
<Button onClick={this.props.deleteData(this.props.item)} color="primary">
Delete
</Button>
</DialogActions>
</Dialog>
</div>
);
const mapStateToProps = state => ({
open: state.item.delete.open,
})
const mapDispatchToProps = dispatch => ({
...deleteDispatchesForScope(scopes.ITEM, dispatch)
})
What I want is to dispatch the openDeleteDialog action, that sets the open state to true, from the Options component in a way that I will allow me to reuse the modal Dialog in other components.
I'm using react-redux and material-ui v1 for this.
In order to have more reusable components, I would decouple the DeleteDialog from the OptionsMenu, and rely on a ParentComponent to pass down the props required for each child:
<ParentComponent>
<OptionsMenu>
<MenuItem onClick={this.props.openDeleteDialog}>Eliminar</MenuItem>
</OptionsMenu>
<DeleteDialog
open={this.props.isDeleteDialogOpen}
item={this.props.item}
onDelete={this.props.deleteData}
/>
</ParentComponent>

How can I create a SaveButton which returns to me to a special URL

I know that I can use an url as redirect parameter for an SaveButton like this:
const ResourcePropertyEditToolbar = props => <Toolbar {...props} >
<SaveButton />
<SaveButton label="save and resource" redirect={"/resource/21"}
submitOnEnter={false} raised={false} />
</Toolbar>;
As you see the "/resource/21" is hard coded and it works (for this entry ;-) How can I dynamically create the url? The value itself is included in the current data set which is edited, like this:
export const ResourcePropertyEdit = (props) => (
<Edit {...props} >
<SimpleForm toolbar={<ResourcePropertyEditToolbar />}>
<NumberInput source="position" defaultValue="1"/>
<TextInput source="property_name" validate={required}/>
<ReferenceInput label="Resource" source="fk_resource"
reference="resource">
<AutocompleteInput optionText="shortname"/>
</ReferenceInput>
</SimpleForm>
</Edit>
);
It is the value of the selected fk_resource.
Here is the code snippet for the base Form with the ReferenceManyField Entry, the target is to jump back to this view after editing a resource_property.
export const ResourceEdit = (props) => (
<Edit {...props}>
<SimpleForm>
<TextInput source="shortname" validate={required}/>
<ReferenceManyField target="fk_resource"
reference="resource_property" >
<Datagrid>
<NumberField source="position"/>
<TextField source="property_name"/>
<ReferenceField label="Property" source="fk_property" reference="property" allowEmpty>
<TextField source="shortname"/>
</ReferenceField>
<EditButton/>
</Datagrid>
</ReferenceManyField>
</SimpleForm>
</Edit>
);
Thanks for any help
The current data set is called the record in AOR. If the URL is in the record you can access it simply by
const ResourcePropertyEditToolbar = props => <Toolbar {...props} >
<SaveButton />
<SaveButton label="save and resource" redirect={props.record.url ? props.record.url : null}
submitOnEnter={false} raised={false} />
</Toolbar>

Resources