Admin on rest custom button

Question

I would like to make a custom button that would be used to fetch. I want the button to be usable like this:

export const LogList = (props) => (
    <List {...props} perPage={100} title="Logs and Reports" filters={< FileFilter/>}>
        <Datagrid>
            <TextField source="inputfile" label="Input File" />
            <TextField source="cycle" label="Cycle" />
            <TextField source="job" label="Job" />
            <TextField source="name" label="File Name" />
            <ShowButton/>
            <JobCancel/>
        </Datagrid>
    </List>
);

Where is my button is <JobCancel/> up above (similar to how ShowButton is implemented). I want the button to fetch(controller_service/archivedfiles/${id}, { method: 'DELETE', body:{} }); on click.

Is something like this possible? P.S. I am new to Admin on rest

Answer 1

You can also find an example for custom actions in the demo repository for reviews (accept, reject): https://github.com/marmelab/admin-on-rest-demo/tree/master/src/reviews

Answer 2

Misread your question. So am editing my answer.

I have custom button for my list view.

It's a straightforward Redux connected component.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import RaisedButton from 'material-ui/RaisedButton';
import { editorAssign as editorAssignAction} from '../customActions/EditorAssignActions'
import styles from '../styles/styles'

class EditorAssignButton extends Component {
  constructor(props){
    super(props);
    this.state = { disabled: false };
  }

  handleClick = () => {
    const { editorAssign, record } = this.props
    editorAssign(record.id) //call the action
    this.setState({
      disabled: true
    })
  }
  render() {
    const editorAssignStyle = styles.editorAssignStyle;
    return (<RaisedButton label='Add To Edit'
                          onClick={this.handleClick}
                          disabled={ this.state.disabled }
                          primary={true}
                          />)
  }
}

EditorAssignButton.propTypes = {
  editorAssign: PropTypes.func,
  record: PropTypes.object
}

export default connect(null, {
  editorAssign: editorAssignAction
})(EditorAssignButton)

AOR has documentation on how to write custom actions and trigger side effects with Sagas.

https://marmelab.com/admin-on-rest/Actions.html

DELETE is an action available with AOR Rest so your requirement should be quite standard.

Here is the EditorAssign view. It is a straightforward list and datagrid component

import React from 'react';
import { ReferenceField,
        ChipField,
        SelectInput,
        ReferenceInput,
        TextField,
        List,
        Filter, 
        Datagrid} from 'admin-on-rest';

import AssignTaleEditToSelf from '../buttons/AssignTaleEditToSelf'

const EditorAssignView = (props) => {
    return (
      <List {...props} title="Fresh Tales" perPage={20} sort={{ field: 'id', order: 'ASC' }} filter={{"status": "NEW"}} filters={ <EditorFilter /> } >
        <Datagrid >
          <TextField source="id" label="id" style={{ textAlign: 'center'}} />
          <TextField source="taleTitle" label="Title" />
          <TextField source="taleText" label="Content" style={{maxWidth: '150px'}} />
          <ReferenceField label="Writer" source="writer_id" reference="appUsers">
            <ChipField source="name" />
          </ReferenceField>
          <AssignTaleEditToSelf label="Assign To Self" />
        </CustomDatagrid>
      </List>
    )
  }
}