管理员休息自定义按钮

Question

我想制作一个用于获取的自定义按钮。我希望按钮可以像这样使用：

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>
);

上面 <JobCancel/> 我的按钮在哪里（类似于 ShowButton 的实现方式）。我希望按钮在点击时 fetch(controller_service/archivedfiles/${id}, { method: 'DELETE', body:{} });。

这样的事情可能吗？ P.S。我是管理员的新手

Answer 1

误读了你的问题。所以我正在编辑我的答案。

我的列表视图有自定义按钮。

这是一个简单的 Redux 连接组件。

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 有关于如何使用 Sagas 编写自定义操作和触发副作用的文档。

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

DELETE 是 AOR Rest 可用的操作，因此您的要求应该是非常标准的。

这是 EditorAssign 视图。它是一个简单的列表和数据网格组件

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>
    )
  }
}

Answer 2

您还可以在演示存储库中找到自定义操作的示例以供审核（接受、拒绝）：https://github.com/marmelab/admin-on-rest-demo/tree/master/src/reviews

管理员休息自定义按钮

Admin on rest custom button

admin-on-rest