Yaniv Grama
Yaniv Grama

Reputation: 21

Is there a way to edit 'record' object in List view at the client side in Admin-on-rest?

I'm using Admin-on-rest (1.3.2) and I'm trying to build a custom list view with input text fields and a 'Save' button.

By clicking 'Save' I want it to take all the values in the input fields for the current row and send it to the backend.

I'm struggling to share the fields state so that the 'Save' button will get those values and do it propose.

import React from 'react';
import {Datagrid, List} from 'admin-on-rest'
import TextField from 'material-ui/TextField/TextField.js';
import RaisedButton from 'material-ui/RaisedButton';

export const PostList = (props) => (
  <List title="IMDB Top Feature Films 2017" {...props}>
    <Datagrid>
      <InputTextField source="id"/>
      <InputTextField source="title"/>
      <InputTextField source="body"/>
      <SaveButton />
    </Datagrid>
  </List>
);

const InputTextField = ({source, record = {}}) => <TextField defaultValue={record[source]}/>;
const SaveButton = ({source, record = {}}) => <RaisedButton label="Save"/>;

List with input field example:

List with input field example

Upvotes: 2

Views: 1093

Answers (1)

simbathesailor
simbathesailor

Reputation: 3687

import React from 'react';
import {Datagrid, List} from 'admin-on-rest'
import TextField from 'material-ui/TextField/TextField.js';
import RaisedButton from 'material-ui/RaisedButton';

export class PostList extends React.Component {
  constructor() {
    this.state = {
     id: "",
     title: "",
     body: "",
    };
  }

  setValueInState = (field, value) => {
    this.setState({
      [field]: value
    });
  };

  save = () => {
    const {id, title, body} = this.state;
    // write your saving log here
  };

  render() {
    return (
      <List title="IMDB Top Feature Films 2017" {...props}>
        <Datagrid>
          <InputTextField setValueInState={setValueInState} source="id"/>
          <InputTextField setValueInState={setValueInState} source="title"/>
          <InputTextField setValueInState={setValueInState} source="body"/>
          <SaveButton save={save} />
        </Datagrid>
      </List>
    );
  } 
}

const InputTextField = ({source.setValueInState, record = {}}) => <TextField defaultValue={record[source]} onChange={setValueInState}/>;

const SaveButton = ({source, record = {}}) => <RaisedButton label="Save"/>;

Please check for the brackets. Idea is on the similar lines that I showed in the code.

Upvotes: 2

Related Questions