Getting a dialog on click of Edit Button on admin-on-rest

Question

I am working on an application using admin-on-rest framework. For editing an entry on a Resource we provide XXXEdit, XXXShow, XXXCreate props to it. My requirement is that when I click on an Edit button in List view on any entry I should get a Dialog box with the parameters in XXXEdit instead of going to a new page. I tried doing this by using a Dialog in XXXEdit component

 <Edit title={<RoleTitle />} {...props}>
      <SimpleForm>
        <Dialog
          title="Dialog With Actions"
          actions={actions}
          modal={false}
          open={true}
        >
          <TextInput source="id" />
          <TextInput source="name" validate={required} />
          .
          .//some more fields
        </Dialog>
      </SimpleForm>
    </Edit>

I get errors like The TextInput component wasn't called within a redux-form If I use a DisabledInput then I get an error cannot read value of undefined

How do I go on with this?

score 1 · Answer 1 · answered Nov 06 '17 at 07:56

I do not think you can use Simpleform for this. You will need to create a custom Form using Redux-Form. Look at the bottom answer that documents the final answer.

This might help you How to richly style AOR Edit page

Instead of creating a page. You are creating a component that connects to the Redux state and displays as a dialog box.

score 1 · Accepted Answer · answered Dec 08 '17 at 07:28

I tried to resolve this using HOC and react-router.

I created a button using AOR button and provided a containerElement

containerElement={
          <Link
            key={record.id}
            to={{
              ...{
                pathname: `${basePath}/${encodeURIComponent(record.id)}`
              },
              ...{ state: { modal: true } }
            }}
          />
        }

I created a route like this where DialogRoleEdit is an AOR edit component wrapped with a dialog HOC below .

<Route
    exact
    path="/roles/:id"
    render={routeProps => {
      return !!(
        routeProps.location.state && routeProps.location.state.modal
      ) ? (
        <Restricted authClient={authClient} location={routeProps.location}>
          <div>
            <RoleList resource={"roles"} {...routeProps} />
            <DialogRoleEdit resource={"roles"} {...routeProps} />
          </div>
        </Restricted>
      ) : (
        <Restricted authClient={authClient} location={routeProps.location}>
          <RoleEdit resource={"roles"} {...routeProps} />
        </Restricted>
      );
    }}
  />

Finally an HOC

handleClose = () => {
  this.props.history.goBack();
};
render() {
  const actions = [
    <FlatButton label="Cancel" primary={true} onClick={this.handleClose} />
  ];
  return (
    <Dialog>
      <WrappedComponent/>
    </Dialog>
  )

}

We need to provide edit prop for this resource in App.js

edit={DialogUserEdit}

Getting a dialog on click of Edit Button on admin-on-rest

2 Answers2